@celestia-island/hikari 0.55.340 → 0.55.342

package/package.json

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

package/src/components/HkAddTile.contract.test.ts

@@ -0,0 +1,74 @@
+/**
+ * Source contract: HkAddTile's base class stays NEUTRAL — faint dashed
+ * border, muted ink, no surface, no primary tint. Color belongs to the
+ * drag-over state only (`--drag-over`), which carries the dashed
+ * primary + primary-wash language the product's hand-drawn drag
+ * overlays already use. Pinned because the tile invites every host to
+ * "just tint it a little" — a class-name test cannot catch the base
+ * picking up color, the source contract lives here.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+/** Extract one top-level rule block's body (`{ ... }`) by selector,
+ *  counting braces so nested `&:hover` blocks stay inside the slice. */
+function fullRule(css: string, selector: string): string {
+  const start = css.indexOf(`${selector} {`);
+  expect(start, `rule ${selector} present`).toBeGreaterThanOrEqual(0);
+  const open = css.indexOf("{", start);
+  let depth = 0;
+  for (let i = open; i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    if (css[i] === "}") {
+      depth--;
+      if (depth === 0) return css.slice(open + 1, i);
+    }
+  }
+  throw new Error(`unbalanced braces in ${selector}`);
+}
+
+/** The rule's DIRECT declarations only — up to the first nested block
+ *  (`&:hover` and friends). Nested states may tint by design; the
+ *  neutrality discipline is about what the resting state paints. */
+function directDecls(css: string, selector: string): string {
+  const body = fullRule(css, selector);
+  const nested = body.indexOf("&:");
+  return nested === -1 ? body : body.slice(0, nested);
+}
+
+describe("HkAddTile neutrality contract", () => {
+  const css = readFileSync(join(here, "HkAddTile.scss"), "utf-8");
+
+  it("resting state: dashed neutral border, no surface, no wash", () => {
+    const base = directDecls(css, ".hk-add-tile");
+    expect(base).toContain("border: 1px dashed");
+    expect(base).toContain("background: transparent");
+    expect(base).not.toContain("rgb(var(--color-primary)");
+  });
+
+  it("compact stays a plain row form: no tint in direct declarations", () => {
+    const compact = directDecls(css, ".hk-add-tile--compact");
+    expect(compact).toContain("flex-direction: row");
+    expect(compact).not.toContain("rgb(var(--color-primary)");
+  });
+
+  it("the drag-over wash lives exclusively in --drag-over", () => {
+    const drag = fullRule(css, ".hk-add-tile--drag-over");
+    expect(drag).toContain("rgb(var(--color-primary) / 8%)");
+    // Whole-file sweep: exactly one top-level rule chunk paints the
+    // wash, and it is the drag-over rule.
+    const chunks = css.split(/(?=\.hk-add-tile)/g).filter((r) => r.includes("/ 8%)"));
+    expect(chunks.length).toBe(1);
+    expect(chunks[0].startsWith(".hk-add-tile--drag-over")).toBe(true);
+  });
+
+  it("disabled resets to neutral (no primary anywhere in the rule)", () => {
+    const disabled = fullRule(css, ".hk-add-tile--disabled");
+    expect(disabled).toContain("cursor: default");
+    expect(disabled).not.toContain("primary");
+  });
+});

package/src/components/HkAddTile.scss

