@celestia-island/hikari 0.41.1 → 0.41.3

package/package.json

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

package/src/components/HkButton.scss

@@ -64,6 +64,62 @@
   min-height: 2.75rem;
 }
 
+/* ---- Prefix / suffix icon boxes ---- */
+/* Standard-part contract (2026-09-10 user direction): a button glyph
+   renders inside a FIXED SQUARE box — flex:none so host flex rows can
+   never squeeze it into a squat sliver, centered on both axes so the
+   icon rides the button's vertical midline at any button height, and
+   the box (not the bare svg) owns the rhythm so the glyph keeps a
+   consistent margin from the adjacent label via the button's own gap.
+   The 1rem box matches the 16px glyph HkButton renders for the
+   icon/suffix props. */
+.hk-btn-icon,
+.hk-btn-suffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  line-height: 0;
+
+  svg {
+    display: block;
+  }
+}
+
+/* ---- Icon-only square ---- */
+/* An icon-only HkButton (glyph, no label) occupies a SQUARE footprint
+   by default: padding collapses fully and width locks to the size
+   variant's min-height, so it reads as the same standard square the
+   HIconButton family guarantees. box-sizing is self-declared (house
+   convention — geometry rules never rely on a host-side reset reaching
+   the component): with zero padding the min-height governs the height
+   on every size, an exact square under border-box AND content-box.
+   Hosts may still override with an explicit width when a design
+   genuinely calls for another shape. */
+.hk-btn-icon-only {
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.hk-btn-sm.hk-btn-icon-only {
+  width: 1.75rem;
+}
+
+.hk-btn-md.hk-btn-icon-only {
+  width: 2.5rem;
+}
+
+.hk-btn-lg.hk-btn-icon-only {
+  width: 2.75rem;
+}
+
+/* The first-class block prop wins over the square width. */
+.hk-btn-block.hk-btn-icon-only {
+  width: 100%;
+}
+
 /* ---- Primary ---- */
 
 .hk-btn-primary {

package/src/components/HkButton.test.tsx

@@ -1,8 +1,13 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { createApp, h } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 
 import HkButton from "./HkButton";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 /**
  * HkButton contract tests:
  * - variant / size / block / loading class mapping on the root <button>
@@ -142,6 +147,82 @@ describe("HkButton content slots", () => {
   });
 });
 
+describe("HkButton icon-only square contract", () => {
+  it("flags the icon-only square class for a glyph with no label", () => {
+    const iconOnly = mount(h(HkButton, { icon: "close", ariaLabel: "Close" }));
+    const btn = button(iconOnly);
+    expect(btn.className).toContain("hk-btn-icon-only");
+    expect(iconOnly.querySelector(".hk-btn-icon")).not.toBeNull();
+
+    const suffixOnly = mount(h(HkButton, { suffix: "close", ariaLabel: "Next" }));
+    expect(button(suffixOnly).className).toContain("hk-btn-icon-only");
+
+    // Glyph + text stays a normal text button — no square collapse.
+    const withText = mount(h(HkButton, { icon: "close" }, () => "Close"));
+    expect(button(withText).className).not.toContain("hk-btn-icon-only");
+  });
+
+  it("keeps the square footprint while an icon-only button loads", () => {
+    const c = mount(h(HkButton, { icon: "close", loading: true, ariaLabel: "Busy" }));
+    // The spinner replaces the glyph, but the button still carries no
+    // label — the square footprint must hold through the swap.
+    expect(button(c).className).toContain("hk-btn-icon-only");
+  });
+
+  it("keeps the block class alongside the icon-only square class", () => {
+    // CSS precedence lives in the SCSS contract test below; this pins the
+    // class composition so both rules can actually apply.
+    const c = mount(h(HkButton, { icon: "close", block: true, ariaLabel: "Go" }));
+    const cls = button(c).className;
+    expect(cls).toContain("hk-btn-block");
+    expect(cls).toContain("hk-btn-icon-only");
+  });
+
+  it("does not square-collapse when a shortcut chip rides along", () => {
+    // The HKbd chip is an extra flex child — the fixed square width would
+    // visibly clip it, so icon + shortcut stays a padded button.
+    const c = mount(h(HkButton, { icon: "close", shortcut: "Ctrl+W", ariaLabel: "Close" }));
+    expect(button(c).className).not.toContain("hk-btn-icon-only");
+  });
+});
+
+// SCSS geometry contract (house pattern, cf. HkNumberInput.affix.test.ts):
+// the square is a CSS fact — padding fully collapsed + self-declared
+// border-box (survives hosts without a reset) + the block prop winning
+// over the square width. Textual assertions because happy-dom does not
+// lay out.
+describe("HkButton icon-only SCSS contract", () => {
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+
+  it("self-declares the collapsed square geometry", () => {
+    const rule = scss.match(/\.hk-btn-icon-only\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "icon-only rule must exist").toBeTruthy();
+    expect(rule).toContain("padding: 0");
+    expect(rule).toContain("box-sizing: border-box");
+  });
+
+  it("lets the block prop win over the square width", () => {
+    const rule = scss.match(/\.hk-btn-block\.hk-btn-icon-only\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "block override rule must exist").toBeTruthy();
+    expect(rule).toContain("width: 100%");
+  });
+
+  it("locks each size variant width to its min-height", () => {
+    const cases: Array<[string, string]> = [
+      ["sm", "1.75rem"],
+      ["md", "2.5rem"],
+      ["lg", "2.75rem"],
+    ];
+    for (const [size, width] of cases) {
+      const rule = scss.match(new RegExp(`\\.hk-btn-${size}\\.hk-btn-icon-only\\s*{[^}]*}`))?.[0] ?? "";
+      expect(rule, `${size} icon-only rule must exist`).toBeTruthy();
+      expect(rule).toContain(`width: ${width}`);
+      const minH = scss.match(new RegExp(`\\.hk-btn-${size}\\s*{[^}]*}`))?.[0] ?? "";
+      expect(minH).toContain(`min-height: ${width}`);
+    }
+  });
+});
+
 describe("HkButton attr fallthrough (inheritAttrs: false)", () => {
   it("spreads extra attrs and honors an explicit type", () => {
     const c = mount(h(HkButton, { type: "submit", "data-test": "probe" }, () => "Save"));

package/src/components/HkButton.tsx

@@ -42,33 +42,47 @@ export default defineComponent({
       props.shortcut ? "hk-btn-has-shortcut" : "",
     ]);
 
-    return () => (
-      <button
-        {...attrs}
-        type={(attrs.type as "button" | "submit" | "reset") || "button"}
-        disabled={props.disabled || props.loading}
-        class={[buttonClass.value, attrs.class]}
-        style={attrs.style || undefined}
-        aria-label={props.ariaLabel}
-        aria-busy={props.loading || undefined}
-        onClick={(e) => emit("click", e)}
-      >
-        {props.loading ? <HSpinner size="xs" tone="current" /> : null}
-        {!props.loading && props.icon ? (
-          <span class="hk-btn-icon">
-            <HIcon name={props.icon} size={16} />
-          </span>
-        ) : null}
-        {slots.default?.()}
-        {props.suffix ? (
-          <span class="hk-btn-suffix">
-            <HIcon name={props.suffix} size={16} />
-          </span>
-        ) : null}
-        {props.shortcut ? (
-          <HKbd keys={props.shortcut!} size="sm" />
-        ) : null}
-      </button>
-    );
+    return () => {
+      // Icon-only contract (2026-09-10 user direction): a button carrying
+      // just a prefix/suffix glyph and no text collapses to the same
+      // square footprint the HIconButton family guarantees — a bare icon
+      // in a padded text button reads as a squat rectangle otherwise.
+      // Re-evaluated per render, NOT a computed: slots.default is not
+      // reactive, so a cached flag would go stale when a parent toggles
+      // the label slot without touching the icon props. A shortcut chip
+      // is excluded: it renders as an extra flex child the fixed square
+      // width would visibly clip.
+      const iconOnly =
+        !slots.default && Boolean(props.icon || props.suffix) && !props.shortcut;
+
+      return (
+        <button
+          {...attrs}
+          type={(attrs.type as "button" | "submit" | "reset") || "button"}
+          disabled={props.disabled || props.loading}
+          class={[buttonClass.value, iconOnly ? "hk-btn-icon-only" : "", attrs.class]}
+          style={attrs.style || undefined}
+          aria-label={props.ariaLabel}
+          aria-busy={props.loading || undefined}
+          onClick={(e) => emit("click", e)}
+        >
+          {props.loading ? <HSpinner size="xs" tone="current" /> : null}
+          {!props.loading && props.icon ? (
+            <span class="hk-btn-icon">
+              <HIcon name={props.icon} size={16} />
+            </span>
+          ) : null}
+          {slots.default?.()}
+          {props.suffix ? (
+            <span class="hk-btn-suffix">
+              <HIcon name={props.suffix} size={16} />
+            </span>
+          ) : null}
+          {props.shortcut ? (
+            <HKbd keys={props.shortcut!} size="sm" />
+          ) : null}
+        </button>
+      );
+    };
   },
 });

package/src/components/HkIconButton.test.tsx

@@ -102,4 +102,19 @@ describe("HkIconButton", () => {
     const c = mountComp(() => h(HkIconButton, { "aria-label": "probe" }));
     expect(c.querySelector("circle")).not.toBeNull();
   });
+
+  // Named-icon contract (2026-09-10): the icon prop resolves through HIcon
+  // (functional keys ride the host material pack) — slot content still
+  // wins over it, and the placeholder circle only shows with neither.
+  it("renders the icon prop through HIcon, below slot precedence", () => {
+    const propOnly = mountComp(() => h(HkIconButton, { icon: "close", "aria-label": "close" }));
+    expect(propOnly.querySelector(".hk-icon")).not.toBeNull();
+    expect(propOnly.querySelector("circle")).toBeNull();
+
+    const propAndSlot = mountComp(() =>
+      h(HkIconButton, { icon: "close", "aria-label": "close" }, { icon: () => h("span", { class: "slot-probe" }) }),
+    );
+    expect(propAndSlot.querySelector(".slot-probe")).not.toBeNull();
+    expect(propAndSlot.querySelector(".hk-icon")).toBeNull();
+  });
 });

package/src/components/HkIconButton.tsx

@@ -1,6 +1,7 @@
 import { computed, defineComponent, type PropType } from "vue";
 import "./HkIconButton.scss";
 import "./HkIconButtonVars.scss";
+import HIcon from "./HkIcon";
 
 export default defineComponent({
   name: "HkIconButton",
@@ -21,6 +22,14 @@ export default defineComponent({
       `hk-icon-button-${props.variant}`,
     ]);
 
+    // Named-icon contract (2026-09-10 user direction): the icon prop is a
+    // first-class way to draw the glyph — it resolves through HIcon so
+    // functional keys ("close", "back") keep riding the host material-pack
+    // family exactly like the slot composition does. The rendered size is
+    // pinned by --hi-icon-button-icon-size; the HIcon size prop only picks
+    // the matching box class. Slot content still wins over the prop.
+    const glyphSize = computed(() => (props.size >= 32 ? 20 : 16));
+
     return () => (
       <button
         class={cls.value}
@@ -35,11 +44,15 @@ export default defineComponent({
               ? // Natural children usage: <HIconButton><HIcon .../></HIconButton>
                 // renders the child as the icon (unified window-close wave).
                 slots.default()
-              : (
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <circle cx="12" cy="12" r="10" />
-                </svg>
-              )}
+              : props.icon
+                ? (
+                  <HIcon name={props.icon} size={glyphSize.value} />
+                )
+                : (
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                  </svg>
+                )}
         </span>
       </button>
     );

package/src/errorReporting/index.test.tsx

@@ -125,6 +125,48 @@ describe("createErrorReporting", () => {
     expect(overlayHost()).toBeNull();
   });
 
+  it("stays up for cross-origin-masked window errors", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    // Earlier tests in this file spy the same methods without restoring;
+    // clear the accumulated calls so the assertions see only this test's.
+    warn.mockClear();
+    error.mockClear();
+    installPlugin();
+
+    // The masking signature: details withheld (error == null) because the
+    // thrower is foreign-origin code (extension / userscript), message
+    // pinned to "Script error." by every Chromium/Gecko/WebKit build.
+    window.dispatchEvent(new ErrorEvent("error", { message: "Script error.", error: null }));
+    await nextTick();
+    expect(overlayHost()).toBeNull();
+    expect(warn).toHaveBeenCalled();
+    expect(error).not.toHaveBeenCalled();
+
+    // The bare-spelling variant is masked the same way.
+    window.dispatchEvent(new ErrorEvent("error", { message: "Script error", error: null }));
+    await nextTick();
+    expect(overlayHost()).toBeNull();
+
+    clearGlobalError();
+    warn.mockRestore();
+    error.mockRestore();
+  });
+
+  it("still reports detail-less window errors that are not masked", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    installPlugin();
+
+    // error == null with a real message is a script error the browser DID
+    // describe — that stays reportable.
+    window.dispatchEvent(
+      new ErrorEvent("error", { message: "Uncaught SyntaxError: unexpected token", error: null }),
+    );
+    await nextTick();
+    expect(overlayHost()!.querySelector(".hk-error-landing__desc")!.textContent)
+      .toBe("Uncaught SyntaxError: unexpected token");
+  });
+
   it("chains a pre-existing app errorHandler", () => {
     vi.spyOn(console, "error").mockImplementation(() => {});
     const previous = vi.fn();

package/src/errorReporting/index.ts

@@ -87,6 +87,21 @@ function installWindowHooks(options: HkErrorReportingOptions): void {
     const onError = (event: ErrorEvent) => {
       // Resource-load failures never reach here (no capture phase); script
       // errors always carry `error` or at least a `message`.
+      //
+      // Cross-origin-masked script errors arrive as `message: "Script
+      // error."` with a null `error` object: the browser withholds the
+      // details precisely because the thrower is NOT this origin's code
+      // (browser extensions / userscripts are the usual sources). A
+      // synthetic record for one would carry zero actionable detail and a
+      // stack pointing at this very handler, while the takeover rips the
+      // host app away from the user for noise it did not produce — log
+      // and stay up instead (chest demo report 2026-09-10: tapping the
+      // wallpaper preview in a userscript-capable mobile browser nuked
+      // the session with such a masked event).
+      if (event.error == null && /^script error\.?$/i.test(event.message)) {
+        console.warn("[hikari:error-reporting] ignored a cross-origin-masked script error");
+        return;
+      }
       const err = event.error ?? new Error(event.message || "Unknown script error");
       if (reportError(err, "window")) ensureOverlayMounted();
     };