@vuu-ui/vuu-shell 0.13.8 → 0.13.10

package/esm/app-status-bar/AppStatusBar.css.js

@@ -0,0 +1,4 @@
+var appStatusBarCss = ".vuuAppStatusBar {\n  align-items: center;\n  background-color: var(--salt-container-secondary-background);\n  display: flex;\n  height: 36px;\n  justify-content: flex-end;\n}\n.vuuAppStatusBar-hidden {\n  display: none;\n}\n";
+
+export { appStatusBarCss as default };
+//# sourceMappingURL=AppStatusBar.css.js.map

package/esm/app-status-bar/AppStatusBar.css.js.map

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

package/esm/app-status-bar/AppStatusBar.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { ConnectionManager } from '@vuu-ui/vuu-data-remote';
+import appStatusBarCss from './AppStatusBar.css.js';
+import { useUserSetting } from '../application-provider/ApplicationProvider.js';
+import { ConnectionStateDisplay } from '../connection-status/ConnectionStateDisplay.js';
+import '../connection-status/ConnectionStatusIndicator.js';
+import { useState, useEffect } from 'react';
+
+const classBase = "vuuAppStatusBar";
+const shouldShowStatusBar = (connected, settings) => {
+  if (settings && "showAppStatusBar" in settings) {
+    return settings.showAppStatusBar === true || connected === false;
+  } else {
+    return connected === false;
+  }
+};
+const ApplicationStatusBar = () => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-settings-form",
+    css: appStatusBarCss,
+    window: targetWindow
+  });
+  const [connected, setConnected] = useState(true);
+  const settings = useUserSetting();
+  useEffect(() => {
+    ConnectionManager.on("connection-status", ({ connectionStatus }) => {
+      if (connectionStatus === "disconnected") {
+        setConnected(false);
+      } else if (connectionStatus.endsWith("connected")) {
+        setConnected(true);
+      }
+    });
+  }, []);
+  if (!shouldShowStatusBar(connected, settings)) {
+    return /* @__PURE__ */ jsx("div", { className: cx(classBase, `${classBase}-hidden`) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classBase, children: /* @__PURE__ */ jsx(ConnectionStateDisplay, {}) });
+};
+
+export { ApplicationStatusBar };
+//# sourceMappingURL=AppStatusBar.js.map

package/esm/app-status-bar/AppStatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppStatusBar.js","sources":["../../src/app-status-bar/AppStatusBar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ConnectionManager } from \"@vuu-ui/vuu-data-remote\";\n\nimport appStatusBarCss from \"./AppStatusBar.css\";\nimport { useUserSetting } from \"../application-provider\";\nimport { Settings } from \"@vuu-ui/vuu-utils\";\nimport { ConnectionStateDisplay } from \"../connection-status\";\nimport { useEffect, useState } from \"react\";\n\nconst classBase = \"vuuAppStatusBar\";\n\nconst shouldShowStatusBar = (connected: boolean, settings?: Settings) => {\n  if (settings && \"showAppStatusBar\" in settings) {\n    return settings.showAppStatusBar === true || connected === false;\n  } else {\n    return connected === false;\n  }\n};\n\nexport const ApplicationStatusBar = () => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-settings-form\",\n    css: appStatusBarCss,\n    window: targetWindow,\n  });\n\n  const [connected, setConnected] = useState(true);\n  const settings = useUserSetting();\n\n  useEffect(() => {\n    ConnectionManager.on(\"connection-status\", ({ connectionStatus }) => {\n      if (connectionStatus === \"disconnected\") {\n        setConnected(false);\n      } else if (connectionStatus.endsWith(\"connected\")) {\n        setConnected(true);\n      }\n    });\n  }, []);\n\n  if (!shouldShowStatusBar(connected, settings)) {\n    return <div className={cx(classBase, `${classBase}-hidden`)} />;\n  }\n\n  // const connect = () => {\n  //   ConnectionManager.connect({\n  //     token: \"blah\",\n  //     url: \"ws://localhost:8090/websocket\",\n  //     username: \"steve\",\n  //   });\n  // };\n  // const disconnect = () => {\n  //   ConnectionManager.disconnect();\n  // };\n\n  return (\n    <div className={classBase}>\n      {/* <Button onClick={disconnect}>Disconnect</Button>\n      <Button onClick={connect}>Connect</Button> */}\n      <ConnectionStateDisplay />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAWA,MAAM,SAAY,GAAA,iBAAA;AAElB,MAAM,mBAAA,GAAsB,CAAC,SAAA,EAAoB,QAAwB,KAAA;AACvE,EAAI,IAAA,QAAA,IAAY,sBAAsB,QAAU,EAAA;AAC9C,IAAO,OAAA,QAAA,CAAS,gBAAqB,KAAA,IAAA,IAAQ,SAAc,KAAA,KAAA;AAAA,GACtD,MAAA;AACL,IAAA,OAAO,SAAc,KAAA,KAAA;AAAA;AAEzB,CAAA;AAEO,MAAM,uBAAuB,MAAM;AACxC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,IAAI,CAAA;AAC/C,EAAA,MAAM,WAAW,cAAe,EAAA;AAEhC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,iBAAA,CAAkB,EAAG,CAAA,mBAAA,EAAqB,CAAC,EAAE,kBAAuB,KAAA;AAClE,MAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,QAAA,YAAA,CAAa,KAAK,CAAA;AAAA,OACT,MAAA,IAAA,gBAAA,CAAiB,QAAS,CAAA,WAAW,CAAG,EAAA;AACjD,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA;AACnB,KACD,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAA,IAAI,CAAC,mBAAA,CAAoB,SAAW,EAAA,QAAQ,CAAG,EAAA;AAC7C,IAAO,uBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,EAAA,CAAG,WAAW,CAAG,EAAA,SAAS,SAAS,CAAG,EAAA,CAAA;AAAA;AAc/D,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,SAGd,EAAA,QAAA,kBAAA,GAAA,CAAC,0BAAuB,CAC1B,EAAA,CAAA;AAEJ;;;;"}

package/esm/application-provider/ApplicationContext.js

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+const Guest = {
+  username: "unknown",
+  token: ""
+};
+const ApplicationContext = createContext({
+  onUserSettingChanged: (propertyName) => console.warn(
+    `Cannot change setting '${propertyName}'.
+Did you forget to declare an ApplicationProvider ?`
+  ),
+  user: Guest
+});
+
+export { ApplicationContext };
+//# sourceMappingURL=ApplicationContext.js.map

