@celestia-island/hikari 0.4.4 → 0.30.0

package/src/components/HkAdaptiveDialog.tsx

@@ -0,0 +1,167 @@
+/**
+ * HkAdaptiveDialog — one dialog contract, two shells.
+ *
+ * Renders HkModal on desktop viewports and HkDrawer side="bottom" on
+ * mobile (switched by `useBreakpoint().isMobile`, i.e. width < 768), so
+ * one `v-model` component gives a centered dialog on wide screens and a
+ * slide-up sheet on phones. The shell only picks which inner component
+ * renders and normalizes props/slots — overlay, teleport, z-index
+ * stacking, body scroll lock, focus handling and Escape-to-close all
+ * come from the inner components via usePopupManager and are never
+ * re-implemented here.
+ *
+ * Slot mapping:
+ *   default -> body of whichever shell renders
+ *   header  -> HkModal sub-header (below the title bar); on mobile the
+ *              drawer header is composed so the title stays in the title
+ *              bar and the slot content rides under it (visual parity
+ *              with the modal)
+ *   footer  -> footer slot of either shell; wins over footerActions,
+ *              matching HkModal's own precedence
+ *
+ * footerActions pass straight into HkModal's prop on desktop; HkDrawer
+ * has no footerActions prop, so on mobile the shell renders the
+ * equivalent HButton row inside the drawer's footer slot (same order,
+ * variants, loading, disabled and onClick handlers).
+ *
+ * Caveat: if the viewport crosses the mobile breakpoint while a leave
+ * transition is still in flight, the inner Transition unmounts without
+ * firing its after-leave hook — the forwarded `afterLeave` emit and
+ * HkModal's focus restore are skipped for that close (no resource leak:
+ * popup handle and scroll lock are released on unmount). Consumers
+ * relying on afterLeave (e.g. focus hand-off) should not depend on it
+ * firing during a live shell flip.
+ */
+import { defineComponent, type PropType } from "vue";
+
+import { useBreakpoint } from "../runtime/useBreakpoint";
+import "./HkAdaptiveDialog.scss";
+import HButton from "./HkButton";
+import HDrawer from "./HkDrawer";
+import HModal, { type ModalAction } from "./HkModal";
+
+export default defineComponent({
+  name: "HkAdaptiveDialog",
+  props: {
+    modelValue: { type: Boolean, required: true },
+    title: { type: String, default: undefined },
+    closable: { type: Boolean, default: true },
+    /** Desktop modal width (HkModal `width`). */
+    width: { type: String, default: "32rem" },
+    /** Mobile drawer height (HkDrawer `size`). HkDrawer's bottom-side CSS
+     *  clamps panels at maxHeight 70vh, so the default equals the cap;
+     *  pass `panelClass` with a custom max-height for taller sheets. */
+    mobileSize: { type: String, default: "70vh" },
+    footerActions: {
+      type: Array as PropType<ModalAction[]>,
+      default: undefined,
+    },
+    /** Extra classes for the mobile drawer panel — same escape hatch as
+     *  HkDrawer.panelClass (attrs fallthrough cannot reach a teleported
+     *  panel). Desktop has no equivalent hook on HkModal. */
+    panelClass: { type: String, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_value: boolean) => true,
+    afterLeave: () => true,
+  },
+  setup(props, { emit, slots }) {
+    const { isMobile } = useBreakpoint();
+
+    function onUpdate(v: boolean) {
+      emit("update:modelValue", v);
+    }
+
+    function onAfterLeave() {
+      emit("afterLeave");
+    }
+
+    /** Drawer footer: the footer slot wins over footerActions (same
+     *  precedence HkModal applies); with no slot, the actions render as
+     *  the same HButton row the modal would show. Returns undefined when
+     *  there is nothing to render so the drawer skips its footer band. */
+    function renderDrawerFooter() {
+      if (slots.footer) return slots.footer();
+      if (props.footerActions && props.footerActions.length > 0) {
+        return (
+          <div class="hk-adaptive-dialog-footer">
+            {props.footerActions.map((action, i) => (
+              <HButton
+                key={i}
+                variant={action.variant ?? "secondary"}
+                size="sm"
+                loading={action.loading}
+                disabled={action.disabled}
+                onClick={action.onClick}
+              >
+                {action.label}
+              </HButton>
+            ))}
+          </div>
+        );
+      }
+      return undefined;
+    }
+
+    /** True when the drawer should render a footer band at all. */
+    function hasDrawerFooter() {
+      return Boolean(slots.footer) || Boolean(props.footerActions && props.footerActions.length > 0);
+    }
+
+    /** HkDrawer's header slot replaces the title span, so on mobile the
+     *  shell composes title + slot content itself — keeping the title in
+     *  the title bar with the slot under it, like the modal sub-header. */
+    function renderDrawerHeader() {
+      if (!slots.header) return undefined;
+      return () => (
+        <div class="hk-adaptive-dialog-drawer-header">
+          {props.title ? (
+            <span class="hk-drawer-title">{props.title}</span>
+          ) : null}
+          {slots.header!()}
+        </div>
+      );
+    }
+
+    return () => {
+      if (isMobile.value) {
+        return (
+          <HDrawer
+            modelValue={props.modelValue}
+            onUpdate:modelValue={onUpdate}
+            onAfterLeave={onAfterLeave}
+            side="bottom"
+            size={props.mobileSize}
+            title={props.title}
+            closable={props.closable}
+            panelClass={props.panelClass}
+          >
+            {{
+              default: () => slots.default?.(),
+              header: renderDrawerHeader(),
+              footer: hasDrawerFooter() ? () => renderDrawerFooter() : undefined,
+            }}
+          </HDrawer>
+        );
+      }
+
+      return (
+        <HModal
+          modelValue={props.modelValue}
+          onUpdate:modelValue={onUpdate}
+          onAfterLeave={onAfterLeave}
+          title={props.title}
+          closable={props.closable}
+          width={props.width}
+          footerActions={props.footerActions}
+        >
+          {{
+            default: () => slots.default?.(),
+            header: slots.header ? () => slots.header!() : undefined,
+            footer: slots.footer ? () => slots.footer!() : undefined,
+          }}
+        </HModal>
+      );
+    };
+  },
+});

