@celestia-island/hikari 0.55.169 → 0.55.171

package/package.json

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

package/src/components/HkAdminHeader.test.tsx

@@ -255,15 +255,31 @@ describe("HkAdminHeader", () => {
     const centre = c.querySelector(".s-admin-header-center");
     expect(centre, "the centre wrapper must render when the slot is provided").not.toBeNull();
     expect(centre?.querySelector(".centre-stub")?.textContent).toBe("filter group");
-    // Wing order: identity (left) → centre → actions (right).
+    // Wing order: identity (left) → centre → actions (right). The wings
+    // carry their chrome class PLUS the shared balanced-grid wing class,
+    // so match per-class instead of whole-className equality.
     const header = c.querySelector("header")!;
     const kids = [...header.children].map((el) => el.className);
-    expect(kids.indexOf("s-admin-header-user")).toBeLessThan(kids.indexOf("s-admin-header-center"));
-    expect(kids.indexOf("s-admin-header-center")).toBeLessThan(kids.indexOf("s-admin-header-actions"));
+    const wingIdx = (cls: string) => kids.findIndex((c) => c.split(/\s+/).includes(cls));
+    expect(wingIdx("s-admin-header-user")).toBeLessThan(wingIdx("s-admin-header-center"));
+    expect(wingIdx("s-admin-header-center")).toBeLessThan(wingIdx("s-admin-header-actions"));
+    // The header hangs the shared balanced-grid contract — the same
+    // geometry the chat frontend's header uses (user report 2026-10-15:
+    // the console strip sat left of centre on phones).
+    expect(header.className).toContain("s-balanced-header");
+    expect(kids.find((c) => c.includes("s-admin-header-user"))).toContain("s-header-wing-start");
+    expect(kids.find((c) => c.includes("s-admin-header-center"))).toContain("s-header-wing-center");
+    expect(kids.find((c) => c.includes("s-admin-header-actions"))).toContain("s-header-wing-end");
   });
 
   it("renders no centre wrapper without the slot (DOM unchanged for hosts that skip it)", () => {
     const c = mount(headerNode({ title: "Providers" }));
     expect(c.querySelector(".s-admin-header-center")).toBeNull();
+    // Centre-less hosts are the MAJORITY of admin pages: the actions wing
+    // must still carry its explicit grid-column class, or auto-placement
+    // drops it into the empty middle track and it drifts to the viewport
+    // centre (R2, 2026-10-15 — the class IS the column).
+    const actions = c.querySelector(".s-admin-header-actions");
+    expect(actions?.className).toContain("s-header-wing-end");
   });
 });

package/src/components/HkAdminHeader.tsx

@@ -162,24 +162,36 @@ export const HkAdminHeader = defineComponent({
       }
     }
 
