@vuu-ui/vuu-shell 0.8.74 → 0.8.76

package/esm/shell-layout-templates/context-panel/ContextPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextPanel.js","sources":["../../../src/shell-layout-templates/context-panel/ContextPanel.tsx"],"sourcesContent":["import {\n  View,\n  layoutFromJson,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutJSON, VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { useCallback, useMemo } from \"react\";\n\nimport contextPanelCss from \"./ContextPanel.css\";\n\nconst classBase = \"vuuContextPanel\";\n\nexport interface ContextPanelProps {\n  [key: string]: unknown;\n  className?: string;\n  content?: LayoutJSON;\n  expanded?: boolean;\n  id?: string;\n  overlay?: boolean;\n}\n\nexport const ContextPanel = ({\n  className: classNameProp,\n  expanded = false,\n  content: contentProp,\n  id = VuuShellLocation.ContextPanel,\n  overlay = false,\n  title,\n}: ContextPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-context-panel\",\n    css: contextPanelCss,\n    window: targetWindow,\n  });\n\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  // const [contentJson, setContentJson] = useState(contentProp);\n  const handleClose = useCallback(() => {\n    dispatchLayoutAction({\n      path: `#${VuuShellLocation.ContextPanel}`,\n      propName: \"expanded\",\n      propValue: false,\n      type: \"set-prop\",\n    });\n  }, [dispatchLayoutAction]);\n  // TODO look up content using context\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-expanded`]: expanded,\n    [`${classBase}-inline`]: overlay !== true,\n    [`${classBase}-overlay`]: overlay,\n  });\n\n  const content = useMemo(\n    () =>\n      contentProp && expanded ? layoutFromJson(contentProp, \"context-0\") : null,\n    [contentProp, expanded]\n  );\n\n  return (\n    <div\n      className={cx(classBase, className, \"vuuScrollable\", {\n        [`${classBase}-expanded`]: expanded,\n      })}\n    >\n      <View className={`${classBase}-inner`} header={false} id={id}>\n        <div className={`${classBase}-header`}>\n          <h2 className={`${classBase}-title`}>{title}</h2>\n          <IconButton\n            className={`${classBase}-close`}\n            data-embedded\n            icon=\"close\"\n            onClick={handleClose}\n            size={16}\n            variant=\"secondary\"\n          />\n        </div>\n        <div className={`${classBase}-content`}>{content}</div>\n      </View>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAWX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAW,EAAA,aAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACX,OAAS,EAAA,WAAA;AAAA,EACT,KAAK,gBAAiB,CAAA,YAAA;AAAA,EACtB,OAAU,GAAA,KAAA;AAAA,EACV,KAAA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,uBAAuB,yBAA0B,EAAA,CAAA;AAEvD,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAqB,oBAAA,CAAA;AAAA,MACnB,IAAA,EAAM,CAAI,CAAA,EAAA,gBAAA,CAAiB,YAAY,CAAA,CAAA;AAAA,MACvC,QAAU,EAAA,UAAA;AAAA,MACV,SAAW,EAAA,KAAA;AAAA,MACX,IAAM,EAAA,UAAA;AAAA,KACP,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,oBAAoB,CAAC,CAAA,CAAA;AAGzB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,IAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,OAAY,KAAA,IAAA;AAAA,IACrC,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,OAAA;AAAA,GAC3B,CAAA,CAAA;AAED,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA,IACd,MACE,WAAe,IAAA,QAAA,GAAW,cAAe,CAAA,WAAA,EAAa,WAAW,CAAI,GAAA,IAAA;AAAA,IACvE,CAAC,aAAa,QAAQ,CAAA;AAAA,GACxB,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,SAAA,EAAW,eAAiB,EAAA;AAAA,QACnD,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,OAC5B,CAAA;AAAA,MAED,QAAA,kBAAA,IAAA,CAAC,QAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAU,MAAA,CAAA,EAAA,MAAA,EAAQ,OAAO,EACpD,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BAC5C,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,IAAK,EAAA,OAAA;AAAA,cACL,OAAS,EAAA,WAAA;AAAA,cACT,IAAM,EAAA,EAAA;AAAA,cACN,OAAQ,EAAA,WAAA;AAAA,aAAA;AAAA,WACV;AAAA,SACF,EAAA,CAAA;AAAA,4BACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,OACnD,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/{shell-layouts → shell-layout-templates/full-height-left-panel}/useFullHeightLeftPanel.js

@@ -1,23 +1,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Flexbox, DraggableLayout } from '@vuu-ui/vuu-layout';
-import { ContextPanel } from './context-panel/ContextPanel.js';
-import { SidePanel } from './side-panel/SidePanel.js';
+import { Flexbox, LayoutContainer } from '@vuu-ui/vuu-layout';
+import { VuuShellLocation } from '@vuu-ui/vuu-utils';
+import { ContextPanel } from '../context-panel/ContextPanel.js';
+import { SidePanel } from '../side-panel/SidePanel.js';
 
 const useFullHeightLeftPanel = ({
   appHeader,
-  LeftSidePanelProps
+  LeftSidePanelProps,
+  htmlAttributes
 }) => {
   return /* @__PURE__ */ jsxs(
     Flexbox,
     {
-      className: "App",
+      ...htmlAttributes,
       style: {
-        flexDirection: "row",
-        height: "100%",
-        width: "100%"
+        ...htmlAttributes?.style,
+        flexDirection: "row"
       },
       children: [
-        /* @__PURE__ */ jsx(SidePanel, { ...LeftSidePanelProps, id: "vuu-side-panel" }),
+        /* @__PURE__ */ jsx(SidePanel, { ...LeftSidePanelProps, id: VuuShellLocation.SidePanel }),
         /* @__PURE__ */ jsxs(
           Flexbox,
           {
@@ -26,10 +27,9 @@ const useFullHeightLeftPanel = ({
             children: [
               appHeader,
               /* @__PURE__ */ jsx(
-                DraggableLayout,
+                LayoutContainer,
                 {
-                  dropTarget: true,
-                  className: "vuuShell-content-main",
+                  id: VuuShellLocation.WorkspaceContainer,
                   style: { flex: 1 }
                 },
                 "main-content"
@@ -37,7 +37,7 @@ const useFullHeightLeftPanel = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(ContextPanel, { id: "context-panel", overlay: true })
+        /* @__PURE__ */ jsx(ContextPanel, { id: VuuShellLocation.ContextPanel, overlay: true })
       ]
     }
   );

package/esm/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullHeightLeftPanel.js","sources":["../../../src/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.tsx"],"sourcesContent":["import { LayoutContainer, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { ContextPanel } from \"../context-panel\";\nimport { SidePanel } from \"../side-panel\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useFullHeightLeftPanel: ShellLayoutTemplateHook = ({\n  appHeader,\n  LeftSidePanelProps,\n  htmlAttributes,\n}) => {\n  return (\n    <Flexbox\n      {...htmlAttributes}\n      style={{\n        ...htmlAttributes?.style,\n        flexDirection: \"row\",\n      }}\n    >\n      <SidePanel {...LeftSidePanelProps} id={VuuShellLocation.SidePanel} />\n      <Flexbox\n        className=\"vuuShell-content\"\n        style={{ flex: 1, flexDirection: \"column\" }}\n      >\n        {appHeader}\n        <LayoutContainer\n          id={VuuShellLocation.WorkspaceContainer}\n          key=\"main-content\"\n          style={{ flex: 1 }}\n        />\n      </Flexbox>\n      <ContextPanel id={VuuShellLocation.ContextPanel} overlay></ContextPanel>\n    </Flexbox>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,yBAAkD,CAAC;AAAA,EAC9D,SAAA;AAAA,EACA,kBAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAW,EAAA,EAAA,GAAG,kBAAoB,EAAA,EAAA,EAAI,iBAAiB,SAAW,EAAA,CAAA;AAAA,wBACnE,IAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,eAAA;AAAA,gBAAA;AAAA,kBACC,IAAI,gBAAiB,CAAA,kBAAA;AAAA,kBAErB,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE,EAAA;AAAA,iBAAA;AAAA,gBADb,cAAA;AAAA,eAEN;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,4BACC,YAAa,EAAA,EAAA,EAAA,EAAI,gBAAiB,CAAA,YAAA,EAAc,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3D,CAAA;AAEJ;;;;"}

package/esm/{shell-layouts → shell-layout-templates/inlay-left-panel}/useInlayLeftPanel.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Drawer, View, Flexbox, DockLayout, DraggableLayout } from '@vuu-ui/vuu-layout';
+import { Drawer, View, Flexbox, DockLayout, LayoutContainer } from '@vuu-ui/vuu-layout';
+import { VuuShellLocation } from '@vuu-ui/vuu-utils';
 import { useRef, useState, useCallback } from 'react';
 
 const useInlayLeftPanel = ({
+  LeftSidePanelProps,
   appHeader,
-  LeftSidePanelProps
+  htmlAttributes
 }) => {
   const paletteView = useRef(null);
   const [open, setOpen] = useState(true);
@@ -53,15 +55,19 @@ const useInlayLeftPanel = ({
   return /* @__PURE__ */ jsxs(
     Flexbox,
     {
-      className: "App",
-      style: { flexDirection: "column", height: "100%", width: "100%" },
+      ...htmlAttributes,
+      style: {
+        ...htmlAttributes?.style,
+        flexDirection: "column"
+      },
       children: [
         appHeader,
         /* @__PURE__ */ jsx(DockLayout, { style: { flex: 1 }, children: getDrawers(LeftSidePanelProps?.children).concat(
           /* @__PURE__ */ jsx(
-            DraggableLayout,
+            LayoutContainer,
             {
               dropTarget: true,
+              id: VuuShellLocation.WorkspaceContainer,
               style: { width: "100%", height: "100%" }
             },
             "main-content"

package/esm/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInlayLeftPanel.js","sources":["../../../src/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.tsx"],"sourcesContent":["import {\n  DockLayout,\n  LayoutContainer,\n  Drawer,\n  Flexbox,\n  View,\n} from \"@vuu-ui/vuu-layout\";\n\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, ReactElement, useCallback, useRef, useState } from \"react\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useInlayLeftPanel: ShellLayoutTemplateHook = ({\n  LeftSidePanelProps,\n  appHeader,\n  htmlAttributes,\n}) => {\n  const paletteView = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(true);\n\n  const handleDrawerClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const target = e.target as HTMLElement;\n      if (!paletteView.current?.contains(target)) {\n        setOpen(!open);\n      }\n    },\n    [open]\n  );\n\n  const getDrawers = useCallback(\n    (leftSidePanel) => {\n      const drawers: ReactElement[] = [];\n      drawers.push(\n        <Drawer\n          key=\"left-panel\"\n          onClick={handleDrawerClick}\n          open={open}\n          position=\"left\"\n          inline\n          peekaboo\n          sizeOpen={200}\n          toggleButton=\"end\"\n        >\n          <View\n            className=\"vuuShell-palette\"\n            id=\"vw-app-palette\"\n            key=\"app-palette\"\n            ref={paletteView}\n            style={{ height: \"100%\" }}\n          >\n            {leftSidePanel}\n          </View>\n        </Drawer>\n      );\n\n      return drawers;\n    },\n    [handleDrawerClick, open]\n  );\n\n  return (\n    <Flexbox\n      {...htmlAttributes}\n      style={{\n        ...htmlAttributes?.style,\n        flexDirection: \"column\",\n      }}\n    >\n      {appHeader}\n      <DockLayout style={{ flex: 1 }}>\n        {getDrawers(LeftSidePanelProps?.children).concat(\n          <LayoutContainer\n            dropTarget\n            id={VuuShellLocation.WorkspaceContainer}\n            key=\"main-content\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          />\n        )}\n      </DockLayout>\n    </Flexbox>\n  );\n};\n"],"names":[],"mappings":";;;;;AAYO,MAAM,oBAA6C,CAAC;AAAA,EACzD,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAErC,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,MAAA,IAAI,CAAC,WAAA,CAAY,OAAS,EAAA,QAAA,CAAS,MAAM,CAAG,EAAA;AAC1C,QAAA,OAAA,CAAQ,CAAC,IAAI,CAAA,CAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,aAAkB,KAAA;AACjB,MAAA,MAAM,UAA0B,EAAC,CAAA;AACjC,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACN,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,OAAS,EAAA,iBAAA;AAAA,YACT,IAAA;AAAA,YACA,QAAS,EAAA,MAAA;AAAA,YACT,MAAM,EAAA,IAAA;AAAA,YACN,QAAQ,EAAA,IAAA;AAAA,YACR,QAAU,EAAA,GAAA;AAAA,YACV,YAAa,EAAA,KAAA;AAAA,YAEb,QAAA,kBAAA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,SAAU,EAAA,kBAAA;AAAA,gBACV,EAAG,EAAA,gBAAA;AAAA,gBAEH,GAAK,EAAA,WAAA;AAAA,gBACL,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAO,EAAA;AAAA,gBAEvB,QAAA,EAAA,aAAA;AAAA,eAAA;AAAA,cAJG,aAAA;AAAA,aAKN;AAAA,WAAA;AAAA,UAjBI,YAAA;AAAA,SAkBN;AAAA,OACF,CAAA;AAEA,MAAO,OAAA,OAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,mBAAmB,IAAI,CAAA;AAAA,GAC1B,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA,QAAA;AAAA,OACjB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,wBACD,GAAA,CAAC,UAAW,EAAA,EAAA,KAAA,EAAO,EAAE,IAAA,EAAM,GACxB,EAAA,QAAA,EAAA,UAAA,CAAW,kBAAoB,EAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,0BACxC,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,UAAU,EAAA,IAAA;AAAA,cACV,IAAI,gBAAiB,CAAA,kBAAA;AAAA,cAErB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,QAAQ,MAAO,EAAA;AAAA,aAAA;AAAA,YADnC,cAAA;AAAA,WAEN;AAAA,SAEJ,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/shell-layout-templates/side-panel/SidePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanel.js","sources":["../../../src/shell-layout-templates/side-panel/SidePanel.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, useMemo } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport sidePanelCss from \"./SidePanel.css\";\n// import { useLayoutManager } from \"../../layout-management\";\n\nconst classBase = \"vuuShellSidePanel\";\n\nexport interface SidePanelProps extends HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  path?: string;\n  sizeOpen?: number;\n  sizeClosed?: number;\n}\n\nexport const SidePanel = ({\n  children,\n  open = true,\n  sizeClosed = 90,\n  sizeOpen = 200,\n  style: styleProp,\n  ...htmlAttributes\n}: SidePanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-side-panel\",\n    css: sidePanelCss,\n    window: targetWindow,\n  });\n\n  //   const { applicationJson, saveApplicationSettings } = useLayoutManager();\n  //   console.log(`settings`, {\n  //     expanded: applicationJson?.settings?.leftNav?.expanded,\n  //     active: applicationJson?.settings?.leftNav?.activeTabIndex,\n  //   });\n\n  const style = useMemo(\n    () =>\n      ({\n        ...styleProp,\n        \"--shell-left-nav-size\": open ? `${sizeOpen}px` : `${sizeClosed}px`,\n      } as CSSProperties),\n    [open, sizeClosed, sizeOpen, styleProp]\n  );\n  return (\n    <div {...htmlAttributes} className={cx(classBase)} style={style}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,SAAY,GAAA,mBAAA,CAAA;AASX,MAAM,YAAY,CAAC;AAAA,EACxB,QAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP,UAAa,GAAA,EAAA;AAAA,EACb,QAAW,GAAA,GAAA;AAAA,EACX,KAAO,EAAA,SAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAQD,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OACG;AAAA,MACC,GAAG,SAAA;AAAA,MACH,yBAAyB,IAAO,GAAA,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA,GAAO,GAAG,UAAU,CAAA,EAAA,CAAA;AAAA,KACjE,CAAA;AAAA,IACF,CAAC,IAAA,EAAM,UAAY,EAAA,QAAA,EAAU,SAAS,CAAA;AAAA,GACxC,CAAA;AACA,EACE,uBAAA,GAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAS,CAAG,EAAA,KAAA,EAChD,QACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flexbox, LayoutContainer } from '@vuu-ui/vuu-layout';
+import { VuuShellLocation } from '@vuu-ui/vuu-utils';
+import { ContextPanel } from '../context-panel/ContextPanel.js';
+
+const useSimpleContentPane = ({
+  appHeader,
+  htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Flexbox,
+    {
+      ...htmlAttributes,
+      style: {
+        ...htmlAttributes?.style,
+        flexDirection: "row"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flexbox,
+          {
+            className: "vuuShell-content",
+            style: { flex: 1, flexDirection: "column" },
+            children: [
+              appHeader,
+              /* @__PURE__ */ jsx(
+                LayoutContainer,
+                {
+                  id: VuuShellLocation.WorkspaceContainer,
+                  style: { flex: 1 }
+                },
+                "main-content"
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ContextPanel, { id: VuuShellLocation.ContextPanel, overlay: true })
+      ]
+    }
+  );
+};
+
+export { useSimpleContentPane };
+//# sourceMappingURL=useSimpleContentPane.js.map

package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSimpleContentPane.js","sources":["../../../src/shell-layout-templates/simple-content-pane/useSimpleContentPane.tsx"],"sourcesContent":["import { LayoutContainer, Flexbox } from \"@vuu-ui/vuu-layout\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { ContextPanel } from \"../context-panel\";\nimport { ShellLayoutTemplateHook } from \"../useShellLayout\";\n\nexport const useSimpleContentPane: ShellLayoutTemplateHook = ({\n  appHeader,\n  htmlAttributes,\n}) => {\n  return (\n    <Flexbox\n      {...htmlAttributes}\n      style={{\n        ...htmlAttributes?.style,\n        flexDirection: \"row\",\n      }}\n    >\n      <Flexbox\n        className=\"vuuShell-content\"\n        style={{ flex: 1, flexDirection: \"column\" }}\n      >\n        {appHeader}\n        <LayoutContainer\n          id={VuuShellLocation.WorkspaceContainer}\n          key=\"main-content\"\n          style={{ flex: 1 }}\n        />\n      </Flexbox>\n      <ContextPanel id={VuuShellLocation.ContextPanel} overlay></ContextPanel>\n    </Flexbox>\n  );\n};\n"],"names":[],"mappings":";;;;;AAKO,MAAM,uBAAgD,CAAC;AAAA,EAC5D,SAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAO,EAAA;AAAA,QACL,GAAG,cAAgB,EAAA,KAAA;AAAA,QACnB,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,kBAAA;AAAA,YACV,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,eAAe,QAAS,EAAA;AAAA,YAEzC,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,eAAA;AAAA,gBAAA;AAAA,kBACC,IAAI,gBAAiB,CAAA,kBAAA;AAAA,kBAErB,KAAA,EAAO,EAAE,IAAA,EAAM,CAAE,EAAA;AAAA,iBAAA;AAAA,gBADb,cAAA;AAAA,eAEN;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,4BACC,YAAa,EAAA,EAAA,EAAA,EAAI,gBAAiB,CAAA,YAAA,EAAc,SAAO,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC3D,CAAA;AAEJ;;;;"}

package/esm/shell-layout-templates/useShellLayout.js

@@ -0,0 +1,19 @@
+import { useFullHeightLeftPanel } from './full-height-left-panel/useFullHeightLeftPanel.js';
+import { useInlayLeftPanel } from './inlay-left-panel/useInlayLeftPanel.js';
+import { useSimpleContentPane } from './simple-content-pane/useSimpleContentPane.js';
+
+const LayoutHook = {
+  "full-height": useFullHeightLeftPanel,
+  inlay: useInlayLeftPanel,
+  "simple-content-pane": useSimpleContentPane
+};
+const useShellLayout = ({
+  layoutTemplateId = "simple-content-pane",
+  ...props
+}) => {
+  const useLayoutHook = LayoutHook[layoutTemplateId];
+  return useLayoutHook(props);
+};
+
+export { useShellLayout };
+//# sourceMappingURL=useShellLayout.js.map

package/esm/shell-layout-templates/useShellLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShellLayout.js","sources":["../../src/shell-layout-templates/useShellLayout.ts"],"sourcesContent":["import { HTMLAttributes, ReactElement, ReactNode } from \"react\";\nimport { useFullHeightLeftPanel } from \"./full-height-left-panel/useFullHeightLeftPanel\";\nimport { useInlayLeftPanel } from \"./inlay-left-panel/useInlayLeftPanel\";\nimport { useSimpleContentPane } from \"./simple-content-pane/useSimpleContentPane\";\nimport { SidePanelProps } from \"./side-panel\";\n\nconst LayoutHook = {\n  \"full-height\": useFullHeightLeftPanel,\n  inlay: useInlayLeftPanel,\n  \"simple-content-pane\": useSimpleContentPane,\n};\n\nexport type LayoutTemplateId = keyof typeof LayoutHook;\n\nexport type ShellLayoutTemplateProps = Omit<\n  ShellLayoutProps,\n  \"layoutTemplateId\"\n>;\n\nexport type ShellLayoutTemplateHook = (\n  props: ShellLayoutTemplateProps\n) => ReactElement;\n\n/**\n * The Shell Layout is the outermost 'chrome' of the appliciation,\n * enclosing the main content area. It will be rendered by one of\n * two available templates, determined by the layoutTemplateId,\n */\nexport interface ShellLayoutProps {\n  /**\n   * App Header will be rendered in position determined by layout-template\n   */\n  appHeader?: ReactNode;\n\n  /**\n   * HTML attributes that will be applied to root div. Default attributes\n   * will be applied, unless overidden, as follows:\n   *\n   * - height: 100%\n   * - width: 100%\n   */\n  htmlAttributes?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * identifier for shell layout template to be used. Default template\n   * will be \"inlay\"\n   */\n  layoutTemplateId?: LayoutTemplateId;\n  /**\n   * If template renders SidePanel, these props will be provided\n   */\n  LeftSidePanelProps?: SidePanelProps;\n}\n\n/**\n * This hook acts as a stub for the actual shell layout\n * template hooks. It will delegate to the appropriate shell\n * layout hook, based on the value of layoutTemplateId.\n */\nexport const useShellLayout = ({\n  layoutTemplateId = \"simple-content-pane\",\n  ...props\n}: ShellLayoutProps) => {\n  const useLayoutHook = LayoutHook[layoutTemplateId];\n  return useLayoutHook(props);\n};\n"],"names":[],"mappings":";;;;AAMA,MAAM,UAAa,GAAA;AAAA,EACjB,aAAe,EAAA,sBAAA;AAAA,EACf,KAAO,EAAA,iBAAA;AAAA,EACP,qBAAuB,EAAA,oBAAA;AACzB,CAAA,CAAA;AAgDO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,gBAAmB,GAAA,qBAAA;AAAA,EACnB,GAAG,KAAA;AACL,CAAwB,KAAA;AACtB,EAAM,MAAA,aAAA,GAAgB,WAAW,gBAAgB,CAAA,CAAA;AACjD,EAAA,OAAO,cAAc,KAAK,CAAA,CAAA;AAC5B;;;;"}

package/esm/shell.css.js

@@ -1,4 +1,4 @@
-var shellCss = ".vuuShell {\n  background-color: var(--vuu-color-gray-25);\n  height: var(--vuuShell-height, 100vh);\n  width: var(--vuuShell-width, 100vw);\n}\n\n.vuuShell-mainTabs {\n  background: var(--salt-container-primary-background);\n}\n\n.vuuShell-palette {\n  --vuuView-border: none;\n  --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n  background-color: var(--salt-container-background-high);\n  height: 100%;\n}\n\n/* until we reinstat5e the toolbar */\n.vuuToolbarProxy {\n  background: var(--salt-container-primary-background);\n}\n\n.vuuShell-mainTabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {\n  background: var(--vuu-color-gray-25);\n}\n\n.vuuShell-mainTabs {\n  --vuuTab-height: 28px;\n  border: solid 1px #d6d7da;\n  border-top: none !important;\n  border-radius: 6px;\n  height: 100%;\n  padding: 36px 8px 8px 8px;\n  position: relative;\n  width: 100%;\n}\n\n.vuuShell-mainTabs > .vuuTabstrip {\n  left: -1px;\n  padding-bottom: 7px;\n  position: absolute !important;\n  right: 1px;\n  top: 0;\n  width: calc(100% + 2px) !important;\n}\n\n.vuuShell-content {\n  padding: var(--vuuShell-content-padding, 8px);\n}\n";
+var shellCss = ".vuuShell {\n  background-color: var(--vuu-color-gray-25);\n  height: var(--vuuShell-height, 100vh);\n  width: var(--vuuShell-width, 100vw);\n}\n\n.vuu-workspace-tabs {\n  background: var(--salt-container-primary-background);\n}\n\n.vuuShell-palette {\n  --vuuView-border: none;\n  --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n  background-color: var(--salt-container-background-high);\n  height: 100%;\n}\n\n/* until we reinstat5e the toolbar */\n.vuuToolbarProxy {\n  background: var(--salt-container-primary-background);\n}\n\n.vuu-workspace-tabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {\n  background: var(--vuu-color-gray-25);\n}\n\n.vuu-workspace-tabs {\n  --vuuTab-height: 28px;\n  border: solid 1px #d6d7da;\n  border-top: none !important;\n  border-radius: 6px;\n  height: 100%;\n  padding: 36px 8px 8px 8px;\n  position: relative;\n  width: 100%;\n}\n\n.vuu-workspace-tabs > .vuuTabstrip {\n  left: -1px;\n  padding-bottom: 7px;\n  position: absolute !important;\n  right: 1px;\n  top: 0;\n  width: calc(100% + 2px) !important;\n}\n\n.vuuShell-content {\n  padding: var(--vuuShell-content-padding, 8px);\n}\n";
 
 export { shellCss as default };
 //# sourceMappingURL=shell.css.js.map

package/esm/shell.js

@@ -1,25 +1,24 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { connectToServer } from '@vuu-ui/vuu-data-remote';
-import { StackLayout, LayoutProvider, DraggableLayout } from '@vuu-ui/vuu-layout';
+import { StackLayout, LayoutProvider } from '@vuu-ui/vuu-layout';
 import { DialogProvider, NotificationsProvider, ContextMenuProvider } from '@vuu-ui/vuu-popups';
 import { registerComponent, logger } from '@vuu-ui/vuu-utils';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import cx from 'clsx';
-import { useMemo, useRef, useState, useCallback } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import { AppHeader } from './app-header/AppHeader.js';
 import { ApplicationProvider } from './application-provider/ApplicationProvider.js';
-import { loadingApplicationJson } from './layout-management/defaultApplicationJson.js';
+import { loadingJSON } from './layout-management/defaultWorkspaceJSON.js';
 import 'html-to-image';
 import '@salt-ds/core';
 import '@vuu-ui/vuu-ui-controls';
-import { LayoutManagementProvider, useLayoutManager } from './layout-management/useLayoutManager.js';
+import 'clsx';
+import { LayoutManagementProvider, useLayoutManager } from './layout-management/LayoutManagementProvider.js';
 import { useLayoutContextMenuItems } from './layout-management/useLayoutContextMenuItems.js';
 import { usePersistenceManager, PersistenceProvider } from './persistence-manager/PersistenceProvider.js';
 import { LocalPersistenceManager } from './persistence-manager/LocalPersistenceManager.js';
-import './persistence-manager/RemotePersistenceManager.js';
 import './persistence-manager/StaticPersistenceManager.js';
-import { useShellLayout } from './shell-layouts/useShellLayout.js';
+import { useShellLayout } from './shell-layout-templates/useShellLayout.js';
 import { UserSettingsPanel } from './user-settings/UserSettingsPanel.js';
 import shellCss from './shell.css.js';
 
@@ -32,18 +31,34 @@ if (process.env.NODE_ENV === "production") {
   }
 }
 const { error } = logger("Shell");
-const defaultLeftSidePanel = {};
+const getAppHeader = (shellLayoutProps, loginUrl) => shellLayoutProps?.appHeader ?? /* @__PURE__ */ jsx(AppHeader, { loginUrl });
+const defaultHTMLAttributes = {
+  className: "vuuShell",
+  style: {
+    height: "100%",
+    width: "100%"
+  }
+};
+const getHTMLAttributes = (props) => {
+  if (props?.htmlAttributes) {
+    return {
+      ...defaultHTMLAttributes,
+      ...props.htmlAttributes,
+      style: {
+        ...defaultHTMLAttributes.style,
+        ...props.htmlAttributes.style
+      }
+    };
+  } else {
+    return defaultHTMLAttributes;
+  }
+};
 const VuuApplication = ({
-  LayoutProps,
-  LeftSidePanelProps = defaultLeftSidePanel,
+  ShellLayoutProps: ShellLayoutProps2,
   children,
-  className: classNameProp,
-  leftSidePanelLayout,
   loginUrl,
-  saveUrl,
   serverUrl,
-  user,
-  ...htmlAttributes
+  user
 }) => {
   const targetWindow = useWindow();
   useComponentCssInjection({
@@ -51,10 +66,14 @@ const VuuApplication = ({
     css: shellCss,
     window: targetWindow
   });
-  const rootRef = useRef(null);
-  const { applicationJson, saveApplicationLayout } = useLayoutManager();
+  const shellLayout = useShellLayout({
+    ...ShellLayoutProps2,
+    appHeader: getAppHeader(ShellLayoutProps2, loginUrl),
+    htmlAttributes: getHTMLAttributes(ShellLayoutProps2)
+  });
+  const { workspaceJSON, saveApplicationLayout } = useLayoutManager();
   const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems();
-  const [connectionStatus, setConnectionStatus] = useState("connected");
+  const [connectionStatus, setConnectionStatus] = useState("initialising");
   const handleLayoutChange = useCallback(
     (layout) => {
       try {
@@ -73,15 +92,14 @@ const VuuApplication = ({
         username: user.username
       });
       setConnectionStatus(connectionStatus2);
+    } else {
+      console.warn(
+        `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length).fill("#").join("")}'  
+        `
+      );
     }
   }, [serverUrl, user.token, user.username]);
-  const className = cx("vuuShell");
-  const isLayoutLoading = applicationJson === loadingApplicationJson;
-  const shellLayout = useShellLayout({
-    LeftSidePanelProps,
-    leftSidePanelLayout,
-    appHeader: /* @__PURE__ */ jsx(AppHeader, { loginUrl })
-  });
+  const isLayoutLoading = workspaceJSON === loadingJSON;
   if (connectionStatus === "rejected") {
     console.log("game over, no connection to server");
   }
@@ -94,18 +112,9 @@ const VuuApplication = ({
         /* @__PURE__ */ jsx(
           LayoutProvider,
           {
-            ...LayoutProps,
-            layout: applicationJson.layout,
+            workspaceJSON,
             onLayoutChange: handleLayoutChange,
-            children: /* @__PURE__ */ jsx(
-              DraggableLayout,
-              {
-                className,
-                ref: rootRef,
-                ...htmlAttributes,
-                children: shellLayout
-              }
-            )
+            children: shellLayout
           }
         ),
         children
@@ -113,18 +122,18 @@ const VuuApplication = ({
     }
   );
 };
-const Shell = ({ defaultLayout, user, ...props }) => {
+const Shell = ({ ContentLayoutProps, user, ...props }) => {
   const persistenceManager = usePersistenceManager();
   const localPersistenceManager = useMemo(() => {
     if (persistenceManager) {
       return void 0;
     }
     console.log(
-      `No Persistence Manager is configured, configuration data will be persisted to Local Storage, under the key 'vuu/${user.username}'`
+      `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`
     );
     return new LocalPersistenceManager(`vuu/${user.username}`);
   }, [persistenceManager, user.username]);
-  const shellProviders = /* @__PURE__ */ jsx(ApplicationProvider, { density: "high", theme: "vuu-theme", user, children: /* @__PURE__ */ jsx(LayoutManagementProvider, { defaultLayout, children: /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx(NotificationsProvider, { children: /* @__PURE__ */ jsx(VuuApplication, { ...props, user }) }) }) }) });
+  const shellProviders = /* @__PURE__ */ jsx(ApplicationProvider, { density: "high", theme: "vuu-theme", user, children: /* @__PURE__ */ jsx(LayoutManagementProvider, { ...ContentLayoutProps, children: /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx(NotificationsProvider, { children: /* @__PURE__ */ jsx(VuuApplication, { ...props, user }) }) }) }) });
   if (persistenceManager) {
     return shellProviders;
   } else {

package/esm/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport {\n  DraggableLayout,\n  LayoutProvider,\n  LayoutProviderProps,\n  StackLayout,\n} from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n} from \"@vuu-ui/vuu-popups\";\nimport {\n  LayoutJSON,\n  VuuUser,\n  logger,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n  LayoutManagementProvider,\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport {\n  IPersistenceManager,\n  LocalPersistenceManager,\n  PersistenceProvider,\n  usePersistenceManager,\n} from \"./persistence-manager\";\nimport { SidePanelProps, useShellLayout } from \"./shell-layouts\";\nimport { UserSettingsPanel } from \"./user-settings\";\n\nimport shellCss from \"./shell.css\";\nimport { loadingApplicationJson } from \"./layout-management/defaultApplicationJson\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nconst defaultLeftSidePanel: ShellProps[\"LeftSidePanelProps\"] = {};\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  LayoutProps?: Pick<\n    LayoutProviderProps,\n    \"createNewChild\" | \"pathToDropTarget\"\n  >;\n  LeftSidePanelProps?: SidePanelProps;\n  children?: ReactNode;\n  defaultLayout?: LayoutJSON;\n  leftSidePanelLayout?: \"full-height\" | \"inlay\";\n  loginUrl?: string;\n  // paletteConfig: any;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst VuuApplication = ({\n  LayoutProps,\n  LeftSidePanelProps = defaultLeftSidePanel,\n  children,\n  className: classNameProp,\n  leftSidePanelLayout,\n  loginUrl,\n  saveUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { applicationJson, saveApplicationLayout } = useLayoutManager();\n  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems();\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"connected\" | \"rejected\"\n  >(\"connected\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const className = cx(\"vuuShell\");\n\n  const isLayoutLoading = applicationJson === loadingApplicationJson;\n\n  const shellLayout = useShellLayout({\n    LeftSidePanelProps,\n    leftSidePanelLayout,\n    appHeader: <AppHeader loginUrl={loginUrl} />,\n  });\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        {...LayoutProps}\n        layout={applicationJson.layout}\n        onLayoutChange={handleLayoutChange}\n      >\n        <DraggableLayout\n          className={className}\n          ref={rootRef}\n          {...htmlAttributes}\n        >\n          {shellLayout}\n        </DraggableLayout>\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({ defaultLayout, user, ...props }: ShellProps) => {\n  // If user has provided an implementation of IPersistenceManager\n  // by wrapping higher level PersistenceProvider, use it, otw\n  // default to LocalPersistenceManager\n  const persistenceManager = usePersistenceManager();\n  const localPersistenceManager = useMemo<\n    IPersistenceManager | undefined\n  >(() => {\n    if (persistenceManager) {\n      return undefined;\n    }\n    console.log(\n      `No Persistence Manager is configured, configuration data will be persisted to Local Storage, under the key 'vuu/${user.username}'`\n    );\n    return new LocalPersistenceManager(`vuu/${user.username}`);\n  }, [persistenceManager, user.username]);\n\n  // ApplicationProvider must go outside Dialog and Notification providers\n  // ApplicationProvider injects the SaltProvider and this must be the root\n  // SaltProvider.\n\n  const shellProviders = (\n    <ApplicationProvider density=\"high\" theme=\"vuu-theme\" user={user}>\n      <LayoutManagementProvider defaultLayout={defaultLayout}>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </LayoutManagementProvider>\n    </ApplicationProvider>\n  );\n\n  if (persistenceManager) {\n    return shellProviders;\n  } else {\n    return (\n      <PersistenceProvider persistenceManager={localPersistenceManager}>\n        {shellProviders}\n      </PersistenceProvider>\n    );\n  }\n};\n"],"names":["connectionStatus"],"mappings":"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"}
+{"version":3,"file":"shell.js","sources":["../src/shell.tsx"],"sourcesContent":["import { connectToServer } from \"@vuu-ui/vuu-data-remote\";\nimport type { LayoutChangeHandler } from \"@vuu-ui/vuu-layout\";\nimport { LayoutProvider, StackLayout } from \"@vuu-ui/vuu-layout\";\nimport {\n  ContextMenuProvider,\n  DialogProvider,\n  NotificationsProvider,\n} from \"@vuu-ui/vuu-popups\";\nimport { VuuUser, logger, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { AppHeader } from \"./app-header\";\nimport { ApplicationProvider } from \"./application-provider\";\nimport {\n  LayoutManagementProvider,\n  LayoutManagementProviderProps,\n  useLayoutContextMenuItems,\n  useLayoutManager,\n} from \"./layout-management\";\nimport { loadingJSON } from \"./layout-management/defaultWorkspaceJSON\";\nimport {\n  IPersistenceManager,\n  LocalPersistenceManager,\n  PersistenceProvider,\n  usePersistenceManager,\n} from \"./persistence-manager\";\nimport { ShellLayoutProps, useShellLayout } from \"./shell-layout-templates\";\nimport { UserSettingsPanel } from \"./user-settings\";\n\nimport shellCss from \"./shell.css\";\n\nregisterComponent(\"ApplicationSettings\", UserSettingsPanel, \"view\");\n\nif (process.env.NODE_ENV === \"production\") {\n  // StackLayout is loaded just to force component registration, we know it will be\n  // required when default layout is instantiated. This is only required in prod\n  // to avoif tree shaking the Stack away. Causes a runtime issue in dev.\n  if (typeof StackLayout !== \"function\") {\n    console.warn(\n      \"StackLayout module not loaded, will be unsbale to deserialize from layout JSON\"\n    );\n  }\n}\n\nconst { error } = logger(\"Shell\");\n\nexport type LayoutTemplateName = \"full-height\" | \"inlay\";\n\nexport type ContentLayoutProps = Pick<\n  LayoutManagementProviderProps,\n  \"layoutJSON\" | \"workspaceJSON\" | \"WorkspaceProps\"\n>;\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  ContentLayoutProps?: ContentLayoutProps;\n  ShellLayoutProps?: ShellLayoutProps;\n  children?: ReactNode;\n  loginUrl?: string;\n  saveUrl?: string;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nconst getAppHeader = (shellLayoutProps?: ShellLayoutProps, loginUrl?: string) =>\n  shellLayoutProps?.appHeader ?? <AppHeader loginUrl={loginUrl} />;\n\nconst defaultHTMLAttributes: HTMLAttributes<HTMLDivElement> = {\n  className: \"vuuShell\",\n  style: {\n    height: \"100%\",\n    width: \"100%\",\n  },\n};\n\nconst getHTMLAttributes = (props?: ShellLayoutProps) => {\n  if (props?.htmlAttributes) {\n    return {\n      ...defaultHTMLAttributes,\n      ...props.htmlAttributes,\n      style: {\n        ...defaultHTMLAttributes.style,\n        ...props.htmlAttributes.style,\n      },\n    };\n  } else {\n    return defaultHTMLAttributes;\n  }\n};\n\nconst VuuApplication = ({\n  ShellLayoutProps,\n  children,\n  loginUrl,\n  serverUrl,\n  user,\n}: Omit<ShellProps, \"ContentLayoutProps\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-shell\",\n    css: shellCss,\n    window: targetWindow,\n  });\n\n  const shellLayout = useShellLayout({\n    ...ShellLayoutProps,\n    appHeader: getAppHeader(ShellLayoutProps, loginUrl),\n    htmlAttributes: getHTMLAttributes(ShellLayoutProps),\n  });\n\n  const { workspaceJSON, saveApplicationLayout } = useLayoutManager();\n\n  const { buildMenuOptions, handleMenuAction } = useLayoutContextMenuItems();\n  const [connectionStatus, setConnectionStatus] = useState<\n    \"initialising\" | \"connected\" | \"rejected\"\n  >(\"initialising\");\n\n  const handleLayoutChange = useCallback<LayoutChangeHandler>(\n    (layout) => {\n      try {\n        saveApplicationLayout(layout);\n      } catch {\n        error?.(\"Failed to save layout\");\n      }\n    },\n    [saveApplicationLayout]\n  );\n\n  useMemo(async () => {\n    if (serverUrl && user.token) {\n      const connectionStatus = await connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n      setConnectionStatus(connectionStatus);\n    } else {\n      console.warn(\n        `Shell: serverUrl: '${serverUrl}', token: '${Array(user.token.length)\n          .fill(\"#\")\n          .join(\"\")}'  \n        `\n      );\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const isLayoutLoading = workspaceJSON === loadingJSON;\n\n  if (connectionStatus === \"rejected\") {\n    console.log(\"game over, no connection to server\");\n  }\n\n  return isLayoutLoading ? null : (\n    <ContextMenuProvider\n      menuActionHandler={handleMenuAction}\n      menuBuilder={buildMenuOptions}\n    >\n      <LayoutProvider\n        workspaceJSON={workspaceJSON}\n        onLayoutChange={handleLayoutChange}\n      >\n        {shellLayout}\n      </LayoutProvider>\n      {children}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Shell = ({ ContentLayoutProps, user, ...props }: ShellProps) => {\n  // If user has provided an implementation of IPersistenceManager\n  // by wrapping higher level PersistenceProvider, use it, otw\n  // default to LocalPersistenceManager\n  const persistenceManager = usePersistenceManager();\n  const localPersistenceManager = useMemo<\n    IPersistenceManager | undefined\n  >(() => {\n    if (persistenceManager) {\n      return undefined;\n    }\n    console.log(\n      `No Persistence Manager, configuration data will be persisted to Local Storage, key: 'vuu/${user.username}'`\n    );\n    return new LocalPersistenceManager(`vuu/${user.username}`);\n  }, [persistenceManager, user.username]);\n\n  // ApplicationProvider must go outside Dialog and Notification providers\n  // ApplicationProvider injects the SaltProvider and this must be the root\n  // SaltProvider.\n\n  const shellProviders = (\n    <ApplicationProvider density=\"high\" theme=\"vuu-theme\" user={user}>\n      <LayoutManagementProvider {...ContentLayoutProps}>\n        <DialogProvider>\n          <NotificationsProvider>\n            <VuuApplication {...props} user={user} />\n          </NotificationsProvider>\n        </DialogProvider>\n      </LayoutManagementProvider>\n    </ApplicationProvider>\n  );\n\n  if (persistenceManager) {\n    return shellProviders;\n  } else {\n    return (\n      <PersistenceProvider persistenceManager={localPersistenceManager}>\n        {shellProviders}\n      </PersistenceProvider>\n    );\n  }\n};\n"],"names":["ShellLayoutProps","connectionStatus"],"mappings":"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"}

package/package.json

@@ -1,24 +1,24 @@
 {
-  "version": "0.8.74",
+  "version": "0.8.76",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.74",
-    "@vuu-ui/vuu-protocol-types": "0.8.74",
-    "@vuu-ui/vuu-table-types": "0.8.74"
+    "@vuu-ui/vuu-data-types": "0.8.76",
+    "@vuu-ui/vuu-protocol-types": "0.8.76",
+    "@vuu-ui/vuu-table-types": "0.8.76"
   },
   "dependencies": {
     "@salt-ds/core": "1.27.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-remote": "0.8.74",
-    "@vuu-ui/vuu-icons": "0.8.74",
-    "@vuu-ui/vuu-layout": "0.8.74",
-    "@vuu-ui/vuu-popups": "0.8.74",
-    "@vuu-ui/vuu-table": "0.8.74",
-    "@vuu-ui/vuu-ui-controls": "0.8.74",
-    "@vuu-ui/vuu-utils": "0.8.74",
+    "@vuu-ui/vuu-data-remote": "0.8.76",
+    "@vuu-ui/vuu-icons": "0.8.76",
+    "@vuu-ui/vuu-layout": "0.8.76",
+    "@vuu-ui/vuu-popups": "0.8.76",
+    "@vuu-ui/vuu-table": "0.8.76",
+    "@vuu-ui/vuu-ui-controls": "0.8.76",
+    "@vuu-ui/vuu-utils": "0.8.76",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {

package/types/vuu-layout/src/Component.d.ts

@@ -0,0 +1,6 @@
+import React, { HTMLAttributes } from "react";
+export interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
+    resizeable?: boolean;
+}
+declare const Component: React.FunctionComponent<ComponentProps>;
+export default Component;

package/types/vuu-layout/src/LayoutContainer.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+export interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {
+    dropTarget?: boolean;
+    resizeable?: boolean;
+}
+export declare const LayoutContainer: import("react").ForwardRefExoticComponent<LayoutContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/vuu-layout/src/dock-layout/DockLayout.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+export type DockLayoutProps = HTMLAttributes<HTMLDivElement>;
+declare const DockLayout: {
+    (props: DockLayoutProps): JSX.Element;
+    displayName: string;
+};
+export default DockLayout;

package/types/vuu-layout/src/dock-layout/Drawer.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+    clickToOpen?: boolean;
+    defaultOpen?: boolean;
+    inline?: boolean;
+    open?: boolean;
+    peekaboo?: boolean;
+    position?: "left" | "right" | "top" | "bottom";
+    sizeOpen?: number;
+    sizeClosed?: number;
+    toggleButton?: "start" | "end";
+}
+declare const Drawer: {
+    ({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): JSX.Element;
+    displayName: string;
+};
+export default Drawer;

package/types/vuu-layout/src/dock-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DockLayout } from "./DockLayout";
+export { default as Drawer } from "./Drawer";