@vuu-ui/vuu-shell 0.8.35 → 0.8.37

package/cjs/ShellContextProvider.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const defaultConfig = {};
+const ShellContext = React.createContext(defaultConfig);
+const Provider = ({
+  children,
+  context,
+  inheritedContext
+}) => {
+  const mergedContext = {
+    ...inheritedContext,
+    ...context
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Provider, { value: mergedContext, children });
+};
+const ShellContextProvider = ({
+  children,
+  value
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Consumer, { children: (context) => /* @__PURE__ */ jsxRuntime.jsx(Provider, { context: value, inheritedContext: context, children }) });
+};
+const useShellContext = () => {
+  return React.useContext(ShellContext);
+};
+
+exports.ShellContextProvider = ShellContextProvider;
+exports.useShellContext = useShellContext;
+//# sourceMappingURL=ShellContextProvider.js.map

package/cjs/ShellContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellContextProvider.js","sources":["../src/ShellContextProvider.tsx"],"sourcesContent":["import {\n  DefaultColumnConfiguration,\n  ListOption,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { RpcResponseHandler } from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactElement, ReactNode, useContext } from \"react\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nexport type LookupTableProvider = (table: VuuTable) => ListOption[];\n\nexport interface ShellContextProps {\n  getDefaultColumnConfig?: DefaultColumnConfiguration;\n  getLookupValues?: LookupTableProvider;\n  handleRpcResponse?: RpcResponseHandler;\n}\n\nconst defaultConfig = {};\n\nconst ShellContext = createContext<ShellContextProps>(defaultConfig);\n\nexport interface ShellProviderProps {\n  children: ReactNode;\n  value?: ShellContextProps;\n}\n\nconst Provider = ({\n  children,\n  context,\n  inheritedContext,\n}: {\n  children: ReactNode;\n  context?: ShellContextProps;\n  inheritedContext?: ShellContextProps;\n}) => {\n  // TODO functions provided at multiple levels must be merged\n  const mergedContext = {\n    ...inheritedContext,\n    ...context,\n  };\n  return (\n    <ShellContext.Provider value={mergedContext}>\n      {children}\n    </ShellContext.Provider>\n  );\n};\n\nexport const ShellContextProvider = ({\n  children,\n  value,\n}: ShellProviderProps): ReactElement => {\n  return (\n    <ShellContext.Consumer>\n      {(context) => (\n        <Provider context={value} inheritedContext={context}>\n          {children}\n        </Provider>\n      )}\n    </ShellContext.Consumer>\n  );\n};\n\nexport const useShellContext = () => {\n  return useContext(ShellContext);\n};\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAgBA,MAAM,gBAAgB,EAAC,CAAA;AAEvB,MAAM,YAAA,GAAeA,oBAAiC,aAAa,CAAA,CAAA;AAOnE,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA;AACF,CAIM,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,GAAG,gBAAA;AAAA,IACH,GAAG,OAAA;AAAA,GACL,CAAA;AACA,EAAA,sCACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,eAC3B,QACH,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AACF,CAAwC,KAAA;AACtC,EAAA,uBACGC,cAAA,CAAA,YAAA,CAAa,QAAb,EAAA,EACE,QAAC,EAAA,CAAA,OAAA,qBACCA,cAAA,CAAA,QAAA,EAAA,EAAS,OAAS,EAAA,KAAA,EAAO,gBAAkB,EAAA,OAAA,EACzC,UACH,CAEJ,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,kBAAkB,MAAM;AACnC,EAAA,OAAOC,iBAAW,YAAY,CAAA,CAAA;AAChC;;;;;"}

package/cjs/app-header/AppHeader.css