package/src/components/HkAdminHeader.test.tsx

@@ -0,0 +1,185 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h } from "vue";
+
+// HPopover teleports to body — stubbing Teleport stringifies its vnode
+// children. Replace just HPopover with an inline passthrough that renders
+// its default slot while open; the rest of hikari stays real.
+vi.mock("@celestia-island/hikari", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@celestia-island/hikari")>();
+  const { defineComponent, h } = await import("vue");
+  const HPopoverStub = defineComponent({
+    name: "HPopover",
+    props: {
+      modelValue: { type: Boolean, default: false },
+      placement: { type: String, default: "bottom" },
+    },
+    setup(props, { slots }) {
+      return () =>
+        props.modelValue
+          ? h("div", { class: "popover-stub" }, slots.default?.())
+          : null;
+    },
+  });
+  return { ...actual, HPopover: HPopoverStub };
+});
+
+import { HkAdminHeader } from "./HkAdminHeader";
+
+/**
+ * HkAdminHeader contract tests for the generalized avatar/identity
+ * behaviors ported from the chest plana-legacy fork:
+ * - avatarAction "menu" (default) toggles the user dropdown; "drawer"
+ *   emits avatarClick so the shell can open its nav drawer.
+ * - the identity block (name/email/groups) leads the menu; an empty
+ *   identity renders the signing-in placeholder + force-sign-out escape.
+ * - an empty title hides the context-title node entirely (pages carry
+ *   their own in-page title in the HPageHeader convention).
+ *
+ * (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();
+  }
+});
+
+type HeaderProps = Record<string, unknown>;
+
+function headerNode(props: HeaderProps = {}, slots?: Record<string, unknown>) {
+  return h(HkAdminHeader, { username: "alice", ...props } as never, slots as never);
+}
+
+const avatarButton = (c: HTMLElement) =>
+  c.querySelector('button[aria-haspopup]') as HTMLButtonElement | null;
+
+async function click(el: Element | null) {
+  el?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+describe("HkAdminHeader", () => {
+  it("toggles the user dropdown on avatar click in menu mode", async () => {
+    const c = mount(headerNode({ logoutLabel: "Log out" }));
+    const btn = avatarButton(c);
+    expect(btn?.getAttribute("aria-haspopup")).toBe("menu");
+
+    await click(btn);
+    const menu = c.querySelector(".popover-stub");
+    // The dropdown leads with the identity block and ends with logout.
+    expect(menu?.textContent).toContain("alice");
+    expect(c.querySelector(".s-user-header")).toBeTruthy();
+    expect(menu?.textContent).toContain("Log out");
+
+    await click(btn);
+    expect(c.querySelector(".s-user-header")).toBeNull();
+  });
+
+  it("emits avatarClick instead of the dropdown in drawer mode", async () => {
+    const clicks: number[] = [];
+    const c = mount(headerNode({
+      avatarAction: "drawer",
+      logoutLabel: "Log out",
+      onAvatarClick: () => clicks.push(1),
+    }));
+    const btn = avatarButton(c);
+    expect(btn?.getAttribute("aria-haspopup")).toBe("dialog");
+
+    await click(btn);
+    expect(clicks).toHaveLength(1);
+    // The dropdown must NOT open in drawer mode, and the username stays
+    // hidden — the identity block lives in the drawer footer.
+    expect(c.querySelector(".s-user-header")).toBeNull();
+    expect(c.textContent).not.toContain("alice");
+  });
+
+  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({
+      username: "",
+      userEmail: "",
+      signingInLabel: "Signing in…",
+      forceSignOutLabel: "Sign out now",
+      onForceSignOut,
+    }));
+    await click(avatarButton(c));
+
+    expect(c.querySelector(".s-user-header--pending")).toBeTruthy();
+    expect(c.textContent).toContain("Signing in…");
+    // No action items above an absent identity.
+    expect(c.textContent).not.toContain("Avatar");
+
+    await click(c.querySelector(".s-popup-menu-item"));
+    expect(onForceSignOut).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides the context title entirely when it is empty", () => {
+    const withTitle = mount(headerNode({ title: "Dashboard" }));
+    expect(withTitle.querySelector("h2")?.textContent).toBe("Dashboard");
+
+    const withoutTitle = mount(headerNode());
+    expect(withoutTitle.querySelector("h2")).toBeNull();
+  });
+
+  it("renders no emergency-stop control by default", () => {
+    const c = mount(headerNode({ username: "alice" }));
+    expect(c.textContent.toLowerCase()).not.toContain("emergency");
+  });
+
+  it("renders the goToFrontend row above logout and emits goToFrontend", async () => {
+    const onGoToFrontend = vi.fn();
+    const c = mount(headerNode({
+      logoutLabel: "Log out",
+      goToFrontendLabel: "Go to Frontend",
+      onGoToFrontend,
+    }));
+    // Opt-in: absent without the label prop…
+    const bare = mount(headerNode({ logoutLabel: "Log out" }));
+    await click(avatarButton(bare));
+    expect(bare.textContent).not.toContain("Go to Frontend");
+
+    // …and present (directly above logout, mirroring the drawer user
+    // panel's row order) with the label prop.
+    await click(avatarButton(c));
+    const rows = [...c.querySelectorAll(".s-popup-menu-item")];
+    const labels = rows.map((r) => r.textContent?.trim());
+    expect(labels.indexOf("Go to Frontend")).toBeGreaterThan(-1);
+    expect(labels.indexOf("Log out")).toBe(labels.indexOf("Go to Frontend") + 1);
+
+    await click(rows[labels.indexOf("Go to Frontend")]);
+    expect(onGoToFrontend).toHaveBeenCalledTimes(1);
+  });
+
+  it("passes the locale trigger ref OBJECT through the slot so the picker anchors to the button", async () => {
+    let captured: unknown = null;
+    const c = mount(headerNode(
+      { username: "alice" },
+      {
+        "locale-picker": (scope: { triggerRef: unknown }) => {
+          captured = scope.triggerRef;
+          return null;
+        },
+      },
+    ));
+    await click(avatarButton(c));
+    // The slot must receive the ref object itself (reactive), not its
+    // frozen .value snapshot from the first render (null before the
+    // ref attached).
+    expect(captured).toBeTruthy();
+    expect((captured as { value?: unknown }).value).toBeInstanceOf(HTMLElement);
+  });
+});

package/src/components/HkAdminHeader.tsx

@@ -0,0 +1,308 @@
+import { defineComponent, ref, type PropType, type VNode } from "vue";
+import { Camera, ExternalLink, Languages, LogOut, Menu } from "lucide-vue-next";
+import { HBadge, HButton, HPopover, HSpinner } from "@celestia-island/hikari";
+import { useI18n } from "../i18n/context";
+
+export interface LocaleOption {
+  code: string;
+  label: string;
+}
+
+export const HkAdminHeader = defineComponent({
+  name: "HkAdminHeader",
+  props: {
+    /** Optional context title — empty (the default) hides the node
+     *  entirely, for layouts whose pages carry their own in-page title
+     *  (the HPageHeader convention). */
+    title: { type: String, default: "" },
+    showHamburger: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
+    actions: { type: Array as PropType<VNode[]>, default: () => [] },
+    username: { type: String, default: "" },
+    avatarUrl: { type: String, default: "" },
+    userEmail: { type: String, default: "" },
+    userGroups: { type: Array as PropType<{ id: string; name: string }[]>, default: () => [] },
+    /** What the avatar trigger does:
+     *  - "menu"   (default, desktop): toggle the user dropdown popover
+     *    (identity, avatar edit, language, logout).
+     *  - "drawer" (mobile): emit `avatarClick` so the shell opens its nav
+     *    drawer, whose `userPanel` footer carries the same user content.
+     *    The username stays hidden in this mode — the identity block
+     *    lives in the drawer, so a header username would read as a
+     *    duplicated stray control. */
+    avatarAction: { type: String as PropType<"menu" | "drawer">, default: "menu" },
+    /** Placeholder row shown while the identity is still loading (a
+     *  fetchUser race on hard refresh) — the action items stay hidden
+     *  until there is an identity to act on. */
+    signingInLabel: { type: String, default: undefined },
+    /** Pending-state escape hatch: typically wired to logout (clears
+     *  cookies and returns to the login page) when the network wedges
+     *  the session restore and the user wants to break out manually. */
+    onForceSignOut: { type: Function, default: undefined },
+    forceSignOutLabel: { type: String, default: undefined },
+    showEmergencyStop: { type: Boolean, default: false },
+    emergencyStopActive: { type: Boolean, default: false },
+    emergencyStopActiveLabel: { type: String, default: "" },
+    emergencyStopActiveTitle: { type: String, default: "" },
+    emergencyStopLabel: { type: String, default: "" },
+    emergencyStopTitle: { type: String, default: "" },
+    emergencyStopLoading: { type: Boolean, default: false },
+    avatarMenuLabel: { type: String, default: undefined },
+    /** Accessible label for the avatar trigger button. */
+    avatarTriggerLabel: { type: String, default: undefined },
+    localeMenuLabel: { type: String, default: undefined },
+    logoutLabel: { type: String, default: undefined },
+    adminGroupLabel: { type: String, default: undefined },
+    /** "Go to frontend" menu row (external-face link, rendered directly
+     *  above logout). Hidden unless a label is provided — admin-only
+     *  panels without a consumer-facing face simply omit the prop and
+     *  keep the menu at avatar/language/logout. */
+    goToFrontendLabel: { type: String, default: undefined },
+  },
+  emits: {
+    logout: () => true,
+    goToFrontend: () => true,
+    hamburger: () => true,
+    avatarClick: () => true,
+    emergencyStop: () => true,
+  },
+  setup(props, { emit, slots }) {
+    const { t } = useI18n();
+    const userMenuOpen = ref(false);
+    const userTriggerRef = ref<HTMLElement>();
+    const avatarModalOpen = ref(false);
+    const avatarFailed = ref(false);
+    const localeMenuOpen = ref(false);
+    const localeTriggerRef = ref<HTMLElement | null>(null);
+
+    function onAvatarClick(e: MouseEvent) {
+      e.stopPropagation();
+      if (props.avatarAction === "drawer") {
+        emit("avatarClick");
+        return;
+      }
+      userMenuOpen.value = !userMenuOpen.value;
+    }
+
+    return () => (
+      <header
+        class={[
+          "s-glass-header",
+          props.compact ? "px-4 gap-2" : "px-6 gap-3",
+        ]}
+      >
+        {props.showHamburger && (
+          <HButton
+            variant="ghost"
+            size="sm"
+            onClick={() => emit("hamburger")}
+          >
+            <Menu size={20} class="w-5 h-5" />
+          </HButton>
+        )}
+
+        <div ref={userTriggerRef} class="flex items-center gap-2 min-w-0">
+          <button
+            class={[
+              "w-7 h-7 rounded-full overflow-hidden shrink-0 cursor-pointer transition-opacity relative group p-0 border-0",
+              props.avatarUrl
+                ? ""
+                : "bg-primary/10 border-2 border-primary/15 hover:border-primary/30",
+            ]}
+            aria-label={props.avatarTriggerLabel ?? t("hikari::adminHeader.avatarTrigger", "Account menu")}
+            aria-haspopup={props.avatarAction === "drawer" ? "dialog" : "menu"}
+            aria-expanded={props.avatarAction === "menu" ? userMenuOpen.value : undefined}
+            onClick={onAvatarClick}
+          >
+            {props.avatarUrl && !avatarFailed.value ? (
+              <img
+                src={props.avatarUrl}
+                alt={props.username}
+                class="w-full h-full object-cover"
+                onError={() => { avatarFailed.value = true; }}
+              />
+            ) : (
+              <span class="text-xs font-bold text-primary/70">
+                {props.username?.charAt(0).toUpperCase() || "?"}
+              </span>
+            )}
+            {props.avatarAction === "menu" && (
+              <div class="absolute inset-0 rounded-full bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                <Camera size={10} class="text-white" />
+              </div>
+            )}
+          </button>
+          {props.avatarAction === "menu" && (
+            <span class="text-sm font-semibold text-text truncate max-w-[8rem]">
+              {props.username}
+            </span>
+          )}
+        </div>
+
+        <HPopover
+          modelValue={userMenuOpen.value}
+          onUpdate:modelValue={(v: boolean) => {
+            userMenuOpen.value = v;
+            // Closing the outer menu must also close the locale submenu,
+            // or it stays orphaned for the next open.
+            if (!v) localeMenuOpen.value = false;
+          }}
+          placement="bottom-start"
+          anchorRef={userTriggerRef.value ?? null}
+          class="w-56"
+          sheetOnMobile
+          title={t("hikari::adminHeader.avatarTrigger")}
+        >
+          {/* Empty identity (fetchUser race on a hard refresh): render a
+              single subtle placeholder row instead of the action items —
+              "Change Avatar"/"Logout" floating above no identity read as a
+              broken menu. The force-sign-out escape hatch lets the user
+              break out of a wedged session restore. */}
+          {!props.username && !props.userEmail ? (
+            <div>
+              <div class="s-user-header s-user-header--pending">
+                <HSpinner size="sm" />
+                <div class="s-user-header-email">{props.signingInLabel ?? t("hikari::adminHeader.signingIn", "Signing in…")}</div>
+              </div>
+              <button
+                class="s-popup-menu-item"
+                onClick={() => props.onForceSignOut?.()}
+              >
+                <LogOut size={14} />
+                {props.forceSignOutLabel ?? t("hikari::adminHeader.forceSignOut", "Sign out")}
+              </button>
+            </div>
+          ) : (
+            <div>
+              {/* Identity header FIRST — nickname, login email, permission
+                  badges — so every account surface reads identically. */}
+              <div class="s-user-header">
+                {props.username && <div class="s-user-header-name">{props.username}</div>}
+                {props.userEmail && <div class="s-user-header-email">{props.userEmail}</div>}
+                {props.userGroups && props.userGroups.length > 0 && (
+                  <div class="s-user-header-groups">
+                    {props.userGroups.map((g: { id: string; name: string }) => (
+                      <HBadge
+                        key={g.id}
+                        variant={g.name === "Administrators" ? "error" : "primary"}
+                        size="sm"
+                      >
+                        {g.name === "Administrators"
+                          ? (props.adminGroupLabel ?? t("hikari::adminHeader.adminGroup", "Administrators"))
+                          : g.name}
+                      </HBadge>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <button
+                class="s-popup-menu-item"
+                onClick={() => {
+                  userMenuOpen.value = false;
+                  avatarModalOpen.value = true;
+                }}
+              >
+                <Camera size={14} />
+                {props.avatarMenuLabel ?? t("hikari::adminHeader.avatar", "Avatar")}
+              </button>
+              {/* The language trigger owns the locale anchor: the ref sits
+                  on the BUTTON itself (not a wrapper div) so the picker
+                  popup anchors to it instead of falling back to inline
+                  rendering. The ref OBJECT is passed through the slot —
+                  reading .value here would freeze null from the first
+                  render before the ref attached. */}
+              <button
+                ref={localeTriggerRef}
+                class="s-popup-menu-item"
+                onClick={() => (localeMenuOpen.value = !localeMenuOpen.value)}
+              >
+                <Languages size={14} />
+                {props.localeMenuLabel ?? t("hikari::adminHeader.language", "Language")}
+              </button>
+              {slots["locale-picker"]?.({
+                open: localeMenuOpen.value,
+                onUpdateOpen: (v: boolean) => {
+                  localeMenuOpen.value = v;
+                  if (!v) userMenuOpen.value = false;
+                },
+                triggerRef: localeTriggerRef,
+              })}
+              {slots["user-menu-extra"]?.()}
+              {/* Frontend link — mirrors the drawer user panel's
+                  "go to frontend" row (same icon/position: directly
+                  above logout). Opt-in via the label prop so admin-only
+                  panels keep the menu at avatar/language/logout. */}
+              {props.goToFrontendLabel ? (
+                <button
+                  class="s-popup-menu-item"
+                  onClick={() => {
+                    userMenuOpen.value = false;
+                    emit("goToFrontend");
+                  }}
+                >
+                  <ExternalLink size={14} />
+                  {props.goToFrontendLabel}
+                </button>
+              ) : null}
+              <button
+                class="s-popup-menu-item"
+                onClick={() => {
+                  userMenuOpen.value = false;
+                  emit("logout");
+                }}
+              >
+                <LogOut size={14} />
+                {props.logoutLabel ?? t("hikari::adminHeader.logout", "Logout")}
+              </button>
+            </div>
+          )}
+        </HPopover>
+
+        {/* The page title lives INSIDE each page in the HPageHeader
+            convention (big title left, tool buttons right). The bar
+            renders an optional context title only when one is given —
+            empty hides the node, keeping the bar to identity + theme
+            controls. */}
+        {props.title && (
+          <h2 class="text-sm font-semibold text-text truncate min-w-0">
+            {props.title}
+          </h2>
+        )}
+        <div class="ml-auto flex items-center gap-1.5 shrink-0">
+          {props.showEmergencyStop && (
+            <button
+              class={[
+                "px-3 py-1 rounded-md text-xs font-bold border transition-all",
+                props.emergencyStopLoading ? "opacity-50 cursor-wait" : "cursor-pointer",
+                props.emergencyStopActive
+                  ? "bg-red-600 text-white border-red-700 animate-pulse"
+                  : "bg-red-600/10 text-red-500 border-red-500/40 hover:bg-red-600/25",
+              ]}
+              disabled={props.emergencyStopLoading}
+              title={props.emergencyStopActive
+                ? props.emergencyStopActiveTitle
+                : props.emergencyStopTitle}
+              onClick={() => emit("emergencyStop")}
+            >
+              {props.emergencyStopActive
+                ? props.emergencyStopActiveLabel
+                : props.emergencyStopLabel}
+            </button>
+          )}
+          {slots["emergency-stop-extra"]?.()}
+          {(props.actions || []).map((vnode, i) => (
+            <span key={i} class="flex items-center gap-1">
+              {vnode}
+            </span>
+          ))}
+          {slots["theme-toggle"]?.()}
+        </div>
+
+        {slots["avatar-modal"]?.({
+          open: avatarModalOpen.value,
+          onUpdateOpen: (v: boolean) => { avatarModalOpen.value = v; },
+        })}
+      </header>
+    );
+  },
+});