package/esm/application-provider/ApplicationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationContext.js","sources":["../../src/application-provider/ApplicationContext.tsx"],"sourcesContent":["import type { Settings, VuuUser } from \"@vuu-ui/vuu-utils\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { createContext } from \"react\";\nimport { SettingsSchema } from \"../user-settings\";\n\nconst Guest: VuuUser = {\n  username: \"unknown\",\n  token: \"\",\n};\n\nexport interface ApplicationContextProps {\n  onUserSettingChanged: (\n    propertyName: string,\n    value: VuuRowDataItemType,\n  ) => void;\n  loginUrl?: string;\n  userSettings?: Settings;\n  userSettingsSchema?: SettingsSchema;\n  user: VuuUser;\n}\n\nexport const ApplicationContext = createContext<ApplicationContextProps>({\n  onUserSettingChanged: (propertyName: string) =>\n    console.warn(\n      `Cannot change setting '${propertyName}'.\\nDid you forget to declare an ApplicationProvider ?`,\n    ),\n  user: Guest,\n});\n"],"names":[],"mappings":";;AAKA,MAAM,KAAiB,GAAA;AAAA,EACrB,QAAU,EAAA,SAAA;AAAA,EACV,KAAO,EAAA;AACT,CAAA;AAaO,MAAM,qBAAqB,aAAuC,CAAA;AAAA,EACvE,oBAAA,EAAsB,CAAC,YAAA,KACrB,OAAQ,CAAA,IAAA;AAAA,IACN,0BAA0B,YAAY,CAAA;AAAA,kDAAA;AAAA,GACxC;AAAA,EACF,IAAM,EAAA;AACR,CAAC;;;;"}

package/esm/application-provider/ApplicationProvider.js

@@ -0,0 +1,98 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, useDensity, SaltProvider } from '@salt-ds/core';
+import { useContext, useState, useMemo, useCallback } from 'react';
+import { ApplicationContext } from './ApplicationContext.js';
+import { usePersistenceManager } from '../persistence-manager/PersistenceProvider.js';
+import '../persistence-manager/LocalPersistenceManager.js';
+import '@vuu-ui/vuu-ui-controls';
+import '@salt-ds/styles';
+import '@salt-ds/window';
+import 'clsx';
+import '@vuu-ui/vuu-utils';
+import '../persistence-manager/StaticPersistenceManager.js';
+
+const getThemeMode = (mode = "light", userSettings) => {
+  const themeMode = userSettings?.themeMode;
+  if (themeMode === "light" || themeMode === "dark") {
+    return themeMode;
+  }
+  return mode;
+};
+const ApplicationProvider = ({
+  children,
+  density: densityProp,
+  loginUrl,
+  mode,
+  theme,
+  userSettingsSchema,
+  user
+}) => {
+  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 userSettings2 = await persistenceManager.getUserSettings();
+      setSettings(userSettings2);
+    } 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,
+    {
+      value: {
+        ...context,
+        loginUrl,
+        onUserSettingChanged,
+        userSettings,
+        userSettingsSchema,
+        user: user ?? context.user
+      },
+      children: /* @__PURE__ */ jsx(
+        SaltProvider,
+        {
+          theme: theme ?? inheritedTheme ?? "vuu-theme",
+          density,
+          mode: getThemeMode(mode ?? inheritedMode, userSettings),
+          children
+        }
+      )
+    }
+  ) : null;
+};
+const useApplicationUser = () => {
+  const { user } = useContext(ApplicationContext);
+  return user;
+};
+const useLoginUrl = () => {
+  const { loginUrl } = useContext(ApplicationContext);
+  return loginUrl;
+};
+const useApplicationSettings = () => {
+  const { onUserSettingChanged, userSettings, userSettingsSchema } = useContext(ApplicationContext);
+  return {
+    onUserSettingChanged,
+    userSettings,
+    userSettingsSchema
+  };
+};
+const useUserSetting = () => {
+  const { userSettings } = useContext(ApplicationContext);
+  return userSettings;
+};
+
+export { ApplicationProvider, useApplicationSettings, useApplicationUser, useLoginUrl, useUserSetting };
+//# sourceMappingURL=ApplicationProvider.js.map

package/esm/application-provider/ApplicationProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationProvider.js","sources":["../../src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  Density,\n  Mode,\n  SaltProvider,\n  ThemeContextProps,\n  useDensity,\n  useTheme,\n} from \"@salt-ds/core\";\nimport {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  ApplicationContext,\n  ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-manager\";\n\nexport interface ApplicationProviderProps\n  extends Partial<Pick<ThemeContextProps, \"theme\" | \"mode\">>,\n    Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n  children: ReactNode;\n  density?: Density;\n}\n\nconst getThemeMode = (\n  mode: Mode = \"light\",\n  userSettings?: Record<string, string | number | boolean>,\n) => {\n  const themeMode = userSettings?.themeMode;\n  if (themeMode === \"light\" || themeMode === \"dark\") {\n    return themeMode;\n  }\n  return mode;\n};\n\nexport const ApplicationProvider = ({\n  children,\n  density: densityProp,\n  loginUrl,\n  mode,\n  theme,\n  userSettingsSchema: userSettingsSchema,\n  user,\n}: ApplicationProviderProps): ReactElement | null => {\n  const { mode: inheritedMode, theme: inheritedTheme } = useTheme();\n  const density = useDensity(densityProp);\n  const persistenceManager = usePersistenceManager();\n  const context = useContext(ApplicationContext);\n  const [userSettings, setSettings] =\n    useState<Record<string, string | number | boolean>>();\n\n  useMemo(async () => {\n    if (persistenceManager) {\n      const userSettings = await persistenceManager.getUserSettings();\n      setSettings(userSettings);\n    } else {\n      setSettings({});\n    }\n  }, [persistenceManager]);\n\n  const onUserSettingChanged = useCallback(\n    (propertyName: string, value: VuuRowDataItemType) => {\n      setSettings((currentSettings) => {\n        const newSettings = { ...currentSettings, [propertyName]: value };\n        persistenceManager?.saveUserSettings(newSettings);\n        return newSettings;\n      });\n    },\n    [persistenceManager],\n  );\n\n  return userSettings ? (\n    <ApplicationContext.Provider\n      value={{\n        ...context,\n        loginUrl,\n        onUserSettingChanged,\n        userSettings,\n        userSettingsSchema,\n        user: user ?? context.user,\n      }}\n    >\n      <SaltProvider\n        theme={theme ?? inheritedTheme ?? \"vuu-theme\"}\n        density={density}\n        mode={getThemeMode(mode ?? inheritedMode, userSettings)}\n      >\n        {children}\n      </SaltProvider>\n    </ApplicationContext.Provider>\n  ) : null;\n};\n\nexport const useApplicationUser = () => {\n  const { user } = useContext(ApplicationContext);\n  return user;\n};\n\nexport const useLoginUrl = () => {\n  const { loginUrl } = useContext(ApplicationContext);\n  return loginUrl;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n  const { onUserSettingChanged, userSettings, userSettingsSchema } =\n    useContext(ApplicationContext);\n  return {\n    onUserSettingChanged,\n    userSettings,\n    userSettingsSchema,\n  };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n  const { userSettings } = useContext(ApplicationContext);\n  return userSettings;\n};\n"],"names":["userSettings"],"mappings":"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"}

