@celestia-island/hikari 0.55.21 → 0.55.23

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,55 @@ 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,
+    },
+
+    // ── Gesture & animation upgrades ─────────────────────────────
+
+    /** Camera tween duration in ms (0 disables tweening). Only
+     *  `tweenCamera()` animates over this duration with ease-out cubic.
+     *  Snaps instantly when prefers-reduced-motion is active and
+     *  `respectReducedMotion` is on (default). */
+    tweenMs: { type: Number, default: 0 },
+    /** Two-finger pinch-to-zoom on touch devices. */
+    pinchable: { type: Boolean, default: true },
+    /** Snap tweens when prefers-reduced-motion is active (default). */
+    respectReducedMotion: { type: Boolean, default: true },
+    /** DPI scale provider: maps pointer coordinates to drawn coordinates.
+     *  Needed when the canvas is inside a CSS `zoom` or `transform: scale()`
+     *  container — pointer events report unscaled page coordinates but the
+     *  camera measures the canvas's own pixels. */
+    pointerScale: {
+      type: Function as PropType<(() => { x: number; y: number }) | undefined>,
+      default: undefined,
+    },
   },
   emits: ["update:camera"],
   setup(props, { slots, emit, expose }) {
@@ -167,6 +257,50 @@ export default defineComponent({
     /** Set by setCamera (gestures and imperative calls) — never by `fit`. */
     let movedByHand = false;
 
+    // ── Pinch-to-zoom state ──────────────────────────────────────
+    /** Active pointers for pinch tracking (pointerId → screen position). */
+    const activePointers = new Map<number, { x: number; y: number }>();
+    /** Pinch gesture snapshot: start distance/zoom/midpoint for the ratio. */
+    let pinchSnapshot: {
+      startDist: number;
+      startZoom: number;
+      midX: number;
+      midY: number;
+    } | null = null;
+
+    // ── Camera tween state ───────────────────────────────────────
+    let tweenRaf: number | null = null;
+
+    // ── Motion constraints ───────────────────────────────────────
+    const reducedMotion = computed(() => {
+      if (!props.respectReducedMotion) return false;
+      return typeof window !== "undefined"
+        && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    });
+
+    // ── 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`
@@ -402,6 +536,11 @@ export default defineComponent({
     }
 
     function onPointerDown(event: PointerEvent) {
+      // When a pinch is live, cancel any single-pointer pan.
+      if (pinchSnapshot !== null) {
+        panning = null;
+        return;
+      }
       if (!props.pannable || event.button !== 0) return;
       // A host that drags its own nodes suppresses the pan by preventing the
       // default on its card's pointerdown: the root listens in the bubble
@@ -424,6 +563,7 @@ export default defineComponent({
       ) {
         return;
       }
+      trackPointer(event);
       panning = {
         pointerId: event.pointerId,
         x: event.clientX,
@@ -442,6 +582,14 @@ export default defineComponent({
     }
 
     function onPointerMove(event: PointerEvent) {
+      // Update pinch tracking when a tracked pointer moves.
+      if (activePointers.has(event.pointerId)) {
+        activePointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        if (pinchSnapshot !== null) {
+          updatePinch();
+          return;
+        }
+      }
       if (!panning || event.pointerId !== panning.pointerId) return;
       // The gesture is only captured once it passes the slop, so a release that
       // happens outside the canvas never reaches this element. Without this the
@@ -474,6 +622,8 @@ export default defineComponent({
     }
 
     function endPan(event: PointerEvent) {
+      endPointerTracking(event);
+      if (pinchSnapshot !== null) return;
       if (!panning || event.pointerId !== panning.pointerId) return;
       const pointerId = panning.pointerId;
       panning = null;
@@ -487,6 +637,11 @@ export default defineComponent({
       // canvas clears focus), and ending the gesture there would kill the first
       // pan after any click. Only the window's own blur ends it.
       if (event.target && event.target !== window) return;
+      // Clear pinch state too: a blur during a two-finger gesture would
+      // otherwise leave a stale snapshot that permanently suppresses pan
+      // (every pointerdown would hit the pinch-active early return).
+      activePointers.clear();
+      pinchSnapshot = null;
       if (!panning) return;
       const pointerId = panning.pointerId;
       panning = null;
@@ -505,6 +660,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 +730,8 @@ export default defineComponent({
     );
 
     onBeforeUnmount(() => {
+      cancelTween();
+      stopFrameLoop();
       ro?.disconnect();
       ro = null;
       panning = null;
@@ -582,6 +740,240 @@ 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;
+    }
+
+    // ── Pinch-to-zoom ────────────────────────────────────────────
+
+    /** Track active pointers for pinch detection. */
+    function trackPointer(event: PointerEvent): void {
+      activePointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (
+        props.pinchable
+        && !props.printMode
+        && activePointers.size === 2
+        && pinchSnapshot === null
+      ) {
+        const [a, b] = [...activePointers.values()];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        pinchSnapshot = {
+          startDist: Math.hypot(dx, dy),
+          startZoom: camera.value.k,
+          midX: (a.x + b.x) / 2,
+          midY: (a.y + b.y) / 2,
+        };
+      }
+    }
+
+    /** Update pinch zoom from current pointer positions. */
+    function updatePinch(): void {
+      if (!pinchSnapshot || activePointers.size < 2) return;
+      const [a, b] = [...activePointers.values()];
+      const dist = Math.hypot(b.x - a.x, b.y - a.y);
+      if (pinchSnapshot.startDist < 1) return;
+      const ratio = dist / pinchSnapshot.startDist;
+      const targetK = normalizeZoom(pinchSnapshot.startZoom * ratio);
+      // Zoom anchored at the pinch midpoint.
+      const rect = rootEl.value?.getBoundingClientRect();
+      if (!rect) return;
+      const scale = props.pointerScale?.() ?? { x: 1, y: 1 };
+      const midX = ((pinchSnapshot.midX - rect.left) / scale.x);
+      const midY = ((pinchSnapshot.midY - rect.top) / scale.y);
+      const cam = camera.value;
+      const k = targetK;
+      const x = midX - ((midX - cam.x) * k) / cam.k;
+      const y = midY - ((midY - cam.y) * k) / cam.k;
+      setCamera({ k, x, y });
+    }
+
+    /** End pinch tracking when a pointer lifts. */
+    function endPointerTracking(event: PointerEvent): void {
+      activePointers.delete(event.pointerId);
+      if (activePointers.size < 2) {
+        pinchSnapshot = null;
+      }
+    }
+
+    // ── Camera tween ─────────────────────────────────────────────
+
+    /** Cancel any running tween. */
+    function cancelTween(): void {
+      if (tweenRaf !== null) {
+        cancelAnimationFrame(tweenRaf);
+        tweenRaf = null;
+      }
+    }
+
+    /** Animate the camera to a target over `tweenMs`, or snap if
+     *  reduced-motion is active or tweenMs is 0. */
+    function tweenCamera(target: NodeCanvasCamera, durationMs?: number): void {
+      cancelTween();
+      const ms = durationMs ?? props.tweenMs;
+      if (ms <= 0 || reducedMotion.value) {
+        setCamera(target);
+        return;
+      }
+      const start = { ...camera.value };
+      const startTime = performance.now();
+
+      const step = (now: number) => {
+        const t = Math.min((now - startTime) / ms, 1);
+        const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic
+        setCamera({
+          k: start.k + (target.k - start.k) * eased,
+          x: start.x + (target.x - start.x) * eased,
+          y: start.y + (target.y - start.y) * eased,
+        });
+        if (t < 1) {
+          tweenRaf = requestAnimationFrame(step);
+        } else {
+          tweenRaf = null;
+        }
+      };
+      tweenRaf = requestAnimationFrame(step);
+    }
+
     expose({
       camera,
       viewport,
@@ -591,6 +983,13 @@ export default defineComponent({
       screenToWorld,
       worldToScreen,
       setCamera,
+      tweenCamera,
+      // ── New: rendering base capabilities ──
+      levelOfDetail,
+      registerPainter,
+      unregisterPainter,
+      exportSVG,
+      exportPNG,
     });
 
     const slotProps = computed<NodeCanvasSlotProps>(() => ({
@@ -601,23 +1000,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 +1082,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,
@@ -54,16 +55,15 @@ interface Ripple {
  *   by `revealStrategy`, how it is TRIGGERED by `revealTrigger`:
  *   - strategy "filter" (default): dual 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
- *     dissolved into the halo ramp. Reduced motion or a pattern-less
- *     engine degrades to the fully readable static plain text.
+ *     STATIC bold apertures filled with a bright gray spatter texture
+ *     drifting one way, over a statistically matched DIM spatter
+ *     field drifting the other way, both on a UNIFORM near-black
+ *     ground (white-on-black reading in every theme; legibility lives
+ *     in the brightness channel — dense dots, dim surround, bright
+ *     text layer). A single frame — a screenshot — carries no glyph
+ *     structure, only the 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
  *     ordinary high-contrast text inside a narrow band that sweeps
  *     across the row over the boiling-noise field. Reading is
@@ -121,12 +121,12 @@ 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.
+     *   strict black/white/gray — static BOLD glyph apertures filled
+     *   with a BRIGHT dense gray spatter over an oppositely drifting,
+     *   statistically matched DIM spatter field on a UNIFORM
+     *   near-black ground (white-on-black in every theme), plus a
+     *   large brightening pedestal and white halo. 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);
           }