@vuu-ui/vuu-shell 3.3.17 → 4.0.0-alpha.10

package/src/left-nav/LeftNav.js

@@ -1,17 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { VuuLogo } from "@vuu-ui/vuu-icons";
-import { Stack, useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
-import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
+import { GridLayout, GridLayoutItem } from "@vuu-ui/grid-layout";
+import { IconButton, Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
 import { hasFilterTableFeatureProps } from "@vuu-ui/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import clsx from "clsx";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { FeatureList } from "../feature-list/index.js";
-import { LayoutList } from "../workspace-management/index.js";
+import { LayoutList, useWorkspace } from "../workspace-management/index.js";
 import LeftNav from "./LeftNav.css";
 import { useFeatures } from "../feature-and-layout-provider/index.js";
-import { Button } from "@salt-ds/core";
 const classBase = "vuuLeftNav";
 const getDisplayStatus = (activeTabIndex, expanded)=>{
     if (0 === activeTabIndex) return expanded ? "menu-full" : "menu-icons";
@@ -32,8 +31,7 @@ const byModule = (f1, f2)=>{
     throw Error("Invalid tableFeature");
 };
 const LeftNav_LeftNav = (props)=>{
-    const dispatch = useLayoutProviderDispatch();
-    const { "data-path": path, defaultExpanded = true, defaultActiveTabIndex = 0, onActiveChange, onTogglePrimaryMenu, sizeCollapsed = 80, sizeContent = 300, sizeExpanded = 240, style: styleProp, ...htmlAttributes } = props;
+    const { "data-path": path, defaultExpanded = true, defaultActiveTabIndex = 0, onActiveChange, onTogglePrimaryMenu, onWidthChange, sizeCollapsed = 80, sizeContent = 300, sizeExpanded = 240, style: styleProp, ...htmlAttributes } = props;
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-left-nav",
@@ -41,20 +39,45 @@ const LeftNav_LeftNav = (props)=>{
         window: targetWindow
     });
     const { dynamicFeatures = [], tableFeatures = [] } = useFeatures();
+    const { getApplicationSetting, scopeIdentity, setApplicationSetting, status } = useWorkspace();
+    const storedActiveTabIndex = getApplicationSetting("leftNav.activeTabIndex");
+    const storedExpanded = getApplicationSetting("leftNav.expanded");
     const [navState, setNavState] = useState({
-        activeTabIndex: defaultActiveTabIndex,
-        expanded: defaultExpanded
+        activeTabIndex: "number" == typeof storedActiveTabIndex ? storedActiveTabIndex : defaultActiveTabIndex,
+        expanded: "boolean" == typeof storedExpanded ? storedExpanded : defaultExpanded,
+        scopeIdentity: "loading" === status ? "" : scopeIdentity
     });
+    const visibleNavState = "loading" !== status && navState.scopeIdentity === scopeIdentity ? navState : {
+        activeTabIndex: defaultActiveTabIndex,
+        expanded: defaultExpanded,
+        scopeIdentity: ""
+    };
+    useEffect(()=>{
+        "loading" === status ? setNavState({
+            activeTabIndex: defaultActiveTabIndex,
+            expanded: defaultExpanded,
+            scopeIdentity: ""
+        }) : setNavState({
+            activeTabIndex: "number" == typeof storedActiveTabIndex ? storedActiveTabIndex : defaultActiveTabIndex,
+            expanded: "boolean" == typeof storedExpanded ? storedExpanded : defaultExpanded,
+            scopeIdentity
+        });
+    }, [
+        defaultActiveTabIndex,
+        defaultExpanded,
+        scopeIdentity,
+        status,
+        storedActiveTabIndex,
+        storedExpanded
+    ]);
     const tableFeaturesByGroup = useMemo(()=>tableFeatures?.sort(byModule).reduce((acc, filterTableFeature)=>{
             if (!hasFilterTableFeatureProps(filterTableFeature)) return acc;
             {
                 const { table } = filterTableFeature.ComponentProps.tableSchema;
                 const key = `${table.module} Tables`;
                 if (!acc[key]) acc[key] = [];
-                return {
-                    ...acc,
-                    [key]: acc[key].concat(filterTableFeature)
-                };
+                acc[key].push(filterTableFeature);
+                return acc;
             }
         }, {}), [
         tableFeatures
@@ -67,48 +90,50 @@ const LeftNav_LeftNav = (props)=>{
         sizeContent,
         sizeExpanded
     ]);
+    useEffect(()=>{
+        onWidthChange?.(getFullWidth(visibleNavState.activeTabIndex, visibleNavState.expanded));
+    }, [
+        getFullWidth,
+        onWidthChange,
+        visibleNavState
+    ]);
     const handleTabSelection = useCallback((activeTabIndex)=>{
-        const { activeTabIndex: currentIndex, expanded } = navState;
+        const { activeTabIndex: currentIndex, expanded } = visibleNavState;
         const newState = {
             activeTabIndex,
-            expanded
+            expanded,
+            scopeIdentity
         };
         setNavState(newState);
-        if (0 === activeTabIndex || 0 === currentIndex) {
-            const width = getFullWidth(activeTabIndex, expanded);
-            dispatch({
-                type: "layout-resize",
-                path: "#vuu-side-panel",
-                size: width
-            });
-        }
+        getFullWidth(activeTabIndex, expanded);
+        setApplicationSetting("leftNav.activeTabIndex", activeTabIndex);
         onActiveChange?.(activeTabIndex);
     }, [
-        dispatch,
         getFullWidth,
-        navState,
-        onActiveChange
+        onActiveChange,
+        scopeIdentity,
+        setApplicationSetting,
+        visibleNavState
     ]);
-    const displayStatus = getDisplayStatus(navState.activeTabIndex, navState.expanded);
+    const displayStatus = getDisplayStatus(visibleNavState.activeTabIndex, visibleNavState.expanded);
     const toggleExpanded = useCallback(()=>{
-        const { activeTabIndex, expanded } = navState;
+        const { activeTabIndex, expanded } = visibleNavState;
         const primaryMenuExpanded = !expanded;
         const newState = {
             activeTabIndex,
-            expanded: primaryMenuExpanded
+            expanded: primaryMenuExpanded,
+            scopeIdentity
         };
         setNavState(newState);
-        dispatch({
-            type: "layout-resize",
-            path: "#vuu-side-panel",
-            size: getFullWidth(activeTabIndex, primaryMenuExpanded)
-        });
+        getFullWidth(activeTabIndex, primaryMenuExpanded);
+        setApplicationSetting("leftNav.expanded", primaryMenuExpanded);
         onTogglePrimaryMenu?.(primaryMenuExpanded);
     }, [
-        dispatch,
         getFullWidth,
-        navState,
-        onTogglePrimaryMenu
+        onTogglePrimaryMenu,
+        scopeIdentity,
+        setApplicationSetting,
+        visibleNavState
     ]);
     const style = {
         ...styleProp,
@@ -116,79 +141,93 @@ const LeftNav_LeftNav = (props)=>{
         "--nav-menu-expanded-width": `${sizeExpanded}px`,
         "--nav-menu-content-width": `${sizeContent}px`
     };
-    return /*#__PURE__*/ jsxs("div", {
+    return /*#__PURE__*/ jsx("div", {
         ...htmlAttributes,
         className: clsx(classBase, `${classBase}-${displayStatus}`),
         style: style,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: clsx(`${classBase}-menu-primary`),
-                "data-mode": "dark",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "vuuLeftNav-logo",
-                        children: /*#__PURE__*/ jsx(VuuLogo, {})
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: `${classBase}-main`,
-                        children: /*#__PURE__*/ jsxs(Tabstrip, {
-                            activeTabIndex: navState.activeTabIndex,
-                            animateSelectionThumb: false,
-                            className: `${classBase}-Tabstrip`,
-                            onActiveChange: handleTabSelection,
-                            orientation: "vertical",
-                            children: [
-                                /*#__PURE__*/ jsx(Tab, {
-                                    "data-icon": "demo",
-                                    label: "DEMO"
-                                }),
-                                /*#__PURE__*/ jsx(Tab, {
-                                    "data-icon": "features",
-                                    label: "VUU FEATURES"
-                                }),
-                                /*#__PURE__*/ jsx(Tab, {
-                                    "data-icon": "tables",
-                                    label: "VUU TABLES"
+        children: /*#__PURE__*/ jsxs(GridLayout, {
+            colsAndRows: {
+                cols: [
+                    `${visibleNavState.expanded ? sizeExpanded : sizeCollapsed}px`,
+                    `${0 === visibleNavState.activeTabIndex ? 0 : sizeContent}px`
+                ],
+                rows: [
+                    "1fr"
+                ]
+            },
+            id: "vuu-left-nav-grid",
+            children: [
+                /*#__PURE__*/ jsxs(GridLayoutItem, {
+                    className: clsx(`${classBase}-menu-primary`),
+                    "data-mode": "dark",
+                    id: "vuu-left-nav-primary",
+                    style: {
+                        gridArea: "1/1/2/2"
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "vuuLeftNav-logo",
+                            children: /*#__PURE__*/ jsx(VuuLogo, {})
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-main`,
+                            children: /*#__PURE__*/ jsxs(Tabstrip, {
+                                activeTabIndex: visibleNavState.activeTabIndex,
+                                animateSelectionThumb: false,
+                                className: `${classBase}-Tabstrip`,
+                                onActiveChange: handleTabSelection,
+                                orientation: "vertical",
+                                children: [
+                                    /*#__PURE__*/ jsx(Tab, {
+                                        "data-icon": "demo",
+                                        label: "DEMO"
+                                    }),
+                                    /*#__PURE__*/ jsx(Tab, {
+                                        "data-icon": "features",
+                                        label: "VUU FEATURES"
+                                    }),
+                                    /*#__PURE__*/ jsx(Tab, {
+                                        "data-icon": "tables",
+                                        label: "VUU TABLES"
+                                    }),
+                                    /*#__PURE__*/ jsx(Tab, {
+                                        "data-icon": "layouts",
+                                        label: "MY LAYOUTS"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "vuuLeftNav-buttonBar",
+                            children: /*#__PURE__*/ jsx(IconButton, {
+                                className: clsx("vuuLeftNav-toggleButton", {
+                                    "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
+                                    "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
                                 }),
-                                /*#__PURE__*/ jsx(Tab, {
-                                    "data-icon": "layouts",
-                                    label: "MY LAYOUTS"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: "vuuLeftNav-buttonBar",
-                        children: /*#__PURE__*/ jsx(Button, {
-                            className: clsx("vuuLeftNav-toggleButton", {
-                                "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
-                                "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
-                            }),
-                            "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
-                            onClick: toggleExpanded
+                                icon: displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
+                                onClick: toggleExpanded
+                            })
                         })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs(Stack, {
-                active: navState.activeTabIndex - 1,
-                className: `${classBase}-menu-secondary`,
-                showTabs: false,
-                children: [
-                    /*#__PURE__*/ jsx(FeatureList, {
+                    ]
+                }),
+                /*#__PURE__*/ jsx(GridLayoutItem, {
+                    className: `${classBase}-menu-secondary`,
+                    id: "vuu-left-nav-secondary",
+                    style: {
+                        gridArea: "1/2/2/3"
+                    },
+                    children: 1 === visibleNavState.activeTabIndex ? /*#__PURE__*/ jsx(FeatureList, {
                         features: dynamicFeatures,
                         title: "VUU FEATURES"
-                    }),
-                    /*#__PURE__*/ jsx(FeatureList, {
+                    }) : 2 === visibleNavState.activeTabIndex ? /*#__PURE__*/ jsx(FeatureList, {
                         features: tableFeaturesByGroup,
                         title: "VUU TABLES"
-                    }),
-                    /*#__PURE__*/ jsx(LayoutList, {
+                    }) : 3 === visibleNavState.activeTabIndex ? /*#__PURE__*/ jsx(LayoutList, {
                         title: "MY LAYOUTS"
-                    })
-                ]
-            })
-        ]
+                    }) : null
+                })
+            ]
+        }, `${visibleNavState.expanded}-${visibleNavState.activeTabIndex}`)
     });
 };
 export { LeftNav_LeftNav as LeftNav };

package/src/module-registry/getRegisteredModules.js

@@ -0,0 +1,12 @@
+const getRegisteredModules = async (registryUrl, bearerToken)=>{
+    console.log(`getRegisteredModules ${registryUrl}`);
+    const response = await fetch(registryUrl, {
+        cache: "no-store",
+        headers: {
+            Authorization: `Bearer ${bearerToken}`
+        }
+    });
+    if (!response.ok) throw Error("bad return from module registry");
+    return await response.json();
+};
+export { getRegisteredModules };

package/src/persistence-manager/LocalWorkspacePersistenceService.js

@@ -0,0 +1,129 @@
+import { WorkspaceValidationError, cloneWorkspaceValue, validateApplicationSessionV1, validateNamedWorkspaceDefinitionV1, validateNamedWorkspaceMetadataV1, validateWorkspaceSnapshotRecordV1, workspaceMetadata } from "../workspace-management/workspace-schemas.js";
+import { WorkspacePersistenceError } from "./WorkspacePersistenceService.js";
+const validateScope = (scope)=>{
+    for (const [name, value] of Object.entries(scope))if (!value) throw new WorkspacePersistenceError(`Persistence scope ${name} must not be empty`, "construct");
+};
+const requireId = (id, operation)=>{
+    if (!id) throw new WorkspacePersistenceError("Entity id must not be empty", operation);
+    return id;
+};
+class LocalWorkspacePersistenceService {
+    scope;
+    #storage;
+    #prefix;
+    constructor(scope, storage = localStorage){
+        validateScope(scope);
+        this.scope = Object.freeze({
+            ...scope
+        });
+        this.#storage = storage;
+        this.#prefix = [
+            "vuu-workspace",
+            scope.applicationNamespace,
+            scope.applicationId,
+            scope.userId
+        ].map(encodeURIComponent).join(":");
+    }
+    async loadApplicationSession() {
+        return this.#read("application-session", void 0, validateApplicationSessionV1);
+    }
+    async saveApplicationSession(session) {
+        this.#write("application-session", void 0, validateApplicationSessionV1(session));
+    }
+    async deleteApplicationSession() {
+        this.#remove("application-session");
+    }
+    async listWorkspaceSnapshots() {
+        return this.#ids("snapshot").map((id)=>{
+            const snapshot = this.#read("snapshot", id, validateWorkspaceSnapshotRecordV1);
+            if (!snapshot) throw new WorkspacePersistenceError(`Snapshot index references missing workspace "${id}"`, "listWorkspaceSnapshots");
+            return snapshot;
+        });
+    }
+    async loadWorkspaceSnapshot(workspaceInstanceId) {
+        return this.#read("snapshot", requireId(workspaceInstanceId, "loadWorkspaceSnapshot"), validateWorkspaceSnapshotRecordV1);
+    }
+    async saveWorkspaceSnapshot(snapshot) {
+        const validated = validateWorkspaceSnapshotRecordV1(snapshot);
+        this.#write("snapshot", validated.workspaceInstanceId, validated);
+        this.#addId("snapshot", validated.workspaceInstanceId);
+    }
+    async deleteWorkspaceSnapshot(workspaceInstanceId) {
+        const id = requireId(workspaceInstanceId, "deleteWorkspaceSnapshot");
+        this.#remove("snapshot", id);
+        this.#deleteId("snapshot", id);
+    }
+    async listNamedWorkspaceMetadata() {
+        return this.#ids("definition").map((id)=>{
+            const metadata = this.#read("definition-metadata", id, validateNamedWorkspaceMetadataV1);
+            if (!metadata) throw new WorkspacePersistenceError(`Definition index references missing metadata "${id}"`, "listNamedWorkspaceMetadata");
+            return metadata;
+        });
+    }
+    async loadNamedWorkspaceDefinition(id) {
+        return this.#read("definition", requireId(id, "loadNamedWorkspaceDefinition"), validateNamedWorkspaceDefinitionV1);
+    }
+    async saveNamedWorkspaceDefinition(definition) {
+        const validated = validateNamedWorkspaceDefinitionV1(definition);
+        this.#write("definition", validated.id, validated);
+        this.#write("definition-metadata", validated.id, workspaceMetadata(validated));
+        this.#addId("definition", validated.id);
+    }
+    async deleteNamedWorkspaceDefinition(id) {
+        const validatedId = requireId(id, "deleteNamedWorkspaceDefinition");
+        this.#remove("definition", validatedId);
+        this.#remove("definition-metadata", validatedId);
+        this.#deleteId("definition", validatedId);
+    }
+    #key(entity, id) {
+        return `${this.#prefix}:${encodeURIComponent(entity)}${void 0 === id ? "" : `:${encodeURIComponent(id)}`}`;
+    }
+    #read(entity, id, validator) {
+        const stored = this.#storage.getItem(this.#key(entity, id));
+        if (null === stored) return;
+        let parsed;
+        try {
+            parsed = JSON.parse(stored);
+        } catch (error) {
+            if (!(error instanceof SyntaxError)) throw error;
+            throw new WorkspacePersistenceError(`Stored ${entity} is not valid JSON: ${error.message}`, `load:${entity}`);
+        }
+        try {
+            return cloneWorkspaceValue(validator(parsed));
+        } catch (error) {
+            if (!(error instanceof WorkspaceValidationError)) throw error;
+            throw new WorkspacePersistenceError(`Stored ${entity} is invalid: ${error.message}`, `load:${entity}`);
+        }
+    }
+    #write(entity, id, value) {
+        this.#storage.setItem(this.#key(entity, id), JSON.stringify(cloneWorkspaceValue(value)));
+    }
+    #remove(entity, id) {
+        this.#storage.removeItem(this.#key(entity, id));
+    }
+    #ids(entity) {
+        const stored = this.#storage.getItem(this.#key(`${entity}-index`));
+        if (null === stored) return [];
+        let parsed;
+        try {
+            parsed = JSON.parse(stored);
+        } catch (error) {
+            if (!(error instanceof SyntaxError)) throw error;
+            throw new WorkspacePersistenceError(`Stored ${entity} index is not valid JSON: ${error.message}`, `list:${entity}`);
+        }
+        if (!Array.isArray(parsed) || parsed.some((id)=>"string" != typeof id || !id) || new Set(parsed).size !== parsed.length) throw new WorkspacePersistenceError(`Stored ${entity} index is invalid`, `list:${entity}`);
+        return parsed;
+    }
+    #addId(entity, id) {
+        const ids = this.#ids(entity);
+        if (!ids.includes(id)) this.#storage.setItem(this.#key(`${entity}-index`), JSON.stringify([
+            ...ids,
+            id
+        ]));
+    }
+    #deleteId(entity, id) {
+        const ids = this.#ids(entity).filter((existing)=>existing !== id);
+        this.#storage.setItem(this.#key(`${entity}-index`), JSON.stringify(ids));
+    }
+}
+export { LocalWorkspacePersistenceService };

package/src/persistence-manager/PersistenceProvider.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 const PersistenceContext = /*#__PURE__*/ createContext({});
-const PersistenceProvider = ({ children, persistenceManager })=>/*#__PURE__*/ jsx(PersistenceContext.Provider, {
+const PersistenceProvider = ({ children, persistenceManager, workspacePersistenceService })=>/*#__PURE__*/ jsx(PersistenceContext.Provider, {
         value: {
-            persistenceManager
+            persistenceManager,
+            workspacePersistenceService
         },
         children: children
     });
@@ -11,4 +12,10 @@ const usePersistenceManager = ()=>{
     const { persistenceManager } = useContext(PersistenceContext);
     return persistenceManager;
 };
-export { PersistenceContext, PersistenceProvider, usePersistenceManager };
+const useWorkspacePersistenceService = ()=>{
+    const { workspacePersistenceService } = useContext(PersistenceContext);
+    if (!workspacePersistenceService) throw new Error("useWorkspacePersistenceService requires a configured PersistenceProvider");
+    return workspacePersistenceService;
+};
+const useOptionalWorkspacePersistenceService = ()=>useContext(PersistenceContext).workspacePersistenceService;
+export { PersistenceContext, PersistenceProvider, useOptionalWorkspacePersistenceService, usePersistenceManager, useWorkspacePersistenceService };

package/src/persistence-manager/RemoteWorkspacePersistenceService.js

@@ -0,0 +1,112 @@
+import { cloneWorkspaceValue, validateApplicationSessionV1, validateNamedWorkspaceDefinitionV1, validateNamedWorkspaceMetadataV1, validateWorkspaceSnapshotRecordV1 } from "../workspace-management/workspace-schemas.js";
+import { WorkspacePersistenceError } from "./WorkspacePersistenceService.js";
+const trimSlash = (value)=>value.replace(/\/+$/, "");
+const requireId = (id, operation)=>{
+    if (!id) throw new WorkspacePersistenceError("Entity id must not be empty", operation);
+    return encodeURIComponent(id);
+};
+class RemoteWorkspacePersistenceService {
+    scope;
+    #baseUrl;
+    #requestInit;
+    #requestInitProvider;
+    #fetch;
+    constructor(scope, { baseUrl, requestInit, requestInitProvider, fetch: fetchImplementation = globalThis.fetch }){
+        if (!scope.applicationNamespace || !scope.applicationId || !scope.userId || !baseUrl) throw new WorkspacePersistenceError("Remote persistence scope and base URL must not be empty", "construct");
+        this.scope = Object.freeze({
+            ...scope
+        });
+        this.#baseUrl = trimSlash(baseUrl);
+        this.#requestInit = requestInit;
+        this.#requestInitProvider = requestInitProvider;
+        this.#fetch = fetchImplementation;
+    }
+    async loadApplicationSession() {
+        return this.#optional("loadApplicationSession", "application-session", validateApplicationSessionV1);
+    }
+    async saveApplicationSession(session) {
+        await this.#void("saveApplicationSession", "application-session", "PUT", validateApplicationSessionV1(session));
+    }
+    async deleteApplicationSession() {
+        await this.#void("deleteApplicationSession", "application-session", "DELETE");
+    }
+    async listWorkspaceSnapshots() {
+        const value = await this.#json("listWorkspaceSnapshots", "snapshots");
+        if (!Array.isArray(value)) throw new WorkspacePersistenceError("Remote snapshot list response must be an array", "listWorkspaceSnapshots");
+        return value.map(validateWorkspaceSnapshotRecordV1);
+    }
+    async loadWorkspaceSnapshot(workspaceInstanceId) {
+        return this.#optional("loadWorkspaceSnapshot", `snapshots/${requireId(workspaceInstanceId, "loadWorkspaceSnapshot")}`, validateWorkspaceSnapshotRecordV1);
+    }
+    async saveWorkspaceSnapshot(snapshot) {
+        const validated = validateWorkspaceSnapshotRecordV1(snapshot);
+        await this.#void("saveWorkspaceSnapshot", `snapshots/${encodeURIComponent(validated.workspaceInstanceId)}`, "PUT", validated);
+    }
+    async deleteWorkspaceSnapshot(workspaceInstanceId) {
+        await this.#void("deleteWorkspaceSnapshot", `snapshots/${requireId(workspaceInstanceId, "deleteWorkspaceSnapshot")}`, "DELETE");
+    }
+    async listNamedWorkspaceMetadata() {
+        const value = await this.#json("listNamedWorkspaceMetadata", "named-workspaces");
+        if (!Array.isArray(value)) throw new WorkspacePersistenceError("Remote workspace metadata response must be an array", "listNamedWorkspaceMetadata");
+        return value.map(validateNamedWorkspaceMetadataV1);
+    }
+    async loadNamedWorkspaceDefinition(id) {
+        return this.#optional("loadNamedWorkspaceDefinition", `named-workspaces/${requireId(id, "loadNamedWorkspaceDefinition")}`, validateNamedWorkspaceDefinitionV1);
+    }
+    async saveNamedWorkspaceDefinition(definition) {
+        const validated = validateNamedWorkspaceDefinitionV1(definition);
+        await this.#void("saveNamedWorkspaceDefinition", `named-workspaces/${encodeURIComponent(validated.id)}`, "PUT", validated);
+    }
+    async deleteNamedWorkspaceDefinition(id) {
+        await this.#void("deleteNamedWorkspaceDefinition", `named-workspaces/${requireId(id, "deleteNamedWorkspaceDefinition")}`, "DELETE");
+    }
+    async #optional(operation, path, validator) {
+        const response = await this.#request(operation, path, "GET");
+        if (404 === response.status) return;
+        await this.#assertOk(response, operation);
+        return cloneWorkspaceValue(validator(await response.json()));
+    }
+    async #json(operation, path) {
+        const response = await this.#request(operation, path, "GET");
+        await this.#assertOk(response, operation);
+        return response.json();
+    }
+    async #void(operation, path, method, body) {
+        const response = await this.#request(operation, path, method, body);
+        await this.#assertOk(response, operation);
+    }
+    async #request(operation, path, method, body) {
+        const provided = this.#requestInitProvider ? await this.#requestInitProvider() : {};
+        const configured = this.#requestInit ?? {};
+        const headers = new Headers(configured.headers);
+        new Headers(provided.headers).forEach((value, key)=>{
+            headers.set(key, value);
+        });
+        headers.set("Accept", "application/json");
+        headers.set("X-Vuu-Application-Namespace", this.scope.applicationNamespace);
+        headers.set("X-Vuu-Application-Id", this.scope.applicationId);
+        headers.set("X-Vuu-User-Id", this.scope.userId);
+        if (void 0 !== body) headers.set("Content-Type", "application/json");
+        const scopePath = [
+            this.scope.applicationNamespace,
+            this.scope.applicationId,
+            this.scope.userId
+        ].map(encodeURIComponent).join("/");
+        try {
+            return await this.#fetch(`${this.#baseUrl}/${scopePath}/${path}`, {
+                ...configured,
+                ...provided,
+                headers,
+                method,
+                body: void 0 === body ? void 0 : JSON.stringify(cloneWorkspaceValue(body))
+            });
+        } catch (error) {
+            if (!(error instanceof Error)) throw error;
+            throw new WorkspacePersistenceError(error.message, operation);
+        }
+    }
+    async #assertOk(response, operation) {
+        if (!response.ok) throw new WorkspacePersistenceError(response.statusText || `Remote persistence request failed (${response.status})`, operation, response.status);
+    }
+}
+export { RemoteWorkspacePersistenceService };

package/src/persistence-manager/WorkspacePersistenceService.js

@@ -0,0 +1,9 @@
+class WorkspacePersistenceError extends Error {
+    operation;
+    status;
+    constructor(message, operation, status){
+        super(message), this.operation = operation, this.status = status;
+        this.name = "WorkspacePersistenceError";
+    }
+}
+export { WorkspacePersistenceError };

package/src/persistence-manager/index.js

@@ -3,3 +3,6 @@ export * from "./PersistenceProvider.js";
 export * from "./LocalPersistenceManager.js";
 export * from "./RemotePersistenceManager.js";
 export * from "./StaticPersistenceManager.js";
+export * from "./WorkspacePersistenceService.js";
+export * from "./LocalWorkspacePersistenceService.js";
+export * from "./RemoteWorkspacePersistenceService.js";

package/src/shell-layout-templates/context-panel/ApplicationSettingsContextPanel.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useWorkspace } from "../../workspace-management/index.js";
+import { ContextPanel } from "./ContextPanel.js";
+const ApplicationSettingsContextPanel = ()=>{
+    const { getApplicationSetting, setApplicationSetting } = useWorkspace();
+    const expanded = true === getApplicationSetting("applicationSettings.panelOpen");
+    const handleClose = useCallback(()=>{
+        setApplicationSetting("applicationSettings.panelOpen", false);
+    }, [
+        setApplicationSetting
+    ]);
+    return /*#__PURE__*/ jsx(ContextPanel, {
+        content: /*#__PURE__*/ jsx("div", {
+            children: "Application settings"
+        }),
+        expanded: expanded,
+        id: "vuu-context-panel",
+        onClose: handleClose,
+        overlay: true,
+        title: "Settings"
+    });
+};
+export { ApplicationSettingsContextPanel };