@celestia-island/hikari 0.55.106 → 0.55.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.106",
+  "version": "0.55.108",
   "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

@@ -44,7 +44,18 @@
    text and toolbar rows. Font size does NOT scale with the size
    (2026-08-30 user report, Material-Design convention): md and lg share
    --text-base and lg only grows padding/min-height for a larger touch
-   target; sm keeps its compact --text-xs. */
+   target; sm keeps its compact --text-xs. xs (2026-10-02, connection
+   popover action row) shrinks the footprint further for inline popover
+   footers: same --text-xs, tighter padding, 1.375rem min-height, and a
+   13px glyph (HkButton.tsx scales icon/suffix with the size) inside a
+   0.8125rem fixed box so the square-glyph contract keeps its rhythm at
+   the smaller scale. */
+
+.hk-btn-xs {
+  padding: var(--space-4) var(--space-8);
+  font-size: var(--text-xs);
+  min-height: 1.375rem;
+}
 
 .hk-btn-sm {
   padding: var(--space-6) var(--space-12);
@@ -73,6 +84,19 @@
    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-xs .hk-btn-icon,
+.hk-btn-xs .hk-btn-suffix {
+  inline-size: 0.8125rem;
+  block-size: 0.8125rem;
+
+  /* HIcon's smallest span is 1rem; the box scales the span (and the svg
+     fills the span), so the glyph lands at 13px inside the 22px button. */
+  .hk-icon {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}
+
 .hk-btn-icon,
 .hk-btn-suffix {
   display: inline-flex;
@@ -121,6 +145,10 @@
   box-sizing: border-box;
 }
 
+.hk-btn-xs.hk-btn-icon-only {
+  width: 1.375rem;
+}
+
 .hk-btn-sm.hk-btn-icon-only {
   width: 1.75rem;
 }

package/src/components/HkButton.test.tsx

@@ -62,6 +62,15 @@ describe("HkButton class mapping", () => {
     expect(cls).not.toContain("hk-btn-md");
   });
 
+  it("maps the xs size with its leading icon box", () => {
+    const xs = mount(h(HkButton, { size: "xs", icon: "RotateCw" }, () => "Reconnect"));
+    const xsBtn = button(xs);
+    expect(xsBtn.className).toContain("hk-btn-xs");
+    const box = xsBtn.querySelector(".hk-btn-icon");
+    expect(box, "xs renders the leading icon box").toBeTruthy();
+    expect(box!.querySelector(".hk-icon"), "HIcon span renders").toBeTruthy();
+  });
+
   it("adds the block modifier only when block is set", () => {
     const blocked = mount(h(HkButton, { block: true }, () => "wide"));
     expect(button(blocked).className).toContain("hk-btn-block");
@@ -207,8 +216,16 @@ describe("HkButton icon-only SCSS contract", () => {
     expect(rule).toContain("width: 100%");
   });
 
+  it("shrinks the xs glyph box and scales the HIcon span with it", () => {
+    const rule = scss.match(/\.hk-btn-xs \.hk-btn-icon,\n\.hk-btn-xs \.hk-btn-suffix\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "xs glyph-box rule must exist").toBeTruthy();
+    expect(rule).toContain("inline-size: 0.8125rem");
+    expect(rule).toContain("inline-size: 100%");
+  });
+
   it("locks each size variant width to its min-height", () => {
     const cases: Array<[string, string]> = [
+      ["xs", "1.375rem"],
       ["sm", "1.75rem"],
       ["md", "2.5rem"],
       ["lg", "2.75rem"],

package/src/components/HkButton.tsx

@@ -11,7 +11,7 @@ export type ButtonVariant =
   | "ghost"
   | "danger"
   | "outline";
-export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
 
 export default defineComponent({
   name: "HkButton",

package/src/components/HkErrorLanding.inline.contract.test.ts

@@ -1,13 +1,14 @@
 /**
- * Source contract: the inline landing sits FLUSH under its context. The
- * `.is-inline` variant must drop the viewport takeover's block-axis
- * padding entirely (the host pane already pads and a sibling header sits
- * immediately above — the old 1.25rem top padding floated the card a
- * full padding-frame below its context) and slim the card's page-grade
- * top padding (2.25rem desktop / 1.75rem mobile) to one space step. The
- * horizontal inset stays so a narrow pane never seats the card
- * edge-to-edge. A class-name test cannot see this; the compiled contract
- * lives here.
+ * Source contract: the inline landing CENTERS inside its host region. The
+ * `.is-inline` variant must fill the host container's height (so the base
+ * centering seats the card mid-container — the inline twin of the page
+ * variant centering in the viewport), carry no block-axis padding (the
+ * #695 lesson: a hardcoded top inset read as "floating too low" under a
+ * sibling header), and center the card via overflow-safe auto margins
+ * (collapse to top-anchored when the card is taller than the container,
+ * instead of a both-edge clip nothing can scroll to). The horizontal
+ * inset stays so a narrow pane never seats the card edge-to-edge. A
+ * class-name test cannot see this; the compiled contract lives here.
  */
 import { describe, expect, it } from "vitest";
 import { readFileSync } from "node:fs";
@@ -16,7 +17,32 @@ import { fileURLToPath } from "node:url";
 
 const here = dirname(fileURLToPath(import.meta.url));
 
-/** Extract one rule's body with nesting-aware brace matching. */
+/** Strip SCSS comments — line and block form — so a contract literal can
+ *  only ever be satisfied by a REAL declaration, never by prose: a
+ *  commented-out `margin: auto` (line-comment mutation found in R1,
+ *  block-comment in R2) would otherwise false-green `toContain`. A `//`
+ *  preceded by `:` is a URL scheme (`https://`) and survives. Block
+ *  comments go first so a `//` hidden inside them can't leak through. */
+function stripComments(css: string): string {
+  return stripLineComments(css.replace(/\/\*[\s\S]*?\*\//g, ""));
+}
+
+/** Strip SCSS `//` line comments; `://` URL schemes survive. */
+function stripLineComments(css: string): string {
+  return css
+    .split("\n")
+    .map((line) => {
+      let i = line.indexOf("//");
+      while (i !== -1 && line[i - 1] === ":") {
+        i = line.indexOf("//", i + 1);
+      }
+      return i === -1 ? line : line.slice(0, i);
+    })
+    .join("\n");
+}
+
+/** Extract one rule's body with nesting-aware brace matching, prose
+ *  stripped. */
 function ruleBody(css: string, selector: string): string {
   const start = css.indexOf(`${selector} {`);
   expect(start, `rule ${selector} present`).toBeGreaterThanOrEqual(0);
@@ -26,23 +52,57 @@ function ruleBody(css: string, selector: string): string {
     if (css[i] === "{") depth++;
     else if (css[i] === "}") {
       depth--;
-      if (depth === 0) return css.slice(open + 1, i);
+      if (depth === 0) return stripComments(css.slice(open + 1, i));
     }
   }
   throw new Error(`unbalanced braces in ${selector}`);
 }
 
+describe("contract-test comment stripping", () => {
+  it("strips comments (positive control — the guard must be able to bite)", () => {
+    // Without this control a broken stripper would silently turn every
+    // assertion above into prose-matching; 0-strip must be LOUD.
+    const dirty = "// min-height: 100%\n  min-height: 100%;";
+    expect(stripComments(dirty)).not.toContain("//");
+    expect(stripComments(dirty).trim()).toBe("min-height: 100%;");
+    // Block comments are prose too (the R2 mutation shape: a commented-out
+    // declaration must never satisfy the contract).
+    const blocked = "margin: initial; /* margin: auto */";
+    expect(stripComments(blocked)).toContain("margin: initial;");
+    expect(stripComments(blocked)).not.toContain("margin: auto");
+    // URL schemes survive intact.
+    expect(stripComments('icon: url("https://cdn.example/x.svg");')).toContain("://");
+  });
+});
+
 describe("HkErrorLanding inline contract", () => {
   const css = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
   const inline = ruleBody(css, ".hk-error-landing.is-inline");
 
+  it("fills the host region's height so the shared centering can seat the card", () => {
+    // `min-height: 0` collapsed the root to its content height, which
+    // silently disabled the base align/justify centering and glued the
+    // card to the container's top edge.
+    expect(inline).toContain("min-height: 100%");
+    expect(inline).not.toContain("min-height: 0");
+  });
+
   it("drops the block-axis padding entirely and keeps only the horizontal inset", () => {
-    expect(inline).toContain("min-height: 0");
     expect(inline).toContain("padding: 0 var(--space-12, 0.75rem)");
     // The takeover padding must not survive in any form.
     expect(inline).not.toContain("1.25rem");
   });
 
+  it("centers the card through overflow-safe auto margins", () => {
+    const card = ruleBody(inline, ".hk-error-landing__card");
+    // Auto margins absorb positive free space (centering) and collapse to
+    // 0 on overflow (no both-edge clip).
+    expect(card).toContain("margin: auto");
+    // The overflow anchor: with the margins collapsed the card must pin
+    // to the container's TOP edge — reachable — never float mid-clip.
+    expect(inline).toContain("align-items: flex-start");
+  });
+
   it("slims the card's top padding below the page-grade value", () => {
     const card = ruleBody(inline, ".hk-error-landing__card");
     // The shorthand's block-start value IS the slim step, not the
@@ -63,3 +123,20 @@ describe("HkErrorLanding multiline headline contract", () => {
     expect(title).toContain("overflow-wrap: anywhere");
   });
 });
+
+describe("HkErrorLanding page-variant seating contract", () => {
+  const css = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
+  const base = ruleBody(css, ".hk-error-landing");
+
+  it("fills the viewport and centers the card in it", () => {
+    // The page variant's whole seating model: a full-viewport backdrop
+    // with the card centered in it (standalone error pages, the chest
+    // overlay, the reporting takeover all ride this rule). R2 flipped
+    // align-items to flex-end and every landing test stayed green — this
+    // pin closes that hole.
+    expect(base).toContain("min-height: 100vh");
+    expect(base).toContain("min-height: 100dvh");
+    expect(base).toContain("align-items: center");
+    expect(base).toContain("justify-content: center");
+  });
+});

package/src/components/HkErrorLanding.scss

@@ -276,21 +276,42 @@
 // in-place instead of covering the whole screen, or when a host view
 // renders it as its failed content region right under a sibling header.
 .hk-error-landing.is-inline {
-  min-height: 0;
-  // In-pane, the host region already pads and a sibling header usually
-  // sits immediately above: the takeover's block-axis padding floated
-  // the card a full padding-frame below its context. The vertical
-  // padding is dropped entirely (the card's own slimmer top padding
-  // below supplies the breathing room); the horizontal inset stays so a
-  // narrow pane never seats the card edge-to-edge.
+  // Fill the HOST REGION's height so the base centering (the align/justify
+  // center on .hk-error-landing — this element matches that selector too,
+  // which is how the centering reaches the inline variant) seats the card
+  // in the middle
+  // of whatever container it landed in — the inline twin of the page
+  // variant centering in the viewport. The old zero min-height collapsed
+  // the root to its content height, which silently disabled that
+  // centering and glued the card to the container's top edge; the #695
+  // padding removal traded "a padding-frame too low" for "flush against
+  // the header". Both were symptoms of spacing-by-inset; centering in the
+  // actual container fixes both hosts at once. A host whose height is
+  // auto (a growing content column, not a framed pane) resolves the
+  // percentage to nothing and keeps a content-sized, top-seated landing
+  // — centering applies exactly as far as the container can express it.
+  min-height: 100%;
+  // The horizontal inset stays so a narrow pane never seats the card
+  // edge-to-edge. No block-axis padding: the gap above/below the card is
+  // the centering's job now — a hardcoded top inset is exactly what read
+  // as "floating too low" under a sibling header in #695.
   padding: 0 var(--space-12, 0.75rem);
+  // Explicit overflow anchor: with the card's auto margins below
+  // collapsed there is no free space left to center in, and the alignment
+  // that then applies must be the START edge — reachable top, clip only
+  // at the unreachable bottom. Spelled out (and pinned by the contract
+  // test) rather than left emergent from the inherited center; with free
+  // space the margins absorb it before alignment ever applies, so this
+  // line only ever shows on overflow.
+  align-items: flex-start;
   background: transparent;
 
-  // The card's page-grade top padding (2.25rem desktop / 1.75rem mobile)
-  // reads as a detached float inside a pane — slim it to one space step.
-  // Specificity (0,3,0) outranks the ≤480px media rule (0,1,0), so this
-  // holds on phones too.
+  // Safe centering: auto margins center the card on both axes while free
+  // space exists and collapse to 0 when it doesn't (the overflow case
+  // anchored by align-items above). Specificity (0,3,0) also keeps the
+  // slim padding below outranking the ≤480px media rule (0,1,0).
   .hk-error-landing__card {
+    margin: auto;
     padding: var(--space-16, 1rem) var(--space-28, 1.75rem) var(--space-24, 1.5rem);
   }
 }

package/src/components/HkErrorLanding.tsx

@@ -25,8 +25,10 @@ export type HErrorTone = "error" | "warning" | "info";
  * Layout variant of the landing.
  * - `page` (default): owns a full-viewport backdrop — for overlays and
  *   standalone error pages.
- * - `inline`: drops the backdrop and viewport height so the same card can
- *   live inside a pane captured by HkErrorBoundary.
+ * - `inline`: drops the backdrop and fills its host region's height
+ *   instead of the viewport, so the same card centers inside whatever
+ *   pane captured it (HkErrorBoundary) or whatever content region a host
+ *   view hands it.
  */
 export type HErrorLandingVariant = "page" | "inline";
 

package/src/components/HkStatusBar.test.tsx

@@ -345,6 +345,9 @@ describe("HkStatusBar", () => {
     expect(row, "actions row renders").toBeTruthy();
     const button = row.querySelector<HTMLButtonElement>("button")!;
     expect(button.textContent).toContain("Reconnect now");
+    // 2026-10-02 user direction: small buttons with a leading glyph.
+    expect(button.className).toContain("hk-btn-xs");
+    expect(button.querySelector(".hk-btn-icon svg"), "leading glyph renders").toBeTruthy();
     expect(panel.textContent).not.toContain("Click to retry");
     button.click();
     expect(onRetry, "popover button click retries").toHaveBeenCalledTimes(1);

package/src/components/HkStatusBar.tsx

@@ -458,7 +458,12 @@ export const HkStatusBar = defineComponent({
                   }}
                 >
                   {showRetryButton && (
-                    <HkButton size="sm" variant="secondary" onClick={onRetryButtonClick}>
+                    <HkButton
+                      size="xs"
+                      variant="secondary"
+                      icon="RotateCw"
+                      onClick={onRetryButtonClick}
+                    >
                       {t("hikari::statusBar.retryNow", "Reconnect now")}
                     </HkButton>
                   )}