@celestia-island/hikari 0.55.201 → 0.55.203

package/package.json

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

package/src/animation/registerAnimations.ts

@@ -66,6 +66,9 @@ export function isCssAnimationsEnabled(): boolean {
 registerCssAnimation("s-nav-item-badge-pulse", { infinite: true });
 // styles/admin-tokens.scss — auth card entrance (plays once).
 registerCssAnimation("s-auth-card-in");
+// HkPaneHolder's reveal (opacity-only, one shot) — the keep-mounted pane
+// slot's entry, the dissolve-family language for persistent panes.
+registerCssAnimation("hk-pane-holder-in");
 // styles/admin-tokens.scss — status-bar recovery flash (plays once):
 // the traffic light's green background blink when a dropped connection
 // comes back.

package/src/components/HkAdminHeader.test.tsx

@@ -129,6 +129,28 @@ describe("HkAdminHeader", () => {
     expect(withoutTitle.querySelector("header > div")?.textContent).not.toContain("Dashboard");
   });
 
+  it("renders no avatar trigger when no identity is injected", () => {
+    // 2026-10-24 regression: the trigger rendered unconditionally, so a
+    // host with no identity props got a stray "?" button opening an
+    // empty "Signing in…" menu with a lone sign-out row. The identity
+    // cluster is injection-driven now — no identity, no trigger.
+    const anonymous = mount(headerNode({ username: "", title: "Anywhere" }));
+    expect(avatarButton(anonymous)).toBeNull();
+    // The page title still rides the left wing without the avatar.
+    expect(anonymous.querySelector("header > div")?.textContent).toContain("Anywhere");
+
+    // The pending identity flow is EXPLICIT injection: signingInLabel /
+    // onForceSignOut keep the "?" trigger alive so the force-sign-out
+    // escape stays reachable during a wedged session restore.
+    const pending = mount(headerNode({
+      username: "",
+      signingInLabel: "Signing in…",
+      onForceSignOut: () => {},
+    }));
+    const btn = avatarButton(pending) as HTMLButtonElement;
+    expect(btn.querySelector(".s-user-avatar")?.textContent).toBe("?");
+  });
+
   it("toggles the user dropdown with the profile identity header in menu mode", async () => {
     const c = mount(headerNode({
       userEmail: "alice@example.com",

package/src/components/HkAdminHeader.tsx

@@ -87,6 +87,23 @@ export const HkAdminHeader = defineComponent({
     const avatarModalOpen = ref(false);
     const avatarFailed = ref(false);
 
+    // The identity cluster is INJECTED, not assumed (2026-10-24): the
+    // trigger renders only when the host actually supplied an identity
+    // (username / email / avatar) or explicitly opted into the pending
+    // identity flow (signingInLabel / onForceSignOut — the fetchUser
+    // race machinery whose "?" trigger opens the force-sign-out escape).
+    // A host that passes none of those has no account surface, and the
+    // old unconditional render left it a stray "?" button opening an
+    // empty "Signing in…" menu.
+    const identityMounted = computed(
+      () =>
+        !!props.username ||
+        !!props.userEmail ||
+        !!props.avatarUrl ||
+        props.signingInLabel !== undefined ||
+        props.onForceSignOut !== undefined,
+    );
+
     function onAvatarClick(e: MouseEvent) {
       e.stopPropagation();
       if (props.avatarAction === "drawer") {
@@ -192,35 +209,37 @@ export const HkAdminHeader = defineComponent({
               <Menu size={20} class="s-admin-header-hamburger-icon" />
             </HButton>
           )}
-          <button
-            class="s-admin-header-avatar"
-            aria-label={props.avatarTriggerLabel ?? t("hikari::adminHeader.avatarTrigger", "Account menu")}
-            aria-haspopup={props.avatarAction === "drawer" ? "dialog" : "menu"}
-            aria-expanded={props.avatarAction === "menu" ? userMenuOpen.value : undefined}
-            onClick={onAvatarClick}
-          >
-            {/* Deliberately NO hover veil here: the trigger opens the user
-             *  MENU (the avatar edit lives one row down as the Camera
-             *  item), so a camera overlay would promise click-to-change
-             *  and lie (user report 2026-09-16). */}
-            {props.avatarUrl && !avatarFailed.value ? (
-              <img
-                src={props.avatarUrl}
-                alt={props.username}
-                class="s-admin-header-avatar-img"
-                onError={() => { avatarFailed.value = true; }}
-              />
-            ) : (
-              // Letter fallback on the shared avatar primitive — the
-              // same filled-circle grammar as the chat frontend's
-              // trigger. The old border-2 ring made the console's
-              // avatar read as a different control (user report
-              // 2026-09-12: 前后台头像不一致).
-              <span class="s-user-avatar">
-                {props.username?.charAt(0).toUpperCase() || "?"}
-              </span>
-            )}
-          </button>
+          {identityMounted.value && (
+            <button
+              class="s-admin-header-avatar"
+              aria-label={props.avatarTriggerLabel ?? t("hikari::adminHeader.avatarTrigger", "Account menu")}
+              aria-haspopup={props.avatarAction === "drawer" ? "dialog" : "menu"}
+              aria-expanded={props.avatarAction === "menu" ? userMenuOpen.value : undefined}
+              onClick={onAvatarClick}
+            >
+              {/* Deliberately NO hover veil here: the trigger opens the user
+               *  MENU (the avatar edit lives one row down as the Camera
+               *  item), so a camera overlay would promise click-to-change
+               *  and lie (user report 2026-09-16). */}
+              {props.avatarUrl && !avatarFailed.value ? (
+                <img
+                  src={props.avatarUrl}
+                  alt={props.username}
+                  class="s-admin-header-avatar-img"
+                  onError={() => { avatarFailed.value = true; }}
+                />
+              ) : (
+                // Letter fallback on the shared avatar primitive — the
+                // same filled-circle grammar as the chat frontend's
+                // trigger. The old border-2 ring made the console's
+                // avatar read as a different control (user report
+                // 2026-09-12: 前后台头像不一致).
+                <span class="s-user-avatar">
+                  {props.username?.charAt(0).toUpperCase() || "?"}
+                </span>
+              )}
+            </button>
+          )}
           {/* WHERE am I — the open view's title, not the nickname. The
               1.5 line-height (in the class) keeps descenders (g, y, p)
               inside the truncate clip box: the default text-sm box is

package/src/components/HkAdminShell.test.tsx

@@ -538,4 +538,74 @@ describe("HkAdminShell", () => {
     expect(tripleInner?.style.paddingLeft).toBe("2rem");
     expect(tripleInner?.style.paddingRight).toBe("2rem");
   });
+
+  it("reserves the footer band only when a status bar is actually injected", () => {
+    // 2026-10-24 regression: the body carried
+    // paddingBottom: var(--s-footer-height) unconditionally — a dead 3rem
+    // blank under every console that never mounts a status bar. The
+    // reservation is injection-driven now: the shell's own footer slot
+    // brings it, an explicit prop overrides it, nothing else reserves.
+    setWidth(1024);
+
+    // No footer slot, no prop: NO band.
+    const plain = mount(shellNode(
+      { navTitle: "Navigation" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    const plainBody = plain.querySelector(".s-admin-shell-body") as HTMLElement;
+    expect(plainBody.style.paddingBottom).toBe("0px");
+    expect(plain.querySelector("footer.s-status-bar")).toBeNull();
+
+    // A filled footer slot renders the fixed .s-status-bar and reserves
+    // its band by default.
+    const withBar = mount(shellNode(
+      { navTitle: "Navigation" },
+      {
+        header: () => null,
+        sidebar: NAV,
+        content: CONTENT,
+        footer: () => h("div", { class: "bar-mock" }, "STATUS"),
+      },
+    ));
+    const barBody = withBar.querySelector(".s-admin-shell-body") as HTMLElement;
+    // A fallback-less var() survives as the direct longhand here — the
+    // shorthand round-trip failures happy-dom shows elsewhere in this
+    // file do not apply to a single-track longhand read.
+    expect(barBody.style.paddingBottom).toBe("var(--s-footer-height)");
+    expect(withBar.querySelector("footer.s-status-bar .bar-mock")).toBeTruthy();
+
+    // An explicit prop overrides BOTH branches: the opt-in for hosts that
+    // pin their own fixed bar outside the shell…
+    const external = mount(shellNode(
+      { navTitle: "Navigation", footerHeight: "3.5rem" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    expect((external.querySelector(".s-admin-shell-body") as HTMLElement).style.paddingBottom)
+      .toBe("3.5rem");
+    // …and a custom band for hosts that fill the slot anyway. "0px"
+    // explicitly re-kills it.
+    const explicitZero = mount(shellNode(
+      { navTitle: "Navigation", footerHeight: "0px" },
+      {
+        header: () => null,
+        sidebar: NAV,
+        content: CONTENT,
+        footer: () => h("div", { class: "bar-mock" }, "STATUS"),
+      },
+    ));
+    expect((explicitZero.querySelector(".s-admin-shell-body") as HTMLElement).style.paddingBottom)
+      .toBe("0px");
+
+    // The empty string is an EXPLICIT value, not an absent one: `!==`
+    // undefined (not truthiness) is the gate, so "" passes through
+    // verbatim exactly as the old code passed it — same contract the
+    // contentPadding longhand pins below. A truthiness mutant would
+    // reroute "" into the slot branch; this mount catches it.
+    const explicitEmpty = mount(shellNode(
+      { navTitle: "Navigation", footerHeight: "" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    expect((explicitEmpty.querySelector(".s-admin-shell-body") as HTMLElement).style.paddingBottom)
+      .toBe("");
+  });
 });

package/src/components/HkAdminShell.tsx

@@ -1,5 +1,5 @@
-import { computed, defineComponent, ref } from "vue";
-import { HDrawer, HScrollContainer, useBreakpoint } from "@celestia-island/hikari";
+import { computed, defineComponent, ref, type PropType } from "vue";
+import { HkCrossfade, HDrawer, HScrollContainer, useBreakpoint } from "@celestia-island/hikari";
 import { provideActionBar } from "../composables/useActionBar";
 import { useI18n } from "../i18n/context";
 
@@ -140,7 +140,17 @@ export const HkAdminShell = defineComponent({
      *  1024px "lg" breakpoint; lower it (e.g. 768) for tablet-friendly
      *  admins that keep the sidebar at md widths. */
     mobileBreakpoint: { type: Number, default: 1024 },
-    footerHeight: { type: String, default: "var(--s-footer-height)" },
+    /** Height reserved under the scroll body for a fixed status-bar
+     *  band. INJECTION-DRIVEN (2026-10-24): the reservation tracks
+     *  whether the shell actually renders a status bar — a filled
+     *  `footer` slot (the shell's own fixed `.s-status-bar`) reserves
+     *  `var(--s-footer-height)` by default, and with NO footer slot
+     *  nothing is reserved (`0px`). The old unconditional default
+     *  reserved the band on every host, leaving a dead 3rem blank under
+     *  consoles that never mount a status bar. Hosts that pin their OWN
+     *  fixed bar outside the shell opt back in by passing an explicit
+     *  value (e.g. `"var(--s-footer-height)"`). */
+    footerHeight: { type: String, default: undefined },
     navTitle: { type: String, default: undefined },
     /** Extra class for the mobile nav drawer's panel — lets consumers zero
      *  nested paddings so drawer nav rows and a `userPanel` footer share
@@ -152,6 +162,13 @@ export const HkAdminShell = defineComponent({
      *  verbatim at every width unless the page opts into
      *  `contentBleedOnMobile`. */
     contentPadding: { type: String, default: "1.5rem" },
+    /** Identity of the content page on stage (task-4, 2026-10-24):
+     *  pass the current view/route key and the content area swaps pages
+     *  through the family crossfade — the library owns the page-slot
+     *  mechanism instead of every host hand-wrapping it. Omitted (or
+     *  null) renders the slot bare: canvas-like hosts that mount one
+     *  persistent stage opt out. */
+    contentKey: { type: [String, Number] as PropType<string | number | null>, default: null },
     /** Whether the content on screen is a CANVAS — a 2D board or the 3D
      *  scene — that must span the full phone width. OPT-IN, declared by
      *  the page that renders the canvas (2026-10-04 user direction: the
@@ -186,6 +203,19 @@ export const HkAdminShell = defineComponent({
 
     const actionBar = provideActionBar();
 
+    // The status-bar band exists only when the shell renders one (the
+    // footer slot) or the host pins its own bar and says so via the prop
+    // — an unreserved shell carries no dead clearance (2026-10-24: the
+    // unconditional default used to blank 3rem under every console that
+    // never mounted a status bar). Computed INSIDE the render (not a
+    // `computed()`): slot PRESENCE is what it reads, and a cached
+    // computed is not reliably invalidated by a slot appearing or
+    // disappearing, while every re-render re-evaluates this line.
+    function footerPad(): string {
+      if (props.footerHeight !== undefined) return props.footerHeight;
+      return slots.footer ? "var(--s-footer-height)" : "0px";
+    }
+
     const toggleHamburger = () => {
       sidebarOpen.value = !sidebarOpen.value;
     };
@@ -215,7 +245,7 @@ export const HkAdminShell = defineComponent({
           </div>
         )}
 
-        <div class="s-admin-shell-body" style={{ paddingBottom: props.footerHeight }}>
+        <div class="s-admin-shell-body" style={{ paddingBottom: footerPad() }}>
           {isDesktop.value && !props.sidebarCollapsed && slots.sidebar && (
             <aside
               style={{
@@ -234,7 +264,15 @@ export const HkAdminShell = defineComponent({
               {/* Padding lives INSIDE the scroll viewport (an inner
                   wrapper) so card box-shadows are not clipped at the
                   viewport edges. */}
-              <div style={contentStyle.value}>{slots.content?.()}</div>
+              <div style={contentStyle.value}>
+                {props.contentKey != null ? (
+                  <HkCrossfade swapKey={props.contentKey} class="s-admin-shell-swap">
+                    {slots.content?.()}
+                  </HkCrossfade>
+                ) : (
+                  slots.content?.()
+                )}
+              </div>
             </HScrollContainer>
           </main>
 

package/src/components/HkAdminTablePage.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, type Component, type PropType } from "vue";
 import { HAlert, HCard, HEmptyState, HSpinner, HTable, useI18n } from "@celestia-island/hikari";
+import HkCrossfade from "./HkCrossfade";
 import { HkPageHeader } from "./HkPageHeader";
 import type { HkRowManageGate } from "./HkTable";
 
@@ -98,37 +99,53 @@ export const HkAdminTablePage = defineComponent({
            *  render alongside the error branch (its precondition — rows on
            *  screen — is exactly what the error branch removes). */}
           {props.staleError && !props.error ? <HAlert message={props.staleError} /> : null}
-          {props.error ? (
-            <HAlert message={props.error} />
-          ) : props.loading && !props.rows.length ? (
-            <HSpinner center />
-          ) : !props.rows.length ? (
-            <HEmptyState
-              boxed
-              title={emptyTitle}
-              description={props.emptyDescription}
-            >
-              {emptySlots}
-            </HEmptyState>
-          ) : slots.body ? (
-            <div class="hk-admin-table-page-body">{slots.body()}</div>
-          ) : (
-            <HCard padded={false}>
-              <HTable
-                columns={props.columns}
-                rows={props.rows}
-                rowKey={props.rowKey}
-                draggable={props.draggable}
-                manageable={props.manageable}
-                onReorder={(from: number, to: number) => emit("reorder", from, to)}
-                onManage={(row: Record<string, unknown>, opener: HTMLElement) =>
-                  emit("manage", row, opener)
-                }
+          {/* The body is a page slot with three generations — error,
+              loading/empty, content (task-4, 2026-10-24): the family
+              crossfade owns the exchange, so every admin table page in
+              every host dissolves between them instead of popping. The
+              key collapses loading-vs-empty into one "placeholder"
+              generation: spinner → empty is a data arrival, not a slot
+              identity change worth animating. */}
+          <HkCrossfade
+            swapKey={
+              props.error ? "error"
+                : props.loading && !props.rows.length ? "placeholder"
+                  : !props.rows.length ? "placeholder"
+                    : "content"
+            }
+          >
+            {props.error ? (
+              <HAlert message={props.error} />
+            ) : props.loading && !props.rows.length ? (
+              <HSpinner center />
+            ) : !props.rows.length ? (
+              <HEmptyState
+                boxed
+                title={emptyTitle}
+                description={props.emptyDescription}
               >
-                {slots}
-              </HTable>
-            </HCard>
-          )}
+                {emptySlots}
+              </HEmptyState>
+            ) : slots.body ? (
+              <div class="hk-admin-table-page-body">{slots.body()}</div>
+            ) : (
+              <HCard padded={false}>
+                <HTable
+                  columns={props.columns}
+                  rows={props.rows}
+                  rowKey={props.rowKey}
+                  draggable={props.draggable}
+                  manageable={props.manageable}
+                  onReorder={(from: number, to: number) => emit("reorder", from, to)}
+                  onManage={(row: Record<string, unknown>, opener: HTMLElement) =>
+                    emit("manage", row, opener)
+                  }
+                >
+                  {slots}
+                </HTable>
+              </HCard>
+            )}
+          </HkCrossfade>
           {slots["create-modal"]?.()}
           {slots["edit-modal"]?.()}
         </div>

package/src/components/HkPaneHolder.scss

@@ -0,0 +1,33 @@
+// HkPaneHolder — the keep-mounted pane slot (see the TSX doc for when to
+// choose it over the dissolve primitives).
+
+.hk-pane-holder {
+  display: none;
+
+  // Active: back in the layout with the family dissolve's own language —
+  // a one-shot opacity reveal. No transform: a pane sliding in would
+  // disagree with every crossfade around it.
+  &[data-active] {
+    display: block;
+    animation: hk-pane-holder-in var(--duration-normal, 0.3s) ease-out;
+  }
+}
+
+@keyframes hk-pane-holder-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+// Opt-outs: the global animation switch is the host's, reduced motion is
+// the OS's — the holder obeys both (an inline-less rule; the animation is
+// declared here in the sheet, so unlike HkTransitionContainer's inline
+// duration a media query CAN reach it).
+html[data-css-animations="0"] .hk-pane-holder[data-active] {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-pane-holder[data-active] {
+    animation-duration: var(--duration-fast, 0.15s);
+  }
+}

package/src/components/HkPaneHolder.test.tsx

@@ -0,0 +1,99 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import sass from "sass";
+
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref, type App } from "vue";
+
+import HkPaneHolder from "./HkPaneHolder";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+const containers: HTMLElement[] = [];
+
+function mountHolder(active: boolean): {
+  app: App;
+  root: HTMLElement;
+  child: HTMLElement;
+  setActive: (v: boolean) => void;
+} {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+  const isActive = ref(active);
+  const Child = defineComponent({
+    setup() {
+      // The point of the holder: the pane's instance state SURVIVES
+      // deactivation. A counter proves the component never unmounted.
+      const mounts = ref(0);
+      const tick = () => { mounts.value += 1; };
+      return () => h("button", { type: "button", onClick: tick, "data-mounts": String(mounts.value) }, "pane");
+    },
+  });
+  const Wrapper = defineComponent({
+    render: () =>
+      h(HkPaneHolder, { active: isActive.value }, { default: () => h(Child) }),
+  });
+  const app = createApp(Wrapper);
+  app.mount(container);
+  const root = container.firstElementChild as HTMLElement;
+  const child = root.firstElementChild as HTMLElement;
+  return { app, root, child, setActive: (v: boolean) => { isActive.value = v; } };
+}
+
+afterEach(() => {
+  for (const c of containers.splice(0)) c.remove();
+});
+
+describe("HkPaneHolder — DOM contract", () => {
+  it("renders the holder class and the data-active attribute only when active", async () => {
+    const t = mountHolder(false);
+    expect(t.root.classList.contains("hk-pane-holder")).toBe(true);
+    expect(t.root.hasAttribute("data-active")).toBe(false);
+    expect(t.child).toBeDefined(); // mounted, not unmounted
+    t.setActive(true);
+    await nextTick();
+    expect(t.root.hasAttribute("data-active")).toBe(true);
+    t.app.unmount();
+  });
+
+  it("keeps component state across deactivate/reactivate (the entire point)", async () => {
+    const t = mountHolder(true);
+    (t.child as HTMLButtonElement).click();
+    (t.child as HTMLButtonElement).click();
+    await new Promise((r) => setTimeout(r, 0));
+    expect(t.child.getAttribute("data-mounts")).toBe("2");
+    t.setActive(false);
+    await new Promise((r) => setTimeout(r, 0));
+    t.setActive(true);
+    await new Promise((r) => setTimeout(r, 0));
+    const childAfter = t.root.firstElementChild as HTMLElement;
+    // Same instance: the counter did not reset to 0.
+    expect(childAfter.getAttribute("data-mounts")).toBe("2");
+    t.app.unmount();
+  });
+});
+
+describe("HkPaneHolder — stylesheet contract", () => {
+  const css = sass.compile(join(here, "HkPaneHolder.scss")).css;
+  const scss = readFileSync(join(here, "HkPaneHolder.scss"), "utf-8");
+
+  it("hides the base holder and reveals on [data-active]", () => {
+    expect(css).toMatch(/\.hk-pane-holder\s*\{[^}]*display:\s*none/s);
+    expect(css).toMatch(/\.hk-pane-holder\[data-active\]\s*\{[^}]*display:\s*block/s);
+  });
+
+  it("reveals with opacity only — no transform, ever", () => {
+    const keyframe = /@keyframes\s+hk-pane-holder-in\s*\{([^}]*)\}/s.exec(css);
+    expect(keyframe).not.toBeNull();
+    expect(keyframe![1]).toContain("opacity");
+    expect(keyframe![1]).not.toContain("transform");
+    expect(keyframe![1]).not.toContain("translate");
+  });
+
+  it("obeys the global animation switch and reduced motion", () => {
+    expect(css).toMatch(/html\[data-css-animations="0"\][^{]*\{[^}]*animation:\s*none/s);
+    expect(css).toMatch(/prefers-reduced-motion[^{]*\{[^}]*animation-duration/s);
+  });
+});

package/src/components/HkPaneHolder.tsx

@@ -0,0 +1,57 @@
+import { defineComponent } from "vue";
+
+import "./HkPaneHolder.scss";
+
+/**
+ * HkPaneHolder — the keep-mounted pane slot.
+ *
+ * The third pane-swap surface, for the class of content the dissolve
+ * primitives cannot serve: PERSISTENT panes whose instance must survive
+ * while another pane is active — draft stores (an editor whose unsaved
+ * state lives in the component), canvases/WebGL stages that are too
+ * expensive to rebuild, or sockets that must not unplug.
+ *
+ * `HkCrossfade` / `HkTransitionContainer` swap by keying: the leaving
+ * generation UNMOUNTS when the dissolve completes — exactly wrong for a
+ * draft store. This holder instead keeps every pane in the tree and
+ * toggles reachability: `display: none` while inactive (out of layout,
+ * inert), `display: block` plus a one-shot opacity reveal when it
+ * becomes active. The reveal is opacity-ONLY at the family's
+ * `--duration-normal`, matching the dissolve language — no movement,
+ * ever.
+ *
+ * Contract:
+ * - `active` is a boolean, not a key: the holder IS one pane. A tab
+ *   surface renders one holder per persistent pane beside the ordinary
+ *   panel slots it already has.
+ * - The inactive pane is `display: none` (inert, out of the layout,
+ *   unreadable by assistive tech) but its component instances, state
+ *   and watchers all LIVE — that is the entire point.
+ * - The reveal animation is `hk-pane-holder-in` (opacity 0→1, one
+ *   shot, registered with the animation registry); reduced motion and
+ *   the global `data-css-animations="0"` switch clamp it to instant,
+ *   so the holder never animates for users who opted out.
+ * - No leave animation: the outgoing pane simply hides (it is usually
+ *   being covered by an incoming ordinary panel whose own dissolve is
+ *   the visible exchange).
+ */
+export const HkPaneHolder = defineComponent({
+  name: "HkPaneHolder",
+  props: {
+    /** Whether THIS pane is the active one. */
+    active: { type: Boolean, required: true },
+    tag: { type: String, default: "div" },
+  },
+  setup(props, { slots }) {
+    return () => {
+      const Tag = props.tag as "div" | "section";
+      return (
+        <Tag class="hk-pane-holder" data-active={props.active || undefined}>
+          {slots.default?.()}
+        </Tag>
+      );
+    };
+  },
+});
+
+export default HkPaneHolder;

package/src/components/paneSwap.contract.test.ts

@@ -51,6 +51,11 @@ const STANDARD_PANE_HOSTS: Array<{ file: string; marker: string; why: string }>
     marker: "<HkTransitionContainer",
     why: "settings sections are a page-scale pane slot (migrated 2026-10-23)",
   },
+  {
+    file: "HkAdminTablePage.tsx",
+    marker: "<HkCrossfade",
+    why: "the error/placeholder/content body is a page slot every admin table page inherits (2026-10-24)",
+  },
 ];
 
 /** Justified bespoke mechanisms: "<scss file>: <animation identifier>" → reason. */
@@ -66,6 +71,14 @@ const SANCTIONED_SWAP_KEYFRAMES: Record<string, string> = {
  *  animation must be argued, decorative pulses and spinners do not. */
 const SWAP_VOCABULARY = /(pane|swap|crossfade|morph|sheet)/;
 
+/** The primitives' own stylesheets ARE the sanctioned mechanism — their
+ *  keyframes are the family language itself, not bespoke swaps. */
+const PRIMITIVE_SHEETS = new Set([
+  "HkCrossfade.scss",
+  "HkTransitionContainer.scss",
+  "HkPaneHolder.scss",
+]);
+
 function readComponent(file: string): string {
   return readFileSync(join(componentsDir, file), "utf-8");
 }
@@ -124,6 +137,7 @@ describe("pane-swap contract", () => {
       for (const match of text.matchAll(/@keyframes\s+([\w-]+)/g)) {
         const name = match[1];
         if (!SWAP_VOCABULARY.test(name)) continue;
+        if (PRIMITIVE_SHEETS.has(file)) continue;
         const key = `${file}: ${name}`;
         if (!SANCTIONED_SWAP_KEYFRAMES[key]) offenders.push(`@keyframes ${key}`);
       }

package/src/index.ts

@@ -614,6 +614,7 @@ export { default as HkCopyBadge } from "./components/HkCopyBadge";
 export { default as HkConfirmDialog } from "./components/HkConfirmDialog";
 export { default as HkCrossfade } from "./components/HkCrossfade";
 export { default as HkTransitionContainer } from "./components/HkTransitionContainer";
+export { default as HkPaneHolder } from "./components/HkPaneHolder";
 export { default as HkWindowControls, isApplePlatform } from "./components/HkWindowControls";
 export { default as HkStatusRow } from "./components/HkStatusRow";
 export type { HkStatusRowTone } from "./components/HkStatusRow";

package/src/styles/admin-tokens.scss

@@ -1228,8 +1228,13 @@
   font-variant-numeric: tabular-nums;
 }
 
+// Full-viewport by default: the page does NOT assume a fixed status bar
+// is mounted under it (2026-10-24 — the old calc() subtracted
+// --s-footer-height unconditionally, stopping the background 3rem short
+// of the bottom on pages with no status bar). Hosts that DO pair the
+// auth page with a status bar subtract it themselves.
 .a-auth-page {
-  min-height: calc(100vh - var(--s-footer-height, 3rem));
+  min-height: 100vh;
 }
 
 // ── adjacent-button spacing (the button-row grammar) ──────────────────────