@celestia-island/hikari 0.55.12 → 0.55.13

package/src/components/HkPasswordSurface.tsx

@@ -14,14 +14,19 @@ import {
 import { useI18n } from "../i18n/context";
 import { credentialAutocomplete } from "../runtime/credentialAutofill";
 
-import { onFrame, onceFrame, type AnimationHandle } from "../runtime/animationBus";
-import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
+import { onFrame, onceFrame, isAnimationParked, type AnimationHandle } from "../runtime/animationBus";
+import { scheduleCron, scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
 import { scheduleInterval, type IntervalHandle } from "../runtime/intervalBus";
 import { passwordLevel, type PasswordLevel, type PasswordStrengthEvaluator } from "../utils/password";
 
 import HListTransition from "./HkListTransition";
 import HkTooltip from "./HkTooltip";
 import { HkPlaceholderMarquee, type PlaceholderVariant } from "./HkPlaceholderMarquee";
+import {
+  layoutRevealGlyphs,
+  RevealNoisePainter,
+  type RevealLayout,
+} from "./revealKinematogram";
 import "./HkPasswordSurface.scss";
 import { drawnScale } from "../composables/layoutGeometry";
 
@@ -44,10 +49,15 @@ interface Ripple {
  *
  * Right-edge affordance (`passwordTrailing`):
  * - "eye" (default): a hold-to-reveal button. While held the canvas
- *   stops drawing the dot matrix and draws the password TEXT instead —
- *   each glyph gets a per-frame random perturbation of size, baseline,
- *   rotation and color, so a screenshot (or an automated scraper)
- *   never sees a stable, OCR-friendly rendering.
+ *   stops drawing the dot matrix and renders a counter-drifting noise
+ *   kinematogram instead (see revealKinematogram.ts): one shared noise
+ *   tile, with the noise sampled through the password glyphs drifting
+ *   one way and the background noise the opposite way. A human reads
+ *   the glyphs off the motion, while any single frame — a screenshot —
+ *   is pure noise with no glyph structure for OCR to lock onto. When
+ *   the animation bus is parked (reduced motion) or the engine cannot
+ *   run the pattern path, the reveal degrades to the legacy static
+ *   per-glyph jitter drawing.
  * - "strength": the traffic-light dot (weak / fair / strong) with a
  *   localized tooltip on hover AND on touch tap.
  * - "none": no affordance at all.
@@ -105,6 +115,22 @@ export default defineComponent({
     const composing = ref(false);
     const preComposeValue = ref("");
     const revealing = ref(false);
+    // Hold-to-reveal rendering state (see revealKinematogram.ts): the
+    // painter owns the noise tile + offscreen glyph mask; revealFrames
+    // counts bus-driven frames so the watchdog can tell a parked
+    // animation bus (reduced motion) from a live one; the layout memo
+    // keeps measureText off the per-frame path (inputs compared as
+    // fields, the string key built only on an actual rebuild).
+    const revealNoise = new RevealNoisePainter();
+    let revealFrames = 0;
+    let revealLayoutValue = "";
+    let revealLayoutW = -1;
+    let revealLayoutH = -1;
+    let revealLayoutMono = "";
+    let revealStaticFallback = false;
+    let revealWatchdog: CronHandle | null = null;
+    let revealLayout: RevealLayout | null = null;
+    let revealLayoutKey = "";
     const pendingClear = ref(false);
     // Flipped by the opt-in marquee overlay when the placeholder actually
     // overflows — the static text below is then hidden so the scrolling
@@ -320,13 +346,73 @@ export default defineComponent({
     }
 
     /**
-     * Anti-OCR reveal pass: the password is drawn as text on the same
-     * canvas that usually carries the dot matrix, with every glyph
-     * re-randomized per frame — size, baseline, rotation and color all
-     * wobble, so no two frames (and no two screenshots) render the same
-     * pixel grid and automated recognition never gets a stable target.
+     * Resolve (and memoize by value + canvas size + mono stack) the
+     * glyph layout for the noise reveal. Measuring text is a per-hold
+     * cost, not a per-frame one: the mask must stay perfectly still
+     * while only the noise sampled through it drifts. The mono stack is
+     * part of the key so a theme/font change BETWEEN holds (same value,
+     * same size) rebuilds the layout and the mask instead of reusing a
+     * stale raster in the old font.
+     */
+    function revealLayoutFor(ctx: CanvasRenderingContext2D, W: number, H: number): RevealLayout | null {
+      const value = props.modelValue;
+      if (!value) return null;
+      const mono = cachedMonoFont || syncMonoFont();
+      if (
+        !revealLayout ||
+        revealLayoutValue !== value ||
+        revealLayoutW !== W ||
+        revealLayoutH !== H ||
+        revealLayoutMono !== mono
+      ) {
+        revealLayout = layoutRevealGlyphs(
+          Array.from(value),
+          (ch, fontPx) => {
+            ctx.font = `${fontPx}px ${mono}`;
+            return ctx.measureText(ch).width;
+          },
+          W / dpr,
+          H / dpr,
+          dpr,
+        );
+        revealLayoutValue = value;
+        revealLayoutW = W;
+        revealLayoutH = H;
+        revealLayoutMono = mono;
+        // JSON encoding: delimiter-unambiguous even for adversarial
+        // font stacks, and only rebuilt when the layout actually is.
+        revealLayoutKey = JSON.stringify([value, W, H, mono]);
+      }
+      return revealLayout;
+    }
+
+    /**
+     * Motion reveal pass (the default): one frame of the counter-
+     * drifting noise kinematogram — background noise translated by the
+     * accumulated background drift, then the (offscreen) glyph mask
+     * re-composited with noise translated the opposite way. The glyph
+     * geometry itself never touches the visible canvas, so a single
+     * frame is pure noise. Returns false when the pattern path is
+     * unavailable, handing the frame to the legacy jitter fallback.
+     */
+    function drawRevealNoise(ctx: CanvasRenderingContext2D, W: number, H: number, dt: number): boolean {
+      const layout = revealLayoutFor(ctx, W, H);
+      if (!layout) return true; // empty value: nothing to reveal at all
+      revealNoise.advance(dt, dpr);
+      return revealNoise.paint(ctx, W, H, layout, cachedMonoFont || syncMonoFont(), revealLayoutKey);
+    }
+
+    /**
+     * Legacy anti-OCR fallback, used only when frames cannot drive the
+     * kinematogram (parked animation bus — reduced motion — or an
+     * engine without canvas patterns): the password is drawn as text
+     * with every glyph re-randomized per frame — size, baseline,
+     * rotation and color all wobble — so automated recognition never
+     * gets a stable target. A parked bus renders exactly ONE such
+     * frame per hold; with patterns unavailable it degrades to the old
+     * per-frame behavior.
      */
-    function drawRevealText(ctx: CanvasRenderingContext2D, W: number, H: number) {
+    function drawRevealJitterText(ctx: CanvasRenderingContext2D, W: number, H: number) {
       const value = props.modelValue;
       if (!value) return;
       const aW = W / dpr;
@@ -382,7 +468,8 @@ export default defineComponent({
       ctx.clearRect(0, 0, W, H);
 
       if (revealing.value) {
-        drawRevealText(ctx, W, H);
+        if (!revealStaticFallback && drawRevealNoise(ctx, W, H, dt)) return;
+        drawRevealJitterText(ctx, W, H);
         return;
       }
 
@@ -452,8 +539,10 @@ export default defineComponent({
       // priority so the reduced-motion switch parks it like every other
       // JS-driven animation. The draw callback clamps the delta exactly
       // like the old self-scheduling rAF loop did. While revealing, the
-      // same loop drives the per-frame anti-OCR re-jitter.
+      // same loop advances the noise kinematogram (and counts its
+      // frames for the parked-bus watchdog in startReveal).
       loopHandle = onFrame((ctx) => {
+        if (revealing.value) revealFrames++;
         draw(ctx.delta); // the bus already clamps per-entry delta to MAX_DELTA
       }, "normal");
     }
@@ -475,12 +564,37 @@ export default defineComponent({
       if (!props.modelValue || props.disabled) return;
       syncTextHsl();
       syncMonoFont();
+      revealStaticFallback = false;
+      revealFrames = 0;
+      revealNoise.beginHold(textHsl);
       revealing.value = true;
-      // Parked animation bus (reduced motion): the loop never fires, so
-      // paint one synchronous frame — a static jitter is still better
-      // for OCR than nothing, and motion-sensitive users keep their
-      // preference.
+      // A parked bus (reduced motion) will never deliver a frame, so
+      // the kinematogram would freeze into unreadable pure noise —
+      // degrade immediately to the legacy static jitter drawing.
+      // Motion-sensitive users keep their preference and the reveal
+      // stays usable.
+      if (isAnimationParked()) {
+        revealStaticFallback = true;
+      }
+      // Paint one synchronous frame so the reveal appears instantly;
+      // the bus takes over from the next tick.
       draw(0);
+      // Recurring belt-and-suspenders watchdog (cronBus on purpose:
+      // bare timers fire even when the rAF-driven bus is parked or
+      // throttled). While held it degrades to the static fallback as
+      // soon as the hold is undrivable: the bus parked — possibly
+      // MID-hold, reduced motion flipped on after frames already
+      // arrived — or no bus frame ever arrived at all (hidden
+      // document, extreme jank). The fallback latches for the rest of
+      // the hold; the next hold re-probes from scratch.
+      revealWatchdog?.disconnect();
+      revealWatchdog = scheduleCron(() => {
+        if (!revealing.value || revealStaticFallback) return;
+        if (isAnimationParked() || revealFrames === 0) {
+          revealStaticFallback = true;
+          draw(0);
+        }
+      }, 160);
       document.addEventListener("pointerup", endReveal, { once: true });
       document.addEventListener("pointercancel", endReveal, { once: true });
     }
@@ -488,6 +602,8 @@ export default defineComponent({
     function endReveal() {
       if (!revealing.value) return;
       revealing.value = false;
+      revealWatchdog?.disconnect();
+      revealWatchdog = null;
       draw(0);
       document.removeEventListener("pointerup", endReveal);
       document.removeEventListener("pointercancel", endReveal);

package/src/components/HkSelectionGrid.scss

@@ -28,6 +28,19 @@
   &[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
   &[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
 
+  /* Adaptive floor mode (minItemWidth prop): the column count derives from
+   * the available width — every track is at least the floor, and hosts
+   * wide enough for one more column simply get it. The min(..., 100%)
+   * guard keeps a lone track capped at the container width, so nothing
+   * overflows below one floor of space. Fluid grids emit no data-cols, so
+   * the narrow-viewport overrides further down never fight this rule. */
+  &[data-fluid] {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(var(--hk-selection-grid-item-min, 240px), 100%), 1fr)
+    );
+  }
+
   &[data-dense] {
     gap: var(--space-6, 0.375rem);
 

package/src/components/HkSelectionGrid.test.tsx

@@ -12,6 +12,10 @@ import HkSelectionGrid, { type SelectionGridItem } from "./HkSelectionGrid";
  * - `select` fires for already-selected cards too — the consumer owns the
  *   toggle, the grid only reports the click
  * - the optional `hint` renders under the grid and is absent when unset
+ * - `minItemWidth` flips the grid into adaptive floor mode: `data-fluid` +
+ *   the floor as a CSS var, and NO `data-cols` hook (the narrow-viewport
+ *   overrides key off data-cols and must not fight the fluid template)
+ * - without `minItemWidth` the fixed `columns` contract is unchanged
  *
  * House style: raw createApp mounts on a shared container list torn down
  * after each case; DOM assertions via document queries.
@@ -117,3 +121,48 @@ describe("HkSelectionGrid hint", () => {
     expect(container.querySelector(".hk-selection-grid-hint")).toBeNull();
   });
 });
+
+describe("HkSelectionGrid adaptive floor mode (minItemWidth)", () => {
+  function gridEl(container: HTMLElement) {
+    return container.querySelector<HTMLElement>(".hk-selection-grid-grid")!;
+  }
+
+  it("switches the grid to fluid mode and publishes the floor as a CSS var", () => {
+    const container = mount(h(HkSelectionGrid, { items: ITEMS, minItemWidth: 240 }));
+    const grid = gridEl(container);
+    expect(grid.hasAttribute("data-fluid")).toBe(true);
+    expect(grid.style.getPropertyValue("--hk-selection-grid-item-min")).toBe("240px");
+  });
+
+  it("owns the track template: no data-cols hook the narrow overrides could flip", () => {
+    const container = mount(
+      h(HkSelectionGrid, { items: ITEMS, minItemWidth: 240, columns: 4 }),
+    );
+    const grid = gridEl(container);
+    expect(grid.hasAttribute("data-cols")).toBe(false);
+  });
+
+  it("stays in fixed-columns mode when minItemWidth is unset", () => {
+    const container = mount(h(HkSelectionGrid, { items: ITEMS, columns: 3 }));
+    const grid = gridEl(container);
+    expect(grid.hasAttribute("data-fluid")).toBe(false);
+    expect(grid.getAttribute("data-cols")).toBe("3");
+    expect(grid.style.getPropertyValue("--hk-selection-grid-item-min")).toBe("");
+  });
+
+  it("renders every item in fluid mode like in fixed mode", () => {
+    const container = mount(h(HkSelectionGrid, { items: ITEMS, minItemWidth: 240 }));
+    expect(cards(container).length).toBe(ITEMS.length);
+  });
+
+  it("ignores floors that cannot form a track minimum (0 / negative / NaN)", () => {
+    for (const bad of [0, -240, Number.NaN]) {
+      const container = mount(
+        h(HkSelectionGrid, { items: ITEMS, minItemWidth: bad, columns: 3 }),
+      );
+      const grid = gridEl(container);
+      expect(grid.hasAttribute("data-fluid")).toBe(false);
+      expect(grid.getAttribute("data-cols")).toBe("3");
+    }
+  });
+});

package/src/components/HkSelectionGrid.tsx

@@ -25,6 +25,15 @@ export default defineComponent({
     },
     multi: { type: Boolean, default: false },
     columns: { type: Number as PropType<SelectionGridCols>, default: 2 },
+    /** Adaptive floor mode: when set (px), the column count is DERIVED from
+     *  the available width instead of the fixed `columns` number — every
+     *  track is at least this wide, so a wide host (e.g. an 896px modal)
+     *  lays three 240px options per row while narrow hosts step down to
+     *  two, then one, without a horizontal overflow at any width. Takes
+     *  precedence over `columns` (which stays the contract for hosts that
+     *  want an exact count). Values that cannot form a floor (non-finite
+     *  or ≤ 0) are ignored and fall back to fixed `columns`. */
+    minItemWidth: { type: Number, default: undefined },
     groupTitle: { type: String, default: undefined },
     hint: { type: String, default: undefined },
     dense: { type: Boolean, default: false },
@@ -36,6 +45,14 @@ export default defineComponent({
     return () => {
       if (!props.items.length) return null;
 
+      // A floor must be a usable track minimum: non-finite or non-positive
+      // values fall back to the fixed `columns` contract instead of
+      // producing a degenerate (0px → dozens of tracks) or invalid grid.
+      const fluid =
+        props.minItemWidth != null &&
+        Number.isFinite(props.minItemWidth) &&
+        props.minItemWidth > 0;
+
       return (
         <div class="hk-selection-grid">
           {props.groupTitle && (
@@ -43,8 +60,15 @@ export default defineComponent({
           )}
           <div
             class="hk-selection-grid-grid"
-            data-cols={props.columns}
+            // Fluid mode owns the track template (auto-fill with the floor),
+            // so the data-cols hooks — and their narrow-viewport overrides —
+            // stay out of its way entirely.
+            data-cols={fluid ? undefined : props.columns}
+            data-fluid={fluid || undefined}
             data-dense={props.dense || undefined}
+            style={fluid
+              ? ({ "--hk-selection-grid-item-min": `${props.minItemWidth}px` })
+              : undefined}
           >
             {props.items.map((item) => {
               const isSelected = props.multi

package/src/components/revealKinematogram.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  BACKGROUND_DRIFT_PX_S,
+  GLYPH_DRIFT_PX_S,
+  layoutRevealGlyphs,
+  NOISE_TILE_W,
+  RevealNoisePainter,
+  wrapDrift,
+} from "./revealKinematogram";
+
+/**
+ * Pure-contract tests for the noise kinematogram behind the password
+ * hold-to-reveal pass: drift wrapping/accumulation (the motion that
+ * makes glyphs readable) and the glyph layout math (the mask that must
+ * stay still). The screenshot-safety invariant itself — no glyph ever
+ * drawn on the visible canvas — is pinned in HkInput.password.test.tsx.
+ */
+
+describe("wrapDrift", () => {
+  it("folds any accumulator into [0, tile) and stays periodic", () => {
+    for (const px of [0, 5, 511.5, 512, 1024.25, -1, -13, -40.75, -2048]) {
+      const w = wrapDrift(px, NOISE_TILE_W);
+      expect(w).toBeGreaterThanOrEqual(0);
+      expect(w).toBeLessThan(NOISE_TILE_W);
+      expect(w).toBeCloseTo(((px % NOISE_TILE_W) + NOISE_TILE_W) % NOISE_TILE_W, 10);
+    }
+    expect(wrapDrift(13, NOISE_TILE_W)).toBe(wrapDrift(13 + NOISE_TILE_W * 7, NOISE_TILE_W));
+    // The background drifts towards -∞: its wrap must stay positive.
+    expect(wrapDrift(-13, NOISE_TILE_W)).toBe(NOISE_TILE_W - 13);
+  });
+});
+
+describe("layoutRevealGlyphs", () => {
+  const measure10 = (_ch: string, _px: number) => 10;
+
+  it("keeps surrogate pairs as single glyphs", () => {
+    const l = layoutRevealGlyphs(Array.from("😀ab"), measure10, 300, 40, 2);
+    expect(l.glyphs.map((g) => g.ch)).toEqual(["😀", "a", "b"]);
+  });
+
+  it("centers a fitting row without scaling (device-px coordinates)", () => {
+    // basePx clamps to 18 at a 40px-tall box; raw 30 < avail 272 → no
+    // shrink; the row is centered and advances are dpr-scaled.
+    const l = layoutRevealGlyphs(["a", "b", "c"], measure10, 300, 40, 2);
+    expect(l.fontPx).toBe(36);
+    expect(l.glyphs.map((g) => g.x)).toEqual([270, 290, 310]);
+    expect(l.glyphs.every((g) => g.advance === 20)).toBe(true);
+  });
+
+  it("scales an overflowing row down with a 0.4 floor", () => {
+    const narrow = layoutRevealGlyphs(
+      Array.from("x".repeat(40)),
+      measure10,
+      300,
+      40,
+      1,
+    );
+    // raw 400 > avail 272 → scale 0.68.
+    expect(narrow.fontPx).toBeCloseTo(18 * 0.68, 10);
+    const extreme = layoutRevealGlyphs(
+      Array.from("x".repeat(200)),
+      measure10,
+      300,
+      40,
+      1,
+    );
+    expect(extreme.fontPx).toBeCloseTo(18 * 0.4, 10);
+  });
+
+  it("keeps the visual size band regardless of box height", () => {
+    const tiny = layoutRevealGlyphs(["a"], measure10, 300, 8, 1);
+    const huge = layoutRevealGlyphs(["a"], measure10, 300, 400, 1);
+    expect(tiny.fontPx).toBe(12);
+    expect(huge.fontPx).toBe(18);
+  });
+
+  it("returns an empty layout for an empty row", () => {
+    const l = layoutRevealGlyphs([], measure10, 300, 40, 2);
+    expect(l.glyphs).toEqual([]);
+  });
+});
+
+describe("RevealNoisePainter", () => {
+  it("seeds both drift phases from randomness at each hold", () => {
+    const p = new RevealNoisePainter();
+    const rand = vi.spyOn(Math, "random").mockReturnValue(0.25);
+    try {
+      p.beginHold([220, 10, 15]);
+      // Two phase draws before retile; happy-dom has no 2d context, so
+      // the tile build bails before consuming any more randomness.
+      expect(p.peekDrift().glyph).toBeCloseTo(0.25 * NOISE_TILE_W, 10);
+      expect(p.peekDrift().background).toBeCloseTo(0.25 * NOISE_TILE_W, 10);
+    } finally {
+      rand.mockRestore();
+    }
+  });
+
+  it("accumulates the two counter-drifts in device px", () => {
+    const p = new RevealNoisePainter();
+    p.beginHold([220, 10, 15]);
+    const before = p.peekDrift();
+    p.advance(0.25, 2);
+    const mid = p.peekDrift();
+    expect(mid.glyph - before.glyph).toBeCloseTo(GLYPH_DRIFT_PX_S * 2 * 0.25, 10);
+    expect(mid.background - before.background).toBeCloseTo(
+      BACKGROUND_DRIFT_PX_S * 2 * 0.25,
+      10,
+    );
+    p.advance(0.25, 2);
+    const after = p.peekDrift();
+    expect(after.glyph - mid.glyph).toBeCloseTo(GLYPH_DRIFT_PX_S * 0.5, 10);
+    expect(after.background - mid.background).toBeCloseTo(BACKGROUND_DRIFT_PX_S * 0.5, 10);
+  });
+
+  it("never throws without a 2d context and stays unusable (fallback path)", () => {
+    const p = new RevealNoisePainter();
+    expect(() => p.beginHold([220, 10, 15])).not.toThrow();
+    expect(p.available).toBe(false);
+  });
+});