@celestia-island/hikari 0.55.238 → 0.55.240

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.238",
+  "version": "0.55.240",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkAboutModal.scss

@@ -238,31 +238,39 @@
 // solved against the pill's real backdrop —
 // the 10% channel tint composited over the 3%-primary card on
 // `--color-surface` — for the WORST entry of the stock AND chest palettes:
-// every tone lands ≥4.6:1. `light-dark()` resolves through the same
-// color-scheme the theme engine already drives (`[data-mode] body` in
-// theme.scss sets it alongside the channel swap), and an engine without
-// relative-colour support drops the declaration, falling back to the
-// neutral muted ink above — still AA everywhere: ≥4.87:1 even under the
-// coloured pills' own tinted backdrop (4.87–7.20 across both palettes and
-// modes; 5.98–8.06 on the plain neutral pill) — rather than shipping an
-// unreadable tone colour. The border and background keep the raw channel:
-// only the glyphs owe contrast, the tint is decorative.
+// every tone lands ≥4.6:1.
+//
+// The two arms are expressed as THEME-MODE rules — the light one in the base
+// rule, the dark one re-inking under `[data-mode="dark"]` (the HkTooltip
+// precedent) — rather than as one `light-dark()` value. Reason, shipped and
+// paid for once on 2026-10-30 (chest #2027): when the consumer's build floor
+// predates `light-dark()`, the CSS minifier LOWERS it into
+// `var(--lightningcss-light, …) var(--lightningcss-dark, …)` WITHOUT emitting
+// the companion custom-property definitions, so the declaration becomes
+// invalid at computed-value time and the glyphs fall back to the INHERITED
+// colour — worse than the muted ink. Mode rules need no such function, so no
+// build floor can rewrite them, and `[data-mode]` is the very attribute the
+// theme engine writes (`applyTheme` sets it on `<html>` in the same pass that
+// injects the channel variables; `theme.scss` derives `color-scheme` from it),
+// so the arms cannot desynchronise from the palette.
+//
+// Degradation is by PARSE-TIME drop: an engine without relative-colour
+// support discards the tone rule's `color` outright, which leaves the neutral
+// muted ink of `.s-about-modal-row-meta` above in force — still AA everywhere
+// (≥4.87:1 even under the coloured pills' own tinted backdrop; 4.87–7.20
+// across both palettes and modes) rather than shipping an unreadable tone
+// colour. The border and background keep the raw channel: only the glyphs owe
+// contrast, the tint is decorative.
 .s-about-modal-row-meta[data-tone="positive"] {
   border-color: rgb(var(--color-success) / 32%);
   background: rgb(var(--color-success) / 10%);
-  color: light-dark(
-    oklch(from rgb(var(--color-success)) min(l, 0.5) c h),
-    oklch(from rgb(var(--color-success)) max(l, 0.72) c h)
-  );
+  color: oklch(from rgb(var(--color-success)) min(l, 0.5) c h);
 }
 
 .s-about-modal-row-meta[data-tone="caution"] {
   border-color: rgb(var(--color-warning) / 32%);
   background: rgb(var(--color-warning) / 10%);
-  color: light-dark(
-    oklch(from rgb(var(--color-warning)) min(l, 0.5) c h),
-    oklch(from rgb(var(--color-warning)) max(l, 0.72) c h)
-  );
+  color: oklch(from rgb(var(--color-warning)) min(l, 0.5) c h);
 }
 
 // Red state: the component is not wired up / unreachable. The row then
