@celestia-island/hikari 0.55.336 → 0.55.338

package/package.json

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

package/src/components/HkKanban.scss

@@ -37,9 +37,15 @@
 
    Ride only, by the root hook HkKanban emits for a ride host: a pin board
    must keep the full-height lanes box it always had, so this rule never
-   reaches an existing board. Specificity (0,3,0) beats the base rule
-   above; a host that wants its own rule can override it the same way. */
-.hk-kanban[data-dock-mode="ride"] .hk-kanban-lanes {
+   reaches an existing board. DIRECT-CHILD chain (2026-11-10 follow-up,
+   same shape as chest's consumer-side override): the earlier descendant
+   form ALSO released the lanes box of a board NESTED inside a card — an
+   inner `.hk-kanban` is not the ride host and must keep its own
+   full-height lanes (its strip viewport scrolls its own cards; the
+   release would cut its lane chrome short). Specificity (0,5,0) beats the
+   base rule above; a host that wants its own rule can override it the
+   same way. */
+.hk-kanban[data-dock-mode="ride"] > .hk-kanban-strip > .hk-scroll-container-viewport > .hk-kanban-lanes {
   min-height: 0;
 }
 

package/src/components/HkKanban.tsx

@@ -122,8 +122,9 @@ export default defineComponent({
      *  window's leftover (measured on a real board: 275.8px static vs the
      *  139px dock, i.e. zero improvement over the pin board). The
      *  attribute is emitted only while a ride dock is genuinely mounted (not
-     *  for pin, not for a horizontal board, not for an empty slot), so every
-     *  existing board is untouched. */
+     *  for pin, not for a horizontal board, not for an empty board — with no
+     *  lanes the whole strip including the dock is not rendered — and not
+     *  for an empty dock slot), so every existing board is untouched. */
     dockMode: { type: String as PropType<"pin" | "ride">, default: "pin" },
   },
   emits: ["move"],
@@ -219,8 +220,17 @@ export default defineComponent({
       // always had, so no existing board changes. Gated on the dock actually
       // being mounted too (S2-2): a requested-but-empty slot is legal, and
       // releasing the lanes box for it would only shrink lane chrome on a
-      // short board while no dock is there to justify it.
-      const rideBoard = docksOnTail && props.dockMode === "ride" && !!slots.dockBottom;
+      // short board while no dock is there to justify it. Gated on a
+      // non-empty board as well (2026-11-10 follow-up): with
+      // `lanes.length === 0` the whole strip is replaced by the empty slot,
+      // so the container — and any dock in it — is not rendered at all; the
+      // hook means "a ride dock is mounted", and on an empty board none
+      // ever is.
+      const rideBoard =
+        docksOnTail &&
+        props.dockMode === "ride" &&
+        !!slots.dockBottom &&
+        props.lanes.length > 0;
       return (
         <div
           class="hk-kanban"

package/src/components/HkScrollContainer.dock.test.tsx

@@ -163,10 +163,15 @@ describe("HkScrollContainer floating-dock tail clearance", () => {
     // hidden vertical axis (measured: scrollHeight +spacer, and a
     // programmatic scrollTop shifts content up behind
     // overflow-y:hidden with no wheel path back).
+    // Comments stripped (block + line, house two-step form — see
+    // HkScrollContainer.dockRide.test.ts): a rule commented out must go
+    // red, not hide in the text the regex matches.
     const scss = readFileSync(
       join(dirname(fileURLToPath(import.meta.url)), "HkScrollContainer.scss"),
       "utf8",
-    );
+    )
+      .replace(/\/\*[\s\S]*?\*\//g, "")
+      .replace(/^[ \t]*\/\/.*$/gm, "");
     const spacer = scss.match(
       /\.hk-scroll-container\[data-dock-tail="true"\]:not\(\[data-axis="horizontal"\]\) > \.hk-scroll-container-viewport::after\s*\{[^}]*\}/,
     );

package/src/components/HkScrollContainer.dockRide.test.tsx

@@ -164,6 +164,25 @@ function stubGeometry(
   Object.defineProperties(el, desc);
 }
 
+/** Stub one element's drawn vertical band (house pattern,
+ *  HkScrollContainer.selectionHint.test.ts): the selection hint reads
+ *  `getBoundingClientRect` on the viewport AND on each selected row, and
+ *  happy-dom reports zeros for both. */
+function stubBand(el: HTMLElement, top: number, bottom: number) {
+  const rect = {
+    x: 0,
+    y: top,
+    top,
+    bottom,
+    left: 0,
+    right: 100,
+    width: 100,
+    height: bottom - top,
+    toJSON: () => ({}),
+  };
+  vi.spyOn(el, "getBoundingClientRect").mockReturnValue(rect as DOMRect);
+}
+
 /** The physical edges the shared <HkEdgeGlow> is painting right now. */
 function bandsOf(host: HTMLElement): (string | null)[] {
   return Array.from(host.querySelectorAll<HTMLElement>(".hk-edge-glow-band"), (band) =>
@@ -231,17 +250,30 @@ const MOUNT_SLOTS = {
   dockBottom: () => h("div", { class: "the-dock" }, "dock"),
 };
 
+/** The sheets with comments STRIPPED (block + line comments, house
+ *  two-step form, tokenInventory.test.ts): every source-contract match
+ *  below judges the LIVE rules. A rule commented out must go red — a bare
+ *  regex happily matches commented text, which is exactly how the
+ *  2026-11-10 mutation round's comment-out survivor stayed green (and how
+ *  the round-1 review of a73a9f99 caught the same hole re-created by the
+ *  newer assertions). Both steps are needed: the sheets carry block
+ *  comments as well as line comments. */
 const scss = readFileSync(
   join(dirname(fileURLToPath(import.meta.url)), "HkScrollContainer.scss"),
   "utf8",
-);
+)
+  .replace(/\/\*[\s\S]*?\*\//g, "")
+  .replace(/^[ \t]*\/\/.*$/gm, "");
 
 /** The board's own sheet — the ride board's content-height switch lives
- *  there (see the S0 block in the ride contract tests). */
+ *  there (see the S0 block in the ride contract tests). Stripped like
+ *  `scss` above, for the same reason. */
 const kanbanScss = readFileSync(
   join(dirname(fileURLToPath(import.meta.url)), "HkKanban.scss"),
   "utf8",
-);
+)
+  .replace(/\/\*[\s\S]*?\*\//g, "")
+  .replace(/^[ \t]*\/\/.*$/gm, "");
 
 afterEach(() => {
   restoreRect?.();
@@ -351,6 +383,46 @@ describe("HkScrollContainer ride-mode bottom dock", () => {
     expect(host.getAttribute("data-dock-mode")).toBeNull();
   });
 
+  it("zeroes the published heights when a pin dock slot disappears at runtime", async () => {
+    // 2026-11-10 follow-up: the onUpdated re-point path is
+    // placement-agnostic and the ride case above guards it — this pin
+    // sibling pins the SAME contract there, where the published vars feed
+    // consumer end-padding instead of ride geometry: a dock removed at
+    // runtime must republish the inert 0px on BOTH vars, else a consumer
+    // keeps padding clear of a dock that no longer exists.
+    stubMeasuredHeight(".hk-scroll-dock", 139);
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const show = ref(true);
+    const app = createApp(defineComponent({
+      setup() {
+        return () => {
+          const slots: Record<string, () => VNodeChild> = {
+            default: () => h("div", { class: "content" }, "rows"),
+          };
+          if (show.value) slots.dockBottom = () => h("div", { class: "the-dock" }, "dock");
+          // dockMode unset — the pin placement, the pre-ride default.
+          return h(HkScrollContainer, {}, slots);
+        };
+      },
+    }));
+    mounts.push(app);
+    const host = (app.mount(container) as unknown as { $el: HTMLElement }).$el;
+    expect(host.querySelector(".hk-scroll-dock[data-side='bottom']")).toBeTruthy();
+    expect(host.style.getPropertyValue("--hk-scroll-dock-bottom")).toBe("139px");
+
+    show.value = false;
+    await nextTick();
+    expect(host.querySelector(".hk-scroll-dock")).toBeNull();
+    expect(host.style.getPropertyValue("--hk-scroll-dock-bottom")).toBe("0px");
+    expect(host.style.getPropertyValue("--hk-scroll-dock-top")).toBe("0px");
+    // The pin container keeps its pre-ride attribute set: no ride hook and,
+    // with the slot gone, no dock-edge fade either.
+    expect(host.getAttribute("data-dock-mode")).toBeNull();
+    expect(host.getAttribute("data-dock-fade")).toBeNull();
+  });
+
   it("drops the bottom glow band under a mounted ride dock (pin keeps it)", async () => {
     // S2-1: the shared <HkEdgeGlow> painter lives on the container root at
     // z-index 2, i.e. ABOVE the viewport — with a ride dock inside that
@@ -375,6 +447,38 @@ describe("HkScrollContainer ride-mode bottom dock", () => {
     expect(bandsOf(pin.host)).toEqual(["top", "bottom"]);
   });
 
+  it("drops the bottom band from the selection hint under a mounted ride dock (pin keeps it)", async () => {
+    // 2026-11-10 follow-up: the selection hint's painter rides the SAME
+    // `painterEdges` filter as the overflow glow (same function, same
+    // bottom drop — the band would paint over the ride dock's lower limb
+    // exactly like the glow's). Until now only the glow call site had a
+    // test; the review's mutation g (bypassing the filter at the hint call
+    // site) survived the whole suite green. The verdict attribute — the
+    // documented consumer contract — is untouched: only the BAND is
+    // dropped.
+    const slots = {
+      default: () => h("div", { class: "is-active" }, "row"),
+      dockBottom: () => h("div", { class: "the-dock" }, "dock"),
+    };
+    const ride = mountWithApi(slots, { dockMode: "ride", selectionHint: true });
+    const rideViewport = ride.host.querySelector<HTMLElement>(".hk-scroll-container-viewport")!;
+    stubBand(rideViewport, 0, 400);
+    stubBand(rideViewport.querySelector<HTMLElement>(".is-active")!, 500, 560);
+    ride.api.value!.refresh();
+    await nextTick();
+    expect(ride.host.getAttribute("data-selection-beyond")).toBe("bottom");
+    expect(bandsOf(ride.host)).toEqual([]);
+
+    const pin = mountWithApi(slots, { selectionHint: true });
+    const pinViewport = pin.host.querySelector<HTMLElement>(".hk-scroll-container-viewport")!;
+    stubBand(pinViewport, 0, 400);
+    stubBand(pinViewport.querySelector<HTMLElement>(".is-active")!, 500, 560);
+    pin.api.value!.refresh();
+    await nextTick();
+    expect(pin.host.getAttribute("data-selection-beyond")).toBe("bottom");
+    expect(bandsOf(pin.host)).toEqual(["bottom"]);
+  });
+
   it("warns once in dev when autoFollow is combined with a ride dock", async () => {
     // S2-3: the combination reproduces the full-height-content trap that
     // S0 fixed (autoFollow bottom-anchors a min-height:100% box), so it is
@@ -405,6 +509,25 @@ describe("HkScrollContainer ride-mode bottom dock", () => {
     expect((pin.$el as HTMLElement).getAttribute("data-dock-fade")).toBe("bottom");
   });
 
+  it("publishes the dock-edge fade for a top dock even in ride mode", () => {
+    // 2026-11-10 follow-up: the ride suppression concerns the BOTTOM dock
+    // only — that is the one living inside the masked viewport band. A
+    // `dockTop` dock is not on that edge, so the container publishes the
+    // dock-edge fade for it as usual, flipping the attribute to "top"
+    // (and, with no bottom slot, emitting no ride hook at all).
+    const vm = mountDock(
+      {
+        default: () => h("div", { class: "content" }, "rows"),
+        dockTop: () => h("div", { class: "top-chrome" }, "top"),
+      },
+      { dockMode: "ride" },
+    );
+    const host = vm.$el as HTMLElement;
+    expect(host.getAttribute("data-dock-fade")).toBe("top");
+    expect(host.getAttribute("data-dock-mode")).toBeNull();
+    expect(host.querySelector(".hk-scroll-dock-ride")).toBeNull();
+  });
+
   it("rides when the axis is both", () => {
     const vm = mountDock(MOUNT_SLOTS, { dockMode: "ride", axis: "both" });
     const host = vm.$el as HTMLElement;
@@ -443,7 +566,7 @@ describe("HkScrollContainer ride-mode bottom dock", () => {
     expect(host.getAttribute("data-dock-mode")).toBeNull();
   });
 
-  it("leaves the pin placement byte-compatible", () => {
+  it("leaves the pin placement structurally compatible", () => {
     // dockMode is additive: the default must keep today's DOM exactly —
     // sibling dock, no spacer, no ride class, dock fade published, both
     // measured-height vars on the host.
@@ -501,6 +624,10 @@ describe("HkScrollContainer ride placement style contract", () => {
     // lands it UNDER the dock. `scroll-padding-bottom` belongs on the
     // scrollport (the viewport) and is exactly this band; keyed on the ride
     // hook, which is emitted only while the dock is mounted.
+    //
+    // `scss` is the comment-stripped sheet (see the module const): the
+    // 2026-11-10 mutation check found that commenting the rule out left
+    // this test green — the regex happily matched the commented text.
     const rule = scss.match(
       /\.hk-scroll-container\[data-dock-mode="ride"\] > \.hk-scroll-container-viewport \{[^}]*\}/,
     );
@@ -510,6 +637,40 @@ describe("HkScrollContainer ride placement style contract", () => {
     );
   });
 
+  it("suppresses the dockTailClearance spacer while a ride dock is mounted", () => {
+    // 2026-11-10 follow-up S3 (flagged by two review rounds): with
+    // `dockTailClearance` on AND a ride dock mounted, the tail spacer's
+    // `::after` lined up BEHIND the ride dock in the content flow — two
+    // stacked tail reservations for one dock. Ride wins: the sheet drops
+    // the spacer box under the same two root hooks.
+    //
+    // happy-dom computes no CSS, so this is pinned the suite's usual way —
+    // the runtime precondition (both hooks on the same root) plus the rule
+    // itself as a source contract.
+    const vm = mountDock(MOUNT_SLOTS, { dockMode: "ride", dockTailClearance: true });
+    const host = vm.$el as HTMLElement;
+    expect(host.getAttribute("data-dock-mode")).toBe("ride");
+    expect(host.getAttribute("data-dock-tail")).toBe("true");
+
+    const generation = scss.match(
+      /\.hk-scroll-container\[data-dock-tail="true"\]:not\(\[data-axis="horizontal"\]\) > \.hk-scroll-container-viewport::after \{[^}]*\}/,
+    );
+    expect(generation, "the tail spacer generation rule exists").not.toBeNull();
+    const guard = scss.match(
+      /\.hk-scroll-container\[data-dock-mode="ride"\]\[data-dock-tail\] > \.hk-scroll-container-viewport::after \{[^}]*\}/,
+    );
+    expect(guard, "ride suppresses the tail spacer").not.toBeNull();
+    // `content: none` removes the box outright — a zero-height box could
+    // still perturb the layout.
+    expect(guard![0]).toMatch(/content:\s*none/);
+    // Equal specificity (0,4,0) with the generation rule, so source order
+    // is what makes the suppression win.
+    expect(
+      scss.indexOf(guard![0]),
+      "the suppression wins on source order, not on specificity",
+    ).toBeGreaterThan(scss.indexOf(generation![0]));
+  });
+
   it("zeroes the container's own bottom fade band in ride mode", () => {
     // S2-c: the ride dock lives INSIDE the viewport at its trailing edge,
     // so the container's own fade mask dissolves the dock's lower limb
@@ -717,6 +878,24 @@ describe("HkKanban ride-dock forwarding", () => {
     expect(vm.$el.querySelector(".hk-scroll-dock-ride")).toBeNull();
   });
 
+  it("emits no ride hook for an empty board (the strip is not mounted at all)", () => {
+    // 2026-11-10 follow-up: with `lanes.length === 0` the whole strip —
+    // container, dock slot and all — is replaced by the empty slot, so no
+    // ride dock is ever mounted and the root must keep its pre-ride
+    // attribute set. The hook means "a ride dock is mounted", and here
+    // none is: the previously ungated emission contradicted the prop doc.
+    const vm = mountKanban(
+      { axis: "vertical", dockMode: "ride", lanes: [] },
+      {
+        dockBottom: () => h("div", { class: "board-dock" }, "dock"),
+        empty: () => h("div", { class: "board-empty" }, "empty"),
+      },
+    );
+    expect(vm.$el.getAttribute("data-dock-mode")).toBeNull();
+    expect(vm.$el.querySelector(".hk-kanban-strip")).toBeNull();
+    expect(vm.$el.querySelector(".board-empty")).toBeTruthy();
+  });
+
   it("ignores the slot on a horizontal board (the cross-axis tail)", () => {
     // The default axis: pre-2026-11-10 shape — no forwarded dock slot and
     // no ride chrome, because a horizontal strip's tail is its cross axis.
@@ -734,7 +913,7 @@ describe("HkKanban ride-dock forwarding", () => {
 });
 
 describe("HkKanban ride board content-height contract", () => {
-  it("releases the full-height lanes box under the ride hook only", () => {
+  it("releases the full-height lanes box under the ride hook only, via the direct-child chain", () => {
     // S0, measured on a real board: in a column-flex strip viewport
     // `min-height: 100%` makes the lanes BOX as tall as the viewport, so
     // the in-flow spacer + sticky dock always sit below the fold — the dock
@@ -742,11 +921,21 @@ describe("HkKanban ride board content-height contract", () => {
     // window's leftover (275.8px static / 563.8px scrolled against a 139px
     // dock). Releasing it is the half of the contract that makes the air
     // follow the CONTENT end.
+    //
+    // 2026-11-10 follow-up: the release selector is the DIRECT-CHILD chain
+    // (same shape as chest's consumer-side override). The earlier
+    // descendant form also released the lanes box of a board NESTED inside
+    // a card of the outer ride board — the inner board is not the ride
+    // host, and its strip viewport scrolls its own cards, so cutting its
+    // lanes short broke its lane chrome.
     const release = kanbanScss.match(
-      /\.hk-kanban\[data-dock-mode="ride"\] \.hk-kanban-lanes \{[^}]*\}/,
+      /\.hk-kanban\[data-dock-mode="ride"\] > \.hk-kanban-strip > \.hk-scroll-container-viewport > \.hk-kanban-lanes \{[^}]*\}/,
     );
     expect(release, "the ride boards release their lanes min-height").not.toBeNull();
     expect(release![0]).toMatch(/min-height:\s*0/);
+    // And the descendant spelling stays gone: reintroducing it (the
+    // mutation) would leak the release into nested boards again.
+    expect(kanbanScss).not.toMatch(/\.hk-kanban\[data-dock-mode="ride"\] \.hk-kanban-lanes/);
     // The base rule keeps the fill for every other mode (pin, horizontal
     // boards): a short board still reaches the strip's floor there.
     const base = kanbanScss.match(/\.hk-kanban-lanes \{[^}]*\}/);

package/src/components/HkScrollContainer.scss

@@ -342,6 +342,14 @@
      geometry is unchanged by this line (measured). */
   inset-inline-start: 0;
   flex: none;
+  /* WEAK STACKING GUARANTEE (2026-11-10 follow-up): 1 stays a literal, not
+   * a `--hk-scroll-dock-ride-z` variable. It only lifts the dock above the
+   * PLAIN in-flow content scrolling under it; a descendant of the viewport
+   * that is itself positioned with z-index >= 2 (a floating toolbar, a drag
+   * layer) paints OVER the pinned dock. No shipped consumer stacks one
+   * inside the dock band, and a variable would add an override surface
+   * before a second consumer needs it (additive-chrome discipline) —
+   * promote it to a variable if one appears. */
   z-index: 1;
   /* Transparent band: the dock surface inside opts back in (see the
    * pointer contract above). */
@@ -429,6 +437,27 @@
   height: var(--hk-scroll-tail-bottom, 0px);
 }
 
+/* ── Ride wins over the tail spacer (mutual exclusion) ─────────────
+   2026-11-10 follow-up S3, flagged by two review rounds: with
+   `dockTailClearance` on AND a ride dock mounted, the spacer above lined
+   up BEHIND the ride dock (in flow after it) and the tail got TWO
+   stacked reservations — the shell-published `--hk-scroll-tail-bottom`
+   band plus the dock's own measured box. The two props answer the same
+   question for two different dock geometries: the clearance spacer is
+   for a dock FLOATING OVER the scroll area from outside the flow, ride
+   mounts the dock INSIDE it and spends its measured box as the air. So
+   while a ride dock is actually mounted (the root carries BOTH
+   `data-dock-mode="ride"` and `data-dock-tail`) the spacer box is not
+   generated at all. Same specificity (0,4,0) as the generation rule
+   above and declared after it, so source order decides; `content: none`
+   removes the box outright rather than shrinking it (a zero-height box
+   could still perturb the layout). The shrink pin above stays: it is
+   harmless under ride and still load-bearing while the prop serves a
+   floating dock (no ride hook present). */
+.hk-scroll-container[data-dock-mode="ride"][data-dock-tail] > .hk-scroll-container-viewport::after {
+  content: none;
+}
+
 
 /* ── Selection edge hint (selectionHint opt-in) ────────────────────
    A list taller than its viewport hides its SELECTED row as soon as it

package/src/components/HkScrollContainer.tsx

@@ -281,7 +281,19 @@ export default defineComponent({
      *  accepted cost: a child that legitimately needs main-axis shrink
      *  inside an opted-in container (a nested pane meant to fit the
      *  viewport and scroll internally) cannot shrink; consumers escape
-     *  with a >=(0,2,0) override loaded after the library CSS. */
+     *  with a >=(0,2,0) override loaded after the library CSS.
+     *
+     *  MUTUALLY EXCLUSIVE WITH `dockMode="ride"` (2026-11-10 follow-up):
+     *  the two props answer the same tail question for two different dock
+     *  geometries — this spacer reserves a band for a dock FLOATING OVER
+     *  the scroll area from outside the flow, ride mounts the dock inside
+     *  it and spends its measured box as the air. With both armed and a
+     *  ride dock actually mounted, the tail spacer is NOT generated (the
+     *  sheet drops the viewport's `::after` under
+     *  `[data-dock-mode="ride"][data-dock-tail]`) — ride wins, the two
+     *  reservations would stack into a double-clear band. The shrink pin
+     *  above stays: harmless under ride, still load-bearing while this
+     *  prop serves a floating dock. */
     dockTailClearance: { type: Boolean, default: false },
     /** Where a mounted `dockBottom` dock LIVES (2026-11-10 user ruling):
      *
@@ -326,7 +338,8 @@ export default defineComponent({
      *      its only effect (measured: identical to the pin board's 184px,
      *      and worse at the scroll end). HkKanban releases its own
      *      `.hk-kanban-lanes` box for a ride host
-     *      (`.hk-kanban[data-dock-mode="ride"] .hk-kanban-lanes
+     *      (`.hk-kanban[data-dock-mode="ride"] > .hk-kanban-strip >
+     *      .hk-scroll-container-viewport > .hk-kanban-lanes
      *      { min-height: 0 }`); a custom host has to do the same.
      *    - `autoFollow` IS NOT SUPPORTED TOGETHER WITH RIDE (documented,
      *      not policed beyond a dev warning): autoFollow bottom-anchors a
@@ -381,6 +394,13 @@ export default defineComponent({
      *      SLOT CONTENT THAT MUST CATCH EVENTS HAS TO DECLARE
      *      `pointer-events: auto` ON THE PART THAT CATCHES THEM — the
      *      wrapper does not hand interactivity to a generic slot child.
+     *    - MUTUALLY EXCLUSIVE WITH `dockTailClearance` (2026-11-10
+     *      follow-up): that prop reserves a tail band for a dock FLOATING
+     *      OVER the scroll area from outside the flow; ride mounts the
+     *      dock inside it. With both set and a ride dock mounted, the
+     *      tail spacer is not generated (the sheet drops the viewport's
+     *      `::after` under the same two root hooks) and ride wins — the
+     *      stacked reservations would double-clear the same tail.
      *
      *  Ignored (falls back to `pin`) on `axis="horizontal"` containers:
      *  there the content tail is the cross axis and an in-flow block
@@ -1372,7 +1392,7 @@ export default defineComponent({
       // owns the viewport's bottom edge — so the sheet must keep fading that
       // edge and HkKanban must keep its full-height lanes box (S2-2).
       const rideDockMounted = !!dockBottomSlot && rideBottom;
-      if (import.meta.env.DEV && !warnedAutoFollowRide && rideDockMounted && props.autoFollow) {
+      if (import.meta.env?.DEV && !warnedAutoFollowRide && rideDockMounted && props.autoFollow) {
         warnedAutoFollowRide = true;
         // eslint-disable-next-line no-console -- dev-only unsupported-combination alarm
         console.warn(

package/src/components/HkTreemap.test.tsx

@@ -139,6 +139,30 @@ afterEach(() => {
   globalThis.ResizeObserver = originalResizeObserver;
 });
 
+/** WCAG helpers for the ink assertions — an independent re-implementation of
+ *  the requirement (AA contrast), deliberately not the component's own code. */
+const srgbLinear = (channel: number) => {
+  const value = channel / 255;
+  return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+};
+const hexChannels = (hex: string): [number, number, number] => {
+  const raw = hex.length === 4
+    ? hex.slice(1).split("").map((char) => char + char).join("")
+    : hex.slice(1);
+  return [
+    Number.parseInt(raw.slice(0, 2), 16),
+    Number.parseInt(raw.slice(2, 4), 16),
+    Number.parseInt(raw.slice(4, 6), 16),
+  ];
+};
+const luminanceOf = (rgb: readonly number[]) =>
+  0.2126 * srgbLinear(rgb[0]!) + 0.7152 * srgbLinear(rgb[1]!) + 0.0722 * srgbLinear(rgb[2]!);
+const contrastAgainst = (backgroundLuminance: number, ink: string) => {
+  const text = luminanceOf(hexChannels(ink));
+  return (Math.max(backgroundLuminance, text) + 0.05)
+    / (Math.min(backgroundLuminance, text) + 0.05);
+};
+
 describe("HkTreemap pure layout input", () => {
   it("sums nested groups from leaves and ignores caller-provided parent values", () => {
     const layout = buildHkTreemapLayout(NODES);
@@ -251,38 +275,78 @@ describe("HkTreemap pure layout input", () => {
     expect(contrastTextColor("rgb(78 121 167 / 40%)")).toBe("rgb(var(--color-text, 30 30 30))");
     expect(contrastTextColor("#4e79a780")).toBe("rgb(var(--color-text, 30 30 30))");
     expect(contrastTextColor("not-a-color")).toBe("rgb(var(--color-text, 30 30 30))");
+    // Parse strictness is part of the mirror contract: trailing garbage,
+    // inf/NaN spellings and broken hues are NOT truncated numbers — both
+    // runtimes must answer "no solid answer" identically.
+    expect(contrastTextColor("rgb(10x 20 30)")).toBe("rgb(var(--color-text, 30 30 30))");
+    expect(contrastTextColor("rgb(inf 0 0)")).toBe("rgb(var(--color-text, 30 30 30))");
+    expect(contrastTextColor("rgb(50x% 0 0)")).toBe("rgb(var(--color-text, 30 30 30))");
+    expect(contrastTextColor("hsl(10x, 50%, 50%)")).toBe("rgb(var(--color-text, 30 30 30))");
+    // The deg suffix still parses (the Rust angle channel strips it too) —
+    // in ANY case, because functional forms match on the lowercased value.
+    expect(contrastTextColor("hsl(120deg, 50%, 50%)")).toBe(contrastTextColor("hsl(120, 50%, 50%)"));
+    expect(contrastTextColor("hsl(120DEG, 50%, 50%)")).toBe(contrastTextColor("hsl(120, 50%, 50%)"));
+    // Uppercase NONE channels are filtered exactly like lowercase ones, and
+    // a BOM is whitespace on both sides of the mirror.
+    expect(contrastTextColor("rgb(NONE 1 2 3)")).toBe(contrastTextColor("rgb(1 2 3)"));
+    expect(contrastTextColor("rgb(1 2 3 / NONE)")).toBe(contrastTextColor("rgb(1 2 3)"));
+    expect(contrastTextColor("\uFEFF#fff")).toBe(contrastTextColor("#fff"));
+    expect(contrastTextColor("rgb(1\uFEFF2 3)")).toBe(contrastTextColor("rgb(1 2 3)"));
+    // The whitespace MODEL is pinned too, not just these shapes: an
+    // interleaved BOM between real spaces still trims, and U+0085 (NEL) is
+    // a control character — NOT JS whitespace — so it never parses.
+    expect(contrastTextColor("\uFEFF \uFEFF#fff")).toBe(contrastTextColor("#fff"));
+    expect(contrastTextColor("#fff\uFEFF \uFEFF")).toBe(contrastTextColor("#fff"));
+    expect(contrastTextColor("\u0085#fff")).toBe("rgb(var(--color-text, 30 30 30))");
+    expect(contrastTextColor("#fff\u0085")).toBe("rgb(var(--color-text, 30 30 30))");
+    expect(contrastTextColor("rgb(1\u00852 3)")).toBe("rgb(var(--color-text, 30 30 30))");
+    // A line terminator inside the envelope parses (the Rust mirror's
+    // strip_prefix/strip_suffix never sees it as a terminator).
+    expect(contrastTextColor("rgb(1\n2 3)")).toBe(contrastTextColor("rgb(1 2 3)"));
+    expect(contrastTextColor("rgb(1\u20282 3)")).toBe(contrastTextColor("rgb(1 2 3)"));
+    expect(contrastTextColor("rgb(\t1\n2\r3)")).toBe(contrastTextColor("rgb(1 2 3)"));
+    expect(contrastTextColor("hsl(120\u2028, 50%, 50%)")).toBe(contrastTextColor("hsl(120, 50%, 50%)"));
   });
 
   it("keeps every default palette cell AND its group band at WCAG AA", () => {
-    const linear = (channel: number) => {
-      const value = channel / 255;
-      return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
-    };
-    const channels = (hex: string) => {
-      const raw = hex.length === 4
-        ? hex.slice(1).split("").map((char) => char + char).join("")
-        : hex.slice(1);
-      return [0, 2, 4].map((at) => Number.parseInt(raw.slice(at, at + 2), 16));
-    };
-    const luminance = (rgb: number[]) => 0.2126 * linear(rgb[0]!)
-      + 0.7152 * linear(rgb[1]!)
-      + 0.0722 * linear(rgb[2]!);
-    const ratio = (plate: number, ink: string) => {
-      const text = luminance(channels(ink));
-      return (Math.max(plate, text) + 0.05) / (Math.min(plate, text) + 0.05);
-    };
     for (const color of HK_TREEMAP_DEFAULT_COLORS) {
-      const plate = luminance(channels(color));
+      const plate = luminanceOf(hexChannels(color));
       const ink = contrastTextColor(color);
-      expect(["#fff", "#0b1220"]).toContain(ink);
-      expect(ratio(plate, ink)).toBeGreaterThanOrEqual(4.5);
+      expect(["#fff", "#0b1220", "#000"]).toContain(ink);
+      expect(contrastAgainst(plate, ink)).toBeGreaterThanOrEqual(4.5);
       // The band the group label actually sits on is the scrimmed plate —
       // pin it too, the worst palette case (#59a14f) sits at 4.506:1.
-      const band = luminance(
-        channels(color).map((channel) => channel * (1 - HK_TREEMAP_HEAD_SCRIM)),
+      const band = luminanceOf(
+        hexChannels(color).map((channel) => channel * (1 - HK_TREEMAP_HEAD_SCRIM)),
       );
       const bandInk = contrastTextColor(color, HK_TREEMAP_HEAD_SCRIM);
-      expect(ratio(band, bandInk)).toBeGreaterThanOrEqual(4.5);
+      expect(contrastAgainst(band, bandInk)).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+
+  it("never leaves a solid plate under AA — black covers the mid-tone dead zone", () => {
+    // The white/near-black pair cannot reach 4.5:1 for plate luminances in
+    // (0.1833, 0.2024); pure black is the escape hatch and must appear there.
+    const deadZoneGrey = "rgb(120 120 130)";
+    expect(contrastAgainst(luminanceOf(hexChannels("#787882")), "#fff")).toBeLessThan(4.5);
+    expect(contrastAgainst(luminanceOf(hexChannels("#787882")), "#0b1220")).toBeLessThan(4.5);
+    expect(contrastTextColor(deadZoneGrey)).toBe("#000");
+    // …and only there: no default palette member is ever black.
+    for (const color of HK_TREEMAP_DEFAULT_COLORS) {
+      expect(contrastTextColor(color)).not.toBe("#000");
+    }
+    // The same grey's header band is light enough for white.
+    expect(contrastTextColor(deadZoneGrey, HK_TREEMAP_HEAD_SCRIM)).toBe("#fff");
+    // The band itself can land in the dead zone: #63a04d's plate keeps the
+    // near-black ink (5.94:1), but its scrimmed band cannot clear AA with
+    // either softer ink (white 4.49, near-black 4.17) -> black (4.68).
+    expect(contrastTextColor("#63a04d")).toBe("#0b1220");
+    expect(contrastTextColor("#63a04d", HK_TREEMAP_HEAD_SCRIM)).toBe("#000");
+    // Property: every grey step clears AA with the ink it picks.
+    for (let value = 0; value <= 255; value += 1) {
+      const color = `rgb(${value} ${value} ${value})`;
+      const plate = luminanceOf([value, value, value]);
+      expect(contrastAgainst(plate, contrastTextColor(color))).toBeGreaterThanOrEqual(4.5);
     }
   });
 

package/src/components/HkTreemap.tsx

@@ -65,15 +65,37 @@ function parseHexColor(raw: string): RgbaChannels | null {
   ];
 }
 
+/** Strict decimal/scientific numeric parse — the WHOLE string must be one
+ *  number, mirroring the Rust mirror's `str::parse::<f64>()` + `is_finite()`
+ *  gate: trailing garbage ("10x") and inf/NaN spellings are rejected, not
+ *  truncated. Returns NaN for anything that is not one number. */
+const NUMERIC_PATTERN = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/;
+function parseStrictNumber(raw: string): number {
+  const value = raw.trim();
+  return NUMERIC_PATTERN.test(value) ? Number(value) : Number.NaN;
+}
+
 function numericChannel(raw: string): number | null {
   if (raw.endsWith("%")) {
-    const percent = Number.parseFloat(raw.slice(0, -1));
+    const percent = parseStrictNumber(raw.slice(0, -1));
     return Number.isFinite(percent) ? Math.min(255, Math.max(0, (percent / 100) * 255)) : null;
   }
-  const value = Number.parseFloat(raw);
+  const value = parseStrictNumber(raw);
   return Number.isFinite(value) ? Math.min(255, Math.max(0, value)) : null;
 }
 
+/** An hsl hue: a strict number with the optional `deg` suffix (all trailing
+ *  repeats stripped, like the Rust mirror's `trim_end_matches("deg")`). */
+function angleChannel(raw: string): number {
+  return parseStrictNumber(raw.replace(/(?:deg)+$/, ""));
+}
+
+/** An hsl saturation/lightness: a strict number with an optional `%` suffix
+ *  (CSS requires the percent, but both forms appear in the wild). */
+function percentChannel(raw: string): number {
+  return parseStrictNumber(raw.replace(/%+$/, ""));
+}
+
 function hueToRgb(hue: number, saturation: number, lightness: number): [number, number, number] {
   const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
   const sector = ((hue % 360) + 360) % 360 / 60;
@@ -96,17 +118,25 @@ function hueToRgb(hue: number, saturation: number, lightness: number): [number,
 function alphaComponent(raw: string | undefined): number | null {
   if (raw == null || raw === "") return 1;
   if (raw.endsWith("%")) {
-    const percent = Number.parseFloat(raw.slice(0, -1));
+    const percent = parseStrictNumber(raw.slice(0, -1));
     return Number.isFinite(percent) ? Math.min(1, Math.max(0, percent / 100)) : null;
   }
-  const value = Number.parseFloat(raw);
+  const value = parseStrictNumber(raw);
   return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : null;
 }
 
 function parseCssColor(raw: string): RgbaChannels | null {
-  const value = raw.trim();
+  // JS trim() strips U+FEFF; the Rust mirror is taught the same character so
+  // both runtimes accept or reject a BOM-prefixed colour identically.
+  const value = raw.trim().replace(/^\uFEFF+/, "").replace(/\uFEFF+$/, "").trim();
   if (value.startsWith("#")) return parseHexColor(value);
-  const rgb = /^rgba?\((.*)\)$/i.exec(value);
+  // Functional forms are matched on the LOWERCASED value — exactly the Rust
+  // mirror's to_ascii_lowercase() — so case-insensitive CSS units (`DEG`,
+  // `NONE` channels) parse or reject identically on both sides.
+  const lower = value.toLowerCase();
+  // [\s\S] (not `.`): a line terminator inside the envelope is legal for the
+  // Rust mirror's strip_prefix/strip_suffix, so it must be legal here too.
+  const rgb = /^rgba?\(([\s\S]*)\)$/.exec(lower);
   if (rgb) {
     const parts = rgb[1]!.split(/[\s,/]+/).filter((part) => part && part !== "none");
     if (parts.length < 3) return null;
@@ -116,13 +146,13 @@ function parseCssColor(raw: string): RgbaChannels | null {
     if (alpha === null) return null;
     return [...(channels as [number, number, number]), alpha];
   }
-  const hsl = /^hsla?\((.*)\)$/i.exec(value);
+  const hsl = /^hsla?\(([\s\S]*)\)$/.exec(lower);
   if (hsl) {
     const parts = hsl[1]!.split(/[\s,/]+/).filter((part) => part && part !== "none");
     if (parts.length < 3) return null;
-    const hue = Number.parseFloat(parts[0]!);
-    const saturation = Number.parseFloat(parts[1]!);
-    const lightness = Number.parseFloat(parts[2]!);
+    const hue = angleChannel(parts[0]!);
+    const saturation = percentChannel(parts[1]!);
+    const lightness = percentChannel(parts[2]!);
     if (![hue, saturation, lightness].every(Number.isFinite)) return null;
     const alpha = alphaComponent(parts[3]);
     if (alpha === null) return null;
@@ -164,13 +194,25 @@ function contrastRatio(a: number, b: number): number {
   return (lighter + 0.05) / (darker + 0.05);
 }
 
-/** The two inks a SOLID fill can carry. The dark end is the family's
+/** The two inks a SOLID fill normally carries. The dark end is the family's
  *  near-black (a hair of blue keeps it from reading as dead #000 on the
  *  pale palette members). */
 const SOLID_LIGHT_INK = "#fff";
 const SOLID_DARK_INK = "#0b1220";
 
-/** Relative luminances of the two candidate inks (white is the reference 1). */
+/** Last-resort ink: the softer pair leaves a narrow mid-tone dead zone
+ *  (plate luminance in the open interval (0.1833, 0.2024)) where neither clears AA; there pure black
+ *  is the higher-contrast choice that can reach the floor. Outside that band
+ *  the softer pair is SELECTED even though black would beat the near-black on
+ *  raw ratio everywhere — black stays a floor escape, not the normal ink. */
+const SOLID_NEUTRAL_INK = "#000";
+
+/** WCAG AA floor for the fully-opaque cell label; the meta line and the
+ *  italic unknown label keep their pre-existing 0.85 / 0.9 opacity (a
+ *  deliberate de-emphasis, not part of this contract). */
+const AA_CONTRAST = 4.5;
+
+/** Relative luminances of the candidate inks (white is the reference 1). */
 const SOLID_DARK_INK_LUMINANCE = relativeLuminance(parseHexColor(SOLID_DARK_INK)!);
 const SOLID_LIGHT_INK_LUMINANCE = 1;
 
@@ -209,10 +251,13 @@ export function contrastTextColor(background: string, scrim = 0): string {
     1,
   ];
   const luminance = relativeLuminance(effective);
-  return contrastRatio(luminance, SOLID_DARK_INK_LUMINANCE)
-    >= contrastRatio(luminance, SOLID_LIGHT_INK_LUMINANCE)
-    ? SOLID_DARK_INK
-    : SOLID_LIGHT_INK;
+  const dark = contrastRatio(luminance, SOLID_DARK_INK_LUMINANCE);
+  const light = contrastRatio(luminance, SOLID_LIGHT_INK_LUMINANCE);
+  const best = Math.max(dark, light);
+  // Neither softer ink clears the floor -> pure black, which is strictly the
+  // higher-contrast choice inside that band (see SOLID_NEUTRAL_INK).
+  if (best < AA_CONTRAST) return SOLID_NEUTRAL_INK;
+  return dark >= light ? SOLID_DARK_INK : SOLID_LIGHT_INK;
 }
 
 export const HK_TREEMAP_DEFAULT_COLORS = [
@@ -433,7 +478,9 @@ export function createHkTreemapSummary(
  *
  * Cell ink is derived from each SOLID plate's own luminance (WCAG
  * contrast), because a big opaque block is the background that matters;
- * only a transparent/unparseable fill defers to the theme text token.
+ * only a transparent/unparseable fill defers to the theme text token. The
+ * mid-tone band where neither the white nor the family near-black clears AA
+ * falls back to pure black.
  */
 export default defineComponent({
   name: "HkTreemap",