@vuu-ui/vuu-shell 3.3.11 → 4.0.0-alpha.1

package/src/workspace-management/WorkspaceHost.js

@@ -0,0 +1,194 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GridLayout, GridLayoutProvider } from "@heswell/grid-layout";
+import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
+import { useCallback, useRef, useState } from "react";
+import { WorkspacePersistentStateProvider, WorkspacePersistentStateStore } from "./WorkspacePersistentState.js";
+import { emptyWorkspaceSnapshot, useWorkspace } from "./WorkspaceProvider.js";
+import { WorkspaceStartPanel } from "./WorkspaceStartPanel.js";
+import { WORKSPACE_SNAPSHOT_VERSION } from "./workspace-schemas.js";
+const WorkspaceGrid = ({ active, controller })=>{
+    const [isEmpty, setIsEmpty] = useState(0 === controller.snapshot.layout.components.length);
+    const handleDocumentError = useCallback((error)=>{
+        throw new Error(`Invalid workspace document at ${error.path}: ${error.message}`);
+    }, []);
+    const handleDocumentChange = useCallback((document, change)=>{
+        setIsEmpty(0 === document.components.length);
+        controller.handleDocumentChange(document, change);
+    }, [
+        controller
+    ]);
+    return /*#__PURE__*/ jsx("section", {
+        "aria-hidden": !active,
+        "aria-labelledby": `${controller.instanceId}-tab`,
+        className: "vuuWorkspaceHost-workspace",
+        "data-workspace-instance-id": controller.instanceId,
+        hidden: !active,
+        id: controller.instanceId,
+        role: "tabpanel",
+        children: /*#__PURE__*/ jsx(WorkspacePersistentStateProvider, {
+            store: controller.persistentState,
+            children: /*#__PURE__*/ jsx(GridLayoutProvider, {
+                componentRenderers: controller.renderers,
+                document: controller.snapshot.layout,
+                documentController: controller.documentController,
+                onDocumentChange: handleDocumentChange,
+                onDocumentError: handleDocumentError,
+                settingsCodecs: controller.settingsCodecs,
+                children: /*#__PURE__*/ jsx(GridLayout, {
+                    id: controller.snapshot.layout.layout.id,
+                    placeholderContent: isEmpty ? /*#__PURE__*/ jsx(WorkspaceStartPanel, {}) : void 0
+                })
+            })
+        })
+    });
+};
+const EmptyWorkspaceDropTarget = ()=>{
+    const { componentRenderers, createWorkspaceFromSnapshot, settingsCodecs } = useWorkspace();
+    const creating = useRef(false);
+    const [creationPending, setCreationPending] = useState(false);
+    const [generation, setGeneration] = useState(0);
+    const [persistentState, setPersistentState] = useState(()=>new WorkspacePersistentStateStore());
+    const handleDocumentError = useCallback((error)=>{
+        throw new Error(`Invalid empty workspace document at ${error.path}: ${error.message}`);
+    }, []);
+    const handleDocumentChange = useCallback((document)=>{
+        if (creating.current || 0 === document.components.length) return;
+        creating.current = true;
+        setCreationPending(true);
+        createWorkspaceFromSnapshot({
+            componentState: persistentState.getSnapshot(),
+            layout: document,
+            version: WORKSPACE_SNAPSHOT_VERSION
+        }, "Untitled").catch(()=>{
+            creating.current = false;
+            setCreationPending(false);
+            setPersistentState(new WorkspacePersistentStateStore());
+            setGeneration((current)=>current + 1);
+        });
+    }, [
+        createWorkspaceFromSnapshot,
+        persistentState
+    ]);
+    if (!componentRenderers || !settingsCodecs) return /*#__PURE__*/ jsx("div", {
+        className: "vuuWorkspaceHost-state",
+        role: "alert",
+        children: "Workspace component registries are not configured."
+    });
+    if (creationPending) return /*#__PURE__*/ jsx("div", {
+        className: "vuuWorkspaceHost-empty",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "vuuWorkspaceHost-state",
+            role: "status",
+            children: "Creating workspace…"
+        })
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: "vuuWorkspaceHost-empty",
+        children: /*#__PURE__*/ jsx(WorkspacePersistentStateProvider, {
+            store: persistentState,
+            children: /*#__PURE__*/ jsx(GridLayoutProvider, {
+                componentRenderers: componentRenderers,
+                onDocumentChange: handleDocumentChange,
+                onDocumentError: handleDocumentError,
+                settingsCodecs: settingsCodecs,
+                children: /*#__PURE__*/ jsx(GridLayout, {
+                    className: "vuuWorkspaceHost-emptyGrid",
+                    colsAndRows: {
+                        cols: [
+                            "1fr"
+                        ],
+                        rows: [
+                            "1fr"
+                        ]
+                    },
+                    id: emptyWorkspaceSnapshot.layout.layout.id,
+                    placeholderContent: /*#__PURE__*/ jsx(WorkspaceStartPanel, {})
+                })
+            }, generation)
+        })
+    });
+};
+const WorkspaceHost = ()=>{
+    const { activeWorkspaceInstanceId, closeWorkspace, controllers, createWorkspaceFromSnapshot, error, renameWorkspace, selectWorkspace, status } = useWorkspace();
+    const [tabRevision, setTabRevision] = useState(0);
+    const activeWorkspaceIndex = controllers.findIndex(({ instanceId })=>instanceId === activeWorkspaceInstanceId);
+    const handleActiveChange = useCallback((tabIndex)=>{
+        const controller = controllers[tabIndex];
+        if (controller) selectWorkspace(controller.instanceId);
+    }, [
+        controllers,
+        selectWorkspace
+    ]);
+    const handleCloseTab = useCallback((tabIndex)=>{
+        const controller = controllers[tabIndex];
+        if (controller) closeWorkspace(controller.instanceId);
+    }, [
+        closeWorkspace,
+        controllers
+    ]);
+    const handleAddTab = useCallback(()=>{
+        const titles = new Set(controllers.map(({ name })=>name));
+        let suffix = 1;
+        let title = "Untitled";
+        while(titles.has(title)){
+            suffix += 1;
+            title = `Untitled ${suffix}`;
+        }
+        createWorkspaceFromSnapshot(emptyWorkspaceSnapshot, title).catch(()=>void 0);
+    }, [
+        controllers,
+        createWorkspaceFromSnapshot
+    ]);
+    const handleExitEditMode = useCallback((originalTitle, title, _allowDeactivation, tabIndex)=>{
+        const controller = controllers[tabIndex];
+        if (controller && title !== originalTitle) renameWorkspace(controller.instanceId, title).catch(()=>{
+            setTabRevision((revision)=>revision + 1);
+        });
+    }, [
+        controllers,
+        renameWorkspace
+    ]);
+    if ("loading" === status) return /*#__PURE__*/ jsx("div", {
+        className: "vuuWorkspaceHost-state",
+        role: "status",
+        children: "Loading workspaces…"
+    });
+    if ("error" === status) return /*#__PURE__*/ jsx("div", {
+        className: "vuuWorkspaceHost-state",
+        role: "alert",
+        children: error?.message ?? "Unable to load workspaces"
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: "vuuWorkspaceHost vuu-workspace-tabs",
+        children: [
+            /*#__PURE__*/ jsx(Tabstrip, {
+                activeTabIndex: activeWorkspaceIndex,
+                allowAddTab: true,
+                allowCloseTab: true,
+                allowRenameTab: true,
+                animateSelectionThumb: false,
+                "aria-label": "Workspace Tabs",
+                className: "vuuTabHeader",
+                onActiveChange: handleActiveChange,
+                onAddTab: handleAddTab,
+                onCloseTab: handleCloseTab,
+                onExitEditMode: handleExitEditMode,
+                variant: "primary",
+                children: controllers.map((controller)=>/*#__PURE__*/ jsx(Tab, {
+                        ariaControls: controller.instanceId,
+                        id: `${controller.instanceId}-tab`,
+                        label: controller.name,
+                        onClose: ()=>void closeWorkspace(controller.instanceId)
+                    }, `${controller.instanceId}-${tabRevision}`))
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "vuuWorkspaceHost-content",
+                children: "empty" === status ? /*#__PURE__*/ jsx(EmptyWorkspaceDropTarget, {}) : controllers.map((controller)=>/*#__PURE__*/ jsx(WorkspaceGrid, {
+                        active: controller.instanceId === activeWorkspaceInstanceId,
+                        controller: controller
+                    }, controller.instanceId))
+            })
+        ]
+    });
+};
+export { WorkspaceHost };

