@celestia-island/hikari 0.32.0 → 0.32.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",
@@ -32,6 +32,7 @@
       "import": "./src/styles/index.scss"
     },
     "./styles/*": "./src/styles/*",
+    "./theme/*": "./src/theme/*",
     "./components/*": "./src/components/*",
     "./plugins": {
       "import": "./src/plugins/index.ts",

package/src/components/HkAuthMethodList.scss

@@ -35,10 +35,12 @@
    centered hk-btn-block. HkButton has a fragment root, so inbound classes
    don't fall through — scope everything off the `.s-auth-methods`
    container (descendant match: the component wrapper is display:contents).
-   The label column width is MEASURED by the component (widest label text,
-   published as `--auth-methods-label-width` on its wrapper, inherited into
-   the rows); the 8em fallback only covers the pre-measure frame, and apps
-   may still override the var explicitly. */
+   The label column width is MEASURED by the component (widest label text
+   + 1px headroom, published as `--auth-methods-label-width` on its
+   wrapper, inherited into the rows); the `max-content` fallback only
+   covers the pre-measure / un-measurable frame, and apps may still
+   override the var explicitly. Labels are centered within the shared
+   column so every row's text sits on the same vertical center line. */
 .s-auth-methods .hk-btn .s-auth-methods-icon {
   width: 20px;
   flex: none;
@@ -48,9 +50,15 @@
 }
 
 .s-auth-methods .hk-btn .s-auth-methods-label {
-  width: var(--auth-methods-label-width, 8em);
+  width: var(--auth-methods-label-width, max-content);
+  /* Hardened floor: even if the published column were ever stale or too
+     narrow (engine DPR / zoom mismatch), the label can never be clipped —
+     the row just widens to its own text. When the measurement is correct
+     the var already exceeds every label's natural width, so the floor is
+     inert and alignment is preserved. */
+  min-width: max-content;
   flex: none;
-  text-align: start;
+  text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/src/components/HkAuthMethodList.test.tsx

@@ -64,35 +64,36 @@ describe("HkAuthMethodList", () => {
     expect(picked).toBe("linuxdo");
   });
 
-  it("publishes the widest label text as the label-column custom property", async () => {
+  it("publishes the widest label text plus a 1px headroom as the label-column custom property", async () => {
     const c = mount(h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })));
     await nextTick();
     const wrapper = c.querySelector<HTMLElement>(".s-auth-methods-list")!;
     expect(wrapper).toBeTruthy();
-    // Layout engines in test DOM report zero text metrics; stub scrollWidth
-    // on the label spans to a deterministic widest-wins pair (LinuxDo wider).
+    // Layout engines in test DOM report zero text metrics; stub a fractional
+    // getBoundingClientRect width on the label spans so the widest-wins pair
+    // (LinuxDo wider) exercises the ceil+1 headroom instead of the integer
+    // scrollWidth that would previously round a fraction and clip the widest.
     const spans = [...wrapper.querySelectorAll<HTMLElement>(".s-auth-methods-label")];
     expect(spans.length).toBe(2);
-    Object.defineProperty(spans[0]!, "scrollWidth", { configurable: true, value: 61 });
-    Object.defineProperty(spans[1]!, "scrollWidth", { configurable: true, value: 59 });
-    // Trigger the measurement through a fresh label change (watch path).
+    // 61.4 ceil→62 (+1→63) and a shorter 58.0: the published column must
+    // exceed BOTH so the widest label can never sit on the clip boundary.
+    Object.defineProperty(spans[0]!, "getBoundingClientRect", { configurable: true, value: () => ({ width: 58 }) });
+    Object.defineProperty(spans[1]!, "getBoundingClientRect", { configurable: true, value: () => ({ width: 61.4 }) });
     await nextTick();
-    const { app } = mounts[mounts.length - 1]!;
     // Re-run measurement via a re-mount-less route: the component exposes
     // measure() — reach it through the rendered component instance.
     const instance = (wrapper as unknown as { __vueParentComponent?: { exposed?: Record<string, unknown> } })
       .__vueParentComponent?.exposed;
     expect(typeof instance?.measure).toBe("function");
     (instance!.measure as () => void)();
-    expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("61px");
-    void app;
+    expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("63px");
   });
 
   it("leaves the column fallback intact when no text metrics are available", async () => {
     const c = mount(h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })));
     await nextTick();
     const wrapper = c.querySelector<HTMLElement>(".s-auth-methods-list")!;
-    // Zero scrollWidth (no layout) must not publish a 0px column.
+    // Zero text metrics (no layout) must not publish a 0px or a 1px column.
     expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("");
   });
 });

package/src/components/HkAuthMethodList.tsx

@@ -12,11 +12,16 @@ import "./HkAuthMethodList.scss";
  * then the same width, the row can stay centered like any HkButton
  * without the columns drifting.
  *
- * The label column is auto-sized: after mount (and whenever the label set
- * or the document fonts change) the component measures the widest label
- * text and publishes it as `--auth-methods-label-width` on its wrapper,
- * so the aligned text region hugs the longest label instead of a blind
- * hardcoded width. Consumers can still override the var explicitly.
+ * The label column is auto-sized: after mount (and whenever the label set,
+ * the document fonts, the browser zoom, or the container size change) the
+ * component measures the widest label text and publishes it as
+ * `--auth-methods-label-width` on its wrapper, so the aligned text region
+ * hugs the longest label instead of a blind hardcoded width. The measured
+ * fraction is rounded UP with a 1px margin — the column is always strictly
+ * wider than the longest label, so the text can never overflow into an
+ * ellipsis. Labels are centered within that shared column, keeping every
+ * row's text on the same vertical center line. Consumers can still
+ * override the var explicitly.
  *
  * The wrapper is `display: contents`: the component keeps a DOM node for
  * measurement and CSS-var inheritance while the buttons remain direct
