@celestia-island/hikari 0.55.297 → 0.55.299

package/package.json

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

package/src/components/HkDrawer.test.tsx

@@ -146,3 +146,60 @@ describe("HkDrawer window-stack close channel", () => {
     }
   });
 });
+
+describe("HkDrawer Escape precedence", () => {
+  async function settle(): Promise<void> {
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
+  }
+
+  it("lets a nested control own Escape while a bare Escape still closes", async () => {
+    const open = ref(true);
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkDrawer, {
+            modelValue: open.value,
+            closable: true,
+            title: "Inspector",
+            "onUpdate:modelValue": (v: boolean) => { open.value = v; },
+          }, {
+            default: () => h("div", {
+              class: "escape-owner",
+              onKeydown: (e: KeyboardEvent) => {
+                if (e.key === "Escape") e.preventDefault();
+              },
+            }, "nested control"),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    await settle();
+
+    const owner = document.body.querySelector<HTMLElement>(".hk-drawer-panel .escape-owner");
+    expect(owner, "the slot content renders inside the panel").not.toBeNull();
+
+    // `cancelable: true` is load-bearing: preventDefault() on a non-cancelable
+    // synthetic event is a no-op, and the drawer would then close as if
+    // nothing had consumed the key.
+    owner!.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await settle();
+    expect(open.value, "a consumed Escape must not close the drawer").toBe(true);
+
+    // A bare Escape (nothing below consumed it) still closes.
+    const panel = document.body.querySelector<HTMLElement>(".hk-drawer-panel")!;
+    panel.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await settle();
+    expect(open.value).toBe(false);
+  });
+});

package/src/components/HkDrawer.tsx

@@ -211,7 +211,12 @@ export default defineComponent({
       if (props.closable && props.overlay) close();
     }
 
-    function onEscape() {
+    function onEscape(e: KeyboardEvent) {
+      // Precedence (the same class as HkModal's 0.55.295 fix): a nested
+      // control that already consumed Escape owns the key, so the drawer
+      // must not close underneath it. Precedence only — this surface has
+      // never preventDefault'd/stopPropagation'd Escape, and still does not.
+      if (e.defaultPrevented) return;
       if (props.closable) close();
     }
 
@@ -300,7 +305,7 @@ export default defineComponent({
               aria-modal={props.overlay}
               tabindex={-1}
               onKeydown={(e: KeyboardEvent) => {
-                if (e.key === "Escape") onEscape();
+                if (e.key === "Escape") onEscape(e);
                 else if (e.key === "Tab" && panelRef.value) trapFocus(panelRef.value, e);
               }}
             >

package/src/components/HkImageLightbox.test.tsx

@@ -90,6 +90,29 @@ describe("HkImageLightbox", () => {
     expect(s.emitted).toEqual([false]);
   });
 
+  it("a nested consumed Escape does not close the lightbox", async () => {
+    const s = mountLightbox(true);
+    const dialog = s.dialog()!;
+    const owner = dialog.querySelector<HTMLElement>(".hk-image-viewer-img")!;
+    // Model a nested control that owns Escape. `cancelable: true` is
+    // load-bearing: preventDefault() on a non-cancelable event is a no-op.
+    owner.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") e.preventDefault();
+    }, { once: true });
+
+    owner.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(s.emitted, "a consumed Escape must not close the lightbox").toEqual([]);
+    expect(s.dialog()).not.toBeNull();
+
+    // A bare Escape (nothing below consumed it) still closes.
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", cancelable: true }));
+    await nextTick();
+    expect(s.emitted).toEqual([false]);
+  });
+
   it("the Escape listener is removed once closed (no stray closes)", async () => {
     const s = mountLightbox(true);
 

package/src/components/HkImageLightbox.tsx

@@ -37,7 +37,12 @@ export default defineComponent({
     }
 
     function onWindowKeydown(e: KeyboardEvent) {
-      if (e.key === "Escape") close();
+      // A nested control that consumed Escape owns the key. This listener
+      // sits on `window`, i.e. LAST in the bubble path, so
+      // `event.defaultPrevented` is the cross-component signal (same
+      // precedence rule as HkModal's 0.55.295 fix).
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      close();
     }
 
     watch(

package/src/components/HkModal.test.tsx

@@ -660,4 +660,158 @@ describe("HkModal Escape precedence", () => {
       document.removeEventListener("keydown", pageListener);
     }
   });
+
+  it("does not close a non-closable window on a consumed Escape, and does not swallow it", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const open = ref(true);
+    const emitted: boolean[] = [];
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkModal, {
+            modelValue: open.value,
+            closable: false,
+            title: "Locked",
+            "onUpdate:modelValue": (v: boolean) => { emitted.push(v); open.value = v; },
+          }, {
+            default: () => h("div", {
+              class: "escape-owner",
+              onKeydown: (e: KeyboardEvent) => {
+                if (e.key === "Escape") e.preventDefault();
+              },
+            }, "nested control"),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    await vi.waitFor(() => {
+      expect(document.body.querySelector(".escape-owner")).not.toBeNull();
+    });
+    const owner = document.body.querySelector<HTMLElement>(".escape-owner")!;
+
+    const pageHits: string[] = [];
+    const pageListener = (e: KeyboardEvent) => {
+      if (e.key === "Escape") pageHits.push("escape");
+    };
+    document.addEventListener("keydown", pageListener);
+    try {
+      const consumed = new KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+        cancelable: true,
+      });
+      owner.dispatchEvent(consumed);
+      await nextTick();
+      expect(consumed.defaultPrevented, "the nested control consumed the key").toBe(true);
+      expect(emitted, "a non-closable window never emits on Escape").toEqual([]);
+      expect(open.value).toBe(true);
+      // Current semantics: the precedence guard returns before the close path
+      // and does NOT stopPropagation for a non-closable window, so page-level
+      // listeners still see the key.
+      expect(pageHits, "a non-closable window must not swallow the key").toEqual(["escape"]);
+    } finally {
+      document.removeEventListener("keydown", pageListener);
+    }
+  });
+
+  it("leaves a bare Escape to the host when the window is not closable", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const open = ref(true);
+    const emitted: boolean[] = [];
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkModal, {
+            modelValue: open.value,
+            closable: false,
+            title: "Locked",
+            "onUpdate:modelValue": (v: boolean) => { emitted.push(v); open.value = v; },
+          }, {
+            default: () => h("div", "content"),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    await vi.waitFor(() => {
+      expect(document.body.querySelector(".hk-modal-content")).not.toBeNull();
+    });
+    const content = document.body.querySelector<HTMLElement>(".hk-modal-content")!;
+
+    const pageHits: string[] = [];
+    const pageListener = (e: KeyboardEvent) => {
+      if (e.key === "Escape") pageHits.push("escape");
+    };
+    document.addEventListener("keydown", pageListener);
+    try {
+      const bare = new KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+        cancelable: true,
+      });
+      content.dispatchEvent(bare);
+      await nextTick();
+      expect(emitted, "a non-closable window must stay open").toEqual([]);
+      expect(open.value).toBe(true);
+      expect(pageHits, "the host still gets the key").toEqual(["escape"]);
+      expect(bare.defaultPrevented, "and the window did not consume it").toBe(false);
+    } finally {
+      document.removeEventListener("keydown", pageListener);
+    }
+  });
+
+  it("keeps the Tab focus trap working when a nested control consumes Tab", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkModal, {
+            modelValue: true,
+            closable: false,
+            title: "Trap",
+          }, {
+            default: () => h("div", {
+              class: "tab-owner",
+              onKeydown: (e: KeyboardEvent) => {
+                if (e.key === "Tab") e.preventDefault();
+              },
+            }, [
+              h("button", { class: "tab-first" }, "first"),
+              h("button", { class: "tab-last" }, "last"),
+            ]),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    await vi.waitFor(() => {
+      expect(document.body.querySelector(".tab-last")).not.toBeNull();
+    });
+    const first = document.body.querySelector<HTMLButtonElement>(".tab-first")!;
+    const last = document.body.querySelector<HTMLButtonElement>(".tab-last")!;
+    const owner = document.body.querySelector<HTMLElement>(".tab-owner")!;
+
+    last.focus();
+    expect(document.activeElement, "the last focusable holds focus").toBe(last);
+
+    // A nested control consumes Tab; the focus trap must still run. This pins
+    // the defaultPrevented guard INSIDE the Escape branch: hoisting it to the
+    // top of the handler would silently disable wrapping for exactly this
+    // case.
+    owner.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(document.activeElement, "focus wraps back to the first focusable").toBe(first);
+  });
 });

