@peers-app/peers-ui 0.19.12 → 0.19.13

package/README.md

@@ -27,15 +27,20 @@ Hooks that bridge `@peers-app/peers-sdk` observables to React 18 with concurrent
 
 ### Layout
 
-- **`TabsLayout`** — Multi-tab application shell used by the Peers desktop and PWA clients
+- **`RootLayoutHost`** — The single component a client mounts. Owns bootstrapping (user gate, context init, route loading), the always-available command palette, and the welcome modal, then renders the selected root layout body. `TabsLayoutApp` is a backwards-compatible alias for it.
+- **Root layout system** — Swappable top-level layouts. `getRootLayouts()` / `getRootLayout(id)` expose the static registry, `selectedRootLayoutId` (per-device pvar) holds the choice, `setRootLayout(id)` changes it, and `<LayoutPicker />` is the Settings UI. The default `tabs` layout is `TabsLayoutInternal`.
+- **`TabsLayoutInternal`** — The tabs UI body (tab strip + active tab content); the default root layout. Pass `fillContainer` to size it to its parent instead of the viewport (used when embedding it in another layout).
+- **Tabs + Console layout** (`tabs-with-console`) — Splits the tab UI and the Operator Console into two real, resizable panels (dockable bottom/left/right) rather than an overlay. Selectable via `<LayoutPicker />`.
+- **Full-screen layout** (`fullscreen`) — Shows one screen at a time with no tab strip; navigation is via the always-mounted command palette (Cmd/Ctrl+K) plus a Home button. While active it enables `setSingleTabMode(true)` so opening an app replaces the current screen instead of accumulating tabs (non-destructive — tabs from other layouts are left untouched).
+- **`OperatorConsolePanel`** — The presentational console chrome (header toolbar + body) that fills its container; the host layout owns sizing, the resize divider, the collapsed strip, and placement. Toggle the console with Ctrl+` while on the Tabs + Console layout.
 - **`SortableList`** — Drag-and-drop list powered by SortableJS
 - **`InverseLazyList`** — Bottom-anchored lazy-loading list for chat-style UIs
 - **`Tabs`** / **`ScreenTabBody`** — Tab strip and content container
 
 ### Communication
 
-- **`ChatOverlay`** — Floating chat panel for AI assistant conversations
 - **`VoiceIndicator`** — Visual indicator for active voice sessions
+- **`VoicePlayback`** — Headless component that plays browser-side voice TTS output
 
 ### Tab Management
 

package/dist/components/voice-playback.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Voice Playback Component
+ *
+ * Headless (renders nothing) component that hosts the browser-side voice TTS
+ * playback handlers. The voice server (peers-electron `tts-service`) emits
+ * `voice:speakText` / `voice:playAudio` / `voice:stopSpeaking` events and relies
+ * on a mounted renderer to actually produce sound and report completion via
+ * `voiceNotifyPlaybackComplete`. Mount this once near the app root so voice
+ * output works regardless of which (if any) voice UI is visible.
+ */
+/**
+ * Subscribes to voice TTS events and plays them in the browser. Renders nothing.
+ */
+export declare const VoicePlayback: React.FC;
+export default VoicePlayback;

package/dist/components/voice-playback.js

@@ -0,0 +1,86 @@
+"use strict";
+/**
+ * Voice Playback Component
+ *
+ * Headless (renders nothing) component that hosts the browser-side voice TTS
+ * playback handlers. The voice server (peers-electron `tts-service`) emits
+ * `voice:speakText` / `voice:playAudio` / `voice:stopSpeaking` events and relies
+ * on a mounted renderer to actually produce sound and report completion via
+ * `voiceNotifyPlaybackComplete`. Mount this once near the app root so voice
+ * output works regardless of which (if any) voice UI is visible.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VoicePlayback = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+/**
+ * Subscribes to voice TTS events and plays them in the browser. Renders nothing.
+ */
+const VoicePlayback = () => {
+    // Track the current cloud-TTS audio element so it can be stopped on demand.
+    const currentAudioRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const speakHandler = (0, peers_sdk_1.subscribe)("voice:speakText", (event) => {
+            const { text, voice, rate } = event.data;
+            if ("speechSynthesis" in window) {
+                const utterance = new SpeechSynthesisUtterance(text);
+                if (voice) {
+                    const voices = speechSynthesis.getVoices();
+                    const selectedVoice = voices.find((v) => v.name === voice);
+                    if (selectedVoice)
+                        utterance.voice = selectedVoice;
+                }
+                if (rate)
+                    utterance.rate = rate;
+                utterance.onend = () => {
+                    peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
+                };
+                utterance.onerror = () => {
+                    peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
+                };
+                speechSynthesis.speak(utterance);
+            }
+            else {
+                peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
+            }
+        });
+        const stopHandler = (0, peers_sdk_1.subscribe)("voice:stopSpeaking", () => {
+            if ("speechSynthesis" in window) {
+                speechSynthesis.cancel();
+            }
+            if (currentAudioRef.current) {
+                currentAudioRef.current.pause();
+                currentAudioRef.current = null;
+            }
+        });
+        const playHandler = (0, peers_sdk_1.subscribe)("voice:playAudio", async (event) => {
+            const { audioBase64, mimeType } = event.data;
+            try {
+                const audioData = Uint8Array.from(atob(audioBase64), (c) => c.charCodeAt(0));
+                const blob = new Blob([audioData], { type: mimeType });
+                const url = URL.createObjectURL(blob);
+                const audio = new Audio(url);
+                currentAudioRef.current = audio;
+                audio.onended = () => {
+                    URL.revokeObjectURL(url);
+                    currentAudioRef.current = null;
+                    peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
+                };
+                await audio.play();
+            }
+            catch (e) {
+                console.error("Failed to play audio:", e);
+                currentAudioRef.current = null;
+                peers_sdk_1.rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => { });
+            }
+        });
+        return () => {
+            speakHandler.unsubscribe();
+            stopHandler.unsubscribe();
+            playHandler.unsubscribe();
+        };
+    }, []);
+    return null;
+};
+exports.VoicePlayback = VoicePlayback;
+exports.default = exports.VoicePlayback;

package/dist/components/voice-subscribe-events.d.ts

@@ -1,11 +1,7 @@
-import type { IMessage } from "@peers-app/peers-sdk";
 /** Shape passed to `subscribe` handlers for voice / chat IPC events */
 export type VoiceSubscribeEvent<T> = {
     data: T;
 };
-export type ChatOpenWithMessagePayload = {
-    message?: IMessage;
-};
 export type VoiceStatePayload = {
     state: string;
 };

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./components/chat-overlay";
 export * from "./components/inverse-lazy-list";
 export type { IEditorEffects, IMarkdownEditorProps } from "./components/markdown-editor/editor";
 export { MarkdownEditor } from "./components/markdown-editor/editor";
@@ -8,7 +7,16 @@ export * from "./components/sortable-list";
 export * from "./components/tabs";
 export { Typeahead, type TypeaheadItem } from "./components/typeahead";
 export * from "./components/voice-indicator";
-export { mainContentPath } from "./globals";
+export * from "./components/voice-playback";
+export { isDesktop, mainContentPath } from "./globals";
 export * from "./hooks";
+export * from "./operator-console/operator-console";
+export * from "./operator-console/operator-console-state";
+export { type GlobalOverlay, globalOverlays, registerGlobalOverlay, unregisterGlobalOverlay, } from "./root-layout/global-overlays";
+export { LayoutPicker } from "./root-layout/layout-picker";
+export type { RootLayout } from "./root-layout/root-layout";
+export { RootLayoutHost, RootLayoutHost as TabsLayoutApp, } from "./root-layout/root-layout-host";
+export { DEFAULT_ROOT_LAYOUT_ID, getRootLayout, getRootLayouts, } from "./root-layout/root-layout-registry";
+export { selectedRootLayoutId, setRootLayout } from "./root-layout/root-layout-state";
 export * from "./tabs-layout/tabs-layout";
 export { activeTabId, activeTabs, closeCurrentTab, goToTabPath, TabState, updateActiveTabTitle, } from "./tabs-layout/tabs-state";

package/dist/index.js

@@ -14,8 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateActiveTabTitle = exports.goToTabPath = exports.closeCurrentTab = exports.activeTabs = exports.activeTabId = exports.mainContentPath = exports.Typeahead = exports.MarkdownEditor = void 0;
-__exportStar(require("./components/chat-overlay"), exports);
+exports.updateActiveTabTitle = exports.goToTabPath = exports.closeCurrentTab = exports.activeTabs = exports.activeTabId = exports.setRootLayout = exports.selectedRootLayoutId = exports.getRootLayouts = exports.getRootLayout = exports.DEFAULT_ROOT_LAYOUT_ID = exports.TabsLayoutApp = exports.RootLayoutHost = exports.LayoutPicker = exports.unregisterGlobalOverlay = exports.registerGlobalOverlay = exports.globalOverlays = exports.mainContentPath = exports.isDesktop = exports.Typeahead = exports.MarkdownEditor = void 0;
 __exportStar(require("./components/inverse-lazy-list"), exports);
 var editor_1 = require("./components/markdown-editor/editor");
 Object.defineProperty(exports, "MarkdownEditor", { enumerable: true, get: function () { return editor_1.MarkdownEditor; } });
@@ -26,9 +25,31 @@ __exportStar(require("./components/tabs"), exports);
 var typeahead_1 = require("./components/typeahead");
 Object.defineProperty(exports, "Typeahead", { enumerable: true, get: function () { return typeahead_1.Typeahead; } });
 __exportStar(require("./components/voice-indicator"), exports);
+__exportStar(require("./components/voice-playback"), exports);
 var globals_1 = require("./globals");
+Object.defineProperty(exports, "isDesktop", { enumerable: true, get: function () { return globals_1.isDesktop; } });
 Object.defineProperty(exports, "mainContentPath", { enumerable: true, get: function () { return globals_1.mainContentPath; } });
 __exportStar(require("./hooks"), exports);
+__exportStar(require("./operator-console/operator-console"), exports);
+__exportStar(require("./operator-console/operator-console-state"), exports);
+var global_overlays_1 = require("./root-layout/global-overlays");
+Object.defineProperty(exports, "globalOverlays", { enumerable: true, get: function () { return global_overlays_1.globalOverlays; } });
+Object.defineProperty(exports, "registerGlobalOverlay", { enumerable: true, get: function () { return global_overlays_1.registerGlobalOverlay; } });
+Object.defineProperty(exports, "unregisterGlobalOverlay", { enumerable: true, get: function () { return global_overlays_1.unregisterGlobalOverlay; } });
+var layout_picker_1 = require("./root-layout/layout-picker");
+Object.defineProperty(exports, "LayoutPicker", { enumerable: true, get: function () { return layout_picker_1.LayoutPicker; } });
+var root_layout_host_1 = require("./root-layout/root-layout-host");
+Object.defineProperty(exports, "RootLayoutHost", { enumerable: true, get: function () { return root_layout_host_1.RootLayoutHost; } });
+// Compat alias: the desktop/PWA/RN clients historically mounted `TabsLayoutApp`.
+// The host now owns bootstrapping; the tabs UI is just the default layout body.
+Object.defineProperty(exports, "TabsLayoutApp", { enumerable: true, get: function () { return root_layout_host_1.RootLayoutHost; } });
+var root_layout_registry_1 = require("./root-layout/root-layout-registry");
+Object.defineProperty(exports, "DEFAULT_ROOT_LAYOUT_ID", { enumerable: true, get: function () { return root_layout_registry_1.DEFAULT_ROOT_LAYOUT_ID; } });
+Object.defineProperty(exports, "getRootLayout", { enumerable: true, get: function () { return root_layout_registry_1.getRootLayout; } });
+Object.defineProperty(exports, "getRootLayouts", { enumerable: true, get: function () { return root_layout_registry_1.getRootLayouts; } });
+var root_layout_state_1 = require("./root-layout/root-layout-state");
+Object.defineProperty(exports, "selectedRootLayoutId", { enumerable: true, get: function () { return root_layout_state_1.selectedRootLayoutId; } });
+Object.defineProperty(exports, "setRootLayout", { enumerable: true, get: function () { return root_layout_state_1.setRootLayout; } });
 __exportStar(require("./tabs-layout/tabs-layout"), exports);
 var tabs_state_1 = require("./tabs-layout/tabs-state");
 Object.defineProperty(exports, "activeTabId", { enumerable: true, get: function () { return tabs_state_1.activeTabId; } });

package/dist/operator-console/operator-console-state.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Operator Console — panel state
+ *
+ * Persistent, per-device state for the Operator Console shell plus the control
+ * helpers and the global keyboard shortcut that toggles it. The panel itself
+ * ({@link OperatorConsolePanel}) reads this state reactively via `useObservable`.
+ */
+/** Edge the console panel is docked to. */
+export type ConsoleDock = "bottom" | "left" | "right";
+/** Persisted layout/visibility state for the Operator Console panel. */
+export interface ConsolePanelState {
+    /** Whether the panel is expanded (open) or collapsed to its edge strip. */
+    expanded: boolean;
+    /** Which screen edge the panel is docked to. */
+    dock: ConsoleDock;
+    /** Panel height in pixels when docked to the bottom. */
+    bottomHeight: number;
+    /** Panel width in pixels when docked to the left or right. */
+    sideWidth: number;
+    /** Whether the panel is maximized to fill the layout body (hiding the tabs panel). */
+    maximized: boolean;
+}
+/** Default panel state: collapsed, docked to the bottom. */
+export declare const DEFAULT_CONSOLE_PANEL_STATE: ConsolePanelState;
+/**
+ * Per-device persisted state for the Operator Console panel. Layout/visibility
+ * is a per-device preference, so this uses `deviceVar` (not synced across devices).
+ */
+export declare const operatorConsolePanel: import("@peers-app/peers-sdk").PersistentVar<ConsolePanelState>;
+/** Toggle the console between expanded and collapsed. */
+export declare function toggleConsole(): void;
+/** Expand (open) the console. */
+export declare function openConsole(): void;
+/** Collapse (close) the console. */
+export declare function closeConsole(): void;
+/** Dock the console to the given edge. */
+export declare function setConsoleDock(dock: ConsoleDock): void;
+/** Set whether the console is maximized (fills the layout body, hiding the tabs panel). */
+export declare function setConsoleMaximized(maximized: boolean): void;
+/**
+ * Persist a new panel size. Use `bottomHeight` when docked to the bottom and
+ * `sideWidth` when docked to a side.
+ */
+export declare function setConsoleSize(size: {
+    bottomHeight?: number;
+    sideWidth?: number;
+}): void;
+/** Install the global Ctrl+` listener and register the palette command (idempotent). */
+export declare function initializeOperatorConsole(): void;

