@celestia-island/hikari 0.55.106 → 0.55.107

package/package.json

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

@@ -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";