@celestia-island/hikari 0.40.28 → 0.40.30

package/package.json

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

package/src/components/HkDatePicker.scss

@@ -136,6 +136,18 @@
   color: var(--hi-color-text-primary);
 }
 
+/* Mobile sheet context (#424 centered-cap pattern): the calendar keeps its
+ * designed measure inside the viewport-wide sheet instead of left-gluing
+ * at the anchored popover's min-width. Safe to stretch: the stage pins
+ * only its height (HkPickerPane.scss) and the day/month grids use 1fr
+ * tracks, so nothing fixed fights width: 100%. */
+.hk-popover-panel.hk-is-sheet .hk-dp-panel {
+  min-width: 0;
+  max-width: min(22rem, 100%);
+  margin-inline: auto;
+  width: 100%;
+}
+
 .hk-dp-header {
   display: grid;
   grid-template-columns: 1fr auto 1fr;

package/src/components/HkDatePicker.sheet.test.ts

@@ -0,0 +1,56 @@
+/**
+ * Source contract for the date/datetime picker mobile sheet docking
+ * (2026-09-08 mobile audit deferred item, family contract completion):
+ * HkDatePicker and HkDateTimePicker were the last anchored surfaces that
+ * never docked as bottom sheets on phones — on non-native touch hosts
+ * (nativeOnMobile=false) their calendars opened as tiny trigger-anchored
+ * popovers while every other popover-family window docked. Both pickers
+ * must pass sheetOnMobile to HPopover (the native path returns before the
+ * popover renders, so this is inherently non-native-touch-only) and cap
+ * their panels with the #424 centered-cap pattern inside the sheet.
+ */
+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));
+const read = (name: string) => readFileSync(join(here, name), "utf-8");
+/* Fixed window from the opening tag — a non-greedy `[\s\S]*?>` would stop
+ * at the `=>` inside the onUpdate prop's inline arrow. */
+const popoverTag = (src: string) => {
+  const at = src.indexOf("<HPopover");
+  return at < 0 ? "" : src.slice(at, at + 700);
+};
+
+describe("date picker mobile sheet family contract", () => {
+  it("HkDatePicker opts its calendar popover into mobile sheet docking", () => {
+    const popover = popoverTag(read("HkDatePicker.tsx"));
+    expect(popover).toContain("sheetOnMobile");
+  });
+
+  it("HkDateTimePicker opts its popup popover into mobile sheet docking", () => {
+    const popover = popoverTag(read("HkDateTimePicker.tsx"));
+    expect(popover).toContain("sheetOnMobile");
+  });
+
+  it("HkDatePicker caps the calendar panel with the #424 centered-cap pattern", () => {
+    const src = read("HkDatePicker.scss");
+    const block = src.match(/\.hk-popover-panel\.hk-is-sheet \.hk-dp-panel\s*\{[^}]*\}/)?.[0] ?? "";
+    expect(block).toContain("min-width: 0");
+    expect(block).toContain("max-width: min(22rem, 100%)");
+    expect(block).toContain("margin-inline: auto");
+    expect(block).toContain("width: 100%");
+  });
+
+  it("HkDateTimePicker caps the popup panel and lifts the body floor in the sheet", () => {
+    const src = read("HkDateTimePicker.scss");
+    const popup = src.match(/\.hk-popover-panel\.hk-is-sheet \.hk-dtp-popup\s*\{[^}]*\}/)?.[0] ?? "";
+    expect(popup).toContain("min-width: 0");
+    expect(popup).toContain("max-width: min(22rem, 100%)");
+    expect(popup).toContain("margin-inline: auto");
+    expect(popup).toContain("width: 100%");
+    const body = src.match(/\.hk-popover-panel\.hk-is-sheet \.hk-dtp\s*\{[^}]*\}/)?.[0] ?? "";
+    expect(body).toContain("min-width: 0");
+  });
+});

package/src/components/HkDatePicker.tsx

