@celestia-island/hikari 0.55.89 → 0.55.91

package/package.json

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

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

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+/** Extract one rule's body with nesting-aware brace matching. */
+function ruleBody(css: string, selector: string): string {
+  const start = css.indexOf(`${selector} {`);
+  expect(start, `rule ${selector} present`).toBeGreaterThanOrEqual(0);
+  const open = css.indexOf("{", start);
+  let depth = 0;
+  for (let i = open; i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") {
+      depth--;
+      if (depth === 0) return css.slice(open + 1, i);
+    }
+  }
+  throw new Error(`unbalanced braces in ${selector}`);
+}
+
+describe("HkErrorLanding inline contract", () => {
+  const css = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
+  const inline = ruleBody(css, ".hk-error-landing.is-inline");
+
+  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("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
+    // page-grade 2.25rem (desktop) / 1.75rem (≤480px media) top.
+    expect(card).toContain("padding: var(--space-16, 1rem) ");
+    expect(card).not.toContain("2.25rem");
+  });
+});

package/src/components/HkErrorLanding.scss

@@ -260,11 +260,26 @@
 
 // Inline variant: the same card without the viewport takeover — used when
 // HkErrorBoundary captures a crash inside a pane and swaps in the landing
-// in-place instead of covering the whole screen.
+// 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;
-  padding: var(--space-20, 1.25rem) var(--space-12, 0.75rem);
+  // 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.
+  padding: 0 var(--space-12, 0.75rem);
   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.
+  .hk-error-landing__card {
+    padding: var(--space-16, 1rem) var(--space-28, 1.75rem) var(--space-24, 1.5rem);
+  }
 }
 
 @media (max-width: 480px) {

package/src/components/HkIconButton.test.tsx

@@ -1,4 +1,7 @@
 import { afterEach, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { createApp, defineComponent, h } from "vue";
 
 import HkIconButton from "./HkIconButton";
@@ -118,3 +121,33 @@ describe("HkIconButton", () => {
     expect(propAndSlot.querySelector(".hk-icon")).toBeNull();
   });
 });
+
+/**
+ * Static pin for the header-chrome glyph step (user report 2026-09-29:
+ * the search / refresh / filter glyphs in the top-right clusters read
+ * visibly smaller than HkThemeToggle's sun beside them). The `.svg` rule
+ * in HkIconButton.scss forces ANY slotted glyph to
+ * `--hi-icon-button-icon-size`, so the 28 step must map that var to the
+ * sm token (16px — the theme toggle's own glyph size). happy-dom has no
+ * cascade here that a DOM test could measure, so — tokenInventory style —
+ * the declarations themselves are the contract; a deliberate remap is
+ * expected to update this file.
+ */
+describe("HkIconButton glyph step", () => {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const vars = readFileSync(join(here, "HkIconButtonVars.scss"), "utf8");
+
+  it("maps the 28 header step to the sm glyph (16px), matching the theme toggle", () => {
+    const block = vars.slice(vars.indexOf(".hk-icon-button-28"), vars.indexOf(".hk-icon-button-32"));
+    expect(block).toContain("--hi-icon-button-size: 28px;");
+    expect(block).toContain("--hi-icon-button-icon-size: var(--hi-icon-size-sm);");
+    expect(block).not.toContain("var(--hi-icon-size-xs)");
+  });
+
+  it("keeps the dense steps (16/24) on the xs glyph", () => {
+    const block16 = vars.slice(vars.indexOf(".hk-icon-button-16"), vars.indexOf(".hk-icon-button-24"));
+    const block24 = vars.slice(vars.indexOf(".hk-icon-button-24"), vars.indexOf(".hk-icon-button-28"));
+    expect(block16).toContain("var(--hi-icon-size-xs)");
+    expect(block24).toContain("var(--hi-icon-size-xs)");
+  });
+});

package/src/components/HkIconButtonVars.scss

@@ -74,7 +74,15 @@
 
 .hk-icon-button-28 {
   --hi-icon-button-size: 28px;
-  --hi-icon-button-icon-size: var(--hi-icon-size-xs);
+  /* The header-chrome step carries the sm glyph (16px): its consumers are
+   * the header clusters — global search, the pages' refresh, the filter
+   * trigger — whose visual sibling is HkThemeToggle's own trigger buttons
+   * (28px boxes with direct 16px lucide glyphs). The xs mapping (12px)
+   * rendered those glyphs visibly smaller than the sun beside them
+   * (user report 2026-09-29: 不像一个尺寸的图标按钮) — the `.svg` rule
+   * in HkIconButton.scss forces ANY slotted glyph to this var, so the
+   * slot's size-16 attribute never reached the screen. */
+  --hi-icon-button-icon-size: var(--hi-icon-size-sm);
 }
 
 .hk-icon-button-32 {