package/dist/operator-console/operator-console-state.js

@@ -0,0 +1,97 @@
+"use strict";
+/**
+ * Operator Console — panel state
+ *
+ * Persistent, per-device state for the Operator Console shell plus the control
+ * helpers and the global keyboard shortcut that toggles it. The panel itself
+ * ({@link OperatorConsolePanel}) reads this state reactively via `useObservable`.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.operatorConsolePanel = exports.DEFAULT_CONSOLE_PANEL_STATE = void 0;
+exports.toggleConsole = toggleConsole;
+exports.openConsole = openConsole;
+exports.closeConsole = closeConsole;
+exports.setConsoleDock = setConsoleDock;
+exports.setConsoleMaximized = setConsoleMaximized;
+exports.setConsoleSize = setConsoleSize;
+exports.initializeOperatorConsole = initializeOperatorConsole;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const command_palette_1 = require("../command-palette/command-palette");
+/** Default panel state: collapsed, docked to the bottom. */
+exports.DEFAULT_CONSOLE_PANEL_STATE = {
+    expanded: false,
+    dock: "bottom",
+    bottomHeight: 300,
+    sideWidth: 420,
+    maximized: false,
+};
+/**
+ * Per-device persisted state for the Operator Console panel. Layout/visibility
+ * is a per-device preference, so this uses `deviceVar` (not synced across devices).
+ */
+exports.operatorConsolePanel = (0, peers_sdk_1.deviceVar)("operatorConsole:panel", {
+    defaultValue: exports.DEFAULT_CONSOLE_PANEL_STATE,
+});
+function update(patch) {
+    const current = (0, exports.operatorConsolePanel)() ?? exports.DEFAULT_CONSOLE_PANEL_STATE;
+    (0, exports.operatorConsolePanel)({ ...current, ...patch });
+}
+/** Toggle the console between expanded and collapsed. */
+function toggleConsole() {
+    const current = (0, exports.operatorConsolePanel)() ?? exports.DEFAULT_CONSOLE_PANEL_STATE;
+    update({ expanded: !current.expanded });
+}
+/** Expand (open) the console. */
+function openConsole() {
+    update({ expanded: true });
+}
+/** Collapse (close) the console. */
+function closeConsole() {
+    update({ expanded: false });
+}
+/** Dock the console to the given edge. */
+function setConsoleDock(dock) {
+    update({ dock });
+}
+/** Set whether the console is maximized (fills the layout body, hiding the tabs panel). */
+function setConsoleMaximized(maximized) {
+    update({ maximized });
+}
+/**
+ * Persist a new panel size. Use `bottomHeight` when docked to the bottom and
+ * `sideWidth` when docked to a side.
+ */
+function setConsoleSize(size) {
+    update(size);
+}
+/**
+ * Global keyboard handler for the console toggle shortcut. Ctrl+` on all
+ * platforms (matching VS Code / Cursor). Intentionally not Cmd on macOS.
+ */
+function handleKeyDown(event) {
+    if (event.ctrlKey && !event.metaKey && !event.altKey && event.code === "Backquote") {
+        event.preventDefault();
+        toggleConsole();
+    }
+}
+let initialized = false;
+/** Install the global Ctrl+` listener and register the palette command (idempotent). */
+function initializeOperatorConsole() {
+    if (initialized || typeof window === "undefined")
+        return;
+    initialized = true;
+    document.addEventListener("keydown", handleKeyDown);
+    (0, command_palette_1.registerCommand)({
+        id: "toggle-operator-console",
+        label: "Toggle Console",
+        description: "Show or hide the Operator Console panel",
+        shortcut: "Ctrl+`",
+        iconClassName: "bi-terminal",
+        category: "View",
+        action: () => {
+            (0, command_palette_1.closeCommandPalette)();
+            toggleConsole();
+        },
+    });
+}
+initializeOperatorConsole();