@@ -0,0 +1,24 @@
+.vuuAppHeader {
+  --saltButton-borderRadius: 6px;
+  --saltButton-text-color: var(--vuu-color-gray-50);
+  --saltButton-padding: 12px;
+  --vuuToolbarItem-height: 26px;
+  --vuuOverflowContainer-gap: 8px;
+  --vuu-icon-color: var(--vuu-color-gray-45);
+  --vuu-icon-size: 16px;
+  --vuuToolbar-background: var(--vuuAppHeader-background, var(--vuu-color-gray-28));
+  --vuuToolbar-borderWidth: 1px;
+  --vuuToolbar-borderStyle: solid; 
+  --vuuToolbar-borderColor: var(--vuu-color-gray-30);
+
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.vuu-theme .vuuAppHeader {
+  border-radius: 8px;
+   
+  margin-bottom: 8px;
+}
+

package/cjs/app-header/AppHeader.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var cx = require('clsx');
+var core = require('@salt-ds/core');
+var loginUtils = require('../login/login-utils.js');
+
+const classBase = "vuuAppHeader";
+const AppHeader = ({
+  className: classNameProp,
+  layoutId,
+  loginUrl,
+  onNavigate,
+  onSwitchTheme,
+  themeMode: _,
+  user,
+  ...htmlAttributes
+}) => {
+  const className = cx(classBase, classNameProp);
+  const handleLogout = React.useCallback(() => {
+    loginUtils.logout(loginUrl);
+  }, [loginUrl]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    vuuUiControls.Toolbar,
+    {
+      alignItems: "end",
+      className,
+      showSeparators: true,
+      ...htmlAttributes,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.Button, { className: `${classBase}-menuItem`, variant: "secondary", children: "Help" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Button, { className: `${classBase}-menuItem`, variant: "secondary", children: [
+          "History ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "history" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Button, { className: `${classBase}-menuItem`, variant: "secondary", children: [
+          "View ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "settings" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Button,
+          {
+            className: `${classBase}-menuItem`,
+            onClick: handleLogout,
+            variant: "secondary",
+            children: "Log out"
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.AppHeader = AppHeader;
+//# sourceMappingURL=AppHeader.js.map

package/cjs/app-header/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sources":["../../src/app-header/AppHeader.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback } from \"react\";\nimport { VuuUser } from \"../shell\";\n// import { UserProfile } from \"../user-profile\";\n// import { ThemeSwitch } from \"../theme-switch\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { logout } from \"../login\";\n\nimport { Button } from \"@salt-ds/core\";\nimport \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  layoutId: string;\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  onSwitchTheme?: (mode: ThemeMode) => void;\n  themeMode?: ThemeMode;\n  user: VuuUser;\n}\n\nexport const AppHeader = ({\n  className: classNameProp,\n  layoutId,\n  loginUrl,\n  onNavigate,\n  onSwitchTheme,\n  themeMode: _,\n  user,\n  ...htmlAttributes\n}: AppHeaderProps) => {\n  const className = cx(classBase, classNameProp);\n  // const handleSwitchTheme = useCallback(\n  //   (mode: ThemeMode) => onSwitchTheme?.(mode),\n  //   [onSwitchTheme]\n  // );\n\n  const handleLogout = useCallback(() => {\n    logout(loginUrl);\n  }, [loginUrl]);\n\n  return (\n    <Toolbar\n      alignItems=\"end\"\n      className={className}\n      showSeparators\n      {...htmlAttributes}\n    >\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        Help\n      </Button>\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        History <span data-icon=\"history\" />\n      </Button>\n      <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n        View <span data-icon=\"settings\" />\n      </Button>\n      <Button\n        className={`${classBase}-menuItem`}\n        onClick={handleLogout}\n        variant=\"secondary\"\n      >\n        Log out\n      </Button>\n      {/* <ThemeSwitch\n        data-align=\"right\"\n        defaultMode={themeMode}\n        onChange={handleSwitchTheme}\n      /> */}\n      {/* <UserProfile\n        layoutId={layoutId}\n        loginUrl={loginUrl}\n        onNavigate={onNavigate}\n        user={user}\n      /> */}\n    </Toolbar>\n  );\n};\n"],"names":["useCallback","logout","jsxs","Toolbar","jsx","Button"],"mappings":";;;;;;;;;AAYA,MAAM,SAAY,GAAA,cAAA,CAAA;AAUX,MAAM,YAAY,CAAC;AAAA,EACxB,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAW,EAAA,CAAA;AAAA,EACX,IAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAM7C,EAAM,MAAA,YAAA,GAAeA,kBAAY,MAAM;AACrC,IAAAC,iBAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EACE,uBAAAC,eAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,KAAA;AAAA,MACX,SAAA;AAAA,MACA,cAAc,EAAA,IAAA;AAAA,MACb,GAAG,cAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,eAAO,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,SAAA,CAAA,EAAA,OAAA,EAAQ,aAAY,QAEhE,EAAA,MAAA,EAAA,CAAA;AAAA,wCACCA,WAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,0BACtDD,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,SAAU,EAAA,CAAA;AAAA,SACpC,EAAA,CAAA;AAAA,wCACCC,WAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,0BACzDD,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,UAAW,EAAA,CAAA;AAAA,SAClC,EAAA,CAAA;AAAA,wBACAA,cAAA;AAAA,UAACC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,YAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA,SAAA;AAAA,WAAA;AAAA,SAED;AAAA,OAAA;AAAA,KAAA;AAAA,GAYF,CAAA;AAEJ;;;;"}

package/cjs/connection-status/ConnectionStatusIcon.css

@@ -0,0 +1,68 @@
+.vuuStatus-container {
+	display: flex;
+}
+
+.vuuStatus-text {
+	align-self: center;
+}
+
+
+.vuuStatus {
+	--vuu-icon-height: 18px;
+	--vuu-icon-padding: var(--vuuStatus-padding, 6px);
+	--vuu-icon-width: var(--vuuStatus-width, auto);
+	--vuu-icon-min-width: var(--vuuStatus-min-width, 20px);
+	align-items: center;
+	display: inline-flex;
+	height: var(--vuu-icon-height);
+	justify-content: center;
+	min-width: var(--vuu-icon-min-width);
+	padding: 0 var(--vuu-icon-padding);
+	width: var(--vuu-icon-width);
+	position: relative;
+}
+
+.vuuStatus[data-icon]::after {
+	inset: 0 0 0 0;
+	content: '';
+	box-shadow: 0 0 0 0 black;
+	position: absolute;
+	mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
+	-webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
+}
+
+.vuuActiveStatus::after {
+	--vuu-icon-svg: var(--svg-active-status);
+	background-color: rgb(0, 255, 0);
+}
+
+.vuuConnectingStatus::after {
+	--vuu-icon-svg: var(--svg-connecting-status);
+	background-color: orange;
+	transform: scale(1);
+	animation: infinite pulse 1s;
+}
+
+.vuuDisconnectedStatus::after {
+	--vuu-icon-svg: var(--svg-disconnected-status);
+	background-color: red;
+	transform: scale(1);
+	animation: infinite pulse 0.5s;
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale(0.95);
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+	}
+
+	70% {
+		transform: scale(1);
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+	}
+
+	100% {
+		transform: scale(0.95);
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+	}
+}

package/cjs/connection-status/ConnectionStatusIcon.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('clsx');
+
+const ConnectionStatusIcon = ({
+  connectionStatus,
+  className,
+  element = "span",
+  ...props
+}) => {
+  const [classBase, setClassBase] = React.useState("vuuConnectingStatus");
+  React.useEffect(() => {
+    switch (connectionStatus) {
+      case "connected":
+      case "reconnected":
+        setClassBase("vuuActiveStatus");
+        break;
+      case "connecting":
+        setClassBase("vuuConnectingStatus");
+        break;
+      case "disconnected":
+        setClassBase("vuuDisconnectedStatus");
+        break;
+    }
+  }, [connectionStatus]);
+  const statusIcon = React.createElement(element, {
+    ...props,
+    className: cx("vuuStatus vuuIcon", classBase, className)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vuuStatus-container salt-theme", children: [
+    statusIcon,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vuuStatus-text", children: [
+      "Status: ",
+      connectionStatus.toUpperCase()
+    ] })
+  ] }) });
+};
+
+exports.ConnectionStatusIcon = ConnectionStatusIcon;
+//# sourceMappingURL=ConnectionStatusIcon.js.map

