@celestia-island/hikari 0.55.20 → 0.55.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.20",
+  "version": "0.55.22",
   "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

@@ -1334,8 +1334,8 @@ 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[];
@@ -1583,9 +1583,9 @@ 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
+    // field streaming the opposite way on the uniform near-black
+    // ground; the glyphs lifted by a small 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 +1622,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, light-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,8 +1658,8 @@ 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);
       // Strict grayscale: no theme hue may survive into the spatter —
       // every solid fill is a NEUTRAL gray (r === g === b).
@@ -1667,19 +1672,18 @@ 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 ")),
@@ -1720,8 +1724,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 +1747,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, light-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 +1781,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) {
@@ -1818,17 +1821,16 @@ describe("HkInput password reveal strategies", () => {
         groundDelta >= 20 && groundDelta <= 30,
         `grounds one pedestal apart (delta ${groundDelta})`,
       ).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 +1845,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 +1867,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 +1880,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 +1899,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();

package/src/components/HkInput.tsx

@@ -77,15 +77,14 @@ export default defineComponent({
     /**
      * Reveal content for the password eye (`variant="password"`,
      * `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.
+     * - "filter" (default): dual FAST counter-drifting spatter layers
+     *   in strict black/white/gray — static BOLD glyph apertures
+     *   filled with one gray spatter texture over a statistically
+     *   matched field streaming the opposite way on a UNIFORM
+     *   near-black ground (white-on-black in every theme), plus a
+     *   small brightening pedestal and a white halo; the speed lets
+     *   persistence of vision average the glyphs readable. 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();
+    });
+  });
+});