@celestia-island/hikari 0.55.16 → 0.55.18

package/package.json

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

package/src/DemoApp.tsx

@@ -366,7 +366,8 @@ export default defineComponent({
             <HInput modelValue={form.value.text} onUpdate:modelValue={(v: string) => (form.value.text = v)} placeholder="Disabled" disabled />
             <HSearchInput modelValue={form.value.search} onUpdate:modelValue={(v: string | number) => (form.value.search = String(v))} placeholder="Search..." />
             <HNumberInput modelValue={form.value.number} onUpdate:modelValue={(v: number) => (form.value.number = v)} placeholder="Number" />
-            <HInput variant="password" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (hold the eye)" />
+            <HInput variant="password" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (sweep reveal — default)" />
+            <HInput variant="password" revealStrategy="noise" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (noise reveal — screenshot-safe)" />
             <HInput variant="password" revealStrategy="plain" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (plain reveal)" />
             <HInput variant="password" revealTrigger="toggle" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (click eye toggles)" />
             <HInput variant="password" passwordTrailing="strength" modelValue={form.value.password} onUpdate:modelValue={(v: string) => (form.value.password = v)} placeholder="Password (strength light)" />

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

@@ -14,8 +14,9 @@ import { setReducedMotion } from "../runtime/animationBus";
  *   hint, caps-lock / full-width hints, pending-clear refocus semantics
  * - right-edge affordance (passwordTrailing): eye reveal (default) /
  *   strength traffic light / none
- * - reveal strategy (revealStrategy): "noise" boiling kinematogram
- *   (screenshot-safe, default) vs "plain" readable text
+ * - reveal strategy (revealStrategy): "sweep" readable window (default)
+ *   vs "noise" boiling kinematogram (screenshot-safe) vs "plain"
+ *   readable text
  * - reveal trigger (revealTrigger): press-and-hold (default) vs
  *   click-to-toggle with auto-hide (revealAutoHideMs)
  * - the strength dot classifies through the shared passwordLevel util
@@ -651,6 +652,7 @@ describe("HkInput password reveal eye", () => {
       clearRect: () => {},
       save: () => {}, restore: () => {}, translate: () => {}, rotate: () => {},
       beginPath: () => {}, arc: () => {}, fill: () => {},
+      rect: () => {}, clip: () => {},
       measureText: () => ({ width: 10 }),
       fillText: () => {},
       fillRect: () => {},
@@ -766,7 +768,9 @@ describe("HkInput password reveal eye", () => {
       } as unknown as CanvasRenderingContext2D;
     }) as unknown as typeof HTMLCanvasElement.prototype.getContext;
     try {
-      const { container, input } = mountPasswordInput("abc");
+      const { container, input } = mountPasswordInput("abc", {
+        revealStrategy: "noise",
+      });
       const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;
 
       eye.dispatchEvent(
@@ -883,7 +887,9 @@ describe("HkInput password reveal eye", () => {
       } as unknown as CanvasRenderingContext2D;
     }) as unknown as typeof HTMLCanvasElement.prototype.getContext;
     try {
-      const { container } = mountPasswordInput("abc");
+      const { container } = mountPasswordInput("abc", {
+        revealStrategy: "noise",
+      });
       const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;
       eye.dispatchEvent(
         new PointerEvent("pointerdown", { pointerType: "mouse", bubbles: true }),
@@ -954,7 +960,9 @@ describe("HkInput password reveal eye", () => {
     vi.stubGlobal("requestAnimationFrame", () => 0);
     vi.stubGlobal("cancelAnimationFrame", () => {});
     try {
-      const { container } = mountPasswordInput("abc");
+      const { container } = mountPasswordInput("abc", {
+        revealStrategy: "noise",
+      });
       const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;
       eye.dispatchEvent(
         new PointerEvent("pointerdown", { pointerType: "mouse", bubbles: true }),
@@ -1034,7 +1042,9 @@ describe("HkInput password reveal eye", () => {
       } as unknown as CanvasRenderingContext2D;
     }) as unknown as typeof HTMLCanvasElement.prototype.getContext;
     try {
-      const { container, input } = mountPasswordInput("abc");
+      const { container, input } = mountPasswordInput("abc", {
+        revealStrategy: "noise",
+      });
       const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;
       eye.dispatchEvent(
         new PointerEvent("pointerdown", { pointerType: "mouse", bubbles: true }),
@@ -1105,7 +1115,9 @@ describe("HkInput password reveal eye", () => {
       } as unknown as CanvasRenderingContext2D;
     }) as unknown as typeof HTMLCanvasElement.prototype.getContext;
     try {
-      const { container } = mountPasswordInput("abc");
+      const { container } = mountPasswordInput("abc", {
+        revealStrategy: "noise",
+      });
       const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;
       eye.dispatchEvent(
         new PointerEvent("pointerdown", { pointerType: "mouse", bubbles: true }),
@@ -1166,7 +1178,9 @@ describe("HkInput password reveal eye", () => {
       } as unknown as CanvasRenderingContext2D;
     }) as unknown as typeof HTMLCanvasElement.prototype.getContext;
     try {
-      const { container } = mountPasswordInput("abc");
+      const { container } = mountPasswordInput("abc", {
+        revealStrategy: "noise",
+      });
       const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;
       eye.dispatchEvent(
         new PointerEvent("pointerdown", { pointerType: "mouse", bubbles: true }),
@@ -1247,7 +1261,9 @@ describe("HkInput password reveal eye", () => {
       } as unknown as CanvasRenderingContext2D;
     }) as unknown as typeof HTMLCanvasElement.prototype.getContext;
     try {
-      const { container } = mountPasswordInput("abc");
+      const { container } = mountPasswordInput("abc", {
+        revealStrategy: "noise",
+      });
       const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;
       eye.dispatchEvent(
         new PointerEvent("pointerdown", { pointerType: "mouse", bubbles: true }),
@@ -1304,6 +1320,8 @@ function stubRecordingContexts() {
     patternFills: number;
     drawImages: number;
     putImageDatas: number;
+    clips: Array<{ x: number; y: number; w: number; h: number }>;
+    translates: number[];
   }
   const byCanvas = new Map<HTMLCanvasElement, CanvasRec>();
   const original = HTMLCanvasElement.prototype.getContext;
@@ -1312,7 +1330,15 @@ function stubRecordingContexts() {
   ): CanvasRenderingContext2D {
     let rec = byCanvas.get(this);
     if (!rec) {
-      rec = { canvas: this, texts: [], patternFills: 0, drawImages: 0, putImageDatas: 0 };
+      rec = {
+        canvas: this,
+        texts: [],
+        patternFills: 0,
+        drawImages: 0,
+        putImageDatas: 0,
+        clips: [],
+        translates: [],
+      };
       byCanvas.set(this, rec);
     }
     const r = rec;
@@ -1321,7 +1347,7 @@ function stubRecordingContexts() {
       clearRect: () => {},
       save: () => {},
       restore: () => {},
-      translate: () => {},
+      translate: (x: number) => r.translates.push(x),
       rotate: () => {},
       beginPath: () => {},
       arc: () => {},
@@ -1338,6 +1364,9 @@ function stubRecordingContexts() {
         data: new Uint8ClampedArray(w * h * 4),
       }),
       putImageData: () => r.putImageDatas++,
+      rect: (x: number, y: number, w: number, h: number) =>
+        r.clips.push({ x, y, w, h }),
+      clip: () => {},
       imageSmoothingEnabled: false,
       globalCompositeOperation: "source-over",
       font: "",
@@ -1355,6 +1384,130 @@ function stubRecordingContexts() {
 }
 
 describe("HkInput password reveal strategies", () => {
+  it("sweep (default) draws readable text inside a moving window over the noise field", async () => {
+    // The default reveal: real high-contrast text clipped to a band
+    // that sweeps across the row (sweepWindow), on top of the boiling
+    // noise field. A single frame leaks only the band's characters.
+    const rec = stubRecordingContexts();
+    try {
+      const { container, input } = mountPasswordInput("abc");
+      const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;
+      eye.dispatchEvent(
+        new PointerEvent("pointerdown", { pointerType: "mouse", bubbles: true }),
+      );
+      await nextTick();
+      const visible = container.querySelector<HTMLCanvasElement>(".hk-pwd-dots")!;
+      const vis = rec.byCanvas.get(visible)!;
+      // The sync first frame already carries text + noise base.
+      expect(vis.texts).toEqual(["a", "b", "c"]);
+      expect(vis.patternFills).toBeGreaterThan(0);
+      expect(vis.clips.length).toBeGreaterThanOrEqual(1);
+      expect(vis.clips[0]!.w).toBeGreaterThan(0);
+      // The DOM input still never flips.
+      expect(input.type).toBe("password");
+      // Frames move the window: clip x changes across the sweep.
+      for (let i = 0; i < 3; i++) {
+        await new Promise((r) => setTimeout(r, 45));
+        await new Promise((r) => requestAnimationFrame(() => r(null)));
+      }
+      expect(vis.clips.length).toBeGreaterThanOrEqual(2);
+      const xs = new Set(vis.clips.map((c) => c.x));
+      expect(xs.size, "the window travels across the row").toBeGreaterThan(1);
+      // The band must traverse (essentially) the WHOLE row, not stop
+      // mid-row: on the degenerate 0-width happy-dom canvas the layout
+      // scale floors at 0.5, giving advance 6 and an 18px row for
+      // "abc" — the clip centers must span ≥ 12px of that travel
+      // (center = clip.x + w/2; the sweep spans first-glyph left edge
+      // to the row's right edge).
+      const centers = vis.clips.map((c) => c.x + c.w / 2);
+      expect(
+        Math.max(...centers) - Math.min(...centers),
+        "the sweep reaches the row tail",
+      ).toBeGreaterThanOrEqual(12);
+      document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+      await nextTick();
+    } finally {
+      rec.restore();
+    }
+  });
+
+  it("restarts the sweep from the row head on the second hold", async () => {
+    // sweepT resets per reveal: hold-release-hold must show the window
+    // at the row START again, not resume from wherever the last hold
+    // left it (R2 mutation M23 — the sweepT reset had no pin).
+    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 visible = container.querySelector<HTMLCanvasElement>(".hk-pwd-dots")!;
+      const vis = rec.byCanvas.get(visible)!;
+      const firstHoldFirstClip = vis.clips[0]!;
+      // Drive real bus frames DURING the first hold so sweepT actually
+      // advances past the row before release — without this, both
+      // holds' first frames draw at sweepT = 0 and the reset pin below
+      // passes vacuously. The self-check makes a frameless environment
+      // fail loudly instead of slipping through.
+      for (let i = 0; i < 3; i++) {
+        await new Promise((r) => setTimeout(r, 45));
+        await new Promise((r) => requestAnimationFrame(() => r(null)));
+      }
+      expect(
+        vis.clips.length,
+        "bus frames advanced the sweep during hold 1",
+      ).toBeGreaterThanOrEqual(2);
+      document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+      await nextTick();
+      // Second hold: the very first frame's window must sit at the row
+      // head again (same clip as the first hold's first frame).
+      eye.dispatchEvent(
+        new PointerEvent("pointerdown", { pointerType: "mouse", bubbles: true }),
+      );
+      await nextTick();
+      const secondHoldFirstClip = vis.clips[vis.clips.length - 1]!;
+      expect(secondHoldFirstClip.x).toBe(firstHoldFirstClip.x);
+      expect(secondHoldFirstClip.w).toBe(firstHoldFirstClip.w);
+      document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+      await nextTick();
+    } finally {
+      rec.restore();
+    }
+  });
+
+  it("sweep degrades to static plain text when the animation bus is parked (reduced motion)", async () => {
+    // A parked bus cannot move the window, so the sweep falls back to
+    // the fully readable static plain text — never to frozen noise.
+    setReducedMotion(true);
+    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 visible = container.querySelector<HTMLCanvasElement>(".hk-pwd-dots")!;
+      const vis = rec.byCanvas.get(visible)!;
+      expect(vis.texts).toEqual(["a", "b", "c"]);
+      // No noise machinery on the visible canvas in the degraded state.
+      expect(vis.patternFills).toBe(0);
+      // And the degrade target is PLAIN text, not the legacy jitter:
+      // the plain pass never translates per glyph (the jitter does).
+      expect(vis.translates.length, "static plain, not jitter").toBe(0);
+      // And it stays put — the static frame is the whole reveal.
+      await new Promise((r) => setTimeout(r, 260));
+      expect(vis.texts).toEqual(["a", "b", "c"]);
+      document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
+      await nextTick();
+    } finally {
+      rec.restore();
+      setReducedMotion(false);
+    }
+  });
+
   it("plain strategy draws readable text on the VISIBLE canvas — and nothing else", async () => {
     // The opt-in readable reveal (revealStrategy="plain"): glyphs ARE
     // the visible frame — no noise fills, no mask stamp — while the DOM
@@ -1476,6 +1629,7 @@ describe("HkInput password reveal strategies", () => {
     const rec = stubRecordingContexts();
     try {
       const { container, model } = mountPasswordInput("abc", {
+        revealStrategy: "noise",
         revealTrigger: "toggle",
       });
       const eye = container.querySelector<HTMLElement>("button.hk-pwd-eye")!;

package/src/components/HkInput.tsx

@@ -58,11 +58,12 @@ export default defineComponent({
     /**
      * Right-edge affordance for `variant="password"`:
      * - "eye" (default): the reveal button. While revealed, the canvas
-     *   renders the reveal chosen by `revealStrategy` (boiling-noise
-     *   kinematogram by default, plain text on opt-in); the trigger is
-     *   `revealTrigger` (press-and-hold by default, click-toggle on
-     *   opt-in). The DOM value stays inside the type="password" input
-     *   at all times — every strategy draws on the canvas.
+     *   renders the reveal chosen by `revealStrategy` (the sweep
+     *   readable-window by default; boiling-noise and plain text on
+     *   opt-in); the trigger is `revealTrigger` (press-and-hold by
+     *   default, click-toggle on opt-in). The DOM value stays inside
+     *   the type="password" input at all times — every strategy draws
+     *   on the canvas.
      * - "strength": the traffic-light dot (weak / fair / strong via the
      *   shared `passwordLevel` classifier, overridable through
      *   `strengthEvaluator`) with a localized tooltip on hover and on
@@ -76,17 +77,23 @@ export default defineComponent({
     /**
      * Reveal content for the password eye (`variant="password"`,
      * `passwordTrailing="eye"`):
-     * - "noise" (default): the boiling-noise kinematogram — readable by
-     *   a watching human, statistically pure noise in any single-frame
-     *   screenshot (nothing for OCR to lock onto).
+     * - "sweep" (default): 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
+     *   only the characters under the band (partial capture
+     *   resistance).
+     * - "noise": the boiling-noise kinematogram — statistically pure
+     *   noise in any single-frame screenshot (nothing for OCR to lock
+     *   onto), but the hardest to read. Opt-in for high-exposure
+     *   surfaces.
      * - "plain": ordinary readable text while revealed (the industry-
      *   standard reveal) — readable by everyone including
      *   reduced-motion users, but fully visible to screenshots and
      *   shoulder surfers. Pick per threat model.
      */
     revealStrategy: {
-      type: String as () => "noise" | "plain",
-      default: "noise",
+      type: String as () => "sweep" | "noise" | "plain",
+      default: "sweep",
     },
     /**
      * Reveal interaction for the password eye: "hold" (default) reveals

package/src/components/HkPasswordSurface.scss

@@ -251,9 +251,10 @@
 
 /* Reveal eye button — the right-edge affordance of the default
  * passwordTrailing="eye" mode. Revealing renders the chosen
- * revealStrategy (the screenshot-safe boiling-noise kinematogram by
- * default, plain text on opt-in); the trigger is press-and-hold by
- * default, click-toggle on opt-in; hiding restores the dot matrix. */
+ * revealStrategy (the sweep readable window by default; the
+ * screenshot-safe boiling-noise kinematogram and plain text on
+ * opt-in); the trigger is press-and-hold by default, click-toggle on
+ * opt-in; hiding restores the dot matrix. */
 .hk-pwd-eye {
   position: absolute;
   inset-inline-end: calc(var(--space-12) - 0.25rem);

package/src/components/HkPasswordSurface.tsx

@@ -25,6 +25,7 @@ import { HkPlaceholderMarquee, type PlaceholderVariant } from "./HkPlaceholderMa
 import {
   layoutRevealGlyphs,
   RevealNoisePainter,
+  sweepWindow,
   type RevealLayout,
 } from "./revealKinematogram";
 import "./HkPasswordSurface.scss";
@@ -50,16 +51,24 @@ 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 "noise" (default): the canvas stops drawing the dot
- *     matrix and renders the boiling-noise kinematogram instead (see
- *     revealKinematogram.ts): one shared noise tile, the background
- *     drifting sideways while the noise sampled through the password
- *     glyphs is re-sampled at a random phase every frame. A human reads
- *     the glyph silhouettes off the flicker-vs-drift contrast, 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.
+ *   - strategy "sweep" (default): 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 (see
+ *     revealKinematogram.ts). Reading is effortless; a single frame —
+ *     a screenshot — shows only the characters under the band, the rest
+ *     stays noise (partial capture resistance). Reduced motion or a
+ *     pattern-less engine degrades to the fully readable static plain
+ *     text.
+ *   - strategy "noise": the screenshot-safe boiling-noise kinematogram:
+ *     one shared noise tile, the background drifting sideways while the
+ *     noise sampled through the password glyphs is re-sampled at a
+ *     random phase every frame. A human reads the glyph silhouettes off
+ *     the flicker-vs-drift contrast, while any single frame — a
+ *     screenshot — is pure noise with no glyph structure for OCR to
+ *     lock onto. The hardest to read; opt-in for high-exposure
+ *     surfaces. 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.
  *   - strategy "plain": the industry-standard readable reveal — the
  *     password is drawn as ordinary text on the canvas while revealed
  *     (the DOM input stays type="password"). Readable by everyone,
@@ -102,13 +111,21 @@ export default defineComponent({
       default: "eye",
     },
     /**
-     * What the eye reveal SHOWS: "noise" (default) = the screenshot-
-     * safe boiling-noise kinematogram; "plain" = ordinary readable text
-     * drawn on the canvas (screenshot-visible — pick per threat model).
+     * What the eye reveal SHOWS:
+     * - "sweep" (default): 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. Genuinely easy to
+     *   read; a single screenshot leaks only the characters under the
+     *   band (partial capture resistance).
+     * - "noise": the screenshot-safe boiling-noise kinematogram —
+     *   statistically pure noise in any single frame, nothing for OCR,
+     *   but the hardest to read (opt-in for high-exposure surfaces).
+     * - "plain": ordinary readable text drawn on the canvas (fully
+     *   screenshot-visible — pick per threat model).
      */
     revealStrategy: {
-      type: String as () => "noise" | "plain",
-      default: "noise",
+      type: String as () => "sweep" | "noise" | "plain",
+      default: "sweep",
     },
     /**
      * How the eye reveal is TRIGGERED: "hold" (default) = press-and-
@@ -156,7 +173,9 @@ export default defineComponent({
     // 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).
+    // fields, the string key built only on an actual rebuild). sweepT
+    // drives the sweep strategy's window position (seconds since the
+    // reveal started).
     const revealNoise = new RevealNoisePainter();
     let revealFrames = 0;
     let revealLayoutValue = "";
@@ -168,6 +187,7 @@ export default defineComponent({
     let revealAutoHide: CronHandle | null = null;
     let revealLayout: RevealLayout | null = null;
     let revealLayoutKey = "";
+    let sweepT = 0;
     // Raw computed `color` of the box, cached at reveal start — the
     // plain strategy's fillStyle (textHsl is the same read parsed for
     // the noise tile base).
@@ -434,8 +454,8 @@ export default defineComponent({
     }
 
     /**
-     * Motion reveal pass (the "noise" strategy, default): one frame of
-     * the boiling-noise kinematogram — background noise translated by
+     * Motion reveal pass (the "noise" strategy): one frame of the
+     * boiling-noise kinematogram — background noise translated by
      * the accumulated drift, then the (offscreen) glyph mask
      * re-composited with noise sampled at a fresh random phase. The
      * glyph geometry itself never touches the visible canvas, so a
@@ -473,6 +493,60 @@ export default defineComponent({
       ctx.restore();
     }
 
+    /**
+     * Sweep reveal pass (`revealStrategy="sweep"`, the default): the
+     * boiling-noise field stays as the base layer, and the password is
+     * drawn as ordinary high-contrast text ONLY inside a narrow window
+     * that sweeps across the row (sweepWindow kinematics: constant
+     * pace, dwell at the end, loop while held). Reading is effortless —
+     * real text under the window — while a single frame leaks only the
+     * window band's characters. The window geometry needs the text
+     * extent, so it derives from the memoized layout: span = first
+     * glyph's left edge to the last advance's right edge, window width
+     * = 6.5 advances (clamped into the field).
+     *
+     * Accepted risk: a row NARROWER than the window floor (≤ ~4 very
+     * short characters) fits entirely inside the band, so one frame
+     * leaks the whole password — for tiny secrets the sweep is
+     * effectively the plain strategy. Documented trade-off, not a bug.
+     *
+     * If the noise pattern path is unavailable this latches the static
+     * fallback (plain text, like the reduced-motion degrade) instead of
+     * the legacy jitter: sweep exists FOR readability.
+     */
+    function drawRevealSweepFrame(ctx: CanvasRenderingContext2D, W: number, H: number, dt: number) {
+      const layout = revealLayoutFor(ctx, W, H);
+      if (!layout || layout.glyphs.length === 0) return;
+      sweepT += dt;
+      revealNoise.advance(dt, dpr);
+      if (!revealNoise.paint(ctx, W, H, layout, cachedMonoFont || syncMonoFont(), revealLayoutKey)) {
+        revealStaticFallback = true;
+        drawRevealPlainText(ctx, W, H);
+        return;
+      }
+      const first = layout.glyphs[0]!;
+      const last = layout.glyphs[layout.glyphs.length - 1]!;
+      const rowStart = first.x;
+      const rowEnd = last.x + last.advance;
+      const advance = last.advance;
+      // Window width: 6.5 advances, never wider than half the field,
+      // but never below a readable floor (a degenerate canvas width
+      // must not collapse the band to zero — and a row shorter than
+      // the floor fits the band entirely: accepted risk, see the
+      // docblock above).
+      const winW = Math.max(56 * dpr, Math.min(W * 0.5, 6.5 * advance));
+      // Window-center span: from the first glyph's left edge to the
+      // row's right edge (so the band starts showing the head and ends
+      // showing the tail).
+      const { x, w } = sweepWindow(rowStart, rowEnd, winW, sweepT, dpr);
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(x - w / 2, 0, w, H);
+      ctx.clip();
+      drawRevealPlainText(ctx, W, H);
+      ctx.restore();
+    }
+
     /**
      * Legacy anti-OCR fallback, used only when frames cannot drive the
      * kinematogram (parked animation bus — reduced motion — or an
@@ -543,6 +617,17 @@ export default defineComponent({
           drawRevealPlainText(ctx, W, H);
           return;
         }
+        if (props.revealStrategy === "sweep") {
+          // Static fallback (reduced motion / pattern-less engine):
+          // sweep exists for readability, so its degrade target is the
+          // fully readable plain text, not the legacy jitter.
+          if (revealStaticFallback) {
+            drawRevealPlainText(ctx, W, H);
+            return;
+          }
+          drawRevealSweepFrame(ctx, W, H, dt);
+          return;
+        }
         if (!revealStaticFallback && drawRevealNoise(ctx, W, H, dt)) return;
         drawRevealJitterText(ctx, W, H);
         return;
@@ -639,19 +724,26 @@ export default defineComponent({
       if (!props.modelValue || props.disabled || revealing.value) return;
       syncTextHsl();
       syncMonoFont();
+      // The plain strategy is static — no painter, no watchdog. Both
+      // motion strategies (sweep default, noise opt-in) drive the noise
+      // painter per frame and degrade to a STATIC fallback when frames
+      // cannot drive them: sweep falls back to plain text (its whole
+      // point is readability), noise to the legacy jitter.
       const isPlain = props.revealStrategy === "plain";
       if (!isPlain) {
         revealStaticFallback = false;
         revealFrames = 0;
+        sweepT = 0;
         revealNoise.beginHold(textHsl);
       }
       revealing.value = true;
       // 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. The plain strategy needs no degrade: its static
-      // text is already motion-free.
+      // the motion reveals would freeze — the sweep into unreadable
+      // mid-state noise, the noise into pure noise — degrade immediately
+      // to the strategy's static fallback (plain text for sweep, legacy
+      // jitter for noise). Motion-sensitive users keep their preference
+      // and the reveal stays usable. The plain strategy needs no
+      // degrade: its static text is already motion-free.
       if (!isPlain && isAnimationParked()) {
         revealStaticFallback = true;
       }

package/src/components/_menu-item.contract.test.ts

@@ -87,4 +87,28 @@ describe("menu-item grammar contract", () => {
     expect(adminTokens).toMatch(/\.hk-menu-divider \{[^}]*--hk-menu-item-pad-y, 6px/);
     expect(adminTokens).toMatch(/\.hk-menu-divider \{[^}]*--hk-menu-item-pad-x, 12px/);
   });
+
+  it("lands the identity header on the rows' content edge inside HkMenu surfaces", () => {
+    // The account identity block (`.s-user-header` — the admin header's
+    // dropdown header slot and every consumer's HkMenu header slot) shares
+    // its container with the menu rows, so its inline padding must BE the
+    // rows' content edge: their 1px transparent border plus pad-x, in the
+    // grammar's own px units. A fixed rem value read 1px off at the
+    // default root, 4.5px at a 20px root, and 3px the other way on sheets
+    // (measured 2026-09-17): pin both scoped rules and their branch values.
+    expect(adminTokens).toMatch(
+      /\.hk-select-popout-host \.s-user-header \{[^}]*padding-inline: calc\(1px \+ var\(--hk-menu-item-pad-x, 12px\)\)/,
+    );
+    expect(adminTokens).toMatch(
+      /\.hk-select-sheet-panel \.s-user-header \{[^}]*padding-inline: calc\(1px \+ var\(--hk-menu-item-pad-x, 16px\)\)/,
+    );
+    // The sheet branch value must follow the sheet tokens, not the popout's.
+    expect(adminTokens).not.toMatch(
+      /\.hk-select-sheet-panel \.s-user-header \{[^}]*--hk-menu-item-pad-x, 12px/,
+    );
+    // Bare surfaces (no rows beside the block) keep the block's own value.
+    expect(adminTokens).toMatch(
+      /\.s-user-header \{[^}]*padding: var\(--space-10\) var\(--space-14\) var\(--space-12\)/,
+    );
+  });
 });

package/src/components/revealKinematogram.test.ts

@@ -5,6 +5,9 @@ import {
   layoutRevealGlyphs,
   NOISE_TILE_W,
   RevealNoisePainter,
+  sweepWindow,
+  SWEEP_END_PAUSE_S,
+  SWEEP_SPEED_CSS_PX_S,
   wrapDrift,
 } from "./revealKinematogram";
 
@@ -128,3 +131,41 @@ describe("RevealNoisePainter", () => {
     expect(p.available).toBe(false);
   });
 });
+
+describe("sweepWindow", () => {
+  const dpr = 1;
+  // A 100px travel at 220 CSS px/s ≈ 0.4545s of movement per cycle.
+  const start = 100;
+  const end = 200;
+  const winW = 60;
+
+  it("starts the window center at the span start and moves right", () => {
+    expect(sweepWindow(start, end, winW, 0, dpr).x).toBe(start);
+    const mid = sweepWindow(start, end, winW, 0.2, dpr);
+    expect(mid.x).toBeGreaterThan(start);
+    expect(mid.x).toBeLessThan(end);
+  });
+
+  it("reaches the span end and dwells there for the pause", () => {
+    const moveT = (end - start) / SWEEP_SPEED_CSS_PX_S;
+    expect(sweepWindow(start, end, winW, moveT, dpr).x).toBe(end);
+    // Mid-dwell: still at the end, not yet looping.
+    expect(sweepWindow(start, end, winW, moveT + SWEEP_END_PAUSE_S / 2, dpr).x).toBe(end);
+  });
+
+  it("loops with a period of travel + pause, phase-aligned", () => {
+    const cycle = (end - start) / SWEEP_SPEED_CSS_PX_S + SWEEP_END_PAUSE_S;
+    const a = sweepWindow(start, end, winW, 0.1, dpr);
+    const b = sweepWindow(start, end, winW, 0.1 + cycle, dpr);
+    expect(b.x).toBeCloseTo(a.x, 10);
+    // Negative t folds into the same cycle (defensive modulo).
+    expect(sweepWindow(start, end, winW, 0.1 - cycle, dpr).x).toBeCloseTo(a.x, 10);
+  });
+
+  it("carries the window width through and survives a degenerate span", () => {
+    expect(sweepWindow(start, end, winW, 0.1, dpr).w).toBe(winW);
+    // start == end: travel clamps to >=1, never divides by zero.
+    expect(() => sweepWindow(50, 50, winW, 0.1, dpr)).not.toThrow();
+    expect(sweepWindow(50, 50, winW, 0.1, dpr).x).toBeGreaterThanOrEqual(50);
+  });
+});

package/src/components/revealKinematogram.ts

@@ -1,7 +1,10 @@
 /**
- * revealKinematogram — the screenshot-safe rendering behind the
- * HkPasswordSurface noise reveal (hold or toggle; a random-dot
- * kinematogram).
+ * revealKinematogram — the canvas rendering behind the HkPasswordSurface
+ * reveal strategies: the boiling-noise kinematogram (the "noise"
+ * strategy — screenshot-safe in any single frame) and the sweep-window
+ * kinematics for the "sweep" strategy (a readable band over the noise;
+ * deliberately NOT single-frame safe). Both serve hold and toggle
+ * triggers; the "plain" strategy bypasses this module entirely.
  *
  * Principle: the whole reveal area is filled with ONE shared noise tile.
  * The glyph mask stays perfectly still while the BACKGROUND noise drifts
@@ -121,6 +124,35 @@ export function wrapDrift(px: number, tile: number): number {
   return m < 0 ? m + tile : m;
 }
 
+/** Sweep-window kinematics for the "sweep" reveal strategy (all values
+ * in DEVICE px): the readable window's CENTER travels from `spanStart`
+ * to `spanEnd` at a constant pace, dwells at the end for
+ * SWEEP_END_PAUSE_S so the tail characters get read, then loops for as
+ * long as the reveal is held. Pure math — unit-pinned.
+ *
+ * Readability contract: inside the window the password is drawn as
+ * ordinary high-contrast text (the eye reads it effortlessly); outside
+ * it, the boiling-noise field continues. A single screenshot therefore
+ * leaks only the characters under the window — weaker than the "noise"
+ * strategy's full single-frame safety, but far more readable. */
+export const SWEEP_SPEED_CSS_PX_S = 220;
+export const SWEEP_END_PAUSE_S = 0.45;
+
+export function sweepWindow(
+  spanStart: number,
+  spanEnd: number,
+  winW: number,
+  t: number,
+  dpr: number,
+): { x: number; w: number } {
+  const travel = Math.max(1, spanEnd - spanStart);
+  const moveT = travel / (SWEEP_SPEED_CSS_PX_S * dpr);
+  const cycle = moveT + SWEEP_END_PAUSE_S;
+  const phase = ((t % cycle) + cycle) % cycle;
+  const x = phase >= moveT ? spanEnd : spanStart + travel * (phase / moveT);
+  return { x, w: winW };
+}
+
 /**
  * Lay the password glyphs out centered in the reveal area, scaling the
  * row down (floor 0.5×) when it overflows. The mask must stay perfectly

package/src/styles/admin-tokens.scss

@@ -550,14 +550,35 @@
   flex-direction: column;
   gap: 2px;
   min-width: 0;
-  /* In menus this aligns with .s-popup-menu-item's own space-14 (menu
-     padding applies equally to both); bare surfaces (the popover
-     wrapper) rely on it entirely. The bottom margin restores the
-     separation the removed section divider used to provide. */
+  /* The 14px inline is the BARE-surface value (a wrapper with no menu rows
+     beside it). Inside HkMenu's surfaces the scoped rules below take over:
+     the unified menu-item grammar moved rows to a 12px pad plus a 1px
+     transparent border (sheets 16px), so a fixed 14px aligned with nothing
+     — 1px off at the default root, 4.5px at a 20px root, and 3px the other
+     way on sheets (measured 2026-09-17, chest account menus). The bottom
+     margin restores the separation the removed section divider used to
+     provide. */
   padding: var(--space-10) var(--space-14) var(--space-12);
   margin-bottom: var(--space-4);
 }
 
+/* Inside HkMenu's popout/sheet surfaces the block shares its container with
+   the menu rows, so its inline padding IS the rows' content edge — their
+   1px transparent border plus pad-x — expressed in the grammar's own units
+   (px formulas: the row paddings are px literals declared on the rows, so
+   a rem here drifts at any other root font-size; the fallback literals must
+   follow _menu-item.scss if the row padding ever moves). Scoped to the two
+   surfaces that host the block, so bare surfaces keep the 14px and plain
+   HkSelect / HkPopupSelect panels are untouched. Consumers that re-anchor
+   the block (a drawer footer) keep their own context overrides. */
+.hk-select-popout-host .s-user-header {
+  padding-inline: calc(1px + var(--hk-menu-item-pad-x, 12px));
+}
+
+.hk-select-sheet-panel .s-user-header {
+  padding-inline: calc(1px + var(--hk-menu-item-pad-x, 16px));
+}
+
 /* Profile variant — avatar chip beside the identity column, the ONE
    identity grammar the chat frontend's user menu and the admin
    header's dropdown share (moved up from chest's ChatLayout so both