@celestia-island/hikari 0.55.143 → 0.55.144

package/package.json

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

package/src/components/HkAdaptiveDialog.tsx

@@ -48,6 +48,9 @@ export default defineComponent({
     closable: { type: Boolean, default: true },
     /** Desktop modal width (HkModal `width`). */
     width: { type: String as PropType<ModalWidth>, default: "32rem" },
+    /** Desktop-only: the modal header becomes a drag handle (see
+     * HkModal `draggable`); the mobile sheet never drags. */
+    draggable: { type: Boolean, default: false },
     /** Mobile drawer height (HkDrawer `size`). HkDrawer's bottom-side CSS
      *  clamps panels at maxHeight 70vh, so the default equals the cap;
      *  pass `panelClass` with a custom max-height for taller sheets. */
@@ -153,6 +156,7 @@ export default defineComponent({
           title={props.title}
           closable={props.closable}
           width={props.width}
+          draggable={props.draggable}
           footerActions={props.footerActions}
         >
           {{

package/src/components/HkModal.draggable.styles.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/** The drag affordance contract: the grab cursor/touch lock MUST ride
+ *  the frame selector — an earlier iteration targeted `.hk-modal[...]`
+ *  (a class no element carries) and shipped dead CSS (2026-10-11 R2
+ *  mutation M1 caught it with zero red). */
+describe("HkModal draggable affordance (styles contract)", () => {
+  it("scopes the grab handle to the frame's data attribute", () => {
+    const here = dirname(fileURLToPath(import.meta.url));
+    const scss = readFileSync(join(here, "HkModal.scss"), "utf-8");
+    const block = scss.match(/\.hk-modal-content\[data-draggable\]\s+\.hk-modal-header\s*{[^}]*}/)?.[0] ?? "";
+    expect(block, "the live drag-affordance selector").toContain("cursor: grab");
+    expect(block).toContain("touch-action: none");
+    expect(scss).not.toMatch(/\.hk-modal\[data-draggable\]/);
+  });
+});

package/src/components/HkModal.scss

@@ -59,7 +59,10 @@
   // The centering translate is part of EVERY transform state — the
   // enter/leave choreography scales on top of it and must never re-seat
   // the frame.
-  transform: translate(-50%, -50%);
+  transform: translate(
+        calc(-50% + var(--hk-modal-shift-x, 0px)),
+        calc(-50% + var(--hk-modal-shift-y, 0px))
+      );
   width: 100%;
   // Size changes animate instead of snapping: `height: auto` growth
   // cannot fire a CSS transition (verified in Chromium — neither auto
@@ -147,21 +150,31 @@
 
   .hk-modal-content-enter-from {
     opacity: 0;
-    transform: translate(-50%, -50%) translateY(5%);
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        )
+        translateY(5%);
     clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
                                  var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
 
   .hk-modal-content-enter-to {
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        );
     clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
                               var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
 
   .hk-modal-content-leave-from {
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        );
     // The pinned identity clip: identical to enter-to so the leave's
     // clip interpolates (never jumps) — see the close note above.
     clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
@@ -173,7 +186,11 @@
     // Mirror of enter-from: shifted +5% with the bottom 10% clipped, the
     // visible box is 90% and centered — both edges ease toward the
     // center line, exactly reversing the unveil.
-    transform: translate(-50%, -50%) translateY(5%);
+    transform: translate(
+          calc(-50% + var(--hk-modal-shift-x, 0px)),
+          calc(-50% + var(--hk-modal-shift-y, 0px))
+        )
+        translateY(5%);
     clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
                                  var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
@@ -647,3 +664,15 @@
     transition: none;
   }
 }
+
+/* ── Draggable desktop windows (opt-in `draggable` prop) ──────────── */
+@media (min-width: 768px) {
+  .hk-modal-content[data-draggable] .hk-modal-header {
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+  .hk-modal-content[data-draggable] .hk-modal-header:active {
+    cursor: grabbing;
+  }
+}

package/src/components/HkModal.tsx

@@ -173,6 +173,14 @@ export default defineComponent({
      * own history entries.
      */
     backGuard: { type: Boolean, default: true },
+    /**
+     * Desktop-only drag: the header becomes a grab handle that moves
+     * the centered frame (composited into the transform via the
+     * --hk-modal-shift-x/y vars, so the enter/leave choreography is
+     * untouched). The mobile bottom sheet never drags. Reopening
+     * resets the shift.
+     */
+    draggable: { type: Boolean, default: false },
   },
   emits: {
     "update:modelValue": (_value: boolean) => true,
@@ -197,6 +205,72 @@ export default defineComponent({
     const handle = ref<{ id: string; zIndex: number } | null>(null);
     const bodyRef = ref<HTMLElement>();
     const contentRef = ref<HTMLElement>();
+    /** Live drag shift in px (null = not dragged); mirrored onto the
+     * frame as CSS vars so the class-driven transforms stay intact. */
+    const dragShift = ref<{ x: number; y: number } | null>(null);
+    let dragStart: { px: number; py: number; x: number; y: number } | null = null;
+
+    function applyShift() {
+      const el = contentRef.value;
+      if (!el) return;
+      if (dragShift.value) {
+        el.style.setProperty("--hk-modal-shift-x", `${dragShift.value.x}px`);
+        el.style.setProperty("--hk-modal-shift-y", `${dragShift.value.y}px`);
+      } else {
+        el.style.removeProperty("--hk-modal-shift-x");
+        el.style.removeProperty("--hk-modal-shift-y");
+      }
+    }
+
+    function onHeaderPointerDown(e: PointerEvent) {
+      // Desktop handle only: the sheet branch (<768px) never consumes
+      // the vars, and touch drag would fight the sheet's own gestures.
+      if (!props.draggable || e.button !== 0) return;
+      if (window.matchMedia("(max-width: 767px)").matches) return;
+      // Interactive chrome inside the header (the close button) keeps
+      // its own pointer semantics.
+      if ((e.target as HTMLElement).closest("button, a, input, select, textarea")) return;
+      const el = contentRef.value;
+      if (!el) return;
+      e.preventDefault();
+      const base = dragShift.value ?? { x: 0, y: 0 };
+      dragStart = { px: e.clientX, py: e.clientY, x: base.x, y: base.y };
+      (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+    }
+
+    function onHeaderPointerMove(e: PointerEvent) {
+      if (!dragStart) return;
+      // Re-check the guards: `draggable` may have been toggled off
+      // mid-drag, and a hover with no button pressed must never move
+      // the frame (a stale dragStart after a mid-drag close would
+      // otherwise ghost-drag on the next open).
+      if (!props.draggable || e.buttons === 0) {
+        dragStart = null;
+        return;
+      }
+      dragShift.value = {
+        x: dragStart.x + (e.clientX - dragStart.px),
+        y: dragStart.y + (e.clientY - dragStart.py),
+      };
+      applyShift();
+    }
+
+    function onHeaderPointerUp() {
+      dragStart = null;
+    }
+
+    // Reopening reseats the frame at center — and drops any stale
+    // dragStart (a close mid-capture never fires pointerup).
+    watch(
+      () => props.modelValue,
+      (open) => {
+        if (open) {
+          dragStart = null;
+          dragShift.value = null;
+          applyShift();
+        }
+      },
+    );
     /** Natural-height probe inside the scroll container: the body's
      *  content wrapper, whose height is the content's intrinsic height
      *  regardless of scroll — the size morph measures this (see
@@ -972,6 +1046,7 @@ export default defineComponent({
                   role="dialog"
                   aria-modal="true"
                   aria-label={resolvedSurfaceName.value}
+                  data-draggable={props.draggable || undefined}
                   style={{
                     maxWidth: resolvedWidth.value,
                     zIndex: contentZ.value,
@@ -991,6 +1066,10 @@ export default defineComponent({
                           "hk-modal-header",
                           slots.headerLead ? "hk-modal-header--lead" : "",
                         ]}
+                        onPointerdown={onHeaderPointerDown}
+                        onPointermove={onHeaderPointerMove}
+                        onPointerup={onHeaderPointerUp}
+                        onPointercancel={onHeaderPointerUp}
                       >
                         {slots.headerLead && (
                           <div class="hk-modal-header-lead">{slots.headerLead()}</div>

package/src/components/HkTokenField.scss

@@ -0,0 +1,105 @@
+/* HkTokenField — one box: slider ladder (major) + value + unit suffix.
+ * The track flexes; the value and the unit keep their content width so
+ * the slider takes whatever the row can spare (the "left bigger part"
+ * layout the model editor specified). */
+.hk-token-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-token-field.is-disabled {
+  opacity: 0.55;
+}
+
+.hk-token-field-slider {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.hk-token-field-value {
+  flex: 0 0 auto;
+  min-width: 3.25rem;
+  padding: 2px var(--space-8, 8px);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: rgb(var(--color-muted) / 12%);
+  color: rgb(var(--color-text));
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.hk-token-field-value:hover:not(:disabled) {
+  background: rgb(var(--color-muted) / 20%);
+}
+
+.hk-token-field-value:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(var(--color-primary) / 40%);
+}
+
+/* An off-ladder (typed) value gets the primary tint — the thumb rests
+ * at the nearest stop, the exact budget is what stands. */
+.hk-token-field[data-off-ladder] .hk-token-field-value {
+  background: rgb(var(--color-primary) / 14%);
+  color: var(--c-primary-strong, rgb(var(--color-primary)));
+}
+
+.hk-token-field-unit {
+  flex: 0 0 auto;
+  width: 4.25rem;
+}
+
+/* The precision editor body: value input (major) + unit (minor). */
+.hk-token-field-editor-body {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-8, 8px);
+  padding: var(--space-8, 8px) 0;
+}
+
+.hk-token-editor {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 8px);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.hk-token-editor-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.hk-token-editor-unit {
+  flex: 0 0 auto;
+  width: 5rem;
+}
+
+.hk-token-field-clear {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: var(--space-4, 4px);
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: rgb(var(--color-muted));
+  cursor: pointer;
+}
+
+.hk-token-field-clear:hover {
+  background: rgb(var(--color-error) / 10%);
+  color: rgb(var(--color-error));
+}

package/src/components/HkTokenField.test.tsx

@@ -0,0 +1,403 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkTokenField, { compactTokens, DEFAULT_TOKEN_STOPS, HkTokenValueEditor } from "./HkTokenField";
+import HkModalCtor from "./HkModal";
+
+/**
+ * HkTokenField contract tests (repo convention: raw createApp +
+ * document queries, no @vue/test-utils):
+ * - the doubling ladder drives the slider in INDEX space (drags commit
+ *   the stop's token count)
+ * - an off-ladder value keeps the exact budget, resting the thumb at
+ *   the nearest stop (data-off-ladder marks the value segment)
+ * - the value segment opens the precision editor (a DRAGGABLE desktop
+ *   window through HkAdaptiveDialog) whose numeric input commits
+ *   unit-scaled absolutes and whose clear unsets
+ * - the suffix unit dropdown switches the display unit; unit flips
+ *   inside the editor re-express the same absolute value
+ * - an #editor slot replaces the built-in editor (the composition
+ *   contract the model editor asked for)
+ */
+
+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"));
+};
+
+interface FieldHarness {
+  container: HTMLElement;
+  value: ReturnType<typeof ref<number | null>>;
+  unit: ReturnType<typeof ref<string>>;
+  emitted: Array<number | null>;
+  unitEmitted: Array<string>;
+}
+
+function mountField(
+  props: Record<string, unknown> = {},
+  slots: Record<string, unknown> = {},
+): FieldHarness {
+  setWidth(1280);
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  // Seeded from props so the controlled flow round-trips: the ref
+  // feeds back whatever the field emits.
+  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 Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(
+          HkTokenField,
+          {
+            ...props,
+            modelValue: value.value as number | null,
+            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)() } : {},
+        );
+    },
+  });
+  const app = createApp(Wrapper);
+  app.mount(container);
+  mounts.push({ app, container });
+  return { container, value, unit, emitted, unitEmitted };
+}
+
+/** Pin a 288px-wide, left-0 rect so index-space drag math is exact
+ * (9 stops × 36px per rung). */
+function pinRect(el: HTMLElement) {
+  Object.defineProperty(el, "getBoundingClientRect", {
+    configurable: true,
+    value: () =>
+      ({ left: 0, width: 288, height: 18, top: 0, right: 288, bottom: 18, x: 0, y: 0 }) as DOMRect,
+  });
+}
+
+function pointer(type: string, clientX: number) {
+  return new PointerEvent(type, { bubbles: true, clientX, pointerId: 1, pointerType: "touch" });
+}
+
+async function dragSlider(h: FieldHarness, clientX: number) {
+  const slider = h.container.querySelector(".hk-slider") as HTMLElement;
+  pinRect(slider);
+  slider.dispatchEvent(pointer("pointerdown", clientX));
+  window.dispatchEvent(pointer("pointerup", clientX));
+  await nextTick();
+}
+
+function fieldSelects(h: FieldHarness): HTMLButtonElement[] {
+  return [...h.container.querySelectorAll<HTMLButtonElement>(".hk-select-trigger")];
+}
+
+async function pickOption(selectTrigger: HTMLButtonElement, label: string) {
+  selectTrigger.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();
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  // Teleported popups (dialogs, popouts) unmount with their apps, but
+  // any stragglers must not leak into the next case's queries.
+  for (const el of [...document.querySelectorAll(".hk-modal-root, .hk-select-popout")]) {
+    el.remove();
+  }
+});
+
+describe("HkTokenField", () => {
+  it("renders the default ladder in index space and commits a drag's stop", async () => {
+    const h = mountField({ modelValue: 16_000 });
+    const slider = h.container.querySelector(".hk-slider") as HTMLElement;
+    expect(slider.getAttribute("aria-valuemin")).toBe("0");
+    expect(slider.getAttribute("aria-valuemax")).toBe(String(DEFAULT_TOKEN_STOPS.length - 1));
+    // Press at 144/288 = index 4 = 256K.
+    await dragSlider(h, 144);
+    expect(h.emitted.at(-1)).toBe(256_000);
+  });
+
+  it("rests the thumb at the NEAREST stop for an off-ladder value, keeping the exact budget", () => {
+    // 300K sits between 256K (idx 4) and 512K (idx 5), nearer the former.
+    const h = mountField({ modelValue: 300_000 });
+    const slider = h.container.querySelector(".hk-slider") as HTMLElement;
+    expect(slider.getAttribute("aria-valuenow")).toBe("4");
+    expect(h.container.querySelector(".hk-token-field")!.getAttribute("data-off-ladder")).toBeTruthy();
+    expect(h.container.querySelector(".hk-token-field-value")!.textContent).toBe("300K");
+    // Nothing was emitted — the exact value stands until a drag.
+    expect(h.emitted).toEqual([]);
+  });
+
+  it("a drag to another rung replaces an off-ladder value with that stop", async () => {
+    const h = mountField({ modelValue: 300_000 });
+    // The thumb already rests at index 4 (256K); press index 5 (512K).
+    await dragSlider(h, 180);
+    expect(h.emitted.at(-1)).toBe(512_000);
+  });
+
+  it("pressing the rung the thumb already rests on keeps the exact value", async () => {
+    const h = mountField({ modelValue: 300_000 });
+    await dragSlider(h, 144); // index 4 — already there
+    expect(h.emitted).toEqual([]);
+  });
+
+  it("opens a draggable precision editor from the value segment", async () => {
+    const h = mountField({ modelValue: 128_000, editorTitle: "Context" });
+    (h.container.querySelector(".hk-token-field-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;
+    // Seeded at the auto-compacted magnitude (K) — 128.
+    expect(input.value).toBe("128");
+  });
+
+  it("the editor commits unit-scaled absolutes live", async () => {
+    const h = mountField({ modelValue: 1_500_000 });
+    (h.container.querySelector(".hk-token-field-value") as HTMLButtonElement).click();
+    await nextTick();
+    const input = document.querySelector(".hk-modal-content input") as HTMLInputElement;
+    expect(input.value).toBe("1.5");
+    input.value = "2";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(h.emitted.at(-1)).toBe(2_000_000);
+  });
+
+  it("clearing in the editor unsets the value", async () => {
+    const h = mountField({ modelValue: 128_000 });
+    (h.container.querySelector(".hk-token-field-value") as HTMLButtonElement).click();
+    await nextTick();
+    (document.querySelector(".hk-token-field-clear") as HTMLButtonElement).click();
+    await nextTick();
+    expect(h.emitted.at(-1)).toBe(null);
+    // The window folds out through its leave transition.
+    await vi.waitFor(() => {
+      expect(document.querySelector(".hk-modal-content")).toBeNull();
+    }, { timeout: 1500 });
+  });
+
+  it("the suffix dropdown switches the display unit", async () => {
+    const h = mountField({ modelValue: 2_000_000 });
+    expect(h.container.querySelector(".hk-token-field-value")!.textContent).toBe("2M");
+    // Fixed K re-expresses the SAME budget (not the auto form).
+    await pickOption(fieldSelects(h)[0]!, "K");
+    expect(h.unitEmitted.at(-1)).toBe("K");
+    await nextTick();
+    expect(h.container.querySelector(".hk-token-field-value")!.textContent).toBe("2000K");
+  });
+
+  it("unit flips inside the editor re-express, never rescale, the budget", async () => {
+    const h = mountField({ modelValue: 1_500_000 });
+    (h.container.querySelector(".hk-token-field-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")!;
+    expect(input.value).toBe("1.5");
+    await pickOption(editorSelect, "K");
+    expect(input.value).toBe("1500");
+    expect(h.emitted).toEqual([]);
+  });
+
+  it("an #editor slot replaces the built-in editor", async () => {
+    // NB: the harness is `f` here — `h` stays Vue's hyperscript.
+    const f = mountField(
+      { modelValue: 64_000, editorTitle: "Edit" },
+      { editor: () => h("button", { class: "custom-editor" }, "custom") },
+    );
+    (f.container.querySelector(".hk-token-field-value") as HTMLButtonElement).click();
+    await nextTick();
+    expect(document.querySelector(".custom-editor")).toBeTruthy();
+    expect(document.querySelector(".hk-token-editor")).toBeNull();
+  });
+
+  it("disables every part together", () => {
+    const h = mountField({ modelValue: 16_000, disabled: true });
+    expect((h.container.querySelector(".hk-slider") as HTMLElement).classList.contains("is-disabled")).toBe(true);
+    expect((h.container.querySelector(".hk-token-field-value") as HTMLButtonElement).disabled).toBe(true);
+  });
+});
+
+describe("HkTokenValueEditor (standalone)", () => {
+  it("seeds in the entry unit and commits scaled absolutes", async () => {
+    setWidth(1280);
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const seen: Array<number | null> = [];
+    const app = createApp({
+      setup: () => () =>
+        h(HkTokenValueEditor, {
+          modelValue: 128_000,
+          unit: "K",
+          "onUpdate:modelValue": (v: number | null) => seen.push(v),
+        }),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    const input = container.querySelector("input") as HTMLInputElement;
+    expect(input.value).toBe("128");
+    input.value = "64";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(seen.at(-1)).toBe(64_000);
+    // Empty unsets rather than zeroing.
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(seen.at(-1)).toBe(null);
+  });
+});
+
+describe("compactTokens", () => {
+  it("compacts decimal magnitudes", () => {
+    expect(compactTokens(750)).toBe("750");
+    expect(compactTokens(16_000)).toBe("16K");
+    expect(compactTokens(128_000)).toBe("128K");
+    expect(compactTokens(1_500_000)).toBe("1.5M");
+    expect(compactTokens(3_000_000_000)).toBe("3B");
+  });
+});
+
+describe("HkTokenField — typing survives round-trips (R1 P2 pins)", () => {
+  it("select-all + typing 0 over 128K keeps the keystroke (no transient null)", async () => {
+    const h = mountField({ modelValue: 128_000 });
+    (h.container.querySelector(".hk-token-field-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();
+    // Nothing committed (0 is not a valid budget) but the TEXT stays.
+    expect(input.value).toBe("0");
+    expect(h.emitted.filter((v) => v === null)).toEqual([]);
+  });
+
+  it("a transiently unparseable intermediate (1e) commits nothing", async () => {
+    const h = mountField({ modelValue: 128_000 });
+    (h.container.querySelector(".hk-token-field-value") as HTMLButtonElement).click();
+    await nextTick();
+    const input = document.querySelector<HTMLInputElement>(".hk-modal-content input")!;
+    input.value = "1e";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(input.value).toBe("1e");
+    expect(h.emitted.filter((v) => v === null)).toEqual([]);
+    // Completing the exponent commits the parsed absolute (K-seeded:
+    // 1e3 = 1000 in-unit = 1,000,000 tokens).
+    input.value = "1e3";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await nextTick();
+    expect(h.emitted.at(-1)).toBe(1_000_000);
+    // The echo round-trip must NOT clobber non-canonical text: the
+    // field still reads "1e3" (the echo guard holds).
+    expect(input.value).toBe("1e3");
+  });
+
+  it("a unit flip with unparseable text clears rather than skewing the scale", async () => {
+    const h = mountField({ modelValue: 128_000 });
+    (h.container.querySelector(".hk-token-field-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(h.emitted.filter((v) => v === null)).toEqual([null]);
+  });
+});
+
+describe("HkModal draggable (R1 pins)", () => {
+  async function mountDraggableModal() {
+    setWidth(1280);
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const open = ref(true);
+    const HkModal = HkModalCtor;
+    const app = createApp({
+      setup: () => () =>
+        h(
+          HkModal,
+          {
+            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("a close mid-drag never ghosts into the next open", async () => {
+    const { container, 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, opts: Partial<PointerEventInit> = {}) =>
+      new PointerEvent(t, { bubbles: true, clientX: x, pointerId: 7, buttons: 1, ...opts });
+    // Press, then close while captured (no pointerup ever fires).
+    header.dispatchEvent(d("pointerdown", 100));
+    open.value = false;
+    await nextTick();
+    open.value = true;
+    await nextTick();
+    const frame2 = document.querySelector<HTMLElement>(".hk-modal-content")!;
+    const header2 = frame2.querySelector<HTMLElement>(".hk-modal-header")!;
+    // A button-held move WITHOUT a fresh press must be inert.
+    header2.dispatchEvent(d("pointermove", 300));
+    expect(frame2.style.getPropertyValue("--hk-modal-shift-x")).toBe("");
+  });
+
+  it("drags via pointer and writes the shift vars; hover alone never moves the frame", async () => {
+    const { container } = await mountDraggableModal();
+    const frame = document.querySelector<HTMLElement>(".hk-modal-content")!;
+    const header = frame.querySelector<HTMLElement>(".hk-modal-header")!;
+    expect(frame.getAttribute("data-draggable")).toBeTruthy();
+    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));
+    // With the header holding pointer capture, moves retarget to the
+    // header — even far outside its box.
+    header.dispatchEvent(d("pointermove", 260));
+    expect(frame.style.getPropertyValue("--hk-modal-shift-x")).toBe("160px");
+    // A subsequent press whose moves carry no button (pure hover)
+    // never moves the frame.
+    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");
+  });
+});

package/src/components/HkTokenField.tsx

@@ -0,0 +1,357 @@
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+
+import { useI18n } from "../i18n/context";
+
+import HkAdaptiveDialog from "./HkAdaptiveDialog";
+import HkInput from "./HkInput";
+import HkSelect from "./HkSelect";
+import HkSlider from "./HkSlider";
+import { X } from "lucide-vue-next";
+
+import "./HkTokenField.scss";
+
+/** The ladder the field snaps to: each stop doubles the previous one,
+ *  16K → 4M (the curation the model editor asked for — token budgets
+ *  cluster on powers of two). Hosts may pass their own. */
+export const DEFAULT_TOKEN_STOPS = [
+  16_000, 32_000, 64_000, 128_000, 256_000, 512_000, 1_000_000, 2_000_000, 4_000_000,
+] as const;
+
+export type TokenUnit = "K" | "M" | "B";
+
+const UNIT_SCALE: Record<TokenUnit, number> = { K: 1e3, M: 1e6, B: 1e9 };
+
+/** Decimal token compaction — 1.5M, 128K, 750 (plain under 1K). */
+export function compactTokens(value: number): string {
+  if (!Number.isFinite(value)) return "";
+  if (value >= 1e9) return `${trim(value / 1e9)}B`;
+  if (value >= 1e6) return `${trim(value / 1e6)}M`;
+  if (value >= 1e3) return `${trim(value / 1e3)}K`;
+  return String(Math.round(value));
+}
+
+function trim(n: number): string {
+  const r = Math.round(n * 100) / 100;
+  return String(r);
+}
+
+/** The default precision editor body: a big numeric input (left) plus
+ * a unit picker (right) — both live-commit. Exposed for hosts that
+ * mount it inside their own `#editor` slot chrome. */
+export const HkTokenValueEditor = defineComponent({
+  name: "HkTokenValueEditor",
+  props: {
+    /** Absolute token count; null = unset. */
+    modelValue: { type: Number as () => number | null, default: null },
+    /** Entry unit for the numeric input (K = the input reads
+     * thousands). Hosts may preselect; defaults from the value. */
+    unit: { type: String as () => TokenUnit, default: "K" },
+  },
+  emits: {
+    "update:modelValue": (_value: number | null) => true,
+    "update:unit": (_unit: TokenUnit) => true,
+  },
+  setup(props, { emit }) {
+    /** The numeric text in the CURRENT unit; rescaled when the unit
+     * flips so the absolute value never moves underneath. */
+    const text = ref("");
+    /** The absolute we last emitted — a round-tripped prop equal to it
+     * is OUR OWN commit echoing back, not an external change: skip
+     * the rescale or typing gets clobbered mid-edit (select-all + "0"
+     * used to swallow the keystroke; "1e" cleared the field). */
+    let lastEmitted: number | null = null;
+
+    function rescale(value: number | null, unit: TokenUnit) {
+      if (value == null || !Number.isFinite(value) || value <= 0) {
+        text.value = "";
+        return;
+      }
+      const scaled = value / UNIT_SCALE[unit];
+      text.value = String(Math.round(scaled * 100) / 100);
+    }
+
+    watch(
+      () => [props.modelValue, props.unit] as const,
+      ([value, unit], prev) => {
+        // The immediate first run has no previous pair — seed.
+        if (!prev) {
+          rescale(value, unit);
+          return;
+        }
+        const [prevValue, prevUnit] = prev;
+        if (value !== prevValue && value === lastEmitted) return;
+        if (value === prevValue && unit !== prevUnit) {
+          // A pure unit flip (the host round-tripped update:unit):
+          // re-express our own text — switchUnit already did.
+          return;
+        }
+        // An external change: whatever we last emitted is stale as an
+        // echo marker (a later external set back to that same value
+        // must still rescale, not be skipped).
+        lastEmitted = null;
+        rescale(value, unit);
+      },
+      { immediate: true },
+    );
+
+    function commit() {
+      const raw = text.value.trim();
+      // Only a deliberately emptied field unsets. A transiently
+      // unparseable intermediate ("1e", "-", "") mid-typing commits
+      // NOTHING — live consumers never see a flicker of null.
+      if (!raw) {
+        lastEmitted = null;
+        emit("update:modelValue", null);
+        return;
+      }
+      const n = Number(raw.replace(/[,_\s]/g, ""));
+      if (!Number.isFinite(n) || n <= 0) return;
+      lastEmitted = Math.round(n * UNIT_SCALE[props.unit]);
+      emit("update:modelValue", lastEmitted);
+    }
+
+    const unitOptions = computed(() => [
+      { value: "K", label: "K" },
+      { value: "M", label: "M" },
+      { value: "B", label: "B" },
+    ]);
+
+    function switchUnit(next: string) {
+      const unit = next as TokenUnit;
+      if (unit === props.unit) return;
+      // Re-express the SAME absolute value in the new unit first, so a
+      // flip never multiplies the budget by 1000. Transiently
+      // unparseable text cannot be re-expressed — clearing it is the
+      // honest move (a stale number under a new scale would commit a
+      // 1000x jump on the next keystroke).
+      const n = Number(text.value.replace(/[,_\s]/g, ""));
+      if (Number.isFinite(n) && n > 0) {
+        const absolute = n * UNIT_SCALE[props.unit];
+        text.value = String(Math.round((absolute / UNIT_SCALE[unit]) * 100) / 100);
+      } else if (text.value.trim()) {
+        text.value = "";
+        lastEmitted = null;
+        emit("update:modelValue", null);
+      }
+      emit("update:unit", unit);
+    }
+
+    return () => (
+      <div class="hk-token-editor">
+        <HkInput
+          class="hk-token-editor-input"
+          modelValue={text.value}
+          onUpdate:modelValue={(v: string) => {
+            text.value = v;
+            commit();
+          }}
+        />
+        <HkSelect
+          class="hk-token-editor-unit"
+          modelValue={props.unit}
+          options={unitOptions.value}
+          onUpdate:modelValue={switchUnit}
+        />
+      </div>
+    );
+  },
+});
+
+/**
+ * HkTokenField — one integrated box for token-scale budgets: the left
+ * (major) part is a stepped slider over a doubling ladder (16K → 4M by
+ * default); the right part is the exact value, clickable to open a
+ * precision editor (a draggable desktop window / a slide-up mobile
+ * sheet via HkAdaptiveDialog) where any value may be typed and the
+ * unit switched (K/M/B). The box's unit suffix is itself a dropdown —
+ * the same K/M/B choice, switching the display and the editor's entry
+ * unit. Values off the ladder survive: the slider thumb rests at the
+ * nearest stop while the exact value stands until the user drags.
+ *
+ * Composition: hosts may replace the built-in editor entirely through
+ * the `#editor` slot (the two-business-component strategy the model
+ * editor asked for) — the slot receives `{ value, unit, close }`.
+ */
+export default defineComponent({
+  name: "HkTokenField",
+  props: {
+    /** Absolute token count; null = unset (nothing chosen yet). */
+    modelValue: { type: Number as () => number | null, default: null },
+    /** Ascending stop ladder; the slider works in index space so the
+     *  geometric rungs sit evenly. */
+    stops: {
+      type: Array as () => number[],
+      default: () => [...DEFAULT_TOKEN_STOPS],
+    },
+    /** Display/entry unit; "auto" compacts (128K, 1.5M). */
+    unit: { type: String as () => "auto" | TokenUnit, default: "auto" },
+    disabled: { type: Boolean, default: false },
+    ariaLabel: { type: String, default: undefined },
+    /** The precision editor's title. */
+    editorTitle: { type: String, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_value: number | null) => true,
+    "update:unit": (_unit: "auto" | TokenUnit) => true,
+  },
+  setup(props, { emit, slots }) {
+    const { t } = useI18n();
+    const editorOpen = ref(false);
+    /** The unit the EDITOR works in — seeded from the display unit
+     *  (auto compacts to the value's natural magnitude). */
+    const editorUnit = ref<TokenUnit>("K");
+    /** The popup contract wants every window named; hosts that don't
+     *  care still get the stock string (never the dev warning). */
+    const resolvedEditorTitle = computed(
+      () => props.editorTitle ?? t("hikari::tokenField.editValue", "Edit value"),
+    );
+    const clearLabel = computed(() => t("hikari::tokenField.clear", "Clear"));
+
+    const stops = computed(() =>
+      [...props.stops].filter((n) => Number.isFinite(n) && n > 0).sort((a, b) => a - b),
+    );
+
+    /** Index of the nearest stop (ties → lower). */
+    const stopIndex = computed(() => {
+      const list = stops.value;
+      if (!list.length) return 0;
+      const v = props.modelValue;
+      if (v == null) return 0;
+      let best = 0;
+      let bestDist = Infinity;
+      for (let i = 0; i < list.length; i++) {
+        const d = Math.abs(list[i]! - v);
+        if (d < bestDist) {
+          bestDist = d;
+          best = i;
+        }
+      }
+      return best;
+    });
+
+    const offLadder = computed(() => {
+      const v = props.modelValue;
+      return v != null && !stops.value.includes(v);
+    });
+
+    function display(value: number | null): string {
+      if (value == null) return "—";
+      if (props.unit !== "auto") {
+        const scaled = value / UNIT_SCALE[props.unit];
+        return `${trim(scaled)}${props.unit}`;
+      }
+      return compactTokens(value);
+    }
+
+    function pickStop(i: number) {
+      const list = stops.value;
+      if (list[i] != null) emit("update:modelValue", list[i]!);
+    }
+
+    function seedEditorUnit() {
+      if (props.unit !== "auto") {
+        editorUnit.value = props.unit;
+        return;
+      }
+      const v = props.modelValue;
+      editorUnit.value = v == null ? "K" : v >= 1e9 ? "B" : v >= 1e6 ? "M" : "K";
+    }
+
+    function openEditor() {
+      if (props.disabled) return;
+      seedEditorUnit();
+      editorOpen.value = true;
+    }
+
+    const unitOptions = computed(() => [
+      { value: "auto", label: "auto" },
+      { value: "K", label: "K" },
+      { value: "M", label: "M" },
+      { value: "B", label: "B" },
+    ]);
+
+    function switchSuffixUnit(next: string) {
+      emit("update:unit", next as "auto" | TokenUnit);
+    }
+
+    function clearValue() {
+      emit("update:modelValue", null);
+      editorOpen.value = false;
+    }
+
+    return () => (
+      <div
+        class={["hk-token-field", props.disabled && "is-disabled"].filter(Boolean).join(" ")}
+        role="group"
+        aria-label={props.ariaLabel}
+        data-off-ladder={offLadder.value || undefined}
+      >
+        <HkSlider
+          class="hk-token-field-slider"
+          modelValue={stopIndex.value}
+          min={0}
+          max={Math.max(stops.value.length - 1, 0)}
+          step={1}
+          showTicks={stops.value.length > 1}
+          disabled={props.disabled}
+          ariaLabel={props.ariaLabel}
+          formatValue={(i: number) => display(stops.value[i] ?? null)}
+          onUpdate:modelValue={pickStop}
+        />
+        <button
+          type="button"
+          class="hk-token-field-value"
+          disabled={props.disabled}
+          aria-haspopup="dialog"
+          aria-label={`${resolvedEditorTitle.value}: ${display(props.modelValue)}`}
+          onClick={openEditor}
+          title={resolvedEditorTitle.value}
+        >
+          {display(props.modelValue)}
+        </button>
+        <HkSelect
+          class="hk-token-field-unit"
+          modelValue={props.unit}
+          options={unitOptions.value}
+          disabled={props.disabled}
+          onUpdate:modelValue={switchSuffixUnit}
+        />
+        <HkAdaptiveDialog
+          modelValue={editorOpen.value}
+          onUpdate:modelValue={(v: boolean) => (editorOpen.value = v)}
+          title={resolvedEditorTitle.value}
+          width="22rem"
+          draggable
+        >
+          {{
+            default: () =>
+              slots.editor
+                ? slots.editor({
+                    value: props.modelValue,
+                    unit: editorUnit.value,
+                    close: () => (editorOpen.value = false),
+                  })
+                : (
+                    <div class="hk-token-field-editor-body">
+                      <HkTokenValueEditor
+                        modelValue={props.modelValue}
+                        unit={editorUnit.value}
+                        onUpdate:modelValue={(v: number | null) => emit("update:modelValue", v)}
+                        onUpdate:unit={(u: TokenUnit) => (editorUnit.value = u)}
+                      />
+                      <button
+                        type="button"
+                        class="hk-token-field-clear"
+                        aria-label={clearLabel.value}
+                        onClick={clearValue}
+                      >
+                        <X size={13} />
+                      </button>
+                    </div>
+                  ),
+          }}
+        </HkAdaptiveDialog>
+      </div>
+    );
+  },
+});

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

@@ -272,5 +272,7 @@
   "hikari::userPicker.add": "اختيار المستخدمين…",
   "hikari::userPicker.remove": "إزالة",
   "hikari::userPicker.confirm": "تأكيد",
-  "hikari::userPicker.selectedCount": "تم اختيار {count}"
+  "hikari::userPicker.selectedCount": "تم اختيار {count}",
+  "hikari::tokenField.editValue": "تحرير القيمة",
+  "hikari::tokenField.clear": "مسح"
 }

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

@@ -272,5 +272,7 @@
   "hikari::userPicker.add": "Benutzer auswählen…",
   "hikari::userPicker.remove": "Entfernen",
   "hikari::userPicker.confirm": "Bestätigen",
-  "hikari::userPicker.selectedCount": "{count} ausgewählt"
+  "hikari::userPicker.selectedCount": "{count} ausgewählt",
+  "hikari::tokenField.editValue": "Wert bearbeiten",
+  "hikari::tokenField.clear": "Leeren"
 }

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

@@ -272,5 +272,7 @@
   "hikari::userPicker.add": "Select users…",
   "hikari::userPicker.remove": "Remove",
   "hikari::userPicker.confirm": "Confirm",
-  "hikari::userPicker.selectedCount": "{count} selected"
+  "hikari::userPicker.selectedCount": "{count} selected",
+  "hikari::tokenField.editValue": "Edit value",
+  "hikari::tokenField.clear": "Clear"
 }

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

@@ -272,5 +272,7 @@
   "hikari::userPicker.add": "Seleccionar usuarios…",
   "hikari::userPicker.remove": "Quitar",
   "hikari::userPicker.confirm": "Confirmar",
-  "hikari::userPicker.selectedCount": "{count} seleccionados"
+  "hikari::userPicker.selectedCount": "{count} seleccionados",
+  "hikari::tokenField.editValue": "Editar el valor",
+  "hikari::tokenField.clear": "Borrar"
 }

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

@@ -272,5 +272,7 @@
   "hikari::userPicker.add": "Sélectionner des utilisateurs…",
   "hikari::userPicker.remove": "Retirer",
   "hikari::userPicker.confirm": "Confirmer",
-  "hikari::userPicker.selectedCount": "{count} sélectionnés"
+  "hikari::userPicker.selectedCount": "{count} sélectionnés",
+  "hikari::tokenField.editValue": "Modifier la valeur",
+  "hikari::tokenField.clear": "Effacer"
 }

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

@@ -272,5 +272,7 @@
   "hikari::userPicker.add": "ユーザーを選択…",
   "hikari::userPicker.remove": "削除",
   "hikari::userPicker.confirm": "確認",
-  "hikari::userPicker.selectedCount": "{count} 件選択中"
+  "hikari::userPicker.selectedCount": "{count} 件選択中",
+  "hikari::tokenField.editValue": "値を編集",
+  "hikari::tokenField.clear": "クリア"
 }

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

@@ -272,5 +272,7 @@
   "hikari::userPicker.add": "사용자 선택…",
   "hikari::userPicker.remove": "제거",
   "hikari::userPicker.confirm": "확인",
-  "hikari::userPicker.selectedCount": "{count}명 선택됨"
+  "hikari::userPicker.selectedCount": "{count}명 선택됨",
+  "hikari::tokenField.editValue": "값 편집",
+  "hikari::tokenField.clear": "지우기"
 }

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

@@ -272,5 +272,7 @@
   "hikari::userPicker.add": "Selecionar usuários…",
   "hikari::userPicker.remove": "Remover",
   "hikari::userPicker.confirm": "Confirmar",
-  "hikari::userPicker.selectedCount": "{count} selecionados"
+  "hikari::userPicker.selectedCount": "{count} selecionados",
+  "hikari::tokenField.editValue": "Editar o valor",
+  "hikari::tokenField.clear": "Limpar"
 }

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

@@ -272,5 +272,7 @@
   "hikari::userPicker.add": "Выбрать пользователей…",
   "hikari::userPicker.remove": "Убрать",
   "hikari::userPicker.confirm": "Подтвердить",
-  "hikari::userPicker.selectedCount": "Выбрано: {count}"
+  "hikari::userPicker.selectedCount": "Выбрано: {count}",
+  "hikari::tokenField.editValue": "Изменить значение",
+  "hikari::tokenField.clear": "Очистить"
 }

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

@@ -276,5 +276,7 @@
   "hikari::userPicker.add": "选择用户…",
   "hikari::userPicker.remove": "移除",
   "hikari::userPicker.confirm": "确认",
-  "hikari::userPicker.selectedCount": "已选 {count} 人"
+  "hikari::userPicker.selectedCount": "已选 {count} 人",
+  "hikari::tokenField.editValue": "编辑数值",
+  "hikari::tokenField.clear": "清除"
 }

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

@@ -276,5 +276,7 @@
   "hikari::userPicker.add": "選擇使用者…",
   "hikari::userPicker.remove": "移除",
   "hikari::userPicker.confirm": "確認",
-  "hikari::userPicker.selectedCount": "已選 {count} 人"
+  "hikari::userPicker.selectedCount": "已選 {count} 人",
+  "hikari::tokenField.editValue": "編輯數值",
+  "hikari::tokenField.clear": "清除"
 }

package/src/index.ts

@@ -92,6 +92,7 @@ export { default as HSkeleton } from "./components/HkSkeleton";
 export { default as HSkeletonList } from "./components/HkSkeletonList";
 export { default as HSlider } from "./components/HkSlider";
 export { default as HSpinner } from "./components/HkSpinner";
+export { default as HTokenField } from "./components/HkTokenField";
 export { default as HSwitch } from "./components/HkSwitch";
 export { default as HTable } from "./components/HkTable";
 export { default as HTabs } from "./components/HkTabs";
@@ -746,6 +747,7 @@ export { default as HkSidebar } from "./components/HkSidebar";
 export { default as HkSkeleton } from "./components/HkSkeleton";
 export { default as HkSkeletonList } from "./components/HkSkeletonList";
 export { default as HkSlider } from "./components/HkSlider";
+export { default as HkTokenField, HkTokenValueEditor, compactTokens as compactTokenCount, DEFAULT_TOKEN_STOPS, type TokenUnit } from "./components/HkTokenField";
 export { default as HkSpinner } from "./components/HkSpinner";
 export { default as HkSwitch } from "./components/HkSwitch";
 export { default as HkTable } from "./components/HkTable";