@fungi.computer/tourtois 0.0.0-stage → 0.1.0

package/dist/command-dialogs.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useMemo } from "react";
+import { CommandMenu } from "@fungi.computer/caps/blocks/command-menu";
+import { Combobox } from "@fungi.computer/caps/components/combobox";
+import { Dialog, DialogContent, DialogDescription, DialogTitle, } from "@fungi.computer/caps/components/dialog";
+import { appDirectorySourceId, } from "@fungi.computer/oyster/shell/command-host";
+import { leaderKeyMatches, leaderKeys, parseChord, } from "@fungi.computer/oyster/shell/keys";
+function isMac() {
+    return /Mac|iPhone|iPad/u.test(navigator.userAgent);
+}
+function appCommandId(surfaceId, commandId) {
+    return `${encodeURIComponent(surfaceId)}:${commandId}`;
+}
+function directoryCommandId(surfaceId, commandId) {
+    return `app-directory:${encodeURIComponent(surfaceId)}-${encodeURIComponent(commandId)}`;
+}
+function chordKey(key) {
+    switch (key) {
+        case "enter":
+            return "Enter";
+        case "escape":
+            return "Esc";
+        case "left":
+            return "←";
+        case "right":
+            return "→";
+        case "up":
+            return "↑";
+        case "down":
+            return "↓";
+        default:
+            return key.length === 1 ? key.toUpperCase() : key;
+    }
+}
+function commandKeycaps(commandId, active, mac, declared) {
+    const leader = leaderKeys(active).find((row) => row.commandId === commandId);
+    if (leader !== undefined)
+        return [mac ? "⌘ K" : "Ctrl K", "then", chordKey(leader.key)];
+    const binding = active.bindings.find((row) => row.commandId === commandId);
+    const declaredBinding = declared?.projections?.bindings?.values.find((value) => value.startsWith("<leader> "));
+    if (declaredBinding !== undefined)
+        return [mac ? "⌘ K" : "Ctrl K", "then", chordKey(declaredBinding.slice(9))];
+    if (binding === undefined)
+        return [];
+    const chord = parseChord(binding.binding, mac);
+    if (chord === null)
+        return [];
+    return [
+        ...(chord.meta ? ["⌘"] : []),
+        ...(chord.ctrl ? ["Ctrl"] : []),
+        ...(chord.alt ? ["Alt"] : []),
+        ...(chord.shift ? ["Shift"] : []),
+        chordKey(chord.key),
+    ];
+}
+function outcomeMessage(outcome) {
+    if (outcome.status === "handled")
+        return null;
+    if (outcome.status === "failed")
+        return "That command couldn’t finish. Please try again.";
+    if (outcome.status === "unavailable")
+        return outcome.reason;
+    return "That command is no longer available.";
+}
+/** Which-key list and `:` line for the focused window, drawn from Caps. */
+export function CommandDialogs({ host, state, focusedWindow, directoryApps, onStatus, finalFocus, container: dialog, renderIcon, }) {
+    const { active, keysOpen, setKeysOpen, commandLineOpen, setCommandLineOpen } = state;
+    const focusedTitle = focusedWindow?.launch.title ?? null;
+    const keys = useMemo(() => leaderKeys(active), [active]);
+    const groups = useMemo(() => {
+        const shell = keys.filter((row) => row.scope === undefined);
+        const app = keys.filter((row) => row.scope !== undefined);
+        return [
+            { label: "Workspace", rows: shell },
+            { label: focusedTitle ?? "Focused App", rows: app },
+        ].filter((group) => group.rows.length > 0);
+    }, [focusedTitle, keys]);
+    const palette = useMemo(() => active.palette.filter((command) => command.availability.status === "available"), [active]);
+    const focusedApp = focusedWindow
+        ? {
+            commands: focusedWindow.launch.commands,
+            name: focusedWindow.launch.title,
+            icon: focusedWindow.launch.icon,
+            roles: focusedWindow.launch.roles,
+            surfaceId: focusedWindow.launch.surfaceId,
+        }
+        : undefined;
+    const focusedCommandIds = new Set(focusedApp?.commands.flatMap((command) => [
+        appCommandId(focusedApp.surfaceId, command.id),
+        directoryCommandId(focusedApp.surfaceId, command.id),
+    ]) ?? []);
+    const isFocusedCommand = (command) => command.scope === focusedApp?.surfaceId ||
+        focusedCommandIds.has(command.commandId);
+    const orderedPaletteRows = [
+        ...palette.filter(isFocusedCommand),
+        ...palette.filter((command) => command.sourceId === appDirectorySourceId && !isFocusedCommand(command)),
+        ...palette.filter((command) => command.scope === undefined &&
+            command.sourceId !== appDirectorySourceId),
+    ];
+    const seenPaletteIds = new Set();
+    const paletteRows = orderedPaletteRows.filter((command) => {
+        if (seenPaletteIds.has(command.commandId))
+            return false;
+        seenPaletteIds.add(command.commandId);
+        return true;
+    });
+    const appByCommandId = new Map();
+    if (focusedApp)
+        for (const command of focusedApp.commands)
+            appByCommandId.set(appCommandId(focusedApp.surfaceId, command.id), focusedApp);
+    for (const app of directoryApps)
+        for (const command of app.commands)
+            appByCommandId.set(directoryCommandId(app.surfaceId, command.id), app);
+    const mac = isMac();
+    const run = useCallback((commandId, origin) => {
+        if (!host)
+            return;
+        void host.execute(commandId, { origin }).then((outcome) => {
+            const message = outcomeMessage(outcome);
+            if (message !== null)
+                onStatus(message);
+        });
+    }, [host, onStatus]);
+    const choose = useCallback((row) => {
+        setKeysOpen(false);
+        if (row.availability.status === "unavailable") {
+            onStatus(row.availability.reason);
+            return;
+        }
+        run(row.commandId, "keyboard");
+    }, [onStatus, run, setKeysOpen]);
+    useLayoutEffect(() => {
+        if (!keysOpen)
+            return;
+        // The leader sequence belongs to the shell as soon as it opens; Base UI
+        // focuses its dialog on the next animation frame, after a fast second key.
+        const owner = dialog?.ownerDocument ?? document;
+        const onKeyDown = (event) => {
+            const row = keys.find((candidate) => leaderKeyMatches(event, candidate.key));
+            if (row === undefined)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            choose(row);
+        };
+        owner.addEventListener("keydown", onKeyDown, true);
+        return () => {
+            owner.removeEventListener("keydown", onKeyDown, true);
+        };
+    }, [choose, dialog, keys, keysOpen]);
+    return (_jsxs(_Fragment, { children: [_jsx(Dialog, { open: keysOpen, onOpenChange: setKeysOpen, children: _jsxs(DialogContent, { container: dialog, className: "tourtois-command-palette", "data-tourtois-which-key": "", finalFocus: finalFocus, children: [_jsx(DialogTitle, { children: "Keys" }), _jsxs(DialogDescription, { children: ["Press a key, or ", isMac() ? "⌘K" : "Ctrl+K", " again for the command line."] }), groups.map((group) => (_jsxs("section", { "aria-label": group.label, children: [_jsx("p", { children: group.label }), _jsx(CommandMenu, { "aria-label": `${group.label} keys`, items: group.rows.map((row) => ({
+                                        id: row.commandId,
+                                        label: row.title,
+                                        shortcut: row.key,
+                                        disabled: row.availability.status === "unavailable",
+                                    })), onSelect: (id) => {
+                                        const row = group.rows.find((item) => item.commandId === id);
+                                        if (row)
+                                            choose(row);
+                                    } })] }, group.label)))] }) }), _jsx(Dialog, { open: commandLineOpen, onOpenChange: setCommandLineOpen, children: _jsxs(DialogContent, { container: dialog, className: "tourtois-command-palette", finalFocus: finalFocus, children: [_jsx(DialogTitle, { className: "sr-only", children: "Command palette" }), _jsxs("div", { className: "tourtois-command-palette-heading", children: [focusedApp
+                                    ? renderIcon(focusedApp.roles, focusedApp.icon ?? undefined)
+                                    : null, _jsx("span", { children: focusedTitle ?? "Commands" })] }), _jsx(Combobox, { activeTone: "primary", "aria-label": "Available commands", emptyMessage: "No matching commands", getKey: (command) => command.commandId, getLabel: (command) => command.title, getSearchText: (command) => {
+                                const app = appByCommandId.get(command.commandId);
+                                return `${command.title} ${command.category} ${command.description ?? ""} ${app?.name ?? ""} ${app ? `opens ${app.name}` : ""}`;
+                            }, groupBy: (command) => {
+                                if (isFocusedCommand(command))
+                                    return "";
+                                if (command.sourceId === appDirectorySourceId)
+                                    return "Other apps";
+                                return "Workspace";
+                            }, inputProps: { "aria-label": "Search commands" }, items: paletteRows, placeholder: ":", renderItem: (command) => (_jsxs("div", { className: "tourtois-command-palette-item", children: [_jsx("span", { className: "tourtois-command-palette-item-icon", children: (() => {
+                                            const app = appByCommandId.get(command.commandId);
+                                            if (app === undefined)
+                                                return null;
+                                            const declared = app.commands.find((entry) => (command.sourceId === appDirectorySourceId
+                                                ? directoryCommandId(app.surfaceId, entry.id)
+                                                : appCommandId(app.surfaceId, entry.id)) ===
+                                                command.commandId);
+                                            return renderIcon(app.roles, declared?.sigil ?? app.icon ?? undefined);
+                                        })() }), _jsx("span", { className: "tourtois-command-palette-item-title", children: command.title }), command.sourceId === appDirectorySourceId ? (appByCommandId.get(command.commandId)?.name !==
+                                        focusedApp?.name ? (_jsxs("small", { children: ["opens", " ", appByCommandId.get(command.commandId)?.name ?? "App"] })) : null) : null, (() => {
+                                        const app = appByCommandId.get(command.commandId);
+                                        const declared = app?.commands.find((entry) => [
+                                            appCommandId(app.surfaceId, entry.id),
+                                            directoryCommandId(app.surfaceId, entry.id),
+                                        ].includes(command.commandId));
+                                        return (_jsx("span", { className: "tourtois-command-palette-shortcut", children: commandKeycaps(command.commandId, active, mac, declared).map((key, index) => key === "then" ? (_jsx("span", { children: "then" }, `${key}-${String(index)}`)) : (_jsx("kbd", { className: "kbd kbd-sm", children: key }, `${key}-${String(index)}`))) }));
+                                    })()] })), value: null, onValueChange: (_value, command) => {
+                                if (!command)
+                                    return;
+                                setCommandLineOpen(false);
+                                run(command.commandId, "palette");
+                            } }), _jsxs("div", { className: "tourtois-command-palette-footer", children: [_jsx("span", { className: "tourtois-command-palette-close-hint", children: "Esc to close" }), _jsxs("span", { className: "tourtois-command-palette-leader-hint", children: [_jsx("kbd", { className: "kbd kbd-sm", children: mac ? "⌘ K" : "Ctrl K" }), _jsx("span", { children: "then" }), _jsx("kbd", { className: "kbd kbd-sm", children: "?" }), _jsx("span", { children: "for all keys" })] })] })] }) })] }));
+}