package/cjs/connection-status/ConnectionStatusIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionStatusIcon.js","sources":["../../src/connection-status/ConnectionStatusIcon.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport \"./ConnectionStatusIcon.css\";\n\ntype connectionStatus =\n  | \"connected\"\n  | \"reconnected\"\n  | \"connecting\"\n  | \"disconnected\";\n\ninterface ConnectionStatusProps {\n  connectionStatus: connectionStatus;\n  className?: string;\n  props?: unknown;\n  element?: string;\n}\n\nexport const ConnectionStatusIcon = ({\n  connectionStatus,\n  className,\n  element = \"span\",\n  ...props\n}: ConnectionStatusProps) => {\n  const [classBase, setClassBase] = useState<string>(\"vuuConnectingStatus\");\n  useEffect(() => {\n    switch (connectionStatus) {\n      case \"connected\":\n      case \"reconnected\":\n        setClassBase(\"vuuActiveStatus\");\n        break;\n      case \"connecting\":\n        setClassBase(\"vuuConnectingStatus\");\n        break;\n      case \"disconnected\":\n        setClassBase(\"vuuDisconnectedStatus\");\n        break;\n      default:\n        break;\n    }\n  }, [connectionStatus]);\n\n  const statusIcon = React.createElement(element, {\n    ...props,\n    className: cx(\"vuuStatus vuuIcon\", classBase, className),\n  });\n\n  return (\n    <>\n      <div className=\"vuuStatus-container salt-theme\">\n        {statusIcon}\n        <div className=\"vuuStatus-text\">\n          Status: {connectionStatus.toUpperCase()}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["useState","useEffect","jsx","Fragment","jsxs"],"mappings":";;;;;;AAkBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,MAAA;AAAA,EACV,GAAG,KAAA;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAiB,qBAAqB,CAAA,CAAA;AACxE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,QAAQ,gBAAkB;AAAA,MACxB,KAAK,WAAA,CAAA;AAAA,MACL,KAAK,aAAA;AACH,QAAA,YAAA,CAAa,iBAAiB,CAAA,CAAA;AAC9B,QAAA,MAAA;AAAA,MACF,KAAK,YAAA;AACH,QAAA,YAAA,CAAa,qBAAqB,CAAA,CAAA;AAClC,QAAA,MAAA;AAAA,MACF,KAAK,cAAA;AACH,QAAA,YAAA,CAAa,uBAAuB,CAAA,CAAA;AACpC,QAAA,MAAA;AAEA,KACJ;AAAA,GACF,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,UAAA,GAAa,KAAM,CAAA,aAAA,CAAc,OAAS,EAAA;AAAA,IAC9C,GAAG,KAAA;AAAA,IACH,SAAW,EAAA,EAAA,CAAG,mBAAqB,EAAA,SAAA,EAAW,SAAS,CAAA;AAAA,GACxD,CAAA,CAAA;AAED,EAAA,uBAEIC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,kBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gCACZ,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA;AAAA,oBACDA,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gBAAiB,EAAA,QAAA,EAAA;AAAA,MAAA,UAAA;AAAA,MACrB,iBAAiB,WAAY,EAAA;AAAA,KACxC,EAAA,CAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/feature/Feature.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var FeatureErrorBoundary = require('./FeatureErrorBoundary.js');
+var Loader = require('./Loader.js');
+var cssModuleLoader = require('./css-module-loader.js');
+
+const componentsMap = /* @__PURE__ */ new Map();
+const useCachedFeature = (url) => {
+  React.useEffect(
+    () => () => {
+      componentsMap.delete(url);
+    },
+    [url]
+  );
+  if (!componentsMap.has(url)) {
+    componentsMap.set(
+      url,
+      React.lazy(() => import(
+        /* @vite-ignore */
+        url
+      ))
+    );
+  }
+  const lazyFeature = componentsMap.get(url);
+  if (!lazyFeature) {
+    throw Error(`Unable to load Lazy Feature at url ${url}`);
+  } else {
+    return lazyFeature;
+  }
+};
+function RawFeature({
+  url,
+  css,
+  ComponentProps: params,
+  ...props
+}) {
+  if (css) {
+    cssModuleLoader.importCSS(css).then((styleSheet) => {
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        styleSheet
+      ];
+    });
+  }
+  const LazyFeature = useCachedFeature(url);
+  return /* @__PURE__ */ jsxRuntime.jsx(FeatureErrorBoundary.FeatureErrorBoundary, { url, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, {}), children: /* @__PURE__ */ jsxRuntime.jsx(LazyFeature, { ...props, ...params }) }) });
+}
+const Feature = React.memo(RawFeature);
+Feature.displayName = "Feature";
+vuuLayout.registerComponent("Feature", Feature, "view");
+
+exports.Feature = Feature;
+//# sourceMappingURL=Feature.js.map

