@peers-app/peers-ui 0.19.12 → 0.19.13

package/dist/root-layout/layouts/full-screen-layout.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullScreenLayout = FullScreenLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+const react_1 = require("react");
+const command_palette_1 = require("../../command-palette/command-palette");
+const group_switcher_1 = require("../../components/group-switcher");
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const color_mode_dropdown_1 = require("../../screens/settings/color-mode-dropdown");
+const tabs_layout_1 = require("../../tabs-layout/tabs-layout");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const isMac = typeof navigator !== "undefined" ? /Mac|iPod|iPhone|iPad/.test(navigator.userAgent) : false;
+const paletteHint = isMac ? "⌘K" : "Ctrl+K";
+/** The full-screen layout body: minimal header + the single active screen. */
+function FullScreenLayout() {
+    const [mode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    const [tabs] = (0, hooks_1.useObservable)(tabs_state_1.activeTabs);
+    const [activeId] = (0, hooks_1.useObservable)(tabs_state_1.activeTabId);
+    (0, hooks_1.useObservable)(globals_1.isDesktop);
+    const isMobile = !(0, globals_1.isDesktop)();
+    // Single-tab navigation while this layout is active; restore on unmount/layout swap.
+    (0, react_1.useEffect)(() => {
+        (0, tabs_state_1.setSingleTabMode)(true);
+        return () => (0, tabs_state_1.setSingleTabMode)(false);
+    }, []);
+    const activeTab = tabs.find((t) => t.tabId === activeId) ?? tabs_state_1.launcherApp;
+    const isLauncher = activeTab.packageId === "launcher" || activeTab.tabId === "launcher";
+    const isLight = mode === "light";
+    const title = isLauncher ? "Apps" : activeTab.title;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-column", style: { height: "calc(100vh - 25px)", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: `border-bottom d-flex align-items-center px-1 ${isLight ? "bg-light" : "bg-dark"}`, style: { height: "36px", borderBottomColor: isLight ? "#dee2e6" : "#495057" }, children: [(0, jsx_runtime_1.jsx)(group_switcher_1.GroupSwitcher, { colorMode: mode, isMobile: isMobile }), (0, jsx_runtime_1.jsx)(HeaderButton, { isLight: isLight, active: isLauncher, icon: "bi-grid-3x3-gap", label: "Apps", onClick: () => (0, tabs_state_1.activeTabId)("launcher") }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center flex-grow-1 overflow-hidden px-2", children: [!isLauncher && activeTab.iconClassName && ((0, jsx_runtime_1.jsx)("i", { className: `${activeTab.iconClassName} me-2` })), (0, jsx_runtime_1.jsx)("span", { className: "text-truncate fw-medium", style: { fontSize: "13px" }, children: title })] }), (0, jsx_runtime_1.jsx)(HeaderButton, { isLight: isLight, icon: "bi-search", label: `Search and navigate (${paletteHint})`, onClick: command_palette_1.openCommandPalette, children: (0, jsx_runtime_1.jsx)("span", { className: "d-none d-md-inline ms-1", style: { fontSize: "11px" }, children: paletteHint }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1 overflow-hidden", children: (0, jsx_runtime_1.jsx)(tabs_layout_1.TabErrorBoundary, { tabTitle: activeTab.title, tabId: activeTab.tabId, children: (0, jsx_runtime_1.jsx)(tabs_layout_1.TabContent, { tab: activeTab, isMobile: isMobile, isActive: true }) }, activeTab.tabId) })] }));
+}
+/** A small, transparent header button matching the tabs layout's toolbar styling. */
+function HeaderButton({ isLight, icon, label, onClick, active, children }) {
+    const baseColor = active ? (isLight ? "#0d6efd" : "#ffffff") : isLight ? "#6c757d" : "#adb5bd";
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-sm d-flex align-items-center", onClick: onClick, title: label, "aria-label": label, style: {
+            padding: "4px 8px",
+            fontSize: "12px",
+            borderRadius: "6px",
+            border: "none",
+            background: "transparent",
+            color: baseColor,
+        }, onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = isLight ? "#f8f9fa" : "#495057";
+            e.currentTarget.style.color = isLight ? "#0d6efd" : "#ffffff";
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+            e.currentTarget.style.color = baseColor;
+        }, children: [(0, jsx_runtime_1.jsx)("i", { className: icon, style: { fontSize: "14px" } }), children] }));
+}