package/dist/operator-console/operator-console.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Operator Console — presentational panel
+ *
+ * The console's visual chrome only: a header toolbar (dock buttons, maximize/restore,
+ * collapse) plus the body region. It fills its container (`height/width: 100%`) and has
+ * no positioning of its own — the host layout (e.g. the `tabs-with-console` root layout)
+ * owns the split sizing, the resize handle, the collapsed edge strip, and where the panel
+ * is placed. Command input, output blocks, and the engine arrive later.
+ */
+import type React from "react";
+/** Resolved color palette for the console chrome. */
+export interface ConsoleTheme {
+    bg: string;
+    headerBg: string;
+    border: string;
+    text: string;
+    muted: string;
+    hover: string;
+    accent: string;
+}
+/**
+ * Resolve the console color palette for the active color mode. Shared by the panel and by
+ * the host layout (so its collapsed strip and resize divider match the panel chrome).
+ */
+export declare function getConsoleTheme(isDark: boolean): ConsoleTheme;
+/**
+ * The Operator Console panel chrome. Renders as an in-flow flex column that fills its
+ * container; the parent layout decides the panel's size and placement. Reads dock and
+ * maximized state from `operatorConsolePanel` to drive the header toolbar.
+ */
+export declare const OperatorConsolePanel: React.FC;
+export default OperatorConsolePanel;