package/esm/connection-status/ConnectionRetryCountdown.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+
+const classBase = "vuuConnectionRetryCountdown";
+const ConnectionRetryCountdown = ({
+  seconds: secondsProp
+}) => {
+  const secondsRemainingRef = useRef(secondsProp);
+  const [seconds, setSeconds] = useState(secondsRemainingRef.current);
+  const countDown = useCallback(() => {
+    secondsRemainingRef.current -= 1;
+    setSeconds(secondsRemainingRef.current);
+    if (secondsRemainingRef.current > 0) {
+      setTimeout(countDown, 1e3);
+    }
+  }, []);
+  useEffect(() => {
+    if (secondsProp !== secondsRemainingRef.current) {
+      secondsRemainingRef.current = secondsProp;
+      countDown();
+    }
+  }, [countDown, secondsProp]);
+  useMemo(() => {
+    setTimeout(countDown, 1e3);
+  }, [countDown]);
+  return seconds === 0 ? /* @__PURE__ */ jsx("div", { className: classBase, children: /* @__PURE__ */ jsx("span", { children: "connecting" }) }) : /* @__PURE__ */ jsx("div", { className: classBase, children: /* @__PURE__ */ jsxs("span", { children: [
+    "retry in ",
+    seconds,
+    " seconds"
+  ] }) });
+};
+
+export { ConnectionRetryCountdown };
+//# sourceMappingURL=ConnectionRetryCountdown.js.map

package/esm/connection-status/ConnectionRetryCountdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionRetryCountdown.js","sources":["../../src/connection-status/ConnectionRetryCountdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst classBase = \"vuuConnectionRetryCountdown\";\n\nexport const ConnectionRetryCountdown = ({\n  seconds: secondsProp,\n}: {\n  seconds: number;\n}) => {\n  const secondsRemainingRef = useRef(secondsProp);\n  const [seconds, setSeconds] = useState<number>(secondsRemainingRef.current);\n\n  const countDown = useCallback(() => {\n    secondsRemainingRef.current -= 1;\n    setSeconds(secondsRemainingRef.current);\n    if (secondsRemainingRef.current > 0) {\n      setTimeout(countDown, 1000);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (secondsProp !== secondsRemainingRef.current) {\n      secondsRemainingRef.current = secondsProp;\n      countDown();\n    }\n  }, [countDown, secondsProp]);\n\n  useMemo(() => {\n    setTimeout(countDown, 1000);\n  }, [countDown]);\n\n  return seconds === 0 ? (\n    <div className={classBase}>\n      <span>connecting</span>\n    </div>\n  ) : (\n    <div className={classBase}>\n      <span>retry in {seconds} seconds</span>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAEA,MAAM,SAAY,GAAA,6BAAA;AAEX,MAAM,2BAA2B,CAAC;AAAA,EACvC,OAAS,EAAA;AACX,CAEM,KAAA;AACJ,EAAM,MAAA,mBAAA,GAAsB,OAAO,WAAW,CAAA;AAC9C,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,QAAA,CAAiB,oBAAoB,OAAO,CAAA;AAE1E,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAA,mBAAA,CAAoB,OAAW,IAAA,CAAA;AAC/B,IAAA,UAAA,CAAW,oBAAoB,OAAO,CAAA;AACtC,IAAI,IAAA,mBAAA,CAAoB,UAAU,CAAG,EAAA;AACnC,MAAA,UAAA,CAAW,WAAW,GAAI,CAAA;AAAA;AAC5B,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,WAAA,KAAgB,oBAAoB,OAAS,EAAA;AAC/C,MAAA,mBAAA,CAAoB,OAAU,GAAA,WAAA;AAC9B,MAAU,SAAA,EAAA;AAAA;AACZ,GACC,EAAA,CAAC,SAAW,EAAA,WAAW,CAAC,CAAA;AAE3B,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,UAAA,CAAW,WAAW,GAAI,CAAA;AAAA,GAC5B,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,OAAO,YAAY,CACjB,mBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,WACd,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAK,QAAU,EAAA,YAAA,EAAA,CAAA,EAClB,oBAEC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EACd,+BAAC,MAAK,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,IAAU,OAAA;AAAA,IAAQ;AAAA,GAAA,EAAQ,CAClC,EAAA,CAAA;AAEJ;;;;"}

package/esm/connection-status/ConnectionStateDisplay.css.js