package/dist/desktop/Desktop.d.ts

@@ -0,0 +1,34 @@
+import type { AppOpenInput } from "@fungi.computer/agar/apps";
+import type { DesktopMethods } from "../desktop-api.js";
+import type { AppStorage } from "@fungi.computer/agar/storage";
+import type { AppBarItem } from "@fungi.computer/caps/blocks/app-bar";
+import type { WorkbenchDirectory } from "@fungi.computer/oyster/shell/workbench-directory";
+import { type DesktopLayoutClient } from "../desktop-client.js";
+import { type DesktopGillTransport } from "./row-gill.js";
+export type DesktopProps = {
+    phone: boolean;
+    apps: WorkbenchDirectory["apps"];
+    inboxSurfaceId: string | null;
+    launcherItems: readonly AppBarItem[];
+    needsUpdate: NonNullable<WorkbenchDirectory["needsUpdate"]>;
+    onAppSettings: (app: WorkbenchDirectory["apps"][number]) => void;
+    storage: AppStorage;
+    methods: DesktopMethods;
+    transport: DesktopGillTransport;
+    paused: boolean;
+    loading: boolean;
+    unavailable: boolean;
+    onRetryApps: () => void;
+    onAllApps: () => void;
+    onOpen: (target: AppOpenInput) => void;
+    computersForGill?: ((surfaceId: string) => readonly {
+        computerId: string;
+        name: string;
+    }[]) | undefined;
+    onOwner?: (owner: DesktopLayoutClient | null) => void;
+    /** Arrange mode is a Layout-menu command, so the Workbench owns it. */
+    editing: boolean;
+    onEditingChange: (editing: boolean) => void;
+};
+/** The App owns one canonical four-column layout, never breakpoint storage. */
+export declare function Desktop(props: DesktopProps): import("react/jsx-runtime").JSX.Element;