package/dist/operator-console/operator-console.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperatorConsolePanel = void 0;
+exports.getConsoleTheme = getConsoleTheme;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../hooks");
+const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
+const operator_console_state_1 = require("./operator-console-state");
+/**
+ * Resolve the console color palette for the active color mode. Shared by the panel and by
+ * the host layout (so its collapsed strip and resize divider match the panel chrome).
+ */
+function getConsoleTheme(isDark) {
+    return {
+        bg: isDark ? "#1e1e1e" : "#ffffff",
+        headerBg: isDark ? "#252526" : "#f3f3f3",
+        border: isDark ? "#3c3c3c" : "#dee2e6",
+        text: isDark ? "#cccccc" : "#1e1e1e",
+        muted: isDark ? "#8c8c8c" : "#6c757d",
+        hover: isDark ? "#2a2d2e" : "#e8e8e8",
+        accent: "#0d6efd",
+    };
+}
+/**
+ * The Operator Console panel chrome. Renders as an in-flow flex column that fills its
+ * container; the parent layout decides the panel's size and placement. Reads dock and
+ * maximized state from `operatorConsolePanel` to drive the header toolbar.
+ */
+const OperatorConsolePanel = () => {
+    const [state] = (0, hooks_1.useObservable)(operator_console_state_1.operatorConsolePanel);
+    const [mode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    const { dock, maximized } = state;
+    const theme = getConsoleTheme(mode === "dark");
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            width: "100%",
+            height: "100%",
+            backgroundColor: theme.bg,
+            color: theme.text,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    height: "34px",
+                    flex: "0 0 auto",
+                    padding: "0 8px",
+                    backgroundColor: theme.headerBg,
+                    borderBottom: `1px solid ${theme.border}`,
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "12px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-terminal" }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 500 }, children: "Console" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "2px" }, children: [(0, jsx_runtime_1.jsx)(DockButton, { dock: "left", active: dock === "left", disabled: maximized, theme: theme, icon: "bi-arrow-bar-left", label: "Dock left" }), (0, jsx_runtime_1.jsx)(DockButton, { dock: "bottom", active: dock === "bottom", disabled: maximized, theme: theme, icon: "bi-arrow-bar-down", label: "Dock bottom" }), (0, jsx_runtime_1.jsx)(DockButton, { dock: "right", active: dock === "right", disabled: maximized, theme: theme, icon: "bi-arrow-bar-right", label: "Dock right" }), (0, jsx_runtime_1.jsx)("span", { style: { width: "1px", height: "18px", backgroundColor: theme.border, margin: "0 4px" } }), (0, jsx_runtime_1.jsx)(ToolbarButton, { theme: theme, icon: maximized ? "bi-fullscreen-exit" : "bi-arrows-fullscreen", label: maximized ? "Restore" : "Maximize", onClick: () => (0, operator_console_state_1.setConsoleMaximized)(!maximized) }), (0, jsx_runtime_1.jsx)(ToolbarButton, { theme: theme, icon: "bi-chevron-down", label: "Collapse (Ctrl+`)", onClick: operator_console_state_1.toggleConsole })] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    flex: "1 1 auto",
+                    overflow: "auto",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: theme.muted,
+                    fontSize: "13px",
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { textAlign: "center" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-terminal", style: { fontSize: "24px", display: "block", marginBottom: "6px" } }), "Operator Console"] }) })] }));
+};
+exports.OperatorConsolePanel = OperatorConsolePanel;
+/** A small, icon-only button used in the console header toolbar. */
+function ToolbarButton({ theme, icon, label, onClick, active, disabled }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", title: label, "aria-label": label, disabled: disabled, onClick: onClick, style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "28px",
+            height: "26px",
+            border: "none",
+            borderRadius: "4px",
+            background: active ? theme.hover : "transparent",
+            color: active ? theme.text : theme.muted,
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? 0.4 : 1,
+            fontSize: "14px",
+        }, onMouseEnter: (e) => {
+            if (!disabled)
+                e.currentTarget.style.backgroundColor = theme.hover;
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = active ? theme.hover : "transparent";
+        }, children: (0, jsx_runtime_1.jsx)("i", { className: icon }) }));
+}
+/** Header button that docks the console to a given edge. */
+function DockButton({ dock, active, disabled, theme, icon, label }) {
+    return ((0, jsx_runtime_1.jsx)(ToolbarButton, { theme: theme, icon: icon, label: label, active: active, disabled: disabled, onClick: () => (0, operator_console_state_1.setConsoleDock)(dock) }));
+}
+exports.default = exports.OperatorConsolePanel;

