@fungi.computer/tourtois 0.0.0-stage → 0.0.1

package/dist/AppWorkbench.js

@@ -0,0 +1,575 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { desktopSettingsHandler } from "./desktop/consent.js";
+import { AppError } from "@fungi.computer/agar";
+import {} from "@fungi.computer/caps/blocks/app-bar";
+import { toast, Toaster } from "@fungi.computer/caps/components/toaster";
+import { WindowSnapPreview } from "@fungi.computer/caps/components/window";
+import { MaosaicoRegion, useLayer, useMaosaicoLayout, } from "@fungi.computer/maosaico";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { createPortal } from "react-dom";
+import { addressKey } from "@fungi.computer/oyster/shell/app-directory";
+import { reconcileAppDirectory, reconcileAppWindowFromDirectory, } from "./app-directory-reconciliation.js";
+import { useAppDirectory } from "./app-directory.js";
+import { AppIcon } from "./app-icon.js";
+import { appForRole, composeOpenRequests, createAppLaunchDescriptor, attachWindowComputer, launchComputerId, launchForComputer, launchForRoleIntent, requireHandledNavigation, resolveFileEditorWindow, } from "./app-launch.js";
+import { useAppSurfaceHost, } from "./app-surface.js";
+import { hasVisibleAppWindows, } from "./app-windows.js";
+import { desktopVisibility } from "./desktop-visibility.js";
+import { AppPane, FocusedWindowControls } from "./AppPane.js";
+import { WorkbenchAppBar } from "./WorkbenchAppBar.js";
+import { DesktopMenuBar } from "./DesktopMenuBar.js";
+import { ShellCommandDialogs, useShellCommands } from "./shell-commands.js";
+import { OwnSprite } from "./member-avatar.js";
+import { Desktop } from "./desktop/Desktop.js";
+import { useAppOpenUrlHandoff } from "./useAppOpenUrlHandoff.js";
+import { useAppWindowManager } from "./useAppWindowManager.js";
+import { useDirectoryCommands } from "./useDirectoryCommands.js";
+const emptyAppBarLabel = (loading, failed) => {
+    if (loading)
+        return "Loading Apps…";
+    if (failed)
+        return "Apps unavailable";
+    return "Apps will appear here when available.";
+};
+/** Phone Home uses the same public shell command as the keyboard. */
+function phoneShowDesktop(phone, covered, host, onFailure) {
+    if (!phone || !covered || !host)
+        return undefined;
+    return () => {
+        void host
+            .execute("shell:desktop.show", { origin: "menu" })
+            .then((outcome) => {
+            if (outcome.status !== "handled") {
+                console.error("Phone Show desktop refused", outcome);
+                onFailure("The desktop could not be shown. Try again.");
+            }
+        })
+            .catch((cause) => {
+            console.error("Phone Show desktop failed", cause);
+            onFailure("The desktop could not be shown. Try again.");
+        });
+    };
+}
+export function AppWorkbench({ paneLayerRef, phone, teamId, teamName, initialComputerId, computers, computersUnavailable, extraPanes, initialFocusId, onLayoutChange, extraLaunchers = [], settingsLaunchers = [], systemMenuItems, directoryReader, takeAppOpenRequest, platform, desktopStorage, desktopMethods, gills, }) {
+    const setSettingsLocation = platform.openSettings;
+    const [appDialOpen, setAppDialOpen] = useState(false);
+    // The Layout menu's "Arrange desktop" command and the desktop's own
+    // controls share one state: this is their common ancestor.
+    const [desktopEditing, setDesktopEditing] = useState(false);
+    const appDialContainer = useLayer("popover");
+    const noticeContainer = useLayer("toast");
+    const layout = useMaosaicoLayout();
+    const { activeId, focus, mode, order } = layout;
+    const appSurfaceHost = useAppSurfaceHost();
+    const selectionRefreshes = useRef(new Map());
+    const appWindows = useAppWindowManager(appSurfaceHost, teamId, {
+        onNavigation: (input) => openNavigation(input),
+        onAppOpen: (input) => openApp(input),
+        onAppRole: (role) => {
+            const chosen = appForRole(appsQuery.data?.apps ?? [], directoryRoles, role);
+            return Promise.resolve(chosen ? { displayName: chosen.displayName ?? null } : null);
+        },
+        onSelectionChanged: (launch) => refreshAppDirectory(launch),
+        // Raise only: the App already holds keyboard focus inside its frame.
+        onAppFocus: (launch) => {
+            focus(launch.windowId);
+        },
+    });
+    const appProjection = useSyncExternalStore(appWindows.subscribe, appWindows.read, appWindows.read);
+    useEffect(() => {
+        for (const window of appProjection.windows)
+            if (window.status === "ready")
+                selectionRefreshes.current.delete(window.windowId);
+    }, [appProjection]);
+    const [appStatus, setAppStatus] = useState(null);
+    useEffect(() => {
+        if (!appStatus)
+            return;
+        const disconnected = appStatus instanceof AppError && appStatus.code === "DISCONNECTED";
+        let message = appStatus instanceof Error
+            ? "This App couldn’t complete that request."
+            : appStatus;
+        if (disconnected)
+            message = "This App lost its connection.";
+        const notice = {
+            id: "workbench-status",
+            toasterId: "workbench-notices",
+            closeButton: true,
+            dismissible: true,
+        };
+        if (disconnected) {
+            toast(message, {
+                ...notice,
+                duration: Infinity,
+                description: "Reload the workspace to reconnect.",
+                action: {
+                    label: "Reload",
+                    onClick: () => {
+                        window.location.reload();
+                    },
+                },
+            });
+        }
+        else
+            toast(message, notice);
+    }, [appStatus]);
+    const reconciledDirectoryRef = useRef(null);
+    const focusWindow = useCallback((id) => {
+        focus(id);
+        requestAnimationFrame(() => {
+            const pane = [
+                ...(paneLayerRef.current?.querySelectorAll("[data-window-id]") ?? []),
+            ].find((candidate) => candidate.dataset.windowId === id);
+            pane
+                ?.querySelector("[data-caps-window-handle]")
+                ?.focus();
+        });
+    }, [focus, paneLayerRef]);
+    const afterHide = (id) => {
+        if (layout.zoomedId === id)
+            layout.zoom(null);
+        const next = appWindows
+            .read()
+            .windows.filter((item) => item.windowId !== id && item.status !== "minimized")
+            .at(-1);
+        if (next)
+            focusWindow(next.windowId);
+        else
+            requestAnimationFrame(() => {
+                paneLayerRef.current
+                    ?.closest(".tourtois-workbench-layout")
+                    ?.querySelector(".caps-app-bar-launcher-button")
+                    ?.focus();
+            });
+    };
+    const activeWindow = appProjection.windows.find((item) => item.windowId === activeId && item.status !== "minimized");
+    const activeSurfaceId = activeWindow?.launch.surfaceId ?? null;
+    // The App owns its history; a refusal or failure leaves Back in place.
+    const goBack = (windowId) => {
+        void appWindows.back(windowId).catch((cause) => {
+            console.error("App workbench operation failed", cause);
+        });
+    };
+    // The shell's window keys run through Whistle so /keys, the `:` line and
+    // which-key list them; these are the behaviors behind those commands.
+    const stepTarget = (step) => order.length < 2
+        ? undefined
+        : order[(Math.max(0, order.indexOf(activeId ?? "")) + step + order.length) %
+            order.length];
+    const desktopOwner = useRef(null);
+    useEffect(() => {
+        let retired = false;
+        let registration;
+        const close = (value) => {
+            if (value)
+                void value.close().catch((cause) => {
+                    console.error("Desktop settings registration close failed", cause);
+                    return { kind: "failed", cause };
+                });
+        };
+        void platform
+            .registerDesktopSettings(desktopSettingsHandler(() => desktopOwner.current))
+            .then((value) => {
+            if (retired)
+                close(value);
+            else
+                registration = value;
+        })
+            .catch((cause) => {
+            console.error("Desktop settings registration failed", cause);
+            setAppStatus("Desktop settings are unavailable. Reopen the desktop to try again.");
+            return { kind: "failed", cause };
+        });
+        return () => {
+            retired = true;
+            close(registration);
+        };
+    }, [platform]);
+    const receiveDesktopOwner = useCallback((owner) => {
+        desktopOwner.current = owner;
+    }, []);
+    const shellCommands = useShellCommands(appSurfaceHost, {
+        openApp: () => {
+            setAppDialOpen(true);
+        },
+        showDesktop: async () => {
+            layout.zoom(null);
+            if (hasVisibleAppWindows(appWindows.read())) {
+                const hiding = appWindows.hideAll();
+                afterHide("");
+                await hiding;
+            }
+            else {
+                await appWindows.restoreHidden();
+                const restored = appWindows
+                    .read()
+                    .windows.find((item) => item.status !== "minimized");
+                if (restored)
+                    focusWindow(restored.windowId);
+            }
+        },
+        focusStep: (step) => {
+            const next = stepTarget(step);
+            if (!next)
+                return;
+            layout.zoom(null);
+            focusWindow(next);
+        },
+        swapStep: (step) => {
+            const next = stepTarget(step);
+            if (next && activeId)
+                layout.swap(activeId, next);
+        },
+        toggleZoom: () => {
+            if (activeId)
+                layout.zoom(layout.zoomedId === activeId ? null : activeId);
+        },
+        back: () => {
+            if (activeId)
+                goBack(activeId);
+        },
+    });
+    useEffect(() => {
+        appSurfaceHost?.focus?.(activeSurfaceId);
+    }, [appSurfaceHost, activeSurfaceId, activeWindow?.status]);
+    const { query: appsQuery, apps: listedApps, needsUpdate, roles: directoryRoles, } = useAppDirectory(teamId, directoryReader);
+    const refetchApps = appsQuery.refetch;
+    useEffect(() => platform.subscribeChanges(() => {
+        void refetchApps();
+    }), [platform, refetchApps]);
+    const launchFor = (installation, currentLaunch) => {
+        return createAppLaunchDescriptor(installation, currentLaunch ? launchComputerId(currentLaunch.href) : initialComputerId, window.location.origin, computers, computersUnavailable);
+    };
+    const refreshAppDirectory = async (launch) => {
+        const attempts = selectionRefreshes.current.get(launch.windowId) ?? 0;
+        if (attempts >= 3)
+            return false;
+        selectionRefreshes.current.set(launch.windowId, attempts + 1);
+        const refreshed = await appsQuery.refetch({ throwOnError: true });
+        const apps = refreshed.data?.apps ?? [];
+        reconciledDirectoryRef.current = apps;
+        const failure = { action: null };
+        const replaced = await reconcileAppWindowFromDirectory(appWindows, launch, apps, launchFor, { kind: "selection-changed" }, (action) => {
+            failure.action = action;
+        });
+        if (!replaced && failure.action === null)
+            setAppStatus("The App selection changed. This window stayed open; close it after saving or discarding work, then reopen the App.");
+        else if (!replaced)
+            setAppStatus(failure.action === "close"
+                ? "App could not be closed."
+                : "App could not be replaced.");
+        return replaced;
+    };
+    const openNavigation = async (input) => {
+        if (!appSurfaceHost)
+            throw new Error("Open an editor App before opening this file.");
+        const editor = await resolveFileEditorWindow({
+            apps: listedApps ?? [],
+            roles: directoryRoles,
+            appWindows,
+            appSurfaceHost,
+            computerId: input.computerId,
+            computers,
+            origin: window.location.origin,
+            onPermissionNeeded: (app) => {
+                setSettingsLocation({
+                    category: "apps",
+                    appKey: addressKey(app.address),
+                    section: "permissions",
+                });
+            },
+        });
+        const { launch } = editor;
+        const previousLaunch = launch;
+        const nextLaunch = launchForComputer(launch, input.computerId);
+        try {
+            await appWindows.restore(launch.windowId);
+            // File navigation carries the source Computer. Reconfigure Inkcap's
+            // mounted host first so its open-file command receives the exact
+            // target; the existing iframe and command contribution stay in place.
+            await appWindows.reconfigure(launch.windowId, nextLaunch);
+            const mounted = appWindows
+                .read()
+                .windows.find((window) => window.windowId === launch.windowId);
+            if (mounted?.launch.href !== nextLaunch.href)
+                throw new Error("The editor could not use the source Computer.");
+            layout.zoom(null);
+            focusWindow(launch.windowId);
+            appSurfaceHost.focus?.(launch.surfaceId);
+            const commandId = `${launch.surfaceId}:open-file`;
+            const outcome = await appSurfaceHost.execute(commandId, {
+                origin: "programmatic",
+                arguments: input,
+            });
+            requireHandledNavigation(outcome);
+        }
+        catch (error) {
+            if (appWindows
+                .read()
+                .windows.some((window) => window.windowId === launch.windowId &&
+                window.launch.href === nextLaunch.href))
+                await appWindows
+                    .reconfigure(launch.windowId, previousLaunch)
+                    .catch((cause) => {
+                    console.error("App workbench operation failed", cause);
+                    return undefined;
+                });
+            if (editor.opened)
+                await appWindows.close(launch.windowId).catch((cause) => {
+                    console.error("App workbench operation failed", cause);
+                    return undefined;
+                });
+            throw error;
+        }
+    };
+    const openAppPermissions = (surfaceId) => {
+        const app = directory.find((item) => item.surfaceId === surfaceId);
+        setSettingsLocation({
+            category: "apps",
+            appKey: app ? addressKey(app.address) : null,
+            section: "permissions",
+        });
+    };
+    /** The person chose another Computer in one window's status bar. */
+    const selectWindowComputer = async (windowId, computerId) => {
+        setAppStatus(null);
+        try {
+            await attachWindowComputer(appWindows, windowId, computerId);
+        }
+        catch (cause) {
+            console.error("App workbench operation failed", cause);
+            setAppStatus("Computer unavailable. Review this App's permissions.");
+            const surfaceId = appWindows
+                .read()
+                .windows.find((item) => item.windowId === windowId)?.launch.surfaceId;
+            if (surfaceId)
+                openAppPermissions(surfaceId);
+        }
+    };
+    const openApp = async (input) => {
+        const current = await appsQuery.refetch({ throwOnError: true });
+        const requested = launchForRoleIntent(current.data?.apps ?? [], directoryRoles, input, composeOpenRequests.request.generate(), (app) => launchFor(app));
+        const existing = appWindows
+            .read()
+            .windows.some((item) => item.windowId === requested.windowId);
+        if (existing) {
+            await appWindows.restore(requested.windowId);
+            await appWindows.reconfigure(requested.windowId, requested);
+        }
+        else
+            await appWindows.open(requested);
+        layout.zoom(null);
+        focusWindow(requested.windowId);
+    };
+    useAppOpenUrlHandoff({
+        teamId,
+        host: appSurfaceHost,
+        ready: appsQuery.isSuccess,
+        takeAppOpenRequest,
+        onOpen: openApp,
+        setError: setAppStatus,
+    });
+    useEffect(() => {
+        if (initialFocusId)
+            focus(initialFocusId);
+    }, [focus, initialFocusId]);
+    useEffect(() => {
+        if (!listedApps)
+            return;
+        if (reconciledDirectoryRef.current === listedApps) {
+            reconciledDirectoryRef.current = null;
+            return;
+        }
+        void reconcileAppDirectory(appWindows, listedApps, launchFor, (action) => {
+            setAppStatus(action === "close"
+                ? "App could not be closed."
+                : "App could not be replaced.");
+        });
+    }, [appWindows, listedApps, initialComputerId, computers]);
+    const directory = useMemo(() => listedApps ?? [], [listedApps]);
+    const launchApp = (installation, requestedLaunch) => {
+        const windowId = "app:" + installation.surfaceId;
+        const launch = requestedLaunch ?? launchFor(installation);
+        if (!launch) {
+            setAppStatus(installation.availability !== "available"
+                ? `${installation.displayName ?? "App"} is unavailable.`
+                : `${installation.displayName ?? "App"} has no available surface.`);
+            return;
+        }
+        setAppStatus(null);
+        performance.mark("fungi.app-open.tourtois-launch-start");
+        const existing = appWindows
+            .read()
+            .windows.find((item) => item.windowId === windowId);
+        const opening = existing && launch.openRequest !== null
+            ? appWindows
+                .restore(windowId)
+                .then(() => appWindows.reconfigure(windowId, launch))
+            : appWindows.open(launch);
+        void opening
+            .then(() => {
+            performance.mark("fungi.app-open.tourtois-launch-ready");
+            layout.zoom(null);
+            focusWindow(windowId);
+        })
+            .catch((cause) => {
+            console.error("App workbench operation failed", cause);
+            setAppStatus(`${installation.displayName ?? "App"} could not be opened.`);
+        });
+    };
+    useDirectoryCommands({
+        host: appSurfaceHost,
+        directory,
+        manager: appWindows,
+        launchFor,
+        onFocus: (windowId) => {
+            layout.zoom(null);
+            focusWindow(windowId);
+        },
+        onError: setAppStatus,
+    });
+    // A dashboard App opens as the Team's workspace, never as a window in it.
+    const windowApps = useMemo(() => directory.filter((installation) => !installation.roles.includes("dashboard")), [directory]);
+    const launchableItems = windowApps
+        .filter((installation) => launchFor(installation) !== null)
+        .map((installation) => {
+        const windowId = "app:" + installation.surfaceId;
+        return {
+            id: windowId,
+            label: installation.displayName ?? "App",
+            icon: _jsx(AppIcon, { roles: installation.roles, icon: installation.icon }),
+            onSelect: () => {
+                launchApp(installation);
+            },
+        };
+    });
+    const appLaunchers = launchableItems.filter((launcher) => !appProjection.windows.some((window) => window.windowId === launcher.id));
+    appLaunchers.push(...settingsLaunchers.map((launcher) => {
+        const item = {
+            id: launcher.id,
+            label: launcher.label,
+            onSelect: () => {
+                setSettingsLocation(launcher.location);
+            },
+        };
+        return launcher.icon ? { ...item, icon: launcher.icon } : item;
+    }), ...extraLaunchers);
+    const inboxSurfaceId = useMemo(() => appForRole(directory, directoryRoles, "inbox")?.surfaceId ?? null, [directory, directoryRoles]);
+    const visibility = desktopVisibility({
+        hasVisibleWindows: hasVisibleAppWindows(appProjection) ||
+            order.some((id) => !appProjection.windows.some((window) => window.windowId === id)),
+        mode,
+        zoomedId: layout.zoomedId,
+        phone,
+    });
+    const covered = visibility === "covered";
+    const desktopRef = useRef(null);
+    useLayoutEffect(() => {
+        if (desktopRef.current)
+            desktopRef.current.inert = covered;
+    }, [covered]);
+    return (_jsxs("div", { className: "tourtois-workbench-layout", children: [_jsx(DesktopMenuBar, { onShowDesktop: phoneShowDesktop(phone, covered, appSurfaceHost, setAppStatus), teamName: teamName, appBar: _jsx(WorkbenchAppBar, { phone: phone, container: appDialContainer, isOpen: appDialOpen, launcherLabels: "wrap", onOpenChange: setAppDialOpen, emptyLabel: emptyAppBarLabel(appsQuery.isLoading, appsQuery.isError), windows: appProjection.windows.map((projection) => ({
+                        id: projection.windowId,
+                        label: projection.launch.title,
+                        icon: (_jsx(AppIcon, { roles: projection.launch.roles, icon: directory.find((app) => app.surfaceId === projection.launch.surfaceId)?.icon })),
+                        active: activeId === projection.windowId,
+                        onSelect: () => {
+                            void appWindows
+                                .restore(projection.windowId)
+                                .then(() => {
+                                layout.zoom(null);
+                                focusWindow(projection.windowId);
+                            })
+                                .catch((cause) => {
+                                console.error("App workbench operation failed", cause);
+                                setAppStatus("App could not be restored.");
+                            });
+                        },
+                        onClose: () => {
+                            void appWindows
+                                .close(projection.windowId)
+                                .then(() => {
+                                if (!appWindows
+                                    .read()
+                                    .windows.some((item) => item.windowId === projection.windowId))
+                                    afterHide(projection.windowId);
+                            })
+                                .catch((cause) => {
+                                console.error("App workbench operation failed", cause);
+                                setAppStatus("App could not be closed.");
+                            });
+                        },
+                    })), launchers: appLaunchers, launcher: {
+                        label: "Open Apps",
+                        icon: (_jsx(OwnSprite, { "aria-hidden": "true", style: { width: "100%", height: "100%" } })),
+                    } }), onOpenSettings: () => {
+                    setSettingsLocation({ category: "home" });
+                }, onEditAvatar: () => {
+                    setSettingsLocation({ category: "avatar" });
+                }, focusedId: activeWindow?.windowId ?? null, title: activeWindow?.launch.title ?? "Apps", tiled: mode === "tiled", onLayoutChange: onLayoutChange
+                    ? (tiled) => {
+                        layout.zoom(null);
+                        onLayoutChange(tiled);
+                    }
+                    : undefined, onRestoreLayout: layout.zoomedId
+                    ? () => {
+                        layout.zoom(null);
+                    }
+                    : undefined, onArrangeDesktop: () => {
+                    setDesktopEditing(true);
+                }, focusedControls: activeWindow ? (_jsx(FocusedWindowControls, { projection: activeWindow, app: directory.find((app) => app.surfaceId === activeWindow.launch.surfaceId), onOpenSettings: () => {
+                        const app = directory.find((item) => item.surfaceId === activeWindow.launch.surfaceId);
+                        setSettingsLocation({
+                            category: "apps",
+                            appKey: app ? addressKey(app.address) : null,
+                            section: "advanced",
+                        });
+                    }, onOpenPermissions: () => {
+                        openAppPermissions(activeWindow.launch.surfaceId);
+                    } }, activeWindow.windowId)) : null, systemMenuItems: systemMenuItems }), noticeContainer
+                ? createPortal(_jsx(Toaster, { id: "workbench-notices", position: "bottom-right", offset: 24, mobileOffset: 24, closeButton: true }), noticeContainer)
+                : null, _jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx(MaosaicoRegion, { layer: "desktop", style: { position: "absolute", inset: 0 }, "data-desktop-visibility": visibility, ref: desktopRef, "aria-hidden": covered ? true : undefined, children: _jsx(Desktop, { phone: phone, editing: desktopEditing, onEditingChange: setDesktopEditing, inboxSurfaceId: inboxSurfaceId, onOwner: receiveDesktopOwner, launcherItems: launchableItems, onAllApps: () => {
+                                setAppDialOpen(true);
+                            }, paused: covered, apps: windowApps, needsUpdate: needsUpdate, onAppSettings: (app) => {
+                                setSettingsLocation({
+                                    category: "apps",
+                                    appKey: addressKey(app.address),
+                                    section: "advanced",
+                                });
+                            }, loading: appsQuery.isLoading, unavailable: appsQuery.isError, onOpen: (input) => {
+                                void openApp(input).catch((cause) => {
+                                    console.error("Gill destination could not be opened", cause);
+                                    setAppStatus("The widget’s App could not be opened.");
+                                });
+                            }, computersForGill: (surfaceId) => {
+                                const app = windowApps.find((app) => app.surfaceId === surfaceId);
+                                return app ? (launchFor(app)?.computers ?? []) : [];
+                            }, storage: desktopStorage, methods: desktopMethods, transport: gills, onRetryApps: () => {
+                                void appsQuery.refetch();
+                            } }) }), _jsxs(MaosaicoRegion, { layer: "windows", style: { height: "100%", pointerEvents: "none" }, ref: paneLayerRef, className: "tourtois-pane-layer", "data-layout-mode": mode, children: [appProjection.windows.map((projection, index) => (_jsx(AppPane, { index: index, focusWindow: focusWindow, afterHide: afterHide, onBack: goBack, manager: appWindows, projection: projection, icon: directory.find((app) => app.surfaceId === projection.launch.surfaceId)?.icon, onError: setAppStatus, onSelectComputer: (windowId, computerId) => {
+                                    void selectWindowComputer(windowId, computerId);
+                                } }, projection.windowId))), extraPanes?.({ activeId, order, focus }), layout.snapPreview && (_jsx(WindowSnapPreview, { "data-snap-side": layout.snapPreview.side, style: {
+                                    left: layout.snapPreview.frame.x,
+                                    top: layout.snapPreview.frame.y,
+                                    width: layout.snapPreview.frame.width,
+                                    height: layout.snapPreview.frame.height,
+                                    ...layout.stackingStyle,
+                                } })), layout.divider ? (_jsx("div", { className: "tourtois-divider", role: "separator", "aria-label": "Main window width", "aria-orientation": "vertical", "aria-valuemin": Math.round(layout.divider.min), "aria-valuemax": Math.round(layout.divider.max), "aria-valuenow": Math.round(layout.divider.position), tabIndex: 0, style: { left: layout.divider.position, ...layout.stackingStyle }, ...layout.divider.props, onKeyDown: (event) => {
+                                    if (!layout.divider)
+                                        return;
+                                    const step = new Map([
+                                        ["ArrowLeft", -32],
+                                        ["ArrowRight", 32],
+                                    ]).get(event.key) ?? 0;
+                                    if (step) {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        layout.resizeMain(layout.divider.position + step);
+                                    }
+                                } })) : null] })] }), _jsx(ShellCommandDialogs, { host: appSurfaceHost, state: shellCommands, focusedWindow: activeWindow, directoryApps: directory.map((app) => ({
+                    commands: app.commands,
+                    name: app.displayName ?? "App",
+                    roles: app.roles,
+                    surfaceId: app.surfaceId,
+                })), onStatus: setAppStatus, finalFocus: () => document.querySelector(".caps-app-bar-launcher-button") })] }));
+}