package/dist/root-layout/layouts/tabs-with-console-layout.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Tabs + Console root layout.
+ *
+ * Renders the standard tab UI and the Operator Console as two real, side-by-side panels
+ * in a flex split — not an overlay. Neither panel covers the other; each scrolls
+ * independently and the tab UI is sized to the space the console does not occupy.
+ *
+ * This layout owns everything the old overlay used to self-manage: the split sizing, the
+ * drag-to-resize divider, the collapsed edge strip, and the docked edge. The console's
+ * own chrome is the presentational {@link OperatorConsolePanel}. Panel state (expanded,
+ * dock edge, sizes, maximized) is read reactively from `operatorConsolePanel`, the same
+ * per-device state the `Ctrl+`` `` shortcut and the "Toggle Console" command drive.
+ */
+/**
+ * The `tabs-with-console` layout body. Splits its area between the tab UI and the
+ * Operator Console along the docked edge, with a drag-to-resize divider. Collapses the
+ * console to a thin clickable strip and supports maximizing it to fill the layout body.
+ */
+export declare function TabsWithConsoleLayout(): import("react/jsx-runtime").JSX.Element;
+export default TabsWithConsoleLayout;

package/dist/root-layout/layouts/tabs-with-console-layout.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsWithConsoleLayout = TabsWithConsoleLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const operator_console_1 = require("../../operator-console/operator-console");
+const operator_console_state_1 = require("../../operator-console/operator-console-state");
+const color_mode_dropdown_1 = require("../../screens/settings/color-mode-dropdown");
+const tabs_layout_1 = require("../../tabs-layout/tabs-layout");
+const STRIP_THICKNESS = 26;
+const HANDLE_THICKNESS = 6;
+const MIN_SIZE = 120;
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+/** Pixels occupied by the fixed titlebar (macOS = 25, hidden elsewhere). */
+function getTopOffset() {
+    if (typeof document === "undefined")
+        return 0;
+    return Number.parseInt(getComputedStyle(document.body).paddingTop, 10) || 0;
+}
+/**
+ * The `tabs-with-console` layout body. Splits its area between the tab UI and the
+ * Operator Console along the docked edge, with a drag-to-resize divider. Collapses the
+ * console to a thin clickable strip and supports maximizing it to fill the layout body.
+ */
+function TabsWithConsoleLayout() {
+    const [state] = (0, hooks_1.useObservable)(operator_console_state_1.operatorConsolePanel);
+    const [mode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    const [topOffset] = (0, react_1.useState)(getTopOffset);
+    const [dragSize, setDragSize] = (0, react_1.useState)(null);
+    const [isResizing, setIsResizing] = (0, react_1.useState)(false);
+    const dragStartRef = (0, react_1.useRef)(null);
+    const latestSizeRef = (0, react_1.useRef)(null);
+    const { expanded, dock, bottomHeight, sideWidth, maximized } = state;
+    (0, react_1.useEffect)(() => {
+        if (!isResizing)
+            return;
+        const onMove = (e) => {
+            const start = dragStartRef.current;
+            if (!start)
+                return;
+            let next;
+            if (dock === "bottom") {
+                next = clamp(start.startSize + (start.startY - e.clientY), MIN_SIZE, window.innerHeight - topOffset - MIN_SIZE);
+            }
+            else if (dock === "left") {
+                next = clamp(start.startSize + (e.clientX - start.startX), MIN_SIZE, window.innerWidth - MIN_SIZE);
+            }
+            else {
+                next = clamp(start.startSize + (start.startX - e.clientX), MIN_SIZE, window.innerWidth - MIN_SIZE);
+            }
+            latestSizeRef.current = next;
+            setDragSize(next);
+        };
+        const onUp = () => {
+            setIsResizing(false);
+            const finalSize = latestSizeRef.current;
+            if (finalSize != null) {
+                (0, operator_console_state_1.setConsoleSize)(dock === "bottom" ? { bottomHeight: finalSize } : { sideWidth: finalSize });
+            }
+            setDragSize(null);
+            latestSizeRef.current = null;
+            dragStartRef.current = null;
+        };
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+        return () => {
+            document.removeEventListener("mousemove", onMove);
+            document.removeEventListener("mouseup", onUp);
+        };
+    }, [isResizing, dock, topOffset]);
+    const theme = (0, operator_console_1.getConsoleTheme)(mode === "dark");
+    const isVertical = dock !== "bottom";
+    const consoleSize = dragSize ?? (dock === "bottom" ? bottomHeight : sideWidth);
+    const onResizeStart = (e) => {
+        e.preventDefault();
+        const startSize = dock === "bottom" ? bottomHeight : sideWidth;
+        dragStartRef.current = { startX: e.clientX, startY: e.clientY, startSize };
+        latestSizeRef.current = startSize;
+        setIsResizing(true);
+    };
+    // Tabs panel stays mounted across maximize so the tab subtree keeps its state; it is
+    // hidden (not unmounted) when the console is maximized.
+    const tabsHidden = expanded && maximized;
+    const tabsPanel = ((0, jsx_runtime_1.jsx)("div", { style: {
+            flex: 1,
+            minWidth: 0,
+            minHeight: 0,
+            overflow: "hidden",
+            display: tabsHidden ? "none" : "block",
+        }, children: (0, jsx_runtime_1.jsx)(tabs_layout_1.TabsLayoutInternal, { fillContainer: true }) }, "tabs"));
+    let consoleRegion;
+    if (!expanded) {
+        consoleRegion = (0, jsx_runtime_1.jsx)(CollapsedStrip, { dock: dock, theme: theme }, "console");
+    }
+    else if (maximized) {
+        consoleRegion = ((0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 0, minHeight: 0 }, children: (0, jsx_runtime_1.jsx)(operator_console_1.OperatorConsolePanel, {}) }, "console"));
+    }
+    else {
+        consoleRegion = ((0, jsx_runtime_1.jsx)("div", { style: {
+                flex: "0 0 auto",
+                minWidth: 0,
+                minHeight: 0,
+                ...(dock === "bottom" ? { height: `${consoleSize}px` } : { width: `${consoleSize}px` }),
+            }, children: (0, jsx_runtime_1.jsx)(operator_console_1.OperatorConsolePanel, {}) }, "console"));
+    }
+    const divider = expanded && !maximized ? ((0, jsx_runtime_1.jsx)(ResizeDivider, { isVertical: isVertical, isResizing: isResizing, theme: theme, onMouseDown: onResizeStart }, "divider")) : null;
+    const children = dock === "left" ? [consoleRegion, divider, tabsPanel] : [tabsPanel, divider, consoleRegion];
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: "calc(100vh - 25px)",
+            display: "flex",
+            flexDirection: isVertical ? "row" : "column",
+            overflow: "hidden",
+            userSelect: isResizing ? "none" : undefined,
+        }, children: children }));
+}
+/** Thin clickable edge strip shown when the console is collapsed; opens it on click. */
+function CollapsedStrip({ dock, theme }) {
+    const isVertical = dock !== "bottom";
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: operator_console_state_1.openConsole, title: "Open Console (Ctrl+`)", style: {
+            flex: `0 0 ${STRIP_THICKNESS}px`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "6px",
+            border: "none",
+            padding: 0,
+            backgroundColor: theme.headerBg,
+            color: theme.muted,
+            cursor: "pointer",
+            userSelect: "none",
+            fontSize: "12px",
+            ...(dock === "bottom"
+                ? { width: "100%", borderTop: `1px solid ${theme.border}` }
+                : dock === "left"
+                    ? { height: "100%", borderRight: `1px solid ${theme.border}` }
+                    : { height: "100%", borderLeft: `1px solid ${theme.border}` }),
+        }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-terminal", style: { fontSize: "14px" } }), !isVertical && (0, jsx_runtime_1.jsx)("span", { children: "Console" }), (0, jsx_runtime_1.jsx)("i", { className: isVertical ? "bi-chevron-left" : "bi-chevron-up" })] }));
+}
+/** Drag handle between the tabs and console panels; resizes the console along the dock edge. */
+function ResizeDivider({ isVertical, isResizing, theme, onMouseDown }) {
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only resize gutter; size is also adjustable via persisted state
+    (0, jsx_runtime_1.jsx)("div", { onMouseDown: onMouseDown, onMouseEnter: (e) => {
+            if (!isResizing)
+                e.currentTarget.style.backgroundColor = theme.accent;
+        }, onMouseLeave: (e) => {
+            if (!isResizing)
+                e.currentTarget.style.backgroundColor = "transparent";
+        }, style: {
+            flex: `0 0 ${HANDLE_THICKNESS}px`,
+            backgroundColor: isResizing ? theme.accent : "transparent",
+            cursor: isVertical ? "ew-resize" : "ns-resize",
+        } }));
+}
+exports.default = TabsWithConsoleLayout;

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

