@celestia-island/hikari 0.55.21 → 0.55.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.21",
+  "version": "0.55.23",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkInput.password.test.tsx

@@ -3,7 +3,7 @@ import { Comment, createApp, createVNode, h, nextTick, ref, type Slot } from "vu
 
 import HkInput from "./HkInput";
 import HkPasswordSurface from "./HkPasswordSurface";
-import { NOISE_TILE_H, NOISE_TILE_W } from "./revealKinematogram";
+import { FILTER_PEDESTAL_L, NOISE_TILE_H, NOISE_TILE_W } from "./revealKinematogram";
 import { passwordLevel } from "../utils/password";
 import { setReducedMotion } from "../runtime/animationBus";
 
@@ -1334,11 +1334,13 @@ function stubRecordingContexts(opts: { linearGradients?: boolean } = {}) {
      * carved out of the ink spatter (R3 F2: without this the password
      * would render INVISIBLE on a real canvas, silently). */
     compositeOps: string[];
-    /** Gradient stop colors, in order — pins the halo's THEME color
-     * (white over a dark ground, black over a light one). */
+    /** Gradient stop colors, in order — pins the halo's color (the
+     * filter halo is ALWAYS white). */
     gradientStops: string[];
     /** Font string assignments — pins the BOLD glyph aperture. */
     fonts: string[];
+    /** arc() radii, in call order — pins the spatter dot SIZE band. */
+    arcRadii: number[];
     fillStyles: string[];
     clips: Array<{ x: number; y: number; w: number; h: number }>;
     translates: number[];
@@ -1361,6 +1363,7 @@ function stubRecordingContexts(opts: { linearGradients?: boolean } = {}) {
         compositeOps: [],
         gradientStops: [],
         fonts: [],
+        arcRadii: [],
         fillStyles: [],
         clips: [],
         translates: [],
@@ -1380,7 +1383,7 @@ function stubRecordingContexts(opts: { linearGradients?: boolean } = {}) {
       translate: (x: number) => r.translates.push(x),
       rotate: () => {},
       beginPath: () => {},
-      arc: () => {},
+      arc: (_x: number, _y: number, radius: number) => r.arcRadii.push(radius),
       fill: () => {},
       fillRect: () => {
         if (gradientArmed) {
@@ -1582,10 +1585,10 @@ describe("HkInput password reveal strategies", () => {
 
   it("filter (default) keeps glyphs off the visible canvas: counter-drifting spatter, pedestal, halo", async () => {
     // The default reveal: STATIC BOLD glyph apertures filled with one
-    // GRAYSCALE spatter texture, over a statistically matched spatter
-    // field drifting the opposite way on the theme-anchored ground;
-    // the glyphs shifted by a small pedestal toward the theme's
-    // visibility direction with a halo band around the row. Glyph
+    // BRIGHT GRAYSCALE spatter texture, over a statistically matched
+    // DIM spatter field drifting the opposite way on the uniform
+    // near-black ground; the glyphs lifted by a LARGE brightening
+    // pedestal with a white halo band around the row. Glyph
     // geometry must NEVER reach the visible canvas (mask → source-in
     // stamp only) — that is the screenshot contract. Math.random is
     // pinned at 0.5 so the dot lightness equals the exact layer base
@@ -1622,15 +1625,20 @@ describe("HkInput password reveal strategies", () => {
       expect(vis.gradientFills, "halo band drawn").toBeGreaterThan(0);
       expect(vis.drawImages).toBeGreaterThan(0);
       // The two spatter tiles: bg first, ink second (deterministic
-      // draw order), each with hundreds of solid-color dot fills.
-      // happy-dom resolves no computed color, so the ink stays at the
-      // pre-sync fallback (a DARK ink) — the effective theme here is
-      // LIGHT: near-white ground, dark-gray speckle, and the pedestal
-      // shifts the glyph layer DARKER (visibility direction).
+      // draw order), each with hundreds of solid-color dot fills. The
+      // anchors are UNIFORM (white-on-black reading in every theme):
+      // near-black ground, dim-gray speckle, and the pedestal lifts
+      // the glyph layer BRIGHTER. happy-dom resolves no computed
+      // color, so the ink stays at the pre-sync fallback (a DARK ink)
+      // — irrelevant now, the anchors follow nothing.
       const tiles = allRecs.filter(
         (r) => r.fillStyles.filter((s) => s.startsWith("rgb(")).length > 100,
       );
       expect(tiles.length, "exactly two spatter tiles").toBe(2);
+      expect(
+        tiles[0]!.fillStyles.length,
+        "both layers carry the same dot density",
+      ).toBe(tiles[1]!.fillStyles.length);
 
       // Backing-store tripwire (R3 F1): a shrunken tile silently
       // drops ~75% of its dots and desyncs the pattern period from
@@ -1653,9 +1661,16 @@ describe("HkInput password reveal strategies", () => {
       const bgMean = meanOf(tiles[0]!);
       const inkMean = meanOf(tiles[1]!);
       expect(
-        bgMean - inkMean,
-        `light theme: glyph pedestal shifts DARKER (bg ${bgMean.toFixed(1)} vs ink ${inkMean.toFixed(1)})`,
+        inkMean - bgMean,
+        `glyph pedestal lifts BRIGHTER (bg ${bgMean.toFixed(1)} vs ink ${inkMean.toFixed(1)})`,
       ).toBeGreaterThan(8);
+      // Magnitude pin (R1 F4): the pedestal is LARGE by design (26 L ≈
+      // 66 rgb here) — a revert to the old small 10 L pedestal (~26
+      // rgb) must go red, not just stay above the sign threshold.
+      expect(
+        inkMean - bgMean,
+        "the bright-text pedestal is LARGE, not merely positive",
+      ).toBeGreaterThan(36);
       // Strict grayscale: no theme hue may survive into the spatter —
       // every solid fill is a NEUTRAL gray (r === g === b).
       for (const tile of tiles) {
@@ -1667,24 +1682,38 @@ describe("HkInput password reveal strategies", () => {
           ).toBe(true);
         }
       }
-      // Theme anchor: the LIGHT theme's ground is near-white (first
-      // fill on the bg tile is the ground wash; L 93 → rgb ≈ 237).
+      // Ground anchor: ALWAYS near-black (first fill on the bg tile
+      // is the ground wash; L 10 → rgb ≈ 26).
       const [gr, gg, gb] = tiles[0]!.fillStyles[0]!.slice(4, -1).split(",").map(Number);
-      expect(gr!, "light-theme ground is near-white").toBeGreaterThan(230);
-      expect(gr!).toBeLessThan(245);
+      expect(gr!, "ground is ALWAYS near-black").toBeGreaterThan(18);
+      expect(gr!).toBeLessThan(34);
       expect(gg!).toBe(gr);
       expect(gb!).toBe(gr);
-      // Halo color follows the theme: BLACK over a light ground —
-      // peak AND endpoints share the theme channel (R2 F1).
-      expect(vis.gradientStops, "light theme paints a BLACK halo").toContain("rgba(0,0,0,0.1)");
-      expect(vis.gradientStops).not.toContain("rgba(255,255,255,0.1)");
-      expect(vis.gradientStops, "light halo endpoints fade on BLACK").toContain("rgba(0,0,0,0)");
-      expect(vis.gradientStops).not.toContain("rgba(255,255,255,0)");
+      // Halo is ALWAYS white — peak AND endpoints (R2 F1).
+      expect(vis.gradientStops, "halo is always WHITE").toContain("rgba(255,255,255,0.1)");
+      expect(vis.gradientStops).not.toContain("rgba(0,0,0,0.1)");
+      expect(vis.gradientStops, "halo endpoints fade on WHITE").toContain("rgba(255,255,255,0)");
+      expect(vis.gradientStops).not.toContain("rgba(0,0,0,0)");
       // The glyph apertures rasterize BOLD.
       expect(
         mask!.fonts.some((f) => f.startsWith("bold ")),
         "glyph apertures rasterize bold",
       ).toBe(true);
+      // Dot size band (R1 F6): ~0.6–1.4× the stroke width — dpr is 1
+      // in this environment (guarded below), so every spatter radius
+      // sits in the CSS band [1.2, 2.8]. NOTE: with random pinned at
+      // 0.5 every radius is the band MIDPOINT — the min-side teeth
+      // live in the light-ink test's unmocked band check (R2 F1).
+      expect(window.devicePixelRatio || 1).toBe(1);
+      for (const tile of tiles) {
+        expect(tile.arcRadii.length, "spatter dots drawn as arcs").toBeGreaterThan(1000);
+        for (const rad of tile.arcRadii) {
+          expect(
+            rad >= 1.2 && rad <= 2.8,
+            `dot radius inside the stroke band, got ${rad}`,
+          ).toBe(true);
+        }
+      }
       // The DOM input still never flips.
       expect(input.type).toBe("password");
       // Bus frames advance BOTH layer drifts (fresh pattern phases on
@@ -1720,8 +1749,8 @@ describe("HkInput password reveal strategies", () => {
   });
 
   /**
-   * Force the computed `.color` (the reveal's ink + theme proxy) while
-   * forwarding every other computed-style query to the real engine.
+   * Force the computed `.color` (the reveal's ink) while forwarding
+   * every other computed-style query to the real engine.
    * Returns a restore function.
    */
   function forceInkColor(color: string): () => void {
@@ -1743,12 +1772,11 @@ describe("HkInput password reveal strategies", () => {
     };
   }
 
-  it("filter inverts its grayscale anchors for a dark theme (light field ink)", async () => {
-    // Light field ink = a dark theme: near-black ground, light-gray
-    // speckle, a BRIGHTER glyph pedestal and a WHITE halo — every
-    // anchor flips with the theme while the mechanism stays identical.
-    // The theme proxy is the computed field-ink lightness (>= 50 =
-    // dark theme), so feed a light ink through getComputedStyle.
+  it("filter anchors white-on-black regardless of the field ink (light ink)", async () => {
+    // UNIFORMITY pin: the anchors follow NOTHING — feed a LIGHT field
+    // ink through getComputedStyle and the reveal must still paint the
+    // same near-black ground, dim-gray speckle, brighter pedestal
+    // and white halo as the default (dark-ink) mount.
     const restoreInk = forceInkColor("rgb(148, 233, 211)");
     const rec = stubRecordingContexts();
     try {
@@ -1778,7 +1806,7 @@ describe("HkInput password reveal strategies", () => {
       const inkMean = meanOf(tiles[1]!);
       expect(
         inkMean - bgMean,
-        `dark theme: glyph pedestal shifts BRIGHTER (bg ${bgMean.toFixed(1)} vs ink ${inkMean.toFixed(1)})`,
+        `pedestal lifts BRIGHTER under a light ink too (bg ${bgMean.toFixed(1)} vs ink ${inkMean.toFixed(1)})`,
       ).toBeGreaterThan(8);
       // Strict grayscale on the dark side too (R2 F4).
       for (const tile of tiles) {
@@ -1787,6 +1815,33 @@ describe("HkInput password reveal strategies", () => {
           expect(r8 === g8 && g8 === b8, `dark spatter must be grayscale, got ${fill}`).toBe(true);
         }
       }
+      // Dot size band with REAL randomness (R2 F1): the default test's
+      // pinned 0.5 random freezes every radius at the band MIDPOINT,
+      // which is blind on the min side — here thousands of uniform
+      // samples must ALL sit in [1.2, 2.8] AND the empirical extremes
+      // must touch both edges, so a shrunken rMin (sub-pixel speckle)
+      // or a blown rMax both go red. dpr is 1 in this environment —
+      // the guard makes that assumption explicit (R2 F2).
+      expect(window.devicePixelRatio || 1).toBe(1);
+      {
+        let min = Infinity;
+        let max = -Infinity;
+        let count = 0;
+        for (const tile of tiles) {
+          for (const rad of tile.arcRadii) {
+            if (rad < min) min = rad;
+            if (rad > max) max = rad;
+            count++;
+            expect(
+              rad >= 1.2 && rad <= 2.8,
+              `dot radius inside the stroke band, got ${rad}`,
+            ).toBe(true);
+          }
+        }
+        expect(count, "thousands of spatter dots sampled").toBeGreaterThan(3000);
+        expect(min, "the small edge of the band is actually used").toBeLessThan(1.5);
+        expect(max, "the large edge of the band is actually used").toBeGreaterThan(2.5);
+      }
       // Matched texture statistics (R2 F2): the two layers must carry
       // the SAME dot count and (pedestal aside) the same lightness
       // RANGE — a diverging spread/density is the single-frame
@@ -1809,26 +1864,27 @@ describe("HkInput password reveal strategies", () => {
         `matched lightness spread (bg ${bgStats.range} vs ink ${inkStats.range})`,
       ).toBeLessThan(6);
       // The pedestal lifts ground AND dots together: the two grounds
-      // sit exactly one pedestal apart (~10 L ≈ 25 rgb), so an ink
+      // sit exactly one pedestal apart (26 L ≈ 66 rgb at the current
+      // tuning; the threshold derives from the constant), so an ink
       // ground that loses or doubles its shift goes red (R2 C1b).
       const groundOf = (r: (typeof tiles)[number]) =>
         Number(r.fillStyles[0]!.slice(4, -1).split(",")[0]);
       const groundDelta = Math.abs(groundOf(tiles[1]!) - groundOf(tiles[0]!));
+      const pedRgb = FILTER_PEDESTAL_L * 2.55;
       expect(
-        groundDelta >= 20 && groundDelta <= 30,
-        `grounds one pedestal apart (delta ${groundDelta})`,
+        groundDelta >= pedRgb - 6 && groundDelta <= pedRgb + 6,
+        `grounds one pedestal apart (delta ${groundDelta}, want ~${pedRgb.toFixed(0)})`,
       ).toBe(true);
-      // Near-black ground: L 10 → rgb ≈ 26.
+      // Near-black ground regardless of the ink: L 10 → rgb ≈ 26.
       const [gr, gg, gb] = tiles[0]!.fillStyles[0]!.slice(4, -1).split(",").map(Number);
-      expect(gr!, "dark-theme ground is near-black").toBeGreaterThan(18);
+      expect(gr!, "ground near-black under a light ink").toBeGreaterThan(18);
       expect(gr!).toBeLessThan(34);
       expect(gg!).toBe(gr);
       expect(gb!).toBe(gr);
-      // White halo over the dark ground — peak AND endpoints share
-      // the theme channel (an endpoint desync must go red, R2 F1).
-      expect(vis.gradientStops, "dark theme paints a WHITE halo").toContain("rgba(255,255,255,0.1)");
+      // White halo under a light ink too — peak AND endpoints (R2 F1).
+      expect(vis.gradientStops, "halo stays WHITE under a light ink").toContain("rgba(255,255,255,0.1)");
       expect(vis.gradientStops).not.toContain("rgba(0,0,0,0.1)");
-      expect(vis.gradientStops, "dark halo endpoints fade on WHITE").toContain("rgba(255,255,255,0)");
+      expect(vis.gradientStops, "halo endpoints fade on WHITE").toContain("rgba(255,255,255,0)");
       expect(vis.gradientStops).not.toContain("rgba(0,0,0,0)");
       // Same screenshot contract and bold apertures as the light theme.
       const mask = allRecs.find((r) => r.texts.length > 0)!;
@@ -1843,11 +1899,11 @@ describe("HkInput password reveal strategies", () => {
     }
   });
 
-  it("filter keeps the documented light-anchor degrade for modern color-function inks", async () => {
+  it("filter degrades without throwing for modern color-function inks", async () => {
     // oklch()/lab()/color() inks cannot be parsed into a triple — the
-    // documented degrade keeps the fallback ink (a DARK ink → light
-    // anchors), never throwing and never guessing a theme. Locked as
-    // intentional (R1 finding F1).
+    // documented degrade keeps the fallback ink and NEVER throws or
+    // guesses; the anchors are uniform anyway, so the reveal keeps
+    // painting the same near-black ground + white halo.
     const restoreInk = forceInkColor("oklch(70% 0.1 200)");
     const rec = stubRecordingContexts();
     try {
@@ -1865,8 +1921,9 @@ describe("HkInput password reveal strategies", () => {
       );
       expect(tiles.length).toBe(2);
       const [gr] = tiles[0]!.fillStyles[0]!.slice(4, -1).split(",").map(Number);
-      expect(gr!, "fallback ink → LIGHT anchors (near-white ground)").toBeGreaterThan(230);
-      expect(vis.gradientStops, "black halo in the degrade").toContain("rgba(0,0,0,0.1)");
+      expect(gr!, "degrade keeps the uniform near-black ground").toBeGreaterThan(18);
+      expect(gr!).toBeLessThan(34);
+      expect(vis.gradientStops, "white halo in the degrade").toContain("rgba(255,255,255,0.1)");
       document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
       await nextTick();
     } finally {
@@ -1877,15 +1934,10 @@ describe("HkInput password reveal strategies", () => {
 
   it("filter degrades the same way for color()-function inks", async () => {
     // Locks the DEGRADE SEMANTICS for color() inks: the modern-
-    // function rejection yields null → the fallback dark ink → LIGHT
-    // anchors. Honest limit (verified during R2 remedies): spec-valid
-    // color() values are 0–1 floats, so even a DELETED guard parses
-    // them into sub-1 triples (L < 1 → light) — guard deletion is not
-    // observable through the filter theme. The guard's real consumer
-    // is the NOISE painter's colored tiles (it prevents deriving a
-    // garbage hue from e.g. [0.5,0.2,0.8]); this pin keeps any future
-    // "auto-interpret color()" change (×255 scaling → L 50 → dark)
-    // from silently re-theming the filter.
+    // function rejection yields null → the fallback ink → the same
+    // uniform anchors, never a thrown parse. (The guard also protects
+    // the NOISE painter's colored tiles from garbage hues — that side
+    // is pinned by the parseColorTriple unit tests.)
     const restoreInk = forceInkColor("color(display-p3 1 0 0)");
     const rec = stubRecordingContexts();
     try {
@@ -1901,35 +1953,7 @@ describe("HkInput password reveal strategies", () => {
       );
       expect(tiles.length).toBe(2);
       const [gr] = tiles[0]!.fillStyles[0]!.slice(4, -1).split(",").map(Number);
-      expect(gr!, "color() ink degrades to the LIGHT anchors").toBeGreaterThan(230);
-      document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
-      await nextTick();
-    } finally {
-      rec.restore();
-      restoreInk();
-    }
-  });
-
-  it("filter treats exactly-50 ink lightness as a dark theme (boundary)", async () => {
-    // rgb(255,0,0): max+min halves to EXACTLY 0.5 (128/255 does not)
-    // — L === 50 on the nose, so the >= side of the theme proxy wins
-    // and the reveal anchors dark (R1 finding F2).
-    const restoreInk = forceInkColor("rgb(255, 0, 0)");
-    const rec = stubRecordingContexts();
-    try {
-      const { container } = mountPasswordInput("abc");
-      const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;
-      eye.dispatchEvent(
-        new PointerEvent("pointerdown", { pointerType: "mouse", bubbles: true }),
-      );
-      await nextTick();
-      const allRecs = Array.from(rec.byCanvas.values());
-      const tiles = allRecs.filter(
-        (r) => r.fillStyles.filter((s) => s.startsWith("rgb(")).length > 100,
-      );
-      expect(tiles.length).toBe(2);
-      const [gr] = tiles[0]!.fillStyles[0]!.slice(4, -1).split(",").map(Number);
-      expect(gr!, "L === 50 anchors DARK (near-black ground)").toBeGreaterThan(18);
+      expect(gr!, "color() ink degrades to the uniform near-black ground").toBeGreaterThan(18);
       expect(gr!).toBeLessThan(34);
       document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
       await nextTick();
@@ -1961,7 +1985,9 @@ describe("HkInput password reveal strategies", () => {
       );
       expect(tiles.length).toBe(2);
       const counts1 = tiles.map((r) => r.fillStyles.length);
-      expect(counts1[0]!, "ground + dots on hold 1").toBeGreaterThan(1000);
+      // Dense field (R1 F5): ~2341 dots per tile at 28 px²/dot — the
+      // old sparse 45 px²/dot (1457 fills) must fail this floor.
+      expect(counts1[0]!, "dense spatter field on hold 1").toBeGreaterThan(2000);
       await hold();
       const counts2 = tiles.map((r) => r.fillStyles.length);
       expect(counts2[0]).toBe(counts1[0]! * 2);

package/src/components/HkInput.tsx

@@ -79,13 +79,11 @@ export default defineComponent({
      * `passwordTrailing="eye"`):
      * - "filter" (default): dual counter-drifting spatter layers in
      *   strict black/white/gray — static BOLD glyph apertures filled
-     *   with one gray spatter texture over a statistically matched
-     *   field drifting the opposite way on the theme's ground
-     *   (near-black in a dark theme, near-white in a light one),
-     *   plus a small visibility-direction lightness pedestal and a
-     *   halo band around the row. The whole row stays readable in
-     *   motion; a single-frame screenshot carries no glyph structure,
-     *   only a weak luminance signal dissolved into the halo.
+     *   with a BRIGHT dense gray spatter over a statistically matched
+     *   DIM field drifting the opposite way on a UNIFORM near-black
+     *   ground (white-on-black in every theme), plus a large
+     *   brightening pedestal and a white halo. A single-frame
+     *   screenshot carries no glyph structure.
      * - "sweep": a readable window — ordinary high-contrast text inside
      *   a narrow band sweeping across the row over the boiling-noise
      *   field. Easy to read; a single screenshot leaks the characters

package/src/components/HkNodeCanvas.base.test.tsx

@@ -0,0 +1,246 @@
+import { describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkNodeCanvas from "./HkNodeCanvas";
+import {
+  computeLod,
+  edgeMidpoint,
+  edgePath,
+  LOD_DEFAULTS,
+} from "./nodeCanvasTypes";
+
+/** Mount a component into a detached div and return the root element. */
+function mountToDom(component: ReturnType<typeof defineComponent>): HTMLElement {
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+  const app = createApp(component);
+  app.mount(el);
+  return el;
+}
+
+const CanvasHost = defineComponent({
+  props: {
+    edges: { type: Array, default: () => [] },
+    printMode: { type: Boolean, default: false },
+    printPaper: { type: String as () => "a4-landscape" | "a3-landscape" | "auto", default: "auto" },
+    minimap: { type: Boolean, default: false },
+  },
+  setup(props) {
+    return () =>
+      h(HkNodeCanvas, {
+        edges: props.edges as never[],
+        printMode: props.printMode,
+        printPaper: props.printPaper,
+        minimap: props.minimap,
+      }, { default: () => h("div", "content") });
+  },
+});
+
+/**
+ * HkNodeCanvas base upgrade tests — the new rendering capabilities:
+ * edge rendering, LOD, print mode, painter registration, and export.
+ */
+describe("HkNodeCanvas rendering base upgrades", () => {
+  describe("nodeCanvasTypes", () => {
+    it("computes LOD from zoom factor and thresholds", () => {
+      expect(computeLod(1.0, LOD_DEFAULTS)).toBe("high");
+      expect(computeLod(0.5, LOD_DEFAULTS)).toBe("high");
+      expect(computeLod(0.45, LOD_DEFAULTS)).toBe("high");
+      expect(computeLod(0.44, LOD_DEFAULTS)).toBe("medium");
+      expect(computeLod(0.18, LOD_DEFAULTS)).toBe("medium");
+      expect(computeLod(0.17, LOD_DEFAULTS)).toBe("low");
+      expect(computeLod(0.05, LOD_DEFAULTS)).toBe("low");
+    });
+
+    it("supports custom LOD thresholds", () => {
+      const custom = { medium: 0.8, low: 0.3 };
+      expect(computeLod(0.9, custom)).toBe("high");
+      expect(computeLod(0.75, custom)).toBe("medium");
+      expect(computeLod(0.2, custom)).toBe("low");
+    });
+
+    it("generates a direct edge path", () => {
+      const path = edgePath(
+        { from: { x: 0, y: 0 }, to: { x: 100, y: 50 } },
+        "direct",
+      );
+      expect(path).toBe("M 0 0 L 100 50");
+    });
+
+    it("generates a bezier edge path with correct control points", () => {
+      const path = edgePath(
+        { from: { x: 0, y: 0 }, to: { x: 200, y: 100 } },
+        "bezier",
+      );
+      // cp = max(|dx| * 0.4, 40) = max(80, 40) = 80
+      // C (from.x+80) from.y, (to.x-80) to.y, to.x to.y
+      expect(path).toBe("M 0 0 C 80 0, 120 100, 200 100");
+    });
+
+    it("uses minimum control point offset for short edges", () => {
+      // dx = 50 → cp = max(20, 40) = 40 (minimum kicks in)
+      const path = edgePath(
+        { from: { x: 0, y: 0 }, to: { x: 50, y: 0 } },
+        "bezier",
+      );
+      expect(path).toBe("M 0 0 C 40 0, 10 0, 50 0");
+    });
+
+    it("generates an orthogonal (manhattan) edge path", () => {
+      const path = edgePath(
+        { from: { x: 0, y: 0 }, to: { x: 100, y: 100 } },
+        "orthogonal",
+      );
+      expect(path).toBe("M 0 0 L 50 0 L 50 100 L 100 100");
+    });
+
+    it("computes edge midpoints", () => {
+      const mid = edgeMidpoint(
+        { from: { x: 0, y: 0 }, to: { x: 100, y: 100 } },
+        "direct",
+      );
+      expect(mid).toEqual({ x: 50, y: 50 });
+    });
+  });
+
+  describe("HkNodeCanvas component", () => {
+    it("mounts without edges (backward compatible)", () => {
+      const el = mountToDom(CanvasHost);
+      const canvas = el.querySelector(".hk-node-canvas");
+      expect(canvas).toBeTruthy();
+      const layer = el.querySelector(".hk-node-canvas-layer");
+      expect(layer?.textContent).toBe("content");
+      // No edge layer when edges is empty.
+      expect(el.querySelector(".hk-node-canvas-edges")).toBeNull();
+      el.remove();
+    });
+
+    it("renders edges as SVG paths", async () => {
+      const el = mountToDom(defineComponent({
+        setup() {
+          return () =>
+            h(HkNodeCanvas, {
+              minimap: false,
+              edges: [
+                { id: "e1", from: { x: 0, y: 0 }, to: { x: 100, y: 50 }, label: "proxy" },
+                { id: "e2", from: { x: 50, y: 50 }, to: { x: 150, y: 150 }, routing: "direct" as const },
+              ],
+            }, { default: () => h("div") });
+        },
+      }));
+      await nextTick();
+
+      const paths = el.querySelectorAll(".hk-node-canvas-edge path");
+      expect(paths.length).toBe(2);
+      // First edge uses bezier by default.
+      expect(paths[0].getAttribute("d")).toMatch(/^M 0 0 C /);
+      // Second edge uses direct routing (override).
+      expect(paths[1].getAttribute("d")).toBe("M 50 50 L 150 150");
+      // Edge label is rendered.
+      const label = el.querySelector(".hk-node-canvas-edge text");
+      expect(label?.textContent).toBe("proxy");
+      el.remove();
+    });
+
+    it("renders dashed edges with stroke-dasharray", async () => {
+      const el = mountToDom(defineComponent({
+        setup() {
+          return () =>
+            h(HkNodeCanvas, {
+              minimap: false,
+              edges: [
+                { id: "e1", from: { x: 0, y: 0 }, to: { x: 100, y: 0 }, dashed: true },
+              ],
+            }, { default: () => h("div") });
+        },
+      }));
+      await nextTick();
+      const path = el.querySelector(".hk-node-canvas-edge path");
+      expect(path?.getAttribute("stroke-dasharray")).toBe("6 4");
+      el.remove();
+    });
+
+    it("renders a canvas layer element", () => {
+      const el = mountToDom(CanvasHost);
+      const canvas = el.querySelector("canvas.hk-node-canvas-canvas");
+      expect(canvas).toBeTruthy();
+      el.remove();
+    });
+
+    it("exposes levelOfDetail, registerPainter, exportSVG", () => {
+      const exposed: Record<string, unknown> = {};
+      const Host = defineComponent({
+        setup() {
+          const canvasRef = ref<unknown>(null);
+          const check = () => {
+            const vm = canvasRef.value as Record<string, unknown> | null;
+            if (vm) {
+              Object.assign(exposed, {
+                levelOfDetail: vm.levelOfDetail,
+                registerPainter: vm.registerPainter,
+                unregisterPainter: vm.unregisterPainter,
+                exportSVG: vm.exportSVG,
+                exportPNG: vm.exportPNG,
+              });
+            }
+          };
+          return () =>
+            h(HkNodeCanvas, {
+              ref: canvasRef,
+              minimap: false,
+              camera: { k: 1, x: 0, y: 0 },
+              onVnodeMounted: check,
+            }, { default: () => h("div") });
+        },
+      });
+      const el = mountToDom(Host);
+      expect(exposed.levelOfDetail).toBeDefined();
+      expect(typeof exposed.registerPainter).toBe("function");
+      expect(typeof exposed.unregisterPainter).toBe("function");
+      expect(typeof exposed.exportSVG).toBe("function");
+      expect(typeof exposed.exportPNG).toBe("function");
+      // LOD at zoom=1 should be "high". Vue expose auto-unwraps refs,
+      // so this may be a string or a ref depending on the consumer pattern.
+      const lod = exposed.levelOfDetail;
+      const lodValue = typeof lod === "string" ? lod : (lod as { value: string }).value;
+      expect(lodValue).toBe("high");
+      el.remove();
+    });
+
+    it("printMode disables minimap and gestures", async () => {
+      const el = mountToDom(defineComponent({
+        setup() {
+          return () =>
+            h(HkNodeCanvas, {
+              minimap: true,
+              printMode: true,
+            }, { default: () => h("div") });
+        },
+      }));
+      await nextTick();
+      const root = el.querySelector(".hk-node-canvas");
+      expect(root).toBeTruthy();
+      expect(root!.classList.contains("hk-node-canvas--print")).toBe(true);
+      expect(el.querySelector(".hk-node-canvas-minimap")).toBeNull();
+      expect(root!.getAttribute("data-pannable")).toBeNull();
+      el.remove();
+    });
+
+    it("printMode with paper size sets fixed dimensions", async () => {
+      const el = mountToDom(defineComponent({
+        setup() {
+          return () =>
+            h(HkNodeCanvas, {
+              printMode: true,
+              printPaper: "a4-landscape" as const,
+            }, { default: () => h("div") });
+        },
+      }));
+      await nextTick();
+      const root = el.querySelector(".hk-node-canvas") as HTMLElement;
+      expect(root.style.width).toBe("1122.5px");
+      expect(root.style.height).toBe("793.7px");
+      el.remove();
+    });
+  });
+});