@celestia-island/hikari 0.55.21 → 0.55.22

package/src/components/HkNodeCanvas.tsx

@@ -11,6 +11,33 @@ import {
 
 import "./HkNodeCanvas.scss";
 
+import {
+  computeLod,
+  edgeMidpoint,
+  edgePath,
+  LOD_DEFAULTS,
+  PAPER_SIZES,
+  type EdgeRouting,
+  type LodLevel,
+  type LodThresholds,
+  type NodeCanvasEdge,
+  type NodeCanvasFrameContext,
+  type NodeCanvasPainter,
+  type PrintPaper,
+} from "./nodeCanvasTypes";
+
+// Re-export shared types so consumers can import from the component.
+export type {
+  EdgeRouting,
+  LodLevel,
+  LodThresholds,
+  NodeCanvasEdge,
+  NodeCanvasFrameContext,
+  NodeCanvasPainter,
+  PrintPaper,
+} from "./nodeCanvasTypes";
+export { computeLod, edgePath, edgeMidpoint, LOD_DEFAULTS, PAPER_SIZES } from "./nodeCanvasTypes";
+
 /** A camera: zoom factor plus the translation of the content origin. */
 export interface NodeCanvasCamera {
   /** Zoom factor (1 = 1:1). */
@@ -88,9 +115,23 @@ interface PendingRequest {
  * maps back into content coordinates. That is what this component owns, and
  * it owns it once instead of three times.
  *
- * What it does NOT own: edges, nodes, routing, layout. The host draws those
- * through the default slot, which lives inside the transformed layer, so the
- * host only has to think in content coordinates.
+ * In addition to the camera, the upgraded base owns:
+ *
+ *   - a **Canvas2D painter layer** beneath the DOM: hosts register
+ *     painters (`registerPainter`) that draw strokes, grids, pipes —
+ *     anything Canvas2D does better than SVG — in world coordinates,
+ *     driven by the same camera in a single frame loop.
+ *   - an **edge layer** (`edges` prop): routing (bezier / orthogonal /
+ *     direct), labels, styles, and optional flow animation, rendered as
+ *     SVG so CSS and accessibility work for free.
+ *   - **LOD** (level of detail): a zoom-derived detail level hosts can
+ *     read to simplify their nodes at low zoom.
+ *   - a **print mode**: disables gestures, fixes the camera, and exposes
+ *     `exportSVG()` for vector output.
+ *
+ * What it still does NOT own: what nodes look like, what data drives
+ * them, or how they are laid out. The host draws node content through
+ * the default slot in world coordinates.
  *
  * Two behaviours are deliberate:
  *
@@ -149,6 +190,35 @@ export default defineComponent({
       default: "bottom-right",
     },
     ariaLabel: { type: String, default: undefined },
+
+    // ── Rendering base upgrades ──────────────────────────────────
+
+    /** Edges to render between nodes. Routed and styled by the canvas. */
+    edges: { type: Array as PropType<NodeCanvasEdge[]>, default: () => [] },
+    /** Default routing strategy for edges. Individual edges can override. */
+    edgeRouting: {
+      type: String as PropType<EdgeRouting>,
+      default: "bezier" as EdgeRouting,
+    },
+    /** Zoom thresholds for level-of-detail. At or above `medium`:
+     *  full detail. At or above `low`: outlines + labels. Below: outlines. */
+    lodThresholds: {
+      type: Object as PropType<LodThresholds>,
+      default: () => ({ ...LOD_DEFAULTS }),
+    },
+    /** Frame callback: called every animation frame with camera, dt, LOD,
+     *  and the Canvas2D context. Use for animations and real-time overlays. */
+    onFrame: {
+      type: Function as PropType<((frame: NodeCanvasFrameContext) => void) | undefined>,
+      default: undefined,
+    },
+    /** Print mode: disables gestures, fixes proportions for export. */
+    printMode: { type: Boolean, default: false },
+    /** Paper size for print mode (ignored when printMode is false). */
+    printPaper: {
+      type: String as PropType<PrintPaper>,
+      default: "auto" as PrintPaper,
+    },
   },
   emits: ["update:camera"],
   setup(props, { slots, emit, expose }) {
@@ -167,6 +237,29 @@ export default defineComponent({
     /** Set by setCamera (gestures and imperative calls) — never by `fit`. */
     let movedByHand = false;
 
+    // ── Canvas2D painter layer ───────────────────────────────────
+    const canvasEl = shallowRef<HTMLCanvasElement | null>(null);
+    /** Registered painters, sorted by z on each frame. */
+    const painters = shallowRef<NodeCanvasPainter[]>([]);
+    /** The animation frame loop handle (null when idle). */
+    let rafHandle: number | null = null;
+    /** Timestamp of the last frame (for dt). */
+    let lastFrameTime = 0;
+
+    // ── LOD ──────────────────────────────────────────────────────
+    const levelOfDetail = computed<LodLevel>(() =>
+      computeLod(camera.value.k, props.lodThresholds),
+    );
+
+    // ── Edge rendering (computed SVG paths) ──────────────────────
+    const edgePaths = computed(() =>
+      props.edges.map((edge) => ({
+        edge,
+        path: edgePath(edge, edge.routing ?? props.edgeRouting),
+        mid: edgeMidpoint(edge, edge.routing ?? props.edgeRouting),
+      })),
+    );
+
     const camera = computed<NodeCanvasCamera>(() => props.camera ?? inner.value);
 
     /** Snap a zoom factor onto the grid, then into range. `quantizeScaleStep`
@@ -505,6 +598,7 @@ export default defineComponent({
       viewport.value = next;
     }
 
+    onMounted(() => { ensureFrameLoop(); });
     onMounted(() => {
       // Measure BEFORE the first paint the watcher can react to: with
       // `fitOnLoad` this is what makes the first painted frame already be the
@@ -574,6 +668,7 @@ export default defineComponent({
     );
 
     onBeforeUnmount(() => {
+      stopFrameLoop();
       ro?.disconnect();
       ro = null;
       panning = null;
@@ -582,6 +677,149 @@ export default defineComponent({
       window.removeEventListener("blur", loseFocus, true);
     });
 
+    // ── Canvas painter management ────────────────────────────────
+
+    function registerPainter(painter: NodeCanvasPainter): void {
+      const next = [...painters.value, painter].sort((a, b) => (a.z ?? 0) - (b.z ?? 0));
+      painters.value = next;
+      ensureFrameLoop();
+    }
+
+    function unregisterPainter(painterId: string): void {
+      painters.value = painters.value.filter((p) => p.id !== painterId);
+      if (painters.value.length === 0 && !props.onFrame) {
+        stopFrameLoop();
+      }
+    }
+
+    // ── Frame loop ───────────────────────────────────────────────
+    // A single rAF loop drives the Canvas2D layer. It only runs when
+    // there are painters or an onFrame callback — zero cost otherwise.
+
+    function ensureFrameLoop(): void {
+      if (rafHandle !== null) return;
+      if (painters.value.length === 0 && !props.onFrame) return;
+      lastFrameTime = performance.now();
+      rafHandle = requestAnimationFrame(frameTick);
+    }
+
+    function stopFrameLoop(): void {
+      if (rafHandle !== null) {
+        cancelAnimationFrame(rafHandle);
+        rafHandle = null;
+      }
+    }
+
+    function frameTick(now: number): void {
+      const dt = now - lastFrameTime;
+      lastFrameTime = now;
+      const cam = camera.value;
+      const vp = viewport.value;
+      const lod = levelOfDetail.value;
+
+      // Paint the canvas layer.
+      const canvas = canvasEl.value;
+      if (canvas) {
+        const dpr = window.devicePixelRatio || 1;
+        const w = vp.width;
+        const h = vp.height;
+        // Only resize when dimensions actually changed (avoid clearing).
+        if (canvas.width !== Math.round(w * dpr) || canvas.height !== Math.round(h * dpr)) {
+          canvas.width = Math.round(w * dpr);
+          canvas.height = Math.round(h * dpr);
+        }
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          ctx.clearRect(0, 0, w, h);
+          // Apply camera transform so painters draw in world coordinates.
+          ctx.translate(cam.x, cam.y);
+          ctx.scale(cam.k, cam.k);
+
+          const frame: NodeCanvasFrameContext = {
+            camera: cam,
+            viewport: vp,
+            dt,
+            lod,
+            ctx,
+          };
+
+          for (const painter of painters.value) {
+            painter.draw(frame);
+          }
+
+          // View-level frame callback (after painters, so it can overlay).
+          props.onFrame?.(frame);
+        }
+      }
+
+      rafHandle = requestAnimationFrame(frameTick);
+    }
+
+    // Start/stop the loop when props change.
+    watch(
+      () => props.onFrame,
+      (fn) => {
+        if (fn) ensureFrameLoop();
+        else if (painters.value.length === 0) stopFrameLoop();
+      },
+    );
+
+    // ── Print / Export ───────────────────────────────────────────
+
+    /** Export the edge layer as an SVG element (nodes are NOT included —
+     *  hosts that need node content in the export should compose it
+     *  separately). Useful for print-mode output and documentation. */
+    function exportSVG(): SVGElement {
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      const paper = PAPER_SIZES[props.printPaper];
+      const vp = viewport.value;
+      svg.setAttribute("width", String(paper?.width ?? vp.width));
+      svg.setAttribute("height", String(paper?.height ?? vp.height));
+      svg.setAttribute("viewBox", `0 0 ${paper?.width ?? vp.width} ${paper?.height ?? vp.height}`);
+
+      // Copy edge paths into the export SVG.
+      const edgesGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      for (const { edge, path } of edgePaths.value) {
+        const p = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        p.setAttribute("d", path);
+        p.setAttribute("fill", "none");
+        p.setAttribute("stroke", edge.color ?? "currentColor");
+        p.setAttribute("stroke-width", String(edge.width ?? 1.5));
+        if (edge.dashed) p.setAttribute("stroke-dasharray", "6 4");
+        edgesGroup.appendChild(p);
+        if (edge.label) {
+          const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+          const mid = edgeMidpoint(edge, edge.routing ?? props.edgeRouting);
+          text.setAttribute("x", String(mid.x));
+          text.setAttribute("y", String(mid.y - 6));
+          text.setAttribute("text-anchor", "middle");
+          text.setAttribute("font-size", "12");
+          text.textContent = edge.label;
+          edgesGroup.appendChild(text);
+        }
+      }
+      svg.appendChild(edgesGroup);
+      return svg;
+    }
+
+    /** Export the canvas as a PNG image element. */
+    function exportPNG(): HTMLCanvasElement {
+      const source = canvasEl.value;
+      if (!source) {
+        // Return an empty canvas if no canvas layer exists.
+        const empty = document.createElement("canvas");
+        empty.width = 1;
+        empty.height = 1;
+        return empty;
+      }
+      const copy = document.createElement("canvas");
+      copy.width = source.width;
+      copy.height = source.height;
+      copy.getContext("2d")?.drawImage(source, 0, 0);
+      return copy;
+    }
+
     expose({
       camera,
       viewport,
@@ -591,6 +829,12 @@ export default defineComponent({
       screenToWorld,
       worldToScreen,
       setCamera,
+      // ── New: rendering base capabilities ──
+      levelOfDetail,
+      registerPainter,
+      unregisterPainter,
+      exportSVG,
+      exportPNG,
     });
 
     const slotProps = computed<NodeCanvasSlotProps>(() => ({
@@ -601,23 +845,79 @@ export default defineComponent({
 
     return () => {
       const { k, x, y } = camera.value;
+      const isPrint = props.printMode;
+      const paper = isPrint ? PAPER_SIZES[props.printPaper] : null;
       return (
         <div
           ref={rootEl}
-          class="hk-node-canvas"
-          data-pannable={props.pannable ? "" : undefined}
+          class={{
+            "hk-node-canvas": true,
+            "hk-node-canvas--print": isPrint,
+          }}
+          data-pannable={!isPrint && props.pannable ? "" : undefined}
           aria-label={props.ariaLabel}
           style={{
             // Only a surface that consumes the gesture may take touch scrolling
-            // away from the page.
-            touchAction: props.pannable || props.zoomable ? "none" : undefined,
+            // away from the page. Print mode never takes scrolling.
+            touchAction: !isPrint && (props.pannable || props.zoomable) ? "none" : undefined,
+            ...(paper && { width: `${paper.width}px`, height: `${paper.height}px` }),
           }}
-          onWheel={onWheel}
-          onPointerdown={onPointerDown}
-          onPointermove={onPointerMove}
-          onPointerup={endPan}
-          onPointercancel={endPan}
+          onWheel={isPrint ? undefined : onWheel}
+          onPointerdown={isPrint ? undefined : onPointerDown}
+          onPointermove={isPrint ? undefined : onPointerMove}
+          onPointerup={isPrint ? undefined : endPan}
+          onPointercancel={isPrint ? undefined : endPan}
         >
+          {/* Canvas2D layer: painters draw strokes/grids/pipes in world
+              coordinates, driven by the same camera as the DOM layer. */}
+          <canvas
+            ref={canvasEl}
+            class="hk-node-canvas-canvas"
+            style={{
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "none",
+            }}
+          />
+          {/* SVG edge layer: routed edges between nodes, rendered as SVG
+              for CSS styling and accessibility. Lives inside the camera
+              transform so edges stay in sync with DOM nodes. */}
+          {edgePaths.value.length > 0 && (
+            <svg
+              class="hk-node-canvas-edges"
+              style={{
+                position: "absolute",
+                inset: 0,
+                pointerEvents: "none",
+                overflow: "visible",
+              }}
+            >
+              <g transform={`translate(${x} ${y}) scale(${k})`}>
+                {edgePaths.value.map(({ edge, path, mid }) => (
+                  <g key={edge.id} class="hk-node-canvas-edge" data-edge-type={edge.type}>
+                    <path
+                      d={path}
+                      fill="none"
+                      stroke={edge.color ?? "var(--hk-border-3, #555)"}
+                      stroke-width={edge.width ?? 1.5}
+                      stroke-dasharray={edge.dashed ? "6 4" : undefined}
+                    />
+                    {edge.label && (
+                      <text
+                        x={mid.x}
+                        y={mid.y - 6}
+                        text-anchor="middle"
+                        font-size="11"
+                        fill="var(--hk-text-2, #aaa)"
+                      >
+                        {edge.label}
+                      </text>
+                    )}
+                  </g>
+                ))}
+              </g>
+            </svg>
+          )}
           {/* The transformed layer: the host draws in CONTENT coordinates and
               this transform puts it on screen. */}
           <div
@@ -627,7 +927,7 @@ export default defineComponent({
             {slots.default?.(slotProps.value)}
           </div>
           <div class="hk-node-canvas-overlay">{slots.overlay?.(slotProps.value)}</div>
-          {props.minimap && (
+          {!isPrint && props.minimap && (
             <div
               class="hk-node-canvas-minimap"
               data-placement={props.minimapPlacement}

package/src/components/HkPasswordSurface.tsx

@@ -24,6 +24,7 @@ import HkTooltip from "./HkTooltip";
 import { HkPlaceholderMarquee, type PlaceholderVariant } from "./HkPlaceholderMarquee";
 import {
   layoutRevealGlyphs,
+  parseColorTriple,
   RevealFilterPainter,
   RevealNoisePainter,
   sweepWindow,
@@ -52,16 +53,15 @@ interface Ripple {
  * Right-edge affordance (`passwordTrailing`):
  * - "eye" (default): the reveal button. What the reveal SHOWS is chosen
  *   by `revealStrategy`, how it is TRIGGERED by `revealTrigger`:
- *   - strategy "filter" (default): dual counter-drifting spatter
+ *   - strategy "filter" (default): dual FAST counter-drifting spatter
  *     layers in strict BLACK/WHITE/GRAY — the glyph row is a set of
  *     STATIC bold apertures filled with a gray spatter texture
- *     drifting one way, over a statistically identical spatter field
- *     drifting the other way on the theme's ground (near-black in a
- *     dark theme, near-white in a light one), the glyphs shifted by a
- *     small lightness pedestal toward visibility with a soft halo
- *     band around the row (see revealKinematogram.ts). The whole row
- *     stays readable in motion while any single frame — a screenshot
- *     — carries no glyph structure, only a weak mean-luminance signal
+ *     streaming one way, over a statistically identical spatter field
+ *     streaming the other way, both on a UNIFORM near-black ground
+ *     (white-on-black reading in every theme). The drift is very fast
+ *     so persistence of vision averages the aperture interiors into
+ *     readable near-solid glyphs. A single frame — a screenshot —
+ *     carries no glyph structure, only a weak mean-luminance signal
  *     dissolved into the halo ramp. Reduced motion or a pattern-less
  *     engine degrades to the fully readable static plain text.
  *   - strategy "sweep": a readable window — the password is drawn as
@@ -120,13 +120,13 @@ export default defineComponent({
     },
     /**
      * What the eye reveal SHOWS:
-     * - "filter" (default): dual counter-drifting spatter layers in
-     *   strict black/white/gray — static BOLD glyph apertures over an
-     *   oppositely drifting, statistically matched gray spatter field
-     *   on the theme's ground (near-black dark theme / near-white
-     *   light theme), plus a small visibility-direction lightness
-     *   pedestal and halo. Readable in motion; a single screenshot
-     *   carries no glyph structure, only a weak luminance signal.
+     * - "filter" (default): dual FAST counter-drifting spatter layers
+     *   in strict black/white/gray — static BOLD glyph apertures over
+     *   an oppositely streaming, statistically matched gray spatter
+     *   field on a UNIFORM near-black ground (white-on-black in every
+     *   theme), plus a small brightening pedestal and white halo; the
+     *   speed lets persistence of vision average the glyphs readable.
+     *   A single screenshot carries no glyph structure.
      * - "sweep": a readable window — ordinary high-contrast text inside
      *   a narrow band sweeping across the row. Easy to read; a single
      *   screenshot leaks the band's characters in the clear.
@@ -311,25 +311,6 @@ export default defineComponent({
     const ripples: Ripple[] = [];
     let ro: ResizeObserver | null = null;
 
-    function parseColorTriple(raw: string): [number, number, number] | null {
-      // Modern color functions (oklch/lab/color()) would split into
-      // garbage numeric triples — reject them and keep the caller's
-      // previous base instead (latent for consumer themes authored in
-      // those functions; hikari's own themes use rgb triplets/hex).
-      if (/^(oklch|oklab|lab|lch|color)\(/i.test(raw.trim())) return null;
-      // Leading separators are REAL here: a computed `rgb(r, g, b)`
-      // string starts with "rgb(" and the split would yield a leading
-      // EMPTY token — Number("") === 0, which silently shifts the
-      // triple to [0, r, g] and skews every derived HSL channel (the
-      // filter theme proxy read a light ink as 45.7% lightness).
-      const ns = raw
-        .split(/[\s,()rgba]+/)
-        .filter((t) => t !== "")
-        .map(Number)
-        .filter((n) => !isNaN(n));
-      return ns.length >= 3 ? [ns[0], ns[1], ns[2]] : null;
-    }
-
     function syncColor() {
       try {
         const cs = getComputedStyle(document.documentElement);
@@ -802,12 +783,10 @@ export default defineComponent({
         sweepT = 0;
         if (!parked) {
           if (props.revealStrategy === "filter") {
-            // Grayscale spatter anchored to the effective theme: dark
-            // themes carry light field ink, so the ink lightness is
-            // the theme proxy — light ink (>= 50) means a dark theme
-            // (near-black ground), dark ink a light theme (near-white
-            // ground). No theme hue survives into the spatter.
-            revealFilter.beginHold(textHsl[2] >= 50 ? "dark" : "light", dpr);
+            // Grayscale spatter on the uniform near-black ground — the
+            // reveal reads white-on-black in EVERY theme (the theme-
+            // following light variant read far worse and was dropped).
+            revealFilter.beginHold(dpr);
           } else {
             revealNoise.beginHold(textHsl);
           }

package/src/components/nodeCanvasTypes.ts

@@ -0,0 +1,170 @@
+/**
+ * nodeCanvasTypes.ts — Shared types for the HkNodeCanvas rendering base.
+ *
+ * These types are consumed by views (network topology, ladder diagram,
+ * mind map) that build on HkNodeCanvas. They are framework-agnostic
+ * (no Vue imports) so they can be used in pure computation modules too.
+ */
+
+// ── Camera & Bounds (re-exported from the main component) ────────────────
+
+export interface NodeCanvasCamera {
+  /** Zoom factor (1 = 1:1). */
+  k: number;
+  /** Translation of the content origin, in screen pixels. */
+  x: number;
+  /** Translation of the content origin, in screen pixels. */
+  y: number;
+}
+
+export interface NodeCanvasBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface NodeCanvasSlotProps {
+  camera: NodeCanvasCamera;
+  viewport: { width: number; height: number };
+  contentBounds: NodeCanvasBounds | null;
+}
+
+// ── Level of Detail ──────────────────────────────────────────────────────
+
+/** Level of detail, derived from the camera zoom factor. */
+export type LodLevel = "high" | "medium" | "low";
+
+/** Zoom thresholds: at or above `medium` shows full detail, at or above
+ *  `low` shows outlines + labels, below `low` shows outlines only. */
+export interface LodThresholds {
+  medium: number;
+  low: number;
+}
+
+export const LOD_DEFAULTS: LodThresholds = {
+  medium: 0.45,
+  low: 0.18,
+};
+
+/** Compute the LOD level from a zoom factor and thresholds. */
+export function computeLod(k: number, t: LodThresholds): LodLevel {
+  if (k >= t.medium) return "high";
+  if (k >= t.low) return "medium";
+  return "low";
+}
+
+// ── Canvas Painter ───────────────────────────────────────────────────────
+
+/** Context passed to canvas painters and the onFrame callback each frame. */
+export interface NodeCanvasFrameContext {
+  camera: NodeCanvasCamera;
+  viewport: { width: number; height: number };
+  /** Milliseconds since the last frame (for animations). */
+  dt: number;
+  /** Current LOD level. */
+  lod: LodLevel;
+  /** The Canvas2D context, already transformed to world coordinates. */
+  ctx: CanvasRenderingContext2D;
+}
+
+/** A canvas painter: called every frame while mounted. Painters draw
+ *  strokes, grids, pipes, edges — anything that benefits from Canvas2D
+ *  performance. They draw in WORLD coordinates (the camera transform
+ *  is already applied to the context). */
+export interface NodeCanvasPainter {
+  /** Unique identifier for registration/removal. */
+  id: string;
+  /** Called every frame. Draw in world coordinates. */
+  draw: (frame: NodeCanvasFrameContext) => void;
+  /** Painters with smaller z are drawn first (default 0). */
+  z?: number;
+}
+
+// ── Edges ────────────────────────────────────────────────────────────────
+
+/** How an edge is routed from source to target. */
+export type EdgeRouting = "bezier" | "orthogonal" | "direct";
+
+/** An edge between two points (or two nodes, resolved by the host). */
+export interface NodeCanvasEdge {
+  id: string;
+  /** Source point in world coordinates. */
+  from: { x: number; y: number };
+  /** Target point in world coordinates. */
+  to: { x: number; y: number };
+  /** Semantic type — views can use this for styling. */
+  type?: string;
+  /** Label rendered at the edge midpoint. */
+  label?: string;
+  /** Override the global routing strategy for this edge. */
+  routing?: EdgeRouting;
+  /** Stroke color (CSS color value or CSS variable name). */
+  color?: string;
+  /** Stroke width in world units. */
+  width?: number;
+  /** Dashed line. */
+  dashed?: boolean;
+}
+
+// ── Edge Geometry (pure functions) ───────────────────────────────────────
+
+/** Compute an SVG path string for an edge using the given routing. */
+export function edgePath(
+  edge: Pick<NodeCanvasEdge, "from" | "to">,
+  routing: EdgeRouting,
+): string {
+  const { from, to } = edge;
+  switch (routing) {
+    case "direct":
+      return `M ${from.x} ${from.y} L ${to.x} ${to.y}`;
+    case "orthogonal":
+      return orthogonalPath(from, to);
+    case "bezier":
+    default:
+      return bezierPath(from, to);
+  }
+}
+
+/** Cubic bezier: control points at 40% horizontal offset. */
+function bezierPath(
+  from: { x: number; y: number },
+  to: { x: number; y: number },
+): string {
+  const dx = Math.abs(to.x - from.x);
+  const cp = Math.max(dx * 0.4, 40);
+  return `M ${from.x} ${from.y} C ${from.x + cp} ${from.y}, ${to.x - cp} ${to.y}, ${to.x} ${to.y}`;
+}
+
+/** Manhattan routing: horizontal → vertical → horizontal. */
+function orthogonalPath(
+  from: { x: number; y: number },
+  to: { x: number; y: number },
+): string {
+  const midX = (from.x + to.x) / 2;
+  return `M ${from.x} ${from.y} L ${midX} ${from.y} L ${midX} ${to.y} L ${to.x} ${to.y}`;
+}
+
+/** Compute the midpoint of an edge (for label placement). */
+export function edgeMidpoint(
+  edge: Pick<NodeCanvasEdge, "from" | "to">,
+  routing: EdgeRouting,
+): { x: number; y: number } {
+  const { from, to } = edge;
+  if (routing === "orthogonal") {
+    const midX = (from.x + to.x) / 2;
+    return { x: midX, y: (from.y + to.y) / 2 };
+  }
+  return { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
+}
+
+// ── Print ────────────────────────────────────────────────────────────────
+
+export type PrintPaper = "a4-landscape" | "a3-landscape" | "auto";
+
+/** Paper dimensions in CSS pixels at 96 DPI. */
+export const PAPER_SIZES: Record<PrintPaper, { width: number; height: number } | null> = {
+  "a4-landscape": { width: 1122.5, height: 793.7 },
+  "a3-landscape": { width: 1587.4, height: 1122.5 },
+  auto: null,
+};