@celestia-island/hikari 0.55.221 → 0.55.223

package/package.json

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

package/src/components/HkAdminHeader.test.tsx

@@ -193,6 +193,21 @@ describe("HkAdminHeader", () => {
     expect(c.textContent).not.toContain("alice");
   });
 
+  it("reserves the workspace-switcher slot in drawer mode only", () => {
+    // 2026-10-29 user direction: the frontend header's left wing is
+    // avatar + ws-trigger; the console drawer face keeps the SLOT as a
+    // deliberate blank so the centre strip can never slide into the
+    // space — menu mode carries the page title in that position instead.
+    const drawer = mount(headerNode({ avatarAction: "drawer", userEmail: "alice@example.com" }));
+    const slot = drawer.querySelector(".s-admin-header-ws-slot");
+    expect(slot, "drawer face must render the reserved ws slot").toBeTruthy();
+    expect(slot?.getAttribute("aria-hidden")).toBe("true");
+
+    const menu = mount(headerNode({ title: "Providers", logoutLabel: "Log out" }));
+    expect(menu.querySelector(".s-admin-header-ws-slot")).toBeNull();
+    expect(menu.querySelector(".s-admin-header-title")).toBeTruthy();
+  });
+
   it("renders the signing-in placeholder with the force-sign-out escape when the identity is empty", async () => {
     const onForceSignOut = vi.fn();
     const c = mount(headerNode({

package/src/components/HkAdminHeader.tsx

@@ -249,6 +249,20 @@ export const HkAdminHeader = defineComponent({
               )}
             </button>
           )}
+          {/* The reserved workspace-switcher slot (drawer face only).
+              The chat header's left wing is avatar + ws-trigger button,
+              and that wing's min-content floor is what keeps the
+              header-centre strip off the space on a phone. The console
+              has no workspace concept, but the drawer face hides the
+              title too — without a stand-in the wing's floor is just
+              the 28px avatar and a wide centre strip slides left into
+              the slot and reads as hugging the avatar (2026-10-29 user
+              direction: 头像右侧留白，前后台布局统一). An aria-hidden
+              blank of the trigger's own footprint keeps both faces'
+              left wings at the same floor. */}
+          {props.avatarAction === "drawer" && (
+            <span class="s-admin-header-ws-slot" aria-hidden="true" />
+          )}
           {/* 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.tsx

@@ -1,135 +1,37 @@
-import { computed, defineComponent, ref, type PropType } from "vue";
-import { HkCrossfade, HDrawer, HScrollContainer, useBreakpoint } from "@celestia-island/hikari";
+import { defineComponent, h, type PropType } from "vue";
+import { HkFaceShell } from "./HkFaceShell";
 import { provideActionBar } from "../composables/useActionBar";
-import { useI18n } from "../i18n/context";
 
-/** CSS-wide keywords. A shorthand rebuilt from one of them is NOT a
- *  padding (`inherit 0 inherit` is rejected by every engine, measured in
- *  Chromium), so the declaration would be dropped WHOLE and the page
- *  would lose the vertical clearance too — worse than not bleeding. */
-const CSS_WIDE_KEYWORDS = new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
+// The padding-scan utilities moved INTO HkFaceShell with the content
+// host that applies them (2026-10-29 extraction). Re-exported here
+// because HkAdminShell.padding.test.ts and any external importer know
+// this module as their home — the extraction must not move the public
+// surface, only the implementation.
+export {
+  scanPaddingSides,
+  splitPaddingSides,
+  mobileSideGutterFree,
+} from "./HkFaceShell";
+export type { PaddingSidesScan } from "./HkFaceShell";
 
 /**
- * A scanned padding shorthand: the top-level `sides` plus whether the
- * value ENDED with every function closed and every quote terminated.
- * `balanced: false` means the scan cannot know where the value ends —
- * CSS closes an open function at EOF, so the authored declaration can
- * still be valid while a rewrite of it cannot be.
- */
-export interface PaddingSidesScan {
-  sides: string[];
-  balanced: boolean;
-}
-
-/**
- * Scan a CSS padding shorthand into its top-level tracks: split on
- * TOP-LEVEL whitespace, quote- and function-aware, so whitespace inside
- * a function belongs to that value — `calc(1rem + 2px)`,
- * `var(--pad, 1rem)` and a quoted argument are ONE track. A plain
- * `split(/\s+/)` shreds them (`["calc(1rem", "+", "2px)"]`), and the
- * rebuilt shorthand is invalid CSS — a browser drops the whole
- * declaration, taking with it the vertical clearance
- * `contentBleedOnMobile` promises to keep (rounds 2 and 3 of this change
- * hit exactly that; rounds 4 and 5 the escape and EOF variants). The
- * depth counter balances parentheses, so nested functions
- * (`clamp(1rem, min(2vw, 3px), 4rem)`) survive; a stray `)` never drives
- * the depth negative. Tabs and newlines are valid CSS separators and
- * split like spaces, and the whitespace around a shorthand yields no
- * empty tracks.
+ * HkAdminShell — the ADMIN face of the generalized shell
+ * (2026-10-29 extraction): HkFaceShell in document mode, plus the
+ * legacy action-bar channel. Everything structural — the frame, the
+ * optional sidebar and its mobile drawer, the scroll-viewport content
+ * host with `contentPadding` / `contentKey` / `contentBleedOnMobile`,
+ * the fixed footer band and its height reservation, the overlays slot —
+ * lives in HkFaceShell now; this component is a thin, behavior-identical
+ * wrapper kept for every existing consumer (props, slots and rendered
+ * classes are unchanged).
  *
- * Exported for its own unit test: happy-dom cannot round-trip
- * `var()`/`clamp()` values or the hostile inputs below, so the
- * component-level suite cannot observe them.
+ * The one thing the wrapper ADDS is its own action-bar provide: hosts
+ * of the pre-extraction contract read the registered actions through
+ * the header slot's `actions` param (the bar this shell provides
+ * itself). Faces that own their action bar — or their whole content
+ * lifecycle, like a canvas stage — consume HkFaceShell directly and
+ * provide whatever they want, closest to their pages.
  */
-export function scanPaddingSides(value: string): PaddingSidesScan {
-  const sides: string[] = [];
-  let current = "";
-  let depth = 0;
-  let quote = "";
-  for (const ch of value) {
-    if (quote) {
-      current += ch;
-      if (ch === quote) quote = "";
-      continue;
-    }
-    if (ch === "\"" || ch === "'") {
-      quote = ch;
-      current += ch;
-      continue;
-    }
-    if (ch === "(") depth += 1;
-    else if (ch === ")") depth = Math.max(0, depth - 1);
-    if (depth === 0 && /\s/.test(ch)) {
-      if (current) sides.push(current);
-      current = "";
-      continue;
-    }
-    current += ch;
-  }
-  if (current) sides.push(current);
-  return { sides, balanced: depth === 0 && quote === "" };
-}
-
-/** The tracks of {@link scanPaddingSides} — for callers that only need
- *  the split, and for the unit test that pins the splitting rules. */
-export function splitPaddingSides(value: string): string[] {
-  return scanPaddingSides(value).sides;
-}
-
-/**
- * The side-gutter-free form of a padding shorthand: the vertical tracks
- * survive, the horizontal ones become zero (`"1rem 2rem"` -> `"1rem 0
- * 1rem"`). The value is returned VERBATIM — the page keeps its padding
- * and simply does not bleed — whenever the shorthand cannot be rewritten
- * safely. That fallback IS the contract: emitting a declaration a browser
- * drops costs the page ALL FOUR sides, including the vertical clearance
- * this prop exists to keep.
- *
- * Verbatim cases:
- *
- * - an empty / whitespace-only value has nothing to strip;
- * - a LONE CSS-wide keyword cannot be combined per side (`inherit 0
- *   inherit` is not a padding — every engine rejects it);
- * - the value contains a CSS comment, whose text would land in the
- *   rebuilt declaration as a garbage track (`1rem 0 x`, measured in
- *   Chromium: dropped, all four sides lost);
- * - the value contains a backslash: this scanner does not decode CSS
- *   escapes, and an escape can hide a quote, a parenthesis or a whole
- *   keyword (`\69 nherit` IS `inherit` to an engine) — the literal text
- *   is not the value, so no rewrite of it is trustworthy (round 5);
- * - the value ends with a `!important` annotation: the annotation
- *   belongs to the DECLARATION, so a per-side rewrite would either
- *   silently lose the priority (`2rem !important`) or rebuild the
- *   `inherit 0 inherit` every engine rejects (`inherit !important`,
- *   measured in Chromium, round 5);
- * - the scan ends inside an open function or an unterminated quote: CSS
- *   auto-closes a function at EOF, so `"calc(1rem + 2px"` IS a real
- *   padding (measured: all four sides) while its rewrite is not; an
- *   unterminated quote is invalid at both ends, and bailing keeps the
- *   two paths identical (round 5).
- *
- * Known residual (documented, not fixable at string level): a `var()`
- * whose custom property resolves to MORE than one track cannot keep its
- * vertical half — `padding: var(--multi) 0 var(--multi)` is valid at
- * parse time and invalid at computed-value time, and all four sides
- * collapse. No consumer passes a multi-track custom property today.
- */
-export function mobileSideGutterFree(value: string): string {
-  if (value.includes("/*") || value.includes("\\")) return value;
-  // `!important` is an annotation on the DECLARATION, not a track — it
-  // cannot ride a per-side rewrite: `2rem !important` would silently lose
-  // its priority, and `inherit !important` would rebuild into the
-  // `inherit 0 inherit` every engine drops (measured in Chromium, round
-  // 5). Bail out and let the authored padding stand.
-  if (/!\s*important\s*$/i.test(value)) return value;
-  const { sides, balanced } = scanPaddingSides(value);
-  if (!balanced) return value;
-  if (sides.length === 0) return value;
-  if (sides.length === 1 && CSS_WIDE_KEYWORDS.has(sides[0].toLowerCase())) return value;
-  const [top, , bottom] = sides;
-  return `${top} 0 ${bottom ?? top}`;
-}
-
 export const HkAdminShell = defineComponent({
   name: "HkAdminShell",
   props: {
@@ -145,11 +47,9 @@ export const HkAdminShell = defineComponent({
      *  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)"`). */
+     *  nothing is reserved (`0px`). 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
@@ -188,134 +88,52 @@ export const HkAdminShell = defineComponent({
      *  of risking a declaration a browser would drop whole.
      *  Default false: the padding reads the same at every width. */
     contentBleedOnMobile: { type: Boolean, default: false },
+    /** The content host mode, forwarded to HkFaceShell. DECLARED on
+     *  this wrapper on purpose (R2 S2, 2026-10-29): an undeclared input
+     *  would fall through `$attrs` onto the inner shell, where it IS a
+     *  declared prop — and fallthrough attrs override explicit props,
+     *  so a stray `content-mode="stage"` from a template or a
+     *  `v-bind="$attrs"` relay would silently flip the admin shell into
+     *  the stage host. Declared here, the input is a real prop of this
+     *  component and forwards honestly; the default stays `document`,
+     *  which is what the admin face is. */
+    contentMode: { type: String as PropType<"document" | "stage">, default: "document" },
   },
   setup(props, { slots }) {
-    const { t } = useI18n();
-    const { width: viewportWidth } = useBreakpoint();
-    const isDesktop = computed(() => viewportWidth.value >= props.mobileBreakpoint);
-    const sidebarOpen = ref(false);
-
-    const contentStyle = computed(() => ({
-      padding: isDesktop.value || !props.contentBleedOnMobile
-        ? props.contentPadding
-        : mobileSideGutterFree(props.contentPadding),
-    }));
-
     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;
-    };
-
-    const openSidebar = () => {
-      sidebarOpen.value = true;
-    };
-
-    const closeSidebar = () => {
-      sidebarOpen.value = false;
-    };
-
-    return () => (
-      <div class="s-admin-shell">
-        {slots.header && (
-          <div style={{ flexShrink: 0 }}>
-            {slots.header({
-              isDesktop: isDesktop.value,
-              showHamburger: !isDesktop.value,
-              compact: !isDesktop.value,
-              actions: actionBar.actions.value ? actionBar.actions.value() : [],
-              onHamburger: toggleHamburger,
-              // Lets a header trigger (e.g. the avatar in "drawer" action
-              // mode) open the mobile nav drawer directly.
-              onOpenDrawer: openSidebar,
-            })}
-          </div>
-        )}
-
-        <div class="s-admin-shell-body" style={{ paddingBottom: footerPad() }}>
-          {isDesktop.value && !props.sidebarCollapsed && slots.sidebar && (
-            <aside
-              style={{
-                width: props.sidebarWidth,
-                flexShrink: 0,
-                borderRight: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
-                background: "rgb(var(--color-surface))",
-                overflow: "hidden",
-              }}
-            >
-              {slots.sidebar({ collapsed: false, onNavigate: closeSidebar })}
-            </aside>
-          )}
-          <main class="s-admin-shell-main">
-            <HScrollContainer class="s-admin-shell-scroll">
-              {/* Padding lives INSIDE the scroll viewport (an inner
-                  wrapper) so card box-shadows are not clipped at the
-                  viewport edges. */}
-              <div style={contentStyle.value}>
-                {props.contentKey != null ? (
-                  <HkCrossfade swapKey={props.contentKey} class="s-admin-shell-swap">
-                    {slots.content?.()}
-                  </HkCrossfade>
-                ) : (
-                  slots.content?.()
-                )}
-              </div>
-            </HScrollContainer>
-          </main>
-
-          {!isDesktop.value && (
-            <HDrawer
-              modelValue={sidebarOpen.value}
-              onUpdate:modelValue={(v: boolean) => (sidebarOpen.value = v)}
-              side="left"
-              size="280px"
-              title={props.navTitle ?? t("hikari::adminShell.navTitle", "Navigation")}
-              panelClass={props.drawerPanelClass}
-            >
-              {/* The drawer body carries the nav; a `userPanel` slot rides
-                  the drawer footer (identity + account actions) so mobile
-                  gets the same content the desktop user menu exposes.
-                  `inDrawer` lets the sidebar slot fill the drawer width.
-                  The userPanel receives `onNavigate` (closes the drawer)
-                  so its action rows — e.g. "go to frontend", which swaps
-                  the whole layout underneath — can dismiss the drawer
-                  instead of leaving it hovering over the new page. */}
-              {{
-                default: () =>
-                  slots.sidebar?.({ collapsed: false, onNavigate: closeSidebar, inDrawer: true }),
-                footer: slots.userPanel
-                  ? () => slots.userPanel!({ onNavigate: closeSidebar })
-                  : undefined,
-              }}
-            </HDrawer>
-          )}
-        </div>
-
-        {slots.footer && (
-          <footer class="s-status-bar" style={{ position: "fixed", bottom: 0, left: 0, right: 0, // Footer band (was a bare 40 — the pre-band chrome value).
-            zIndex: "var(--hk-z-toolbar)" }}>
-            {slots.footer()}
-          </footer>
-        )}
-
-        {/* Scoped slots are functions — rendering the slot itself instead of
-            calling it would stringify the compiled withCtx source into a text
-            node (normalizeVNode String()s non-vnode children). */}
-        {slots.overlays?.()}
-      </div>
-    );
+    return () =>
+      h(HkFaceShell, {
+        sidebarCollapsed: props.sidebarCollapsed,
+        sidebarWidth: props.sidebarWidth,
+        mobileBreakpoint: props.mobileBreakpoint,
+        footerHeight: props.footerHeight,
+        navTitle: props.navTitle,
+        drawerPanelClass: props.drawerPanelClass,
+        // The admin face IS the document mode by default — stage faces
+        // normally consume HkFaceShell directly; the forward keeps an
+        // explicit opt-in honest (and the declared prop above keeps a
+        // stray attr from ever reaching the inner shell on its own).
+        contentMode: props.contentMode,
+        contentPadding: props.contentPadding,
+        contentKey: props.contentKey,
+        contentBleedOnMobile: props.contentBleedOnMobile,
+      }, {
+        header: slots.header
+          ? (shellParams: Record<string, unknown>) =>
+              slots.header!({
+                ...shellParams,
+                // The legacy channel this wrapper exists to keep: the
+                // actions of the bar provided above, handed to the header
+                // slot exactly as before the extraction.
+                actions: actionBar.actions.value ? actionBar.actions.value() : [],
+              })
+          : undefined,
+        sidebar: slots.sidebar,
+        userPanel: slots.userPanel,
+        content: slots.content,
+        footer: slots.footer,
+        overlays: slots.overlays,
+      });
   },
 });

package/src/components/HkFaceShell.barrel.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import * as barrel from "../index";
+
+/**
+ * The public barrel guard for HkFaceShell (R3 M6 on PR #900): deleting
+ * the export line from index.ts kept the ENTIRE suite green before this
+ * pin — every other test reaches the component through the direct
+ * "./HkFaceShell" path, so only an external consumer would have noticed.
+ * Same shape as theme/themeDecorSurface.test.ts.
+ *
+ * This file deliberately does NOT mock "@celestia-island/hikari": the
+ * package's self-reference resolves to the very same src/index.ts module
+ * as "../index", so a vi.mock here would replace the barrel under test
+ * with the mock's own namespace (measured: HkFaceShell read as undefined
+ * through `...actual` under the re-entrant factory).
+ */
+describe("the public barrel", () => {
+  it("exports HkFaceShell (deleting the line kept the suite green before this pin)", () => {
+    // defineComponent's object syntax yields a plain object, so the
+    // identity check is the component's own `name`, not typeof.
+    const face = barrel.HkFaceShell as unknown as { name?: string };
+    expect(face, "HkFaceShell must be re-exported").toBeTruthy();
+    expect(face.name).toBe("HkFaceShell");
+    // The admin wrapper stays reachable too — the extraction must not
+    // move the public surface.
+    const admin = barrel.HkAdminShell as unknown as { name?: string };
+    expect(admin, "HkAdminShell must stay exported").toBeTruthy();
+    expect(admin.name).toBe("HkAdminShell");
+  });
+});

package/src/components/HkFaceShell.test.tsx

@@ -0,0 +1,242 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createApp, h } from "vue";
+
+// HDrawer teleports and animates; replace it with an inline passthrough
+// (same stub shape as HkAdminShell.test.tsx) so the shell contract is
+// testable without the overlay runtime.
+vi.mock("@celestia-island/hikari", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@celestia-island/hikari")>();
+  const { defineComponent, h } = await import("vue");
+  const HDrawerStub = defineComponent({
+    name: "HDrawer",
+    props: {
+      modelValue: { type: Boolean, default: false },
+      side: { type: String, default: "left" },
+      size: { type: String, default: "280px" },
+      title: { type: String, default: undefined },
+      panelClass: { type: String, default: undefined },
+    },
+    setup(props, { slots }) {
+      return () =>
+        props.modelValue
+          ? h("div", { class: ["drawer-stub", props.panelClass] }, [
+              h("div", { class: "drawer-stub-body" }, slots.default?.()),
+              slots.footer
+                ? h("div", { class: "drawer-stub-footer" }, slots.footer())
+                : null,
+            ])
+          : null;
+    },
+  });
+  return { ...actual, HDrawer: HDrawerStub };
+});
+
+import { HkFaceShell } from "./HkFaceShell";
+import { HkAdminShell } from "./HkAdminShell";
+
+/**
+ * HkFaceShell — the generalized face shell extracted from HkAdminShell
+ * (2026-10-29). What this file pins:
+ *
+ * 1. The STAGE content mode: no scroll viewport, no padding wrapper, the
+ *    content bare under the main region — a canvas face must never be
+ *    wrapped in the document viewport (that is the mode's reason for
+ *    existing). `contentPadding` is ignored there.
+ * 2. The DOCUMENT mode (default) keeps the admin shell's exact host:
+ *    scroll viewport + inner padding wrapper + `data-content-mode`.
+ * 3. `contentKey` crossfade stays available in BOTH modes.
+ * 4. The footer band + its injection-driven height reservation behave
+ *    identically in both modes.
+ * 5. The extraction boundary: HkFaceShell's header slot carries NO
+ *    `actions` param (the shell provides no action bar); HkAdminShell —
+ *    the admin wrapper — still injects it (the legacy channel that
+ *    wrapper exists to keep).
+ *
+ * (Repo test convention: raw createApp + container queries, no
+ * @vue/test-utils dependency.)
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+const CONTENT = () => h("main", null, "CONTENT");
+const FOOTER = () => h("div", { class: "footer-mock" }, "FOOTER");
+
+describe("HkFaceShell stage mode", () => {
+  it("renders the content bare — no scroll viewport, no padding wrapper", () => {
+    const c = mount(h(HkFaceShell, {
+      contentMode: "stage",
+      contentPadding: "3rem",
+      navTitle: "Navigation",
+    }, {
+      header: () => null,
+      content: CONTENT,
+    }));
+    const main = c.querySelector(".s-admin-shell-main");
+    expect(main, "the main region exists").toBeTruthy();
+    expect(main!.getAttribute("data-content-mode")).toBe("stage");
+    // The document host is GONE — that is the stage contract.
+    expect(c.querySelector(".hk-scroll-container")).toBeNull();
+    expect(c.querySelector(".hk-scroll-container-viewport")).toBeNull();
+    // No padding wrapper anywhere: the content slot's first element IS
+    // the main region's child (contentPadding is a document-mode prop).
+    expect(main!.firstElementChild?.textContent).toBe("CONTENT");
+    expect([...main!.querySelectorAll("*")].every((el) => (el as HTMLElement).style.padding === "")).toBe(true);
+  });
+
+  it("still honors the contentKey crossfade in stage mode", () => {
+    const c = mount(h(HkFaceShell, {
+      contentMode: "stage",
+      contentKey: "scene-a",
+      navTitle: "Navigation",
+    }, {
+      header: () => null,
+      content: CONTENT,
+    }));
+    const swap = c.querySelector(".s-admin-shell-swap");
+    expect(swap, "the library crossfade wraps the stage content").toBeTruthy();
+    expect(swap!.className).toContain("hk-crossfade");
+    // …and the crossfade is the main region's DIRECT child (no host
+    // wrapper between them).
+    expect(swap!.parentElement!.classList.contains("s-admin-shell-main")).toBe(true);
+  });
+
+  it("keeps the footer band and its reservation in stage mode", () => {
+    const withFooter = mount(h(HkFaceShell, {
+      contentMode: "stage",
+      navTitle: "Navigation",
+    }, {
+      header: () => null,
+      content: CONTENT,
+      footer: FOOTER,
+    }));
+    expect(withFooter.querySelector("footer.s-status-bar .footer-mock")).toBeTruthy();
+    expect((withFooter.querySelector(".s-admin-shell-body") as HTMLElement)!.style.paddingBottom)
+      .toBe("var(--s-footer-height)");
+
+    const withoutFooter = mount(h(HkFaceShell, {
+      contentMode: "stage",
+      navTitle: "Navigation",
+    }, {
+      header: () => null,
+      content: CONTENT,
+    }));
+    expect(withoutFooter.querySelector("footer.s-status-bar")).toBeNull();
+    expect((withoutFooter.querySelector(".s-admin-shell-body") as HTMLElement)!.style.paddingBottom).toBe("0px");
+  });
+});
+
+describe("HkFaceShell document mode (the default)", () => {
+  it("keeps the admin shell's exact content host", () => {
+    const c = mount(h(HkFaceShell, {
+      contentPadding: "2rem",
+      navTitle: "Navigation",
+    }, {
+      header: () => null,
+      content: CONTENT,
+    }));
+    const main = c.querySelector(".s-admin-shell-main");
+    expect(main!.getAttribute("data-content-mode")).toBe("document");
+    expect(c.querySelector(".hk-scroll-container")).toBeTruthy();
+    const viewport = c.querySelector(".hk-scroll-container-viewport")
+      ?? c.querySelector(".hk-scroll-container");
+    const inner = viewport!.firstElementChild as HTMLElement;
+    expect(inner.style.padding).toBe("2rem");
+    expect(inner.textContent).toContain("CONTENT");
+  });
+});
+
+describe("the extraction boundary: the action-bar channel", () => {
+  it("HkFaceShell's header slot carries no actions param (no bar provided)", () => {
+    const seen: Array<Record<string, unknown>> = [];
+    mount(h(HkFaceShell, { navTitle: "Navigation" }, {
+      header: (params: Record<string, unknown>) => {
+        seen.push(params);
+        return null;
+      },
+      content: CONTENT,
+    }));
+    expect(seen.length).toBeGreaterThan(0);
+    for (const params of seen) {
+      expect("actions" in params).toBe(false);
+    }
+    // The shell-scoped params the face header relies on are all there.
+    expect(seen[0]).toMatchObject({
+      isDesktop: true,
+      showHamburger: false,
+      compact: false,
+    });
+    expect(typeof seen[0].onOpenDrawer).toBe("function");
+  });
+
+  it("HkAdminShell still injects actions into its header slot (the legacy channel)", () => {
+    const seen: Array<Record<string, unknown>> = [];
+    mount(h(HkAdminShell, { navTitle: "Navigation" }, {
+      header: (params: Record<string, unknown>) => {
+        seen.push(params);
+        return null;
+      },
+      content: CONTENT,
+    }));
+    expect(seen.length).toBeGreaterThan(0);
+    for (const params of seen) {
+      expect("actions" in params).toBe(true);
+      expect(Array.isArray(params.actions)).toBe(true);
+    }
+  });
+});
+
+describe("the contentMode attrs leak (R2 S2)", () => {
+  it("HkAdminShell declares and forwards contentMode — a passed stage value reaches the host honestly", () => {
+    const staged = mount(h(HkAdminShell, {
+      contentMode: "stage",
+      navTitle: "Navigation",
+    }, {
+      header: () => null,
+      content: CONTENT,
+    }));
+    expect(staged.querySelector(".s-admin-shell-main")!.getAttribute("data-content-mode"))
+      .toBe("stage");
+    expect(staged.querySelector(".hk-scroll-container")).toBeNull();
+
+    const defaulted = mount(h(HkAdminShell, { navTitle: "Navigation" }, {
+      header: () => null,
+      content: CONTENT,
+    }));
+    expect(defaulted.querySelector(".s-admin-shell-main")!.getAttribute("data-content-mode"))
+      .toBe("document");
+    expect(defaulted.querySelector(".hk-scroll-container")).toBeTruthy();
+  });
+
+  it("the wrapper keeps the DECLARATION (the half the behavior test cannot see)", () => {
+    // Without the declared prop, a stray `content-mode` from a template
+    // or a v-bind="$attrs" relay falls through to the inner shell, where
+    // fallthrough attrs OVERRIDE explicit props — the leak R2 proved
+    // with a repro. The behavior test above cannot distinguish honest
+    // forwarding from the leak (both render stage for a passed value),
+    // so the declaration itself is pinned at source.
+    const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "HkAdminShell.tsx"), "utf-8");
+    expect(src, "the prop must be declared on the wrapper").toContain(
+      'contentMode: { type: String as PropType<"document" | "stage">, default: "document" }',
+    );
+    expect(src, "and forwarded honestly").toContain("contentMode: props.contentMode,");
+  });
+});

package/src/components/HkFaceShell.tsx

@@ -0,0 +1,369 @@
+import { computed, defineComponent, ref, type PropType } from "vue";
+import { HkCrossfade, HDrawer, HScrollContainer, useBreakpoint } from "@celestia-island/hikari";
+import { useI18n } from "../i18n/context";
+
+/** CSS-wide keywords. A shorthand rebuilt from one of them is NOT a
+ * padding (`inherit 0 inherit` is rejected by every engine, measured in
+ * Chromium), so the declaration would be dropped WHOLE and the page
+ * would lose the vertical clearance too — worse than not bleeding. */
+const CSS_WIDE_KEYWORDS = new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
+
+/**
+ * A scanned padding shorthand: the top-level `sides` plus whether the
+ * value ENDED with every function closed and every quote terminated.
+ * `balanced: false` means the scan cannot know where the value ends —
+ * CSS closes an open function at EOF, so the authored declaration can
+ * still be valid while a rewrite of it cannot be.
+ */
+export interface PaddingSidesScan {
+  sides: string[];
+  balanced: boolean;
+}
+
+/**
+ * Scan a CSS padding shorthand into its top-level tracks: split on
+ * TOP-LEVEL whitespace, quote- and function-aware, so whitespace inside
+ * a function belongs to that value — `calc(1rem + 2px)`,
+ * `var(--pad, 1rem)` and a quoted argument are ONE track. A plain
+ * `split(/\s+/)` shreds them (`["calc(1rem", "+", "2px)"]`), and the
+ * rebuilt shorthand is invalid CSS — a browser drops the whole
+ * declaration, taking with it the vertical clearance
+ * `contentBleedOnMobile` promises to keep (rounds 2 and 3 of this change
+ * hit exactly that; rounds 4 and 5 the escape and EOF variants). The
+ * depth counter balances parentheses, so nested functions
+ * (`clamp(1rem, min(2vw, 3px), 3px)`) survive; a stray `)` never drives
+ * the depth negative. Tabs and newlines are valid CSS separators and
+ * split like spaces, and the whitespace around a shorthand yields no
+ * empty tracks.
+ *
+ * Exported for its own unit test: happy-dom cannot round-trip
+ * `var()`/`clamp()` values or the hostile inputs below, so the
+ * component-level suite cannot observe them.
+ */
+export function scanPaddingSides(value: string): PaddingSidesScan {
+  const sides: string[] = [];
+  let current = "";
+  let depth = 0;
+  let quote = "";
+  for (const ch of value) {
+    if (quote) {
+      current += ch;
+      if (ch === quote) quote = "";
+      continue;
+    }
+    if (ch === "\"" || ch === "'") {
+      quote = ch;
+      current += ch;
+      continue;
+    }
+    if (ch === "(") depth += 1;
+    else if (ch === ")") depth = Math.max(0, depth - 1);
+    if (depth === 0 && /\s/.test(ch)) {
+      if (current) sides.push(current);
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  if (current) sides.push(current);
+  return { sides, balanced: depth === 0 && quote === "" };
+}
+
+/** The tracks of {@link scanPaddingSides} — for callers that only need
+ * the split, and for the unit test that pins the splitting rules. */
+export function splitPaddingSides(value: string): string[] {
+  return scanPaddingSides(value).sides;
+}
+
+/**
+ * The side-gutter-free form of a padding shorthand: the vertical tracks
+ * survive, the horizontal ones become zero (`"1rem 2rem"` -> `"1rem 0
+ * 1rem"`). The value is returned VERBATIM — the page keeps its padding
+ * and simply does not bleed — whenever the shorthand cannot be rewritten
+ * safely. That fallback IS the contract: emitting a declaration a browser
+ * drops costs the page ALL FOUR sides, including the vertical clearance
+ * this prop exists to keep.
+ *
+ * Verbatim cases:
+ *
+ * - an empty / whitespace-only value has nothing to strip;
+ * - a LONE CSS-wide keyword cannot be combined per side (`inherit 0
+ *   inherit` is not a padding — every engine rejects it);
+ * - the value contains a CSS comment, whose text would land in the
+ *   rebuilt declaration as a garbage track (`1rem 0 x`, measured in
+ *   Chromium: dropped, all four sides lost);
+ * - the value contains a backslash: this scanner does not decode CSS
+ *   escapes, and an escape can hide a quote, a parenthesis or a whole
+ *   keyword (`\69 nherit` IS `inherit` to an engine) — the literal text
+ *   is not the value, so no rewrite of it is trustworthy (round 5);
+ * - the value ends with a `!important` annotation: the annotation
+ *   belongs to the DECLARATION, so a per-side rewrite would either
+ *   silently lose the priority (`2rem !important`) or rebuild the
+ *   `inherit 0 inherit` every engine rejects (`inherit !important`,
+ *   measured in Chromium, round 5);
+ * - the scan ends inside an open function or an unterminated quote: CSS
+ *   auto-closes a function at EOF, so `"calc(1rem + 2px"` IS a real
+ *   padding (measured: all four sides) while its rewrite is not; an
+ *   unterminated quote is invalid at both ends, and bailing keeps the
+ *   two paths identical (round 5).
+ *
+ * Known residual (documented, not fixable at string level): a `var()`
+ * whose custom property resolves to MORE than one track cannot keep its
+ * vertical half — `padding: var(--multi) 0 var(--multi)` is valid at
+ * parse time and invalid at computed-value time, and all four sides
+ * collapse. No consumer passes a multi-track custom property today.
+ */
+export function mobileSideGutterFree(value: string): string {
+  if (value.includes("/*") || value.includes("\\")) return value;
+  // `!important` is an annotation on the DECLARATION, not a track — it
+  // cannot ride a per-side rewrite: `2rem !important` would silently lose
+  // its priority, and `inherit !important` would rebuild into the
+  // `inherit 0 inherit` every engine drops (measured in Chromium, round
+  // 5). Bail out and let the authored padding stand.
+  if (/!\s*important\s*$/i.test(value)) return value;
+  const { sides, balanced } = scanPaddingSides(value);
+  if (!balanced) return value;
+  if (sides.length === 0) return value;
+  if (sides.length === 1 && CSS_WIDE_KEYWORDS.has(sides[0].toLowerCase())) return value;
+  const [top, , bottom] = sides;
+  return `${top} 0 ${bottom ?? top}`;
+}
+
+/**
+ * HkFaceShell — the generalized face shell (2026-10-29, extracted from
+ * HkAdminShell): the ONE frame every app face hangs its chrome on —
+ * an optional header row, an optional sidebar with its mobile drawer,
+ * the content host, the fixed status-bar band, and the overlays slot.
+ *
+ * HkAdminShell is this shell's ADMIN face: it composes HkFaceShell in
+ * document mode and adds its own action-bar provide (the legacy channel
+ * some hosts still read through the header slot's `actions` param).
+ * Hosts that own their action bar — or their whole content lifecycle —
+ * consume HkFaceShell directly, so the shell carries NO action-bar
+ * provider of its own: whoever provides, provides closest to the pages.
+ *
+ * The content host has TWO modes (`contentMode`):
+ *
+ * - `document` (default) — the console shape HkAdminShell has always
+ *   rendered: one persistent `HScrollContainer` viewport, the
+ *   `contentPadding` inner wrapper (box-shadows never clipped), the
+ *   `contentKey` crossfade, and the `contentBleedOnMobile` phone-gutter
+ *   drop. `contentPadding` / `contentBleedOnMobile` apply ONLY here.
+ *
+ * - `stage` — the canvas shape: NO scroll container and NO padding
+ *   wrapper; the content slot renders directly under the shell's main
+ *   region and owns its scrolling, its canvases and its floating
+ *   layers (the chat face's desktop surfaces, industrial boards, 3D
+ *   scenes). A stage face must not be wrapped in the document viewport
+ *   — that is the whole reason the mode exists. `contentKey` remains
+ *   honored for faces that want the library's keyed crossfade anyway.
+ *
+ * Everything else — the header slot's scoped params (minus the admin
+ * `actions` param), the sidebar + drawer split, the `userPanel` drawer
+ * footer, the fixed footer band and its injection-driven height
+ * reservation, the overlays slot — behaves identically in both modes.
+ */
+export const HkFaceShell = defineComponent({
+  name: "HkFaceShell",
+  props: {
+    sidebarCollapsed: { type: Boolean, default: false },
+    sidebarWidth: { type: String, default: "224px" },
+    /** Viewport width at which the desktop layout takes over (below it
+     *  the nav collapses into the mobile drawer). Defaults to the shared
+     *  1024px "lg" breakpoint; lower it (e.g. 768) for tablet-friendly
+     *  faces that keep the sidebar at md widths. */
+    mobileBreakpoint: { type: Number, default: 1024 },
+    /** 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
+     *  faces 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
+     *  one left edge. */
+    drawerPanelClass: { type: String, default: undefined },
+    /** Content host mode (see the component doc): `document` wraps the
+     *  content in the shell's scroll viewport + padding wrapper;
+     *  `stage` renders the content bare — the face owns scrolling,
+     *  canvases and floating layers. */
+    contentMode: { type: String as PropType<"document" | "stage">, default: "document" },
+    /** Content-area padding (inside the scroll viewport). Document mode
+     *  only — a stage face owns its own geometry. Padding is applied to
+     *  an inner wrapper rather than the scroll container so card
+     *  box-shadows are never clipped at the viewport edges. Applied
+     *  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. Honored in BOTH content modes. */
+    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. Document mode only
+     *  (a stage face IS the canvas; there is no gutter to drop).
+     *  OPT-IN, declared by the page that renders the canvas
+     *  (2026-10-04 user direction: the side-gutter drop is a PER-PAGE
+     *  declaration, never a shell-wide rule — an ordinary page keeps
+     *  its side gutters on phones).
+     *
+     *  When true, below `mobileBreakpoint` the horizontal half of
+     *  `contentPadding` is dropped while the vertical clearance
+     *  survives; desktop is never affected and the verbatim padding is
+     *  restored when the viewport crosses back above the breakpoint.
+     *  A `contentPadding` that cannot be rewritten per side (empty, a
+     *  lone CSS-wide keyword, or a value this scanner cannot trust: one
+     *  carrying a CSS comment or a backslash escape, one ending in a
+     *  `!important` annotation, or one whose functions/quotes never
+     *  close) falls back to the verbatim value — see
+     *  `mobileSideGutterFree`; the page then keeps its gutters instead
+     *  of risking a declaration a browser would drop whole.
+     *  Default false: the padding reads the same at every width. */
+    contentBleedOnMobile: { type: Boolean, default: false },
+  },
+  setup(props, { slots }) {
+    const { t } = useI18n();
+    const { width: viewportWidth } = useBreakpoint();
+    const isDesktop = computed(() => viewportWidth.value >= props.mobileBreakpoint);
+    const sidebarOpen = ref(false);
+
+    const contentStyle = computed(() => ({
+      padding: isDesktop.value || !props.contentBleedOnMobile
+        ? props.contentPadding
+        : mobileSideGutterFree(props.contentPadding),
+    }));
+
+    // 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;
+    };
+
+    const openSidebar = () => {
+      sidebarOpen.value = true;
+    };
+
+    const closeSidebar = () => {
+      sidebarOpen.value = false;
+    };
+
+    /** The content stage: the keyed crossfade when a face opts in, the
+     *  bare slot otherwise — identical in both content modes; what the
+     *  mode selects is the HOST around it (scroll viewport + padding in
+     *  document mode, nothing in stage mode). */
+    function renderContentStage() {
+      return props.contentKey != null ? (
+        <HkCrossfade swapKey={props.contentKey} class="s-admin-shell-swap">
+          {slots.content?.()}
+        </HkCrossfade>
+      ) : (
+        slots.content?.()
+      );
+    }
+
+    return () => (
+      <div class="s-admin-shell">
+        {slots.header && (
+          <div style={{ flexShrink: 0 }}>
+            {slots.header({
+              isDesktop: isDesktop.value,
+              showHamburger: !isDesktop.value,
+              compact: !isDesktop.value,
+              onHamburger: toggleHamburger,
+              // Lets a header trigger (e.g. the avatar in "drawer" action
+              // mode) open the mobile nav drawer directly.
+              onOpenDrawer: openSidebar,
+            })}
+          </div>
+        )}
+
+        <div class="s-admin-shell-body" style={{ paddingBottom: footerPad() }}>
+          {isDesktop.value && !props.sidebarCollapsed && slots.sidebar && (
+            <aside
+              style={{
+                width: props.sidebarWidth,
+                flexShrink: 0,
+                borderRight: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
+                background: "rgb(var(--color-surface))",
+                overflow: "hidden",
+              }}
+            >
+              {slots.sidebar({ collapsed: false, onNavigate: closeSidebar })}
+            </aside>
+          )}
+          <main class="s-admin-shell-main" data-content-mode={props.contentMode}>
+            {props.contentMode === "stage" ? (
+              renderContentStage()
+            ) : (
+              <HScrollContainer class="s-admin-shell-scroll">
+                {/* Padding lives INSIDE the scroll viewport (an inner
+                    wrapper) so card box-shadows are not clipped at the
+                    viewport edges. */}
+                <div style={contentStyle.value}>{renderContentStage()}</div>
+              </HScrollContainer>
+            )}
+          </main>
+
+          {!isDesktop.value && (
+            <HDrawer
+              modelValue={sidebarOpen.value}
+              onUpdate:modelValue={(v: boolean) => (sidebarOpen.value = v)}
+              side="left"
+              size="280px"
+              title={props.navTitle ?? t("hikari::adminShell.navTitle", "Navigation")}
+              panelClass={props.drawerPanelClass}
+            >
+              {/* The drawer body carries the nav; a `userPanel` slot rides
+                  the drawer footer (identity + account actions) so mobile
+                  gets the same content the desktop user menu exposes.
+                  `inDrawer` lets the sidebar slot fill the drawer width.
+                  The userPanel receives `onNavigate` (closes the drawer)
+                  so its action rows — e.g. "go to frontend", which swaps
+                  the whole layout underneath — can dismiss the drawer
+                  instead of leaving it hovering over the new page. */}
+              {{
+                default: () =>
+                  slots.sidebar?.({ collapsed: false, onNavigate: closeSidebar, inDrawer: true }),
+                footer: slots.userPanel
+                  ? () => slots.userPanel!({ onNavigate: closeSidebar })
+                  : undefined,
+              }}
+            </HDrawer>
+          )}
+        </div>
+
+        {slots.footer && (
+          <footer class="s-status-bar" style={{ position: "fixed", bottom: 0, left: 0, right: 0, // Footer band (was a bare 40 — the pre-band chrome value).
+            zIndex: "var(--hk-z-toolbar)" }}>
+            {slots.footer()}
+          </footer>
+        )}
+
+        {/* Scoped slots are functions — rendering the slot itself instead of
+            calling it would stringify the compiled withCtx source into a text
+            node (normalizeVNode String()s non-vnode children). */}
+        {slots.overlays?.()}
+      </div>
+    );
+  },
+});

package/src/components/adminHeaderChrome.test.ts

@@ -95,6 +95,20 @@ describe("admin header chrome geometry (the two user-requested fixes)", () => {
     expect(rule).toContainEqual(["gap", "var(--space-16)"]);
   });
 
+  it("reserves the drawer face's workspace-switcher slot at the trigger's own footprint", () => {
+    // 2026-10-29 user direction: the chat header's left wing is avatar +
+    // ws-trigger, and that wing's min-content floor is what stops the
+    // balanced grid's centre strip from sliding into the space on a
+    // phone. The console drawer face (no title, no workspace concept)
+    // must keep the slot as a blank of the trigger's own 28px box —
+    // dropping the rule would drop the floor and the strip would hug
+    // the avatar again.
+    const rule = ruleDeclarations(adminTokens, ".s-admin-header-ws-slot");
+    expect(rule, ".s-admin-header-ws-slot must be declared").not.toBeNull();
+    expect(rule).toContainEqual(["width", "var(--space-28)"]);
+    expect(rule).toContainEqual(["flex-shrink", "0"]);
+  });
+
   it("hangs the shared balanced-header grid contract (the ONE header layout)", () => {
     // User report 2026-10-15: the console's header-centre tab strip sat
     // LEFT of centre on phones (drawer mode hides the title, so the left

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

@@ -157,7 +157,11 @@ describe("pane-swap contract", () => {
       // Merging any of this into the generic container would change its
       // semantics for every existing call site. Permanent exception.
       "HkStepFlow.tsx",
-      "HkAdminShell.tsx", // content slot is host-owned; hosts key it (chest wraps HkCrossfade)
+      // The content host lives in HkFaceShell since the 2026-10-29
+      // extraction (HkAdminShell composes it); both render the slot in
+      // dot form — host-owned, hosts key it (chest wraps HkCrossfade).
+      "HkAdminShell.tsx",
+      "HkFaceShell.tsx",
       "HkThemePanelContent.tsx", // forwards to HTabs (HkTabs), inherits the mechanism
       "HkMenuPanel.tsx", // menu items, not a pane swap
       // Named slots that are not pane swaps at all: a header action strip

package/src/index.ts

@@ -757,6 +757,7 @@ export {
 export { HkErrorLanding as HkErrorLanding } from "./components/HkErrorLanding";
 export { HkErrorReportingOverlay as HkErrorReportingOverlay } from "./errorReporting";
 export { HkAdminShell as HkAdminShell } from "./components/HkAdminShell";
+export { HkFaceShell as HkFaceShell } from "./components/HkFaceShell";
 export { HkAdminHeader as HkAdminHeader } from "./components/HkAdminHeader";
 export { HkNavSidebar as HkNavSidebar } from "./components/HkNavSidebar";
 export { HkThemeToggle as HkThemeToggle } from "./components/HkThemeToggle";

package/src/styles/admin-tokens.scss

@@ -597,6 +597,23 @@
   object-fit: cover;
 }
 
+/* The reserved workspace-switcher slot (HkAdminHeader, drawer face).
+ * The chat header's left wing is avatar + ws-trigger (8px flex gap +
+ * 28px button box), and that wing's min-content floor is what keeps the
+ * balanced grid's centre strip off the space on a phone: the strip can
+ * only shrink into its own column, never into a wing. The console's
+ * drawer face hides both the title and the workspace concept, so
+ * without a stand-in the wing's floor is just the 28px avatar — a wide
+ * strip (the firewall page's three sections on a 412px phone) slides
+ * left until it hugs the avatar (2026-10-29 user report). The blank
+ * span carries the trigger's 28px box; the wing's 16px gap already
+ * covers the button's 8px inline padding (the 2026-09-28 title-distance
+ * pin), so the floor lands within one padding-step of the frontend's. */
+.s-admin-header-ws-slot {
+  width: var(--space-28);
+  flex-shrink: 0;
+}
+
 /* The old hover camera veil ("change avatar" affordance) is gone: the
  * avatar trigger opens the account MENU — the avatar edit is the Camera
  * item inside it — so the veil promised an action the click never