@@ -0,0 +1,4 @@
+var connectionStateDisplayCss = ".vuuConnectionStateDisplay {\n  --ballbox-height: 24px;\n  --message-height: 14px;\n  --row-gap: 3px;\n  --top-row: calc(var(--ballbox-height) + var(--message-height));\n  --bottom-row: 0px;\n\n  align-items: center;\n  background: var(--salt-container-secondary-background);\n  column-gap: var(--salt-spacing-200);\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: var(--top-row) var(--bottom-row);\n  justify-items: end;\n  height: calc(var(--ballbox-height) + var(--message-height) + var(--row-gap));\n  padding: 0 var(--salt-spacing-200);\n  transition: grid-template-rows 0.4s linear;\n  row-gap: var(--row-gap);\n  width: max-content;\n\n  .vuuTrafficLightControl {\n    grid-area: 1/2/2/3;\n    padding-left: 20px;\n  }\n\n  &.vuuConnectionStateDisplay-disconnected {\n    --top-row: var(--ballbox-height);\n    --bottom-row: var(--message-height);\n  }\n\n  .vuuConnectionRetryCountdown {\n    color: var(--salt-content-secondary-foreground);\n    grid-area: 2/2/3/3;\n    font-size: 11px;\n    text-align: end;\n    width: 100%;\n  }\n}\n\n.vuuConnectionStateDisplay-text {\n  grid-area: 1/1/2/2;\n  text-transform: capitalize;\n}\n";
+
+export { connectionStateDisplayCss as default };
+//# sourceMappingURL=ConnectionStateDisplay.css.js.map

package/esm/connection-status/ConnectionStateDisplay.css.js.map

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

package/esm/connection-status/ConnectionStateDisplay.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ConnectionManager } from '@vuu-ui/vuu-data-remote';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useState, useMemo } from 'react';
+import { ConnectionRetryCountdown } from './ConnectionRetryCountdown.js';
+import { ConnectionStatusIndicator } from './ConnectionStatusIndicator.js';
+import cx from 'clsx';
+import connectionStateDisplayCss from './ConnectionStateDisplay.css.js';
+
+const classBase = "vuuConnectionStateDisplay";
+const DefaultConnectionState = {
+  connectionPhase: "connecting",
+  connectionStatus: "closed",
+  secondsToNextRetry: -1,
+  retryAttemptsRemaining: 0,
+  retryAttemptsTotal: 1
+};
+const getDisplayText = (connectionState) => {
+  switch (connectionState.connectionStatus) {
+    case "closed":
+      return "Unable to connect to data service";
+    case "failed":
+      return connectionState.connectionPhase === "connecting" ? "Failed to connect" : "Failed to re-connect";
+    case "disconnected":
+      return connectionState.connectionPhase === "connecting" ? "Attempting to connect to data service" : "Attempting to reconnect to data service";
+  }
+};
+const ConnectionStateDisplay = ({
+  connectionState: connectionStateProp,
+  showText = true,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-connection-status-indicator",
+    css: connectionStateDisplayCss,
+    window: targetWindow
+  });
+  const [connectionState, setConnectionState] = useState(DefaultConnectionState);
+  useMemo(() => {
+    ConnectionManager.on("connection-status", setConnectionState);
+    if (connectionStateProp) {
+      setConnectionState(connectionStateProp);
+    }
+  }, [connectionStateProp]);
+  const { connectionStatus, secondsToNextRetry } = connectionState;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, `${classBase}-${connectionStatus}`),
+      children: [
+        showText ? /* @__PURE__ */ jsx("div", { className: `${classBase}-text`, children: getDisplayText(connectionState) }) : null,
+        connectionStatus === "disconnected" && secondsToNextRetry > 0 ? /* @__PURE__ */ jsx(ConnectionRetryCountdown, { seconds: secondsToNextRetry }) : null,
+        /* @__PURE__ */ jsx(ConnectionStatusIndicator, { connectionState })
+      ]
+    }
+  );
+};
+
+export { ConnectionStateDisplay };
+//# sourceMappingURL=ConnectionStateDisplay.js.map

package/esm/connection-status/ConnectionStateDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionStateDisplay.js","sources":["../../src/connection-status/ConnectionStateDisplay.tsx"],"sourcesContent":["import { ConnectionManager } from \"@vuu-ui/vuu-data-remote\";\nimport type { WebSocketConnectionState } from \"@vuu-ui/vuu-data-remote/src/WebSocketConnection\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useMemo, useState } from \"react\";\nimport { ConnectionRetryCountdown } from \"./ConnectionRetryCountdown\";\nimport { ConnectionStatusIndicator } from \"./ConnectionStatusIndicator\";\nimport cx from \"clsx\";\n\nimport connectionStateDisplayCss from \"./ConnectionStateDisplay.css\";\n\nconst classBase = \"vuuConnectionStateDisplay\";\n\nconst DefaultConnectionState: WebSocketConnectionState = {\n  connectionPhase: \"connecting\",\n  connectionStatus: \"closed\",\n  secondsToNextRetry: -1,\n  retryAttemptsRemaining: 0,\n  retryAttemptsTotal: 1,\n};\n\ninterface ConnectionStateDisplayProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  connectionState?: WebSocketConnectionState;\n  showText?: boolean;\n}\n\nconst getDisplayText = (connectionState: WebSocketConnectionState) => {\n  switch (connectionState.connectionStatus) {\n    case \"closed\":\n      return \"Unable to connect to data service\";\n    case \"failed\":\n      return connectionState.connectionPhase === \"connecting\"\n        ? \"Failed to connect\"\n        : \"Failed to re-connect\";\n\n    case \"disconnected\":\n      return connectionState.connectionPhase === \"connecting\"\n        ? \"Attempting to connect to data service\"\n        : \"Attempting to reconnect to data service\";\n  }\n};\n\nexport const ConnectionStateDisplay = ({\n  connectionState: connectionStateProp,\n  showText = true,\n  ...htmlAttributes\n}: ConnectionStateDisplayProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-connection-status-indicator\",\n    css: connectionStateDisplayCss,\n    window: targetWindow,\n  });\n  const [connectionState, setConnectionState] =\n    useState<WebSocketConnectionState>(DefaultConnectionState);\n\n  useMemo(() => {\n    ConnectionManager.on(\"connection-status\", setConnectionState);\n    if (connectionStateProp) {\n      setConnectionState(connectionStateProp);\n    }\n  }, [connectionStateProp]);\n\n  const { connectionStatus, secondsToNextRetry } = connectionState;\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, `${classBase}-${connectionStatus}`)}\n    >\n      {showText ? (\n        <div className={`${classBase}-text`}>\n          {getDisplayText(connectionState)}\n        </div>\n      ) : null}\n      {connectionStatus === \"disconnected\" && secondsToNextRetry > 0 ? (\n        <ConnectionRetryCountdown seconds={secondsToNextRetry} />\n      ) : null}\n      <ConnectionStatusIndicator connectionState={connectionState} />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,2BAAA;AAElB,MAAM,sBAAmD,GAAA;AAAA,EACvD,eAAiB,EAAA,YAAA;AAAA,EACjB,gBAAkB,EAAA,QAAA;AAAA,EAClB,kBAAoB,EAAA,CAAA,CAAA;AAAA,EACpB,sBAAwB,EAAA,CAAA;AAAA,EACxB,kBAAoB,EAAA;AACtB,CAAA;AAQA,MAAM,cAAA,GAAiB,CAAC,eAA8C,KAAA;AACpE,EAAA,QAAQ,gBAAgB,gBAAkB;AAAA,IACxC,KAAK,QAAA;AACH,MAAO,OAAA,mCAAA;AAAA,IACT,KAAK,QAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,mBACA,GAAA,sBAAA;AAAA,IAEN,KAAK,cAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,uCACA,GAAA,yCAAA;AAAA;AAEV,CAAA;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC,eAAiB,EAAA,mBAAA;AAAA,EACjB,QAAW,GAAA,IAAA;AAAA,EACX,GAAG;AACL,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAA,yBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GACxC,SAAmC,sBAAsB,CAAA;AAE3D,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAkB,iBAAA,CAAA,EAAA,CAAG,qBAAqB,kBAAkB,CAAA;AAC5D,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,kBAAA,CAAmB,mBAAmB,CAAA;AAAA;AACxC,GACF,EAAG,CAAC,mBAAmB,CAAC,CAAA;AAExB,EAAM,MAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAuB,GAAA,eAAA;AAEjD,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,WAAW,EAAG,CAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,gBAAgB,CAAE,CAAA,CAAA;AAAA,MAE1D,QAAA,EAAA;AAAA,QACC,QAAA,mBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CACzB,KAAA,CAAA,EAAA,QAAA,EAAA,cAAA,CAAe,eAAe,CAAA,EACjC,CACE,GAAA,IAAA;AAAA,QACH,gBAAA,KAAqB,kBAAkB,kBAAqB,GAAA,CAAA,uBAC1D,wBAAyB,EAAA,EAAA,OAAA,EAAS,oBAAoB,CACrD,GAAA,IAAA;AAAA,wBACJ,GAAA,CAAC,6BAA0B,eAAkC,EAAA;AAAA;AAAA;AAAA,GAC/D;AAEJ;;;;"}

