@celestia-island/hikari 0.31.0 → 0.31.1

package/package.json

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

package/src/components/HkAuthMethodList.scss

@@ -23,13 +23,23 @@
   background: var(--hi-color-border, #ddd);
 }
 
+/* The component's own wrapper is `display: contents` (measurement anchor +
+   CSS-var inheritance) — layout-wise the buttons remain direct children of
+   HkAuthCard's `.s-auth-methods` slot container. */
+.s-auth-methods-list {
+  display: contents;
+}
+
 /* Fixed icon + label columns: the two spans keep the same width on every
    row, so icons and labels align across buttons while each button stays a
    centered hk-btn-block. HkButton has a fragment root, so inbound classes
    don't fall through — scope everything off the `.s-auth-methods`
-   container instead of a button-level class. Apps with longer labels
-   widen the label column via `--auth-methods-label-width`. */
-.s-auth-methods > .hk-btn .s-auth-methods-icon {
+   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. */
+.s-auth-methods .hk-btn .s-auth-methods-icon {
   width: 20px;
   flex: none;
   display: inline-flex;
@@ -37,7 +47,7 @@
   justify-content: center;
 }
 
-.s-auth-methods > .hk-btn .s-auth-methods-label {
+.s-auth-methods .hk-btn .s-auth-methods-label {
   width: var(--auth-methods-label-width, 8em);
   flex: none;
   text-align: start;

package/src/components/HkAuthMethodList.test.tsx

@@ -29,13 +29,14 @@ const methods = [
 describe("HkAuthMethodList", () => {
   it("renders one fixed-column button per method and an optional divider", () => {
     // The card's `methods` slot owns the `.s-auth-methods` container —
-    // reproduce that context here (the component itself is a fragment).
+    // reproduce that context here (the buttons are layout children of it
+    // through the component's display:contents wrapper).
     const c = mount(
       h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { divider: "其他方式登录", methods })),
     );
     const divider = c.querySelector(".s-auth-methods-divider");
     expect(divider?.textContent).toContain("其他方式登录");
-    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods > .hk-btn");
+    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .hk-btn");
     expect(buttons.length).toBe(2);
     const labels = [...buttons].map(
       (b) => b.querySelector<HTMLElement>(".s-auth-methods-label")?.textContent,
@@ -57,9 +58,41 @@ describe("HkAuthMethodList", () => {
         },
       })),
     );
-    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods > .hk-btn");
+    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .hk-btn");
     buttons[1]!.click();
     await nextTick();
     expect(picked).toBe("linuxdo");
   });
+
+  it("publishes the widest label text 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).
+    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).
+    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;
+  });
+
+  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.
+    expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("");
+  });
 });

package/src/components/HkAuthMethodList.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import HkButton from "./HkButton";
 import "./HkAuthMethodList.scss";
 
@@ -7,15 +7,20 @@ import "./HkAuthMethodList.scss";
  * auth cards (the ERP login's provider-button grammar, componentized).
  *
  * Every button renders [icon | label] with a FIXED icon column and a FIXED
- * label column (CSS var `--auth-methods-label-width`, default 8em), so the
- * icons and the label text start at the same x on every row regardless of
- * label length; because every content block is then the same width, the
- * row can stay centered like any HkButton without the columns drifting.
+ * label column, so the icons and the label text start at the same x on
+ * every row regardless of label length; because every content block is
+ * then the same width, the row can stay centered like any HkButton
+ * without the columns drifting.
  *
- * Render it through HkAuthCard's `methods` slot: the card owns the
- * full-width block layout and the vertical rhythm, and the footer's
- * checkbox rows keep their centered-group behavior instead of being
- * dragged full width with the buttons.
+ * 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 wrapper is `display: contents`: the component keeps a DOM node for
+ * measurement and CSS-var inheritance while the buttons remain direct
+ * layout children of HkAuthCard's `.s-auth-methods` slot container.
  */
 export default defineComponent({
   name: "HkAuthMethodList",
@@ -45,9 +50,45 @@ export default defineComponent({
     /** A method button was clicked. */
     select: (_key: string) => true,
   },
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
+    const listRef = ref<HTMLDivElement | null>(null);
+
+    /** Measure the widest label text and publish it as the label-column
+     *  width custom property. `scrollWidth` reports the text width even
+     *  while the fixed column clips it, so this is correct both before
+     *  the variable is first set and after any label change. */
+    function measure() {
+      const root = listRef.value;
+      if (!root) return;
+      let widest = 0;
+      for (const label of root.querySelectorAll<HTMLElement>(".s-auth-methods-label")) {
+        widest = Math.max(widest, label.scrollWidth);
+      }
+      if (widest > 0) root.style.setProperty("--auth-methods-label-width", `${widest}px`);
+    }
+
+    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) {
+        void document.fonts.ready.then(measure).catch(() => {});
+      }
+    });
+    onBeforeUnmount(() => {
+      listRef.value?.style.removeProperty("--auth-methods-label-width");
+    });
+    watch(
+      () => props.methods.map((method) => method.label).join("\u0000"),
+      () => {
+        void nextTick(measure);
+      },
+    );
+
+    expose({ measure });
+
     return () => (
-      <>
+      <div class="s-auth-methods-list" ref={listRef}>
         {props.divider && (
           <div class="s-auth-methods-divider">
             <span>{props.divider}</span>
@@ -66,7 +107,7 @@ export default defineComponent({
             <span class="s-auth-methods-label">{method.label}</span>
           </HkButton>
         ))}
-      </>
+      </div>
     );
   },
 });

