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

package/package.json

@@ -1,32 +1,35 @@
 {
-  "version": "3.3.11",
+  "version": "4.0.0-alpha.1",
   "description": "VUU UI Shell",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
+  "type": "module",
   "scripts": {
-    "build:dev": "node ../../scripts/run-build.mjs",
     "build": "node ../../scripts/run-build-rslib.ts",
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.3.11",
-    "@vuu-ui/vuu-protocol-types": "3.3.11",
-    "@vuu-ui/vuu-table-types": "3.3.11"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.1"
   },
   "dependencies": {
-    "@salt-ds/core": "1.54.1",
+    "@heswell/grid-layout": "4.0.0-alpha.1",
+    "@salt-ds/core": "1.67.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "3.3.11",
-    "@vuu-ui/vuu-data-react": "3.3.11",
-    "@vuu-ui/vuu-data-remote": "3.3.11",
-    "@vuu-ui/vuu-icons": "3.3.11",
-    "@vuu-ui/vuu-layout": "3.3.11",
-    "@vuu-ui/vuu-notifications": "3.3.11",
-    "@vuu-ui/vuu-table": "3.3.11",
-    "@vuu-ui/vuu-ui-controls": "3.3.11",
-    "@vuu-ui/vuu-utils": "3.3.11",
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-data-remote": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-icons": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-layout": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-notifications": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.1",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.1",
+    "@module-federation/enhanced": "2.8.0",
+    "@vuu-ui/core": "4.0.0-alpha.1",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {
@@ -48,6 +51,5 @@
   },
   "module": "./src/index.js",
   "name": "@vuu-ui/vuu-shell",
-  "type": "module",
   "types": "types/index.d.ts"
 }

package/src/app-header/AppHeader.js

@@ -2,13 +2,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { useLayoutOperation } from "@vuu-ui/vuu-layout";
-import { Toolbar } from "@vuu-ui/vuu-ui-controls";
-import clsx from "clsx";
-import { useCallback, useRef } from "react";
-import { usePersistenceManager } from "../persistence-manager/index.js";
+import { useLogout } from "@vuu-ui/core";
 import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
-import { useLogout } from "../application-provider/index.js";
+import { Toolbar, useContextPanel, useHideContextPanel } from "@vuu-ui/vuu-ui-controls";
+import clsx from "clsx";
+import { useCallback } from "react";
+import { useWorkspace } from "../workspace-management/index.js";
 import AppHeader from "./AppHeader.css";
 const classBase = "vuuAppHeader";
 const AppHeader_AppHeader = ({ className: classNameProp, themeMode: _, ...htmlAttributes })=>{
@@ -18,33 +17,45 @@ const AppHeader_AppHeader = ({ className: classNameProp, themeMode: _, ...htmlAt
         css: AppHeader,
         window: targetWindow
     });
-    const persistenceManager = usePersistenceManager();
-    const settingsButtonRef = useRef(null);
     const className = clsx(classBase, classNameProp);
     const logout = useLogout();
-    const { showComponentInContextPanel } = useLayoutOperation();
+    const { resetApplication, setApplicationSetting } = useWorkspace();
     const { showNotification } = useNotifications();
-    const handleReset = useCallback(()=>{
-        persistenceManager?.clearUserSettings();
-        showNotification({
-            animationType: "slide-out",
-            renderPostRefresh: true,
-            type: NotificationType.Toast,
-            header: "Success",
-            content: "Settings cleared",
-            status: "success"
-        });
-        location.reload();
+    const showContextPanel = useContextPanel();
+    const hideContextPanel = useHideContextPanel();
+    const handleReset = useCallback(async ()=>{
+        try {
+            await resetApplication();
+            hideContextPanel?.();
+            showNotification({
+                animationType: "slide-out",
+                renderPostRefresh: true,
+                type: NotificationType.Toast,
+                header: "Success",
+                content: "Settings and workspaces cleared",
+                status: "success"
+            });
+        } catch (cause) {
+            showNotification({
+                type: NotificationType.Toast,
+                header: "Reset failed",
+                content: cause instanceof Error ? cause.message : "Unable to reset",
+                status: "error"
+            });
+        }
     }, [
-        persistenceManager,
+        hideContextPanel,
+        resetApplication,
         showNotification
     ]);
     const handleShowSettings = useCallback(()=>{
-        showComponentInContextPanel({
-            type: "ApplicationSettings"
-        }, "Settings", ()=>settingsButtonRef.current?.focus());
+        setApplicationSetting("applicationSettings.panelOpen", true).catch(()=>void 0);
+        showContextPanel(/*#__PURE__*/ jsx("div", {
+            children: "Application settings"
+        }), "Settings");
     }, [
-        showComponentInContextPanel
+        setApplicationSetting,
+        showContextPanel
     ]);
     return /*#__PURE__*/ jsxs(Toolbar, {
         alignItems: "end",
@@ -75,7 +86,6 @@ const AppHeader_AppHeader = ({ className: classNameProp, themeMode: _, ...htmlAt
                 appearance: "transparent",
                 className: `${classBase}-menuItem`,
                 onClick: handleShowSettings,
-                ref: settingsButtonRef,
                 sentiment: "neutral",
                 children: [
                     "Settings ",

package/src/application-provider/ApplicationContext.js

@@ -1,9 +1,6 @@
 import { createContext } from "react";
-const Guest = {
-    username: "unknown"
-};
+console.log("%ccreate application context", "color:red;font-weight:bold;");
 const ApplicationContext = /*#__PURE__*/ createContext({
-    onUserSettingChanged: (propertyName)=>console.warn(`Cannot change setting '${propertyName}'.\nDid you forget to declare an ApplicationProvider ?`),
-    user: Guest
+    onUserSettingChanged: (propertyName)=>console.warn(`Cannot change setting '${propertyName}'.\nDid you forget to declare an ApplicationProvider ?`)
 });
 export { ApplicationContext };

package/src/application-provider/ApplicationProvider.js

@@ -1,77 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import { SaltProviderNext, useDensity, useTheme } from "@salt-ds/core";
-import { useCallback, useContext, useMemo, useState } from "react";
+import { useContext } from "react";
 import { ApplicationContext } from "./ApplicationContext.js";
-import { usePersistenceManager } from "../persistence-manager/index.js";
 const accentPurple = "purple";
-const getThemeMode = (mode = "light", userSettings)=>{
-    const themeMode = userSettings?.themeMode;
-    if ("light" === themeMode || "dark" === themeMode) return themeMode;
-    return mode;
-};
-const ApplicationProvider = ({ children, density: densityProp, logout, mode, theme, userSettingsSchema: userSettingsSchema, user })=>{
+const getThemeMode = (mode = "light")=>mode;
+const ApplicationProvider = ({ children, density: densityProp, logout, mode, theme })=>{
     const { mode: inheritedMode, theme: inheritedTheme } = useTheme();
     const density = useDensity(densityProp);
-    const persistenceManager = usePersistenceManager();
     const context = useContext(ApplicationContext);
-    const [userSettings, setSettings] = useState();
-    useMemo(async ()=>{
-        if (persistenceManager) {
-            const userSettings = await persistenceManager.getUserSettings();
-            setSettings(userSettings);
-        } else setSettings({});
-    }, [
-        persistenceManager
-    ]);
-    const onUserSettingChanged = useCallback((propertyName, value)=>{
-        setSettings((currentSettings)=>{
-            const newSettings = {
-                ...currentSettings,
-                [propertyName]: value
-            };
-            persistenceManager?.saveUserSettings(newSettings);
-            return newSettings;
-        });
-    }, [
-        persistenceManager
-    ]);
-    return userSettings ? /*#__PURE__*/ jsx(ApplicationContext.Provider, {
+    return /*#__PURE__*/ jsx(ApplicationContext.Provider, {
         value: {
             ...context,
-            logout,
-            onUserSettingChanged,
-            userSettings,
-            userSettingsSchema,
-            user: user ?? context.user
+            logout
         },
         children: /*#__PURE__*/ jsx(SaltProviderNext, {
             accent: accentPurple,
             corner: "rounded",
             theme: theme ?? inheritedTheme ?? "vuu-theme",
             density: density,
-            mode: getThemeMode(mode ?? inheritedMode, userSettings),
+            mode: getThemeMode(mode ?? inheritedMode),
             children: children
         })
-    }) : null;
-};
-const useApplicationUser = ()=>{
-    const { user } = useContext(ApplicationContext);
-    return user;
-};
-const useApplicationSettings = ()=>{
-    const { onUserSettingChanged, userSettings, userSettingsSchema } = useContext(ApplicationContext);
-    return {
-        onUserSettingChanged,
-        userSettings,
-        userSettingsSchema
-    };
-};
-const useUserSetting = ()=>{
-    const { userSettings } = useContext(ApplicationContext);
-    return userSettings;
-};
-const useLogout = ()=>{
-    const { logout } = useContext(ApplicationContext);
-    return logout;
+    });
 };
-export { ApplicationProvider, useApplicationSettings, useApplicationUser, useLogout, useUserSetting };
+export { ApplicationProvider };

package/src/feature/Feature.js

@@ -1,37 +1,6 @@
-import { jsx } from "react/jsx-runtime";
-import { importCSS, registerComponent } from "@vuu-ui/vuu-utils";
-import react, { useEffect } from "react";
-import { FeatureErrorBoundary } from "./FeatureErrorBoundary.js";
-const componentsMap = new Map();
-const useCachedFeature = (url)=>{
-    useEffect(()=>()=>{
-            componentsMap.delete(url);
-        }, [
-        url
-    ]);
-    if (!componentsMap.has(url)) componentsMap.set(url, /*#__PURE__*/ react.lazy(()=>import(/* @vite-ignore */ url)));
-    const lazyFeature = componentsMap.get(url);
-    if (lazyFeature) return lazyFeature;
-    throw Error(`Unable to load Lazy Feature at url ${url}`);
-};
-function RawFeature({ url, css, ComponentProps: params, ...props }) {
-    if (css) //   import(/* @vite-ignore */ css, { assert: { type: "css" } }).then(
-    importCSS(css).then((styleSheet)=>{
-        document.adoptedStyleSheets = [
-            ...document.adoptedStyleSheets,
-            styleSheet
-        ];
-    });
-    const LazyFeature = useCachedFeature(url);
-    return /*#__PURE__*/ jsx(FeatureErrorBoundary, {
-        url: url,
-        children: /*#__PURE__*/ jsx(LazyFeature, {
-            ...props,
-            ...params
-        })
-    });
-}
-const Feature = /*#__PURE__*/ react.memo(RawFeature);
+import { RemoteModule } from "@vuu-ui/core/portal";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+const Feature = RemoteModule;
 Feature.displayName = "Feature";
 registerComponent("Feature", Feature, "view");
 export { Feature };

package/src/feature/index.js

@@ -1 +1,2 @@
 export * from "./Feature.js";
+export { RemoteModule } from "@vuu-ui/core/portal";

package/src/feature-list/FeatureList.css.js

@@ -29,6 +29,30 @@ const css = `
   margin-top: 24px;
 }
 
+.vuuFeatureList-items {
+  flex-direction: column;
+  flex: none;
+  display: flex;
+}
+
+.vuuFeatureList-item {
+  --vuu-icon-color: var(--salt-content-secondary-foreground);
+  cursor: grab;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  flex: 0 0 24px;
+  min-height: 24px;
+  padding: 5px 4px 5px 12px;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 14px;
+  display: flex;
+}
+
+.vuuFeatureList-item:hover {
+  background: var(--salt-selectable-background-hover);
+}
+
 .vuuFeatureList-group {
   --vuuMeasuredContainer-flex: 0 0 auto;
   flex-direction: column;
@@ -38,11 +62,6 @@ const css = `
     flex: 0 0 32px;
     padding: 8px 0;
   }
-
-  & .vuuPalette {
-    flex: auto;
-    height: auto;
-  }
 }
 
 .vuuFeatureList-group:first-child {
@@ -54,7 +73,10 @@ const css = `
 }
 
 .vuuFeatureList-itemName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 700;
+  overflow: hidden;
 }
 
 

package/src/feature-list/FeatureList.js

@@ -1,14 +1,98 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Palette, PaletteItem } from "@vuu-ui/vuu-layout";
-import { Icon } from "@vuu-ui/vuu-ui-controls";
-import { featureFromJson, isStaticFeatures } from "@vuu-ui/vuu-utils";
+import { DragDropProviderNext, GridLayoutProvider, toJsonValue, useDraggable, useOptionalDragContext } from "@heswell/grid-layout";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
+import { Icon } from "@vuu-ui/vuu-ui-controls";
+import { isStaticFeatures, queryClosest } from "@vuu-ui/vuu-utils";
 import clsx from "clsx";
-import { useMemo } from "react";
-import { Feature } from "../feature/Feature.js";
+import { useCallback, useId, useMemo } from "react";
 import FeatureList from "./FeatureList.css";
 const classBase = "vuuFeatureList";
+const NOOP = ()=>void 0;
+const FeatureListDragRuntime = ({ children })=>{
+    const dragContext = useOptionalDragContext();
+    const runtimeId = useId();
+    if (dragContext) return children;
+    return /*#__PURE__*/ jsx(GridLayoutProvider, {
+        children: /*#__PURE__*/ jsx(DragDropProviderNext, {
+            dragSources: {},
+            onCancelTabDrag: NOOP,
+            onDetachTab: NOOP,
+            onDrop: NOOP,
+            children: /*#__PURE__*/ jsx("div", {
+                className: "vuuGridLayout",
+                id: `vuu-feature-list-${runtimeId}`,
+                style: {
+                    display: "contents"
+                },
+                children: children
+            })
+        })
+    });
+};
+const templateForDynamicFeature = (feature)=>{
+    const settings = toJsonValue(feature);
+    if (!settings.ok) throw new Error(`Feature "${feature.title ?? feature.mfComponent}" has non-persistable settings at ${settings.error.path}`);
+    return {
+        component: {
+            settings: settings.value,
+            type: "vuu-dynamic-feature",
+            version: 1
+        },
+        label: feature.title ?? feature.mfComponent
+    };
+};
+const templateForStaticFeature = ({ label, type })=>({
+        component: {
+            settings: {
+                type
+            },
+            type: "vuu-static-feature",
+            version: 1
+        },
+        label
+    });
+const FeatureTemplate = ({ template })=>{
+    const getDragSource = useCallback((event)=>{
+        const element = event.currentTarget;
+        return {
+            ...template,
+            element,
+            layoutId: queryClosest(element, ".vuuGridLayout")?.id ?? "vuu-feature-list",
+            type: "template"
+        };
+    }, [
+        template
+    ]);
+    const draggable = useDraggable({
+        getDragSource
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...draggable,
+        className: `${classBase}-item`,
+        "data-template-component-type": template.component.type,
+        "data-template-version": template.component.version,
+        draggable: true,
+        role: "listitem",
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                name: "draggable",
+                size: 18
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-itemName`,
+                children: template.label
+            })
+        ]
+    });
+};
+const TemplateList = ({ templates })=>/*#__PURE__*/ jsx("div", {
+        className: `${classBase}-items`,
+        role: "list",
+        children: templates.map((template, index)=>/*#__PURE__*/ jsx(FeatureTemplate, {
+                template: template
+            }, `${template.component.type}-${template.label}-${index}`))
+    });
 const FeatureList_FeatureList = ({ features, title = "VUU TABLES", ...htmlAttributes })=>{
     const targetWindow = useWindow();
     useComponentCssInjection({
@@ -17,112 +101,49 @@ const FeatureList_FeatureList = ({ features, title = "VUU TABLES", ...htmlAttrib
         window: targetWindow
     });
     const content = useMemo(()=>{
-        if (isStaticFeatures(features)) return features.map(({ label, type }, idx)=>/*#__PURE__*/ jsxs(PaletteItem, {
-                ViewProps: {
-                    closeable: true,
-                    header: true,
-                    resize: "defer",
-                    resizeable: true
-                },
-                component: featureFromJson({
-                    type
-                }),
-                value: label,
-                children: [
-                    /*#__PURE__*/ jsx(Icon, {
-                        name: "draggable",
-                        size: 18
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        className: `${classBase}-itemName`,
-                        children: label
-                    })
-                ]
-            }, idx));
+        if (isStaticFeatures(features)) return [
+            /*#__PURE__*/ jsx(TemplateList, {
+                templates: features.map(templateForStaticFeature)
+            }, "static")
+        ];
         if (Array.isArray(features)) return [
             /*#__PURE__*/ jsx("div", {
                 className: `${classBase}-standalone`,
-                children: /*#__PURE__*/ jsx(Palette, {
-                    orientation: "vertical",
-                    children: features.map(({ ViewProps, ...featureProps }, i)=>/*#__PURE__*/ jsxs(PaletteItem, {
-                            ViewProps: {
-                                closeable: true,
-                                header: true,
-                                resize: "defer",
-                                resizeable: true,
-                                title: featureProps.title,
-                                ...ViewProps
-                            },
-                            component: /*#__PURE__*/ jsx(Feature, {
-                                ...featureProps
-                            }),
-                            value: featureProps.title,
-                            children: [
-                                /*#__PURE__*/ jsx(Icon, {
-                                    name: "draggable",
-                                    size: 18
-                                }),
-                                /*#__PURE__*/ jsx("span", {
-                                    className: `${classBase}-itemName`,
-                                    children: featureProps.title
-                                })
-                            ]
-                        }, i))
-                }, "0")
-            }, 0)
+                children: /*#__PURE__*/ jsx(TemplateList, {
+                    templates: features.map(templateForDynamicFeature)
+                })
+            }, "dynamic")
         ];
-        return Object.entries(features).map(([heading, featureList], index)=>/*#__PURE__*/ jsxs("div", {
+        return Object.entries(features).map(([heading, featureList])=>/*#__PURE__*/ jsxs("div", {
                 className: `${classBase}-group`,
                 children: [
                     /*#__PURE__*/ jsx("div", {
                         className: `${classBase}-groupHeader`,
                         children: heading
                     }),
-                    /*#__PURE__*/ jsx(Palette, {
-                        orientation: "vertical",
-                        children: featureList.map(({ ViewProps, ...featureProps }, i)=>/*#__PURE__*/ jsxs(PaletteItem, {
-                                ViewProps: {
-                                    closeable: true,
-                                    header: true,
-                                    resize: "defer",
-                                    resizeable: true,
-                                    title: featureProps.title,
-                                    ...ViewProps
-                                },
-                                component: /*#__PURE__*/ jsx(Feature, {
-                                    ...featureProps
-                                }),
-                                value: featureProps.title,
-                                children: [
-                                    /*#__PURE__*/ jsx(Icon, {
-                                        name: "draggable",
-                                        size: 18
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: `${classBase}-itemName`,
-                                        children: featureProps.title
-                                    })
-                                ]
-                            }, i))
+                    /*#__PURE__*/ jsx(TemplateList, {
+                        templates: featureList.map(templateForDynamicFeature)
                     })
                 ]
-            }, index));
+            }, heading));
     }, [
         features
     ]);
-    return /*#__PURE__*/ jsxs("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, "vuuScrollable"),
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-header`,
-                children: title
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-content`,
-                children: content
-            })
-        ]
+    return /*#__PURE__*/ jsx(FeatureListDragRuntime, {
+        children: /*#__PURE__*/ jsxs("div", {
+            ...htmlAttributes,
+            className: clsx(classBase, "vuuScrollable"),
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: `${classBase}-header`,
+                    children: title
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: `${classBase}-content`,
+                    children: content
+                })
+            ]
+        })
     });
 };
 export { FeatureList_FeatureList as FeatureList };