package/esm/connection-status/ConnectionStatusIndicator.css.js

@@ -0,0 +1,4 @@
+var connectionStatusIndicatorCss = "@keyframes squeeze {\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.85);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n.ConnectionStatusIndicator {\n  --ball-size-large: 20px;\n  --ball-size-small: 14px;\n  --ballbox-padding: 4px;\n  --retry-count: 0;\n  --height: var(\n    --ballbox-height,\n    calc(var(--ball-size-large) + var(--salt-spacing-100))\n  );\n  height: var(--height);\n  padding: 0 4px;\n  position: relative;\n  width: calc(\n    var(--ball-size-large) + var(--salt-spacing-400) +\n      (var(--ball-size-small) + var(--salt-spacing-100)) * var(--retry-count)\n  );\n\n  &.expanded {\n    transition-delay: 1s;\n    .Ball.large {\n      animation-duration: 0.8s;\n      animation-name: squeeze;\n      transform-origin: center;\n    }\n    .Ball.small {\n      transform: translateX(calc(var(--ball-size-large) * var(--i)));\n    }\n  }\n}\n\n.ConnectionStatusIndicator-inactive {\n  --ball-color: lightgray;\n}\n\n.ConnectionStatusIndicator-closed {\n  --ball-color: red;\n  opacity: 0.8;\n  .Ball.large {\n    transition: background-color 1s linear;\n  }\n}\n\n.ConnectionStatusIndicator-connected {\n  --ball-color: green;\n}\n\n.ConnectionStatusIndicator-disconnected {\n  --ball-color: red;\n}\n\n.Ball.large {\n  background-color: var(--ball-color);\n  border-radius: calc(var(--ball-size-large) / 2);\n  height: var(--ball-size-large);\n  right: var(--ballbox-padding);\n  top: calc(var(--height) / 2 - (var(--ball-size-large) / 2));\n  position: absolute;\n  transition: transform 0.8s linear;\n\n  width: var(--ball-size-large);\n  z-index: 1;\n}\n\n.Ball.small {\n  background-color: var(--ball-color);\n  border-radius: calc(var(--ball-size-small) / 2);\n  height: var(--ball-size-small);\n  position: absolute;\n  right: calc(\n    var(--ballbox-padding) + (var(--ball-size-large) - var(--ball-size-small)) /\n      2\n  );\n  top: calc(var(--height) / 2 - (var(--ball-size-small) / 2));\n  width: var(--ball-size-small);\n\n  transition: transform 0.4s ease-out;\n  transition-delay: 0.1s;\n}\n";
+
+export { connectionStatusIndicatorCss as default };
+//# sourceMappingURL=ConnectionStatusIndicator.css.js.map

package/esm/connection-status/ConnectionStatusIndicator.css.js.map

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

package/esm/connection-status/ConnectionStatusIndicator.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useRef, useMemo } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import connectionStatusIndicatorCss from './ConnectionStatusIndicator.css.js';
+
+const classBase = "ConnectionStatusIndicator";
+const Ball = memo(({ background, i = 0, large = false }) => {
+  if (large) {
+    return /* @__PURE__ */ jsx("div", { className: "Ball large", style: { background } }, i);
+  } else {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "Ball small",
+        style: { "--i": -(i + 1), background }
+      },
+      i
+    );
+  }
+});
+Ball.displayName = "Ball";
+const ConnectionStatusIndicator = ({
+  connectionState
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-connection-status-indicator",
+    css: connectionStatusIndicatorCss,
+    window: targetWindow
+  });
+  const ballbox = useRef(null);
+  const expandedRef = useRef(false);
+  const { connectionStatus, retryAttemptsRemaining, retryAttemptsTotal } = connectionState;
+  if (connectionStatus === "disconnected") {
+    expandedRef.current = true;
+  }
+  const finalState = connectionStatus === "connected" || connectionStatus === "closed";
+  useMemo(() => {
+    if (finalState) {
+      expandedRef.current = false;
+    }
+  }, [finalState]);
+  const getSmallBalls = () => {
+    const colors = Array(retryAttemptsTotal).fill("lightgray");
+    const index = retryAttemptsTotal - retryAttemptsRemaining;
+    if (retryAttemptsRemaining) {
+      colors[index] = "orange";
+      for (let i = 0; i < index; i++) {
+        colors[i] = "red";
+      }
+    } else {
+      colors.fill("red");
+    }
+    colors.reverse();
+    return colors.map((background, i) => /* @__PURE__ */ jsx(Ball, { i, background }, i));
+  };
+  const balls = getSmallBalls();
+  const displayState = connectionStatus;
+  const retryCount = connectionStatus === "disconnected" ? retryAttemptsTotal : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(classBase, `${classBase}-${displayState}`, {
+        expanded: expandedRef.current
+      }),
+      ref: ballbox,
+      style: { "--retry-count": retryCount },
+      children: [
+        /* @__PURE__ */ jsx(Ball, { large: true }),
+        balls
+      ]
+    }
+  );
+};
+
+export { ConnectionStatusIndicator };
+//# sourceMappingURL=ConnectionStatusIndicator.js.map