@@ -53,12 +58,25 @@ export default defineComponent({
   setup(props, { emit, expose }) {
     const listRef = ref<HTMLDivElement | null>(null);
 
+    let resizeObserver: ResizeObserver | undefined;
+    const onResize = () => void nextTick(measure);
+    const onFontsReady = () => measure();
+
     /** Measure the widest label text and publish it as the label-column
      *  width custom property. Each span is momentarily set to
      *  `max-content` while reading: a plain `scrollWidth` on the fixed
      *  column would report `max(textWidth, columnWidth)` and the column
      *  could never shrink below its fallback. All reads happen inside one
-     *  synchronous task, so no intermediate paint is observable. */
+     *  synchronous task, so no intermediate paint is observable.
+     *
+     *  Precision: the widest width is read as a fractional
+     *  `getBoundingClientRect()` (not the integer `scrollWidth`) and
+     *  rounded UP with a 1px margin before publishing. An integer read can
+     *  round the longest label DOWN (some engines floor it), pinning its
+     *  column exactly on the glyph boundary — then any sub-pixel
+     *  font-metric difference (zoom, DPR, engine) makes that one label
+     *  overflow and render an ellipsis while the shorter rows stay fine.
+     *  The headroom keeps the longest label strictly inside its column. */
     function measure() {
       const root = listRef.value;
       if (!root) return;
@@ -66,22 +84,55 @@ export default defineComponent({
       for (const label of root.querySelectorAll<HTMLElement>(".s-auth-methods-label")) {
         const previous = label.style.width;
         label.style.width = "max-content";
-        widest = Math.max(widest, label.scrollWidth);
+        widest = Math.max(widest, label.getBoundingClientRect().width);
         label.style.width = previous;
       }
-      if (widest > 0) root.style.setProperty("--auth-methods-label-width", `${widest}px`);
+      // Guard: only publish when real text metrics were observed, so a
+      // hidden / zero-size frame keeps the CSS `max-content` fallback
+      // instead of collapsing the column to a clipping 1px.
+      if (widest > 0) {
+        root.style.setProperty("--auth-methods-label-width", `${Math.ceil(widest) + 1}px`);
+      }
+      // Keep observing every rendered row so a layout change (the panel
+      // becoming visible, a container width change) re-measures. Rows are
+      // full-width `.hk-btn-block`, so publishing the column width never
+      // resizes them (no feedback loop into the observer).
+      if (resizeObserver) {
+        for (const button of root.querySelectorAll<HTMLElement>(".hk-btn")) {
+          resizeObserver.observe(button);
+        }
+      }
     }
 
     onMounted(() => {
       void nextTick(measure);
       // Webfonts change text metrics after first paint; re-measure when
       // they finish loading (no-op in environments without document.fonts).
-      if (typeof document !== "undefined" && document.fonts?.ready) {
+      if (typeof document !== "undefined" && document.fonts) {
         void document.fonts.ready.then(measure).catch(() => {});
+        document.fonts.addEventListener?.("loadingdone", onFontsReady);
+      }
+      // Browser zoom and container-width changes reflow the text; without a
+      // re-measure the published column goes stale and the longest label
+      // overflows into the ellipsis. `resize` covers page zoom; the
+      // ResizeObserver covers the panel appearing / the container resizing.
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", onResize);
+        if (!resizeObserver && typeof ResizeObserver !== "undefined") {
+          resizeObserver = new ResizeObserver(onResize);
+        }
       }
     });
     onBeforeUnmount(() => {
       listRef.value?.style.removeProperty("--auth-methods-label-width");
+      resizeObserver?.disconnect();
+      resizeObserver = undefined;
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", onResize);
+      }
+      if (typeof document !== "undefined" && document.fonts) {
+        document.fonts.removeEventListener?.("loadingdone", onFontsReady);
+      }
     });
     watch(
       () => props.methods.map((method) => method.label).join("\u0000"),

package/src/components/HkTokenUsageBadge.scss

@@ -35,6 +35,7 @@
 .s-token-usage-arrow {
   &[data-direction="in"]  { color: rgb(var(--color-warning)); }
   &[data-direction="out"] { color: rgb(var(--color-success)); }
+  &[data-direction="tool"] { color: rgb(var(--color-muted)); }
 }
 
 .s-token-usage-val {
@@ -43,10 +44,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-.s-token-usage-icon-tool {
-  color: rgb(var(--color-muted));
-}
-
 .s-token-usage-duration {
   color: rgb(var(--color-muted));
   opacity: 0.8;

package/src/components/HkTokenUsageBadge.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, type PropType } from "vue";
-import { ArrowDown, ArrowUp } from "lucide-vue-next";
+import { ArrowDown, ArrowLeftRight, ArrowUp } from "lucide-vue-next";
 import { HRollingNumber } from "@celestia-island/hikari";
 
 import { formatTokenCount } from "../utils/format";
@@ -39,7 +39,7 @@ export const HkTokenUsageBadge = defineComponent({
         </span>
         {props.toolCount != null && (
           <span class="s-token-usage-stat">
-            <span class="s-token-usage-icon-tool">⇄</span>
+            <ArrowLeftRight size={props.compact ? 9 : 10} class="s-token-usage-arrow" data-direction="tool" />
             <span class="s-token-usage-val"><HRollingNumber value={props.toolCount} /></span>
           </span>
         )}