package/cjs/feature/Feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feature.js","sources":["../../src/feature/Feature.tsx"],"sourcesContent":["import React, { Suspense, useEffect } from \"react\";\nimport { registerComponent, ViewProps } from \"@vuu-ui/vuu-layout\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\nimport { Loader } from \"./Loader\";\nimport { importCSS } from \"./css-module-loader\";\n\n/**\n * Ensure we never lazy load the same component more than once\n */\nconst componentsMap = new Map<string, ReturnType<typeof React.lazy>>();\nconst useCachedFeature = (url: string) => {\n  useEffect(\n    () => () => {\n      componentsMap.delete(url);\n    },\n    [url]\n  );\n\n  if (!componentsMap.has(url)) {\n    componentsMap.set(\n      url,\n      React.lazy(() => import(/* @vite-ignore */ url))\n    );\n  }\n\n  const lazyFeature = componentsMap.get(url);\n\n  if (!lazyFeature) {\n    throw Error(`Unable to load Lazy Feature at url ${url}`);\n  } else {\n    return lazyFeature;\n  }\n};\n\nexport interface FeatureProps<P extends object | undefined = any> {\n  /**\n    props that will be passed to the lazily loaded component.\n   */\n  ComponentProps?: P;\n  ViewProps?: Partial<Pick<ViewProps, \"closeable\" | \"header\">>;\n  css?: string;\n  height?: number;\n  title?: string;\n  /** \n   The url of javascript bundle to lazily load. Bundle must provide a default export\n   and that export must be a React component.\n   */\n  url: string;\n  width?: number;\n}\n\nfunction RawFeature<Params extends object | undefined>({\n  url,\n  css,\n  ComponentProps: params,\n  ...props\n}: FeatureProps<Params>) {\n  // useEffect(() => {\n  //   console.log(\"%cFeature mount\", \"color: green;\");\n  //   return () => {\n  //     console.log(\"%cFeature unmount\", \"color:red;\");\n  //   };\n  // }, []);\n\n  if (css) {\n    //   import(/* @vite-ignore */ css, { assert: { type: \"css\" } }).then(\n    //     (cssModule) => {\n    //       console.log(\"%cInject Styles\", \"color: blue;font-weight: bold\");\n    //       document.adoptedStyleSheets = [\n    //         ...document.adoptedStyleSheets,\n    //         cssModule.default,\n    //       ];\n    //     }\n    //   );\n    // Polyfill until cypress build supports import assertions\n    // Note: already fully supported in esbuild and vite\n    importCSS(css).then((styleSheet) => {\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        styleSheet,\n      ];\n    });\n  }\n\n  const LazyFeature = useCachedFeature(url);\n  return (\n    <FeatureErrorBoundary url={url}>\n      <Suspense fallback={<Loader />}>\n        <LazyFeature {...props} {...params} />\n      </Suspense>\n    </FeatureErrorBoundary>\n  );\n}\n\n/**\n  Feature is a wrapper around React Lazy Loading. It will load a component\n  from the given url. That url must resolve to a javascript bundle with a\n  single default export. That export must be a React component.\n */\nexport const Feature = React.memo(RawFeature);\nFeature.displayName = \"Feature\";\nregisterComponent(\"Feature\", Feature, \"view\");\n"],"names":["useEffect","importCSS","FeatureErrorBoundary","jsx","Suspense","Loader","registerComponent"],"mappings":";;;;;;;;;AASA,MAAM,aAAA,uBAAoB,GAA2C,EAAA,CAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAAA,eAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,aAAA,CAAc,OAAO,GAAG,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,GAAG,CAAA;AAAA,GACN,CAAA;AAEA,EAAA,IAAI,CAAC,aAAA,CAAc,GAAI,CAAA,GAAG,CAAG,EAAA;AAC3B,IAAc,aAAA,CAAA,GAAA;AAAA,MACZ,GAAA;AAAA,MACA,KAAA,CAAM,KAAK,MAAM;AAAA;AAAA,QAA0B,GAAA;AAAA,OAAI,CAAA;AAAA,KACjD,CAAA;AAAA,GACF;AAEA,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,GAAA,CAAI,GAAG,CAAA,CAAA;AAEzC,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,KAAA,CAAM,CAAsC,mCAAA,EAAA,GAAG,CAAE,CAAA,CAAA,CAAA;AAAA,GAClD,MAAA;AACL,IAAO,OAAA,WAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAmBA,SAAS,UAA8C,CAAA;AAAA,EACrD,GAAA;AAAA,EACA,GAAA;AAAA,EACA,cAAgB,EAAA,MAAA;AAAA,EAChB,GAAG,KAAA;AACL,CAAyB,EAAA;AAQvB,EAAA,IAAI,GAAK,EAAA;AAYP,IAAAC,yBAAA,CAAU,GAAG,CAAA,CAAE,IAAK,CAAA,CAAC,UAAe,KAAA;AAClC,MAAA,QAAA,CAAS,kBAAqB,GAAA;AAAA,QAC5B,GAAG,QAAS,CAAA,kBAAA;AAAA,QACZ,UAAA;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAM,MAAA,WAAA,GAAc,iBAAiB,GAAG,CAAA,CAAA;AACxC,EAAA,sCACGC,yCAAqB,EAAA,EAAA,GAAA,EACpB,QAAC,kBAAAC,cAAA,CAAAC,cAAA,EAAA,EAAS,0BAAWD,cAAA,CAAAE,aAAA,EAAA,EAAO,CAC1B,EAAA,QAAA,kBAAAF,cAAA,CAAC,eAAa,GAAG,KAAA,EAAQ,GAAG,MAAA,EAAQ,GACtC,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA;AAOa,MAAA,OAAA,GAAU,KAAM,CAAA,IAAA,CAAK,UAAU,EAAA;AAC5C,OAAA,CAAQ,WAAc,GAAA,SAAA,CAAA;AACtBG,2BAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}

