@celestia-island/hikari 0.55.267 → 0.55.268

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.267",
+  "version": "0.55.268",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkSidebarRail.styles.test.ts

@@ -246,7 +246,7 @@ describe("HkSidebarRail geometry contract", () => {
     expect(btn).toContain("--hi-icon-button-radius: 9999px");
   });
 
-  it("hosts the rail flip's icon flight: paint-only layer, dead clones, triply-scoped hide", () => {
+  it("hosts the rail flip's icon flight: paint-only layer, dead clones, single-glyph hide", () => {
     // useRailIconFlight clones the flipping icons onto a layer ABOVE the
     // dissolve. The layer is chrome: it must never intercept a pointer
     // (the leaving generation is pointer-dead for the dissolve and the

package/src/components/HkSidebarRailSwap.tsx

@@ -84,9 +84,11 @@ import "./HkSidebarRail.scss";
  * icon slides slightly left as it collapses"). This component hands the
  * flip to the flight choreographer: icons opted in by HkMenu
  * (`data-flip-icon`) are cloned into a flight layer on THIS host and
- * animated from the leaving rect to the entering one, while the leaving
- * copies hide (`data-flipping` + the leave class) and the rest of the
- * content keeps the plain dissolve. Skipped under reduced motion / the
+ * animated from the leaving rect to the entering one, while BOTH ends
+ * of each matched pair hide (`data-flipping` + the per-cell
+ * `data-flip-flying` mark — the single-glyph contract: the clone is the
+ * one visible glyph from arm to landing) and the rest of the content
+ * keeps the plain dissolve. Skipped under reduced motion / the
  * animation switch / no WAAPI / no matching pair — every such case
  * degrades to today's dissolve.
  *

package/src/composables/useRailIconFlight.test.ts

@@ -43,7 +43,8 @@ import HkSidebarRailSwap from "../components/HkSidebarRailSwap";
  *    motion, or a dissolved-away leaving generation → no flight.
  * 4. The lifecycle: the WAAPI `finish` sweeps the layer; the sweep timer
  *    backstops it; a fresh flip replaces (never stacks) the previous
- *    flight; unmount cleans up.
+ *    flight; scope disposal tears a live flight down (the afterEach
+ *    unmount walks the same path).
  */
 
 const mounts: App[] = [];
@@ -54,6 +55,7 @@ interface RecordedAnimation {
   keyframes: Keyframe[];
   options: KeyframeAnimationOptions;
   fire(type: "finish" | "cancel"): void;
+  cancelCount(): number;
 }
 let animations: RecordedAnimation[] = [];
 
@@ -182,16 +184,26 @@ beforeEach(() => {
     options?: KeyframeAnimationOptions,
   ) {
     const listeners = new Map<string, EventListener>();
+    let cancels = 0;
     const handle = {
       addEventListener: (type: string, listener: EventListener) => {
         listeners.set(type, listener);
       },
-      cancel: () => listeners.get("cancel")?.(new Event("cancel")),
+      cancel: () => {
+        cancels++;
+        listeners.get("cancel")?.(new Event("cancel"));
+      },
       fire(type: "finish" | "cancel") {
         listeners.get(type)?.(new Event(type));
       },
     };
-    animations.push({ el: this, keyframes, options: options ?? ({} as KeyframeAnimationOptions), fire: handle.fire });
+    animations.push({
+      el: this,
+      keyframes,
+      options: options ?? ({} as KeyframeAnimationOptions),
+      fire: handle.fire,
+      cancelCount: () => cancels,
+    });
     return handle as unknown as Animation;
   } as typeof animatable.animate;
 });
@@ -219,6 +231,8 @@ describe("cssDurationMs", () => {
     expect(cssDurationMs("150ms")).toBe(150);
     expect(cssDurationMs("0.2s")).toBe(200);
     expect(cssDurationMs("300ms")).toBe(300);
+    expect(cssDurationMs("0.3S"), "CSS units are case-insensitive").toBe(300);
+    expect(cssDurationMs("150MS")).toBe(150);
     expect(cssDurationMs("garbage")).toBe(0);
     expect(cssDurationMs("-5ms")).toBe(0);
   });
@@ -442,6 +456,14 @@ describe("useRailIconFlight", () => {
     expect(h.swap().hasAttribute(RAIL_FLIP_ACTIVE_ATTR)).toBe(false);
     expect(flightLayer(h)).toBeNull();
     expect(animations).toHaveLength(0);
+    // Skip paths never STAMP either: no cell anywhere may carry the hide
+    // mark (the skip tests used to assert only the host attribute and
+    // the layer — a future reorder stamping before a veto would have
+    // stayed green — 2026-11-02 review F5).
+    expect(
+      h.swap().querySelectorAll(`[${RAIL_FLIP_FLYING_ATTR}]`),
+      "a skipped flight marks nothing",
+    ).toHaveLength(0);
   });
 
   it("skips the flight when WAAPI is unavailable", async () => {
@@ -516,6 +538,16 @@ describe("useRailIconFlight", () => {
     animations[0]!.fire("finish");
     expect(flightLayer(h), "the finish listener sweeps immediately").toBeNull();
     expect(h.swap().hasAttribute(RAIL_FLIP_ACTIVE_ATTR)).toBe(false);
+    // LEAK PIN: the sweep CANCELS the clone animations, not just drops
+    // the layer — under the spec's replace-only auto-removal a finished
+    // fill:forwards animation on a never-again-animated element would
+    // strand Animation→effect→clone forever (2026-11-02 reviews: one
+    // reading says leak, a real-Chromium probe says element removal
+    // already clears getAnimations(); the cancel makes BOTH readings
+    // true and costs nothing).
+    for (const a of animations) {
+      expect(a.cancelCount(), "sweep cancels every clone animation").toBeGreaterThan(0);
+    }
     // The marks ride along: a swept flight unhides BOTH ends — the
     // leaving cell it substituted AND the entering cell it covered
     // (deleting the unmark loop once stayed green on this side; the pin

package/src/composables/useRailIconFlight.ts

@@ -96,6 +96,14 @@ import { releaseMediaQuery, useMediaQuery } from "../runtime/useMediaQuery";
  * sweep, and the single-glyph contract makes the alignment exact — the
  * clone covers the destination until the real icon is fully faded in.
  * No shipped rail host sets it today.
+ *
+ * KNOWN CEILING (2026-11-02 review, pre-existing): HkCrossfade's own
+ * stall watchdog is a fixed 450ms (CROSSFADE_WATCHDOG_MS). A theme that
+ * raises `--duration-normal` past it gets its healthy dissolve swept by
+ * the watchdog before the CSS completes — the flight follows the token
+ * faithfully, but the dissolve it mirrors is cut short. Tokenizing that
+ * watchdog is its own change; until then the practical retune ceiling
+ * is 450ms.
  */
 
 /** Row-key attribute on an icon cell that flies across a rail flip. */
@@ -123,16 +131,18 @@ export const RAIL_FLIGHT_SWEEP_MARGIN_MS = 300;
 
 /** Parse a CSS time custom property (`"120ms"`, `"0.15s"`, `""`) into
  *  milliseconds. Anything unparsable or non-positive is 0 — the caller
- *  decides what 0 means (no hold, or the fallback window). */
+ *  decides what 0 means (no hold, or the fallback window). Units are
+ *  case-insensitive in CSS (`"0.3S"` is legal): the check lowercases
+ *  first, or an uppercase second would slip through as 0.3ms — 2026-11-02
+ *  review F3. */
 export function cssDurationMs(value: string): number {
   if (!value) return 0;
   const n = parseFloat(value);
   if (!Number.isFinite(n) || n <= 0) return 0;
-  return value.trim().endsWith("s") && !value.trim().endsWith("ms") ? n * 1000 : n;
+  const unit = value.trim().toLowerCase();
+  return unit.endsWith("s") && !unit.endsWith("ms") ? n * 1000 : n;
 }
 
-/** Back-compat alias: HkCrossfade's enter hold parses like any duration. */
-export const enterDelayMs = cssDurationMs;
 
 /** One matched icon pair across the swap: live leaving geometry, entering
  *  geometry, the leaving icon's computed color (svg stroke = currentColor),
@@ -171,6 +181,18 @@ export function useRailIconFlight(
   let flightSeq = 0;
   let currentFlightId = -1;
   let layer: HTMLElement | null = null;
+  /** The current flight's clone animations. The sweep CANCELS them: a
+   *  finished `fill: forwards` animation is auto-removed by the engine
+   *  only when a LATER animation replaces it on the same target+property
+   *  (the spec's replaceable-animations rule) — and every flight targets
+   *  a brand-new clone, so nothing ever replaces it. Without the cancel,
+   *  each flip strands Animation → effect → clone subtree on the document
+   *  timeline forever (the spec itself warns the pattern accumulates
+   *  "hundreds, even thousands"; hover-peeks arm flights constantly) —
+   *  2026-11-02 review S1. cancel() on an already-idle animation is a
+   *  no-op, and the cancel listener routes through the idempotent
+   *  sweepIfCurrent, so re-entrancy is harmless. */
+  let flightAnims: Animation[] = [];
   /** The leaving cells this flight hid — unmarked on every sweep so a
    *  cancelled/dissolve-less path never leaves a stale hide mark. */
   let hidden: HTMLElement[] = [];
@@ -187,6 +209,12 @@ export function useRailIconFlight(
       clearTimeout(sweepTimer);
       sweepTimer = null;
     }
+    // Detach the ledger BEFORE cancelling: a synchronous cancel event
+    // (test stubs fire them inline; the browser queues them) re-enters
+    // sweep via the listener, and the emptied ledger breaks the cycle.
+    const anims = flightAnims;
+    flightAnims = [];
+    for (const anim of anims) anim.cancel();
     layer?.remove();
     layer = null;
     for (const el of hidden) el.removeAttribute(RAIL_FLIP_FLYING_ATTR);
@@ -355,6 +383,7 @@ export function useRailIconFlight(
       // flight's late finish is a no-op, never its successor's sweeper).
       anim.addEventListener("finish", () => sweepIfCurrent(flightId));
       anim.addEventListener("cancel", () => sweepIfCurrent(flightId));
+      flightAnims.push(anim);
       layer.appendChild(clone);
     }
     host.appendChild(layer);