package/dist/root-layout/global-overlays.d.ts

@@ -0,0 +1,37 @@
+import type React from "react";
+/**
+ * A globally-mounted overlay component contributed by a package (or peers-ui itself).
+ *
+ * Overlays are rendered by {@link RootLayoutHost} above every root layout (alongside the
+ * command palette), so they remain visible regardless of which tab/app is active. Each
+ * overlay is responsible for deciding its own visibility (e.g. returning `null` when it
+ * should be hidden); the registry only controls whether the component is mounted.
+ */
+export interface GlobalOverlay {
+    /** Stable id. Re-registering with the same id replaces the prior entry. */
+    id: string;
+    /** The component rendered by the host. It owns its own visibility and positioning. */
+    Component: React.ComponentType;
+}
+/**
+ * Reactive registry of global overlays rendered by {@link RootLayoutHost}.
+ *
+ * This mirrors the command-palette registry pattern: a package's UI bundle calls
+ * {@link registerGlobalOverlay} when it loads, and the host re-renders because this is an
+ * observable. Because peers-core (and other packages) externalize `@peers-app/peers-ui`
+ * to the shared `window.PeersUI` singleton, they register into this exact instance.
+ */
+export declare const globalOverlays: import("@peers-app/peers-sdk").Observable<GlobalOverlay[]>;
+/**
+ * Register a global overlay component, replacing any existing overlay with the same id.
+ *
+ * @param id Stable identifier for the overlay (used for replacement/removal).
+ * @param Component The React component to mount globally.
+ */
+export declare function registerGlobalOverlay(id: string, Component: React.ComponentType): void;
+/**
+ * Remove a previously-registered global overlay by id. No-op if the id is not registered.
+ *
+ * @param id The id passed to {@link registerGlobalOverlay}.
+ */
+export declare function unregisterGlobalOverlay(id: string): void;