+    // The header hangs the shared three-zone geometry (grid: two equal
+    // side tracks around a shrinkable centre) — the same contract the
+    // chat frontend top bar uses, so a page header-centre group sits on
+    // the true viewport middle on BOTH faces at every width. (Comment
+    // lives OUTSIDE the class expression: the self-sufficiency audit
+    // reads that expression's literals, and prose apostrophes inside it
+    // parse as string boundaries.)
     return () => (
       <header
         class={[
           "s-glass-header",
+          "s-balanced-header",
           props.compact ? "s-glass-header--compact" : "",
         ]}
       >
-        {props.showHamburger && (
-          <HButton
-            variant="ghost"
-            size="sm"
-            onClick={() => emit("hamburger")}
-          >
-            <Menu size={20} class="s-admin-header-hamburger-icon" />
-          </HButton>
-        )}
-
-        <div ref={userTriggerRef} class="s-admin-header-user">
+        <div ref={userTriggerRef} class="s-admin-header-user s-header-wing-start">
+          {/* The hamburger rides INSIDE the left wing: the balanced grid
+           * above owns the header's columns, and a fourth in-flow child
+           * would fall into the left wing's track and skew every column
+           * after it. Inside the wing it keeps its place (leftmost, ahead
+           * of the avatar) at the wing's own 16px rhythm. */}
+          {props.showHamburger && (
+            <HButton
+              variant="ghost"
+              size="sm"
+              onClick={() => emit("hamburger")}
+            >
+              <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")}
@@ -284,19 +296,19 @@ export const HkAdminHeader = defineComponent({
         </HkMenu>
 
         {/* Page-owned centre group (page filter tab strips, segmented
-         *  option pickers) — the console face of the balanced-wing
-         *  header the chat frontend's top bar already uses: the left
-         *  and right wings grow from the same flex basis so this group
-         *  stays pinned to the true viewport middle. Rendered only when
-         *  the host provides it, so headers without a centre keep the
-         *  exact DOM they always had. */}
+         *  option pickers) — the console face of the balanced header the
+         *  chat frontend's top bar already uses: the shared grid pins
+         *  this column to the true viewport middle and lets the strip
+         *  slide inside its own box when space runs short. Rendered only
+         *  when the host provides it, so headers without a centre keep
+         *  the exact DOM they always had. */}
         {slots.center && (
-          <div class="s-admin-header-center">
+          <div class="s-admin-header-center s-header-wing-center">
             {slots.center()}
           </div>
         )}
 
-        <div class="s-admin-header-actions">
+        <div class="s-admin-header-actions s-header-wing-end">
           {props.showEmergencyStop && (
             <button
               class={[

package/src/components/HkThemePanelContent.tsx

@@ -0,0 +1,338 @@
+import { computed, defineComponent, onUnmounted, ref, watch, type PropType } from "vue";
+import { Check, Monitor, MoonStar, Palette, Sun, Trash as Trash2 } from "lucide-vue-next";
+import {
+  HDivider,
+  solarAltitude,
+  themePresets,
+  useI18n,
+  useTheme,
+  type CustomThemePreset,
+  type ThemeId,
+  type ThemePreset,
+} from "@celestia-island/hikari";
+
+import { HColorSchemeDialog, type HCustomTheme } from "./HkColorSchemeDialog";
+import HTabs, { type TabItem } from "./HkTabs";
+import "./HkThemeToggle.scss";
+
+/** The auto-mode merged run, hoisted: a fresh array literal per render
+ *  would re-fire HTabs' mergeKeys watcher (one redundant geometry
+ *  refresh) on every altitude tick. */
+const AUTO_MERGE_KEYS = ["light", "dark"];
+
+/** Scoped payload handed to the `item-leading` / `item-trailing` slots:
+ *  one object per theme row, carrying enough identity for the host to
+ *  render swatches or affordances without re-deriving the preset.
+ *  `name` is the RAW stored string — it may be a message key (see
+ *  `ThemePreset.name`); the row cell resolves it through the catalog. */
+export interface ThemeItemScope {
+  id: ThemeId;
+  name: string;
+  isCustom: boolean;
+  /** The row's full definition — the built-in preset table entry for
+   *  stock/registered themes, the user's stored scheme for customs. */
+  preset: ThemePreset | CustomThemePreset | undefined;
+}
+
+/**
+ * HkThemePanelContent — the theme panel's CONTENT, extracted from
+ * HkThemeToggle's popover (2026-10-15 user direction: hosts embed the
+ * panel in their own settings surfaces; the trigger+popover chrome and
+ * the content are separate concerns and must be separately usable).
+ *
+ * Everything between the popover's padding lives here: the color-mode
+ * group (HTabs segmented with the solar-altitude merged cell), the
+ * `mode-extra` host strip, the preset/custom theme rows (three scoped
+ * host slots), the customize entry and the `menu-extra` slot. The
+ * built-in HColorSchemeDialog rides along when `externalCustomize` is
+ * false — dialogs teleport, so hosting this inside any surface is safe.
+ *
+ * The component talks to `useTheme()` directly (the composable is a
+ * singleton); the owning surface only supplies slots and reacts to the
+ * two events:
+ *  · `request-close` — a theme was applied or the customize entry was
+ *    pressed; a popover host closes its layer, an inline host ignores it.
+ *  · `open-customize` — pressed with `externalCustomize: true`.
+ */
+export const HkThemePanelContent = defineComponent({
+  name: "HkThemePanelContent",
+  props: {
+    /**
+     * When true, the "Customize" entry emits `open-customize` (and
+     * `request-close`) instead of opening the built-in HColorSchemeDialog
+     * — the host then owns the customization surface. The internal
+     * dialog is not rendered in this mode.
+     */
+    externalCustomize: { type: Boolean, default: false },
+  },
+  emits: {
+    "update:scheme": (_theme: HCustomTheme) => true,
+    "open-customize": () => true,
+    "request-close": () => true,
+  },
+  setup(props, { emit, slots }) {
+    const { t } = useI18n();
+    const {
+      currentTheme,
+      currentMode,
+      effectiveMode,
+      geo,
+      setTheme,
+      setMode,
+      allThemeList,
+      addCustomTheme,
+      removeCustomTheme,
+      customThemes,
+    } = useTheme();
+
+    /** 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 undefined;
+    }
+
+    const schemeDialogOpen = ref(false);
+
+    // ── Solar-altitude readout (auto-mode merged cell) ──────────────
+    // `geo` comes from the theme clock (timezone estimate until the real
+    // fix lands) — the engine and this readout share one resolution.
+    // The timer runs only while this content is MOUNTED (a popover host
+    // unmounts it on close; an inline host keeps it live — the readout
+    // staying current there is a feature, not a leak).
+    const altTick = ref(0);
+    let altTimer: ReturnType<typeof setInterval> | null = null;
+    watch(
+      () => props.externalCustomize,
+      () => void 0,
+    );
+    onUnmounted(() => {
+      if (altTimer) clearInterval(altTimer);
+    });
+    // Mounted ⇒ ticking (see the comment above).
+    altTimer = setInterval(() => { altTick.value += 1; }, 60000);
+
+    /** Current sun altitude formatted like "+32.5°". */
+    const altitudeText = computed(() => {
+      void altTick.value;
+      void geo.value;
+      const alt = solarAltitude(geo.value.lat, geo.value.lng, new Date());
+      return `${alt >= 0 ? "+" : ""}${alt.toFixed(1)}°`;
+    });
+
+    /** Glyph hints which side a press will land on: sun while auto
+     *  resolves light, moon once dusk/night flip it to dark. */
+    const altitudeNight = computed(() => {
+      void altTick.value;
+      void geo.value;
+      return effectiveMode.value === "dark";
+    });
+
+    const isAutoMode = computed(() => currentMode.value === "system");
+
+    /**
+     * Fresh option objects (and fresh icon vnodes) on every call — never
+     * cache icon vnodes across renders, or re-mounting this content
+     * would re-mount the same vnode instances. In AUTO mode the Light/
+     * Dark options collapse into the group's merged cell (the altitude
+     * strip) via `mergeKeys`. They stay ENABLED (2026-10-01 user report:
+     * disabled Light/Dark read as the mode being locked to the sun): in
+     * the merged rendering they are not rendered at all, and on the
+     * degradation path (merge requested without the #merged slot) a
+     * click must drop OUT of auto onto the pressed side instead of
+     * doing nothing.
+     */
+    function modeOptions(): TabItem[] {
+      return [
+        { key: "system", label: t("hikari::theme.modeAuto"), icon: <Monitor size={16} /> },
+        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={16} /> },
+        { key: "dark", label: t("hikari::theme.modeDark"), icon: <MoonStar size={16} /> },
+      ];
+    }
+
+    function onSelectMode(value: string) {
+      setMode(value as "light" | "dark" | "system");
+    }
+
+    /**
+     * Pressing the altitude strip in auto mode drops back to manual and
+     * selects whichever side auto currently resolves to (day → light,
+     * night → dark). Debounced: input synthesis may deliver both a
+     * pointer sequence and a click for one physical press.
+     */
+    let lastManualSwitchAt = 0;
+    function resolveAutoToManual() {
+      const now = Date.now();
+      if (now - lastManualSwitchAt < 700) return;
+      lastManualSwitchAt = now;
+      setMode(effectiveMode.value);
+    }
+
+    function onSelectTheme(id: ThemeId) {
+      setTheme(id);
+      emit("request-close");
+    }
+
+    function onConfirmScheme(theme: HCustomTheme) {
+      addCustomTheme(theme);
+      setTheme(theme.id);
+      emit("update:scheme", theme);
+    }
+
+    return () => (
+      <>
+        <div class="s-theme-menu">
+          <div class="s-theme-menu-label">{t("hikari::theme.mode")}</div>
+          <div class="s-theme-mode-row">
+            <HTabs
+              variant="segmented"
+              block
+              tabs={modeOptions()}
+              modelValue={currentMode.value}
+              onUpdate:modelValue={onSelectMode}
+              mergeKeys={isAutoMode.value ? AUTO_MERGE_KEYS : undefined}
+            >
+              {{
+                merged: () => (
+                  <button
+                    type="button"
+                    class="s-theme-mode-autoalt"
+                    title={t("hikari::theme.autoAltitudeTip")}
+                    aria-label={t("hikari::theme.autoAltitudeTip")}
+                    onClick={resolveAutoToManual}
+                  >
+                    {altitudeNight.value ? <MoonStar size={16} /> : <Sun size={16} />}
+                    <span class="s-theme-mode-autoalt-value">{altitudeText.value}</span>
+                  </button>
+                ),
+              }}
+            </HTabs>
+          </div>
+
+          {/* Host extension point directly under the mode group (P98: the
+               chest DPI control lives here — mode-adjacent chrome, not a theme
+               editor tab). Rendered only when the host provides the slot. */}
+          {slots["mode-extra"] ? (
+            <div class="s-theme-mode-extra">{slots["mode-extra"]()}</div>
+          ) : null}
+
+          <HDivider spacing="md" />
+
+          <div class="s-theme-menu-label">{t("hikari::theme.themes")}</div>
+          {allThemeList.value.map((th) => {
+            // Host-customizable row anatomy. `item-leading` replaces the
+            // selected-check cell and renders for EVERY row (fixed icon
+            // cell, so names stay aligned); `item-name-suffix` renders
+            // INSIDE the row button right after the name, so a host mark
+            // (e.g. a provenance/sync glyph) reads as part of the name
+            // instead of as an affordance; `item-trailing` reserves a
+            // real trailing column for every row and takes full
+            // ownership of the affordances there — the built-in custom
+            // delete overlay is suppressed in that mode, so the host
+            // renders delete (and anything else) itself. Without the
+            // slots the rows behave exactly as before: check only on the
+            // active row, delete overlaid on custom rows only.
+            const scope: ThemeItemScope = {
+              id: th.id,
+              name: th.name,
+              isCustom: th.isCustom,
+              preset: presetOf(th.id),
+            };
+            const leadingSlot = slots["item-leading"];
+            const nameSuffixSlot = slots["item-name-suffix"];
+            const trailingSlot = slots["item-trailing"];
+            // A preset/custom name may be a message key into hikari's own
+            // catalog (the documented ThemePreset.name convention — hosts
+            // ship localized built-ins like "hikari::theme.defaultThemeName").
+            // `t()` falls back to the raw string for anything that is not a
+            // key, so literal display names pass through unchanged, and the
+            // reactive message lookup re-renders rows on locale switches.
+            const displayName = t(th.name);
+            return (
+              <div
+                key={th.id}
+                class="s-theme-item-row"
+                data-custom={th.isCustom || undefined}
+                data-trailing={trailingSlot ? "slot" : undefined}
+                data-name-suffix={nameSuffixSlot ? "slot" : undefined}
+                // The ROW is the pill: the highlight state lives here so
+                // the hover/active wash spans the full row width — a
+                // trailing slot column must not shrink it (2026-10-01
+                // user report: theme rows and the 自定义 row hovered at
+                // different widths). The button keeps the click/focus
+                // semantics; the stylesheet strips its own chrome.
+                data-active={currentTheme.value === th.id || undefined}
+              >
+                <button
+                  type="button"
+                  class="s-theme-item-btn"
+                  data-active={currentTheme.value === th.id || undefined}
+                  onClick={() => onSelectTheme(th.id)}
+                >
+                  {leadingSlot ? (
+                    <span class="hk-menu-item-icon s-theme-item-lead">
+                      {leadingSlot(scope)}
+                    </span>
+                  ) : currentTheme.value === th.id ? (
+                    <span class="hk-menu-item-icon s-theme-item-check"><Check size={14} /></span>
+                  ) : null}
+                  <span class="s-theme-item-name">{displayName}</span>
+                  {nameSuffixSlot ? (
+                    <span class="s-theme-item-name-suffix">{nameSuffixSlot(scope)}</span>
+                  ) : null}
+                </button>
+                {trailingSlot ? (
+                  <span class="s-theme-item-trailing">{trailingSlot(scope)}</span>
+                ) : th.isCustom ? (
+                  <button
+                    type="button"
+                    class="s-theme-item-delete"
+                    title={t("hikari::theme.deleteTheme")}
+                    onClick={() => removeCustomTheme(th.id)}
+                  >
+                    <Trash2 size={12} />
+                  </button>
+                ) : null}
+              </div>
+            );
+          })}
+
+          <button
+            type="button"
+            class="s-theme-item-btn s-theme-item-customize"
+            onClick={() => {
+              if (props.externalCustomize) {
+                emit("request-close");
+                emit("open-customize");
+              } else {
+                schemeDialogOpen.value = true;
+              }
+            }}
+          >
+            <span class="hk-menu-item-icon"><Palette size={14} /></span>
+            <span class="s-theme-item-name">{t("hikari::theme.customize")}</span>
+          </button>
+        </div>
+        {(() => {
+          const extra = slots["menu-extra"]?.() ?? [];
+          return extra.length ? (
+            <div class="hk-menu-slot hk-menu-slot--extra">{extra}</div>
+          ) : null;
+        })()}
+
+        {!props.externalCustomize && (
+          <HColorSchemeDialog
+            modelValue={schemeDialogOpen.value}
+            onUpdate:modelValue={(v: boolean) => { schemeDialogOpen.value = v; }}
+            onConfirm={onConfirmScheme}
+          />
+        )}
+      </>
+    );
+  },
+});

package/src/components/HkThemeToggle.tsx

@@ -1,47 +1,20 @@
-import { computed, defineComponent, onUnmounted, ref, watch, type PropType } from "vue";
-import { Check, Monitor, MoonStar, Palette, Sun, Trash as Trash2 } from "lucide-vue-next";
-import {
-  HDivider,
-  HPopover,
-  solarAltitude,
-  themePresets,
-  useI18n,
-  useTheme,
-  type CustomThemePreset,
-  type PopupPlacement,
-  type ThemeId,
-  type ThemePreset,
-} from "@celestia-island/hikari";
+import { defineComponent, onUnmounted, ref, watch, type PropType } from "vue";
+import { Palette } from "lucide-vue-next";
+import { HPopover, useI18n, type PopupPlacement } from "@celestia-island/hikari";
 
-import { HColorSchemeDialog, type HCustomTheme } from "./HkColorSchemeDialog";
 import HkIconButton from "./HkIconButton";
-import HTabs, { type TabItem } from "./HkTabs";
+import { HkThemePanelContent } from "./HkThemePanelContent";
+import type { HCustomTheme } from "./HkColorSchemeDialog";
 import "./HkThemeToggle.scss";
 
-/** The auto-mode merged run, hoisted: a fresh array literal per render
- *  would re-fire HTabs' mergeKeys watcher (one redundant geometry
- *  refresh) on every altitude tick. */
-const AUTO_MERGE_KEYS = ["light", "dark"];
-
-/** Scoped payload handed to the `item-leading` / `item-trailing` slots:
- *  one object per theme row, carrying enough identity for the host to
- *  render swatches or affordances without re-deriving the preset.
- *  `name` is the RAW stored string — it may be a message key (see
- *  `ThemePreset.name`); the row cell resolves it through the catalog. */
-export interface ThemeItemScope {
-  id: ThemeId;
-  name: string;
-  isCustom: boolean;
-  /** The row's full definition — the built-in preset table entry for
-   *  stock/registered themes, the user's stored scheme for customs. */
-  preset: ThemePreset | CustomThemePreset | undefined;
-}
+export { type ThemeItemScope } from "./HkThemePanelContent";
 
 /**
  * HkThemeToggle — light/dark/auto theme control over hikari's theme engine.
  *
- * Composes hikari's `useTheme()` (theme presets + custom themes + mode
- * persistence); it does NOT reimplement the theme engine. ONE trigger —
+ * Composes the shared HkThemePanelContent (the panel body both this
+ * popover and host settings surfaces render); it does NOT reimplement the
+ * theme engine. ONE trigger —
  * a standard HkIconButton ghost/28 with a palette glyph, chrome-identical
  * to the functional buttons hosts place beside it — opens the popover,
  * which offers the color-mode group and preset/custom theme selection
@@ -107,140 +80,28 @@ export const HkThemeToggle = defineComponent({
   },
   setup(props, { emit, slots, expose }) {
     const { t } = useI18n();
-    const { currentTheme, currentMode, effectiveMode, geo, setTheme, setMode, allThemeList, addCustomTheme, removeCustomTheme, customThemes } = useTheme();
-
-    /** 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 undefined;
-    }
-
     const menuOpen = ref(false);
     const triggerRef = ref<HTMLElement | null>(null);
-    const schemeDialogOpen = ref(false);
 
     /** Programmatic close for host content inside the menu (row slot
-     *  affordances): a host opening a delegated second-level window from
-     *  a theme row calls this to dismiss the menu. The menu is ONE state
-     *  in both its forms — desktop popover and mobile bottom sheet — so
+     *  affordances): a host opening a delegated second-level window from a
+     *  theme row calls this to dismiss the menu. The menu is ONE state in
+     *  both its forms — desktop popover and mobile bottom sheet — so
      *  this closes whichever is showing, with no breakpoint branching
-     *  here; a mobile-aware host decides whether to call it at all.
-     *  Same teardown as every internal close — the alt-timer cleanup
-     *  rides the menuOpen watcher. */
+     *  here; a mobile-aware host decides whether to call it at all. */
     function closeMenu() {
       menuOpen.value = false;
     }
     expose({ closeMenu });
 
-    // ── Solar-altitude readout (auto-mode merged cell) ──────────────
-    // `geo` comes from the theme clock (timezone estimate until the real
-    // fix lands) — the engine and this readout share one resolution.
-    const altTick = ref(0);
-
-    let altTimer: ReturnType<typeof setInterval> | null = null;
-    watch(menuOpen, (open) => {
-      if (open) {
-        if (!altTimer) altTimer = setInterval(() => { altTick.value += 1; }, 60000);
-      } else if (altTimer) {
-        clearInterval(altTimer);
-        altTimer = null;
-      }
-    });
-    onUnmounted(() => {
-      if (altTimer) clearInterval(altTimer);
-    });
-
-    /** Current sun altitude formatted like "+32.5°". */
-    const altitudeText = computed(() => {
-      void menuOpen.value;
-      void altTick.value;
-      void geo.value;
-      const alt = solarAltitude(geo.value.lat, geo.value.lng, new Date());
-      return `${alt >= 0 ? "+" : ""}${alt.toFixed(1)}°`;
-    });
-
-    /** Glyph hints which side a press will land on: sun while auto
-     *  resolves light, moon once dusk/night flip it to dark. */
-    const altitudeNight = computed(() => {
-      void menuOpen.value;
-      void altTick.value;
-      void geo.value;
-      return effectiveMode.value === "dark";
-    });
-
-    const isAutoMode = computed(() => currentMode.value === "system");
-
-    /**
-     * Fresh option objects (and fresh icon vnodes) on every call — never
-     * cache icon vnodes across renders, or closing/reopening the popover
-     * would re-mount the same vnode instances. In AUTO mode the Light/
-     * Dark options collapse into the group's merged cell (the altitude
-     * strip) via `mergeKeys`. They stay ENABLED (2026-10-01 user report:
-     * disabled Light/Dark read as the mode being locked to the sun): in
-     * the merged rendering they are not rendered at all, and on the
-     * degradation path (merge requested without the #merged slot) a
-     * click must drop OUT of auto onto the pressed side instead of
-     * doing nothing.
-     */
-    function modeOptions(): TabItem[] {
-      return [
-        { key: "system", label: t("hikari::theme.modeAuto"), icon: <Monitor size={16} /> },
-        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={16} /> },
-        { key: "dark", label: t("hikari::theme.modeDark"), icon: <MoonStar size={16} /> },
-      ];
-    }
-
-    function onSelectMode(value: string) {
-      setMode(value as "light" | "dark" | "system");
-    }
-
-    /**
-     * Pressing the altitude strip in auto mode drops back to manual and
-     * selects whichever side auto currently resolves to (day → light,
-     * night → dark). Debounced: input synthesis may deliver both a
-     * pointer sequence and a click for one physical press.
-     */
-    let lastManualSwitchAt = 0;
-    function resolveAutoToManual() {
-      const now = Date.now();
-      if (now - lastManualSwitchAt < 700) return;
-      lastManualSwitchAt = now;
-      setMode(effectiveMode.value);
-    }
-
-    function onSelectTheme(id: ThemeId) {
-      setTheme(id);
-      closeMenu();
-    }
-
-    function onConfirmScheme(theme: HCustomTheme) {
-      addCustomTheme(theme);
-      setTheme(theme.id);
-      emit("update:scheme", theme);
-    }
-
     return () => (
       <div class="s-theme-toggle" ref={triggerRef}>
-        {/* ONE trigger (user direction 2026-09-30): the old main/arrow pair
-         * read as two separate header buttons whose hover washes disagreed
-         * (bespoke primary wash here vs the ghost gray beside them). The
-         * trigger is now a STANDARD HkIconButton ghost/28 with a palette
-         * glyph — identical chrome to the functional buttons it sits
-         * beside (transparent rest, ghost wash on hover/press, shared
-         * focus ring) at the SAME header chrome step (user report
-         * 2026-09-28: the cluster reads as one row only at ghost/28 with
-         * the sm 16px glyph, which the 28 step maps). And it only opens
-         * the menu; mode switching lives in the menu's color-mode strip
-         * (auto altitude strip resolves auto to a manual side), which
-         * loses nothing the old direct mode-cycle press offered. The
-         * `s-theme-toggle-btn` class stays as a stable consumer/test
-         * hook; it carries NO css of its own. */}
+        {/* ONE trigger (user direction 2026-09-30): a STANDARD HkIconButton
+         * ghost/28 with a palette glyph — identical chrome to the functional
+         * buttons it sits beside. It only opens the menu; mode switching
+         * lives in the menu's color-mode strip. The `s-theme-toggle-btn`
+         * class stays as a stable consumer/test hook; it carries NO css of
+         * its own. */}
         <HkIconButton
           class="s-theme-toggle-btn"
           size={28}
@@ -260,157 +121,27 @@ export const HkThemeToggle = defineComponent({
           placement={props.popoverPlacement}
           anchorRef={triggerRef.value ?? null}
           sheetOnMobile
-          // Names the breadcrumb layer / sheet heading when this menu
-          // blocks as a mobile bottom sheet.
           title={t("hikari::theme.themes")}
         >
-          <div class="s-theme-menu">
-            <div class="s-theme-menu-label">{t("hikari::theme.mode")}</div>
-            <div class="s-theme-mode-row">
-              <HTabs
-                variant="segmented"
-                block
-                tabs={modeOptions()}
-                modelValue={currentMode.value}
-                onUpdate:modelValue={onSelectMode}
-                mergeKeys={isAutoMode.value ? AUTO_MERGE_KEYS : undefined}
-              >
-                {{
-                  merged: () => (
-                    <button
-                      type="button"
-                      class="s-theme-mode-autoalt"
-                      title={t("hikari::theme.autoAltitudeTip")}
-                      aria-label={t("hikari::theme.autoAltitudeTip")}
-                      onClick={resolveAutoToManual}
-                    >
-                      {altitudeNight.value ? <MoonStar size={16} /> : <Sun size={16} />}
-                      <span class="s-theme-mode-autoalt-value">{altitudeText.value}</span>
-                    </button>
-                  ),
-                }}
-</HTabs>
-            </div>
-
-            {/* Host extension point directly under the mode group (P98: the
-                 chest DPI control lives here — mode-adjacent chrome, not a theme
-                 editor tab). Rendered only when the host provides the slot. */}
-            {slots["mode-extra"] ? (
-              <div class="s-theme-mode-extra">{slots["mode-extra"]()}</div>
-            ) : null}
-
-            <HDivider spacing="md" />
-
-            <div class="s-theme-menu-label">{t("hikari::theme.themes")}</div>
-            {allThemeList.value.map((th) => {
-              // Host-customizable row anatomy. `item-leading` replaces the
-              // selected-check cell and renders for EVERY row (fixed icon
-              // cell, so names stay aligned); `item-name-suffix` renders
-              // INSIDE the row button right after the name, so a host mark
-              // (e.g. a provenance/sync glyph) reads as part of the name
-              // instead of as an affordance; `item-trailing` reserves a
-              // real trailing column for every row and takes full
-              // ownership of the affordances there — the built-in custom
-              // delete overlay is suppressed in that mode, so the host
-              // renders delete (and anything else) itself. Without the
-              // slots the rows behave exactly as before: check only on
-              // the active row, delete overlaid on custom rows only.
-              const scope: ThemeItemScope = {
-                id: th.id,
-                name: th.name,
-                isCustom: th.isCustom,
-                preset: presetOf(th.id),
-              };
-              const leadingSlot = slots["item-leading"];
-              const nameSuffixSlot = slots["item-name-suffix"];
-              const trailingSlot = slots["item-trailing"];
-              // A preset/custom name may be a message key into hikari's own
-              // catalog (the documented ThemePreset.name convention — hosts
-              // ship localized built-ins like "hikari::theme.defaultThemeName").
-              // `t()` falls back to the raw string for anything that is not a
-              // key, so literal display names pass through unchanged, and the
-              // reactive message lookup re-renders rows on locale switches.
-              const displayName = t(th.name);
-              return (
-                <div
-                  key={th.id}
-                  class="s-theme-item-row"
-                  data-custom={th.isCustom || undefined}
-                  data-trailing={trailingSlot ? "slot" : undefined}
-                  data-name-suffix={nameSuffixSlot ? "slot" : undefined}
-                  // The ROW is the pill: the highlight state lives here so
-                  // the hover/active wash spans the full row width — a
-                  // trailing slot column must not shrink it (2026-10-01
-                  // user report: theme rows and the 自定义 row hovered at
-                  // different widths). The button keeps the click/focus
-                  // semantics; the stylesheet strips its own chrome.
-                  data-active={currentTheme.value === th.id || undefined}
-                >
-                  <button
-                    type="button"
-                    class="s-theme-item-btn"
-                    data-active={currentTheme.value === th.id || undefined}
-                    onClick={() => onSelectTheme(th.id)}
-                  >
-                    {leadingSlot ? (
-                      <span class="hk-menu-item-icon s-theme-item-lead">
-                        {leadingSlot(scope)}
-                      </span>
-                    ) : currentTheme.value === th.id ? (
-                      <span class="hk-menu-item-icon s-theme-item-check"><Check size={14} /></span>
-                    ) : null}
-                    <span class="s-theme-item-name">{displayName}</span>
-                    {nameSuffixSlot ? (
-                      <span class="s-theme-item-name-suffix">{nameSuffixSlot(scope)}</span>
-                    ) : null}
-                  </button>
-                  {trailingSlot ? (
-                    <span class="s-theme-item-trailing">{trailingSlot(scope)}</span>
-                  ) : th.isCustom ? (
-                    <button
-                      type="button"
-                      class="s-theme-item-delete"
-                      title={t("hikari::theme.deleteTheme")}
-                      onClick={() => removeCustomTheme(th.id)}
-                    >
-                      <Trash2 size={12} />
-                    </button>
-                  ) : null}
-                </div>
-              );
-            })}
-
-            <button
-              type="button"
-              class="s-theme-item-btn s-theme-item-customize"
-              onClick={() => {
-                closeMenu();
-                if (props.externalCustomize) {
-                  emit("open-customize");
-                } else {
-                  schemeDialogOpen.value = true;
-                }
-              }}
-            >
-              <span class="hk-menu-item-icon"><Palette size={14} /></span>
-              <span class="s-theme-item-name">{t("hikari::theme.customize")}</span>
-            </button>
-          </div>
-          {(() => {
-            const extra = slots["menu-extra"]?.() ?? [];
-            return extra.length ? (
-              <div class="hk-menu-slot hk-menu-slot--extra">{extra}</div>
-            ) : null;
-          })()}
+          {/* The panel content is the SHARED HkThemePanelContent (2026-10-15
+           * extraction): hosts embed the same component in their own
+           * settings surfaces, so the popover and any inline host render
+           * one implementation. Slots and events pass straight through. */}
+          <HkThemePanelContent
+            externalCustomize={props.externalCustomize}
+            onRequest-close={closeMenu}
+            onOpen-customize={() => emit("open-customize")}
+            onUpdate:scheme={(theme: HCustomTheme) => emit("update:scheme", theme)}
+          >
+            {{
+              ...(slots["mode-extra"] ? { "mode-extra": slots["mode-extra"] } : {}),
+              ...(slots["item-leading"] ? { "item-leading": slots["item-leading"] } : {}),
+              ...(slots["item-name-suffix"] ? { "item-name-suffix": slots["item-name-suffix"] } : {}),
+              ...(slots["item-trailing"] ? { "item-trailing": slots["item-trailing"] } : {}),
+              ...(slots["menu-extra"] ? { "menu-extra": slots["menu-extra"] } : {}),
+            }}
+          </HkThemePanelContent>
         </HPopover>
-
-        {!props.externalCustomize && (
-          <HColorSchemeDialog
-            modelValue={schemeDialogOpen.value}
-            onUpdate:modelValue={(v: boolean) => { schemeDialogOpen.value = v; }}
-            onConfirm={onConfirmScheme}
-          />
-        )}
       </div>
     );
   },

package/src/components/_menu-item.contract.test.ts

@@ -24,7 +24,7 @@ import { fileURLToPath } from "node:url";
 const here = dirname(fileURLToPath(import.meta.url));
 const grammar = readFileSync(join(here, "_menu-item.scss"), "utf-8");
 const menuTsx = readFileSync(join(here, "HkMenu.tsx"), "utf-8");
-const themeTsx = readFileSync(join(here, "HkThemeToggle.tsx"), "utf-8");
+const themeTsx = readFileSync(join(here, "HkThemePanelContent.tsx"), "utf8");
 const adminTokens = readFileSync(join(here, "../styles/admin-tokens.scss"), "utf-8");
 
 describe("menu-item grammar contract", () => {

package/src/components/adminHeaderChrome.test.ts

@@ -93,20 +93,59 @@ describe("admin header chrome geometry (the two user-requested fixes)", () => {
     const rule = ruleDeclarations(adminTokens, ".s-admin-header-user");
     expect(rule, ".s-admin-header-user must be declared").not.toBeNull();
     expect(rule).toContainEqual(["gap", "var(--space-16)"]);
-    // Balanced left wing (the centre group stays viewport-centred).
-    expect(rule).toContainEqual(["flex", "1 1 0"]);
   });
 
-  it("keeps the actions wing balanced (no margin-left:auto push) and the centre wing shrinkable", () => {
-    const actions = ruleDeclarations(adminTokens, ".s-admin-header-actions");
-    expect(actions, ".s-admin-header-actions must be declared").not.toBeNull();
-    expect(actions).toContainEqual(["flex", "1 1 0"]);
-    expect(actions).toContainEqual(["justify-content", "flex-end"]);
+  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
+    // wing is just the avatar while three icon buttons sit right) while
+    // the frontend's strip read centred — two per-band flex dialects had
+    // drifted from the same idea. Both faces now hang the ONE grid
+    // contract: two EQUAL 1fr side tracks (true centring regardless of
+    // wing content) with min-content floors (wings can never be squeezed
+    // out of existence) around a shrinkable centre column (the strip
+    // slides inside its own box, edge fades + swipe).
+    const balanced = ruleDeclarations(adminTokens, ".s-balanced-header");
+    expect(balanced, ".s-balanced-header must be declared").not.toBeNull();
+    expect(balanced).toContainEqual([
+      "grid-template-columns",
+      "minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr)",
+    ]);
+    const start = ruleDeclarations(adminTokens, ".s-header-wing-start");
+    expect(start, ".s-header-wing-start must be declared").not.toBeNull();
+    // Each wing names its column EXPLICITLY: with auto-placement a
+    // centre-less host (the vast majority of admin pages — most never
+    // register a centre group) renders only two in-flow children and the
+    // actions wing would fall into the MIDDLE track, drifting to the
+    // viewport centre instead of hugging the right edge (R2, 2026-10-15).
+    expect(start).toContainEqual(["grid-column", "1"]);
+    expect(start).toContainEqual(["justify-self", "start"]);
+    expect(start).toContainEqual(["overflow", "hidden"]);
+    const centre = ruleDeclarations(adminTokens, ".s-header-wing-center");
+    expect(centre, ".s-header-wing-center must be declared").not.toBeNull();
+    // Default stretch, NOT justify-self: center: a centered item sizes by
+    // fit-content, whose min-content floor (the full strip width) punches
+    // the item past a shrunken middle track — the strip would paint over
+    // the wings instead of scrolling inside its own box.
+    expect(centre).toContainEqual(["grid-column", "2"]);
+    expect(centre).toContainEqual(["min-width", "0"]);
+    expect(centre).not.toContainEqual(["justify-self", "center"]);
+    const end = ruleDeclarations(adminTokens, ".s-header-wing-end");
+    expect(end, ".s-header-wing-end must be declared").not.toBeNull();
+    expect(end).toContainEqual(["grid-column", "3"]);
+    expect(end).toContainEqual(["justify-self", "end"]);
+    expect(end).toContainEqual(["overflow", "hidden"]);
+  });
+
+  it("keeps the wings free of their own flex-geometry dialect (the grid owns it)", () => {
+    // The flex era's per-wing declarations must stay gone: any return of
+    // `flex` on a wing re-introduces a second geometry that drifts from
+    // the shared grid (the 2026-10-15 skew).
+    expect(ruleDeclarations(adminTokens, ".s-admin-header-user")).not.toContainEqual(["flex", "1 1 0"]);
+    expect(ruleDeclarations(adminTokens, ".s-admin-header-actions")).not.toContainEqual(["flex", "1 1 0"]);
+    expect(ruleDeclarations(adminTokens, ".s-admin-header-center")).not.toContainEqual(["flex", "0 1 auto"]);
     // The old push would fight the centre wing for the middle.
-    expect(actions).not.toContainEqual(["margin-left", "auto"]);
-    const centre = ruleDeclarations(adminTokens, ".s-admin-header-center");
-    expect(centre, ".s-admin-header-center must be declared").not.toBeNull();
-    expect(centre).toContainEqual(["flex", "0 1 auto"]);
+    expect(ruleDeclarations(adminTokens, ".s-admin-header-actions")).not.toContainEqual(["margin-left", "auto"]);
   });
 
   it("keeps the 28px icon-button step at the theme toggle's own box", () => {
@@ -120,25 +159,20 @@ describe("admin header chrome geometry (the two user-requested fixes)", () => {
     expect(iconButton).toMatch(/PropType<16 \| 24 \| 28 \| 32 \| 36 \| 40>/);
   });
 
-  it("pins the phone band: wings keep their floors, the centre strip owns the overflow", () => {
-    // User report 2026-10-12: on phones the balanced wings (flex 1 1 0 +
-    // min-width 0) were squeezed BELOW the avatar's 28px floor by a wide
-    // centre tab strip, and the strip painted straight over the avatar.
-    // The ≤767px band must pin both wings and hand the leftover to the
-    // centre (mirroring ChatLayout's own phone band) so the strip slides
-    // inside its own box instead of over the avatar.
+  it("keeps the phone band free of ad-hoc wing overrides (one geometry at every width)", () => {
+    // The 2026-10-12 band pinned the wings and handed the leftover to
+    // the centre; it fixed the avatar overlap but skewed the strip off
+    // the viewport middle (user report 2026-10-15). The shared grid's
+    // min-content floors + shrinkable centre column handle phones
+    // intrinsically, so no per-band flex override may come back.
     const userRules = allRuleDeclarations(adminTokens, ".s-admin-header-user");
     const centreRules = allRuleDeclarations(adminTokens, ".s-admin-header-center");
     const actionsRules = allRuleDeclarations(adminTokens, ".s-admin-header-actions");
-    // Exactly one NESTED occurrence (the phone band) per prelude.
-    const phone = (rules: typeof userRules) => rules.filter((r) => r.nested).map((r) => r.decls);
-    expect(phone(userRules)).toHaveLength(1);
-    expect(phone(centreRules)).toHaveLength(1);
-    expect(phone(actionsRules)).toHaveLength(1);
-    expect(phone(userRules)[0]).toContainEqual(["flex", "0 0 auto"]);
-    expect(phone(actionsRules)[0]).toContainEqual(["flex", "0 0 auto"]);
-    expect(phone(centreRules)[0]).toContainEqual(["flex", "1 1 auto"]);
-    expect(phone(centreRules)[0]).toContainEqual(["min-width", "0"]);
-    expect(phone(centreRules)[0]).toContainEqual(["overflow", "hidden"]);
+    for (const [name, rules] of [["user", userRules], ["centre", centreRules], ["actions", actionsRules]] as const) {
+      expect(rules.filter((r) => r.nested), `${name}: no band-nested rules may remain`).toHaveLength(0);
+      for (const r of rules) {
+        expect(r.decls.map((d) => d[0]), `${name}: no flex geometry may remain`).not.toContain("flex");
+      }
+    }
   });
 });

package/src/index.ts

@@ -491,6 +491,7 @@ export { HkAdminShell as HAdminShell } from "./components/HkAdminShell";
 export { HkAdminHeader as HAdminHeader } from "./components/HkAdminHeader";
 export { HkNavSidebar as HNavSidebar } from "./components/HkNavSidebar";
 export { HkThemeToggle as HThemeToggle, type ThemeItemScope } from "./components/HkThemeToggle";
+export { HkThemePanelContent as HThemePanelContent } from "./components/HkThemePanelContent";
 export { HkAuthCard as HAuthCard } from "./components/HkAuthCard";
 export { default as HAuthMethodList } from "./components/HkAuthMethodList";
 export { HkSignInCard as HSignInCard } from "./components/HkSignInCard";
@@ -735,6 +736,7 @@ export { HkAdminShell as HkAdminShell } from "./components/HkAdminShell";
 export { HkAdminHeader as HkAdminHeader } from "./components/HkAdminHeader";
 export { HkNavSidebar as HkNavSidebar } from "./components/HkNavSidebar";
 export { HkThemeToggle as HkThemeToggle } from "./components/HkThemeToggle";
+export { HkThemePanelContent as HkThemePanelContent } from "./components/HkThemePanelContent";
 export { HkAuthCard as HkAuthCard } from "./components/HkAuthCard";
 export { HkSignInCard as HkSignInCard } from "./components/HkSignInCard";
 export { HkThirdPartySignInCard as HkThirdPartySignInCard } from "./components/HkThirdPartySignInCard";

package/src/styles/admin-tokens.scss

@@ -413,6 +413,74 @@
   padding: 0 var(--space-16);
 }
 
+/* ── Balanced header columns (the ONE three-zone header layout) ─────────
+ * The shared geometry behind every top bar that owns a header-centre
+ * group: the frontend chat header (chest ChatLayout's .s-header-bar-*)
+ * and the console header (HkAdminHeader's .s-admin-header-*) both hang
+ * these classes next to their own chrome classes, so the two faces can
+ * never drift apart again (user report 2026-10-15: the console's
+ * header-centre tab strip sat LEFT of centre on phones while the
+ * frontend's strip read centred — two per-band flex dialects had grown
+ * from the same idea).
+ *
+ * Grid, not flex: two EQUAL 1fr side tracks pin the middle column to the
+ * true viewport middle no matter how lopsided the wings' CONTENT is
+ * (avatar-only left vs three icon buttons right — exactly the console's
+ * phone case, where the drawer mode hides the title and the left wing is
+ * just the 28px trigger). Flex wings grow from flex-basis 0, so equal
+ * growth centred the group only while spare space lasted; each band then
+ * grew its own ad-hoc override and each override skewed in SOME band.
+ * `minmax(min-content, 1fr)` gives each wing a hard content floor, so an
+ * overflowing centre column (a wide tab strip) can never squeeze the
+ * avatar/action wings out of existence — the 2026-10-12 phone incident
+ * class — and the centre column is `minmax(0, auto)`, so IT soaks the
+ * squeeze instead: the strip narrows while STAYING centred, and its
+ * internal HkTabs scroller takes over (edge fades + swipe, the frontend
+ * over-wide-strip behavior) without ever covering a wing. */
+.s-balanced-header {
+  display: grid;
+  grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr);
+  align-items: center;
+}
+
+/* Each wing names its column EXPLICITLY: the header's in-flow children are
+ * exactly these three zones (every other child teleports out), but a
+ * centre-less host renders only two of them — with auto-placement the
+ * actions wing would fall into the MIDDLE track and drift to the viewport
+ * centre (R2 finding, 2026-10-15), because the trailing 1fr track would
+ * sit empty. Naming the columns makes the contract positional by class,
+ * not by child order or count: a centre-less header lays out as
+ * [user | empty | actions] exactly like the old flex bar did. */
+.s-header-wing-start {
+  grid-column: 1;
+  justify-self: start;
+  min-width: 0;
+  /* A wing whose content floors exceed its track must not PAINT past the
+   * wing box underneath the centre group (popup surfaces teleport to
+   * body, so clipping here never cuts a menu). */
+  overflow: hidden;
+}
+
+.s-header-wing-center {
+  /* Default stretch, deliberately: the strip must inherit the COLUMN's
+   * shrunken width when the middle track soaks a squeeze, so the HTabs
+   * scroller inside it takes over (edge fades + swipe). justify-self:
+   * center here would size the item by fit-content, whose min-content
+   * floor (= the full strip width) punches the item past the shrunken
+   * track and the strip paints over the wings instead of scrolling.
+   * Centring itself is the tracks' job (equal 1fr sides), not the
+   * item's. */
+  grid-column: 2;
+  min-width: 0;
+}
+
+.s-header-wing-end {
+  grid-column: 3;
+  justify-self: end;
+  min-width: 0;
+  overflow: hidden;
+}
+
 /* ── Admin header chrome (HkAdminHeader) ────────────────────────────────
  * The header's own layout. Every declaration below replaces a utility
  * class the markup used to depend on (`w-7 h-7`, `rounded-full`,
@@ -420,7 +488,10 @@
  * atomic layer rendered the header without them, and a host with one
  * (chest/UnoCSS) owned values the design system could not fix. Values are
  * the verified computed ones (audit 2026-09-15 against chest's generated
- * CSS), so no host's rendering changes. */
+ * CSS), so no host's rendering changes.
+ * The three-zone GEOMETRY itself lives in the shared .s-balanced-header
+ * contract above — the classes below keep only their wing-INTERNAL
+ * layout (row direction, gaps, alignment) and appearance. */
 
 .s-admin-header-user {
   display: flex;
@@ -433,50 +504,15 @@
    * The wing gap here carries the whole distance so the title text
    * lands on the same rhythm as the panel's button content. */
   gap: var(--space-16);
-  /* Balanced left wing (same grammar as ChatLayout's .s-header-bar-left):
-   * grows from the same flex basis as the actions wing so a centre
-   * group, when a page renders one, stays pinned to the true middle. */
-  flex: 1 1 0;
-  min-width: 0;
 }
 
 /* The page-owned centre group (filter tab strips): keeps its natural
- * width and hands overflow to the HTabs scroller inside it. */
+ * width and hands overflow to the HTabs scroller inside it. Column
+ * placement/shrinkage is the shared grid contract's job. */
 .s-admin-header-center {
-  flex: 0 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 0;
-}
-
-
-/* Phone band (≤767px) — mirrors ChatLayout's own ≤767px header band
- * (the console face of the same balanced-wing header). On phones the
- * desktop balanced wings (`flex: 1 1 0` + `min-width: 0`) let a wide
- * centre tab strip squeeze BOTH side wings below their content floors:
- * the avatar wing shrank under its 28px trigger and the strip painted
- * straight over the avatar (user report 2026-10-12, L2 firewall tabs).
- * The frontend's answer — pin both wings, hand the leftover to the
- * centre and let its HTabs scroller own the overflow — is reproduced
- * here in substance: the strip keeps every pixel the avatar and the action
- * buttons don't need, and slides INSIDE its own box (edge fades + scroll
- * limits intact) without ever covering the avatar.
- * Desktop (>767px) keeps the balanced-wing centring untouched. */
-@media (max-width: 767px) {
-  .s-admin-header-user {
-    flex: 0 0 auto;
-  }
-
-  .s-admin-header-actions {
-    flex: 0 0 auto;
-  }
-
-  .s-admin-header-center {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-  }
 }
 
 .s-admin-header-avatar {
@@ -527,13 +563,10 @@
   display: flex;
   align-items: center;
   gap: var(--space-6);
-  /* Balanced right wing: with the user wing at flex 1 1 0 the pair
-   * grows symmetrically, so the centre group stays centred and the
-   * actions still hug the right edge (justify-end replaces the old
-   * margin-left:auto push, which would fight the centre wing). The
-   * automatic min-content floor keeps the icon buttons from being
-   * squeezed below their own width on narrow viewports. */
-  flex: 1 1 0;
+  /* The actions hug the right edge of their grid column (the old
+   * margin-left:auto push fought the centre wing for the middle; the
+   * flex-balanced `1 1 0` era before that skewed whenever the wings'
+   * contents disagreed — the shared grid contract ends both). */
   justify-content: flex-end;
 }