package/dist/desktop/Desktop.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { GillParamPicker } from "./gill-param-picker.js";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { arrangeBento, useMaosaicoBento } from "@fungi.computer/maosaico";
+import { Button } from "@fungi.computer/caps/components/button";
+import { IconButton } from "@fungi.computer/caps/components/icon-button";
+import { GripVertical, Trash2 } from "lucide-react";
+import { Select } from "@fungi.computer/caps/components/select";
+import { Badge } from "@fungi.computer/caps/components/badge";
+import { Sigil } from "@fungi.computer/sigils";
+import { DeclaredAppIcon } from "../app-icon.js";
+import { createDesktopLayoutClient, } from "../desktop-client.js";
+import { availableDesktopLayout, desktopPlacements, desktopBentoIntent, } from "../desktop-layout.js";
+import { LauncherGill } from "./launcher-gill.js";
+import { RowGill } from "./row-gill.js";
+const gap = 16;
+const rowHeight = 280;
+/** The App owns one canonical four-column layout, never breakpoint storage. */
+export function Desktop(props) {
+    const [owner, setOwner] = useState(null);
+    const [error, setError] = useState(null);
+    const [retry, setRetry] = useState(0);
+    useEffect(() => {
+        let retired = false;
+        let current;
+        setOwner(null);
+        void createDesktopLayoutClient({
+            storage: props.storage,
+            methods: props.methods,
+        })
+            .then((next) => {
+            if (retired) {
+                next.close();
+                return;
+            }
+            current = next;
+            setError(null);
+            setOwner(next);
+            props.onOwner?.(next);
+        })
+            .catch((cause) => {
+            console.error("Desktop arrangement read failed", cause);
+            if (!retired)
+                setError("Your desktop could not be loaded.");
+        });
+        return () => {
+            retired = true;
+            props.onOwner?.(null);
+            current?.close();
+        };
+    }, [
+        props.methods,
+        props.storage,
+        props.apps,
+        props.inboxSurfaceId,
+        props.onOwner,
+        retry,
+    ]);
+    return (_jsxs("div", { className: "tourtois-desktop", "data-desktop-bento": true, children: [error ? (_jsxs("p", { role: "alert", children: [error, " ", _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                            setRetry((value) => value + 1);
+                        }, children: "Retry" })] })) : null, !owner && !error ? _jsx("p", { role: "status", children: "Loading desktop\u2026" }) : null, owner ? _jsx(ArrangedDesktop, { ...props, owner: owner }) : null] }));
+}
+function ArrangedDesktop({ owner, ...props }) {
+    const snapshot = useSyncExternalStore(owner.subscribe, owner.get, owner.get);
+    const catalog = snapshot.widgets;
+    const visibleItems = availableDesktopLayout(snapshot.layout, catalog).items;
+    const { editing, onEditingChange } = props;
+    const [configuration, setConfiguration] = useState(null);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const stage = useRef(null);
+    const [width, setWidth] = useState(0);
+    const [contentHeights, setContentHeights] = useState(new Map());
+    useEffect(() => {
+        const node = stage.current;
+        if (!node)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            setWidth(entry?.contentRect.width ?? 0);
+        });
+        observer.observe(node);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    const columns = props.phone ? 1 : 4;
+    useEffect(() => {
+        setContentHeights((previous) => {
+            const current = new Map([...previous].filter(([id]) => snapshot.layout.items.some((item) => item.id === id)));
+            return current.size === previous.size ? previous : current;
+        });
+    }, [snapshot.layout.items]);
+    const projected = desktopPlacements(snapshot.layout)
+        .filter((cell) => visibleItems.some((item) => item.id === cell.id))
+        .map((cell) => {
+        const item = snapshot.layout.items.find((item) => item.id === cell.id);
+        const kind = catalog.find((gill) => gill.surfaceId === item?.surfaceId && gill.gillId === item.gillId)?.kind;
+        // Launcher M needs two icon rows on phones. This is presentation only:
+        // canonical sizes/cells still come from the four-column storage owner.
+        return props.phone && item?.size === "M" && kind === "launcher"
+            ? { ...cell, h: 2 }
+            : cell;
+    });
+    const placements = arrangeBento(projected, columns);
+    const save = async (method, input, scope = "member") => {
+        setSaving(true);
+        try {
+            const result = await owner.mutate(method, {
+                scope,
+                basedOn: scope === "team" ? snapshot.teamRevision : snapshot.memberRevision,
+                ...input,
+            });
+            setError(result.kind === "accepted"
+                ? null
+                : result.code === "conflict"
+                    ? "The desktop changed elsewhere. Try your change again."
+                    : result.code === "too_large"
+                        ? "This desktop arrangement is too large to save. Remove some widgets or Launcher preferences and try again."
+                        : result.code === "quota_exceeded"
+                            ? "The App's storage quota is full. Free some storage before saving again."
+                            : `Desktop change refused: ${result.code}.`);
+            return result.kind === "accepted";
+        }
+        catch (cause) {
+            console.error("Desktop arrangement update failed", cause);
+            setError("Your desktop change could not be confirmed.");
+            return false;
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const rowHeights = Array.from({
+        length: Math.max(0, ...placements.map((item) => item.row + item.h)),
+    }, (_, row) => Math.max(0, ...placements
+        .filter((item) => item.row <= row && row < item.row + item.h)
+        .map((item) => {
+        const declaration = snapshot.layout.items.find((entry) => entry.id === item.id);
+        const isLauncher = declaration !== undefined &&
+            catalog.some((gill) => gill.kind === "launcher" &&
+                gill.surfaceId === declaration.surfaceId &&
+                gill.gillId === declaration.gillId);
+        const canonical = item.h * rowHeight + (item.h - 1) * gap;
+        const natural = contentHeights.get(item.id) ?? canonical;
+        const height = isLauncher
+            ? props.phone
+                ? natural
+                : Math.max(canonical, natural)
+            : props.phone
+                ? Math.min(natural, canonical)
+                : canonical;
+        return Math.max(0, height - (item.h - 1) * gap) / item.h;
+    })));
+    const binding = useMaosaicoBento({
+        placements,
+        columns,
+        width,
+        rowHeight,
+        rowHeights,
+        gap,
+        enabled: editing && !saving,
+        onChange: (ops) => {
+            // Maosaico emits one completed drag or keyboard intent per change.
+            const op = ops[0];
+            const intent = op
+                ? desktopBentoIntent(snapshot.layout, placements, op)
+                : null;
+            if (intent?.kind === "move")
+                void save("layout.move", { id: intent.id, to: intent.to });
+            else if (intent?.kind === "resize")
+                void save("layout.resize", { id: intent.id, size: intent.size });
+        },
+    });
+    const frames = [...binding.frames.values()];
+    const height = Math.max(0, ...frames.map((frame) => frame.y + frame.height));
+    const warnings = [
+        ...props.apps
+            .filter((app) => app.availability !== "available" ||
+            app.releaseId === null ||
+            app.surface === null)
+            .map((app) => ({
+            id: `unavailable:${app.surfaceId}`,
+            label: app.displayName ?? "App",
+            icon: _jsx(DeclaredAppIcon, { icon: app.icon }),
+            muted: true,
+            status: (_jsx(Badge, { role: "status", tone: "warning", variant: "quiet", size: "sm", children: "Unavailable \u00B7 Settings" })),
+            onSelect: () => {
+                props.onAppSettings(app);
+            },
+        })),
+        ...props.needsUpdate.map((app, index) => ({
+            id: `needs-update:${app.installationId ?? app.appId ?? String(index)}`,
+            label: app.displayName,
+            icon: _jsx(Sigil, { name: "installApps" }),
+            disabled: true,
+            status: (_jsx(Badge, { role: "status", tone: "warning", variant: "quiet", size: "sm", children: "Needs update" })),
+            onSelect: () => undefined,
+        })),
+    ];
+    return (_jsxs(_Fragment, { children: [snapshot.refreshFailure ? (_jsx("p", { role: "alert", children: snapshot.refreshFailure.message })) : null, editing ? (_jsxs("div", { className: "tourtois-desktop-controls", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                            onEditingChange(false);
+                        }, children: "Done arranging" }), _jsx("div", { className: "tourtois-desktop-add-gill", children: _jsxs(Select, { "aria-label": "Add widget", value: "", disabled: saving, onChange: (event) => {
+                                const gill = catalog[Number(event.currentTarget.value)];
+                                const size = gill?.sizes[0];
+                                if (gill && size && (gill.params?.length ?? 0) > 0)
+                                    setConfiguration({ gill });
+                                else if (gill && size)
+                                    void save("layout.place", {
+                                        surfaceId: gill.surfaceId,
+                                        gillId: gill.gillId,
+                                        size,
+                                    });
+                            }, children: [_jsx("option", { value: "", children: "Add widget\u2026" }), catalog.map((gill, index) => (_jsx("option", { value: index, children: gill.title }, `${gill.surfaceId}:${gill.gillId}`)))] }) }), _jsx(Button, { size: "sm", variant: "ghost", disabled: saving, onClick: () => {
+                            void save("layout.reset", {});
+                        }, children: "Reset to Team default" }), snapshot.canWriteTeam ? (_jsx(Button, { size: "sm", variant: "ghost", disabled: saving, onClick: () => {
+                            void save("layout.set", { layout: snapshot.layout }, "team");
+                        }, children: "Save as Team default" })) : null] })) : null, configuration ? (_jsx(GillParamPicker, { gill: configuration.gill, initialParams: snapshot.layout.items.find((item) => item.id === configuration.itemId)?.params, computers: props.computersForGill?.(configuration.gill.surfaceId) ?? [], transport: props.transport, editing: configuration.itemId !== undefined, onClose: () => {
+                    setConfiguration(null);
+                }, onSave: (params) => {
+                    if (configuration.itemId !== undefined)
+                        return save("layout.set", {
+                            layout: {
+                                ...snapshot.layout,
+                                items: snapshot.layout.items.map((item) => item.id === configuration.itemId
+                                    ? { ...item, params }
+                                    : item),
+                            },
+                        });
+                    const size = configuration.gill.sizes[0];
+                    return size
+                        ? save("layout.place", {
+                            surfaceId: configuration.gill.surfaceId,
+                            gillId: configuration.gill.gillId,
+                            size,
+                            params,
+                        })
+                        : Promise.resolve(false);
+                } }, configuration.itemId ??
+                `${configuration.gill.surfaceId}:${configuration.gill.gillId}`)) : null, snapshot.notice ? _jsx("p", { role: "alert", children: snapshot.notice }) : null, error ? _jsx("p", { role: "alert", children: error }) : null, _jsx("div", { ref: stage, className: "tourtois-desktop-stage", style: { height }, "data-desktop-columns": columns, "data-preview": binding.preview, children: visibleItems.map((item) => {
+                    const frame = binding.frames.get(item.id);
+                    const gill = catalog.find((gill) => gill.surfaceId === item.surfaceId && gill.gillId === item.gillId);
+                    if (!frame || !gill)
+                        return null;
+                    const controls = editing ? (_jsxs("div", { className: "tourtois-gill-controls", children: [_jsx(IconButton, { size: "responsive", "aria-label": `Move ${gill.title}`, title: `Move ${gill.title}`, icon: _jsx(GripVertical, {}), ...binding.bind(item.id, "move") }), _jsx("div", { className: "join tourtois-gill-sizes", role: "group", "aria-label": `Size of ${gill.title}`, children: gill.sizes.map((size) => (_jsx(IconButton, { className: "join-item", size: "xs", icon: size, "aria-label": `Size ${size === "S" ? "small" : size === "M" ? "medium" : "large"}`, title: `${gill.title}: ${size}`, variant: size === item.size ? "secondary" : "ghost", "aria-pressed": size === item.size, disabled: saving, onClick: () => {
+                                        void save("layout.resize", { id: item.id, size });
+                                    } }, size))) }), _jsx(IconButton, { size: "responsive", "aria-label": `Remove ${gill.title}`, title: `Remove ${gill.title}`, icon: _jsx(Trash2, {}), disabled: saving, onClick: () => {
+                                    void save("layout.remove", { id: item.id });
+                                } })] })) : undefined;
+                    const onContentHeight = (height) => {
+                        setContentHeights((previous) => previous.get(item.id) === height
+                            ? previous
+                            : new Map(previous).set(item.id, height));
+                    };
+                    const app = props.apps.find((app) => app.surfaceId === item.surfaceId);
+                    const declaration = app?.gills.find((declaration) => declaration.id === item.gillId);
+                    return (_jsx("div", { "data-desktop-gill": item.id, className: "tourtois-desktop-tile", style: {
+                            left: frame.x,
+                            top: frame.y,
+                            width: frame.width,
+                            height: frame.height,
+                        }, children: gill.kind === "launcher" ? (_jsx(LauncherGill, { items: props.launcherItems, size: item.size, onAllApps: props.onAllApps, loading: props.loading, unavailable: props.unavailable, onRetry: props.onRetryApps, warnings: warnings, preferences: snapshot.layout.launcher, onPreference: (id, state) => {
+                                void save("layout.launcher", { appId: id, state });
+                            }, editHandle: controls, onContentHeight: onContentHeight })) : declaration && app ? (_jsx(RowGill, { surfaceId: item.surfaceId, appHeader: {
+                                name: app.displayName ?? "App",
+                                icon: _jsx(DeclaredAppIcon, { icon: app.icon }),
+                            }, declaration: declaration, params: item.params, size: item.size, paused: props.paused, transport: props.transport, onOpen: (target) => {
+                                props.onOpen({
+                                    appId: app.appId,
+                                    intent: { kind: "navigate", params: target.params },
+                                });
+                            }, onConfigure: () => {
+                                setConfiguration({ gill, itemId: item.id });
+                            }, launch: props.launcherItems.find((app) => app.id === `app:${item.surfaceId}`), editHandle: controls, onContentHeight: onContentHeight }, JSON.stringify(item.params ?? {}))) : null }, item.id));
+                }) })] }));
+}