package/dist/root-layout/global-overlays.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalOverlays = void 0;
+exports.registerGlobalOverlay = registerGlobalOverlay;
+exports.unregisterGlobalOverlay = unregisterGlobalOverlay;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+/**
+ * Reactive registry of global overlays rendered by {@link RootLayoutHost}.
+ *
+ * This mirrors the command-palette registry pattern: a package's UI bundle calls
+ * {@link registerGlobalOverlay} when it loads, and the host re-renders because this is an
+ * observable. Because peers-core (and other packages) externalize `@peers-app/peers-ui`
+ * to the shared `window.PeersUI` singleton, they register into this exact instance.
+ */
+exports.globalOverlays = (0, peers_sdk_1.observable)([]);
+/**
+ * Register a global overlay component, replacing any existing overlay with the same id.
+ *
+ * @param id Stable identifier for the overlay (used for replacement/removal).
+ * @param Component The React component to mount globally.
+ */
+function registerGlobalOverlay(id, Component) {
+    const next = (0, exports.globalOverlays)().filter((o) => o.id !== id);
+    next.push({ id, Component });
+    (0, exports.globalOverlays)(next);
+}
+/**
+ * Remove a previously-registered global overlay by id. No-op if the id is not registered.
+ *
+ * @param id The id passed to {@link registerGlobalOverlay}.
+ */
+function unregisterGlobalOverlay(id) {
+    const current = (0, exports.globalOverlays)();
+    const next = current.filter((o) => o.id !== id);
+    if (next.length !== current.length)
+        (0, exports.globalOverlays)(next);
+}