@@ -0,0 +1,71 @@
+@use "../styles/polyfill" as *;
+
+/* HkAddTile — the dashed add / empty affordance tile. The tile is
+ * neutral AT REST: faint dashed border, muted ink, no surface and no
+ * wash. Primary ink comes in through the states that invite (the
+ * hover border/ink tint below, and the drag-over wash) — the primary
+ * SURFACE wash lives exclusively in the --drag-over rule (pinned by
+ * HkAddTile.contract.test.ts, do not creep a wash into any other
+ * rule). */
+.hk-add-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-8, 0.5rem);
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--space-16, 1rem) var(--space-12, 0.75rem);
+  border: 1px dashed var(--border-faint);
+  border-radius: var(--radius-md, 8px);
+  background: transparent;
+  color: rgb(var(--color-muted));
+  font: inherit;
+  font-size: var(--text-xs, 0.75rem);
+  text-align: center;
+  cursor: pointer;
+  @include user-select(none);
+  transition:
+    border-color var(--duration-fast, 0.15s) ease,
+    background-color var(--duration-fast, 0.15s) ease,
+    color var(--duration-fast, 0.15s) ease;
+
+  &:hover {
+    border-color: rgb(var(--color-primary) / 45%);
+    color: rgb(var(--color-primary));
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: 2px;
+  }
+}
+
+/* List-end form: a slim left-aligned row ("＋ add one more") that rides
+ * the end of a row list instead of floating under it as a button. */
+.hk-add-tile--compact {
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: var(--space-8, 0.5rem);
+  padding: var(--space-8, 0.5rem) var(--space-10, 0.625rem);
+  text-align: start;
+}
+
+/* Drag-over wash — dashed primary over a faint primary floor, matching
+ * the drag overlays the product already draws by hand. */
+.hk-add-tile--drag-over {
+  border-color: rgb(var(--color-primary) / 45%);
+  background: rgb(var(--color-primary) / 8%);
+  color: rgb(var(--color-primary));
+}
+
+.hk-add-tile--disabled {
+  cursor: default;
+  opacity: 0.55;
+
+  &:hover {
+    border-color: var(--border-faint);
+    color: rgb(var(--color-muted));
+    background: transparent;
+  }
+}

package/src/components/HkAddTile.test.tsx

