@celestia-island/hikari 0.55.342 → 0.55.343

package/package.json

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

package/src/components/HkMinimap.test.tsx

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

package/src/components/HkSlider.scss

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

package/src/components/HkSlider.test.tsx

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

package/src/components/HkSlider.tsx

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

package/src/components/HkSliderField.test.tsx

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

package/src/components/HkTokenInput.scss

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

package/src/components/HkTokenInput.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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