package/dist/AvatarPicker.d.ts

@@ -0,0 +1,7 @@
+import { type MemberAvatar } from "@fungi.computer/sprite-zdog/avatar";
+/** Catalog-driven controls; the account owner handles saving and rollback. */
+export declare function AvatarPicker({ value, disabled, onChange, }: {
+    value: MemberAvatar;
+    disabled: boolean;
+    onChange: (next: MemberAvatar) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/AvatarPicker.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "@fungi.computer/caps/components/card";
+import { DataListHeading } from "@fungi.computer/caps/components/data-list";
+import { RadioGroup, RadioGroupItem, RadioGroupCard, } from "@fungi.computer/caps/components/radio-group";
+import { Switch } from "@fungi.computer/caps/components/switch";
+import { Input } from "@fungi.computer/caps/components/input";
+import { Field } from "@fungi.computer/caps/components/field";
+import { renderStyles, renderStyleLabels, renderStyleSchema, resolveAppearance, } from "@fungi.computer/sprite";
+import { avatarCharacters, avatarEnvelopeSchema, } from "@fungi.computer/sprite/avatar";
+import { avatarCatalog } from "@fungi.computer/sprite-zdog/catalog";
+import { memberAvatarSchema, deriveAgentAvatar, } from "@fungi.computer/sprite-zdog/avatar";
+import { AvatarPreview } from "./AvatarPreview.js";
+const names = { mushroom: "Shiitake", cat: "Cat", burger: "Burger" };
+const swatches = [
+    ["Rose", "#f98284", "#ffe6c6"],
+    ["Peach", "#f6a55c", "#ffe9c9"],
+    ["Gold", "#f2d06b", "#fff6d1"],
+    ["Leaf", "#9bd47a", "#e6f8d8"],
+    ["Mint", "#5fc7b4", "#d9f6ef"],
+    ["Sky", "#6aaee8", "#dcefff"],
+    ["Lilac", "#9b8cf0", "#ebe6ff"],
+    ["Plum", "#e58bd6", "#fbe2f6"],
+    ["Clay", "#c98c6a", "#f6e2d4"],
+    ["Slate", "#8a8f9c", "#e3e5ea"],
+];
+const exampleNames = ["Gardener", "Scout", "Ledger", "Pip", "Moss"];
+/** Catalog-driven controls; the account owner handles saving and rollback. */
+export function AvatarPicker({ value, disabled, onChange, }) {
+    const { avatar, agentColors } = value;
+    const catalog = avatarCatalog[avatar.character];
+    const resolved = resolveAppearance(catalog.controls, avatar.appearance);
+    const change = (next) => {
+        onChange(memberAvatarSchema.parse({ ...value, avatar: { ...avatar, ...next } }));
+    };
+    const primarySlot = catalog.identitySlots[0];
+    const selectedSwatch = swatches.find(([, primary, secondary]) => catalog.identitySlots.every((slot, index) => resolved[slot] === (index === 0 ? primary : secondary)))?.[0] ?? "";
+    return (_jsxs("div", { className: "tourtois-avatar-picker", children: [_jsxs(Card, { className: "tourtois-avatar-preview", children: [_jsx(AvatarPreview, { avatar: avatar, className: "tourtois-avatar-large" }), _jsx("strong", { children: "Your avatar" }), _jsx("p", { children: "One look for your account, across Teams." })] }), _jsxs("fieldset", { disabled: disabled, className: "tourtois-avatar-controls", children: [_jsx("legend", { className: "sr-only", children: "Customize your avatar" }), _jsxs("section", { "aria-labelledby": "avatar-character", children: [_jsx(DataListHeading, { level: 3, id: "avatar-character", children: "Character" }), _jsx(RadioGroup, { "aria-labelledby": "avatar-character", className: "tourtois-avatar-characters", orientation: "horizontal", value: avatar.character, onValueChange: (raw) => {
+                                    const character = avatarEnvelopeSchema.shape.character.parse(raw);
+                                    change({ character, appearance: {}, expression: "normal" });
+                                }, children: avatarCharacters.map((character) => (_jsx(RadioGroupCard, { value: character, title: names[character], description: _jsx(AvatarPreview, { avatar: {
+                                            ...avatar,
+                                            character,
+                                            appearance: character === avatar.character ? avatar.appearance : {},
+                                            expression: "normal",
+                                        }, className: "tourtois-avatar-character-preview" }) }, character))) })] }), _jsxs("section", { "aria-labelledby": "avatar-colours", children: [_jsx(DataListHeading, { level: 3, id: "avatar-colours", children: avatar.character === "mushroom" ? "Cap colour" : "Colour" }), _jsx(RadioGroup, { "aria-labelledby": "avatar-colours", className: "tourtois-avatar-swatches", orientation: "horizontal", value: selectedSwatch, onValueChange: (name) => {
+                                    const swatch = swatches.find(([label]) => label === name);
+                                    if (!swatch)
+                                        return;
+                                    change({
+                                        appearance: {
+                                            ...avatar.appearance,
+                                            ...Object.fromEntries(catalog.identitySlots.map((slot, index) => [
+                                                slot,
+                                                swatch[index === 0 ? 1 : 2],
+                                            ])),
+                                        },
+                                    });
+                                }, children: swatches.map(([name, color]) => (_jsx("label", { title: name, className: "tourtois-avatar-swatch", style: { backgroundColor: color }, children: _jsx(RadioGroupItem, { value: name, "aria-label": name }) }, name))) }), _jsx("div", { className: "tourtois-avatar-custom-colours", children: catalog.identitySlots.map((slot) => {
+                                    const control = catalog.controls[slot];
+                                    if (control?.type !== "color")
+                                        return null;
+                                    return (_jsx(Field, { label: slot === primarySlot ? "Custom colour" : "Accent colour", children: _jsx(Input, { type: "color", defaultValue: String(resolved[slot]), onBlur: (event) => {
+                                                if (event.currentTarget.value !== resolved[slot])
+                                                    change({
+                                                        appearance: {
+                                                            ...avatar.appearance,
+                                                            [slot]: event.currentTarget.value,
+                                                        },
+                                                    });
+                                            } }) }, `${avatar.character}:${slot}:${String(resolved[slot])}`));
+                                }) })] }), _jsxs("section", { "aria-labelledby": "avatar-expression", children: [_jsx(DataListHeading, { level: 3, id: "avatar-expression", children: "Resting face" }), _jsx(RadioGroup, { "aria-labelledby": "avatar-expression", className: "tourtois-avatar-faces", orientation: "horizontal", value: avatar.expression, onValueChange: (expression) => {
+                                    change({ expression });
+                                }, children: catalog.expressions.map((expression) => (_jsx(RadioGroupCard, { value: expression, title: expression.charAt(0).toUpperCase() + expression.slice(1) }, expression))) })] }), _jsxs("section", { "aria-labelledby": "avatar-style", children: [_jsx(DataListHeading, { level: 3, id: "avatar-style", children: "Drawing style" }), _jsx(RadioGroup, { "aria-labelledby": "avatar-style", className: "tourtois-sprite-styles", orientation: "horizontal", value: avatar.renderStyle, onValueChange: (raw) => {
+                                    change({ renderStyle: renderStyleSchema.parse(raw) });
+                                }, children: renderStyles.map((renderStyle) => (_jsx(RadioGroupCard, { value: renderStyle, title: renderStyleLabels[renderStyle], description: _jsx(AvatarPreview, { avatar: { ...avatar, renderStyle }, className: "tourtois-sprite-style-preview" }) }, renderStyle))) })] }), _jsxs("section", { "aria-labelledby": "avatar-agents", children: [_jsx(DataListHeading, { level: 3, id: "avatar-agents", children: "Your new Agents" }), _jsx(Field, { label: "Give each Agent its own colour", children: _jsx(Switch, { checked: agentColors === "shift", onCheckedChange: (checked) => {
+                                        onChange({ ...value, agentColors: checked ? "shift" : "keep" });
+                                    } }) }), _jsx("p", { className: "tourtois-settings-lede", children: "A preview of your preference for new Agents. Existing Agents keep their look." }), _jsx("div", { className: "tourtois-avatar-agents", children: exampleNames.map((name) => (_jsxs("div", { children: [_jsx(AvatarPreview, { avatar: deriveAgentAvatar(avatar, agentColors, name), className: "tourtois-avatar-agent-preview" }), _jsx("span", { children: name })] }, name))) })] })] })] }));
+}