package/src/components/HkImageViewer.tsx

@@ -340,9 +340,11 @@ export default defineComponent({
             zoomPercent={zoomPercent.value}
             canZoomIn={canZoomIn.value}
             canZoomOut={canZoomOut.value}
+            zoomStepPercent={5}
+            minZoomPercent={Math.max(1, Math.round(fit.value * 100))}
+            maxZoomPercent={Math.round(MAX_ZOOM * 100)}
             showReset
-            onZoomIn={() => setZoom(zoom.value * 1.2)}
-            onZoomOut={() => setZoom(zoom.value / 1.2)}
+            onZoomTo={(percent: number) => setZoom(percent / 100)}
             onReset={resetView}
             onPanDelta={onPanDelta}
           />

package/src/components/HkMinimap.tsx

@@ -31,9 +31,9 @@ export interface MinimapRect {
  * `transform-origin: 0 0` — the same model HImageViewer uses.
  *
  * The zoom bar is governed by default: ±5% fixed steps clamped to the
- * 50–200% range, with each press emitting `zoomTo` (clamped target
- * percent) alongside the legacy `zoomIn`/`zoomOut`. Consumers with a
- * wider native camera range override `minZoomPercent`/`maxZoomPercent`.
+ * 50–200% range, each press emitting `zoomTo` with the clamped target
+ * percent. Consumers with a wider native camera range override
+ * `minZoomPercent`/`maxZoomPercent`.
  */
 export default defineComponent({
   name: "HkMinimap",
@@ -66,17 +66,13 @@ export default defineComponent({
      *  when a reset handler was wired up). */
     showReset: { type: Boolean, default: false },
     /** Optional prop-callback surface (alternative to the emits). */
-    onZoomIn: { type: Function as PropType<() => void>, default: undefined },
-    onZoomOut: { type: Function as PropType<() => void>, default: undefined },
     onZoomTo: { type: Function as PropType<(percent: number) => void>, default: undefined },
     onReset: { type: Function as PropType<() => void>, default: undefined },
     onPanDelta: { type: Function as PropType<(dx: number, dy: number) => void>, default: undefined },
   },
   emits: {
-    zoomIn: () => true,
-    zoomOut: () => true,
     /** Fixed-step zoom request carrying the clamped target percent —
-     *  consumers that can animate their camera should prefer this. */
+     *  consumers animate their camera toward this target. */
     zoomTo: (_percent: number) => true,
     reset: () => true,
     panDelta: (_dx: number, _dy: number) => true,
@@ -132,14 +128,12 @@ export default defineComponent({
       props.canZoomOut && props.zoomPercent > props.minZoomPercent + 1e-9);
 
     /** Step the zoom bar by the fixed increment, clamped to [min, max];
-     *  emits the legacy zoomIn/zoomOut plus a `zoomTo` carrying the exact
-     *  clamped target percent. No-op (and stays disabled) at the bounds. */
+     *  emits `zoomTo` with the exact clamped target percent. No-op (and
+     *  stays disabled) at the bounds. */
     function stepZoom(dir: number) {
       const raw = props.zoomPercent + dir * props.zoomStepPercent;
       const next = Math.min(props.maxZoomPercent, Math.max(props.minZoomPercent, raw));
       if (Math.abs(next - props.zoomPercent) < 1e-9) return;
-      if (dir > 0) emit("zoomIn");
-      else emit("zoomOut");
       emit("zoomTo", next);
     }