package/cjs/feature/FeatureErrorBoundary.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+class FeatureErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { errorMessage: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { errorMessage: error.message };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.log(`error creating component at ${this.props.url}`);
+    console.log(error, errorInfo);
+  }
+  render() {
+    if (this.state.errorMessage) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { children: "An error occured while creating component." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+}
+
+exports.FeatureErrorBoundary = FeatureErrorBoundary;
+//# sourceMappingURL=FeatureErrorBoundary.js.map

package/cjs/feature/FeatureErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureErrorBoundary.js","sources":["../../src/feature/FeatureErrorBoundary.tsx"],"sourcesContent":["import React, { ErrorInfo, ReactNode } from \"react\";\nimport { FeatureProps } from \"./Feature\";\n\nexport interface FeatureErrorBoundaryProps extends FeatureProps {\n  children: ReactNode;\n}\n\nexport class FeatureErrorBoundary extends React.Component<\n  FeatureErrorBoundaryProps,\n  any\n> {\n  constructor(props: FeatureErrorBoundaryProps) {\n    super(props);\n    this.state = { errorMessage: null };\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    // Update state so the next render will show the fallback UI.\n    return { errorMessage: error.message };\n  }\n\n  componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    // You can also log the error to an error reporting service\n    console.log(`error creating component at ${this.props.url}`);\n    console.log(error, errorInfo);\n  }\n\n  render() {\n    if (this.state.errorMessage) {\n      return (\n        <>\n          <h1>An error occured while creating component.</h1>\n          <p>{this.state.errorMessage}</p>\n        </>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;AAOa,MAAA,oBAAA,SAA6B,MAAM,SAG9C,CAAA;AAAA,EACA,YAAY,KAAkC,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,YAAA,EAAc,IAAK,EAAA,CAAA;AAAA,GACpC;AAAA,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAE5C,IAAO,OAAA,EAAE,YAAc,EAAA,KAAA,CAAM,OAAQ,EAAA,CAAA;AAAA,GACvC;AAAA,EAEA,iBAAA,CAAkB,OAAc,SAAsB,EAAA;AAEpD,IAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,4BAAA,EAA+B,IAAK,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,CAAA,CAAA;AAC3D,IAAQ,OAAA,CAAA,GAAA,CAAI,OAAO,SAAS,CAAA,CAAA;AAAA,GAC9B;AAAA,EAEA,MAAS,GAAA;AACP,IAAI,IAAA,IAAA,CAAK,MAAM,YAAc,EAAA;AAC3B,MAAA,uBAEIA,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,QAAG,QAA0C,EAAA,4CAAA,EAAA,CAAA;AAAA,wBAC7CA,cAAA,CAAA,GAAA,EAAA,EAAG,QAAK,EAAA,IAAA,CAAA,KAAA,CAAM,YAAa,EAAA,CAAA;AAAA,OAC9B,EAAA,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,OAAO,KAAK,KAAM,CAAA,QAAA,CAAA;AAAA,GACpB;AACF;;;;"}