@@ -0,0 +1,19 @@
+/**
+ * Root layout host — the single thing a Peers client mounts.
+ *
+ * `RootLayoutHost` owns everything that must exist regardless of which layout is active:
+ * the user gate / setup flow, user-context init, global + route loading, the
+ * always-available command palette, and the first-run welcome modal. It then delegates
+ * the visible shell to the selected {@link RootLayout}, swapping it live when the
+ * per-device selection changes.
+ *
+ * This is the bootstrap logic that previously lived (tangled with the tab UI) in
+ * `TabsLayoutApp` / `TabsLayout`; the tab UI itself is now just the `tabs` layout body
+ * (`TabsLayoutInternal`).
+ */
+/**
+ * Top-level host mounted by the client. Resolves the user, then hands off to the
+ * bootstrap component once a user exists. Kept as a thin outer component so the hook
+ * order downstream is stable across the user/no-user branches.
+ */
+export declare function RootLayoutHost(): import("react/jsx-runtime").JSX.Element | undefined;

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RootLayoutHost = RootLayoutHost;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Root layout host — the single thing a Peers client mounts.
+ *
+ * `RootLayoutHost` owns everything that must exist regardless of which layout is active:
+ * the user gate / setup flow, user-context init, global + route loading, the
+ * always-available command palette, and the first-run welcome modal. It then delegates
+ * the visible shell to the selected {@link RootLayout}, swapping it live when the
+ * per-device selection changes.
+ *
+ * This is the bootstrap logic that previously lived (tangled with the tab UI) in
+ * `TabsLayoutApp` / `TabsLayout`; the tab UI itself is now just the `tabs` layout body
+ * (`TabsLayoutInternal`).
+ */
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+const command_palette_ui_1 = require("../command-palette/command-palette-ui");
+const globals_1 = require("../globals");
+const hooks_1 = require("../hooks");
+const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
+const setup_user_1 = require("../screens/setup-user");
+const welcome_modal_1 = require("../screens/welcome-modal");
+const tabs_state_1 = require("../tabs-layout/tabs-state");
+const routes_loader_1 = require("../ui-router/routes-loader");
+const global_overlays_1 = require("./global-overlays");
+const root_layout_registry_1 = require("./root-layout-registry");
+const root_layout_state_1 = require("./root-layout-state");
+/**
+ * Top-level host mounted by the client. Resolves the user, then hands off to the
+ * bootstrap component once a user exists. Kept as a thin outer component so the hook
+ * order downstream is stable across the user/no-user branches.
+ */
+function RootLayoutHost() {
+    const userId = (0, hooks_1.usePromise)(async () => {
+        const _userId = await peers_sdk_1.rpcServerCalls.getUserId();
+        return _userId || null;
+    });
+    if (userId === undefined) {
+        return;
+    }
+    if (!userId) {
+        document.getElementById("appLoadingDiv")?.remove();
+        return (0, jsx_runtime_1.jsx)(setup_user_1.SetupUser, {});
+    }
+    return (0, jsx_runtime_1.jsx)(RootLayoutBootstrap, { userId: userId });
+}
+let userContextInitialized = false;
+/**
+ * Inner bootstrap: initializes the user context, awaits global/route/tab loading, then
+ * renders the selected layout body alongside the always-available command palette and
+ * the first-run welcome modal.
+ */
+function RootLayoutBootstrap(props) {
+    if (!userContextInitialized) {
+        (0, peers_sdk_1.setDefaultClientUserContext)(props.userId);
+        userContextInitialized = true;
+    }
+    const loaded = (0, hooks_1.usePromise)(async () => {
+        await (0, globals_1.loadGlobals)();
+        await (0, routes_loader_1.loadAllRoutes)();
+        await Promise.all([
+            tabs_state_1.activeTabs.loadingPromise,
+            tabs_state_1.activeTabId.loadingPromise,
+            tabs_state_1.recentlyUsedApps.loadingPromise,
+            peers_sdk_1.hasShownWelcomeModal.loadingPromise,
+        ]);
+        return true;
+    });
+    const [showWelcomeModal, setShowWelcomeModal] = (0, react_1.useState)(false);
+    const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    const [layoutId] = (0, hooks_1.useObservable)(root_layout_state_1.selectedRootLayoutId);
+    const [overlays] = (0, hooks_1.useObservable)(global_overlays_1.globalOverlays);
+    // Check if we should show the welcome modal after loading
+    (0, react_1.useEffect)(() => {
+        if (loaded && !(0, peers_sdk_1.hasShownWelcomeModal)()) {
+            setShowWelcomeModal(true);
+        }
+    }, [loaded]);
+    if (!loaded)
+        return false;
+    document.getElementById("appLoadingDiv")?.remove();
+    const layout = (0, root_layout_registry_1.getRootLayout)(layoutId ?? root_layout_registry_1.DEFAULT_ROOT_LAYOUT_ID) ?? (0, root_layout_registry_1.getRootLayout)(root_layout_registry_1.DEFAULT_ROOT_LAYOUT_ID);
+    const Body = layout?.Component;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Body && (0, jsx_runtime_1.jsx)(Body, {}), (0, jsx_runtime_1.jsx)(command_palette_ui_1.CommandPaletteOverlay, {}), overlays.map(({ id, Component }) => ((0, jsx_runtime_1.jsx)(Component, {}, id))), showWelcomeModal && ((0, jsx_runtime_1.jsx)(welcome_modal_1.WelcomeModal, { colorMode: _colorMode, onClose: () => setShowWelcomeModal(false) }))] }));
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Root layout registry — the static list of built-in layouts owned by peers-ui.
+ *
+ * For now this is a hardcoded list. The accessor functions ({@link getRootLayouts} /
+ * {@link getRootLayout}) intentionally hide the underlying array so that dynamic,
+ * package-contributed layouts (a future `registerRootLayout`) can be added later
+ * without changing any consumer.
+ */
+import type { RootLayout } from "./root-layout";
+/** Id of the layout used when no selection has been made (or the selection is unknown). */
+export declare const DEFAULT_ROOT_LAYOUT_ID = "tabs";
+/** Returns all registered root layouts, in display order. */
+export declare function getRootLayouts(): RootLayout[];
+/** Returns the layout with the given id, or `undefined` if none is registered. */
+export declare function getRootLayout(id: string): RootLayout | undefined;

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

