@fungi.computer/tourtois 0.0.0-stage → 0.0.1

package/dist/AppPane.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton } from "@fungi.computer/caps/components/icon-button";
+import { AppStatusBar, StatusBarPicker, } from "@fungi.computer/caps/blocks/app-status-bar";
+import { Sigil } from "@fungi.computer/sigils";
+import { WindowActions, WindowBody, WindowFrame, WindowHeader, } from "@fungi.computer/caps/components/window";
+import { Settings, ShieldCheck } from "lucide-react";
+import { WindowStatusItem } from "./status-bar.js";
+import { useLayer, useMaosaicoItem, useMaosaicoLayout, } from "@fungi.computer/maosaico";
+import { AppError, } from "@fungi.computer/agar";
+import { useEffect, useRef, useState } from "react";
+import { AppIcon } from "./app-icon.js";
+import { useWindowMotion } from "./use-window-motion.js";
+import { backHint } from "./shell-commands.js";
+import { createAppWindowManager, } from "./app-windows.js";
+import { launchComputerId } from "./app-launch.js";
+const windowStatusLabel = (projection) => {
+    if (projection.status === "error")
+        return `${projection.launch.title} unavailable`;
+    if (projection.status === "loading")
+        return `${projection.launch.title} opening…`;
+    return projection.launch.title;
+};
+/** The focused window's App-level settings; its Computer lives in its status bar. */
+export function FocusedWindowControls({ app, onOpenSettings, onOpenPermissions, projection, }) {
+    if (!app)
+        return null;
+    return (_jsxs("div", { className: "tourtois-focused-controls", role: "group", "aria-label": `${projection.launch.title} settings`, children: [_jsx(IconButton, { size: "responsive", "aria-label": `Permissions for ${projection.launch.title}`, title: "App permissions", icon: _jsx(ShieldCheck, {}), onClick: onOpenPermissions }), _jsx(IconButton, { size: "responsive", "aria-label": `Settings for ${projection.launch.title}`, title: "App settings", icon: _jsx(Settings, {}), onClick: onOpenSettings })] }));
+}
+export function AppPane({ projection, icon, manager, onError, index, focusWindow, afterHide, onBack, onSelectComputer, }) {
+    const containerRef = useRef(null);
+    const [computerPickerOpen, setComputerPickerOpen] = useState(false);
+    useEffect(() => {
+        if (projection.launch.computers === undefined)
+            return;
+        return manager.registerComputerChoice(projection.windowId, () => {
+            setComputerPickerOpen(true);
+        });
+    }, [
+        manager,
+        projection.windowId,
+        projection.generation,
+        projection.launch.computers,
+    ]);
+    useEffect(() => {
+        if (containerRef.current)
+            containerRef.current.inert = projection.status !== "ready";
+    }, [projection.status]);
+    const binding = useMaosaicoItem({
+        id: projection.windowId,
+        frame: {
+            x: 24 + index * 40,
+            y: 24 + index * 32,
+            width: 600,
+            height: 480,
+        },
+        minima: { width: 320, height: 360 },
+    }, { participating: projection.status !== "minimized" });
+    const layout = useMaosaicoLayout();
+    const element = useWindowMotion(binding, layout.interacting);
+    const zoomed = layout.zoomedId === projection.windowId;
+    const zoom = () => {
+        layout.zoom(zoomed ? null : projection.windowId);
+        focusWindow(projection.windowId);
+    };
+    const close = () => {
+        void manager
+            .close(projection.windowId)
+            .then(() => {
+            // The App may veto a close to protect unsaved work.
+            if (!manager
+                .read()
+                .windows.some((item) => item.windowId === projection.windowId))
+                afterHide(projection.windowId);
+        })
+            .catch((cause) => {
+            console.error("App workbench operation failed", cause);
+            onError("App could not be closed.");
+        });
+    };
+    useEffect(() => {
+        const parent = containerRef.current;
+        if (!parent)
+            return;
+        parent.appendChild(projection.container);
+        manager.attach(projection.windowId);
+        return () => {
+            projection.container.remove();
+        };
+    }, [manager, projection.container, projection.windowId]);
+    return (_jsxs(WindowFrame, { ref: element, className: "tourtois-pane tourtois-app-pane", "aria-label": projection.launch.title, active: binding.active, floating: layout.mode === "floating" && !zoomed, "data-window-id": projection.windowId, "data-app-id": projection.launch.appId, "data-installation-id": projection.launch.installationId ?? undefined, "data-surface-id": projection.launch.surfaceId, "data-release-id": projection.launch.releaseId, hidden: projection.status === "minimized" || !binding.visible, onFocusCapture: () => {
+            binding.focus();
+        }, onPointerDownCapture: () => {
+            binding.focus();
+        }, 
+        // The mouse back button over this window's chrome is its App's Back;
+        // inside the App, Agar maps it the same way.
+        onMouseUp: (event) => {
+            if (event.button !== 3 || projection.navigation?.canGoBack !== true)
+                return;
+            event.preventDefault();
+            onBack(projection.windowId);
+        }, style: binding.stackingStyle, children: [_jsx(WindowHeader, { title: projection.launch.title, ...(projection.navigation?.title === undefined
+                    ? {}
+                    : { subtitle: projection.navigation.title }), density: layout.mode === "tiled" ? "compact" : "regular", icon: _jsx(AppIcon, { roles: projection.launch.roles, icon: icon }), ...(projection.navigation?.canGoBack === true
+                    ? {
+                        back: {
+                            label: `Back in ${projection.launch.title}`,
+                            hint: backHint(),
+                            onBack: () => {
+                                onBack(projection.windowId);
+                            },
+                        },
+                    }
+                    : {}), handleProps: {
+                    ...binding.props,
+                    onClick: binding.focus,
+                    onDoubleClick: zoom,
+                }, actions: _jsx(_Fragment, { children: _jsx(WindowActions, { title: projection.launch.title, maximized: zoomed, ...(layout.mode === "tiled" &&
+                            layout.order[0] !== projection.windowId
+                            ? {
+                                onPromote: () => {
+                                    const main = layout.order[0];
+                                    if (main)
+                                        layout.swap(projection.windowId, main);
+                                    focusWindow(projection.windowId);
+                                },
+                            }
+                            : {}), onToggleMaximize: zoom, onMinimize: () => {
+                            void manager
+                                .minimize(projection.windowId)
+                                .then(() => {
+                                afterHide(projection.windowId);
+                            })
+                                .catch((cause) => {
+                                console.error("App workbench operation failed", cause);
+                                onError("App could not be minimized.");
+                            });
+                        }, onClose: close }) }) }), projection.status === "loading" ? (_jsxs("div", { className: "tourtois-app-loading", role: "status", children: [_jsx(AppIcon, { roles: projection.launch.roles, icon: icon }), _jsxs("div", { children: [_jsxs("strong", { children: ["Opening ", projection.launch.title, "\u2026"] }), _jsx("span", { children: "Preparing this App for your workspace." })] })] })) : null, projection.status === "error" &&
+                !(projection.error instanceof AppError &&
+                    projection.error.code === "DISCONNECTED") ? (_jsx("p", { className: "tourtois-window-status", role: "status", children: windowStatusLabel(projection) })) : null, _jsx(WindowBody, { ref: containerRef, className: "tourtois-pane-body", hidden: projection.status === "error" }), _jsx(WindowStatusBar, { projection: projection, computerPickerOpen: computerPickerOpen, onComputerPickerOpenChange: setComputerPickerOpen, onSelectComputer: (computerId) => {
+                    onSelectComputer(projection.windowId, computerId);
+                }, surface: () => containerRef.current, onAction: (action) => {
+                    void manager
+                        .activateStatus(projection.windowId, action)
+                        .catch((cause) => {
+                        console.error("App workbench operation failed", cause);
+                        onError("App could not handle that action.");
+                    });
+                } })] }));
+}
+/**
+ * One window's status bar, owned by the shell like its title bar: the
+ * window's Computer first (only the person changes it, here), then the items
+ * the App declared as data. The shell renders every item with Caps pieces and
+ * hands the person's use back to the App. A window with neither has no bar.
+ */
+export function WindowStatusBar({ projection, onSelectComputer, onAction, surface, computerPickerOpen, onComputerPickerOpenChange, }) {
+    const popover = useLayer("popover");
+    const { computers, title } = projection.launch;
+    const items = projection.statusItems;
+    if (computers === undefined && items.length === 0)
+        return null;
+    const anchorFor = (key) => {
+        const origin = surface?.()?.getBoundingClientRect();
+        if (!origin)
+            return undefined;
+        const rect = key.getBoundingClientRect();
+        return {
+            start: Math.max(0, rect.left - origin.left),
+            width: Math.max(0, rect.width),
+        };
+    };
+    const render = (item) => (_jsx(WindowStatusItem, { item: item, container: popover, onAction: onAction, anchorFor: anchorFor }, item.id));
+    const end = items.filter((item) => item.end === true);
+    const start = items.filter((item) => item.end !== true);
+    return (_jsx(AppStatusBar, { className: "tourtois-window-status-bar", "aria-label": `${title} status`, attachment: computers === undefined ? undefined : (_jsx(StatusBarPicker, { ...(computerPickerOpen === undefined
+                ? {}
+                : { open: computerPickerOpen }), ...(onComputerPickerOpenChange === undefined
+                ? {}
+                : { onOpenChange: onComputerPickerOpenChange }), noun: "Computer", pluralNoun: "Computers", accessibleLabel: `Choose Computer for ${title}`, icon: _jsx(Sigil, { name: "computer", size: 16 }), options: computers.map((computer) => ({
+                id: computer.computerId,
+                label: computer.name,
+            })), value: launchComputerId(projection.launch.href), emptyMessage: "No Computers are granted to this App", disabled: projection.status === "loading", onSelect: onSelectComputer })), end: end.length === 0 ? undefined : end.map(render), children: start.length === 0 ? undefined : start.map(render) }));
+}