package/cjs/feature/Loader.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const Loader = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hwLoader" });
+
+exports.Loader = Loader;
+//# sourceMappingURL=Loader.js.map

package/cjs/feature/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sources":["../../src/feature/Loader.tsx"],"sourcesContent":["// TODO\nexport const Loader = () => <div className=\"hwLoader\"></div>;\n"],"names":["jsx"],"mappings":";;;;AACO,MAAM,MAAS,GAAA,sBAAOA,cAAA,CAAA,KAAA,EAAA,EAAI,WAAU,UAAW,EAAA;;;;"}

package/cjs/feature/css-module-loader.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const importCSS = async (path) => {
+  const container = new CSSStyleSheet();
+  return fetch(path).then((x) => x.text()).then((x) => container.replace(x));
+};
+
+exports.importCSS = importCSS;
+//# sourceMappingURL=css-module-loader.js.map

package/cjs/feature/css-module-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-module-loader.js","sources":["../../src/feature/css-module-loader.ts"],"sourcesContent":["export const importCSS = async (path: string) => {\n  const container = new CSSStyleSheet();\n  return fetch(path)\n    .then((x) => x.text())\n    .then((x) => container.replace(x));\n};\n"],"names":[],"mappings":";;AAAa,MAAA,SAAA,GAAY,OAAO,IAAiB,KAAA;AAC/C,EAAM,MAAA,SAAA,GAAY,IAAI,aAAc,EAAA,CAAA;AACpC,EAAA,OAAO,MAAM,IAAI,CAAA,CACd,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,IAAA,EAAM,CAAA,CACpB,KAAK,CAAC,CAAA,KAAM,SAAU,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA;AACrC;;;;"}

package/cjs/feature-list/FeatureList.css

@@ -0,0 +1,21 @@
+.vuuFeatureList {
+    background: var(--vuuFeatureList-background, var(--salt-container-primary-background));
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 195px 32px 16px 24px;
+}
+
+.vuuFeatureList-header {
+    flex: 0 0 40px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 2;
+}
+
+.vuuFeatureList-content {
+    flex: 1 1 auto;
+    font-size: 12px;
+    font-weight: 700;
+}
+

package/cjs/feature-list/FeatureList.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuLayout = require('@vuu-ui/vuu-layout');
+var Feature = require('../feature/Feature.js');
+
+const classBase = "vuuFeatureList";
+const FeatureList = ({
+  features,
+  title = "VUU TABLES",
+  ...htmlAttributes
+}) => {
+  const ViewProps = {};
+  const listProps = {
+    height: "100%"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      vuuLayout.Palette,
+      {
+        orientation: "vertical",
+        ListProps: listProps,
+        ViewProps,
+        children: features.map((featureProps, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          vuuLayout.PaletteItem,
+          {
+            closeable: true,
+            label: featureProps.title,
+            resizeable: true,
+            resize: "defer",
+            header: true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps })
+          },
+          i
+        ))
+      }
+    ) })
+  ] });
+};
+
+exports.FeatureList = FeatureList;
+//# sourceMappingURL=FeatureList.js.map

package/cjs/feature-list/FeatureList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureList.js","sources":["../../src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { ListProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes } from \"react\";\nimport { Feature, FeatureProps } from \"../feature/Feature\";\n\nimport \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport interface FeatureListProps extends HTMLAttributes<HTMLDivElement> {\n  features: FeatureProps[];\n}\n\nexport const FeatureList = ({\n  features,\n  title = \"VUU TABLES\",\n  ...htmlAttributes\n}: FeatureListProps) => {\n  const ViewProps = {};\n\n  const listProps: Partial<ListProps> = {\n    height: \"100%\",\n  };\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <div className={`${classBase}-header`}>{title}</div>\n      <div className={`${classBase}-content`}>\n        <Palette\n          orientation=\"vertical\"\n          ListProps={listProps}\n          ViewProps={ViewProps}\n        >\n          {features.map((featureProps, i) => (\n            <PaletteItem\n              closeable\n              key={i}\n              label={featureProps.title}\n              resizeable\n              resize=\"defer\"\n              header\n            >\n              <Feature {...featureProps} />\n            </PaletteItem>\n          ))}\n        </Palette>\n      </div>\n    </div>\n  );\n};\n"],"names":["jsxs","jsx","Palette","PaletteItem","Feature"],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAMX,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,KAAQ,GAAA,YAAA;AAAA,EACR,GAAG,cAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,YAAY,EAAC,CAAA;AAEnB,EAAA,MAAM,SAAgC,GAAA;AAAA,IACpC,MAAQ,EAAA,MAAA;AAAA,GACV,CAAA;AAEA,EAAA,uBACGA,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,WAAY,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,oBAC7CA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAACC,iBAAA;AAAA,MAAA;AAAA,QACC,WAAY,EAAA,UAAA;AAAA,QACZ,SAAW,EAAA,SAAA;AAAA,QACX,SAAA;AAAA,QAEC,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,CAAC,YAAA,EAAc,CAC3B,qBAAAD,cAAA;AAAA,UAACE,qBAAA;AAAA,UAAA;AAAA,YACC,SAAS,EAAA,IAAA;AAAA,YAET,OAAO,YAAa,CAAA,KAAA;AAAA,YACpB,UAAU,EAAA,IAAA;AAAA,YACV,MAAO,EAAA,OAAA;AAAA,YACP,MAAM,EAAA,IAAA;AAAA,YAEN,QAAA,kBAAAF,cAAA,CAACG,eAAS,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AAAA,WAAA;AAAA,UANtB,CAAA;AAAA,SAQR,CAAA;AAAA,OAAA;AAAA,KAEL,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/layout-management/LayoutList.css