package/dist/root-layout/layout-picker.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Layout picker — Settings entry point for choosing the root layout.
+ *
+ * Lists every registered {@link RootLayout} and writes the selection to
+ * `selectedRootLayoutId` (per-device). `RootLayoutHost` subscribes to that pvar, so the
+ * layout swaps live on select. Mirrors the `ColorModeDropdown` pattern.
+ */
+/** Dropdown that selects the active root layout. */
+export declare const LayoutPicker: () => import("react/jsx-runtime").JSX.Element;

package/dist/root-layout/layout-picker.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutPicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Layout picker — Settings entry point for choosing the root layout.
+ *
+ * Lists every registered {@link RootLayout} and writes the selection to
+ * `selectedRootLayoutId` (per-device). `RootLayoutHost` subscribes to that pvar, so the
+ * layout swaps live on select. Mirrors the `ColorModeDropdown` pattern.
+ */
+const hooks_1 = require("../hooks");
+const root_layout_registry_1 = require("./root-layout-registry");
+const root_layout_state_1 = require("./root-layout-state");
+/** Dropdown that selects the active root layout. */
+const LayoutPicker = () => {
+    const [selectedId] = (0, hooks_1.useObservable)(root_layout_state_1.selectedRootLayoutId);
+    const layouts = (0, root_layout_registry_1.getRootLayouts)();
+    const active = layouts.find((layout) => layout.id === selectedId);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-secondary dropdown-toggle", type: "button", id: "layoutPickerDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false", children: ["Layout: ", active?.name ?? selectedId] }), (0, jsx_runtime_1.jsx)("ul", { className: "dropdown-menu", "aria-labelledby": "layoutPickerDropdown", children: layouts.map((layout) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "dropdown-item", onClick: () => (0, root_layout_state_1.setRootLayout)(layout.id), children: [(0, jsx_runtime_1.jsx)("i", { className: `${layout.iconClassName} me-2` }), layout.name, " ", layout.id === selectedId && "✓", (0, jsx_runtime_1.jsx)("div", { className: "small text-muted ms-4", children: layout.description })] }) }, layout.id))) })] }));
+};
+exports.LayoutPicker = LayoutPicker;

package/dist/root-layout/layouts/full-screen-layout.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Full-screen root layout — one screen at a time, no tab strip.
+ *
+ * Renders only the active tab's content under a minimal header. All navigation flows
+ * through the command palette (Cmd/Ctrl+K), which {@link RootLayoutHost} always mounts,
+ * plus a Home button back to the app launcher. While mounted, this layout enables
+ * single-tab mode (see `setSingleTabMode`) so opening an app replaces the current screen
+ * instead of accumulating tabs. This is non-destructive: any tabs opened under a multi-tab
+ * layout are left untouched and reappear if the user switches back.
+ */
+/** The full-screen layout body: minimal header + the single active screen. */
+export declare function FullScreenLayout(): import("react/jsx-runtime").JSX.Element;