@@ -539,6 +539,10 @@ export default defineComponent({
             placement="bottom-start"
             offset={6}
             backdrop={false}
+            sheetOnMobile
+            // The calendar docks as a bottom sheet on non-native touch
+            // hosts (nativeOnMobile=false); the native path returns
+            // before this popover ever renders.
             title={t("hikari::datePicker.pickDate")}
             class="hk-dp-popover"
           >

package/src/components/HkDateTimePicker.scss

@@ -331,6 +331,23 @@
   min-width: 260px;
 }
 
+/* Mobile sheet context (#424 centered-cap pattern): the popup wrapper is
+ * the sheet's direct content child, so it takes the centered cap; the
+ * .hk-dtp body root already fills via width: 100% and only needs its
+ * 17.5rem floor lifted so narrow sheets never overflow. The stage pins
+ * height only (HkPickerPane.scss) and the grids use 1fr tracks, so
+ * stretching fights no fixed geometry. */
+.hk-popover-panel.hk-is-sheet .hk-dtp-popup {
+  min-width: 0;
+  max-width: min(22rem, 100%);
+  margin-inline: auto;
+  width: 100%;
+}
+
+.hk-popover-panel.hk-is-sheet .hk-dtp {
+  min-width: 0;
+}
+
 .hk-dtp-popup-foot {
   display: flex;
   justify-content: flex-end;

package/src/components/HkDateTimePicker.tsx

@@ -578,6 +578,10 @@ export default defineComponent({
             anchorRef={triggerWrapRef.value ?? null}
             placement={props.placement}
             offset={props.offset}
+            sheetOnMobile
+            // The popup docks as a bottom sheet on non-native touch hosts
+            // (nativeOnMobile=false); the native path returns before this
+            // popover ever renders.
             title={t("hikari::dateTimePicker.pickDate")}
           >
             <div class="hk-dtp-popup">

package/src/components/HkErrorBoundary.tsx

@@ -30,8 +30,9 @@ function formatError(err: CapturedError): string {
  * Captures descendant errors via `onErrorCaptured` and stops propagation.
  * The built-in fallback is the same HkErrorLanding card the family's
  * full-page takeovers use (inline variant): tone icon, headline, the error
- * name as the code chip, the message as the description, the raw
- * name/message/stack in a collapsible JSON tree, plus retry / copy actions.
+ * name as the tone-matched HkBadge chip, the message as the description,
+ * the raw name/message/stack in the fixed-height JSON tree pane, plus
+ * retry / copy actions.
  */
 export default defineComponent({
   name: "HkErrorBoundary",

package/src/components/HkErrorLanding.scss

@@ -36,16 +36,38 @@
 }
 
 .hk-error-landing__card {
-  width: min(430px, 100%);
+  position: relative;
+  overflow: hidden;
+  width: min(440px, 100%);
   background: rgb(var(--hel-surface));
   border: 1px solid rgb(var(--hel-border) / 70%);
-  border-radius: var(--radius-lg, 16px);
+  border-radius: var(--radius-xl, 20px);
   box-shadow: var(--shadow-lg, 0 18px 48px rgb(0 0 0 / 8%));
-  padding: 2rem 1.75rem;
+  padding: 2.25rem 1.75rem 1.75rem;
   text-align: center;
+
+  // Tone wash bleeding down from the top edge behind the icon — gives the
+  // upper half the designed depth the plain white card used to lack.
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 auto;
+    height: 150px;
+    background: radial-gradient(58% 100% at 50% 0%, rgb(var(--hel-error) / 8%), transparent 72%);
+    pointer-events: none;
+  }
+}
+
+.hk-error-landing.is-warning .hk-error-landing__card::before {
+  background: radial-gradient(58% 100% at 50% 0%, rgb(var(--hel-warning) / 10%), transparent 72%);
+}
+
+.hk-error-landing.is-info .hk-error-landing__card::before {
+  background: radial-gradient(58% 100% at 50% 0%, rgb(var(--hel-primary) / 7%), transparent 72%);
 }
 
 .hk-error-landing__brand {
+  position: relative;
   display: flex;
   justify-content: center;
   margin-bottom: var(--space-16, 1rem);
@@ -56,9 +78,10 @@
 }
 
 .hk-error-landing__icon {
-  width: 58px;
-  height: 58px;
-  margin: 0 auto var(--space-16, 1rem);
+  position: relative;
+  width: 64px;
+  height: 64px;
+  margin: 0 auto var(--space-14, 0.875rem);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -69,8 +92,13 @@
     color: rgb(var(--hel-error));
   }
 
-  background: rgb(var(--hel-error) / 12%);
-  border: 1px solid rgb(var(--hel-error) / 22%);
+  background: linear-gradient(145deg, rgb(var(--hel-error) / 18%), rgb(var(--hel-error) / 6%));
+  border: 1px solid rgb(var(--hel-error) / 26%);
+  // Layered halo: a soft tone ring hugging the disc plus a long, faint
+  // drop shadow — reads as a designed badge instead of a flat circle.
+  box-shadow:
+    0 0 0 8px rgb(var(--hel-error) / 5%),
+    0 10px 28px -12px rgb(var(--hel-error) / 45%);
 }
 
 .hk-error-landing.is-warning .hk-error-landing__icon {
@@ -79,8 +107,11 @@
     color: rgb(var(--hel-warning));
   }
 
-  background: rgb(var(--hel-warning) / 12%);
-  border-color: rgb(var(--hel-warning) / 24%);
+  background: linear-gradient(145deg, rgb(var(--hel-warning) / 20%), rgb(var(--hel-warning) / 7%));
+  border-color: rgb(var(--hel-warning) / 28%);
+  box-shadow:
+    0 0 0 8px rgb(var(--hel-warning) / 6%),
+    0 10px 28px -12px rgb(var(--hel-warning) / 45%);
 }
 
 .hk-error-landing.is-info .hk-error-landing__icon {
@@ -89,19 +120,63 @@
     color: rgb(var(--hel-primary));
   }
 
-  background: rgb(var(--hel-primary) / 10%);
-  border-color: rgb(var(--hel-primary) / 20%);
+  background: linear-gradient(145deg, rgb(var(--hel-primary) / 16%), rgb(var(--hel-primary) / 5%));
+  border-color: rgb(var(--hel-primary) / 24%);
+  box-shadow:
+    0 0 0 8px rgb(var(--hel-primary) / 5%),
+    0 10px 28px -12px rgb(var(--hel-primary) / 40%);
+}
+
+// Code / status chips ride on the canonical HkBadge (mono, small). The
+// channels are re-resolved through the landing's --hel-* fallbacks so a
+// theme-less standalone render paints them exactly like the themed one,
+// and the code chip follows the landing tone like the icon does.
+.hk-error-landing__meta {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--space-6, 0.375rem);
+  margin-bottom: var(--space-8, 0.5rem);
+}
+
+.hk-error-landing__meta .hk-badge:not(.hk-badge-muted) {
+  --hk-badge-text: rgb(var(--hel-error));
+  --hk-badge-bg: rgb(var(--hel-error) / 10%);
+  --hk-badge-border: rgb(var(--hel-error) / 22%);
+}
+
+.hk-error-landing.is-warning .hk-error-landing__meta .hk-badge:not(.hk-badge-muted) {
+  --hk-badge-text: rgb(var(--hel-warning));
+  --hk-badge-bg: rgb(var(--hel-warning) / 12%);
+  --hk-badge-border: rgb(var(--hel-warning) / 24%);
+}
+
+.hk-error-landing.is-info .hk-error-landing__meta .hk-badge:not(.hk-badge-muted) {
+  --hk-badge-text: rgb(var(--hel-primary));
+  --hk-badge-bg: rgb(var(--hel-primary) / 10%);
+  --hk-badge-border: rgb(var(--hel-primary) / 20%);
+}
+
+.hk-error-landing__meta .hk-badge-muted {
+  --hk-badge-text: rgb(var(--hel-muted));
+  --hk-badge-bg: rgb(var(--hel-muted) / 8%);
+  --hk-badge-border: rgb(var(--hel-border) / 80%);
 }
 
 .hk-error-landing__title {
+  position: relative;
   margin: 0;
-  font-size: var(--text-lg, 1.125rem);
-  font-weight: 600;
+  font-size: var(--text-xl, 1.25rem);
+  font-weight: 650;
+  letter-spacing: -0.01em;
   line-height: 1.35;
   color: rgb(var(--hel-text));
 }
 
 .hk-error-landing__desc {
+  position: relative;
   margin: var(--space-8, 0.5rem) 0 0;
   font-size: var(--text-sm, 0.8125rem);
   line-height: 1.6;
@@ -110,69 +185,71 @@
   overflow-wrap: anywhere;
 }
 
-.hk-error-landing__meta {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: var(--space-6, 0.375rem);
-  margin-top: var(--space-10, 0.625rem);
-}
-
-.hk-error-landing__code {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: var(--text-xs, 0.75rem);
-  color: rgb(var(--hel-muted));
-  background: rgb(var(--hel-muted) / 8%);
-  border: 1px solid rgb(var(--hel-border) / 80%);
-  border-radius: var(--radius-sm, 4px);
-  padding: 0.1em 0.55em;
-  overflow-wrap: anywhere;
-}
-
-.hk-error-landing__status {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: var(--text-xs, 0.75rem);
-  color: rgb(var(--hel-muted));
-  border: 1px dashed rgb(var(--hel-border));
-  border-radius: var(--radius-sm, 4px);
-  padding: 0.1em 0.55em;
-}
-
 .hk-error-landing__details {
+  position: relative;
   margin-top: var(--space-16, 1rem);
   text-align: left;
 }
 
-.hk-error-landing__details-toggle {
-  display: inline-flex;
+.hk-error-landing__details-label {
+  display: flex;
   align-items: center;
   gap: 4px;
-  border: none;
-  background: transparent;
-  padding: 2px 4px;
-  font: inherit;
+  padding: 0 2px;
   font-size: var(--text-xs, 0.75rem);
+  font-weight: 500;
+  letter-spacing: 0.02em;
   color: rgb(var(--hel-muted));
-  cursor: pointer;
-  border-radius: var(--radius-xs, 4px);
+  user-select: none;
+}
 
-  &:hover {
-    color: rgb(var(--hel-text));
-    background: rgb(var(--hel-muted) / 8%);
-  }
+// Fixed-height details pane: the raw payload keeps a stable ~20vh
+// footprint. Folding every JSON node still leaves the pane standing at
+// the same height, and a long stack trace can never stretch the card —
+// the family overlay scrollbar (attachOverlayScrollbars) carries the
+// overflow inside the frame. The pane div is the track's positioning
+// context and wraps EXACTLY the scrolling body (useOverlayScrollbar
+// host contract).
+.hk-error-landing__details-pane {
+  position: relative;
+  margin-top: var(--space-6, 0.375rem);
+  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 {
+  height: 100%;
+  overflow: auto;
+  border-radius: inherit;
+  padding: var(--space-4, 0.25rem);
 
-  &:focus-visible {
-    outline: 2px solid rgb(var(--hel-primary) / 60%);
-    outline-offset: 1px;
+  // The overlay scrollbar is the only chrome — hide the native bar.
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
   }
 }
 
-.hk-error-landing__details-body {
-  margin-top: var(--space-6, 0.375rem);
+// 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 {
+  max-height: none;
+  height: auto;
+  overflow: visible;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
 }
 
 .hk-error-landing__actions {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -192,6 +269,6 @@
 
 @media (max-width: 480px) {
   .hk-error-landing__card {
-    padding: 1.5rem 1.125rem;
+    padding: 1.75rem 1.125rem 1.5rem;
   }
 }

package/src/components/HkErrorLanding.test.tsx

@@ -1,8 +1,7 @@
 import { afterEach, describe, expect, it } from "vitest";
-import { createApp, h, nextTick } from "vue";
+import { createApp, h } from "vue";
 
 import { HkErrorLanding } from "./HkErrorLanding";
-
 const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
 
 interface MountOptions {
@@ -12,7 +11,6 @@ interface MountOptions {
   status?: number;
   tone?: "error" | "warning" | "info";
   variant?: "page" | "inline";
-  detailsOpen?: boolean;
   details?: () => ReturnType<typeof h>;
   actions?: () => ReturnType<typeof h>;
   brand?: () => ReturnType<typeof h>;
@@ -30,7 +28,6 @@ function mountLanding(opts: MountOptions = {}) {
         status: opts.status,
         tone: opts.tone ?? "error",
         variant: opts.variant ?? "page",
-        detailsOpen: opts.detailsOpen ?? true,
       }, {
         ...(opts.details ? { default: opts.details } : {}),
         ...(opts.actions ? { actions: opts.actions } : {}),
@@ -59,7 +56,12 @@ describe("HkErrorLanding", () => {
   it("renders the given title, description, and meta chips", () => {
     const el = mountLanding({ title: "OAuth failed", description: "line1\nline2", code: "unknown_provider", status: 400 });
     expect(el.querySelector(".hk-error-landing__title")!.textContent).toBe("OAuth failed");
+    // Chips ride on the canonical HkBadge (class fallthrough keeps the
+    // landing-level selectors testable).
+    expect(el.querySelector(".hk-error-landing__code")!.classList.contains("hk-badge")).toBe(true);
+    expect(el.querySelector(".hk-error-landing__code")!.classList.contains("hk-badge-warning")).toBe(false);
     expect(el.querySelector(".hk-error-landing__code")!.textContent).toBe("unknown_provider");
+    expect(el.querySelector(".hk-error-landing__status")!.classList.contains("hk-badge-muted")).toBe(true);
     expect(el.querySelector(".hk-error-landing__status")!.textContent).toBe("HTTP 400");
   });
 
@@ -68,22 +70,55 @@ describe("HkErrorLanding", () => {
     expect(el.querySelector(".hk-error-landing__meta")).toBeNull();
   });
 
-  it("renders the details slot with the raw JSON tree pane and toggles it", async () => {
+  it("renders the details pane always open with a tone-following code chip", () => {
     const el = mountLanding({
       details: () => h("pre", { class: "s-tool-json-tree" }, "raw"),
     });
-    const toggle = el.querySelector<HTMLButtonElement>(".hk-error-landing__details-toggle")!;
-    expect(toggle.getAttribute("aria-expanded")).toBe("true");
+    // No collapse affordance anymore — the pane is a fixed region.
+    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();
     expect(el.querySelector(".hk-error-landing__details-body")).not.toBeNull();
-    toggle.click();
-    await nextTick();
-    expect(toggle.getAttribute("aria-expanded")).toBe("false");
-    expect(el.querySelector(".hk-error-landing__details-body")).toBeNull();
   });
 
-  it("keeps details collapsed when detailsOpen is false", () => {
-    const el = mountLanding({ detailsOpen: false, details: () => h("pre", {}, "raw") });
-    expect(el.querySelector(".hk-error-landing__details-body")).toBeNull();
+  it("keeps the code chip on the tone variant and the status chip muted", () => {
+    const el = mountLanding({ code: "rate_limited", status: 429, tone: "warning" });
+    expect(el.querySelector(".hk-error-landing__code")!.classList.contains("hk-badge-warning")).toBe(true);
+    expect(el.querySelector(".hk-error-landing__status")!.classList.contains("hk-badge-muted")).toBe(true);
+  });
+
+  it("maps the info tone onto the info chip variant", () => {
+    const el = mountLanding({ code: "maintenance", tone: "info" });
+    expect(el.querySelector(".hk-error-landing__code")!.classList.contains("hk-badge-info")).toBe(true);
+  });
+
+  it("renders the description text", () => {
+    const el = mountLanding({ description: "line1\nline2" });
+    expect(el.querySelector(".hk-error-landing__desc")!.textContent).toBe("line1\nline2");
+  });
+
+  it("attaches the overlay scrollbar chrome inside the details pane", () => {
+    const el = mountLanding({ details: () => h("pre", { class: "s-tool-json-tree" }, "raw") });
+    expect(el.querySelector(".hk-error-landing__details-pane .hk-scrollbar-track")).not.toBeNull();
+    expect(el.querySelector(".hk-error-landing__details-pane .hk-scrollbar-thumb")).not.toBeNull();
+  });
+
+  it("renders no scrollbar chrome without a details pane", () => {
+    const el = mountLanding({});
+    expect(el.querySelector(".hk-scrollbar-track")).toBeNull();
+  });
+
+  it("detaches the scrollbar chrome on unmount", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () => h(HkErrorLanding, { title: "Boom" }, { default: () => h("pre", "raw") }),
+    });
+    app.mount(container);
+    expect(container.querySelector(".hk-scrollbar-track")).not.toBeNull();
+    app.unmount();
+    container.remove();
+    expect(container.querySelector(".hk-scrollbar-track")).toBeNull();
   });
 
   it("renders no details section without a default slot", () => {

package/src/components/HkErrorLanding.tsx

@@ -1,6 +1,17 @@
-import { computed, defineComponent, ref, type PropType } from "vue";
-import { ChevronDown, ChevronRight, Info, TriangleAlert } from "lucide-vue-next";
+import { Braces, Info, TriangleAlert } from "lucide-vue-next";
+import {
+  computed,
+  defineComponent,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  type PropType,
+} from "vue";
+
+import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import { useI18n } from "../i18n/context";
+import HkBadge from "./HkBadge";
 
 import "./HkErrorLanding.scss";
 
@@ -21,14 +32,20 @@ export type HErrorLandingVariant = "page" | "inline";
  *
  * Login-page-like layout: a centered card over a full-viewport backdrop,
  * carrying a tone icon, a (pre-translated) title and description, the wire
- * error code / HTTP status as meta chips, a collapsible raw-details section
- * (the default slot — hosts render HkJsonTree there) and an actions slot.
+ * error code / HTTP status as HkBadge chips above the headline, an
+ * always-open raw-details pane (the default slot — hosts render HkJsonTree
+ * there) with a FIXED ~20vh footprint carried by the family overlay
+ * scrollbar, and an actions slot.
+ *
+ * The details pane deliberately never collapses and never grows past its
+ * frame: folding every JSON node still leaves the pane standing, and a
+ * long stack trace scrolls inside it instead of stretching the card.
  *
  * 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
  * server-rendered error page alike. All host-facing copy (`title`,
  * `description`, action buttons) arrives pre-translated; the component only
- * translates its own two labels via `hikari::errors.*`.
+ * translates its own labels via `hikari::errors.*`.
  */
 export const HkErrorLanding = defineComponent({
   name: "HkErrorLanding",
@@ -44,54 +61,117 @@ 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" },
-    /** Initial expansion of the raw-details section. */
-    detailsOpen: { type: Boolean, default: true },
   },
   setup(props, { slots }) {
     const { t } = useI18n();
-    const detailsExpanded = ref(props.detailsOpen);
 
     const titleText = computed(() => props.title || t("hikari::errors.defaultTitle", "Something went wrong"));
     const hasDetails = computed(() => slots.default != null);
 
-    function toggleDetails() {
-      detailsExpanded.value = !detailsExpanded.value;
+    // Badge variant follows the landing tone so the chip, the icon and the
+    // card wash always speak the same severity language.
+    const codeBadgeVariant = computed(() =>
+      props.tone === "warning" ? "warning" : props.tone === "info" ? "info" : "error",
+    );
+
+    const detailsBodyRef = ref<HTMLElement | null>(null);
+    let detailsScrollbars: OverlayScrollbarHandle | null = null;
+    // 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;
+
+    function observeDetailsContent() {
+      const content = detailsBodyRef.value?.firstElementChild ?? null;
+      if (content === observedContent) return;
+      if (observedContent) contentResizeObserver?.unobserve(observedContent);
+      observedContent = content;
+      if (content) contentResizeObserver?.observe(content);
+    }
+
+    function ensureDetailsScrollbars() {
+      if (detailsScrollbars || !detailsBodyRef.value) return;
+      detailsScrollbars = attachOverlayScrollbars(detailsBodyRef.value);
+      contentResizeObserver = new ResizeObserver(() => detailsScrollbars?.update());
+      observeDetailsContent();
+    }
+
+    function releaseDetailsScrollbars() {
+      detailsScrollbars?.detach();
+      detailsScrollbars = null;
+      contentResizeObserver?.disconnect();
+      contentResizeObserver = null;
+      observedContent = null;
     }
 
+    onMounted(() => {
+      ensureDetailsScrollbars();
+    });
+
+    // Covers landing rerenders (thumb geometry re-read) plus the rare
+    // dynamic-slot cases: a slot appearing after mount attaches the
+    // chrome, a slot removed at runtime tears it down (element-identity
+    // check, not the frozen hasDetails computed).
+    onUpdated(() => {
+      if (detailsBodyRef.value) {
+        ensureDetailsScrollbars();
+        observeDetailsContent();
+        detailsScrollbars?.update();
+      } else if (detailsScrollbars) {
+        releaseDetailsScrollbars();
+      }
+    });
+
+    onBeforeUnmount(() => {
+      releaseDetailsScrollbars();
+    });
+
     return () => (
       <div class={`hk-error-landing is-${props.tone}${props.variant === "inline" ? " is-inline" : ""}`}>
         <div class="hk-error-landing__card">
           {slots.brand?.()}
 
           <div class="hk-error-landing__icon" aria-hidden="true">
-            {props.tone === "info" ? <Info size={26} /> : <TriangleAlert size={26} />}
+            {props.tone === "info" ? <Info size={28} /> : <TriangleAlert size={28} />}
           </div>
 
-          <h1 class="hk-error-landing__title">{titleText.value}</h1>
-
-          {props.description && <p class="hk-error-landing__desc">{props.description}</p>}
-
           {(props.code || props.status != null) && (
             <div class="hk-error-landing__meta">
-              {props.code && <code class="hk-error-landing__code">{props.code}</code>}
-              {props.status != null && <span class="hk-error-landing__status">HTTP {props.status}</span>}
+              {/* The landing-scoped selectors (.hk-error-landing__code/
+                  __status) and family tests rely on the class falling
+                  through onto the badge root — HkBadge must stay
+                  single-rooted for that contract to hold. */}
+              {props.code && (
+                <HkBadge class="hk-error-landing__code" variant={codeBadgeVariant.value} size="sm" mono>
+                  {props.code}
+                </HkBadge>
+              )}
+              {props.status != null && (
+                <HkBadge class="hk-error-landing__status" variant="muted" size="sm" mono>
+                  HTTP {props.status}
+                </HkBadge>
+              )}
             </div>
           )}
 
+          <h1 class="hk-error-landing__title">{titleText.value}</h1>
+
+          {props.description && <p class="hk-error-landing__desc">{props.description}</p>}
+
           {hasDetails.value && (
             <div class="hk-error-landing__details">
-              <button
-                type="button"
-                class="hk-error-landing__details-toggle"
-                aria-expanded={detailsExpanded.value}
-                onClick={toggleDetails}
-              >
-                {detailsExpanded.value ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+              <div class="hk-error-landing__details-label" aria-hidden="true">
+                <Braces size={11} />
                 <span>{t("hikari::errors.rawDetails", "Raw error details")}</span>
-              </button>
-              {detailsExpanded.value && (
-                <div class="hk-error-landing__details-body">{slots.default?.()}</div>
-              )}
+              </div>
+              <div class="hk-error-landing__details-pane">
+                <div ref={detailsBodyRef} class="hk-error-landing__details-body">
+                  {slots.default?.()}
+                </div>
+              </div>
             </div>
           )}
 

package/src/components/HkModal.bodyrhythm.test.ts

@@ -0,0 +1,40 @@
+/**
+ * Source contract for the modal body's default vertical rhythm (2026-09-08
+ * user direction: window bodies keep a little distance between their
+ * elements without every consumer hand-rolling a gap).
+ *
+ * `.hk-modal-body-inner` spaces its bare stacked children with a
+ * host-tunable custom property:
+ *   --hk-modal-body-gap  margin between adjacent direct children
+ *                        (block layout collapses it with the children's
+ *                        own margins, so it never doubles spacing)
+ *
+ * Pinned here so a refactor cannot silently regress to the
+ * padding-only body that left every unstyled window glued together —
+ * the same class of "looks fixed but never shipped" failure as the
+ * overflow-poll incident.
+ */
+import { beforeAll, 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));
+const src = readFileSync(join(here, "HkModal.scss"), "utf-8");
+
+describe("HkModal body rhythm contract", () => {
+  let inner = "";
+  beforeAll(() => {
+    inner = src.match(/\.hk-modal-body-inner\s*{[\s\S]*?\n}/)?.[0] ?? "";
+  });
+
+  it("spaces bare stacked children with --hk-modal-body-gap", () => {
+    expect(inner).toContain("& > * + *");
+    expect(inner).toMatch(/--hk-modal-body-gap,\s*0\.75rem/);
+    expect(inner).toContain("margin-top: var(--hk-modal-body-gap");
+  });
+
+  it("keeps the body padding hook unchanged", () => {
+    expect(inner).toContain("padding: var(--hk-modal-padding-body");
+  });
+});

package/src/components/HkModal.scss

@@ -228,6 +228,17 @@
 
 .hk-modal-body-inner {
   padding: var(--hk-modal-padding-body, 1.5rem);
+
+  // Default vertical rhythm between bare stacked children (user direction
+  // 2026-09-08: window bodies keep a little distance between their elements
+  // without every consumer hand-rolling a gap). Block layout collapses
+  // adjacent vertical margins, so this composes with — never doubles — a
+  // consumer's own sibling margins; windows that manage their own rhythm
+  // through a single root wrapper are unaffected, and hosts can flatten it
+  // per window with `--hk-modal-body-gap: 0`.
+  & > * + * {
+    margin-top: var(--hk-modal-body-gap, 0.75rem);
+  }
 }
 
 // ------

package/src/components/HkThemeToggle.tsx

@@ -88,12 +88,16 @@ export const HkThemeToggle = defineComponent({
     const { t } = useI18n();
     const { currentTheme, currentMode, effectiveMode, geo, setTheme, setMode, toggleMode, allThemeList, addCustomTheme, removeCustomTheme, customThemes } = useTheme();
 
-    /** Resolve a row's full definition for the item slots: the live
-     *  preset table first (stock + registered brand themes), then the
-     *  user's stored custom schemes. */
+    /** Resolve a row's full definition for the item slots: the user's
+     *  stored custom schemes first, then the live preset table — the SAME
+     *  precedence getAllThemePresets applies at apply time, so a row that
+     *  shadows a builtin id (in-place preset override) shows the anatomy
+     *  of the scheme that actually renders, not the shadowed factory. */
     function presetOf(id: ThemeId): ThemePreset | CustomThemePreset | undefined {
+      const custom = customThemes.value.find((c) => c.id === id);
+      if (custom) return custom;
       if (id in themePresets) return themePresets[id as keyof typeof themePresets];
-      return customThemes.value.find((c) => c.id === id);
+      return undefined;
     }
 
     const menuOpen = ref(false);

package/src/errorReporting/HkErrorReportingOverlay.tsx

@@ -17,8 +17,8 @@ import "./HkErrorReportingOverlay.scss";
  * Renders nothing until the error-reporting state is raised. The card is
  * the family-wide HkErrorLanding (same design language as every unified
  * error surface): tone icon, headline, the error name as the code chip,
- * the message as the description, the raw error record in a collapsible
- * JSON tree, and Home / Retry actions.
+ * the message as the description, the raw error record in the fixed-height
+ * raw-details pane, and Home / Retry actions.
  *
  * Mounted by `createErrorReporting` on a dedicated root appended to
  * `document.body` via its own tiny app instance, so it keeps working even

package/src/theme/useTheme.test.ts

@@ -137,3 +137,92 @@ describe("useTheme lean cssvar injection", () => {
     expect(blocks[0].textContent).not.toBe(before);
   });
 });
+
+describe("useTheme preset/custom shadowing", () => {
+  let theme: ThemeModule;
+  let presetModule: typeof import("./presets");
+
+  beforeEach(async () => {
+    vi.resetModules();
+    vi.unstubAllGlobals();
+    localStorage.clear();
+    document.documentElement.style.cssText = "";
+    document.documentElement.removeAttribute("data-theme");
+    document.documentElement.removeAttribute("data-mode");
+    document.head.querySelectorAll("style[data-hikari-theme-vars]").forEach((el) => el.remove());
+    vi.stubGlobal("fetch", vi.fn(async () => {
+      throw new Error("offline");
+    }));
+    // Same import context as useTheme so both share one presets instance.
+    presetModule = await import("./presets");
+    theme = await import("./useTheme");
+  });
+
+  afterEach(() => {
+    theme.stopThemeClock();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  // A custom whose id equals a builtin shadows it at apply time
+  // (getAllThemePresets). The picker list must agree: ONE row per id,
+  // flagged custom — the in-place preset override grammar. The primary
+  // shifts so an applied override is distinguishable from the factory.
+  function override(id: string) {
+    const nord = presetModule.themePresets.nord;
+    return {
+      id,
+      name: `${id} (edited)`,
+      dark: { ...nord.dark, primary: { r: 1, g: 2, b: 3 } },
+      light: { ...nord.light },
+    };
+  }
+
+  it("allThemeList dedupes a builtin id shadowed by a custom, flagging it custom", () => {
+    theme.initTheme();
+    const th = theme.useTheme();
+    th.addCustomTheme(override("nord"));
+    const rows = th.allThemeList.value.filter((r) => r.id === "nord");
+    expect(rows).toHaveLength(1);
+    expect(rows[0].isCustom).toBe(true);
+    expect(rows[0].name).toBe("nord (edited)");
+    // Pure custom ids stay listed as customs; untouched builtins stay builtin.
+    expect(th.allThemeList.value.some((r) => r.id === "gruvbox" && !r.isCustom)).toBe(true);
+  });
+
+  it("applyTheme renders the shadowing custom's tokens", () => {
+    theme.initTheme();
+    const th = theme.useTheme();
+    th.setTheme("nord");
+    const before = document.head.querySelector("style[data-hikari-theme-vars]")!.textContent;
+    th.addCustomTheme(override("nord"));
+    th.setTheme("nord");
+    const after = document.head.querySelector("style[data-hikari-theme-vars]")!.textContent;
+    expect(after).not.toBe(before);
+  });
+
+  it("removing a shadowed builtin id restores the factory preset selection", () => {
+    theme.initTheme();
+    const th = theme.useTheme();
+    th.addCustomTheme(override("nord"));
+    th.setTheme("nord");
+    expect(document.documentElement.getAttribute("data-theme")).toBe("nord");
+    th.removeCustomTheme("nord");
+    // Still on the id — now backed by the factory preset again.
+    expect(th.currentTheme.value).toBe("nord");
+    expect(th.allThemeList.value.find((r) => r.id === "nord")?.isCustom).toBe(false);
+    expect(th.customThemes.value.some((c) => c.id === "nord")).toBe(false);
+  });
+
+  it("removing a pure custom id resets the selection to the default theme", () => {
+    theme.initTheme();
+    const th = theme.useTheme();
+    th.setTheme("nord");
+    th.addCustomTheme({ ...override("nord"), id: "my-own" });
+    th.setTheme("my-own");
+    expect(document.documentElement.getAttribute("data-theme")).toBe("my-own");
+    th.removeCustomTheme("my-own");
+    expect(th.currentTheme.value).not.toBe("my-own");
+    expect(th.allThemeList.value.some((r) => r.id === "my-own")).toBe(false);
+  });
+});

package/src/theme/useTheme.ts

@@ -281,16 +281,24 @@ export function useTheme() {
   const effectiveMode = computed(() => resolveEffectiveMode(currentMode.value));
 
   const allThemeList = computed(() => {
-    const builtIn = (Object.keys(themePresets) as string[]).map((id) => ({
-      id,
-      name: themePresets[id as keyof typeof themePresets].name,
-      isCustom: false,
-    }));
     const custom = customThemes.value.map((ct: CustomThemePreset) => ({
       id: ct.id,
       name: ct.name,
       isCustom: true,
     }));
+    // A custom overriding a builtin id SHADOWS it — the same rule
+    // getAllThemePresets applies at apply time — so the picker shows ONE
+    // row per id (a duplicate key row would be unselectable dead chrome),
+    // flagged custom so the delete affordance doubles as "restore the
+    // factory preset".
+    const customIds = new Set(custom.map((c) => c.id));
+    const builtIn = (Object.keys(themePresets) as string[])
+      .filter((id) => !customIds.has(id))
+      .map((id) => ({
+        id,
+        name: themePresets[id as keyof typeof themePresets].name,
+        isCustom: false,
+      }));
     return [...builtIn, ...custom];
   });
 
@@ -319,7 +327,15 @@ export function useTheme() {
     removeCustomThemeFromStorage(id);
     customThemes.value = loadCustomThemes();
     if (currentTheme.value === id) {
-      setTheme(resolveDefaultTheme());
+      // A deleted custom whose id still resolves as a builtin preset falls
+      // back to the FACTORY preset (an in-place preset override restoring
+      // its shipped look); a truly custom id would no longer resolve, so
+      // the selection resets to the default theme.
+      if (themePresets[id as keyof typeof themePresets]) {
+        setTheme(id);
+      } else {
+        setTheme(resolveDefaultTheme());
+      }
     }
   }