@@ -0,0 +1,86 @@
+.vuuLayoutList {
+    --vuuLayoutList-width: 90%;
+    --vuuMeasuredContainer-flex: 1 1 1px;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    padding-right: 6px;
+
+    /* compatible with Chrome, Edge, and Safari */
+    ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background: #D9D9D9;
+    }
+}
+
+.vuuLayoutList-header {
+    display: flex;
+    flex: 0 0 47px;
+    width: var(--vuuLayoutList-width);
+    padding: 16px 0;
+    border-bottom: 1px solid rgba(119, 124, 148, 0.10);
+    color: var(--light-text-primary, #15171B);
+    font-weight: 700;
+    letter-spacing: 0.48px;
+    line-height: 200%;
+    text-transform: uppercase;
+}
+
+.vuuLayoutList-groupName {
+    display: flex;
+    padding-top: 24px;
+    width: var(--vuuLayoutList-width);
+    color: var(--light-text-secondary, #606477);
+    font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+    font-family: Nunito Sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 200%;
+    letter-spacing: 0.48px;
+    text-transform: uppercase;
+}
+
+.vuuLayoutList-layoutContainer {
+    display: flex;
+    align-items: center;
+    width: 90%;
+    height: auto;
+    gap: 8px;
+    padding: 8px 0;
+    flex: 1 1 auto;
+    cursor: pointer;
+}
+
+.vuuLayoutList-layoutName {
+    color: var(--light-text-primary, #15171B);
+    font-weight: 600;
+    line-height: 133.333%;
+    text-transform: capitalize;
+}
+
+.vuuLayoutList-screenshot {
+    width: 60px;
+    height: 45.6px;
+    border: 1px solid #D6D7DA;
+}
+
+.vuuLayoutList-layoutDetails {
+    color: var(--light-text-secondary, #606477);
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 150%;
+}

package/cjs/layout-management/LayoutList.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var useLayoutManager = require('./useLayoutManager.js');
+var LayoutTile = require('./LayoutTile.js');
+
+const classBase = "vuuLayoutList";
+const LayoutList = (props) => {
+  const { layoutMetadata, loadLayoutById } = useLayoutManager.useLayoutManager();
+  const handleLoadLayout = (layoutId) => {
+    if (layoutId) {
+      loadLayoutById(layoutId);
+    }
+  };
+  const layoutsByGroup = layoutMetadata.reduce((acc, cur) => {
+    if (acc[cur.group]) {
+      return {
+        ...acc,
+        [cur.group]: [...acc[cur.group], cur]
+      };
+    }
+    return {
+      ...acc,
+      [cur.group]: [cur]
+    };
+  }, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classBase,
+      ...props,
+      role: "listbox",
+      "aria-label": "my layouts",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: "My Layouts" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.List,
+          {
+            height: "auto",
+            source: Object.entries(layoutsByGroup),
+            ListItem: ({ item }) => {
+              if (!item)
+                return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+              const [groupName, layoutMetadata2] = item;
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "list", "aria-label": groupName, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-groupName`, children: groupName }),
+                layoutMetadata2.map((metadata) => /* @__PURE__ */ jsxRuntime.jsx(
+                  LayoutTile.LayoutTile,
+                  {
+                    metadata,
+                    handleLoadLayout
+                  },
+                  metadata.id
+                ))
+              ] });
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.LayoutList = LayoutList;
+//# sourceMappingURL=LayoutList.js.map

package/cjs/layout-management/LayoutList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutList.js","sources":["../../src/layout-management/LayoutList.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { List } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutMetadata } from \"./layoutTypes\";\nimport { useLayoutManager } from \"./useLayoutManager\";\nimport { LayoutTile } from \"./LayoutTile\";\n\nimport \"./LayoutList.css\";\n\ntype LayoutGroups = {\n  [groupName: string]: LayoutMetadata[];\n};\n\nconst classBase = \"vuuLayoutList\";\n\nexport const LayoutList = (props: HTMLAttributes<HTMLDivElement>) => {\n  const { layoutMetadata, loadLayoutById } = useLayoutManager();\n\n  const handleLoadLayout = (layoutId?: string) => {\n    if (layoutId) {\n      loadLayoutById(layoutId);\n    }\n  };\n\n  const layoutsByGroup = layoutMetadata.reduce((acc: LayoutGroups, cur) => {\n    if (acc[cur.group]) {\n      return {\n        ...acc,\n        [cur.group]: [...acc[cur.group], cur],\n      };\n    }\n    return {\n      ...acc,\n      [cur.group]: [cur],\n    };\n  }, {});\n\n  return (\n    <div\n      className={classBase}\n      {...props}\n      role=\"listbox\"\n      aria-label=\"my layouts\"\n    >\n      <div className={`${classBase}-header`}>My Layouts</div>\n      <List<[string, LayoutMetadata[]]>\n        height=\"auto\"\n        source={Object.entries(layoutsByGroup)}\n        ListItem={({ item }) => {\n          if (!item) return <></>;\n          const [groupName, layoutMetadata] = item;\n          return (\n            <div role=\"list\" aria-label={groupName}>\n              <div className={`${classBase}-groupName`}>{groupName}</div>\n              {layoutMetadata.map((metadata) => (\n                <LayoutTile\n                  key={metadata.id}\n                  metadata={metadata}\n                  handleLoadLayout={handleLoadLayout}\n                />\n              ))}\n            </div>\n          );\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["useLayoutManager","jsxs","jsx","List","Fragment","layoutMetadata","LayoutTile"],"mappings":";;;;;;;AAYA,MAAM,SAAY,GAAA,eAAA,CAAA;AAEL,MAAA,UAAA,GAAa,CAAC,KAA0C,KAAA;AACnE,EAAA,MAAM,EAAE,cAAA,EAAgB,cAAe,EAAA,GAAIA,iCAAiB,EAAA,CAAA;AAE5D,EAAM,MAAA,gBAAA,GAAmB,CAAC,QAAsB,KAAA;AAC9C,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,cAAA,CAAe,QAAQ,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAA,cAAA,CAAe,MAAO,CAAA,CAAC,KAAmB,GAAQ,KAAA;AACvE,IAAI,IAAA,GAAA,CAAI,GAAI,CAAA,KAAK,CAAG,EAAA;AAClB,MAAO,OAAA;AAAA,QACL,GAAG,GAAA;AAAA,QACH,CAAC,GAAI,CAAA,KAAK,GAAG,CAAC,GAAG,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA,EAAG,GAAG,CAAA;AAAA,OACtC,CAAA;AAAA,KACF;AACA,IAAO,OAAA;AAAA,MACL,GAAG,GAAA;AAAA,MACH,CAAC,GAAA,CAAI,KAAK,GAAG,CAAC,GAAG,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACV,GAAG,KAAA;AAAA,MACJ,IAAK,EAAA,SAAA;AAAA,MACL,YAAW,EAAA,YAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,WAAW,QAAU,EAAA,YAAA,EAAA,CAAA;AAAA,wBACjDA,cAAA;AAAA,UAACC,kBAAA;AAAA,UAAA;AAAA,YACC,MAAO,EAAA,MAAA;AAAA,YACP,MAAA,EAAQ,MAAO,CAAA,OAAA,CAAQ,cAAc,CAAA;AAAA,YACrC,QAAU,EAAA,CAAC,EAAE,IAAA,EAAW,KAAA;AACtB,cAAA,IAAI,CAAC,IAAA;AAAM,gBAAA,uBAASD,cAAA,CAAAE,mBAAA,EAAA,EAAA,CAAA,CAAA;AACpB,cAAM,MAAA,CAAC,SAAWC,EAAAA,eAAc,CAAI,GAAA,IAAA,CAAA;AACpC,cAAA,uBACGJ,eAAA,CAAA,KAAA,EAAA,EAAI,IAAK,EAAA,MAAA,EAAO,cAAY,SAC3B,EAAA,QAAA,EAAA;AAAA,gCAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,cAAe,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,gBACpDG,eAAAA,CAAe,GAAI,CAAA,CAAC,QACnB,qBAAAH,cAAA;AAAA,kBAACI,qBAAA;AAAA,kBAAA;AAAA,oBAEC,QAAA;AAAA,oBACA,gBAAA;AAAA,mBAAA;AAAA,kBAFK,QAAS,CAAA,EAAA;AAAA,iBAIjB,CAAA;AAAA,eACH,EAAA,CAAA,CAAA;AAAA,aAEJ;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/cjs/layout-management/LayoutTile.css

@@ -0,0 +1,28 @@
+.vuuLayoutTile-layoutTile {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0px;
+  flex: 1 1 auto;
+  cursor: pointer;
+}
+
+.vuuLayoutTile-layoutName {
+  color: var(--light-text-primary, #15171B);
+  font-weight: 600;
+  line-height: 133.333%;
+  text-transform: capitalize;
+}
+
+.vuuLayoutTile-screenshot {
+  width: 60px;
+  height: 45.6px;
+  border: 1px solid #D6D7DA;
+}
+
+.vuuLayoutTile-layoutDetails {
+  color: var(--light-text-secondary, #606477);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 150%;
+}