@celestia-island/hikari 0.55.142 → 0.55.144

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.142",
+  "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/HkModelTag.scss

@@ -48,6 +48,37 @@
   border-radius: var(--radius-sm, 4px);
 }
 
+// Rate segment (the model-group capsule's `×N` tail, 2026-10-11): takes
+// the inline-end rounding and provides the seam's divider from its own
+// inline-start border; a success tint keeps it readable as a modifier,
+// not a second name. With a rate present the NAME segment becomes a
+// middle segment — square inline-end edge too (the join geometry below).
+.s-model-tag-group[data-rate] .hk-badge.s-model-tag-name {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  // The rate badge provides the seam's divider from its own
+  // inline-start border — the name's inline-end border must drop or
+  // the seam stacks ~2px (the num/name seam is 1px).
+  border-inline-end: none;
+}
+
+// Tagless + rate (the pill starts bare before the roster refines the
+// id): the name is the FIRST child — its leading corners keep the
+// capsule's rounding (only the :only-child escape covered it before).
+.s-model-tag-group[data-rate] .hk-badge.s-model-tag-name:first-child {
+  border-start-start-radius: var(--radius-sm, 4px);
+  border-end-start-radius: var(--radius-sm, 4px);
+}
+
+.s-model-tag-group .hk-badge.s-model-tag-rate {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--radius-sm, 4px);
+  border-end-end-radius: var(--radius-sm, 4px);
+  border-inline-start-color: rgb(var(--color-muted) / 35%);
+  flex-shrink: 0;
+}
+
 .s-model-tag-name-text {
   display: block;
   overflow: hidden;

package/src/components/HkModelTag.test.tsx

@@ -126,4 +126,30 @@ describe("HkModelTag", () => {
       c.querySelector(".s-model-tag-group")?.getAttribute("data-expanded"),
     ).toBeNull();
   });
+
+  it("renders the optional rate tail as the third joined segment", () => {
+    const c = mount(tagNode({ model: "gpt-5.5#2", rate: 1.5 }));
+    const group = c.querySelector(".s-model-tag-group");
+    expect(group?.hasAttribute("data-rate")).toBe(true);
+    expect(group?.querySelector(".s-model-tag-rate")?.textContent?.trim()).toBe("×1.5");
+    // The segments read in order: #2, name, rate.
+    expect(group?.textContent?.trim()).toBe("#2gpt-5.5×1.5");
+
+    // Trailing zeros trimmed, one decimal at most.
+    const whole = mount(tagNode({ model: "gpt-5.5#2", rate: 2 }));
+    expect(
+      whole.querySelector(".s-model-tag-rate")?.textContent?.trim(),
+    ).toBe("×2");
+    const tenth = mount(tagNode({ model: "gpt-5.5#2", rate: 0.1 }));
+    expect(
+      tenth.querySelector(".s-model-tag-rate")?.textContent?.trim(),
+    ).toBe("×0.1");
+  });
+
+  it("keeps the classic two-part pill untouched without a rate", () => {
+    const c = mount(tagNode({ model: "gpt-5.5#2" }));
+    const group = c.querySelector(".s-model-tag-group");
+    expect(group?.getAttribute("data-rate")).toBeNull();
+    expect(group?.querySelector(".s-model-tag-rate")).toBeNull();
+  });
 });

package/src/components/HkModelTag.tsx

@@ -23,6 +23,10 @@ const ModelPill = defineComponent({
     model: { type: String, required: true },
     /** Render the name without truncation (used inside the hover card). */
     expanded: { type: Boolean, default: false },
+    /** Optional third segment — the billing rate tail (`×1.5`), as the
+     *  model-group capsule's multiplier (2026-10-11 direction). Absent
+     *  keeps the classic two-part pill untouched. */
+    rate: { type: Number, default: undefined },
   },
   setup(props) {
     // Split inside the render closure: capturing `splitModelId(props.model)`
@@ -32,10 +36,19 @@ const ModelPill = defineComponent({
     // stale, untagged pill.
     return () => {
       const { base, tag } = splitModelId(props.model);
+      // ×1.5 / ×2 / ×0.1 — trailing zeros trimmed, one decimal at most
+      // (the editor offers tenths; hundredths would crowd the pill).
+      // Number.isFinite guards the catalog edge: a NaN/Infinity leaking
+      // in would otherwise render "×NaN" (R1 F3).
+      const rateText =
+        props.rate != null && Number.isFinite(props.rate)
+          ? `×${Number(props.rate.toFixed(1)).toString()}`
+          : null;
       return (
         <span
           class="s-model-tag-group"
           data-expanded={props.expanded || undefined}
+          data-rate={rateText != null || undefined}
         >
           {tag && (
             <HBadge variant="primary" size="sm" mono pill={false} class="s-model-tag-num">
@@ -45,6 +58,11 @@ const ModelPill = defineComponent({
           <HBadge variant="muted" size="sm" mono pill={false} class="s-model-tag-name">
             <span class="s-model-tag-name-text">{base}</span>
           </HBadge>
+          {rateText != null && (
+            <HBadge variant="success" size="sm" mono pill={false} class="s-model-tag-rate">
+              {rateText}
+            </HBadge>
+          )}
         </span>
       );
     };
@@ -57,6 +75,8 @@ const ModelCard = defineComponent({
   props: {
     model: { type: String, required: true },
     meta: { type: Object as PropType<HModelMeta | undefined>, default: undefined },
+    /** Billing-rate tail passthrough (see ModelPill). */
+    rate: { type: Number, default: undefined },
     currency: { type: String, default: "$" },
   },
   setup(props) {
@@ -99,7 +119,7 @@ const ModelCard = defineComponent({
       return (
         <div class="s-model-card">
           <div class="s-model-card-title">
-            <ModelPill model={props.model} expanded />
+            <ModelPill model={props.model} expanded rate={props.rate} />
           </div>
           {rows.length > 0 && (
             <div class="s-model-card-stats">
@@ -149,6 +169,8 @@ export const HkModelTag = defineComponent({
     /** Per-instance catalog override. */
     catalog: { type: Object as PropType<HModelCatalog | undefined>, default: undefined },
     currency: { type: String, default: "$" },
+    /** Optional billing-rate tail on the pill (`×1.5`); see ModelPill. */
+    rate: { type: Number, default: undefined },
   },
   setup(props) {
     const anchorRef = ref<HTMLElement | null>(null);
@@ -175,7 +197,7 @@ export const HkModelTag = defineComponent({
         onMouseenter={onEnter}
         onMouseleave={onLeave}
       >
-        <ModelPill model={props.model} />
+        <ModelPill model={props.model} rate={props.rate} />
         <HPopover
           modelValue={open.value}
           onUpdate:modelValue={(v: boolean) => { open.value = v; }}

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));
+}