package/src/components/HkPopover.escape.test.tsx

@@ -0,0 +1,155 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref, type Ref } from "vue";
+
+import HkPopover from "./HkPopover";
+
+/**
+ * HkPopover Escape precedence (the same class as HkModal 0.55.295 and the
+ * HkDrawer / HkImageLightbox siblings).
+ *
+ * The popover panel hosts the consumer's DEFAULT SLOT, so it is a
+ * composition surface: a control inside it may consume Escape first
+ * (HkRangeRibbon resetting a brushed range, a date-picker trigger, a tag
+ * search). The popover must honour that consumption instead of closing the
+ * panel underneath the control. Its own consumption is unchanged — when it
+ * does close it still preventDefaults and still does not stopPropagation.
+ */
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body
+    .querySelectorAll(".hk-popover-panel, .hk-popover-scrim")
+    .forEach((el) => el.remove());
+});
+
+async function settle(): Promise<void> {
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await nextTick();
+}
+
+interface Setup {
+  open: Ref<boolean>;
+  emitted: boolean[];
+  panel: () => HTMLElement | null;
+  owner: () => HTMLElement | null;
+}
+
+function mountPopover(options: { closeOnEscape?: boolean } = {}): Setup {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const open = ref(true);
+  const emitted: boolean[] = [];
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkPopover as never, {
+          modelValue: open.value,
+          title: "probe",
+          closeOnEscape: options.closeOnEscape ?? true,
+          "onUpdate:modelValue": (v: boolean) => { emitted.push(v); open.value = v; },
+        }, {
+          default: () => h("div", {
+            class: "escape-owner",
+            onKeydown: (e: KeyboardEvent) => {
+              if (e.key === "Escape") e.preventDefault();
+            },
+          }, "nested control"),
+        });
+    },
+  });
+  const app = createApp(Wrapper);
+  app.mount(container);
+  mounts.push({ app, container });
+  return {
+    open,
+    emitted,
+    panel: () => document.body.querySelector<HTMLElement>(".hk-popover-panel"),
+    owner: () => document.body.querySelector<HTMLElement>(".hk-popover-panel .escape-owner"),
+  };
+}
+
+describe("HkPopover Escape precedence", () => {
+  it("lets a nested slot control own Escape", async () => {
+    const s = mountPopover();
+    await settle();
+    const owner = s.owner();
+    expect(owner, "the slot control renders inside the panel").not.toBeNull();
+
+    // `cancelable: true` is load-bearing: preventDefault() on a
+    // non-cancelable synthetic event is a no-op, and the popover would then
+    // close as if nothing had consumed the key.
+    owner!.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await settle();
+
+    expect(s.emitted, "a consumed Escape must not close the popover").toEqual([]);
+    expect(s.open.value).toBe(true);
+    expect(s.panel(), "the panel stays mounted").not.toBeNull();
+  });
+
+  it("a bare Escape still closes, is consumed, and is not stopPropagation'd", async () => {
+    const s = mountPopover();
+    await settle();
+    const panel = s.panel();
+    expect(panel, "the panel renders").not.toBeNull();
+
+    const bare = new KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    });
+    let propagatedToDocument = false;
+    const onDocumentKeydown = () => {
+      propagatedToDocument = true;
+    };
+    document.addEventListener("keydown", onDocumentKeydown);
+    try {
+      panel!.dispatchEvent(bare);
+    } finally {
+      document.removeEventListener("keydown", onDocumentKeydown);
+    }
+    await settle();
+
+    expect(s.emitted).toEqual([false]);
+    expect(s.open.value).toBe(false);
+    // The popover's own consumption, unchanged by the precedence guard.
+    expect(bare.defaultPrevented, "the popover still consumes the key it acts on").toBe(true);
+    expect(propagatedToDocument, "the popover still does not stopPropagation").toBe(true);
+  });
+
+  it("closeOnEscape=false never closes, bare or consumed", async () => {
+    const s = mountPopover({ closeOnEscape: false });
+    await settle();
+    const owner = s.owner();
+    const panel = s.panel();
+    expect(owner, "the slot control renders inside the panel").not.toBeNull();
+    expect(panel, "the panel renders").not.toBeNull();
+
+    // A consumed Escape changes nothing either way. This also pins the
+    // invariant that lets a future refactor hoist the defaultPrevented
+    // guard above the closeOnEscape check safely: close() must stay gated
+    // on the prop, and this case proves that gate is load-bearing.
+    owner!.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await settle();
+
+    const bare = new KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    });
+    panel!.dispatchEvent(bare);
+    await settle();
+
+    expect(s.emitted).toEqual([]);
+    expect(s.open.value).toBe(true);
+    expect(bare.defaultPrevented, "no close => no consumption").toBe(false);
+  });
+});