package/src/workspace-management/WorkspacePersistentState.js

@@ -0,0 +1,67 @@
+import { createContext, createElement, useContext, useSyncExternalStore } from "react";
+import { cloneWorkspaceValue } from "./workspace-schemas.js";
+class WorkspacePersistentStateStore {
+    #state;
+    #listeners = new Set();
+    constructor(initialState = {}){
+        this.#state = Object.freeze(cloneWorkspaceValue(initialState));
+    }
+    getSnapshot = ()=>this.#state;
+    subscribe = (listener)=>{
+        this.#listeners.add(listener);
+        return ()=>this.#listeners.delete(listener);
+    };
+    get(componentInstanceId) {
+        const value = this.#state[componentInstanceId];
+        return void 0 === value ? void 0 : cloneWorkspaceValue(value);
+    }
+    update(componentInstanceId, update) {
+        if (!componentInstanceId) throw new Error("componentInstanceId must not be empty");
+        const next = "function" == typeof update ? update(this.get(componentInstanceId)) : update;
+        const captured = cloneWorkspaceValue(next);
+        if (!captured.componentType || !Number.isInteger(captured.schemaVersion) || captured.schemaVersion < 1) throw new Error("Component persistent state metadata is invalid");
+        this.#state = Object.freeze({
+            ...this.#state,
+            [componentInstanceId]: captured
+        });
+        this.#emit();
+    }
+    purge(componentInstanceId) {
+        if (void 0 === componentInstanceId) {
+            if (Object.keys(this.#state).length > 0) {
+                this.#state = Object.freeze({});
+                this.#emit();
+            }
+            return;
+        }
+        if (void 0 !== this.#state[componentInstanceId]) {
+            const { [componentInstanceId]: removed, ...remaining } = this.#state;
+            this.#state = Object.freeze(remaining);
+            this.#emit();
+        }
+    }
+    #emit() {
+        this.#listeners.forEach((listener)=>{
+            listener();
+        });
+    }
+}
+const WorkspacePersistentStateContext = /*#__PURE__*/ createContext(null);
+const WorkspacePersistentStateProvider = ({ children, store })=>/*#__PURE__*/ createElement(WorkspacePersistentStateContext.Provider, {
+        value: store
+    }, children);
+const useWorkspacePersistentStateStore = ()=>{
+    const store = useContext(WorkspacePersistentStateContext);
+    if (!store) throw new Error("useWorkspacePersistentStateStore requires WorkspacePersistentStateProvider");
+    return store;
+};
+const useComponentPersistentState = (componentInstanceId)=>{
+    const store = useWorkspacePersistentStateStore();
+    const state = useSyncExternalStore(store.subscribe, ()=>store.getSnapshot()[componentInstanceId], ()=>store.getSnapshot()[componentInstanceId]);
+    return [
+        state,
+        (update)=>store.update(componentInstanceId, update),
+        ()=>store.purge(componentInstanceId)
+    ];
+};
+export { WorkspacePersistentStateProvider, WorkspacePersistentStateStore, useComponentPersistentState, useWorkspacePersistentStateStore };