package/esm/connection-status/ConnectionStatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionStatusIndicator.js","sources":["../../src/connection-status/ConnectionStatusIndicator.tsx"],"sourcesContent":["import { CSSProperties, memo, useMemo, useRef } from \"react\";\nimport type { WebSocketConnectionState } from \"@vuu-ui/vuu-data-remote\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cx from \"clsx\";\n\nimport connectionStatusIndicatorCss from \"./ConnectionStatusIndicator.css\";\n\nconst classBase = \"ConnectionStatusIndicator\";\n\ninterface BallProps {\n  background?: string;\n  i?: number;\n  large?: boolean;\n}\nconst Ball = memo(({ background, i = 0, large = false }: BallProps) => {\n  if (large) {\n    return <div className=\"Ball large\" key={i} style={{ background }} />;\n  } else {\n    return (\n      <div\n        className=\"Ball small\"\n        key={i}\n        style={{ \"--i\": -(i + 1), background } as CSSProperties}\n      />\n    );\n  }\n});\nBall.displayName = \"Ball\";\n\ninterface ConnectionStatusIndicatorProps {\n  connectionState: WebSocketConnectionState;\n}\n\nexport const ConnectionStatusIndicator = ({\n  connectionState,\n}: ConnectionStatusIndicatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-connection-status-indicator\",\n    css: connectionStatusIndicatorCss,\n    window: targetWindow,\n  });\n\n  const ballbox = useRef<HTMLDivElement>(null);\n  const expandedRef = useRef(false);\n  const { connectionStatus, retryAttemptsRemaining, retryAttemptsTotal } =\n    connectionState;\n\n  if (connectionStatus === \"disconnected\") {\n    // one way switch\n    expandedRef.current = true;\n  }\n  const finalState =\n    connectionStatus === \"connected\" || connectionStatus === \"closed\";\n\n  useMemo(() => {\n    if (finalState) {\n      expandedRef.current = false;\n    }\n  }, [finalState]);\n\n  const getSmallBalls = () => {\n    const colors = Array(retryAttemptsTotal).fill(\"lightgray\");\n    const index = retryAttemptsTotal - retryAttemptsRemaining;\n    if (retryAttemptsRemaining) {\n      colors[index] = \"orange\";\n      for (let i = 0; i < index; i++) {\n        colors[i] = \"red\";\n      }\n    } else {\n      colors.fill(\"red\");\n    }\n    colors.reverse();\n    return colors.map((background, i) => (\n      <Ball key={i} i={i} background={background} />\n    ));\n  };\n\n  const balls = getSmallBalls();\n\n  // const displayState = balls.length > 0 ? \"disconnected\" : connectionStatus;\n  const displayState = connectionStatus;\n  const retryCount =\n    connectionStatus === \"disconnected\" ? retryAttemptsTotal : 0;\n\n  return (\n    <div\n      className={cx(classBase, `${classBase}-${displayState}`, {\n        expanded: expandedRef.current,\n      })}\n      ref={ballbox}\n      style={{ \"--retry-count\": retryCount } as CSSProperties}\n    >\n      <Ball large />\n      {balls}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/feature/Feature.js

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import { registerComponent, importCSS } from '@vuu-ui/vuu-utils';
+import React, { Suspense, useEffect } from 'react';
+import { FeatureErrorBoundary } from './FeatureErrorBoundary.js';
+import { Loader } from './Loader.js';
+
+const componentsMap = /* @__PURE__ */ new Map();
+const useCachedFeature = (url) => {
+  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) {
+    importCSS(css).then((styleSheet) => {
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        styleSheet
+      ];
+    });
+  }
+  const LazyFeature = useCachedFeature(url);
+  return /* @__PURE__ */ jsx(FeatureErrorBoundary, { url, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loader, {}), children: /* @__PURE__ */ jsx(LazyFeature, { ...props, ...params }) }) });
+}
+const Feature = React.memo(RawFeature);
+Feature.displayName = "Feature";
+registerComponent("Feature", Feature, "view");
+
+export { Feature };
+//# sourceMappingURL=Feature.js.map

