fix: map ink transparency to SVG opacity

src/onenote/export/export.test.ts

@@ -103,7 +103,7 @@ describe('OneNote export serializers', () => {
     expect(document.querySelectorAll('svg.ink')).toHaveLength(1);
     expect(
       document.querySelector('polyline')?.getAttribute('stroke-opacity')
-    ).toBe('0.496');
+    ).toBe('0.498');
     expect(
       document
         .querySelector('meta[http-equiv="Content-Security-Policy"]')
@@ -111,6 +111,30 @@ describe('OneNote export serializers', () => {
     ).toContain("default-src 'none'");
   });
 
+  it('maps the full ink transparency byte range to SVG opacity', () => {
+    const snapshot = fixtureSnapshot();
+    const ink = snapshot.sections[0]!.pages[0]!.blocks.find(
+      (block) => block.kind === 'ink'
+    );
+    if (!ink || ink.kind !== 'ink') throw new Error('Ink fixture is missing');
+    ink.strokes[0]!.transparency = 0;
+    ink.strokes.push({
+      ...ink.strokes[0]!,
+      points: ink.strokes[0]!.points.map((point) => ({ ...point })),
+      transparency: 255,
+    });
+
+    const document = new DOMParser().parseFromString(
+      serializeOneNoteSemanticHtml(snapshot),
+      'text/html'
+    );
+    expect(
+      [...document.querySelectorAll('polyline')].map((stroke) =>
+        stroke.getAttribute('stroke-opacity')
+      )
+    ).toEqual(['1', '0']);
+  });
+
   it('creates a deterministic, path-safe static notebook ZIP', () => {
     const snapshot = fixtureSnapshot();
     const first = createOneNoteStaticNotebookZip(snapshot);

src/onenote/export/serializers.ts

@@ -573,7 +573,7 @@ function svgStroke(stroke: OneNoteInkBlock['strokes'][number]): string {
     stroke.transparency !== undefined && Number.isFinite(stroke.transparency)
       ? Math.max(0, Math.min(255, stroke.transparency))
       : undefined;
-  const opacity = transparency === undefined ? 1 : (255 - transparency) / 256;
+  const opacity = transparency === undefined ? 1 : 1 - transparency / 255;
   if (points.length === 1) {
     return `<circle cx="${formatNumber(points[0]!.x)}" cy="${formatNumber(points[0]!.y)}" r="${formatNumber(width / 2)}" fill="${color}" fill-opacity="${formatNumber(opacity)}"/>`;
   }