@celestia-island/hikari 0.55.341 → 0.55.343

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.341",
+  "version": "0.55.343",
   "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/HkMinimap.test.tsx

@@ -105,9 +105,11 @@ describe("HkMinimap zoom bar", () => {
     expect(slider.getAttribute("aria-valuemax")).toBe("150");
     expect(slider.getAttribute("aria-valuenow")).toBe("100");
     expect(slider.getAttribute("aria-valuetext")).toBe("100%");
-    // Off-grid press: ratio 0.185 → 68.5% snaps to the 5% grid → 70.
+    // Off-grid press: the press maps into the INSET rail (7px thumb
+    // radius each side of the 200px rect → 186px rail); ratio
+    // (46-7)/186 ≈ 0.21 → ~71% snaps to the 5% grid → 70.
     pinRect(slider);
-    slider.dispatchEvent(pointer("pointerdown", 37));
+    slider.dispatchEvent(pointer("pointerdown", 46));
     await nextTick();
     expect(seen).toEqual([[70, "slider"]]);
     expect(slider.getAttribute("aria-valuenow")).toBe("70");

package/src/components/HkSlider.scss

@@ -9,22 +9,28 @@
   touch-action: none;
   @include user-select(none);
   outline: none;
+  // The drawable rail is inset by the thumb radius at each end (the value
+  // comes inline from the component; this is only the no-inline fallback).
+  // A thumb parked on the first/last stop then rests ON the rail instead
+  // of hanging off its cap (2026-11-11 user report).
+  --hk-slider-rail-inset: 7px;
+}
+
+.hk-slider[data-size="sm"] {
+  --hk-slider-rail-inset: 6px;
+  height: 14px;
 }
 
 .hk-slider::before {
   content: "";
   position: absolute;
-  inset: 50% 0 auto 0;
+  inset: 50% var(--hk-slider-rail-inset, 7px) auto;
   height: 6px;
   transform: translateY(-50%);
   border-radius: var(--radius-full, 9999px);
   background: rgb(var(--color-muted) / 22%);
 }
 
-.hk-slider[data-size="sm"] {
-  height: 14px;
-}
-
 .hk-slider[data-size="sm"]::before {
   height: 4px;
 }
@@ -42,10 +48,15 @@
 .hk-slider-fill {
   position: absolute;
   top: 50%;
-  left: 0;
+  // Anchored at the rail's left edge; the width (inline from the
+  // component) is the rail fraction. The LEFT cap stays FLAT — a pill
+  // cap on a 6px saturated bar reads as a pointed nib on screen (the
+  // same report that inset the rail) — while the right cap stays round
+  // and closes the rail off at 100%.
+  left: var(--hk-slider-rail-inset, 7px);
   height: 6px;
   transform: translateY(-50%);
-  border-radius: var(--radius-full, 9999px);
+  border-radius: 0 var(--radius-full, 9999px) var(--radius-full, 9999px) 0;
   background: rgb(var(--color-primary));
   pointer-events: none;
 }

package/src/components/HkSlider.test.tsx

@@ -66,8 +66,43 @@ describe("HkSlider", () => {
 
   it("sizes the fill and thumb from the snapped value percentage", () => {
     const c = mount(() => h(HkSlider, { modelValue: 200, min: 100, max: 300, step: 25 }));
-    expect((c.querySelector(".hk-slider-fill") as HTMLElement).style.width).toBe("50%");
-    expect((c.querySelector(".hk-slider-thumb") as HTMLElement).style.left).toBe("50%");
+    // The rail is inset by the thumb radius (md: 7px → 14px span) and the
+    // fill/thumb ride that span (2026-11-11 rail-inset geometry); the
+    // linear calc form is the cssstyle-parseable expansion.
+    expect((c.querySelector(".hk-slider-fill") as HTMLElement).style.width).toBe(
+      "calc(50% - 7px)",
+    );
+    expect((c.querySelector(".hk-slider-thumb") as HTMLElement).style.left).toBe(
+      "calc(50% + 0px)",
+    );
+    expect(
+      (c.querySelector(".hk-slider") as HTMLElement).style.getPropertyValue(
+        "--hk-slider-rail-inset",
+      ),
+    ).toBe("7px");
+  });
+
+  it("keeps the endpoint ticks inside the rail caps", () => {
+    const c = mount(() => h(HkSlider, {
+      modelValue: 100, min: 100, max: 300, step: 25, showTicks: true,
+    }));
+    const ticks = c.querySelectorAll(".hk-slider-tick");
+    const first = (ticks[0] as HTMLElement).style.left;
+    const last = (ticks[ticks.length - 1] as HTMLElement).style.left;
+    // Dot centers sit one dot-radius (1px) further inside the rail, so the
+    // endpoint dots never clear the rail caps.
+    expect(first).toBe("calc(0% + 8px)");
+    expect(last).toBe("calc(100% - 8px)");
+  });
+
+  it("draws the fill with a flat start cap and a rounded end cap", () => {
+    // Source contract: the pill cap on a 6px saturated bar read as a
+    // pointed nib at the rail start (2026-11-11 user report).
+    const here = dirname(fileURLToPath(import.meta.url));
+    const scss = readFileSync(join(here, "HkSlider.scss"), "utf-8");
+    const fill = scss.match(/\.hk-slider-fill\s*{[^}]*}/)?.[0] ?? "";
+    expect(fill).toContain("border-radius: 0 var(--radius-full, 9999px)");
+    expect(fill).toContain("left: var(--hk-slider-rail-inset, 7px)");
   });
 
   it("emits a snapped value when the track is pressed and dragged", () => {

package/src/components/HkSlider.tsx

@@ -15,7 +15,25 @@ import "./HkSlider.scss";
  * track jumps and drags (emitting continuously so hosts can apply live),
  * with window-level move/up listeners so the drag keeps tracking the
  * pointer past the element bounds.
+ *
+ * Rail geometry (2026-11-11 user report): the rail is INSET by the thumb
+ * radius at each end — the native range-input shape. A thumb parked on
+ * the first/last stop then rests ON the rail instead of hanging off its
+ * cap, the endpoint tick dots stay inside the rail, and the fill starts
+ * flat at the rail's left edge (a pill cap on a 6px saturated bar reads
+ * as a pointed nib on screen). The inset lives in the
+ * `--hk-slider-rail-inset` var (set inline here, mirrored by the
+ * constants below — the stylesheet consumes the var for the track/fill
+ * edges; keep the numbers in sync).
  */
+
+/** Thumb diameter / 2 per size (HkSlider.scss thumb rules). */
+const RAIL_INSET_PX = { md: 7, sm: 6 } as const;
+/** Tick dot diameter (HkSlider.scss `.hk-slider-tick`); dot centers sit
+ *  one radius further inside the rail so the last dot never clears the
+ *  rail cap. */
+const TICK_DOT_PX = 2;
+
 export default defineComponent({
   name: "HkSlider",
   props: {
@@ -59,6 +77,29 @@ export default defineComponent({
       return span > 0 ? ((value.value - props.min) / span) * 100 : 0;
     });
 
+    /** The value fraction mapped into the INSET rail: `f` runs 0..1
+     *  across the rail's drawable span, so positions derive as
+     *  `inset + railLength * f`. Shared by thumb/fill/tick positioning
+     *  and the pointer mapping below. Emitted in the expanded linear
+     *  calc form (`calc(F% ± Npx)`) — the `(100% - Npx) * f` product
+     *  shape renders identically but cssstyle (jsdom) rejects it, and
+     *  the contract tests assert on the live inline style. */
+    const railInset = computed(() => RAIL_INSET_PX[props.size] ?? RAIL_INSET_PX.md);
+
+    function round4(n: number): number {
+      return Math.round(n * 1e4) / 1e4;
+    }
+
+    /** A position ON the rail (thumb center / tick center); the extra
+     *  inset shaves tick centers by the dot radius so the endpoint
+     *  dots stay inside the rail caps. */
+    function railPos(f: number, extraInsetPx = 0): string {
+      const inset = railInset.value + extraInsetPx;
+      const px = round4(inset * (1 - 2 * f));
+      const op = px < 0 ? " - " : " + ";
+      return `calc(${round4(f * 100)}%${op}${Math.abs(px)}px)`;
+    }
+
     const tickPositions = computed<number[]>(() => {
       if (!props.showTicks) return [];
       const count = Math.round((props.max - props.min) / safeStep.value);
@@ -75,8 +116,12 @@ export default defineComponent({
       const el = trackRef.value;
       if (!el) return value.value;
       const rect = el.getBoundingClientRect();
-      if (rect.width <= 0) return value.value;
-      const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      const inset = railInset.value;
+      const rail = rect.width - inset * 2;
+      // Degenerate rail (hidden / zero-width): keep the current value
+      // rather than inventing a position.
+      if (rect.width <= 0 || rail <= 0) return value.value;
+      const ratio = Math.max(0, Math.min(1, (clientX - rect.left - inset) / rail));
       return snap(props.min + ratio * (props.max - props.min));
     }
 
@@ -145,6 +190,7 @@ export default defineComponent({
         ref={trackRef}
         class={["hk-slider", props.disabled && "is-disabled"].filter(Boolean).join(" ")}
         data-size={props.size}
+        style={{ "--hk-slider-rail-inset": `${railInset.value}px` }}
         role="slider"
         tabindex={props.disabled ? -1 : 0}
         aria-label={props.ariaLabel}
@@ -161,12 +207,17 @@ export default defineComponent({
             key={i}
             class="hk-slider-tick"
             data-active={left <= pct.value + 0.001 || undefined}
-            style={{ left: `${left}%` }}
+            // Tick centers ride the rail span, one dot-radius further
+            // inset, so the endpoint dots stay inside the rail caps.
+            style={{ left: railPos(left / 100, TICK_DOT_PX / 2) }}
             aria-hidden="true"
           />
         ))}
-        <div class="hk-slider-fill" style={{ width: `${pct.value}%` }} />
-        <div class="hk-slider-thumb" style={{ left: `${pct.value}%` }} />
+        <div
+          class="hk-slider-fill"
+          style={{ width: `calc(${round4(pct.value)}% - ${round4(railInset.value * 2 * (pct.value / 100))}px)` }}
+        />
+        <div class="hk-slider-thumb" style={{ left: railPos(pct.value / 100) }} />
       </div>
     );
   },

package/src/components/HkSliderField.test.tsx

@@ -285,7 +285,7 @@ describe("HkTokenInput", () => {
     expect(a.emitted.filter((v) => v === null)).toEqual([]);
   });
 
-  it("clearing unsets; unit flips re-express, never rescale", async () => {
+  it("clearing via empty text unsets; unit flips re-express, never rescale", async () => {
     const a = mountInput({ modelValue: 1_500_000 });
     (a.container.querySelector(".hk-token-input-value") as HTMLButtonElement).click();
     await nextTick();
@@ -296,12 +296,16 @@ describe("HkTokenInput", () => {
     await pickOption(editorSelect, "K");
     expect(input.value).toBe("1500");
     expect(a.emitted).toEqual([]);
-    (document.querySelector(".hk-token-input-clear") as HTMLButtonElement).click();
+    // There is deliberately no separate clear button in the editor body
+    // (the window close ✕ plus a second ✕ read as duplicates): emptying
+    // the text IS the unset gesture, and the editor stays open so the
+    // unset value segment ("—") is visible before the host closes it.
+    expect(document.querySelector(".hk-token-input-clear")).toBeNull();
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
     await nextTick();
     expect(a.emitted.at(-1)).toBe(null);
-    await vi.waitFor(() => {
-      expect(document.querySelector(".hk-modal-content")).toBeNull();
-    }, { timeout: 1500 });
+    expect(document.querySelector(".hk-modal-content")).not.toBeNull();
   });
 
   it("a unit flip with unparseable text clears rather than skewing the scale", async () => {

package/src/components/HkTokenInput.scss

@@ -67,27 +67,3 @@
   width: 5rem;
 }
 
-.hk-token-input-clear {
-  /* The editor's clear affordance is the STANDARD icon button (wave B1):
-     S24 replaces the old 26px box. The OLD contract is preserved exactly:
-     muted ink at rest, error ink + wash on hover (an R3 review round caught
-     a first draft that set the ink var at rest — red-at-rest was never the
-     design). The hover-scoped override keeps ghost's rest ink while the
-     error channels apply on hover/press only. */
-  flex: 0 0 auto;
-  margin-top: var(--space-4, 4px);
-  --hi-icon-button-bg-hover: rgb(var(--color-error) / 10%);
-  --hi-icon-button-bg-active: rgb(var(--color-error) / 16%);
-
-  &:hover {
-    --hi-icon-button-icon-color: rgb(var(--color-error));
-  }
-
-  &:active {
-    /* Press ink reads the -active channel (HkIconButton.scss
-       `&:active .hk-icon-button-icon`), so the base var alone is a no-op
-       here — set both. */
-    --hi-icon-button-icon-color: rgb(var(--color-error));
-    --hi-icon-button-icon-color-active: rgb(var(--color-error));
-  }
-}

package/src/components/HkTokenInput.tsx

@@ -3,9 +3,6 @@ import { computed, defineComponent, ref, watch, type PropType } from "vue";
 import HkAdaptiveDialog from "./HkAdaptiveDialog";
 import HkInput from "./HkInput";
 import HkSelect from "./HkSelect";
-import { X } from "lucide-vue-next";
-
-import HkIconButton from "./HkIconButton";
 
 import { useI18n } from "../i18n/context";
 import "./HkTokenInput.scss";
@@ -38,9 +35,13 @@ function trim(n: number): string {
  * The precision editor is a DRAGGABLE desktop window / slide-up
  * mobile sheet (HkAdaptiveDialog): a numeric input (major) plus a
  * unit picker (minor), both live-commit; a unit flip re-expresses the
- * same absolute budget (1.5M ⇄ 1500K) instead of rescaling it; a
- * clear action unsets. Transiently unparseable intermediates ("1e")
- * commit nothing. An `#editor` slot may replace the built-in body.
+ * same absolute budget (1.5M ⇄ 1500K) instead of rescaling it;
+ * deliberately emptying the input unsets. There is deliberately NO
+ * separate clear button in the editor body — the dialog chrome already
+ * carries the window's close ✕, and a second ✕ read as a duplicate
+ * control (2026-11-11 user report); clearing the text is the unset
+ * gesture. Transiently unparseable intermediates ("1e") commit
+ * nothing. An `#editor` slot may replace the built-in body.
  */
 export default defineComponent({
   name: "HkTokenInput",
@@ -72,7 +73,6 @@ export default defineComponent({
     const resolvedEditorTitle = computed(
       () => props.editorTitle ?? t("hikari::tokenField.editValue", "Edit value"),
     );
-    const clearLabel = computed(() => t("hikari::tokenField.clear", "Clear"));
 
     function display(): string {
       if (props.format) return props.format(props.modelValue, props.unit);
@@ -109,11 +109,6 @@ export default defineComponent({
       emit("update:unit", next as "auto" | TokenUnit);
     }
 
-    function clearValue() {
-      emit("update:modelValue", null);
-      editorOpen.value = false;
-    }
-
     return () => (
       <div
         class={["hk-token-input", props.disabled && "is-disabled"].filter(Boolean).join(" ")}
@@ -161,15 +156,6 @@ export default defineComponent({
                     onUpdate:modelValue={(v: number | null) => emit("update:modelValue", v)}
                     onUpdate:unit={(u: TokenUnit) => (editorUnit.value = u)}
                   />
-                  <HkIconButton
-                    class="hk-token-input-clear"
-                    size={24}
-                    variant="ghost"
-                    aria-label={clearLabel.value}
-                    onClick={clearValue}
-                  >
-                    {{ icon: () => <X aria-hidden="true" /> }}
-                  </HkIconButton>
                 </div>
               ),
           }}

package/src/components/closeFamily.contract.test.tsx

@@ -114,17 +114,20 @@ describe("close-button family rides the standard icon button", () => {
     });
   }
 
-  it("sources the wave-B1 field clears from the standard component too", () => {
-    // The token editor's clear lives inside an HkAdaptiveDialog slot (no
-    // bare mount path), so it is pinned at SOURCE level like the toast.
+  it("the token editor has NO clear button in its editor body", () => {
+    // Retired 2026-11-11 (user report): the precision editor's dialog
+    // chrome already carries the window close ✕, and a second ✕ next to
+    // the unit picker read as a duplicate control — clearing the text is
+    // the unset gesture. Pinned NEGATIVELY at source level (the editor
+    // lives inside an HkAdaptiveDialog slot, no bare mount path) so the
+    // button cannot quietly grow back.
     const token = readSource("HkTokenInput.tsx");
-    expect(token, "token clear rides HkIconButton").toMatch(
-      new RegExp('<HkIconButton[\\s\\S]{0,200}?class="hk-token-input-clear"'),
+    expect(token, "no hk-token-input-clear seat class").not.toContain(
+      "hk-token-input-clear",
     );
-    expect(token, "token clear is not a raw button").not.toMatch(
-      new RegExp('<button[^>]*class="hk-token-input-clear"'),
+    expect(token, "no HkIconButton in the editor body").not.toContain(
+      "HkIconButton",
     );
-    expect(token, "token clear rides the 24px rung").toContain("size={24}");
   });
 
   it("sources the toast controls from the standard component too", () => {

package/src/i18n/locales/ar/components.json

@@ -289,7 +289,6 @@
   "hikari::userPicker.confirm": "تأكيد",
   "hikari::userPicker.selectedCount": "تم اختيار {count}",
   "hikari::tokenField.editValue": "تحرير القيمة",
-  "hikari::tokenField.clear": "مسح",
   "hikari::diff.unchangedLines": "{count} أسطر غير معدّلة",
   "hikari::diff.loadFailed": "فشل التحميل، انقر لإعادة المحاولة",
   "hikari::search.trigger": "بحث",

package/src/i18n/locales/de/components.json

@@ -289,7 +289,6 @@
   "hikari::userPicker.confirm": "Bestätigen",
   "hikari::userPicker.selectedCount": "{count} ausgewählt",
   "hikari::tokenField.editValue": "Wert bearbeiten",
-  "hikari::tokenField.clear": "Leeren",
   "hikari::diff.unchangedLines": "{count} unveränderte Zeilen",
   "hikari::diff.loadFailed": "Laden fehlgeschlagen, zum Wiederholen klicken",
   "hikari::search.trigger": "Suchen",

package/src/i18n/locales/en/components.json

@@ -289,7 +289,6 @@
   "hikari::userPicker.confirm": "Confirm",
   "hikari::userPicker.selectedCount": "{count} selected",
   "hikari::tokenField.editValue": "Edit value",
-  "hikari::tokenField.clear": "Clear",
   "hikari::diff.unchangedLines": "{count} unchanged lines",
   "hikari::diff.loadFailed": "Load failed, click to retry",
   "hikari::search.trigger": "Search",

package/src/i18n/locales/es/components.json

@@ -289,7 +289,6 @@
   "hikari::userPicker.confirm": "Confirmar",
   "hikari::userPicker.selectedCount": "{count} seleccionados",
   "hikari::tokenField.editValue": "Editar el valor",
-  "hikari::tokenField.clear": "Borrar",
   "hikari::diff.unchangedLines": "{count} líneas sin cambios",
   "hikari::diff.loadFailed": "Error al cargar, haz clic para reintentar",
   "hikari::search.trigger": "Buscar",

package/src/i18n/locales/fr/components.json

@@ -289,7 +289,6 @@
   "hikari::userPicker.confirm": "Confirmer",
   "hikari::userPicker.selectedCount": "{count} sélectionnés",
   "hikari::tokenField.editValue": "Modifier la valeur",
-  "hikari::tokenField.clear": "Effacer",
   "hikari::diff.unchangedLines": "{count} lignes inchangées",
   "hikari::diff.loadFailed": "Échec du chargement, cliquez pour réessayer",
   "hikari::search.trigger": "Rechercher",

package/src/i18n/locales/ja/components.json

@@ -289,7 +289,6 @@
   "hikari::userPicker.confirm": "確認",
   "hikari::userPicker.selectedCount": "{count} 件選択中",
   "hikari::tokenField.editValue": "値を編集",
-  "hikari::tokenField.clear": "クリア",
   "hikari::diff.unchangedLines": "未変更の {count} 行",
   "hikari::diff.loadFailed": "読み込みに失敗しました。クリックで再試行",
   "hikari::search.trigger": "検索",

package/src/i18n/locales/ko/components.json

@@ -289,7 +289,6 @@
   "hikari::userPicker.confirm": "확인",
   "hikari::userPicker.selectedCount": "{count}명 선택됨",
   "hikari::tokenField.editValue": "값 편집",
-  "hikari::tokenField.clear": "지우기",
   "hikari::diff.unchangedLines": "변경되지 않은 {count}줄",
   "hikari::diff.loadFailed": "불러오기 실패, 클릭하여 재시도",
   "hikari::search.trigger": "검색",

package/src/i18n/locales/pt/components.json

@@ -289,7 +289,6 @@
   "hikari::userPicker.confirm": "Confirmar",
   "hikari::userPicker.selectedCount": "{count} selecionados",
   "hikari::tokenField.editValue": "Editar o valor",
-  "hikari::tokenField.clear": "Limpar",
   "hikari::diff.unchangedLines": "{count} linhas inalteradas",
   "hikari::diff.loadFailed": "Falha ao carregar, clique para tentar novamente",
   "hikari::search.trigger": "Pesquisar",

package/src/i18n/locales/ru/components.json

@@ -289,7 +289,6 @@
   "hikari::userPicker.confirm": "Подтвердить",
   "hikari::userPicker.selectedCount": "Выбрано: {count}",
   "hikari::tokenField.editValue": "Изменить значение",
-  "hikari::tokenField.clear": "Очистить",
   "hikari::diff.unchangedLines": "{count} строк без изменений",
   "hikari::diff.loadFailed": "Не удалось загрузить, нажмите для повтора",
   "hikari::search.trigger": "Поиск",

package/src/i18n/locales/zh-Hans/components.json

@@ -293,7 +293,6 @@
   "hikari::userPicker.confirm": "确认",
   "hikari::userPicker.selectedCount": "已选 {count} 人",
   "hikari::tokenField.editValue": "编辑数值",
-  "hikari::tokenField.clear": "清除",
   "hikari::diff.unchangedLines": "{count} 行未修改",
   "hikari::diff.loadFailed": "加载失败，点击重试",
   "hikari::search.trigger": "搜索",

package/src/i18n/locales/zh-Hant/components.json

@@ -293,7 +293,6 @@
   "hikari::userPicker.confirm": "確認",
   "hikari::userPicker.selectedCount": "已選 {count} 人",
   "hikari::tokenField.editValue": "編輯數值",
-  "hikari::tokenField.clear": "清除",
   "hikari::diff.unchangedLines": "{count} 行未修改",
   "hikari::diff.loadFailed": "載入失敗，點擊重試",
   "hikari::search.trigger": "搜尋",

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";