package/esm/feature/Feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feature.js","sources":["../../src/feature/Feature.tsx"],"sourcesContent":["import {\n  DynamicFeatureProps,\n  importCSS,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport React, { Suspense, useEffect } from \"react\";\nimport { FeatureErrorBoundary } from \"./FeatureErrorBoundary\";\nimport { Loader } from \"./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\nfunction RawFeature<Params extends object | undefined>({\n  url,\n  css,\n  ComponentProps: params,\n  ...props\n}: DynamicFeatureProps<Params>) {\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":[],"mappings":";;;;;;AAYA,MAAM,aAAA,uBAAoB,GAA2C,EAAA;AACrE,MAAM,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,aAAA,CAAc,OAAO,GAAG,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,GAAG;AAAA,GACN;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;AAAA,OAAI;AAAA,KACjD;AAAA;AAGF,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,GAAA,CAAI,GAAG,CAAA;AAEzC,EAAA,IAAI,CAAC,WAAa,EAAA;AAChB,IAAM,MAAA,KAAA,CAAM,CAAsC,mCAAA,EAAA,GAAG,CAAE,CAAA,CAAA;AAAA,GAClD,MAAA;AACL,IAAO,OAAA,WAAA;AAAA;AAEX,CAAA;AAEA,SAAS,UAA8C,CAAA;AAAA,EACrD,GAAA;AAAA,EACA,GAAA;AAAA,EACA,cAAgB,EAAA,MAAA;AAAA,EAChB,GAAG;AACL,CAAgC,EAAA;AAC9B,EAAA,IAAI,GAAK,EAAA;AAYP,IAAA,SAAA,CAAU,GAAG,CAAA,CAAE,IAAK,CAAA,CAAC,UAAe,KAAA;AAClC,MAAA,QAAA,CAAS,kBAAqB,GAAA;AAAA,QAC5B,GAAG,QAAS,CAAA,kBAAA;AAAA,QACZ;AAAA,OACF;AAAA,KACD,CAAA;AAAA;AAGH,EAAM,MAAA,WAAA,GAAc,iBAAiB,GAAG,CAAA;AACxC,EAAA,2BACG,oBAAqB,EAAA,EAAA,GAAA,EACpB,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAS,0BAAW,GAAA,CAAA,MAAA,EAAA,EAAO,CAC1B,EAAA,QAAA,kBAAA,GAAA,CAAC,eAAa,GAAG,KAAA,EAAQ,GAAG,MAAA,EAAQ,GACtC,CACF,EAAA,CAAA;AAEJ;AAOa,MAAA,OAAA,GAAU,KAAM,CAAA,IAAA,CAAK,UAAU;AAC5C,OAAA,CAAQ,WAAc,GAAA,SAAA;AACtB,iBAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;"}

package/esm/feature/FeatureErrorBoundary.js

@@ -0,0 +1,28 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React from '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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("h1", { children: "An error occured while creating component." }),
+        /* @__PURE__ */ jsx("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+}
+
+export { FeatureErrorBoundary };
+//# sourceMappingURL=FeatureErrorBoundary.js.map

package/esm/feature/FeatureErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureErrorBoundary.js","sources":["../../src/feature/FeatureErrorBoundary.tsx"],"sourcesContent":["import { DynamicFeatureProps } from \"@vuu-ui/vuu-utils\";\nimport React, { ErrorInfo, ReactNode } from \"react\";\n\nexport interface FeatureErrorBoundaryProps extends DynamicFeatureProps {\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":[],"mappings":";;;AAOa,MAAA,oBAAA,SAA6B,MAAM,SAG9C,CAAA;AAAA,EACA,YAAY,KAAkC,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,YAAA,EAAc,IAAK,EAAA;AAAA;AACpC,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAE5C,IAAO,OAAA,EAAE,YAAc,EAAA,KAAA,CAAM,OAAQ,EAAA;AAAA;AACvC,EAEA,iBAAA,CAAkB,OAAc,SAAsB,EAAA;AAEpD,IAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,4BAAA,EAA+B,IAAK,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,CAAA;AAC3D,IAAQ,OAAA,CAAA,GAAA,CAAI,OAAO,SAAS,CAAA;AAAA;AAC9B,EAEA,MAAS,GAAA;AACP,IAAI,IAAA,IAAA,CAAK,MAAM,YAAc,EAAA;AAC3B,MAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAG,QAA0C,EAAA,4CAAA,EAAA,CAAA;AAAA,wBAC7C,GAAA,CAAA,GAAA,EAAA,EAAG,QAAK,EAAA,IAAA,CAAA,KAAA,CAAM,YAAa,EAAA;AAAA,OAC9B,EAAA,CAAA;AAAA;AAIJ,IAAA,OAAO,KAAK,KAAM,CAAA,QAAA;AAAA;AAEtB;;;;"}

package/esm/feature/Loader.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+
+const Loader = () => /* @__PURE__ */ jsx("div", { className: "hwLoader" });
+
+export { Loader };
+//# sourceMappingURL=Loader.js.map

package/esm/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":[],"mappings":";;AACO,MAAM,MAAS,GAAA,sBAAO,GAAA,CAAA,KAAA,EAAA,EAAI,WAAU,UAAW,EAAA;;;;"}

package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import { getCustomAndTableFeatures } from '@vuu-ui/vuu-utils';
+import { createContext, useMemo, useContext } from 'react';
+import { useVuuTables } from '@vuu-ui/vuu-data-react';
+
+const NO_FEATURES = [];
+const NO_STATICFEATURES = [];
+const NO_SYSTEMLAYOUTS = [];
+const NO_FEATURES_VUU = {
+  dynamicFeatures: NO_FEATURES,
+  tableFeatures: NO_FEATURES
+};
+const FeatureContext = createContext({
+  dynamicFeatures: NO_FEATURES,
+  tableFeatures: NO_FEATURES,
+  staticFeatures: NO_STATICFEATURES
+});
+const LayoutContext = createContext({
+  systemLayouts: NO_SYSTEMLAYOUTS
+});
+const FeatureAndLayoutProvider = ({
+  children,
+  dynamicFeatures: dynamicFeaturesProp = [],
+  staticFeatures,
+  systemLayouts
+}) => {
+  const tableSchemas = useVuuTables();
+  const { dynamicFeatures, tableFeatures } = useMemo(
+    () => tableSchemas ? getCustomAndTableFeatures(dynamicFeaturesProp, tableSchemas) : NO_FEATURES_VUU,
+    [dynamicFeaturesProp, tableSchemas]
+  );
+  return /* @__PURE__ */ jsx(
+    FeatureContext.Provider,
+    {
+      value: {
+        dynamicFeatures,
+        tableFeatures,
+        staticFeatures
+      },
+      children: /* @__PURE__ */ jsx(
+        LayoutContext.Provider,
+        {
+          value: {
+            systemLayouts
+          },
+          children
+        }
+      )
+    }
+  );
+};
+const useFeatures = () => useContext(FeatureContext);
+const useLayouts = () => useContext(LayoutContext);
+
+export { FeatureAndLayoutProvider, useFeatures, useLayouts };
+//# sourceMappingURL=FeatureAndLayoutProvider.js.map