@@ -270,10 +278,21 @@
 .s-about-modal-row-meta[data-tone="danger"] {
   border-color: rgb(var(--color-error) / 32%);
   background: rgb(var(--color-error) / 10%);
-  color: light-dark(
-    oklch(from rgb(var(--color-error)) min(l, 0.5) c h),
-    oklch(from rgb(var(--color-error)) max(l, 0.72) c h)
-  );
+  color: oklch(from rgb(var(--color-error)) min(l, 0.5) c h);
+}
+
+// Dark arm: floor the lightness instead of capping it (rationale above). Only
+// the glyphs re-ink — the border and tint already ride the live channel.
+[data-mode="dark"] .s-about-modal-row-meta[data-tone="positive"] {
+  color: oklch(from rgb(var(--color-success)) max(l, 0.72) c h);
+}
+
+[data-mode="dark"] .s-about-modal-row-meta[data-tone="caution"] {
+  color: oklch(from rgb(var(--color-warning)) max(l, 0.72) c h);
+}
+
+[data-mode="dark"] .s-about-modal-row-meta[data-tone="danger"] {
+  color: oklch(from rgb(var(--color-error)) max(l, 0.72) c h);
 }
 
 /* ── Links: licenses, external links, credits names and filings ───────── */

package/src/components/HkAboutModal.styles.test.ts