package/dist/AppWorkbench.d.ts

@@ -0,0 +1,44 @@
+import type { DesktopMethods } from "./desktop-api.js";
+import type { AppOpenInput } from "@fungi.computer/agar/apps";
+import { type AppBarItem } from "@fungi.computer/caps/blocks/app-bar";
+import { type ReactNode, type RefObject } from "react";
+import type { WorkbenchDirectory } from "@fungi.computer/oyster/shell/workbench-directory";
+import { type ComputerOption } from "./app-launch.js";
+import type { PlatformControls } from "./platform-controls.js";
+import type { AppStorage } from "@fungi.computer/agar/storage";
+import type { DesktopGillTransport } from "./desktop/row-gill.js";
+import type { SettingsLocation } from "./settings-routes.js";
+export type AppWorkbenchProps = Readonly<{
+    teamId: string;
+    teamName: string;
+    initialComputerId: string | null;
+    computers: readonly ComputerOption[];
+    computersUnavailable: boolean;
+    paneLayerRef: RefObject<HTMLDivElement>;
+    phone: boolean;
+    extraPanes?: (context: {
+        activeId: string | null;
+        order: readonly string[];
+        focus: (id: string) => void;
+    }) => ReactNode;
+    initialFocusId?: string;
+    onLayoutChange?: ((tiled: boolean) => void) | undefined;
+    extraLaunchers?: readonly AppBarItem[];
+    settingsLaunchers?: readonly Readonly<{
+        id: string;
+        label: string;
+        icon?: ReactNode;
+        location: SettingsLocation;
+    }>[];
+    systemMenuItems?: ReactNode;
+    /** Read the Team's App directory through the host's `directory()` port. */
+    directoryReader: () => Promise<WorkbenchDirectory>;
+    /** Take the host address's App-open handoff once, instead of this URL's. */
+    takeAppOpenRequest?: () => Promise<AppOpenInput | null>;
+    /** Team administration, rendered by the host with the owner's authority. */
+    platform: PlatformControls;
+    desktopStorage: AppStorage;
+    desktopMethods: DesktopMethods;
+    gills: DesktopGillTransport;
+}>;
+export declare function AppWorkbench({ paneLayerRef, phone, teamId, teamName, initialComputerId, computers, computersUnavailable, extraPanes, initialFocusId, onLayoutChange, extraLaunchers, settingsLaunchers, systemMenuItems, directoryReader, takeAppOpenRequest, platform, desktopStorage, desktopMethods, gills, }: AppWorkbenchProps): import("react/jsx-runtime").JSX.Element;