package/src/index.js

@@ -1,14 +1,14 @@
-export * from "./application-provider/index.js";
 export * from "./app-header/index.js";
+export * from "./application-provider/index.js";
 export * from "./feature/index.js";
 export * from "./feature-and-layout-provider/index.js";
+export * from "./feature-list/index.js";
 export * from "./left-nav/index.js";
 export * from "./persistence-manager/index.js";
 export * from "./shell.js";
 export * from "./shell-layout-templates/index.js";
 export * from "./ShellContextProvider.js";
-export * from "./feature-list/index.js";
 export * from "./theme-switch/index.js";
-export * from "./user-settings/index.js";
 export * from "./workspace-management/index.js";
 export { LoginPanel } from "./login/LoginPanel.js";
+export { getRegisteredModules } from "./module-registry/getRegisteredModules.js";

package/src/left-nav/LeftNav.css.js

@@ -17,13 +17,11 @@ const css = `
   --vuu-light-text-primary: #15171b;
   --menu-level-2-width: 0px;
   z-index: 0;
-  height: calc(100% - 4px);
-  margin-bottom: 4px;
+  height: 100%;
   transition: width .2s ease-out;
   display: flex;
   position: relative;
   overflow: hidden;
-  box-shadow: 3px 4px 4px #00000026;
 }
 
 .vuuLeftNav-menu-full {
@@ -64,7 +62,7 @@ const css = `
 .vuuLeftNav-menu-secondary {
   flex: none;
   flex-basis: var(--nav-menu-content-width, 240px);
-  z-index: -1;
+  z-index: 0;
   display: none;
   top: 0;
   right: 0;