@@ -0,0 +1,50 @@
+"use strict";
+/**
+ * Root layout registry — the static list of built-in layouts owned by peers-ui.
+ *
+ * For now this is a hardcoded list. The accessor functions ({@link getRootLayouts} /
+ * {@link getRootLayout}) intentionally hide the underlying array so that dynamic,
+ * package-contributed layouts (a future `registerRootLayout`) can be added later
+ * without changing any consumer.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_ROOT_LAYOUT_ID = void 0;
+exports.getRootLayouts = getRootLayouts;
+exports.getRootLayout = getRootLayout;
+const tabs_layout_1 = require("../tabs-layout/tabs-layout");
+const full_screen_layout_1 = require("./layouts/full-screen-layout");
+const tabs_with_console_layout_1 = require("./layouts/tabs-with-console-layout");
+/** Id of the layout used when no selection has been made (or the selection is unknown). */
+exports.DEFAULT_ROOT_LAYOUT_ID = "tabs";
+/** Built-in layouts, in picker display order. */
+const builtInLayouts = [
+    {
+        id: "tabs",
+        name: "Tabs",
+        description: "The classic Peers shell: a tab strip with one app per tab.",
+        iconClassName: "bi-window-stack",
+        Component: tabs_layout_1.TabsLayoutInternal,
+    },
+    {
+        id: "tabs-with-console",
+        name: "Tabs + Console",
+        description: "The tab strip with the Operator Console docked alongside as a resizable panel.",
+        iconClassName: "bi-layout-split",
+        Component: tabs_with_console_layout_1.TabsWithConsoleLayout,
+    },
+    {
+        id: "fullscreen",
+        name: "Full-screen",
+        description: "One screen at a time, no tabs — navigate with the Cmd/Ctrl+K command palette.",
+        iconClassName: "bi-fullscreen",
+        Component: full_screen_layout_1.FullScreenLayout,
+    },
+];
+/** Returns all registered root layouts, in display order. */
+function getRootLayouts() {
+    return builtInLayouts;
+}
+/** Returns the layout with the given id, or `undefined` if none is registered. */
+function getRootLayout(id) {
+    return builtInLayouts.find((layout) => layout.id === id);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Root layout selection — persistent, per-device state plus palette integration.
+ *
+ * The selected layout id is stored in a `deviceVar` (per-device, not synced) to match
+ * the precedent of other root-UI preferences (`colorMode`, the operator console panel):
+ * layout choice is tightly coupled to the device/form factor. `RootLayoutHost` reads
+ * this reactively and swaps the layout live when it changes.
+ */
+/**
+ * Per-device id of the currently selected root layout. Defaults to
+ * {@link DEFAULT_ROOT_LAYOUT_ID}. Observable — subscribers (the host, the picker)
+ * re-render when it changes.
+ */
+export declare const selectedRootLayoutId: import("@peers-app/peers-sdk").PersistentVar<string>;
+/** Select the root layout with the given id (persists per-device). */
+export declare function setRootLayout(id: string): void;
+/**
+ * Register a `"Use <name> Layout"` command per layout so the selector is keyboard-driven
+ * and discoverable from the command palette (mirrors the operator console's "Toggle
+ * Console" command). Idempotent. The registry is static today, so this runs once at
+ * module load.
+ */
+export declare function registerLayoutCommands(): void;

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

@@ -0,0 +1,54 @@
+"use strict";
+/**
+ * Root layout selection — persistent, per-device state plus palette integration.
+ *
+ * The selected layout id is stored in a `deviceVar` (per-device, not synced) to match
+ * the precedent of other root-UI preferences (`colorMode`, the operator console panel):
+ * layout choice is tightly coupled to the device/form factor. `RootLayoutHost` reads
+ * this reactively and swaps the layout live when it changes.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectedRootLayoutId = void 0;
+exports.setRootLayout = setRootLayout;
+exports.registerLayoutCommands = registerLayoutCommands;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const command_palette_1 = require("../command-palette/command-palette");
+const root_layout_registry_1 = require("./root-layout-registry");
+/**
+ * Per-device id of the currently selected root layout. Defaults to
+ * {@link DEFAULT_ROOT_LAYOUT_ID}. Observable — subscribers (the host, the picker)
+ * re-render when it changes.
+ */
+exports.selectedRootLayoutId = (0, peers_sdk_1.deviceVar)("rootLayout:selectedId", {
+    defaultValue: root_layout_registry_1.DEFAULT_ROOT_LAYOUT_ID,
+});
+/** Select the root layout with the given id (persists per-device). */
+function setRootLayout(id) {
+    (0, exports.selectedRootLayoutId)(id);
+}
+let initialized = false;
+/**
+ * Register a `"Use <name> Layout"` command per layout so the selector is keyboard-driven
+ * and discoverable from the command palette (mirrors the operator console's "Toggle
+ * Console" command). Idempotent. The registry is static today, so this runs once at
+ * module load.
+ */
+function registerLayoutCommands() {
+    if (initialized)
+        return;
+    initialized = true;
+    for (const layout of (0, root_layout_registry_1.getRootLayouts)()) {
+        (0, command_palette_1.registerCommand)({
+            id: `use-root-layout:${layout.id}`,
+            label: `Use ${layout.name} Layout`,
+            description: layout.description,
+            iconClassName: layout.iconClassName,
+            category: "View",
+            action: () => {
+                (0, command_palette_1.closeCommandPalette)();
+                setRootLayout(layout.id);
+            },
+        });
+    }
+}
+registerLayoutCommands();

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

@@ -0,0 +1,30 @@
+/**
+ * Root layout system — the layout interface.
+ *
+ * A {@link RootLayout} is a top-level, swappable app shell. The user (and, in the
+ * future, a package) can choose which root layout owns the visible chrome. Layouts
+ * are rendered *inside* `RootLayoutHost`, which has already done all bootstrapping
+ * (user context, route loading) and mounted the always-available command palette.
+ * A layout therefore owns 100% of the visible chrome (tab strip, content panels,
+ * console panel, etc.) while the host owns the invisible foundation.
+ */
+import type React from "react";
+/**
+ * A selectable top-level app layout. The `Component` is the layout body rendered by
+ * `RootLayoutHost`; everything visible on screen is the layout's responsibility.
+ */
+export interface RootLayout {
+    /** Stable id persisted in the layout-selection pvar (e.g. `"tabs"`). */
+    id: string;
+    /** User-facing name shown in the layout picker. */
+    name: string;
+    /** One-line description shown in the picker. */
+    description: string;
+    /** bootstrap-icon class used in the picker. */
+    iconClassName: string;
+    /**
+     * The layout body. Rendered inside `RootLayoutHost` after bootstrapping is
+     * complete and the command palette is mounted. The body owns all visible chrome.
+     */
+    Component: React.ComponentType;
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+/**
+ * Root layout system — the layout interface.
+ *
+ * A {@link RootLayout} is a top-level, swappable app shell. The user (and, in the
+ * future, a package) can choose which root layout owns the visible chrome. Layouts
+ * are rendered *inside* `RootLayoutHost`, which has already done all bootstrapping
+ * (user context, route loading) and mounted the always-available command palette.
+ * A layout therefore owns 100% of the visible chrome (tab strip, content panels,
+ * console panel, etc.) while the host owns the invisible foundation.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/screens/network-viewer/connection-troubleshooter.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectionTroubleshooter = ConnectionTroubleshooter;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
 const network_viewer_ipc_1 = require("./network-viewer-ipc");
 const STATUS_ICON = {
@@ -149,16 +148,13 @@ function ConnectionTroubleshooter({ onBack }) {
     const handleAskAssistant = () => {
         const report = formatReportForAI(checks.filter((c) => c.status !== "running"));
         const message = `I ran the Peers connection troubleshooter and got the following results. Please help me understand what's wrong and how to fix it:\n\n${report}`;
-        (0, peers_sdk_1.emit)({ name: "chat:openWithMessage", data: { message } }).catch(() => {
-            // Fallback: copy to clipboard
-            navigator.clipboard
-                .writeText(message)
-                .then(() => {
-                alert("Diagnostic report copied to clipboard. Paste it into the AI assistant chat.");
-            })
-                .catch(() => {
-                alert("Could not open AI assistant. Please open the chat manually and paste the diagnostic report.");
-            });
+        navigator.clipboard
+            .writeText(message)
+            .then(() => {
+            alert("Diagnostic report copied to clipboard. Paste it into the AI assistant chat.");
+        })
+            .catch(() => {
+            alert("Could not copy the diagnostic report. Please open the chat manually and describe the results.");
         });
     };
     const groups = groupByLayer(checks.filter((c) => !c.id.startsWith("placeholder-")));

package/dist/screens/settings/settings-page.js

@@ -42,6 +42,7 @@ const tabs_1 = require("../../components/tabs");
 const tooltip_1 = require("../../components/tooltip");
 const globals = __importStar(require("../../globals"));
 const hooks_1 = require("../../hooks");
+const layout_picker_1 = require("../../root-layout/layout-picker");
 const color_mode_dropdown_1 = require("./color-mode-dropdown");
 const voice_settings_1 = require("./voice-settings");
 function getAppVersion() {
@@ -73,7 +74,7 @@ const UserSettingsTab = () => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ProfileSection, {}), (0, jsx_runtime_1.jsx)(LogoutSection, {})] }));
 };
 const AppearanceSettingsTab = () => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Appearance" }), (0, jsx_runtime_1.jsx)(color_mode_dropdown_1.ColorModeDropdown, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Appearance" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsx)(color_mode_dropdown_1.ColorModeDropdown, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsx)(layout_picker_1.LayoutPicker, {}) })] }));
 };
 const AdvancedSettingsTab = () => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Advanced Settings" }), (0, jsx_runtime_1.jsx)(PackagesRootDirectory, {}), (0, jsx_runtime_1.jsx)(ReloadPackagesOnPageRefresh, {}), (0, jsx_runtime_1.jsx)(AutoUpdatePeersCore, {}), (0, jsx_runtime_1.jsx)(ResetDeviceSyncInfos, {}), (0, jsx_runtime_1.jsx)(DeleteLocalDatabase, {}), (0, jsx_runtime_1.jsx)(CleanupOldDataDir, {}), (0, jsx_runtime_1.jsx)(ImportOldPeersData, {}), (0, jsx_runtime_1.jsx)(ResetChangeTracking, {})] }));

package/dist/tabs-layout/tabs-layout.d.ts

@@ -1,4 +1,48 @@
-export declare function TabsLayoutApp(): import("react/jsx-runtime").JSX.Element | undefined;
-export declare function TabsLayout(props: {
-    userId: string;
-}): false | import("react/jsx-runtime").JSX.Element;
+import React, { Component } from "react";
+import { type TabState } from "./tabs-state";
+interface TabErrorBoundaryProps {
+    tabTitle: string;
+    tabId: string;
+    children: React.ReactNode;
+}
+interface TabErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+/**
+ * Wraps a single tab's content so a crash in one tab doesn't take down the whole app.
+ * Exported so other root layouts (e.g. the full-screen layout) can render a tab body with
+ * the same crash isolation. Reset it across screens by giving it a `key`.
+ */
+export declare class TabErrorBoundary extends Component<TabErrorBoundaryProps, TabErrorBoundaryState> {
+    constructor(props: TabErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): TabErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+/**
+ * The tab UI body: the tab strip plus the active tab's content. Rendered as the body of
+ * the default `tabs` root layout inside `RootLayoutHost` (which owns bootstrapping, the
+ * command palette, and the welcome modal). Branches on `isDesktop` for mobile vs. desktop
+ * chrome.
+ *
+ * @param fillContainer When `true`, the body fills its parent (`height: 100%`) instead of
+ *   sizing itself to the viewport. Set this when embedding the tabs UI inside another
+ *   layout that owns the vertical space (e.g. the `tabs-with-console` split layout);
+ *   leave it `false`/unset for the standalone `tabs` layout, which sizes to the viewport.
+ */
+export declare function TabsLayoutInternal({ fillContainer }?: {
+    fillContainer?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+interface TabContentProps {
+    tab: TabState;
+    isMobile: boolean;
+    isActive: boolean;
+}
+/**
+ * Renders a single tab's body, lazily initializing it on first activation and keeping it
+ * mounted thereafter (`initializedTabs`). Exported so other root layouts (e.g. full-screen)
+ * can render the active screen through the same routing/launcher path.
+ */
+export declare function TabContent({ tab, isMobile, isActive }: TabContentProps): import("react/jsx-runtime").JSX.Element | null;
+export {};