package/dist/desktop/consent.d.ts

@@ -0,0 +1,4 @@
+import { type WorkbenchDesktopSettings } from "@fungi.computer/oyster/shell/workbench";
+import type { DesktopLayoutClient } from "../desktop-client.js";
+/** Only the host's member-consent UI invokes this admitted dashboard callback. */
+export declare function desktopSettingsHandler(current: () => DesktopLayoutClient | null): WorkbenchDesktopSettings;

package/dist/desktop/consent.js

@@ -0,0 +1,64 @@
+import { AppError } from "@fungi.computer/agar";
+import { desktopGillAdditionSchema, desktopGillSelectionSchema, } from "@fungi.computer/oyster/shell/workbench";
+/** Only the host's member-consent UI invokes this admitted dashboard callback. */
+export function desktopSettingsHandler(current) {
+    const owner = () => {
+        const value = current();
+        if (!value)
+            throw new AppError("Your desktop is still loading. Try again.", {
+                code: "HOST_FAILURE",
+                retryable: true,
+            });
+        return value;
+    };
+    const matching = (value, request) => value
+        .get()
+        .layout.items.filter((item) => item.surfaceId === request.surfaceId &&
+        item.gillId === request.gillId);
+    const confirmed = (result) => {
+        if (result.kind === "rejected")
+            throw new AppError(result.code === "conflict"
+                ? "Your desktop changed elsewhere. Try again."
+                : result.code === "too_many"
+                    ? "Your desktop is full. Remove a widget before adding another."
+                    : "This widget cannot be changed on your desktop. Check its availability and try again.", { code: "INVALID_ARGUMENT", retryable: result.code === "conflict" });
+    };
+    return {
+        readGill: (input) => {
+            const request = desktopGillSelectionSchema.parse(input);
+            return Promise.resolve(matching(owner(), request).map((item) => item.size));
+        },
+        async addGill(input) {
+            const request = desktopGillAdditionSchema.parse(input);
+            const value = owner();
+            if (matching(value, request).length)
+                throw new AppError("This widget is already on your desktop.", {
+                    code: "INVALID_ARGUMENT",
+                    retryable: false,
+                });
+            confirmed(await value.mutate("layout.place", {
+                scope: "member",
+                basedOn: value.get().memberRevision,
+                ...request,
+            }));
+            // The method commits through the host storage owner and refreshes layout.get.
+        },
+        async removeGill(input) {
+            const request = desktopGillSelectionSchema.parse(input);
+            const value = owner();
+            const items = matching(value, request);
+            if (!items.length)
+                return;
+            confirmed(await value.mutate("layout.set", {
+                scope: "member",
+                basedOn: value.get().memberRevision,
+                layout: {
+                    ...value.get().layout,
+                    items: value
+                        .get()
+                        .layout.items.filter((item) => !items.some((selected) => selected.id === item.id)),
+                },
+            }));
+        },
+    };
+}