package/src/components/HkPopover.tsx

@@ -627,6 +627,14 @@ export default defineComponent({
 
     function onPanelKeydown(e: KeyboardEvent) {
       if (e.key === "Escape" && props.closeOnEscape) {
+        // Precedence (the same class as HkModal 0.55.295 and the
+        // HkDrawer / HkImageLightbox siblings): the panel hosts the
+        // consumer's default slot, so a control inside it that already
+        // consumed Escape (preventDefault) owns the key — the popover must
+        // not close underneath it. The popover's own consumption is
+        // unchanged: it still preventDefaults when it closes, and it has
+        // never stopped propagation.
+        if (e.defaultPrevented) return;
         e.preventDefault();
         close();
       }

package/src/components/HkRangeRibbon.barrel.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 
 import {
   HkRangeRibbon,
+  normalizeHkRangeWindow,
   type RibbonLane,
   type RibbonSegment,
   type RibbonStatus,
@@ -22,6 +23,14 @@ describe("the public barrel", () => {
     expect(HkRangeRibbon.name).toBe("HkRangeRibbon");
   });
 
+  it("re-exports the range-window normalizer hosts share", () => {
+    expect(typeof normalizeHkRangeWindow, "normalizeHkRangeWindow must be re-exported").toBe(
+      "function",
+    );
+    expect(normalizeHkRangeWindow([0.7, 0.3])).toEqual([0.3, 0.7]);
+    expect(normalizeHkRangeWindow(null)).toBeNull();
+  });
+
   it("re-exports the ribbon's public types", () => {
     // Type-only exports vanish at runtime, so each one is CONSUMED here: a
     // dropped `type Ribbon*` line fails vue-tsc on this file instead of

package/src/components/HkRangeRibbon.scss

@@ -12,7 +12,9 @@
    the reset chip clears the edge handle (right: 4px = the handle's
    half-width, so a handle at 0% / 100% is never covered).
 
-   Every colour/size comes from hikari theme tokens; the only motion is the
+   Colours and spacing come from hikari theme tokens; a few geometry values
+   (the 32px strip, the 8px grip, the 2px min-width floor) are deliberate
+   literals pinned by the contract, not token drift. The only motion is the
    pending-segment breathe, registered in animation/registerAnimations.ts. */
 
 .hk-range-ribbon {

package/src/components/HkRangeRibbon.test.tsx

@@ -6,7 +6,11 @@ import { compile } from "sass";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref, type Ref } from "vue";
 
-import HkRangeRibbon, { type RibbonLane, type RibbonSegment } from "./HkRangeRibbon";
+import HkRangeRibbon, {
+  normalizeHkRangeWindow,
+  type RibbonLane,
+  type RibbonSegment,
+} from "./HkRangeRibbon";
 import { setLocale } from "../i18n/context";
 import jaBundle from "../i18n/locales/ja/components.json";
 
@@ -310,6 +314,50 @@ describe("HkRangeRibbon full domain", () => {
   });
 });
 
+// ── Exported normalizer / component parity ──────────────────────────────
+describe("HkRangeRibbon window normalizer parity", () => {
+  it("keeps the component on the exported helper (source contract)", () => {
+    // The rendered-parity cases below are DIVERGENCE detectors: a
+    // byte-identical inlined copy of the algorithm renders the same window
+    // and passes them. This source pin is the CALL-SITE guard — the
+    // component must keep CALLING the exported normalizer rather than
+    // growing a private copy again.
+    const tsx = readFileSync(resolve(componentDir, "HkRangeRibbon.tsx"), "utf8");
+    expect(tsx).toMatch(/return normalizeHkRangeWindow\(source, minWidth\.value\)/);
+  });
+
+  it("renders exactly the window the exported helper returns", () => {
+    const rawWindows: Array<[number, number]> = [
+      [0.7, 0.3],
+      [0.5, 0.5],
+      [1.2, 1.5],
+      [-0.5, -0.2],
+      [1, 1],
+      [0.49, 0.51],
+    ];
+    for (const raw of rawWindows) {
+      const normalized = normalizeHkRangeWindow(raw);
+      expect(normalized, `${raw} normalizes`).not.toBeNull();
+
+      const root = mountRibbon({ window: raw });
+      expect(root.hasAttribute("data-windowed"), `${raw} is windowed`).toBe(true);
+      const highlight = root.querySelector<HTMLElement>(".hk-range-ribbon-window")!;
+      expect(boxOf(highlight).left, `${raw} left`).toBeCloseTo(normalized![0] * 100, 4);
+      expect(boxOf(highlight).width, `${raw} width`).toBeCloseTo(
+        (normalized![1] - normalized![0]) * 100,
+        4,
+      );
+
+      // Feeding the helper's output back in is idempotent — the rendered
+      // box is byte-identical, which is what lets a host pass either the raw
+      // or the normalized value into the same prop.
+      const again = mountRibbon({ window: [...normalized!] as [number, number] });
+      const againHighlight = again.querySelector<HTMLElement>(".hk-range-ribbon-window")!;
+      expect(boxOf(againHighlight), `${raw} idempotent`).toEqual(boxOf(highlight));
+    }
+  });
+});
+
 // ── Windowed view: clipping ─────────────────────────────────────────────
 describe("HkRangeRibbon windowed view", () => {
   it("clips and re-normalizes only intersecting segments — the only clipping site", () => {
@@ -802,6 +850,27 @@ describe("HkRangeRibbon reset", () => {
     expect(second.defaultPrevented).toBe(true);
   });
 
+  it("cancels an in-flight brush with Escape and consumes the key", async () => {
+    const host = mountHost(null);
+    const { strip, x } = stubStrip(host.root);
+    // Pointer down and stay inside the brush slop: no window exists yet.
+    pointer("pointerdown", x(0.5), strip);
+    pointer("pointermove", x(0.5) + 2, strip); // 2px < the 3px mouse slop
+    await nextTick();
+    expect(host.windowChange, "still inside the slop").not.toHaveBeenCalled();
+
+    const escape = keydown(strip, "Escape");
+    await nextTick();
+    expect(escape.defaultPrevented, "cancelling a live gesture consumes the key").toBe(true);
+    expect(host.windowChange, "cancelling is not a window change").not.toHaveBeenCalled();
+
+    // PROBE: the gesture is gone — a later move must not revive the brush.
+    pointer("pointermove", x(0.8), strip);
+    await nextTick();
+    expect(host.windowChange, "no brush may be revived after the cancel").not.toHaveBeenCalled();
+    expect(host.root.hasAttribute("data-windowed")).toBe(false);
+  });
+
   it("drops an in-flight brush when a reset interrupts it", async () => {
     const host = mountHost(null);
     const { strip, x } = stubStrip(host.root);
@@ -1107,6 +1176,38 @@ describe("HkRangeRibbon a11y and i18n", () => {
     expect(hint!.textContent).toContain("Resize window");
   });
 
+  it("announces a narrow window with a decimal so it differs from the full domain", () => {
+    const full = mountRibbon({ window: null });
+    expect(
+      full.querySelector<HTMLElement>(".hk-range-ribbon-strip")!.getAttribute("aria-valuetext"),
+      "the full domain keeps the classic integer text",
+    ).toBe("0% – 100%");
+
+    const narrow = mountRibbon({ window: [0.004, 0.996] });
+    const strip = narrow.querySelector<HTMLElement>(".hk-range-ribbon-strip")!;
+    const text = strip.getAttribute("aria-valuetext")!;
+    expect(text, "a fractional window keeps one decimal").toContain("0.4%");
+    expect(text).toContain("99.6%");
+    expect(text, "rounding to integers would be indistinguishable").not.toBe("0% – 100%");
+    expect(strip.getAttribute("aria-valuenow"), "valuenow uses the same precision").toBe("0.4");
+
+    const start = narrow.querySelector<HTMLElement>('[data-edge="start"]')!;
+    const end = narrow.querySelector<HTMLElement>('[data-edge="end"]')!;
+    expect(start.getAttribute("aria-valuenow")).toBe("0.4");
+    expect(start.getAttribute("aria-valuetext")).toBe("0.4%");
+    expect(end.getAttribute("aria-valuetext")).toBe("99.6%");
+    // The handle bounds share the precision: at a razor-narrow window an
+    // integer-rounded max (97) would contradict a decimal valuenow (97.5).
+    expect(start.getAttribute("aria-valuemax"), "start max keeps the decimal").toBe("97.6");
+    expect(end.getAttribute("aria-valuemin"), "end min keeps the decimal").toBe("2.4");
+
+    // An integer window keeps the integer text the earlier pins assert.
+    const integer = mountRibbon({ window: [0.2, 0.6] });
+    expect(
+      integer.querySelector<HTMLElement>(".hk-range-ribbon-strip")!.getAttribute("aria-valuetext"),
+    ).toBe("20% – 60%");
+  });
+
   it("localizes the labels and hint from the active locale bundle", async () => {
     await setLocale("ja");
     const root = mountRibbon({ window: [0.2, 0.6] });
@@ -1149,6 +1250,23 @@ describe("HkRangeRibbon a11y and i18n", () => {
     expect(host.windowChange).not.toHaveBeenCalled();
     expect(laneSegments(host.root)).toHaveLength(4);
   });
+
+  it("does not advertise the range affordance when the window is disabled", () => {
+    const disabled = mountRibbon({ windowEnabled: false, window: null });
+    const disabledStrip = disabled.querySelector<HTMLElement>(".hk-range-ribbon-strip")!;
+    expect(disabledStrip.hasAttribute("title"), "no drag hint on a disabled strip").toBe(false);
+    expect(disabledStrip.hasAttribute("aria-describedby"), "nothing to describe").toBe(false);
+    expect(disabled.querySelector(".hk-range-ribbon-hint"), "no sr-only hint").toBeNull();
+
+    // The enabled ribbon still carries all three.
+    const enabled = mountRibbon({ window: null });
+    const enabledStrip = enabled.querySelector<HTMLElement>(".hk-range-ribbon-strip")!;
+    expect(enabledStrip.getAttribute("title")).toContain("Drag to select a range");
+    const describedBy = enabledStrip.getAttribute("aria-describedby");
+    expect(describedBy, "the enabled strip describes its keyboard contract").toBeTruthy();
+    expect(document.getElementById(describedBy!), "the hint element exists").toBeTruthy();
+    expect(enabled.querySelector(".hk-range-ribbon-hint")).toBeTruthy();
+  });
 });
 
 // ── Controlled / uncontrolled switch ────────────────────────────────────
@@ -1276,8 +1394,12 @@ describe("HkRangeRibbon stylesheet contract", () => {
     );
     expect(declaration(handle, "cursor")).toBe("ew-resize");
     expect(handle).toContain("touch-action: none");
+    // Require the UNPREFIXED declaration at a declaration boundary: the old
+    // /user-select:\s*none/ also matched "-webkit-user-select: none", so a
+    // hypothetical polyfill that emitted only the prefixed property would
+    // satisfy the pin while the standard property was gone.
     expect(handle, "a handle drag cannot start a text selection").toMatch(
-      /user-select:\s*none/,
+      /(?:^|[;{])\s*user-select\s*:\s*none/,
     );
 
     // A clipped 2px sliver must still be visible.

package/src/components/HkRangeRibbon.tsx

@@ -87,21 +87,60 @@ function clamp01(value: number): number {
   return value < 0 ? 0 : value > 1 ? 1 : value;
 }
 
+/** Percent with adaptive precision. An integer percentage stays an integer —
+ *  the full domain must keep announcing the classic "0% – 100%" — while a
+ *  fractional one keeps a decimal, so a narrow window ("0.4% – 99.6%") is
+ *  distinguishable from the full domain instead of rounding to the same
+ *  text. */
+function percentNumber(fraction: number): number {
+  const percentage = fraction * 100;
+  const rounded = Math.round(percentage);
+  return Math.abs(percentage - rounded) < 1e-9 ? rounded : Number(percentage.toFixed(1));
+}
+
+function percentText(fraction: number): string {
+  return `${percentNumber(fraction)}%`;
+}
+
 /** Inline left/width pair — percentages are deterministic in tests and do
  *  not depend on layout measurement for rendering. */
 function percent(fraction: number): string {
   return `${Number((fraction * 100).toFixed(4))}%`;
 }
 
-/** Normalize a host window: swap inverted ranges, clamp to the domain,
- *  ignore non-finite or malformed input (that means "no window"), and never
- *  return a window narrower than `minWidth`. */
-function normalizeWindow(input: unknown, minWidth: number): WindowRange | null {
+/**
+ * Normalize a host-supplied window into the ribbon's contract.
+ *
+ * This is the ONE implementation the component and its hosts share — the
+ * component's former private helper, identical except the min-guard, which
+ * absorbs the component's existing sanitizer (that helper had no other
+ * observers, so this is not a behaviour change). A consumer that keeps its
+ * own rendering/filter driven by the same window (chest's trace model builds
+ * its row filter from these fractions) must import this instead of mirroring
+ * the algorithm: a copy forks silently the moment the algorithm or the 0.02
+ * default changes upstream.
+ *
+ * @param input Any host window value. `null` / `undefined`, a non-array, an
+ *   array with fewer than two entries, or either member non-finite all mean
+ *   "no window" and return `null` (the host reads that as the full domain).
+ * @param minWidth Narrowest window the ribbon will produce, defaulting to
+ *   0.02. Clamped to [0, 1]; a non-finite or non-positive value falls back
+ *   to the default.
+ * @returns An ordered, domain-clamped `[start, end]` pair of full-domain
+ *   fractions, never narrower than `minWidth`, or `null` for "no window".
+ */
+export function normalizeHkRangeWindow(
+  input: unknown,
+  minWidth: number = MIN_WINDOW_FALLBACK,
+): [number, number] | null {
   if (input == null || !Array.isArray(input) || input.length < 2) return null;
   const first = Number(input[0]);
   const second = Number(input[1]);
   if (!Number.isFinite(first) || !Number.isFinite(second)) return null;
-  const min = Math.min(Math.max(minWidth, 0), 1);
+  const min =
+    Number.isFinite(minWidth) && minWidth > 0
+      ? Math.min(minWidth, 1)
+      : MIN_WINDOW_FALLBACK;
   let lo = clamp01(Math.min(first, second));
   let hi = clamp01(Math.max(first, second));
   if (hi - lo < min) {
@@ -142,8 +181,10 @@ function intersectsWindow(placed: PlacedSegment, win: WindowRange): boolean {
 }
 
 /** Clamp every segment into the domain; drop NaN/unusable entries (a broken
- *  row must not take the whole ribbon down). A zero-length segment is kept —
- *  it renders as a tick thanks to the sheet's min-width. */
+ *  row must not take the whole ribbon down). A zero-length segment is kept:
+ *  the LANE sheet gives it a 2px min-width floor under `box-sizing:
+ *  border-box`, so a lane tick is exactly that 2px (the 1px borders sit
+ *  inside it); the overview twin draws 1px. */
 function placeSegments(segments: RibbonSegment[] | undefined): PlacedSegment[] {
   if (!Array.isArray(segments)) return [];
   const placed: PlacedSegment[] = [];
@@ -254,7 +295,7 @@ export default defineComponent({
     const activeWindow = computed<WindowRange | null>(() => {
       if (!props.windowEnabled) return null;
       const source = controlled.value ? props.window : internalWindow.value;
-      return normalizeWindow(source, minWidth.value);
+      return normalizeHkRangeWindow(source, minWidth.value);
     });
 
     const lanes = computed<RibbonLane[]>(() =>
@@ -402,7 +443,12 @@ export default defineComponent({
       if (!props.windowEnabled || gesture) return;
       if (event.pointerType === "mouse" && event.button !== 0) return;
       if (!activeWindow.value) return;
-      // The handle sits over the strip: never start a brush underneath it.
+      // The handles are SIBLINGS of the strip, not children of it, so this
+      // press never reaches the strip's brush handler in the first place.
+      // The stopPropagation below keeps the press out of BUBBLE-phase
+      // listeners in the consuming host — none exist in-package today (every
+      // in-package document-level pointerdown listener is capture-phase and
+      // still sees the press).
       event.stopPropagation();
       gesture = { kind: "edge", pointerId: event.pointerId, edge };
       (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
@@ -470,10 +516,17 @@ export default defineComponent({
     function onRootKeyDown(event: KeyboardEvent): void {
       if (!props.windowEnabled) return;
       // Escape resets from anywhere inside the ribbon — but only a REAL reset
-      // consumes the key: with no window, Escape must still reach the host
-      // (a dialog closes on it while focus sits in here).
+      // consumes the key: with no window AND no live gesture, Escape still
+      // reaches the host (a dialog closes on it while focus sits in here).
       if (event.key === "Escape") {
-        if (resetWindow()) event.preventDefault();
+        // An in-flight drag is a real, unsaved gesture: cancel it even before
+        // the first commit (a brush still inside the slop has produced no
+        // window yet, so the reset path alone would find nothing to do).
+        // Cancelling consumes the key on its own; with NO gesture and no
+        // window the key is still handed back to the host.
+        const hadGesture = gesture !== null;
+        gesture = null;
+        if (resetWindow() || hadGesture) event.preventDefault();
         return;
       }
       if (event.key !== "Home") return;
@@ -578,18 +631,20 @@ export default defineComponent({
           aria-orientation="horizontal"
           tabindex={props.windowEnabled ? 0 : -1}
           aria-label={t("hikari::ribbon.rangeAria", "Observation range")}
-          aria-describedby={hintId}
+          aria-describedby={props.windowEnabled ? hintId : undefined}
           aria-disabled={props.windowEnabled ? undefined : "true"}
           aria-valuemin={0}
           aria-valuemax={100}
-          aria-valuenow={Math.round((win ? win[0] : 0) * 100)}
-          aria-valuetext={`${Math.round((win ? win[0] : 0) * 100)}% – ${Math.round(
-            (win ? win[1] : 1) * 100,
-          )}%`}
-          title={t(
-            "hikari::ribbon.dragHint",
-            "Drag to select a range; double-click, Escape or Home resets",
-          )}
+          aria-valuenow={percentNumber(win ? win[0] : 0)}
+          aria-valuetext={`${percentText(win ? win[0] : 0)} – ${percentText(win ? win[1] : 1)}`}
+          title={
+            props.windowEnabled
+              ? t(
+                  "hikari::ribbon.dragHint",
+                  "Drag to select a range; double-click, Escape or Home resets",
+                )
+              : undefined
+          }
           onPointerdown={onStripPointerDown}
           onDblclick={(event: MouseEvent) => {
             // Same rule as Escape/Home: only a double-click that actually
@@ -667,9 +722,9 @@ export default defineComponent({
                     tabindex={0}
                     aria-label={t("hikari::ribbon.windowStart", "Window start")}
                     aria-valuemin={0}
-                    aria-valuemax={Math.round((win[1] - minWidth.value) * 100)}
-                    aria-valuenow={Math.round(win[0] * 100)}
-                    aria-valuetext={`${Math.round(win[0] * 100)}%`}
+                    aria-valuemax={percentNumber(win[1] - minWidth.value)}
+                    aria-valuenow={percentNumber(win[0])}
+                    aria-valuetext={percentText(win[0])}
                     style={{ left: percent(win[0]) }}
                     onPointerdown={(event: PointerEvent) => onHandlePointerDown("start", event)}
                     onKeydown={(event: KeyboardEvent) => onHandleKeyDown("start", event)}
@@ -681,10 +736,10 @@ export default defineComponent({
                     aria-orientation="horizontal"
                     tabindex={0}
                     aria-label={t("hikari::ribbon.windowEnd", "Window end")}
-                    aria-valuemin={Math.round((win[0] + minWidth.value) * 100)}
+                    aria-valuemin={percentNumber(win[0] + minWidth.value)}
                     aria-valuemax={100}
-                    aria-valuenow={Math.round(win[1] * 100)}
-                    aria-valuetext={`${Math.round(win[1] * 100)}%`}
+                    aria-valuenow={percentNumber(win[1])}
+                    aria-valuetext={percentText(win[1])}
                     style={{ left: percent(win[1]) }}
                     onPointerdown={(event: PointerEvent) => onHandlePointerDown("end", event)}
                     onKeydown={(event: KeyboardEvent) => onHandleKeyDown("end", event)}
@@ -701,18 +756,20 @@ export default defineComponent({
                 </>
               )}
             </div>
-            <span id={hintId} class="hk-range-ribbon-hint">
-              {`${t(
-                "hikari::ribbon.moveWindow",
-                "Move window",
-              )}: ←/→ · ${t(
-                "hikari::ribbon.resizeWindow",
-                "Resize window",
-              )}: ⇧+←/→ · ${t(
-                "hikari::ribbon.dragHint",
-                "Drag to select a range; double-click, Escape or Home resets",
-              )}`}
-            </span>
+            {props.windowEnabled && (
+              <span id={hintId} class="hk-range-ribbon-hint">
+                {`${t(
+                  "hikari::ribbon.moveWindow",
+                  "Move window",
+                )}: ←/→ · ${t(
+                  "hikari::ribbon.resizeWindow",
+                  "Resize window",
+                )}: ⇧+←/→ · ${t(
+                  "hikari::ribbon.dragHint",
+                  "Drag to select a range; double-click, Escape or Home resets",
+                )}`}
+              </span>
+            )}
           </div>
           <div class="hk-range-ribbon-lanes">
             {lanes.value.map((lane) => (

package/src/components/normalizeHkRangeWindow.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+
+import { normalizeHkRangeWindow } from "./HkRangeRibbon";
+
+/**
+ * Public contract of `normalizeHkRangeWindow` — the ONE normalizer the
+ * ribbon and its hosts share.
+ *
+ * Motivation: chest's trace model mirrored this algorithm line-by-line
+ * (including the 0.02 minimum) to filter its rows with the same window. A
+ * mirror like that only has prose pins, so an upstream algorithm/default
+ * change forks the host silently. These pins are the function's contract —
+ * exact tuples, not "close enough" — because hosts bake these numbers into
+ * their own filters.
+ */
+/** Window endpoints at double precision + the contract invariants exactly
+ *  (ordered, in-domain, at least `minWidth` wide). The endpoints of an
+ *  expanded window are arithmetic results (e.g. 0.5 - 0.7/2), so pinning the
+ *  17th significant digit would test IEEE-754, not the contract. */
+function expectWindow(
+  actual: [number, number] | null,
+  expected: [number, number],
+  minWidth = 0.02,
+): void {
+  expect(actual, "a window is returned").not.toBeNull();
+  expect(actual![0], "start").toBeCloseTo(expected[0], 12);
+  expect(actual![1], "end").toBeCloseTo(expected[1], 12);
+  expect(actual![0], "ordered").toBeLessThan(actual![1]);
+  expect(actual![0], "clamped to the domain").toBeGreaterThanOrEqual(0);
+  expect(actual![1], "clamped to the domain").toBeLessThanOrEqual(1);
+  expect(actual![1] - actual![0], "never narrower than minWidth").toBeGreaterThanOrEqual(
+    minWidth - 1e-12,
+  );
+}
+
+describe("normalizeHkRangeWindow", () => {
+  it("returns null for anything that is not a usable window", () => {
+    expect(normalizeHkRangeWindow(null)).toBeNull();
+    expect(normalizeHkRangeWindow(undefined)).toBeNull();
+    // Not an array / not a pair / not finite: all mean "no window".
+    expect(normalizeHkRangeWindow(0.5)).toBeNull();
+    expect(normalizeHkRangeWindow("0.2,0.4")).toBeNull();
+    expect(normalizeHkRangeWindow([])).toBeNull();
+    expect(normalizeHkRangeWindow([0.2])).toBeNull();
+    expect(normalizeHkRangeWindow([Number.NaN, 0.5])).toBeNull();
+    expect(normalizeHkRangeWindow([0.2, Number.POSITIVE_INFINITY])).toBeNull();
+  });
+
+  it("orders inverted windows and clamps them to the domain", () => {
+    expectWindow(normalizeHkRangeWindow([0.7, 0.3]), [0.3, 0.7]);
+    // Both members beyond the end: collapsed to the trailing minimum.
+    expectWindow(normalizeHkRangeWindow([1.2, 1.5]), [0.98, 1]);
+    // Both members before the start: collapsed to the leading minimum.
+    expectWindow(normalizeHkRangeWindow([-0.5, -0.2]), [0, 0.02]);
+  });
+
+  it("expands a degenerate window to the default minimum (0.02)", () => {
+    expectWindow(normalizeHkRangeWindow([0.5, 0.5]), [0.49, 0.51]);
+    // Exactly the minimum width is left alone — no gratuitous expansion.
+    expectWindow(normalizeHkRangeWindow([0.49, 0.51]), [0.49, 0.51]);
+  });
+
+  it("honours a custom minWidth", () => {
+    expectWindow(normalizeHkRangeWindow([0.5, 0.5], 0.2), [0.4, 0.6], 0.2);
+    expectWindow(normalizeHkRangeWindow([0.5, 0.5], 0.7), [0.15, 0.85], 0.7);
+  });
+
+  it("falls back to the default for an unusable minWidth", () => {
+    for (const minWidth of [0, -1, Number.NaN, Number.POSITIVE_INFINITY]) {
+      expectWindow(normalizeHkRangeWindow([0.5, 0.5], minWidth), [0.49, 0.51]);
+    }
+  });
+});

package/src/index.ts

@@ -826,6 +826,7 @@ export { default as HkTagDotRow } from "./components/HkTagDotRow";
 export { default as HkModelCard, type ModelCardTier } from "./components/HkModelCard";
 export {
   default as HkRangeRibbon,
+  normalizeHkRangeWindow,
   type RibbonLane,
   type RibbonSegment,
   type RibbonStatus,