@celestia-island/hikari 0.55.98 → 0.55.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.98",
+  "version": "0.55.100",
   "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/HkThemeToggle.contract.test.ts

@@ -25,6 +25,73 @@ import { fileURLToPath } from "node:url";
 const here = dirname(fileURLToPath(import.meta.url));
 const read = (f: string): string => readFileSync(join(here, f), "utf-8");
 
+describe("HkThemeToggle theme-row pill contract", () => {
+  // 2026-10-01 user report: with the item-trailing slot reserving a real
+  // column, the row button's hover wash stopped short of the row edge —
+  // theme rows and the standalone 自定义 row hovered at different widths.
+  // The pill therefore lives on `.s-theme-item-row` (full row width no
+  // matter how wide the trailing column is) and the row's button is
+  // chromeless. happy-dom has no layout engine, so the geometry is pinned
+  // as scss-text assertions.
+  it("puts the unified menu-item pill on the row, not the row button", () => {
+    const css = read("HkThemeToggle.scss");
+    const rowBlock = css.match(/\.s-theme-item-row\s*\{[^}]*\}/);
+    expect(rowBlock).not.toBeNull();
+    expect(rowBlock![0]).toContain("@include mi.item;");
+    // The overlaid delete affordance pins to the row (positioning context).
+    expect(rowBlock![0]).toContain("position: relative");
+  });
+
+  it("strips the row button's own chrome so the wash is not doubled", () => {
+    const css = read("HkThemeToggle.scss");
+    const block = css.match(/\.s-theme-item-row \.s-theme-item-btn\s*\{[^}]*\}/);
+    expect(block).not.toBeNull();
+    // The ROW owns the frame: its border 1 + padding 12 put the content at
+    // the same 13px the standalone pills measure (border 1 + padding 12), so
+    // the button drops its own border entirely.
+    expect(block![0]).toContain("border: none;");
+    expect(block![0]).toContain("background: transparent");
+    expect(block![0]).toContain("min-height: 0");
+    // The button stretches over the row's frame (negative block margins
+    // mirrored by re-applied padding) so the WHOLE pill is the click/focus
+    // target — master's pill WAS the button — while the name's content box
+    // keeps the standalone offsets. Losing the stretch drops the button
+    // back to a centered auto-height box inside the row (misaligned and
+    // undersized); losing the bleed pair desyncs the content offset by the
+    // frame width.
+    expect(block![0]).toContain("align-self: stretch");
+    expect(block![0]).toContain("margin-block: calc(");
+    expect(block![0]).toContain("padding-block: calc(");
+  });
+
+  it("suppresses the row button's own hover and active state chrome", () => {
+    const css = read("HkThemeToggle.scss");
+    // The hover override must repeat mi.item's guard chain to out-specify
+    // the mixin's hover rule; the active/checked suppression targets the
+    // state attributes directly.
+    expect(css).toContain(
+      ".s-theme-item-row .s-theme-item-btn:hover:not(:disabled):not([data-disabled]):not([data-active]):not([data-checked])",
+    );
+    expect(css).toMatch(
+      /\.s-theme-item-row \.s-theme-item-btn\[data-active\][^{]*\{[^}]*background: transparent/,
+    );
+  });
+
+  it("registers the theme row family for the mobile sheet token swap", () => {
+    const mi = read("_menu-item.scss");
+    // The row carries the pill, so the sheet-context token binding must
+    // target it too — otherwise sheets keep the desktop 34px metrics.
+    const sheetList = mi.match(
+      /\.hk-popover-panel\.hk-is-sheet[^{]*\{[^{]*\{[^}]*\}/,
+    );
+    expect(sheetList).not.toBeNull();
+    expect(sheetList![0]).toContain(".s-theme-item-row");
+    const modalList = mi.match(/\.hk-modal-content\s*\{[^{]*\{[^}]*\}/);
+    expect(modalList).not.toBeNull();
+    expect(modalList![0]).toContain(".s-theme-item-row");
+  });
+});
+
 describe("HkThemeToggle row lead-cell contract", () => {
   it("sizes the theme-row lead cell to fit a 28px swatch mark", () => {
     const css = read("HkThemeToggle.scss");

package/src/components/HkThemeToggle.scss

@@ -136,32 +136,84 @@
 }
 
 /* ── Theme list rows ────────────────────────────────────────────────────
- * Every row is ONE full-width pill: the delete affordance for custom
- * themes overlays the pill's trailing edge (the row is the positioning
- * context), so built-in rows reserve no trailing column — the old
- * invisible slot left a permanent dead strip right of every row in the
- * mobile bottom sheet — and every pill and highlight still shares the
- * exact same width.
+ * Every row is ONE full-width pill, and the pill is THE ROW (2026-10-01
+ * user report: with the trailing slot reserving a real column, the row
+ * button's wash stopped short of the row edge — theme rows and the
+ * standalone 自定义 row hovered at different widths). The unified
+ * menu-item chrome therefore lives on `.s-theme-item-row` (which also
+ * carries `data-active` from the TSX), and the row's button surrenders
+ * its own chrome below, so the hover/active wash, border and radius
+ * span the full row no matter how wide the trailing column is. The
+ * standalone pills (自定义 row, host mode-extra rows) keep the chrome on
+ * the button itself — same spec, same width as a row.
  *
  * Metrics/states come from the unified menu-item spec (./_menu-item.scss)
  * — the same grammar as menu rows and select options; inside the mobile
  * sheet the shared `.hk-popover-panel.hk-is-sheet` token context applies
- * the 44px touch geometry, so the old component-local media bump is gone
- * (only the overlaid delete button keeps its own touch sizing below).
+ * the 44px touch geometry (the row family is registered there), so the
+ * old component-local media bump is gone (only the overlaid delete
+ * button keeps its own touch sizing below).
  */
 
 .s-theme-item-row {
+  @include mi.item;
+
   position: relative;
-  display: flex;
-  align-items: center;
 }
 
-/* Theme rows speak the SAME grammar as every dropdown option
- * (.hk-select-option): base-size text, roomy pill padding, hairline
- * border that tints on hover and strengthens when active — so a theme
- * list inside the popover reads like any select/menu panel. The old
- * bespoke 6×8 tight rows (small text, borderless 12% wash) are what
- * made the theme sheet read as "not from the standard dropdown". */
+/* The row's button keeps the CLICK and FOCUS semantics (keyboard parity,
+ * screen-reader role) but no visual chrome of its own: background goes
+ * transparent and the border is dropped entirely — the ROW now owns the
+ * frame, and the content x lands on the same offset as the standalone
+ * pills anyway (row border 1 + row padding 12 = the standalone border 1 +
+ * padding 12 = 13px from the pill edge). Vertically the button bleeds
+ * over the row's frame (negative margins) and re-applies the padding
+ * inside, so the WHOLE pill is the click/focus target — master's pill
+ * WAS the button — while the name's content box keeps the standalone
+ * offsets (border 1 + pad-y). Row heights are unchanged: the button's
+ * net layout contribution is its content, so the row's own min-height
+ * rules exactly as the button's did before. */
+.s-theme-item-row .s-theme-item-btn {
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  width: auto;
+  /* Fill the row's full cross size (overriding the row's align-items:
+   * center FOR THIS ITEM only) so the click/focus target is the whole
+   * pill, not just the name's line box. */
+  align-self: stretch;
+  /* Bleed over the row's frame — its vertical padding plus the 1px
+   * mi.item border — then re-apply that padding inside: the name's
+   * content box keeps the standalone pills' offsets (border 1 + pad)
+   * while the hit area covers the pill edge to edge. The 1px constant
+   * mirrors mi.item's border width; if the mixin's border ever changes,
+   * this pair moves with it. */
+  margin-block: calc(-1 * var(--hk-menu-item-pad-y, 6px) - 1px);
+  padding-block: calc(var(--hk-menu-item-pad-y, 6px) + 1px);
+  padding-inline: 0;
+  border: none;
+  /* Follow the row's pill radius: the button keeps mi.item's :focus-visible
+   * inset outline (keyboard parity), and outlines follow border-radius —
+   * a zero radius here would render the ring as a sharp rectangle poking
+   * past the row's rounded corners. */
+  border-radius: inherit;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+}
+
+/* Suppress the button's own state chrome — the row above owns the wash.
+ * The hover guard repeats mi.item's guard chain so this override
+ * out-specifies the mixin's (0,6,0) hover rule. */
+.s-theme-item-row .s-theme-item-btn:hover:not(:disabled):not([data-disabled]):not([data-active]):not([data-checked]),
+.s-theme-item-row .s-theme-item-btn[data-active],
+.s-theme-item-row .s-theme-item-btn[data-checked] {
+  background: transparent;
+  border-color: transparent;
+  color: inherit;
+  font-weight: inherit;
+}
+
 .s-theme-item-btn {
   @include mi.item;
 

package/src/components/HkThemeToggle.test.ts

@@ -283,6 +283,13 @@ describe("HkThemeToggle color-mode group", () => {
     // Active check glyph sits inside the pill, leading the name.
     const activeBtn = document.body.querySelector<HTMLButtonElement>(".s-theme-item-btn[data-active]");
     expect(activeBtn?.querySelector(".s-theme-item-check")).toBeTruthy();
+
+    // The ROW is the pill (2026-10-01): the active state surfaces on the
+    // row element too, so the highlight spans the full row width instead
+    // of stopping short at a trailing column.
+    const activeRows = rows.filter((r) => r.hasAttribute("data-active"));
+    expect(activeRows).toHaveLength(1);
+    expect(activeRows[0].querySelector(".s-theme-item-btn[data-active]")).toBeTruthy();
   });
   it("renders the mode-extra strip under the mode group when provided", async () => {
     const container = document.createElement("div");

package/src/components/HkThemeToggle.tsx

@@ -181,16 +181,18 @@ export const HkThemeToggle = defineComponent({
      * cache icon vnodes across renders, or closing/reopening the popover
      * would re-mount the same vnode instances. In AUTO mode the Light/
      * Dark options collapse into the group's merged cell (the altitude
-     * strip) via `mergeKeys`; they stay flagged disabled for the
-     * degradation path (merge requested without the #merged slot) and
-     * for semantic clarity.
+     * strip) via `mergeKeys`. They stay ENABLED (2026-10-01 user report:
+     * disabled Light/Dark read as the mode being locked to the sun): in
+     * the merged rendering they are not rendered at all, and on the
+     * degradation path (merge requested without the #merged slot) a
+     * click must drop OUT of auto onto the pressed side instead of
+     * doing nothing.
      */
     function modeOptions(): TabItem[] {
-      const auto = isAutoMode.value;
       return [
         { key: "system", label: t("hikari::theme.modeAuto"), icon: <Monitor size={16} /> },
-        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={16} />, disabled: auto },
-        { key: "dark", label: t("hikari::theme.modeDark"), icon: <MoonStar size={16} />, disabled: auto },
+        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={16} /> },
+        { key: "dark", label: t("hikari::theme.modeDark"), icon: <MoonStar size={16} /> },
       ];
     }
 
@@ -336,6 +338,13 @@ export const HkThemeToggle = defineComponent({
                   data-custom={th.isCustom || undefined}
                   data-trailing={trailingSlot ? "slot" : undefined}
                   data-name-suffix={nameSuffixSlot ? "slot" : undefined}
+                  // The ROW is the pill: the highlight state lives here so
+                  // the hover/active wash spans the full row width — a
+                  // trailing slot column must not shrink it (2026-10-01
+                  // user report: theme rows and the 自定义 row hovered at
+                  // different widths). The button keeps the click/focus
+                  // semantics; the stylesheet strips its own chrome.
+                  data-active={currentTheme.value === th.id || undefined}
                 >
                   <button
                     type="button"

package/src/components/_menu-item.scss

@@ -79,6 +79,7 @@
   .hk-menu-action-item,
   .hk-select-option,
   .hk-popup-select-item,
+  .s-theme-item-row,
   .s-theme-item-btn,
   .s-popup-menu-item,
   .hk-popup-menu-item,
@@ -98,6 +99,7 @@
     .hk-menu-row,
     .hk-menu-action-item,
     .hk-select-option,
+    .s-theme-item-row,
     .s-theme-item-btn,
     .s-popup-menu-item,
     .hk-popup-menu-item,

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");
-  });
-});