package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureAndLayoutProvider.js","sources":["../../src/feature-and-layout-provider/FeatureAndLayoutProvider.tsx"],"sourcesContent":["import {\n  DynamicFeatureDescriptor,\n  DynamicFeatureProps,\n  FilterTableFeatureProps,\n  StaticFeatureDescriptor,\n  SystemLayoutMetadata,\n  getCustomAndTableFeatures,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ReactElement,\n  ReactNode,\n  createContext,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { useVuuTables } from \"@vuu-ui/vuu-data-react\";\n\nexport interface FeatureContextProps {\n  dynamicFeatures?: DynamicFeatureProps[];\n  tableFeatures?: DynamicFeatureProps<FilterTableFeatureProps>[];\n  staticFeatures?: StaticFeatureDescriptor[];\n}\n\nexport interface LayoutContextProps {\n  systemLayouts?: SystemLayoutMetadata[];\n}\n\nconst NO_FEATURES: DynamicFeatureDescriptor[] = [];\nconst NO_STATICFEATURES: StaticFeatureDescriptor[] = [];\nconst NO_SYSTEMLAYOUTS: SystemLayoutMetadata[] = [];\n\nconst NO_FEATURES_VUU = {\n  dynamicFeatures: NO_FEATURES,\n  tableFeatures: NO_FEATURES,\n};\n\nconst FeatureContext = createContext<FeatureContextProps>({\n  dynamicFeatures: NO_FEATURES,\n  tableFeatures: NO_FEATURES,\n  staticFeatures: NO_STATICFEATURES,\n});\n\nconst LayoutContext = createContext<LayoutContextProps>({\n  systemLayouts: NO_SYSTEMLAYOUTS,\n});\n\nexport interface FeatureAndLayoutProviderProps\n  extends Partial<FeatureContextProps> {\n  children: ReactNode;\n  dynamicFeatures?: DynamicFeatureDescriptor[];\n  staticFeatures?: StaticFeatureDescriptor[];\n  systemLayouts?: SystemLayoutMetadata[];\n}\n\nexport const FeatureAndLayoutProvider = ({\n  children,\n  dynamicFeatures: dynamicFeaturesProp = [],\n  staticFeatures,\n  systemLayouts,\n}: FeatureAndLayoutProviderProps): ReactElement => {\n  const tableSchemas = useVuuTables();\n\n  const { dynamicFeatures, tableFeatures } = useMemo<{\n    dynamicFeatures: DynamicFeatureProps[];\n    tableFeatures: DynamicFeatureProps<FilterTableFeatureProps>[];\n  }>(\n    () =>\n      tableSchemas\n        ? getCustomAndTableFeatures(dynamicFeaturesProp, tableSchemas)\n        : NO_FEATURES_VUU,\n    [dynamicFeaturesProp, tableSchemas],\n  );\n\n  return (\n    <FeatureContext.Provider\n      value={{\n        dynamicFeatures,\n        tableFeatures,\n        staticFeatures,\n      }}\n    >\n      <LayoutContext.Provider\n        value={{\n          systemLayouts,\n        }}\n      >\n        {children}\n      </LayoutContext.Provider>\n    </FeatureContext.Provider>\n  );\n};\n\nexport const useFeatures = () => useContext(FeatureContext);\nexport const useLayouts = () => useContext(LayoutContext);\n"],"names":[],"mappings":";;;;;AA2BA,MAAM,cAA0C,EAAC;AACjD,MAAM,oBAA+C,EAAC;AACtD,MAAM,mBAA2C,EAAC;AAElD,MAAM,eAAkB,GAAA;AAAA,EACtB,eAAiB,EAAA,WAAA;AAAA,EACjB,aAAe,EAAA;AACjB,CAAA;AAEA,MAAM,iBAAiB,aAAmC,CAAA;AAAA,EACxD,eAAiB,EAAA,WAAA;AAAA,EACjB,aAAe,EAAA,WAAA;AAAA,EACf,cAAgB,EAAA;AAClB,CAAC,CAAA;AAED,MAAM,gBAAgB,aAAkC,CAAA;AAAA,EACtD,aAAe,EAAA;AACjB,CAAC,CAAA;AAUM,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,eAAA,EAAiB,sBAAsB,EAAC;AAAA,EACxC,cAAA;AAAA,EACA;AACF,CAAmD,KAAA;AACjD,EAAA,MAAM,eAAe,YAAa,EAAA;AAElC,EAAM,MAAA,EAAE,eAAiB,EAAA,aAAA,EAAkB,GAAA,OAAA;AAAA,IAIzC,MACE,YAAA,GACI,yBAA0B,CAAA,mBAAA,EAAqB,YAAY,CAC3D,GAAA,eAAA;AAAA,IACN,CAAC,qBAAqB,YAAY;AAAA,GACpC;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,cAAe,CAAA,QAAA;AAAA,IAAf;AAAA,MACC,KAAO,EAAA;AAAA,QACL,eAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,aAAc,CAAA,QAAA;AAAA,QAAd;AAAA,UACC,KAAO,EAAA;AAAA,YACL;AAAA,WACF;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEa,MAAA,WAAA,GAAc,MAAM,UAAA,CAAW,cAAc;AAC7C,MAAA,UAAA,GAAa,MAAM,UAAA,CAAW,aAAa;;;;"}

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

@@ -0,0 +1,4 @@
+var featureListCss = ".vuuFeatureList {\n  --vuuListItem-padding: var(--salt-spacing-200);\n  background: var(\n    --vuuFeatureList-background,\n    var(--salt-container-primary-background)\n  );\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 0 var(--vuuFeatureList-padding, 0);\n}\n\n.vuuFeatureList-header {\n  align-items: center;\n  display: flex;\n  flex: 0 0 48px;\n  font-weight: 700;\n  line-height: 2;\n}\n\n.vuuFeatureList-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 700;\n  overflow: auto;\n}\n\n.vuuFeatureList-standalone {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-group {\n  --vuuMeasuredContainer-flex: 0 0 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  .vuuFeatureList-groupHeader {\n    flex: 0 0 32px;\n    padding: 8px 0;\n  }\n\n  .vuuPalette {\n    flex: 1 1 auto;\n    height: auto;\n  }\n}\n\n.vuuFeatureList-group:first-child {\n  margin-top: 12px;\n}\n\n.vuuFeatureList-group + .vuuFeatureList-group {\n  margin-top: 24px;\n}\n\n.vuuFeatureList-itemName {\n  font-weight: 700;\n}\n";
+
+export { featureListCss as default };
+//# sourceMappingURL=FeatureList.css.js.map

package/esm/feature-list/FeatureList.css.js.map

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