package/dist/desktop/gill-frame.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import type { AppGillDesktopSize } from "@fungi.computer/gills";
+/** Host-owned presentation; content, edit gestures and size selection stay with the caller. */
+export declare function GillFrame({ title, appHeader, size, editHandle, children, onContentHeight, }: {
+    title: string;
+    appHeader?: Readonly<{
+        name: string;
+        icon: ReactNode;
+    }> | undefined;
+    size: AppGillDesktopSize;
+    editHandle?: ReactNode;
+    children: ReactNode;
+    onContentHeight?: ((height: number) => void) | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/desktop/gill-frame.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { SectionCard } from "@fungi.computer/caps/blocks/section-card";
+/** Host-owned presentation; content, edit gestures and size selection stay with the caller. */
+export function GillFrame({ title, appHeader, size, editHandle, children, onContentHeight, }) {
+    const card = useRef(null);
+    const content = useRef(null);
+    const report = useRef(onContentHeight);
+    report.current = onContentHeight;
+    const measuring = onContentHeight !== undefined;
+    useLayoutEffect(() => {
+        if (!measuring)
+            return;
+        const root = card.current;
+        const body = content.current;
+        const header = root?.firstElementChild;
+        const section = body?.parentElement?.parentElement;
+        if (!root || !body || !header || !section)
+            return;
+        const measure = () => {
+            const rootStyle = getComputedStyle(root);
+            const sectionStyle = getComputedStyle(section);
+            const height = header.getBoundingClientRect().height +
+                body.getBoundingClientRect().height +
+                parseFloat(sectionStyle.paddingTop) +
+                parseFloat(sectionStyle.paddingBottom) +
+                parseFloat(rootStyle.borderTopWidth) +
+                parseFloat(rootStyle.borderBottomWidth);
+            if (Number.isFinite(height) && height > 0)
+                report.current?.(Math.ceil(height));
+        };
+        const observer = new ResizeObserver(measure);
+        observer.observe(body);
+        observer.observe(header);
+        measure();
+        return () => {
+            observer.disconnect();
+        };
+    }, [measuring]);
+    return (_jsx(SectionCard, { ref: card, className: "tourtois-gill-frame", heading: appHeader ? (_jsxs("span", { className: "flex min-w-0 items-center gap-sm", children: [_jsx("span", { className: "inline-flex size-5 shrink-0 [&_:is(svg,.caps-monogram)]:size-5", children: appHeader.icon }), _jsx("span", { className: "truncate", children: appHeader.name })] })) : (title), description: appHeader ? title : undefined, "data-gill-size": size, actions: editHandle, children: _jsx("div", { className: "tourtois-gill-body", children: _jsx("div", { ref: content, className: "tourtois-gill-content", children: children }) }) }));
+}

package/dist/desktop/gill-param-picker.d.ts

@@ -0,0 +1,15 @@
+import { type DesktopGill } from "../desktop-layout.js";
+import type { DesktopGillTransport } from "./row-gill.js";
+/** Chooses placement context through the Gill's own declaration and host inventory. */
+export declare function GillParamPicker({ gill, initialParams, computers, transport, editing, onSave, onClose, }: {
+    gill: DesktopGill;
+    initialParams?: Readonly<Record<string, string>> | undefined;
+    computers: readonly Readonly<{
+        computerId: string;
+        name: string;
+    }>[];
+    transport: DesktopGillTransport;
+    editing: boolean;
+    onSave: (params: Record<string, string>) => Promise<boolean>;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;