@@ -0,0 +1,204 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick } from "vue";
+
+import HkAddTile from "./HkAddTile";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+/* Functional icon stub with a distinguishing class, same recipe as the
+   HkEmptyState tests, so the icon prop / slot override can be asserted
+   to have actually mounted. */
+const StubIcon = defineComponent({
+  name: "StubIcon",
+  setup() {
+    return () => h("i", { class: "stub-add-icon", "data-stub-icon": "true" });
+  },
+});
+
+/** A drop event carrying the given files — plain Event + a defined
+    dataTransfer, because happy-dom has no real DataTransfer. */
+function dropEvent(files: File[]): Event {
+  const ev = new Event("drop", { bubbles: true, cancelable: true });
+  Object.defineProperty(ev, "dataTransfer", { value: { files } });
+  return ev;
+}
+
+function file(name: string): File {
+  return new File(["x"], name, { type: "text/plain" });
+}
+
+function tileEl(c: HTMLElement): HTMLElement {
+  return c.querySelector(".hk-add-tile") as HTMLElement;
+}
+
+describe("HkAddTile", () => {
+  it("renders the label and the default Plus icon", () => {
+    const c = mount(h(HkAddTile, null, { default: () => "Add one" }));
+    const el = tileEl(c);
+    expect(el.tagName).toBe("BUTTON");
+    expect(el.textContent).toContain("Add one");
+    expect(el.querySelector("svg")).not.toBeNull();
+    expect(el.classList.contains("hk-add-tile--compact")).toBe(false);
+  });
+
+  it("compact form carries the compact modifier", () => {
+    const c = mount(h(HkAddTile, { compact: true }, { default: () => "Add" }));
+    expect(tileEl(c).classList.contains("hk-add-tile--compact")).toBe(true);
+  });
+
+  it("icon prop replaces the default glyph", () => {
+    const c = mount(h(HkAddTile, { icon: StubIcon }, { default: () => "Add" }));
+    expect(c.querySelector(".stub-add-icon")).not.toBeNull();
+  });
+
+  it("icon slot wins over both the default and the icon prop", () => {
+    const c = mount(
+      h(HkAddTile, { icon: StubIcon }, { icon: () => h("i", { class: "slot-icon" }), default: () => "Add" }),
+    );
+    expect(c.querySelector(".slot-icon")).not.toBeNull();
+    expect(c.querySelector(".stub-add-icon")).toBeNull();
+    // The default Plus must not ride along either.
+    expect(tileEl(c).querySelectorAll("svg").length).toBe(0);
+  });
+
+  it("emits click for an enabled tile", () => {
+    const onClick = vi.fn();
+    const c = mount(h(HkAddTile, { onClick }, { default: () => "Add" }));
+    tileEl(c).dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not emit click when disabled", () => {
+    const onClick = vi.fn();
+    const c = mount(h(HkAddTile, { disabled: true, onClick }, { default: () => "Add" }));
+    const el = tileEl(c);
+    expect(el.classList.contains("hk-add-tile--disabled")).toBe(true);
+    // The handler-level guard (a disabled button never receives the
+    // native click in a real browser, but dispatchEvent bypasses that).
+    el.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("emits drop-files with the dropped files", () => {
+    const onDropFiles = vi.fn();
+    const c = mount(h(HkAddTile, { droppable: true, onDropFiles }, { default: () => "Drop" }));
+    const ev = dropEvent([file("a.toml"), file("b.toml")]);
+    tileEl(c).dispatchEvent(ev);
+    expect(onDropFiles).toHaveBeenCalledTimes(1);
+    const files = onDropFiles.mock.calls[0][0] as File[];
+    expect(files.map((f) => f.name)).toEqual(["a.toml", "b.toml"]);
+  });
+
+  it("ignores drops without files (the gesture contract is files)", () => {
+    const onDropFiles = vi.fn();
+    const c = mount(h(HkAddTile, { droppable: true, onDropFiles }, { default: () => "Drop" }));
+    tileEl(c).dispatchEvent(dropEvent([]));
+    expect(onDropFiles).not.toHaveBeenCalled();
+  });
+
+  it("ignores drops when not droppable", () => {
+    const onDropFiles = vi.fn();
+    const c = mount(h(HkAddTile, { onDropFiles }, { default: () => "Nope" }));
+    tileEl(c).dispatchEvent(dropEvent([file("a.toml")]));
+    expect(onDropFiles).not.toHaveBeenCalled();
+  });
+
+  it("ignores drops and drag styling when disabled", () => {
+    const onDropFiles = vi.fn();
+    const c = mount(
+      h(HkAddTile, { disabled: true, droppable: true, onDropFiles }, { default: () => "Off" }),
+    );
+    const el = tileEl(c);
+    el.dispatchEvent(new Event("dragenter", { bubbles: true }));
+    expect(el.classList.contains("hk-add-tile--drag-over")).toBe(false);
+    el.dispatchEvent(dropEvent([file("a.toml")]));
+    expect(onDropFiles).not.toHaveBeenCalled();
+  });
+
+  it("flips the drag-over class across child boundaries without flicker", async () => {
+    const c = mount(h(HkAddTile, { droppable: true }, { default: () => "Drop" }));
+    const el = tileEl(c);
+    // The default slot text is a direct child; enter the tile, then its
+    // label span boundary, then back out of the span only.
+    el.dispatchEvent(new Event("dragenter", { bubbles: true }));
+    await nextTick();
+    expect(el.classList.contains("hk-add-tile--drag-over")).toBe(true);
+    const inner = el.querySelector("span") ?? el.firstElementChild ?? el;
+    inner.dispatchEvent(new Event("dragenter", { bubbles: true })); // depth 2
+    inner.dispatchEvent(new Event("dragleave", { bubbles: true })); // depth 1 — still over
+    await nextTick();
+    expect(el.classList.contains("hk-add-tile--drag-over")).toBe(true);
+    el.dispatchEvent(new Event("dragleave", { bubbles: true })); // depth 0
+    await nextTick();
+    expect(el.classList.contains("hk-add-tile--drag-over")).toBe(false);
+  });
+
+  it("cancels dragenter/dragover exactly when it accepts the drag", () => {
+    // The browser only DELIVERS a drop onto a target whose last dragover
+    // was not cancelled — these defaultPrevented pins ARE the drop-target
+    // contract; deleting either preventDefault keeps every emit-level
+    // test green while killing the feature in real browsers (R2-S2).
+    const c = mount(h(HkAddTile, { droppable: true }, { default: () => "Drop" }));
+    const el = tileEl(c);
+    const enter = new Event("dragenter", { cancelable: true });
+    el.dispatchEvent(enter);
+    expect(enter.defaultPrevented).toBe(true);
+    const over = new Event("dragover", { cancelable: true });
+    el.dispatchEvent(over);
+    expect(over.defaultPrevented).toBe(true);
+  });
+
+  it("never cancels drag events when not droppable or disabled (refusal = no preventDefault)", () => {
+    const c = mount(h(HkAddTile, {}, { default: () => "No" }));
+    const over = new Event("dragover", { cancelable: true });
+    tileEl(c).dispatchEvent(over);
+    expect(over.defaultPrevented).toBe(false);
+    const off = mount(
+      h(HkAddTile, { droppable: true, disabled: true }, { default: () => "Off" }),
+    );
+    const over2 = new Event("dragover", { cancelable: true });
+    tileEl(off).dispatchEvent(over2);
+    expect(over2.defaultPrevented).toBe(false);
+  });
+
+  it("hands the native drop event as the second drop-files argument", () => {
+    const onDropFiles = vi.fn();
+    const c = mount(h(HkAddTile, { droppable: true, onDropFiles }, { default: () => "Drop" }));
+    const ev = dropEvent([file("a.toml")]);
+    tileEl(c).dispatchEvent(ev);
+    expect(onDropFiles.mock.calls[0][1]).toBe(ev);
+  });
+
+  it("clears the drag-over state on drop", async () => {
+    const onDropFiles = vi.fn();
+    const c = mount(h(HkAddTile, { droppable: true, onDropFiles }, { default: () => "Drop" }));
+    const el = tileEl(c);
+    el.dispatchEvent(new Event("dragenter", { bubbles: true }));
+    await nextTick();
+    expect(el.classList.contains("hk-add-tile--drag-over")).toBe(true);
+    el.dispatchEvent(dropEvent([file("a.toml")]));
+    await nextTick();
+    expect(el.classList.contains("hk-add-tile--drag-over")).toBe(false);
+    // A second drop after the depth reset must still emit (no stale
+    // depth leaking into the next drag session).
+    el.dispatchEvent(new Event("dragenter", { bubbles: true }));
+    el.dispatchEvent(dropEvent([file("b.toml")]));
+    expect(onDropFiles).toHaveBeenCalledTimes(2);
+  });
+});

package/src/components/HkAddTile.tsx

@@ -0,0 +1,138 @@
+import { computed, defineComponent, h, ref, type Component, type PropType } from "vue";
+import { Plus } from "lucide-vue-next";
+
+import "./HkAddTile.scss";
+
+/**
+ * HkAddTile — the dashed add / empty affordance tile.
+ *
+ * One standard element for the "dashed placeholder that invites an
+ * action" pattern that product surfaces kept re-drawing by hand: the
+ * empty-list tile, the "add one more" row at the end of a staged list,
+ * and the pick-a-file / drop-files zone. Three blessed forms, one
+ * anatomy:
+ *
+ *   - **default** — a centered vertical block (icon above the label):
+ *     the empty state of a list or panel ("no sources yet — add one to
+ *     begin"). The whole tile is the click target; hosts no longer pair
+ *     a passive dashed box with a separate button below it.
+ *   - **compact** — a slim left-aligned row ("＋ Add node / repo"): the
+ *     tile that rides the END of a list of rows and grows the list. It
+ *     replaces the loose secondary button, so the add affordance reads
+ *     as part of the list instead of floating under it.
+ *   - **droppable** — either form additionally accepts file drags:
+ *     dragover/dragenter flip the tile into the drag-over wash (same
+ *     visual language as the established drag overlays — dashed primary
+ *     on a faint primary floor), and a drop with a non-empty `FileList`
+ *     is handed UP as `drop-files`. The host decides what files mean;
+ *     the tile only standardizes the gesture. Drops of anything but
+ *     files (text, URLs) are ignored — the drag-files-in gesture is the
+ *     contract, so a host can rely on `drop-files` always carrying ≥1
+ *     file.
+ *
+ * Accessibility: a real `<button type="button">` — keyboard focus and
+ * Enter/Space activation come free; `disabled` renders the native
+ * attribute (and a disabled tile refuses drags entirely: it never calls
+ * `preventDefault` on dragover, so the browser disallows the drop).
+ */
+export default defineComponent({
+  name: "HkAddTile",
+  props: {
+    /** Off switches the tile off entirely: no click, no drag acceptance. */
+    disabled: { type: Boolean, default: false },
+    /** Accept file drags; non-empty drops surface as `drop-files`. */
+    droppable: { type: Boolean, default: false },
+    /** List-end form: slim horizontal row instead of the centered block. */
+    compact: { type: Boolean, default: false },
+    /** Icon component (lucide-vue-next style); defaults to Plus. */
+    icon: { type: [Object, Function] as PropType<Component>, default: undefined },
+  },
+  emits: {
+    click: (_e: MouseEvent) => true,
+    /** A drop carrying at least one file: `(files, nativeEvent)`. */
+    "drop-files": (_files: File[], _e: DragEvent) => true,
+  },
+  setup(props, { slots, emit }) {
+    // dragenter/dragleave fire in pairs across EVERY child boundary, so
+    // a boolean flips off the moment the pointer crosses the label —
+    // track depth instead and clear it on drop.
+    const dragDepth = ref(0);
+    const dragOver = computed(
+      () => props.droppable && !props.disabled && dragDepth.value > 0,
+    );
+
+    /** Whether this tile accepts the drag at all. Refusing means NEVER
+     *  calling preventDefault: the browser only permits a drop onto a
+     *  target whose last dragover was not cancelled, so a disabled (or
+     *  non-droppable) tile cannot receive one by construction. */
+    function acceptsDrag(): boolean {
+      return props.droppable && !props.disabled;
+    }
+
+    function onDragenter(e: DragEvent) {
+      if (!acceptsDrag()) return;
+      e.preventDefault();
+      dragDepth.value += 1;
+    }
+
+    function onDragover(e: DragEvent) {
+      if (!acceptsDrag()) return;
+      // preventDefault on EVERY dragover (not just the first) — the
+      // drop allowance expires continuously; missing one cancels the
+      // drop for the whole hover.
+      e.preventDefault();
+    }
+
+    function onDragleave() {
+      if (dragDepth.value > 0) dragDepth.value -= 1;
+    }
+
+    function onDrop(e: DragEvent) {
+      dragDepth.value = 0;
+      if (!acceptsDrag()) return;
+      e.preventDefault();
+      const files = Array.from(e.dataTransfer?.files ?? []);
+      if (files.length === 0) return;
+      emit("drop-files", files, e);
+    }
+
+    function onClick(e: MouseEvent) {
+      if (props.disabled) return;
+      emit("click", e);
+    }
+
+    return () => {
+      // Icon resolution reads `slots` INSIDE the render function — the
+      // slots object is not reactive, so a computed here would cache the
+      // choice across slot add/remove (R2-S1: a parent that adds an icon
+      // slot later rendered the stale default Plus ALONGSIDE the slot;
+      // removing the slot left the tile iconless until an unrelated prop
+      // churned the cache). House style: HkEmptyState reads slots.icon
+      // per render for the same reason. h() rather than JSX: the icon
+      // prop is a Component (object | function) union, which TS cannot
+      // expand as a JSX element type.
+      const Icon = slots.icon ? null : (props.icon ?? Plus);
+      return (
+        <button
+          type="button"
+          class={[
+            "hk-add-tile",
+            props.compact && "hk-add-tile--compact",
+            props.disabled && "hk-add-tile--disabled",
+            dragOver.value && "hk-add-tile--drag-over",
+          ]}
+          disabled={props.disabled}
+          onClick={onClick}
+          onDragenter={onDragenter}
+          onDragover={onDragover}
+          onDragleave={onDragleave}
+          onDrop={onDrop}
+        >
+          {Icon ? h(Icon, { size: props.compact ? 14 : 18, "aria-hidden": true }) : null}
+          {slots.icon?.()}
+          {slots.default?.()}
+        </button>
+      );
+    };
+  },
+});

package/src/components/HkRangeRibbon.test.tsx

@@ -163,6 +163,20 @@ function boxOf(element: HTMLElement): { left: number; width: number } {
   return { left: parseFloat(element.style.left), width: parseFloat(element.style.width) };
 }
 
+/** Inline box assertions at the geometry tolerance. `percent()` rounds to four
+ *  decimals OF A PERCENT (~1e-6 fraction), so a four-decimal `toBeCloseTo`
+ *  sits exactly on that rounding boundary; 3 keeps a margin while still
+ *  pinning well below a percent. */
+function expectBox(
+  element: HTMLElement | null,
+  expected: { left: number; width: number },
+  label: string,
+): void {
+  expect(element, label).toBeTruthy();
+  expect(boxOf(element!).left, `${label} left`).toBeCloseTo(expected.left, 3);
+  expect(boxOf(element!).width, `${label} width`).toBeCloseTo(expected.width, 3);
+}
+
 function lastWindow(mock: ReturnType<typeof vi.fn>): [number, number] | null {
   const calls = mock.mock.calls;
   expect(calls.length, "windowChange was emitted").toBeGreaterThan(0);
@@ -304,9 +318,11 @@ describe("HkRangeRibbon full domain", () => {
     // …and a segment can never invent an undeclared lane.
     expect(segmentById(root, "orphan")).toBeNull();
     expect(root.querySelector('[data-segment-id="orphan"]')).toBeNull();
-    // Content wholly outside the axis paints NOTHING: the domain is a
-    // clipping rule, not a clamp to an edge tick (pre-domain content would
-    // have collapsed [1.2, 1.4] onto 100% and drawn a tick there).
+    // Content wholly outside the axis paints NOTHING on either layer: the
+    // domain is a clipping rule, not a clamp. (Pre-domain, `fullDomainBox`
+    // emitted the raw fractions — left 120%, width 20% for this bar — which
+    // the overview's `overflow: hidden` cut and the detail track painted
+    // overflowing; nothing ever clamped it to an edge.)
     expect(segmentById(root, "outside")).toBeNull();
     expect(root.querySelector('[data-segment-id="outside"]')).toBeNull();
   });
@@ -429,6 +445,38 @@ describe("HkRangeRibbon windowed view", () => {
     expect(laneSegments(root)).toHaveLength(1);
   });
 
+  it("paints a domain-edge point in the full view but not through a window edge", () => {
+    // DELIBERATE asymmetry: the DOMAIN edges are INCLUSIVE (a zero-length
+    // point on the axis paints as a tick), while the WINDOW is strict
+    // half-open (`end > win[0] && start < win[1]`), so the same point sitting
+    // exactly on the window end vanishes in the detail. Chest's
+    // `traceRecordsInRange` mirrors that half-open rule verbatim — do NOT
+    // make the window inclusive to "fix" this; it would fork the consumer's
+    // mirrored filter.
+    const segments: RibbonSegment[] = [
+      { id: "edgePoint", lane: "cpu", start: 2, end: 2, label: "edge point" },
+    ];
+    const full = mountRibbon({ window: null, domain: [0, 2], segments });
+    expectBox(
+      full.querySelector<HTMLElement>(
+        '.hk-range-ribbon-overview-segment[data-segment-id="edgePoint"]',
+      ),
+      { left: 100, width: 0 },
+      "the inclusive domain end keeps the point as a tick",
+    );
+    expect(segmentById(full, "edgePoint"), "the no-window detail paints it too").toBeTruthy();
+
+    const windowed = mountRibbon({ window: [1.98, 2], domain: [0, 2], segments });
+    expect(
+      segmentById(windowed, "edgePoint"),
+      "a point ON the window end does not intersect the half-open window",
+    ).toBeNull();
+    expect(
+      windowed.querySelector('.hk-range-ribbon-overview-segment[data-segment-id="edgePoint"]'),
+      "the minimap keeps painting the domain box",
+    ).toBeTruthy();
+  });
+
   it("normalizes inverted, out-of-domain and degenerate windows; NaN means full", () => {
     // Inverted [0.8, 0.2] → [0.2, 0.8].
     const inverted = mountRibbon({ window: [0.8, 0.2] as unknown as [number, number] });
@@ -902,6 +950,52 @@ describe("HkRangeRibbon reset", () => {
     expect(host.root.querySelector(".hk-range-ribbon-reset")).toBeNull();
   });
 
+  it("scopes the full-view epsilon to the axis span", () => {
+    // On a 1e-12 axis the window [0, 5e-13] is a REAL sub-selection half the
+    // axis wide, but an absolute 1e-9 slack would call it "full". The
+    // span-relative slack (1e-9 * span) keeps the distinction; the unit axis
+    // still uses the historical 1e-9.
+    const tiny = mountRibbon({ domain: [0, 1e-12], minWindow: 1e-13, window: [0, 5e-13] });
+    expect(
+      tiny.querySelector(".hk-range-ribbon-reset"),
+      "a half-axis window on a tiny axis is a real sub-selection",
+    ).toBeTruthy();
+    const full = mountRibbon({ domain: [0, 1e-12], minWindow: 1e-13, window: [0, 1e-12] });
+    expect(
+      full.querySelector(".hk-range-ribbon-reset"),
+      "the whole tiny axis needs no reset",
+    ).toBeNull();
+
+    // A NEGATIVE-ORIGIN axis catches a slack scaled by the wrong end: with
+    // `eps = WINDOW_EPSILON * d1` (~ -1e-9 here) the FULL view would become a
+    // phantom sub-selection. The shipped slack (1e-9 * span) keeps the full
+    // axis full and half the axis a real selection.
+    const negativeDomain: [number, number] = [-1, -1 + 1e-12];
+    const negativeFull = mountRibbon({
+      domain: negativeDomain,
+      minWindow: 1e-13,
+      window: [-1, -1 + 1e-12],
+    });
+    expect(
+      negativeFull.querySelector(".hk-range-ribbon-reset"),
+      "the full negative-origin axis needs no reset",
+    ).toBeNull();
+    expect(
+      keydown(negativeFull, "Escape").defaultPrevented,
+      "a full-axis Escape passes through to the host",
+    ).toBe(false);
+
+    const negativeHalf = mountRibbon({
+      domain: negativeDomain,
+      minWindow: 1e-13,
+      window: [-1, -1 + 5e-13],
+    });
+    expect(
+      negativeHalf.querySelector(".hk-range-ribbon-reset"),
+      "half of the negative-origin axis is a real sub-selection",
+    ).toBeTruthy();
+  });
+
   it("cancels an in-flight brush with Escape and consumes the key", async () => {
     const host = mountHost(null);
     const { strip, x } = stubStrip(host.root);
@@ -1165,6 +1259,52 @@ describe("HkRangeRibbon tip card", () => {
     expect(host.root.querySelector(".hk-range-ribbon-tip")).toBeNull();
   });
 
+  it("does not resurrect a tip for a segment that left the axis", async () => {
+    // The no-window tip gate: when the domain re-widens, a stale tip id must
+    // not re-open a card for a segment that had left the axis.
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const liveDomain = ref<[number, number]>([0, 1]);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkRangeRibbon, {
+            lanes: LANES,
+            segments: SEGMENTS,
+            domain: liveDomain.value,
+            window: null,
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    app.mount(container);
+    mounts.push({ app, container });
+    const root = container.querySelector<HTMLElement>(".hk-range-ribbon")!;
+
+    // Hover flush (0.95..1) so its tip card floats.
+    const bar = segmentById(root, "flush")!;
+    expect(bar, "flush paints on the unit axis").toBeTruthy();
+    bar.dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    expect(bar.querySelector(".hk-range-ribbon-tip"), "the tip floats on hover").toBeTruthy();
+
+    // Narrow the axis so flush leaves it: the bar unmounts, so the watch has
+    // to drop the tip id (a removed element never fires mouseleave).
+    liveDomain.value = [0.2, 0.8];
+    await nextTick();
+    expect(segmentById(root, "flush"), "flush left the axis").toBeNull();
+    expect(root.querySelector(".hk-range-ribbon-tip"), "no tip without a mounted bar").toBeNull();
+
+    // Widen back: flush returns, but nothing hovered or focused it again.
+    liveDomain.value = [0, 1];
+    await nextTick();
+    expect(segmentById(root, "flush"), "flush is back").toBeTruthy();
+    expect(
+      root.querySelector(".hk-range-ribbon-tip"),
+      "the stale tip must not resurrect without a pointer or focus",
+    ).toBeNull();
+  });
+
   it("anchors the tip inward at the track edges", async () => {
     const segments: RibbonSegment[] = [
       { id: "left", lane: "cpu", start: 0.02, end: 0.12, label: "left", tip: { title: "Left" } },
@@ -1422,29 +1562,6 @@ describe("HkRangeRibbon dual-layer waterfall", () => {
     return (fraction / (1 + headroom)) * 100;
   }
 
-  /** The minimap's x of a DOMAIN coordinate / of a domain LENGTH, in percent. */
-  function domainPercent(value: number, domain: [number, number]): number {
-    return ((value - domain[0]) / (domain[1] - domain[0])) * 100;
-  }
-
-  function domainWidthPercent(length: number, domain: [number, number]): number {
-    return (length / (domain[1] - domain[0])) * 100;
-  }
-
-  /** Inline box assertions at the geometry tolerance. `percent()` rounds to
-   *  four decimals OF A PERCENT (~1e-6 fraction), so a four-decimal
-   *  `toBeCloseTo` sits exactly on that rounding boundary; 3 keeps a margin
-   *  while still pinning well below a percent. */
-  function expectBox(
-    element: HTMLElement | null,
-    expected: { left: number; width: number },
-    label: string,
-  ): void {
-    expect(element, label).toBeTruthy();
-    expect(boxOf(element!).left, `${label} left`).toBeCloseTo(expected.left, 3);
-    expect(boxOf(element!).width, `${label} width`).toBeCloseTo(expected.width, 3);
-  }
-
   it("marks both layers explicitly and keeps the lane markup intact", () => {
     const root = mountRibbon({ window: [0.35, 0.67] });
     const minimap = root.querySelector<HTMLElement>(".hk-range-ribbon-overview");

package/src/components/HkRangeRibbon.tsx

@@ -107,14 +107,21 @@ type WindowRange = [number, number];
 const MIN_WINDOW_FALLBACK = 0.02;
 /** Keyboard nudge as a fraction of the AXIS SPAN for move and resize. */
 const KEYBOARD_STEP = 0.05;
-/** Slack for "did this interaction change anything" comparisons. */
+/** Slack for "did this interaction change anything" comparisons. Window to
+ *  window (`windowsMatch`) is absolute — both sides live on the same axis —
+ *  while the full-domain test scales it by the axis SPAN, so a tiny axis can
+ *  still tell its full view from a hairline window. */
 const WINDOW_EPSILON = 1e-9;
 
-/** An ordered pair of caller coordinates: the axis everything is drawn on. */
-type DomainRange = [number, number];
+/** An ordered pair of caller coordinates: the axis everything is drawn on.
+ *  Read-only by contract: the same pair is handed out to every consumer. */
+type DomainRange = readonly [number, number];
 
-/** The fallback axis: the familiar 0%..100% reading. */
-const UNIT_DOMAIN: DomainRange = [0, 1];
+/** The fallback axis: the familiar 0%..100% reading. FROZEN because this
+ *  exact array is handed out by `resolveDomain`, stored in the `domain`
+ *  computed and used as the normalizer's default — an in-place edit would
+ *  corrupt every ribbon on the page. */
+const UNIT_DOMAIN: DomainRange = Object.freeze([0, 1] as const);
 
 function clampTo(value: number, lo: number, hi: number): number {
   return value < lo ? lo : value > hi ? hi : value;
@@ -550,7 +557,10 @@ export default defineComponent({
      *  close while the bar held focus). */
     function isFullDomain(win: WindowRange | null): boolean {
       const [d0, d1] = domain.value;
-      return win !== null && win[0] <= d0 + WINDOW_EPSILON && win[1] >= d1 - WINDOW_EPSILON;
+      // Span-relative: an absolute slack would call every window "full" on an
+      // axis shorter than ~2e-9. On the unit axis this is the historical 1e-9.
+      const eps = WINDOW_EPSILON * (d1 - d0);
+      return win !== null && win[0] <= d0 + eps && win[1] >= d1 - eps;
     }
 
     /** Returns true when a window actually existed AND was narrower than the

package/src/index.ts

@@ -26,6 +26,7 @@ export {
   type HkDockBarAnchor as HDockBarAnchor,
   type HkDockBarSurface as HDockBarSurface,
 } from "./components/HkDockBar";
+export { default as HAddTile } from "./components/HkAddTile";
 export { default as HDrawer } from "./components/HkDrawer";
 export { default as HEdgeGlow } from "./components/HkEdgeGlow";
 export { default as HEmptyState } from "./components/HkEmptyState";
@@ -814,6 +815,7 @@ export { default as HkNavItem } from "./components/HkNavItem";
 export { default as HkNumberInput } from "./components/HkNumberInput";
 export { default as HkPhoneInput } from "./components/HkPhoneInput";
 export { default as HkAffixPicker } from "./components/HkAffixPicker";
+export { default as HkAddTile } from "./components/HkAddTile";
 export { default as HkUserPicker, type HkUserOption } from "./components/HkUserPicker";
 export { default as HkPhaseTransition } from "./components/HkPhaseTransition";
 export { default as HkGaugeRing } from "./components/HkGaugeRing";