@celestia-island/hikari 0.55.98 → 0.55.99

package/package.json

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

package/src/components/HkErrorLanding.scss

@@ -208,38 +208,32 @@
   user-select: none;
 }
 
-// Content-sized details pane under a hard ceiling: the pane hugs its
-// payload — folding the JSON tree down to one summary row shrinks the
-// frame with it (a ~20vh empty box behind a single line read as dead
-// space, the 2026-10-01 screenshot report) — while a long stack trace
-// still caps at the same ceiling and scrolls inside the frame instead of
-// stretching the card. The ceiling term keeps the 9rem alternative so
-// short viewports (20vh < 9rem) still grant tall stacks nine rem of
-// scroll area; a small payload is allowed BELOW that — hugging is the
-// point. The pane div is the
-// track's positioning context and wraps EXACTLY the scrolling body
-// (useOverlayScrollbar host contract); the family overlay scrollbar's
-// observers re-read thumb geometry on every fold/expand, so the
-// follow-the-content height rides the same update path.
+// Standing-frame details pane: the raw payload keeps a STABLE height —
+// the larger of a 9rem floor and ~20vh — so the frame pre-elevates a
+// little but NEVER breathes with the content. The 2026-10-01
+// content-hugging frame shipped and was reverted the same day after
+// mobile review: folding the tree shrank the whole error card with it
+// and the jumping height read as broken. Folding only changes what is
+// INSIDE the frame; a long stack trace scrolls inside it instead of
+// stretching the card. The 9rem term keeps short viewports (20vh < 9rem)
+// at nine rem of scroll area. The pane div is the track's positioning
+// context and wraps EXACTLY the scrolling body (useOverlayScrollbar
+// host contract); the family overlay scrollbar's observers keep the
+// thumb geometry fresh on fold/expand.
 .hk-error-landing__details-pane {
   position: relative;
   margin-top: var(--space-6, 0.375rem);
-  max-height: max(9rem, 20vh);
-  max-height: max(9rem, 20dvh);
+  height: max(9rem, 20vh);
+  height: max(9rem, 20dvh);
   border: 1px solid rgb(var(--hel-border) / 70%);
   border-radius: var(--radius-md, 10px);
   background: rgb(var(--hel-muted) / 4%);
 }
 
 .hk-error-landing__details-body {
-  // The pane's height IS the body's content height now, so the body can
-  // not reference it (a percentage height against an auto parent is
-  // circular) — instead it inherits the pane's cap and scrolls against
-  // it: small content hugs, tall content clamps at the ceiling and the
-  // overlay scrollbar carries the overflow. A max cap (not a fixed
-  // height) keeps the shrink direction free; overflow != visible is what
-  // lets the block actually clamp.
-  max-height: inherit;
+  // The frame's height is fixed, so the body simply fills it; a fold or
+  // an expand re-renders INSIDE the frame and never moves the card.
+  height: 100%;
   overflow: auto;
   border-radius: inherit;
   padding: var(--space-4, 0.25rem);

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

@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Source contract: the error landing's raw-details pane is a STANDING
+ * frame — the larger of 9rem and ~20vh, fixed. The frame must never
+ * breathe with its content: the 2026-10-01 content-hugging experiment
+ * (max-height cap + inheriting body) shipped and was reverted the same
+ * day after mobile review — folding the tree shrank the whole error card
+ * and the jumping height read as broken. These pins keep BOTH regression
+ * classes out: the breathing class (max-height instead of height on the
+ * pane, an inheriting/max-capped body) and the late-re-declaration class
+ * (a later same-file override re-pinning either box).
+ */
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
+
+describe("HkErrorLanding standing frame contract", () => {
+  const paneAt = scss.indexOf(".hk-error-landing__details-pane {");
+  const bodyAt = scss.indexOf(".hk-error-landing__details-body {");
+
+  it("declares the pane and body exactly once — no late re-declaration", () => {
+    // Whole-file site count: the slice-scoped sweeps below read only up
+    // to the nested tree rule, so a LATER `.hk-error-landing__details-
+    // body { height: ... }` in this file would cascade over the frame
+    // while every slice pin stays green (the R3-M4 mutation class).
+    // Pristine file has exactly two sites (pane + body); the descendant
+    // `.s-tool-json-tree` rule and the label/toggle selectors don't match.
+    // Keep this pin at strict equality — softening it to >= silently
+    // reopens the late-re-declaration class.
+    const sites = scss.match(/\.hk-error-landing__details-(?:pane|body)\s*[,{]/g) ?? [];
+    expect(sites.length, `details pane/body selector sites = ${sites.join(" | ")}`).toBe(2);
+  });
+
+  it("fixes the pane at the standing frame, never a content-driven cap", () => {
+    expect(paneAt, "pane rule present").toBeGreaterThanOrEqual(0);
+    const pane = scss.slice(paneAt, bodyAt);
+    // Both viewport lines: the vh fallback pairs with the dvh override,
+    // matching the family pattern.
+    expect(pane).toContain("height: max(9rem, 20vh)");
+    expect(pane).toContain("height: max(9rem, 20dvh)");
+    // Every height declaration must BE the frame pair — a later `height:
+    // auto` (or an extra one) would let the frame breathe again.
+    const heights = [...pane.matchAll(/^\s*height:.*$/gm)].map((m) => m[0].trim());
+    expect(heights.length, `pane height declarations = ${JSON.stringify(heights)}`).toBe(2);
+    for (const value of heights) expect(value).toMatch(/^height: max\(9rem, 20d?vh\);$/);
+    // A content-driven cap is EXACTLY the reverted breathing frame.
+    expect(pane).not.toContain("max-height:");
+    expect(pane).not.toContain("min-height:");
+  });
+
+  it("fills the fixed frame instead of hugging the payload", () => {
+    expect(bodyAt, "body rule present").toBeGreaterThanOrEqual(0);
+    const nextAt = scss.indexOf(".hk-error-landing__details-body .s-tool-json-tree");
+    // The slice boundary is load-bearing: the sweeps below must never
+    // silently extend to EOF (where unrelated rules would trip them).
+    expect(nextAt, "tree-neutering rule present").toBeGreaterThanOrEqual(0);
+    const body = scss.slice(bodyAt, nextAt);
+    // The body fills the fixed frame — its ONLY height declaration is
+    // the 100% fill; any other height (auto/inherit/max cap) is the
+    // reverted content-hugging regression (the R2-M-D mutation class).
+    const bodyHeights = [...body.matchAll(/^\s*height:.*$/gm)].map((m) => m[0].trim());
+    expect(bodyHeights, `body height declarations = ${JSON.stringify(bodyHeights)}`).toEqual(["height: 100%;"]);
+    expect(body).not.toContain("max-height:");
+    expect(body).not.toContain("min-height:");
+    // Long content still scrolls inside the frame.
+    expect(body).toContain("overflow: auto");
+  });
+
+  it("keeps the mobile dvh override after its vh fallback", () => {
+    // The pair is order-sensitive by convention (the later dvh line wins
+    // where dvh is supported); nothing may reorder or deduplicate it.
+    const vhAt = scss.indexOf("height: max(9rem, 20vh)");
+    const dvhAt = scss.indexOf("height: max(9rem, 20dvh)");
+    expect(vhAt, "vh fallback present").toBeGreaterThanOrEqual(0);
+    expect(dvhAt, "dvh override present").toBeGreaterThan(vhAt);
+  });
+});

package/src/components/HkErrorLanding.test.tsx

@@ -95,8 +95,8 @@ describe("HkErrorLanding", () => {
     const el = mountLanding({
       details: () => h("pre", { class: "s-tool-json-tree" }, "raw"),
     });
-    // No collapse affordance — the pane is always open; its frame now
-    // follows the payload under the ceiling cap (fold contract in scss).
+    // No collapse affordance — the pane is a standing frame; folding
+    // changes only its content (standing-frame contract in scss).
     expect(el.querySelector(".hk-error-landing__details-toggle")).toBeNull();
     expect(el.querySelector(".hk-error-landing__details-label")!.textContent).toContain("Raw error details");
     expect(el.querySelector(".hk-error-landing__details-pane")).not.toBeNull();

package/src/components/HkErrorLanding.tsx

@@ -44,14 +44,14 @@ function normalizeSlotNodes(nodes: VNode | VNode[] | undefined): VNode[] {
  * carrying a tone icon, a (pre-translated) title and description, the wire
  * error code / HTTP status as HkBadge chips above the headline, an
  * always-open raw-details pane (the default slot — hosts render HkJsonTree
- * there) that hugs its payload under a hard ~20vh ceiling carried by the
- * family overlay scrollbar, and an actions slot.
+ * there) with a STABLE standing frame — the larger of 9rem and ~20vh,
+ * carried by the family overlay scrollbar — and an actions slot.
  *
- * The details pane never grows past its frame, but it follows its content
- * downward: folding every JSON node shrinks the pane to the surviving
- * summary row (a standing ~20vh empty box behind one line reads as dead
- * space), and a long stack trace scrolls inside the capped frame instead
- * of stretching the card.
+ * The pane never breathes with its content: folding every JSON node only
+ * changes what renders INSIDE the standing frame, and a long stack trace
+ * scrolls inside it instead of stretching the card. (The 2026-10-01
+ * content-hugging frame was reverted the same day: on mobile the whole
+ * error card visibly jumped between fold states, which read as broken.)
  *
  * The component is presentation-only and route-agnostic: it never touches
  * the router and can be mounted by an SPA overlay, a modal, or a standalone
@@ -111,12 +111,11 @@ export const HkErrorLanding = defineComponent({
 
     const detailsBodyRef = ref<HTMLElement | null>(null);
     let detailsScrollbars: OverlayScrollbarHandle | null = null;
-    // The composable's own viewport ResizeObserver covers the pane cap
-    // moving with the viewport, and a fold/expand DOES resize the
-    // content-sized body — but a fold re-renders HkJsonTree internally
-    // without touching the landing's own render, so observing the CONTENT
-    // element (the tree root) too keeps the thumb geometry re-read on
-    // every fold/expand by whichever observer sees it first.
+    // The pane's viewport box is fixed, so the composable's own viewport
+    // ResizeObserver never fires when the slot content changes size — and
+    // folding a JSON node re-renders HkJsonTree internally, so the landing
+    // itself does not re-render either. Observe the CONTENT element (the
+    // tree root) so every fold/expand re-reads the thumb geometry.
     let contentResizeObserver: ResizeObserver | null = null;
     let observedContent: Element | null = null;
 

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

@@ -1,63 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-
-/**
- * Source contract: the error landing's raw-details pane follows its
- * content under a hard ceiling (2026-10-01 screenshot round). The frame
- * used to stand at a fixed ~20vh — folding the tree then left a tall
- * empty box behind a single summary row. The pane now hugs the payload
- * (max-height cap + inheriting body) while tall stack traces still clamp
- * and scroll inside the frame. These pins keep the standing-frame
- * regression class (any `height:` declaration here re-pins the box) and
- * the unbounded-growth class (a missing body cap) out.
- */
-const here = dirname(fileURLToPath(import.meta.url));
-const scss = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
-
-describe("HkErrorLanding details fold contract", () => {
-  const paneAt = scss.indexOf(".hk-error-landing__details-pane {");
-  const bodyAt = scss.indexOf(".hk-error-landing__details-body {");
-
-  it("declares the pane and body exactly once — no late re-declaration", () => {
-    // Whole-file site count: the slice-scoped sweeps below read only up
-    // to the nested tree rule, so a LATER `.hk-error-landing__details-
-    // body { height: ... }` in this file would cascade over the fold
-    // while every slice pin stays green (R3's M4 mutation proved it).
-    // Pristine file has exactly two sites (pane + body); the descendant
-    // `.s-tool-json-tree` rule and the label/toggle selectors don't match.
-    const sites = scss.match(/\.hk-error-landing__details-(?:pane|body)\s*[,{]/g) ?? [];
-    expect(sites.length, `details pane/body selector sites = ${sites.join(" | ")}`).toBe(2);
-  });
-
-  it("sizes the pane by cap, never by fixed height", () => {
-    expect(paneAt, "pane rule present").toBeGreaterThanOrEqual(0);
-    const pane = scss.slice(paneAt, bodyAt);
-    // Both viewport lines: the vh fallback pairs with the dvh override,
-    // matching the family pattern.
-    expect(pane).toContain("max-height: max(9rem, 20vh)");
-    expect(pane).toContain("max-height: max(9rem, 20dvh)");
-    // ANY height/min-height declaration re-pins the standing frame —
-    // exactly the regression this fold fixes (a min-height would force
-    // the folded pane back up; R2 F3) — so the pane carries none.
-    const heights = [...pane.matchAll(/^\s*(?:min-)?height:.*$/gm)].map((m) => m[0].trim());
-    expect(heights, `pane height declarations = ${JSON.stringify(heights)}`).toEqual([]);
-  });
-
-  it("clamps the scrolling body with the inherited pane cap", () => {
-    expect(bodyAt, "body rule present").toBeGreaterThanOrEqual(0);
-    const nextAt = scss.indexOf(".hk-error-landing__details-body .s-tool-json-tree");
-    const body = scss.slice(bodyAt, nextAt);
-    // Percentage height against an auto-height parent is circular; the
-    // body must take the pane's cap itself.
-    expect(body).toContain("max-height: inherit");
-    // A fixed body height re-pins the standing frame through the back
-    // door even with the inherit present (R2 F2) — same sweep as the
-    // pane: no height/min-height declarations at all.
-    const bodyHeights = [...body.matchAll(/^\s*(?:min-)?height:.*$/gm)].map((m) => m[0].trim());
-    expect(bodyHeights, `body height declarations = ${JSON.stringify(bodyHeights)}`).toEqual([]);
-    // The clamp only bites when the body may actually shrink and scroll.
-    expect(body).toContain("overflow: auto");
-  });
-});