@@ -33,13 +33,24 @@ function classesFrom(source: string): Set<string> {
  * Body of one compiled rule, by exact selector (Sass drops the quotes around
  * an attribute value: `[data-face=plain]`).
  *
- * The selector must compile exactly once: a second copy — say inside a media
- * query, or a later override — would otherwise stay invisible here while
- * still winning the cascade.
+ * The selector must compile exactly once: a second copy — a later override, or
+ * one hidden inside a media/supports block — would otherwise stay invisible
+ * here while still winning the cascade.
+ *
+ * The match is anchored to a rule boundary — start of sheet, `}` (the previous
+ * rule ended) or `{` (an at-rule body opens) — because a descendant rule such
+ * as `[data-mode=dark] .s-about-modal-row-meta` CONTAINS the base selector as a
+ * suffix; an unanchored search would read the dark arm as a duplicate of the
+ * light one. The boundary is a LOOKBEHIND so it is not consumed: with a
+ * consuming `}` the match of one rule would swallow the character the next
+ * adjacent rule needs as its boundary, which hid exactly the duplicates this
+ * guard exists to catch.
  */
 function ruleBody(sheet: string, selector: string): string {
   const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const matches = [...sheet.matchAll(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`, "g"))];
+  const matches = [
+    ...sheet.matchAll(new RegExp(`(?:(?<=^)|(?<=[}{]))\\s*${escaped}\\s*\\{([^}]*)\\}`, "g")),
+  ];
   expect(matches, `${selector} compiles exactly once`).toHaveLength(1);
   return matches[0]?.[1] ?? "";
 }
@@ -238,6 +249,7 @@ describe("HkAboutModal stylesheet contract", () => {
    */
   describe("row meta tones", () => {
     const TONE = (tone: string) => `.s-about-modal-row-meta[data-tone=${tone}]`;
+    const DARK_TONE = (tone: string) => `[data-mode=dark] ${TONE(tone)}`;
 
     // Channel behind each coloured tone, and the WCAG-AA ink derived from it.
     // The pill text is `--text-2xs` (10px) — small text, 4.5:1 — and the raw
@@ -247,12 +259,18 @@ describe("HkAboutModal stylesheet contract", () => {
     // lightness moves — capped at 0.5 in light mode, floored at 0.72 in dark
     // (bounds solved so the worst stock AND chest entry clears 4.5:1 against
     // the pill's real backdrop: the 10% channel tint over the 3%-primary
-    // card on `--color-surface`). Reverting any arm to the raw channel — or
-    // dropping one `light-dark()` side — must turn this red.
-    const AA_INK = (channel: string) =>
-      `light-dark(` +
-      `oklch(from rgb(var(--color-${channel})) min(l, 0.5) c h), ` +
-      `oklch(from rgb(var(--color-${channel})) max(l, 0.72) c h))`;
+    // card on `--color-surface`).
+    //
+    // The arms are THEME-MODE rules rather than one `light-dark()` value: the
+    // CSS minifier lowers `light-dark()` into an undeclared
+    // `--lightningcss-*` var pair on any build floor that predates it, which
+    // turns the glyph colour into an IACVT fallback to the INHERITED colour
+    // (shipped once — chest #2027). Reverting an arm to the raw channel, or
+    // dropping either mode arm, must turn this red.
+    const AA_INK_LIGHT = (channel: string) =>
+      `oklch(from rgb(var(--color-${channel})) min(l, 0.5) c h)`;
+    const AA_INK_DARK = (channel: string) =>
+      `oklch(from rgb(var(--color-${channel})) max(l, 0.72) c h)`;
     const TONES: Record<string, string> = {
       positive: "success",
       caution: "warning",
@@ -274,9 +292,38 @@ describe("HkAboutModal stylesheet contract", () => {
           // seed-relative form without spaces around the slash.)
           borderColor: `rgb(var(--color-${channel})/32%)`,
           background: `rgb(var(--color-${channel})/10%)`,
-          color: AA_INK(channel),
+          color: AA_INK_LIGHT(channel),
         });
       }
     });
+
+    it("re-inks only the glyphs in dark mode, with the floored arm", () => {
+      for (const [tone, channel] of Object.entries(TONES)) {
+        const dark = ruleBody(css, DARK_TONE(tone));
+        expect(dark, `the ${tone}-tone dark arm must survive compilation`).not.toBe("");
+        // Exactly one declaration: the dark arm owns the glyph colour alone.
+        // Border and background stay on the base rule (same live channel), so
+        // a second copy here would be a cascade surprise.
+        const declarations = dark
+          .split(";")
+          .map((chunk) => chunk.trim())
+          .filter(Boolean);
+        expect(declarations, "the dark arm declares the glyph colour only").toHaveLength(1);
+        expect(declaration(dark, "color")).toBe(AA_INK_DARK(channel));
+      }
+    });
+
+    it("never reintroduces the minifier-mangled light-dark()", () => {
+      // The exact shape that shipped broken: lightningcss rewrites the
+      // function into an UNDECLARED var pair on older build floors, so the
+      // glyphs silently inherit their parent's colour. Mode rules carry the
+      // same two arms without any function a minifier can lower.
+      //
+      // Case-insensitive (CSS function names are), and anchored to a
+      // DECLARATION rather than a bare mention: the rationale comments name
+      // the function on purpose, and `expanded` output keeps `/* */` blocks.
+      expect(css).not.toMatch(/[:]\s*[^;{}]*light-dark\(/i);
+      expect(scss).not.toMatch(/:\s*light-dark\(/i);
+    });
   });
 });

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

@@ -84,7 +84,13 @@ describe("HkErrorLanding inline contract", () => {
     // 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");
+    // The ONLY zero min-height allowed in this variant is the fill
+    // seating's own — nested under &.is-fill, flex-context-only, never
+    // the default inline (which must keep the percentage fill above).
+    const fillAt = inline.indexOf("&.is-fill");
+    expect(fillAt, "&.is-fill seating present").toBeGreaterThanOrEqual(0);
+    const zeroAt = inline.indexOf("min-height: 0");
+    expect(zeroAt, "zero min-height only inside the fill seating").toBeGreaterThan(fillAt);
   });
 
   it("drops the block-axis padding entirely and keeps only the horizontal inset", () => {
@@ -112,6 +118,65 @@ describe("HkErrorLanding inline contract", () => {
   });
 });
 
+describe("HkErrorLanding inline fill-seating contract", () => {
+  const css = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
+  const inline = ruleBody(css, ".hk-error-landing.is-inline");
+  const fill = ruleBody(inline, "&.is-fill");
+
+  it("grows and shrinks with the host flex pane", () => {
+    expect(fill).toContain("flex: 1 1 auto");
+    expect(fill).toContain("min-height: 0");
+  });
+
+  it("lays the card out as one capped column so the frame can yield", () => {
+    const card = ruleBody(inline, ".hk-error-landing__card");
+    expect(card).toContain("display: flex");
+    expect(card).toContain("flex-direction: column");
+    expect(card).toContain("max-height: 100%");
+    expect(card).toContain("margin: auto");
+  });
+
+  it("passes a squeeze through the details region to the frame", () => {
+    const details = ruleBody(inline, ".hk-error-landing__details");
+    expect(details).toContain("min-height: 0");
+  });
+
+  it("makes the standing frame compressible with a usable floor", () => {
+    const pane = ruleBody(inline, ".hk-error-landing__details-pane");
+    // Basis = the page-grade standing height (unconstrained cards render
+    // exactly the fixed frame), shrink unlocked, floor keeps a usable
+    // scroll window.
+    expect(pane).toContain("flex-shrink: 1");
+    expect(pane).toContain("flex-basis: max(9rem, 20vh)");
+    expect(pane).toContain("flex-basis: max(9rem, 20dvh)");
+    expect(pane).toContain("min-height: 6rem");
+  });
+});
+
+describe("HkErrorLanding nested-tree chrome guard contract", () => {
+  const css = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
+
+  it("keeps the pane-owned resets at a :root-dial-beating weight", () => {
+    // Hosts restyle the shared tree class as `:root .s-tool-json-tree`
+    // ((0,2,0), wowsp's glass dial) — at equal weight the later-bundled
+    // dial won the cascade and repainted the nested tree's content band
+    // over the pane's uniform fill in both themes. The guard selector
+    // carries the extra landing class ((0,3,0)) so no :root-prefixed
+    // dial reaches it, whatever the bundle order.
+    const guardSel = ".hk-error-landing .hk-error-landing__details-body .s-tool-json-tree {";
+    expect(css).toContain(guardSel);
+    // And the old two-class form must not survive anywhere.
+    const regressed = css
+      .split("\n")
+      .some((l) => l.trimStart().startsWith(".hk-error-landing__details-body .s-tool-json-tree"));
+    expect(regressed).toBe(false);
+    const guard = ruleBody(css, ".hk-error-landing .hk-error-landing__details-body .s-tool-json-tree");
+    expect(guard).toContain("background: transparent");
+    expect(guard).toContain("max-height: none");
+    expect(guard).toContain("overflow: visible");
+  });
+});
+
 describe("HkErrorLanding multiline headline contract", () => {
   const css = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
   const title = ruleBody(css, ".hk-error-landing__title");

package/src/components/HkErrorLanding.scss

@@ -249,8 +249,17 @@
 
 // A nested HkJsonTree fills the pane instead of stacking its own frame
 // and 320px cap — the pane above owns the chrome now (overflow included:
-// the tree must never engage its own scroller).
-.hk-error-landing__details-body .s-tool-json-tree {
+// the tree must never engage its own scroller). The leading landing class
+// is load-bearing SPECIFICITY, not decoration: hosts blanket-restyle the
+// shared tree class from :root (wowsp's glass dial, `:root
+// .s-tool-json-tree`) at the same (0,2,0) weight the two-class selector
+// below used to carry, and the later-bundled dial won the cascade — the
+// nested tree repainted its content band over the pane's uniform fill,
+// splitting the standing frame into a tinted text block above an untinted
+// void in BOTH themes (2026-10-30 wowsp report). Three classes put the
+// landing's pane chrome out of every :root-prefixed host dial's reach,
+// whatever the bundle order.
+.hk-error-landing .hk-error-landing__details-body .s-tool-json-tree {
   max-height: none;
   height: auto;
   overflow: visible;
@@ -306,13 +315,67 @@
   align-items: flex-start;
   background: transparent;
 
+  // Fill seating: the host lays the landing out as the shrinking region of
+  // a definite-height flex pane (a settings card whose header sits above
+  // and the landing owns the rest). flex takes the remaining space and the
+  // lifted min-height lets the CARD compress to it instead of pushing the
+  // host pane into a scroll for chrome alone; once even the compressed
+  // floor cannot fit, the overflow anchor above still seats the card
+  // top-first and reachable. Every declaration is flex-context-only: a
+  // non-flex host (or a flex pane with auto height) ignores the fill
+  // entirely and keeps the default min-height centering contract, so a
+  // wrong host degrades to the flow landing, never to a collapsed one.
+  &.is-fill {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
   // 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).
+  // slim padding below outranking the ≤480px media rule (0,1,0). The
+  // column layout plus the landing-box cap make the card COMPRESSIBLE:
+  // its only flexible part (the details frame below) yields height before
+  // the card pushes the host pane into a scroll. Flow rendering is
+  // unchanged — every child margin in this card is one-directional, so
+  // dropping block-margin collapsing moves no spacing.
   .hk-error-landing__card {
     margin: auto;
     padding: var(--space-16, 1rem) var(--space-28, 1.75rem) var(--space-24, 1.5rem);
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    // Never smaller than the card's own content minimum (the details
+    // frame's floor included): min-height beats max-height per spec, so a
+    // pane tighter than floor + chrome spills the card into the host's
+    // scroller (top-anchored, reachable) instead of clipping the actions
+    // row inside the card's own overflow: hidden.
+    min-height: min-content;
+  }
+
+  // The details region passes a squeeze THROUGH to the frame instead of
+  // stopping it at its own content box.
+  .hk-error-landing__details {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  // The standing frame yields under a squeeze instead of stretching the
+  // card past its pane: the flex-basis IS the page-grade standing height,
+  // so an unconstrained card renders exactly the fixed frame, the floor
+  // keeps a usable scroll window when the host is tight, and the frame's
+  // own overlay scrollbar takes over below the basis. The stable-frame
+  // contract is intact — folding tree nodes still never resizes the frame;
+  // only a HOST constraint (pane resize, fill seating) moves it, and a
+  // resize reflecting the host's real geometry is feedback, not a jump.
+  .hk-error-landing__details-pane {
+    height: auto;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: max(9rem, 20vh);
+    flex-basis: max(9rem, 20dvh);
+    min-height: 6rem;
   }
 }
 

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

@@ -5,14 +5,24 @@ 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).
+ * frame — the larger of 9rem and ~20vh. 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).
+ *
+ * 2026-10-30 evolution: the base rule keeps the FIXED frame (the page
+ * variant owns a viewport; unconstrained hosts render the standing
+ * height verbatim), while the INLINE variant re-expresses the SAME
+ * standing pair as a flex-basis with a shrink floor — under a real host
+ * constraint (fill seating in a definite-height flex pane) the frame
+ * yields before the card scrolls the pane. A host-resize squeeze is
+ * feedback, not a fold; folding still never moves the frame. The inline
+ * side of that contract lives in HkErrorLanding.inline.contract.test.ts;
+ * this file pins the base rule and counts the declaration sites.
  */
 const here = dirname(fileURLToPath(import.meta.url));
 const scss = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
@@ -21,17 +31,19 @@ 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
+  it("declares the pane and body sites exactly — no late re-declaration", () => {
+    // Whole-file site count: the slice-scoped sweeps below read only the
+    // base rules, 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). Exactly three sites are
+    // sanctioned: the base pane, the base body, and the inline variant's
+    // compressible pane re-expression (flex-basis standing pair + floor;
+    // pinned separately by the inline contract). 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);
+    expect(sites.length, `details pane/body selector sites = ${sites.join(" | ")}`).toBe(3);
   });
 
   it("fixes the pane at the standing frame, never a content-driven cap", () => {
@@ -53,11 +65,15 @@ describe("HkErrorLanding standing frame contract", () => {
 
   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 boundary is the body rule's OWN closing brace, not the next
+    // selector: the sweep must never silently extend into later rules
+    // (the nested tree's neutering rule carries a height: auto of its
+    // own, and an EOF-reaching slice would trip on unrelated boxes).
+    const openAt = scss.indexOf("{", bodyAt);
+    const closeAt = scss.indexOf("}", openAt);
+    expect(openAt, "body rule opens").toBeGreaterThan(bodyAt);
+    expect(closeAt, "body rule closes").toBeGreaterThan(openAt);
+    const body = scss.slice(bodyAt, closeAt + 1);
     // 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).

package/src/components/HkErrorLanding.test.tsx

@@ -11,6 +11,7 @@ interface MountOptions {
   status?: number;
   tone?: "error" | "warning" | "info";
   variant?: "page" | "inline";
+  fill?: boolean;
   copyText?: string;
   copyLabel?: string;
   details?: () => ReturnType<typeof h>;
@@ -30,6 +31,7 @@ function mountLanding(opts: MountOptions = {}) {
         status: opts.status,
         tone: opts.tone ?? "error",
         variant: opts.variant ?? "page",
+        fill: opts.fill ?? false,
         copyText: opts.copyText ?? "",
         copyLabel: opts.copyLabel ?? "",
       }, {
@@ -173,6 +175,21 @@ describe("HkErrorLanding", () => {
     const el = mountLanding({ variant: "inline", title: "Boom" });
     const root = el.querySelector(".hk-error-landing")!;
     expect(root.classList.contains("is-inline")).toBe(true);
+    expect(root.classList.contains("is-fill")).toBe(false);
+  });
+
+  it("applies the fill seating class in the inline variant", () => {
+    const el = mountLanding({ variant: "inline", fill: true, title: "Boom" });
+    const root = el.querySelector(".hk-error-landing")!;
+    expect(root.classList.contains("is-inline")).toBe(true);
+    expect(root.classList.contains("is-fill")).toBe(true);
+  });
+
+  it("never applies the fill seating to the page variant", () => {
+    const el = mountLanding({ fill: true, title: "Boom" });
+    const root = el.querySelector(".hk-error-landing")!;
+    expect(root.classList.contains("is-inline")).toBe(false);
+    expect(root.classList.contains("is-fill")).toBe(false);
   });
 
   it("seats the built-in copy action FIRST, left of the host actions", () => {

package/src/components/HkErrorLanding.tsx

@@ -28,7 +28,12 @@ export type HErrorTone = "error" | "warning" | "info";
  * - `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.
+ *   view hands it. The `fill` prop re-seats it as the shrinking region
+ *   of a definite-height flex pane: grow to the remaining space and let
+ *   the card compress its details frame down to its floor so the error
+ *   card FITS the pane instead of scrolling it (2026-10-30 wowsp report:
+ *   a settings error card taller than its pane pushed the whole page
+ *   into a scroll).
  */
 export type HErrorLandingVariant = "page" | "inline";
 
@@ -92,6 +97,12 @@ export const HkErrorLanding = defineComponent({
     tone: { type: String as PropType<HErrorTone>, default: "error" },
     /** Layout variant: `page` (viewport backdrop) or `inline` (in-flow card). */
     variant: { type: String as PropType<HErrorLandingVariant>, default: "page" },
+    /** Fill seating (inline variant only): the host lays the landing out as
+     *  the shrinking region of a definite-height flex pane — grow to the
+     *  remaining space and let the card compress its details frame down to
+     *  its floor so an error card fits its pane instead of scrolling it.
+     *  Default keeps the inline centering fill (min-height contract). */
+    fill: { type: Boolean, default: false },
   },
   setup(props, { slots }) {
     const { t } = useI18n();
@@ -173,7 +184,7 @@ export const HkErrorLanding = defineComponent({
     });
 
     return () => (
-      <div class={`hk-error-landing is-${props.tone}${props.variant === "inline" ? " is-inline" : ""}`}>
+      <div class={`hk-error-landing is-${props.tone}${props.variant === "inline" ? " is-inline" : ""}${props.fill && props.variant === "inline" ? " is-fill" : ""}`}>
         <div class="hk-error-landing__card">
           {slots.brand?.()}
 

package/src/components/HkMenuPanel.scss

@@ -13,6 +13,10 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-4, 4px);
+  /* This list's own row rhythm is 4px, so a captioned run moved into a
+     group box must match it (the section grammar defaults to the level's
+     2px). */
+  --hk-menu-section-gap: var(--space-4, 4px);
   /* Inset matches .hk-sidebar-body's inline padding so items share the
      nav text edge; override --hk-menu-panel-inset to re-anchor. */
   padding: var(--space-8, 8px) var(--hk-menu-panel-inset, var(--space-12, 12px));