@celestia-island/hikari 0.55.146 → 0.55.148

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.146",
+  "version": "0.55.148",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkBoard.nodeActions.test.tsx

@@ -0,0 +1,101 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h } from "vue";
+
+import HkBoard, { type BoardNodeInput } from "./HkBoard";
+
+/** Pointer event the suite can dispatch (happy-dom has PointerEvent). */
+function pointerEvent(type: string, x: number, y: number): Event {
+  const Ctor = (globalThis as { PointerEvent?: typeof MouseEvent }).PointerEvent ?? MouseEvent;
+  const ev = new Ctor(type, { bubbles: true, cancelable: true, clientX: x, clientY: y });
+  (ev as { pointerId?: number }).pointerId = 1;
+  return ev;
+}
+
+const nodes: BoardNodeInput[] = [
+  { id: "a", x: 0, y: 0, w: 100, h: 60, draggable: true, label: "A" },
+  { id: "b", x: 160, y: 0, w: 100, h: 60, draggable: true, label: "B" },
+];
+
+/** Mounts the board with the given slots, the repo's own way (no
+ * @vue/test-utils in this package): a throwaway app on document.body. */
+function mountBoard(slots: Record<string, () => unknown> = {}, onNodeMove?: () => void): unknown {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  // (defineComponent(fn) treats fn as a FUNCTIONAL component — the wrapper
+  // needs the explicit setup form to hand HkBoard its slots.)
+  const wrapper = defineComponent({
+    setup: () => () => h(HkBoard, { nodes, onNodeMove }, slots),
+  });
+  const app = createApp(wrapper);
+  app.mount(host);
+  return app;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("HkBoard nodeActions slot", () => {
+  it("renders the slot per node, docked inside the node shell", () => {
+    mountBoard({
+      nodeActions: () => [
+        h("button", { "data-test": "act" }, "act"),
+      ],
+    });
+    const docks = [...document.body.querySelectorAll<HTMLElement>(".hk-board-node-actions")];
+    expect(docks).toHaveLength(2);
+    expect(docks[0].querySelector("[data-test=act]")).toBeTruthy();
+    expect(docks[1].querySelector("[data-test=act]")).toBeTruthy();
+    // The dock lives INSIDE the node shell (the SCSS anchors it to the
+    // node's bottom-end corner — pinned by the source contract below).
+    expect(docks[0].closest(".hk-board-node")).toBeTruthy();
+    expect(docks[0].parentElement!.classList.contains("hk-board-node")).toBe(true);
+  });
+
+  it("renders nothing when the slot is absent", () => {
+    mountBoard();
+    expect(document.body.querySelector(".hk-board-node-actions")).toBeNull();
+  });
+
+  it("keeps a press that starts on a dock action from becoming a node drag", () => {
+    // The board captures the pointer on its own root for draggable nodes;
+    // a dock press must not enter that gesture (upstream HkMinimap guards
+    // its zoom chrome the same way). happy-dom cannot emulate capture, so
+    // the observable contract here is the DRAG: a pointer that travels
+    // after starting on the dock leaves the node where it was.
+    const onNodeMove = vi.fn();
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const app = mountBoard(
+      { nodeActions: () => [h("button", { "data-test": "act" }, "act")] },
+      onNodeMove,
+    ) as { unmount: () => void };
+
+    const dock = document.body.querySelector<HTMLElement>(".hk-board-node-actions")!;
+    const shell = dock.closest(".hk-board-node") as HTMLElement;
+    const before = shell.style.left;
+    dock.dispatchEvent(pointerEvent("pointerdown", 90, 50));
+    shell.dispatchEvent(pointerEvent("pointermove", 400, 50));
+    shell.dispatchEvent(pointerEvent("pointerup", 400, 50));
+    expect(shell.style.left).toBe(before);
+    expect(onNodeMove).not.toHaveBeenCalled();
+    app.unmount();
+  });
+});
+
+/** Source contract for the dock's load-bearing rules (vitest cannot see
+ * stylesheets — a deleted rule leaves every DOM guard green). */
+const boardScss = (await import("node:fs")).readFileSync(
+  (await import("node:path")).resolve(__dirname, "./HkBoard.scss"),
+  "utf8",
+);
+
+describe("HkBoard nodeActions dock styles", () => {
+  it("docks the actions to the node's bottom-end corner above the body", () => {
+    const block = boardScss.slice(boardScss.indexOf("&-actions {"));
+    expect(block.slice(0, 400)).toMatch(/position:\s*absolute/);
+    expect(block.slice(0, 400)).toMatch(/inset-inline-end/);
+    expect(block.slice(0, 400)).toMatch(/bottom:/);
+    expect(block.slice(0, 400)).toMatch(/z-index/);
+  });
+});

package/src/components/HkBoard.scss

@@ -44,6 +44,21 @@
   position: absolute;
   box-sizing: border-box;
 
+  // Per-node action dock (the `nodeActions` slot): consumer-injected
+  // controls ride the node's bottom-end corner above the body, so hosts
+  // stop hand-drawing their own buttons into the node slot. The dock owns
+  // its own capture-safety (see HkBoard.tsx) — a press that starts here
+  // never becomes a node drag.
+  &-actions {
+    position: absolute;
+    inset-inline-end: var(--hk-board-node-action-inset, 4px);
+    bottom: var(--hk-board-node-action-inset, 4px);
+    z-index: 6;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
   &--draggable {
     cursor: grab;
 

package/src/components/HkBoard.tsx

@@ -453,6 +453,26 @@ export default defineComponent({
               {slots.node
                 ? slots.node({ node: n })
                 : <div class="hk-board-node-shell">{n.label ?? ""}</div>}
+              {slots.nodeActions
+                ? (
+                  <div
+                    class="hk-board-node-actions"
+                    // A press that starts on an action belongs to that
+                    // action: this component captures the pointer on its own
+                    // root for every draggable node, and a captured press
+                    // retargets the following events to the ancestor — an
+                    // action button's own click would never fire. Stopping
+                    // the bubble here is the same guard HkMinimap puts on
+                    // its zoom chrome. The keydown twin keeps a focused
+                    // action's Enter/Space from reaching the node's own key
+                    // handling.
+                    onPointerdown={(e: PointerEvent) => e.stopPropagation()}
+                    onKeydown={(e: KeyboardEvent) => e.stopPropagation()}
+                  >
+                    {slots.nodeActions({ node: n })}
+                  </div>
+                )
+                : null}
             </div>
           ))}
         </div>

package/src/components/HkSliderField.scss

@@ -0,0 +1,29 @@
+.hk-slider-field {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 8px);
+  min-width: 0;
+  padding: var(--space-4, 4px) var(--space-8, 8px);
+  border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
+  border-radius: var(--radius-sm);
+  background: rgb(var(--color-surface));
+}
+
+.hk-slider-field.is-disabled {
+  opacity: 0.55;
+}
+
+.hk-slider-field-slider {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The flanking slots keep their content width; the slider takes
+ * whatever the row can spare. */
+.hk-slider-field-slot {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 8px);
+  min-width: 0;
+}

package/src/components/HkSliderField.test.tsx

@@ -0,0 +1,411 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import HkSliderField from "./HkSliderField";
+import HkTokenInput, { compactTokenCount } from "./HkTokenInput";
+import HkModalCtor from "./HkModal";
+
+/**
+ * The two-component contract (the panel composes them; the library
+ * ships them SEPARATE and generic):
+ *
+ * HkSliderField — the boxed slider with leading/trailing slots; no
+ * opinion about the value's meaning; the slider takes the room the
+ * slots leave; both slots may host dropdowns/editors.
+ *
+ * HkTokenInput — the standalone token editor (value segment + unit
+ * dropdown + the draggable precision editor); rides any slot.
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+const setWidth = (w: number) => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: w,
+  });
+  window.dispatchEvent(new Event("resize"));
+};
+
+function mountNode(renderNode: () => ReturnType<typeof h>) {
+  setWidth(1280);
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: renderNode });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  for (const el of [...document.querySelectorAll(".hk-modal-root, .hk-select-popout")]) {
+    el.remove();
+  }
+});
+
+function pinRect(el: HTMLElement, width = 288) {
+  Object.defineProperty(el, "getBoundingClientRect", {
+    configurable: true,
+    value: () =>
+      ({ left: 0, width, height: 18, top: 0, right: width, bottom: 18, x: 0, y: 0 }) as DOMRect,
+  });
+}
+
+describe("HkSliderField", () => {
+  it("renders the box with both slots and the flexing slider between", () => {
+    const c = mountNode(() =>
+      h(HkSliderField, { modelValue: 3, min: 0, max: 8, step: 1, showTicks: true, ariaLabel: "L" }, {
+        leading: () => h("span", { class: "lead" }, "L"),
+        trailing: () => h("span", { class: "trail" }, "T"),
+      }),
+    );
+    const box = c.querySelector(".hk-slider-field") as HTMLElement;
+    expect(box.getAttribute("role")).toBe("group");
+    expect(box.getAttribute("aria-label")).toBe("L");
+    expect(c.querySelectorAll(".hk-slider-tick").length).toBe(9);
+    expect(c.querySelector(".hk-slider-field-slot[data-side='leading'] .lead")).toBeTruthy();
+    expect(c.querySelector(".hk-slider-field-slot[data-side='trailing'] .trail")).toBeTruthy();
+    // Source contract: the box chrome stays generic — no token/budget
+    // words in EITHER file, and the scss still carries its structure
+    // (an emptied file must not pass vacuously).
+    const here = dirname(fileURLToPath(import.meta.url));
+    const scss = readFileSync(join(here, "HkSliderField.scss"), "utf-8");
+    const tsx = readFileSync(join(here, "HkSliderField.tsx"), "utf-8");
+    expect(scss).not.toMatch(/token|budget/i);
+    expect(tsx).not.toMatch(/token|budget/i);
+    expect(scss).toContain(".hk-slider-field");
+    expect(scss).toContain(".hk-slider-field-slot");
+  });
+
+  it("commits drags and honors disabled", async () => {
+    const seen: number[] = [];
+    const v = ref(0);
+    const c = mountNode(() =>
+      h(HkSliderField, {
+        modelValue: v.value,
+        min: 0,
+        max: 8,
+        "onUpdate:modelValue": (n: number) => {
+          v.value = n;
+          seen.push(n);
+        },
+      }),
+    );
+    const slider = c.querySelector(".hk-slider") as HTMLElement;
+    pinRect(slider);
+    slider.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, clientX: 144, pointerId: 1, buttons: 1 }));
+    expect(seen.at(-1)).toBe(4);
+    // Disabled: no commits, and BOTH chrome layers flag it — the
+    // inner slider's own is-disabled proves the pass-through (a broken
+    // one would let the slider commit while the box looks disabled).
+    const seen2: number[] = [];
+    const c2 = mountNode(() =>
+      h(HkSliderField, {
+        modelValue: 0,
+        min: 0,
+        max: 8,
+        disabled: true,
+        "onUpdate:modelValue": (n: number) => seen2.push(n),
+      }),
+    );
+    const s2 = c2.querySelector(".hk-slider") as HTMLElement;
+    pinRect(s2);
+    s2.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, clientX: 144, pointerId: 1, buttons: 1 }));
+    expect(seen2).toEqual([]);
+    expect(s2.classList.contains("is-disabled")).toBe(true);
+    expect((c2.querySelector(".hk-slider-field") as HTMLElement).classList.contains("is-disabled")).toBe(true);
+  });
+
+  it("a dropdown rides the trailing slot untouched (the composition is the host's)", () => {
+    const c = mountNode(() =>
+      h(HkSliderField, { modelValue: 0, min: 0, max: 8 }, {
+        trailing: () => h(HkTokenInput, { modelValue: 128000 }),
+      }),
+    );
+    expect(c.querySelector(".hk-slider-field-slot[data-side='trailing'] .hk-token-input")).toBeTruthy();
+    expect((c.querySelector(".hk-token-input-value") as HTMLElement).textContent).toBe("128K");
+  });
+});
+
+describe("HkTokenInput", () => {
+  interface Harness {
+    container: HTMLElement;
+    emitted: Array<number | null>;
+    unitEmitted: Array<string>;
+  }
+
+  function mountInput(props: Record<string, unknown> = {}, slots: Record<string, unknown> = {}): Harness {
+    const value = ref<number | null>((props.modelValue as number | null) ?? null);
+    const unit = ref<string>("auto");
+    const emitted: Array<number | null> = [];
+    const unitEmitted: Array<string> = [];
+    const container = mountNode(() =>
+      h(
+        HkTokenInput,
+        {
+          ...props,
+          modelValue: value.value,
+          unit: unit.value as "auto" | "K" | "M" | "B",
+          "onUpdate:modelValue": (v: number | null) => {
+            value.value = v;
+            emitted.push(v);
+          },
+          "onUpdate:unit": (u: string) => {
+            unit.value = u;
+            unitEmitted.push(u);
+          },
+        },
+        slots.editor ? { editor: () => (slots.editor as () => unknown)() } : {},
+      ),
+    );
+    return { container, emitted, unitEmitted };
+  }
+
+  async function pickOption(trigger: HTMLButtonElement, label: string) {
+    trigger.click();
+    await nextTick();
+    const popout = document.querySelector<HTMLElement>(".hk-select-popout");
+    expect(popout, "the select popout opened").toBeTruthy();
+    const row = [...popout!.querySelectorAll<HTMLElement>(".hk-select-option")].find(
+      (o) => o.textContent?.trim() === label,
+    );
+    expect(row, `the ${label} option`).toBeTruthy();
+    row!.click();
+    await nextTick();
+  }
+
+  it("shows the compact value and — for unset", () => {
+    const a = mountInput({ modelValue: 128000 });
+    expect((a.container.querySelector(".hk-token-input-value") as HTMLElement).textContent).toBe("128K");
+    const b = mountInput({});
+    expect((b.container.querySelector(".hk-token-input-value") as HTMLElement).textContent).toBe("—");
+  });
+
+  it("a custom format wins over the default compaction", () => {
+    const a = mountInput({ modelValue: 128000, format: () => "custom" });
+    expect((a.container.querySelector(".hk-token-input-value") as HTMLElement).textContent).toBe("custom");
+  });
+
+  it("opens the draggable precision editor from the value segment", async () => {
+    const a = mountInput({ modelValue: 128000, editorTitle: "Context" });
+    (a.container.querySelector(".hk-token-input-value") as HTMLButtonElement).click();
+    await nextTick();
+    const frame = document.querySelector<HTMLElement>(".hk-modal-content[data-draggable]");
+    expect(frame, "the draggable desktop window").toBeTruthy();
+    const input = frame!.querySelector("input") as HTMLInputElement;
+    expect(input.value).toBe("128");
+  });
+
+  it("commits unit-scaled absolutes live; unparseable intermediates commit nothing", async () => {
+    const a = mountInput({ modelValue: 128000 });
+    (a.container.querySelector(".hk-token-input-value") as HTMLButtonElement).click();
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>(".hk-modal-content input")!;
+    expect(input.value).toBe("128");
+    input.value = "2";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(a.emitted.at(-1)).toBe(2000);
+    input.value = "1e";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(input.value).toBe("1e");
+    expect(a.emitted.filter((v) => v === null)).toEqual([]);
+    input.value = "1e3";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    // K-seeded: 1e3 = 1000 in-unit = 1,000,000 tokens.
+    expect(a.emitted.at(-1)).toBe(1_000_000);
+    expect(input.value).toBe("1e3");
+  });
+
+  it("deliberately emptying the input unsets (text-cleared, not button)", async () => {
+    const a = mountInput({ modelValue: 128000 });
+    (a.container.querySelector(".hk-token-input-value") as HTMLButtonElement).click();
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>(".hk-modal-content input")!;
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(a.emitted.at(-1)).toBe(null);
+  });
+
+  it("an external change back to the last-emitted value still rescales", async () => {
+    // The echo marker must be CLEARED on external changes: a stale
+    // marker would swallow a later external set back to exactly the
+    // value we last typed (R2 mutation M3's survivor).
+    const value = ref<number | null>(128000);
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      setup: () => () =>
+        h(HkTokenInput, {
+          modelValue: value.value,
+          unit: "auto",
+          "onUpdate:modelValue": (v: number | null) => {
+            value.value = v;
+          },
+        }),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    (container.querySelector(".hk-token-input-value") as HTMLButtonElement).click();
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>(".hk-modal-content input")!;
+    expect(input.value).toBe("128");
+    input.value = "2";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(input.value).toBe("2");
+    value.value = 500; // external preset
+    await nextTick();
+    expect(input.value).toBe("0.5");
+    value.value = 2000; // external flip back to the last-typed budget
+    await nextTick();
+    expect(input.value).toBe("2");
+  });
+
+  it("select-all + typing 0 keeps the keystroke (no transient null)", async () => {
+    const a = mountInput({ modelValue: 128000 });
+    (a.container.querySelector(".hk-token-input-value") as HTMLButtonElement).click();
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>(".hk-modal-content input")!;
+    input.value = "0";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(input.value).toBe("0");
+    expect(a.emitted.filter((v) => v === null)).toEqual([]);
+  });
+
+  it("clearing 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();
+    const editorSelect = document.querySelector<HTMLButtonElement>(
+      ".hk-modal-content .hk-token-editor .hk-select-trigger",
+    )!;
+    const input = document.querySelector<HTMLInputElement>(".hk-modal-content input")!;
+    await pickOption(editorSelect, "K");
+    expect(input.value).toBe("1500");
+    expect(a.emitted).toEqual([]);
+    (document.querySelector(".hk-token-input-clear") as HTMLButtonElement).click();
+    await nextTick();
+    expect(a.emitted.at(-1)).toBe(null);
+    await vi.waitFor(() => {
+      expect(document.querySelector(".hk-modal-content")).toBeNull();
+    }, { timeout: 1500 });
+  });
+
+  it("a unit flip with unparseable text clears rather than skewing the scale", async () => {
+    const a = mountInput({ modelValue: 128000 });
+    (a.container.querySelector(".hk-token-input-value") as HTMLButtonElement).click();
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>(".hk-modal-content input")!;
+    const editorSelect = document.querySelector<HTMLButtonElement>(
+      ".hk-modal-content .hk-token-editor .hk-select-trigger",
+    )!;
+    input.value = "1e";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    await pickOption(editorSelect, "M");
+    expect(input.value).toBe("");
+    expect(a.emitted.filter((v) => v === null)).toEqual([null]);
+  });
+
+  it("the suffix dropdown switches the display unit (fixed K re-expresses)", async () => {
+    const a = mountInput({ modelValue: 2_000_000 });
+    expect((a.container.querySelector(".hk-token-input-value") as HTMLElement).textContent).toBe("2M");
+    await pickOption(a.container.querySelector<HTMLButtonElement>(".hk-token-input .hk-select-trigger")!, "K");
+    expect(a.unitEmitted.at(-1)).toBe("K");
+    await nextTick();
+    expect((a.container.querySelector(".hk-token-input-value") as HTMLElement).textContent).toBe("2000K");
+  });
+
+  it("an #editor slot replaces the built-in editor", async () => {
+    const a = mountInput({ modelValue: 64000, editorTitle: "E" }, { editor: () => h("button", { class: "custom-editor" }, "custom") });
+    (a.container.querySelector(".hk-token-input-value") as HTMLButtonElement).click();
+    await nextTick();
+    expect(document.querySelector(".custom-editor")).toBeTruthy();
+    expect(document.querySelector(".hk-token-editor")).toBeNull();
+  });
+
+  it("disables both segments together", () => {
+    const a = mountInput({ modelValue: 16000, disabled: true });
+    expect((a.container.querySelector(".hk-token-input-value") as HTMLButtonElement).disabled).toBe(true);
+    expect(a.container.querySelector(".hk-token-input .hk-select-trigger")!.hasAttribute("disabled")).toBe(true);
+  });
+});
+
+describe("compactTokenCount", () => {
+  it("compacts decimal magnitudes", () => {
+    expect(compactTokenCount(750)).toBe("750");
+    expect(compactTokenCount(16000)).toBe("16K");
+    expect(compactTokenCount(1500000)).toBe("1.5M");
+    expect(compactTokenCount(3_000_000_000)).toBe("3B");
+    expect(compactTokenCount(null)).toBe("");
+  });
+});
+
+describe("HkModal draggable (carried pins)", () => {
+  async function mountDraggableModal() {
+    setWidth(1280);
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const open = ref(true);
+    const app = createApp({
+      setup: () => () =>
+        h(
+          HkModalCtor,
+          {
+            modelValue: open.value,
+            title: "T",
+            draggable: true,
+            "onUpdate:modelValue": (v: boolean) => (open.value = v),
+          },
+          { default: () => "body" },
+        ),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    await nextTick();
+    return { container, open };
+  }
+
+  it("drags via pointer and hover alone never moves the frame", async () => {
+    await mountDraggableModal();
+    const frame = document.querySelector<HTMLElement>(".hk-modal-content")!;
+    const header = frame.querySelector<HTMLElement>(".hk-modal-header")!;
+    const d = (t: string, x: number, opts: Partial<PointerEventInit> = {}) =>
+      new PointerEvent(t, { bubbles: true, clientX: x, pointerId: 7, buttons: 1, ...opts });
+    header.dispatchEvent(d("pointerdown", 100));
+    header.dispatchEvent(d("pointermove", 260));
+    expect(frame.style.getPropertyValue("--hk-modal-shift-x")).toBe("160px");
+    header.dispatchEvent(d("pointerdown", 100));
+    header.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, clientX: 400, pointerId: 7, buttons: 0 }));
+    expect(frame.style.getPropertyValue("--hk-modal-shift-x")).toBe("160px");
+  });
+
+  it("a close mid-drag never ghosts into the next open", async () => {
+    const { open } = await mountDraggableModal();
+    const frame = document.querySelector<HTMLElement>(".hk-modal-content")!;
+    const header = frame.querySelector<HTMLElement>(".hk-modal-header")!;
+    const d = (t: string, x: number) =>
+      new PointerEvent(t, { bubbles: true, clientX: x, pointerId: 7, buttons: 1 });
+    header.dispatchEvent(d("pointerdown", 100));
+    open.value = false;
+    await nextTick();
+    open.value = true;
+    await nextTick();
+    const frame2 = document.querySelector<HTMLElement>(".hk-modal-content")!;
+    frame2.querySelector<HTMLElement>(".hk-modal-header")!.dispatchEvent(d("pointermove", 300));
+    expect(frame2.style.getPropertyValue("--hk-modal-shift-x")).toBe("");
+  });
+});

package/src/components/HkSliderField.tsx

@@ -0,0 +1,71 @@
+import { defineComponent, type PropType } from "vue";
+
+import HkSlider from "./HkSlider";
+import "./HkSliderField.scss";
+
+/**
+ * HkSliderField — the boxed form-slider: an HkSlider riding a form
+ * chrome row with a LEADING and a TRAILING slot flanking it (either
+ * may host arbitrary content — a value editor, a dropdown, a badge).
+ * The slider itself takes all the room the slots leave; the box owns
+ * the border/padding so the row reads as one control.
+ *
+ * Purely generic: no idea what the value means. Hosts that need a
+ * stepped ladder drive it in index space (min 0, max stops-1) and
+ * map indices themselves; the trailing slot commonly carries their
+ * value editor (the composition lives in the host, not here).
+ */
+export default defineComponent({
+  name: "HkSliderField",
+  props: {
+    /** Controlled value; every emitted value lands on the step grid. */
+    modelValue: { type: Number, required: true },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    /** Snap step — emitted values are `min + n * step`. */
+    step: { type: Number, default: 1 },
+    disabled: { type: Boolean, default: false },
+    /** Render one tick dot per stop. */
+    showTicks: { type: Boolean, default: false },
+    size: { type: String as () => "sm" | "md", default: "md" },
+    ariaLabel: { type: String, default: undefined },
+    /** Optional aria-valuetext formatter. */
+    formatValue: { type: Function as PropType<(value: number) => string>, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_value: number) => true,
+  },
+  setup(props, { emit, slots }) {
+    return () => (
+      <div
+        class={["hk-slider-field", props.disabled && "is-disabled"].filter(Boolean).join(" ")}
+        role="group"
+        aria-label={props.ariaLabel}
+      >
+        {slots.leading && (
+          <div class="hk-slider-field-slot" data-side="leading">
+            {slots.leading()}
+          </div>
+        )}
+        <HkSlider
+          class="hk-slider-field-slider"
+          modelValue={props.modelValue}
+          min={props.min}
+          max={props.max}
+          step={props.step}
+          disabled={props.disabled}
+          showTicks={props.showTicks}
+          size={props.size}
+          ariaLabel={props.ariaLabel}
+          formatValue={props.formatValue}
+          onUpdate:modelValue={(v: number) => emit("update:modelValue", v)}
+        />
+        {slots.trailing && (
+          <div class="hk-slider-field-slot" data-side="trailing">
+            {slots.trailing()}
+          </div>
+        )}
+      </div>
+    );
+  },
+});