@vuu-ui/vuu-shell 0.8.94 → 0.8.96

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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  padding-top: var(--salt-spacing-200);\n}\n.vuuAppStatusBar-hidden {\n  display: none;\n}\n";
+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";
 
 module.exports = appStatusBarCss;
 //# sourceMappingURL=AppStatusBar.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var connectionStateDisplayCss = ".vuuConnectionStateDisplay {\n  --ballbox-height: 40px;\n  --message-height: 16px;\n  --row-gap: 3px;\n\n  align-items: center;\n  column-gap: var(--salt-spacing-200);\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: var(--ballbox-height) var(--message-height);\n  height: calc(var(--ballbox-height) + var(--message-height) + var(--row-gap));\n  padding: 0 var(--salt-spacing-200);\n  row-gap: var(--row-gap);\n\n  .vuuTrafficLightControl {\n    grid-area: 1/2/2/3;\n    padding-left: 20px;\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";
+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";
 
 module.exports = connectionStateDisplayCss;
 //# sourceMappingURL=ConnectionStateDisplay.css.js.map

package/cjs/connection-status/ConnectionStateDisplay.js

@@ -7,6 +7,7 @@ var window = require('@salt-ds/window');
 var React = require('react');
 var ConnectionRetryCountdown = require('./ConnectionRetryCountdown.js');
 var ConnectionStatusIndicator = require('./ConnectionStatusIndicator.js');
+var cx = require('clsx');
 var ConnectionStateDisplay$1 = require('./ConnectionStateDisplay.css.js');
 
 const classBase = "vuuConnectionStateDisplay";
@@ -20,11 +21,11 @@ const DefaultConnectionState = {
 const getDisplayText = (connectionState) => {
   switch (connectionState.connectionStatus) {
     case "closed":
-      return "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" ? "Connecting" : "Reconnecting";
+      return connectionState.connectionPhase === "connecting" ? "Attempting to connect to data service" : "Attempting to reconnect to data service";
   }
 };
 const ConnectionStateDisplay = ({
@@ -46,11 +47,18 @@ const ConnectionStateDisplay = ({
     }
   }, [connectionStateProp]);
   const { connectionStatus, secondsToNextRetry } = connectionState;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, children: [
-    showText ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-text`, children: getDisplayText(connectionState) }) : null,
-    connectionStatus === "disconnected" && secondsToNextRetry > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ConnectionRetryCountdown.ConnectionRetryCountdown, { seconds: secondsToNextRetry }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(ConnectionStatusIndicator.ConnectionStatusIndicator, { connectionState })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, `${classBase}-${connectionStatus}`),
+      children: [
+        showText ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-text`, children: getDisplayText(connectionState) }) : null,
+        connectionStatus === "disconnected" && secondsToNextRetry > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ConnectionRetryCountdown.ConnectionRetryCountdown, { seconds: secondsToNextRetry }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(ConnectionStatusIndicator.ConnectionStatusIndicator, { connectionState })
+      ]
+    }
+  );
 };
 
 exports.ConnectionStateDisplay = ConnectionStateDisplay;

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

@@ -1 +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\";\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 \"Closed\";\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        ? \"Connecting\"\n        : \"Reconnecting\";\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 {...htmlAttributes} className={classBase}>\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":["useWindow","useComponentCssInjection","connectionStateDisplayCss","useState","useMemo","ConnectionManager","jsxs","jsx","ConnectionRetryCountdown","ConnectionStatusIndicator"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,2BAAA,CAAA;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,CAAA;AACtB,CAAA,CAAA;AAQA,MAAM,cAAA,GAAiB,CAAC,eAA8C,KAAA;AACpE,EAAA,QAAQ,gBAAgB,gBAAkB;AAAA,IACxC,KAAK,QAAA;AACH,MAAO,OAAA,QAAA,CAAA;AAAA,IACT,KAAK,QAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,mBACA,GAAA,sBAAA,CAAA;AAAA,IAEN,KAAK,cAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,YACA,GAAA,cAAA,CAAA;AAAA,GACR;AACF,CAAA,CAAA;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC,eAAiB,EAAA,mBAAA;AAAA,EACjB,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAC,wBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GACxCC,eAAmC,sBAAsB,CAAA,CAAA;AAE3D,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAkBC,+BAAA,CAAA,EAAA,CAAG,qBAAqB,kBAAkB,CAAA,CAAA;AAC5D,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,kBAAA,CAAmB,mBAAmB,CAAA,CAAA;AAAA,KACxC;AAAA,GACF,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAM,MAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAuB,GAAA,eAAA,CAAA;AAEjD,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IACC,QAAA,mBAAAC,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CACzB,KAAA,CAAA,EAAA,QAAA,EAAA,cAAA,CAAe,eAAe,CAAA,EACjC,CACE,GAAA,IAAA;AAAA,IACH,gBAAA,KAAqB,kBAAkB,kBAAqB,GAAA,CAAA,kCAC1DC,iDAAyB,EAAA,EAAA,OAAA,EAAS,oBAAoB,CACrD,GAAA,IAAA;AAAA,oBACJD,cAAA,CAACE,uDAA0B,eAAkC,EAAA,CAAA;AAAA,GAC/D,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"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":["useWindow","useComponentCssInjection","connectionStateDisplayCss","useState","useMemo","ConnectionManager","jsxs","jsx","ConnectionRetryCountdown","ConnectionStatusIndicator"],"mappings":";;;;;;;;;;;;AAWA,MAAM,SAAY,GAAA,2BAAA,CAAA;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,CAAA;AACtB,CAAA,CAAA;AAQA,MAAM,cAAA,GAAiB,CAAC,eAA8C,KAAA;AACpE,EAAA,QAAQ,gBAAgB,gBAAkB;AAAA,IACxC,KAAK,QAAA;AACH,MAAO,OAAA,mCAAA,CAAA;AAAA,IACT,KAAK,QAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,mBACA,GAAA,sBAAA,CAAA;AAAA,IAEN,KAAK,cAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,uCACA,GAAA,yCAAA,CAAA;AAAA,GACR;AACF,CAAA,CAAA;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC,eAAiB,EAAA,mBAAA;AAAA,EACjB,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAC,wBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GACxCC,eAAmC,sBAAsB,CAAA,CAAA;AAE3D,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAkBC,+BAAA,CAAA,EAAA,CAAG,qBAAqB,kBAAkB,CAAA,CAAA;AAC5D,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,kBAAA,CAAmB,mBAAmB,CAAA,CAAA;AAAA,KACxC;AAAA,GACF,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAM,MAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAuB,GAAA,eAAA,CAAA;AAEjD,EACE,uBAAAC,eAAA;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,mBAAAC,cAAA,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,kCAC1DC,iDAAyB,EAAA,EAAA,OAAA,EAAS,oBAAoB,CACrD,GAAA,IAAA;AAAA,wBACJD,cAAA,CAACE,uDAA0B,eAAkC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC/D,CAAA;AAEJ;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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\n  height: var(--ballbox-height);\n  padding: 0 4px;\n  position: relative;\n\n  &.expanded {\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: lightgray;\n  .Ball.large {\n    transition: background-color 1s linear;\n  }\n}\n\n.ConnectionStatusIndicator-connected {\n  --ball-color: green;\n}\n\n.ConnectionStatusIndicator-connecting {\n  --ball-color: red;\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(--ballbox-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(--ballbox-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";
+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";
 
 module.exports = connectionStatusIndicatorCss;
 //# sourceMappingURL=ConnectionStatusIndicator.css.js.map

package/cjs/connection-status/ConnectionStatusIndicator.js

@@ -60,6 +60,7 @@ const ConnectionStatusIndicator = ({
   };
   const balls = getSmallBalls();
   const displayState = connectionStatus;
+  const retryCount = connectionStatus === "disconnected" ? retryAttemptsTotal : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -67,6 +68,7 @@ const ConnectionStatusIndicator = ({
         expanded: expandedRef.current
       }),
       ref: ballbox,
+      style: { "--retry-count": retryCount },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Ball, { large: true }),
         balls

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

@@ -1 +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\n  return (\n    <div\n      className={cx(classBase, `${classBase}-${displayState}`, {\n        expanded: expandedRef.current,\n      })}\n      ref={ballbox}\n    >\n      <Ball large />\n      {balls}\n    </div>\n  );\n};\n"],"names":["memo","jsx","useWindow","useComponentCssInjection","connectionStatusIndicatorCss","useRef","useMemo","jsxs"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,2BAAA,CAAA;AAOlB,MAAM,IAAA,GAAOA,WAAK,CAAC,EAAE,YAAY,CAAI,GAAA,CAAA,EAAG,KAAQ,GAAA,KAAA,EAAuB,KAAA;AACrE,EAAA,IAAI,KAAO,EAAA;AACT,IAAO,uBAAAC,cAAA,CAAC,SAAI,SAAU,EAAA,YAAA,EAAqB,OAAO,EAAE,UAAA,MAAZ,CAA0B,CAAA,CAAA;AAAA,GAC7D,MAAA;AACL,IACE,uBAAAA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,YAAA;AAAA,QAEV,OAAO,EAAE,KAAA,EAAO,EAAE,CAAA,GAAI,IAAI,UAAW,EAAA;AAAA,OAAA;AAAA,MADhC,CAAA;AAAA,KAEP,CAAA;AAAA,GAEJ;AACF,CAAC,CAAA,CAAA;AACD,IAAA,CAAK,WAAc,GAAA,MAAA,CAAA;AAMZ,MAAM,4BAA4B,CAAC;AAAA,EACxC,eAAA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAC,2BAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA,CAAA;AAC3C,EAAM,MAAA,WAAA,GAAcA,aAAO,KAAK,CAAA,CAAA;AAChC,EAAA,MAAM,EAAE,gBAAA,EAAkB,sBAAwB,EAAA,kBAAA,EAChD,GAAA,eAAA,CAAA;AAEF,EAAA,IAAI,qBAAqB,cAAgB,EAAA;AAEvC,IAAA,WAAA,CAAY,OAAU,GAAA,IAAA,CAAA;AAAA,GACxB;AACA,EAAM,MAAA,UAAA,GACJ,gBAAqB,KAAA,WAAA,IAAe,gBAAqB,KAAA,QAAA,CAAA;AAE3D,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA;AAAA,KACxB;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,MAAM,MAAS,GAAA,KAAA,CAAM,kBAAkB,CAAA,CAAE,KAAK,WAAW,CAAA,CAAA;AACzD,IAAA,MAAM,QAAQ,kBAAqB,GAAA,sBAAA,CAAA;AACnC,IAAA,IAAI,sBAAwB,EAAA;AAC1B,MAAA,MAAA,CAAO,KAAK,CAAI,GAAA,QAAA,CAAA;AAChB,MAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,KAAA,EAAO,CAAK,EAAA,EAAA;AAC9B,QAAA,MAAA,CAAO,CAAC,CAAI,GAAA,KAAA,CAAA;AAAA,OACd;AAAA,KACK,MAAA;AACL,MAAA,MAAA,CAAO,KAAK,KAAK,CAAA,CAAA;AAAA,KACnB;AACA,IAAA,MAAA,CAAO,OAAQ,EAAA,CAAA;AACf,IAAO,OAAA,MAAA,CAAO,GAAI,CAAA,CAAC,UAAY,EAAA,CAAA,oCAC5B,IAAa,EAAA,EAAA,CAAA,EAAM,UAAT,EAAA,EAAA,CAAiC,CAC7C,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,QAAQ,aAAc,EAAA,CAAA;AAG5B,EAAA,MAAM,YAAe,GAAA,gBAAA,CAAA;AAErB,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAG,CAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,YAAY,CAAI,CAAA,EAAA;AAAA,QACvD,UAAU,WAAY,CAAA,OAAA;AAAA,OACvB,CAAA;AAAA,MACD,GAAK,EAAA,OAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAACN,cAAA,CAAA,IAAA,EAAA,EAAK,OAAK,IAAC,EAAA,CAAA;AAAA,QACX,KAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
+{"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":["memo","jsx","useWindow","useComponentCssInjection","connectionStatusIndicatorCss","useRef","useMemo","jsxs"],"mappings":"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"}

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

@@ -1,4 +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  padding-top: var(--salt-spacing-200);\n}\n.vuuAppStatusBar-hidden {\n  display: none;\n}\n";
+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/connection-status/ConnectionStateDisplay.css.js

@@ -1,4 +1,4 @@
-var connectionStateDisplayCss = ".vuuConnectionStateDisplay {\n  --ballbox-height: 40px;\n  --message-height: 16px;\n  --row-gap: 3px;\n\n  align-items: center;\n  column-gap: var(--salt-spacing-200);\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: var(--ballbox-height) var(--message-height);\n  height: calc(var(--ballbox-height) + var(--message-height) + var(--row-gap));\n  padding: 0 var(--salt-spacing-200);\n  row-gap: var(--row-gap);\n\n  .vuuTrafficLightControl {\n    grid-area: 1/2/2/3;\n    padding-left: 20px;\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";
+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.js

@@ -5,6 +5,7 @@ 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";
@@ -18,11 +19,11 @@ const DefaultConnectionState = {
 const getDisplayText = (connectionState) => {
   switch (connectionState.connectionStatus) {
     case "closed":
-      return "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" ? "Connecting" : "Reconnecting";
+      return connectionState.connectionPhase === "connecting" ? "Attempting to connect to data service" : "Attempting to reconnect to data service";
   }
 };
 const ConnectionStateDisplay = ({
@@ -44,11 +45,18 @@ const ConnectionStateDisplay = ({
     }
   }, [connectionStateProp]);
   const { connectionStatus, secondsToNextRetry } = connectionState;
-  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, 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 })
-  ] });
+  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 };

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

@@ -1 +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\";\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 \"Closed\";\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        ? \"Connecting\"\n        : \"Reconnecting\";\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 {...htmlAttributes} className={classBase}>\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":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,2BAAA,CAAA;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,CAAA;AACtB,CAAA,CAAA;AAQA,MAAM,cAAA,GAAiB,CAAC,eAA8C,KAAA;AACpE,EAAA,QAAQ,gBAAgB,gBAAkB;AAAA,IACxC,KAAK,QAAA;AACH,MAAO,OAAA,QAAA,CAAA;AAAA,IACT,KAAK,QAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,mBACA,GAAA,sBAAA,CAAA;AAAA,IAEN,KAAK,cAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,YACA,GAAA,cAAA,CAAA;AAAA,GACR;AACF,CAAA,CAAA;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC,eAAiB,EAAA,mBAAA;AAAA,EACjB,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAA,yBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GACxC,SAAmC,sBAAsB,CAAA,CAAA;AAE3D,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAkB,iBAAA,CAAA,EAAA,CAAG,qBAAqB,kBAAkB,CAAA,CAAA;AAC5D,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,kBAAA,CAAmB,mBAAmB,CAAA,CAAA;AAAA,KACxC;AAAA,GACF,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAM,MAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAuB,GAAA,eAAA,CAAA;AAEjD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IACC,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,IACH,gBAAA,KAAqB,kBAAkB,kBAAqB,GAAA,CAAA,uBAC1D,wBAAyB,EAAA,EAAA,OAAA,EAAS,oBAAoB,CACrD,GAAA,IAAA;AAAA,oBACJ,GAAA,CAAC,6BAA0B,eAAkC,EAAA,CAAA;AAAA,GAC/D,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"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,CAAA;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,CAAA;AACtB,CAAA,CAAA;AAQA,MAAM,cAAA,GAAiB,CAAC,eAA8C,KAAA;AACpE,EAAA,QAAQ,gBAAgB,gBAAkB;AAAA,IACxC,KAAK,QAAA;AACH,MAAO,OAAA,mCAAA,CAAA;AAAA,IACT,KAAK,QAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,mBACA,GAAA,sBAAA,CAAA;AAAA,IAEN,KAAK,cAAA;AACH,MAAO,OAAA,eAAA,CAAgB,eAAoB,KAAA,YAAA,GACvC,uCACA,GAAA,yCAAA,CAAA;AAAA,GACR;AACF,CAAA,CAAA;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC,eAAiB,EAAA,mBAAA;AAAA,EACjB,QAAW,GAAA,IAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAA,yBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GACxC,SAAmC,sBAAsB,CAAA,CAAA;AAE3D,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAkB,iBAAA,CAAA,EAAA,CAAG,qBAAqB,kBAAkB,CAAA,CAAA;AAC5D,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAA,kBAAA,CAAmB,mBAAmB,CAAA,CAAA;AAAA,KACxC;AAAA,GACF,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAM,MAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAuB,GAAA,eAAA,CAAA;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,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAC/D,CAAA;AAEJ;;;;"}

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

@@ -1,4 +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\n  height: var(--ballbox-height);\n  padding: 0 4px;\n  position: relative;\n\n  &.expanded {\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: lightgray;\n  .Ball.large {\n    transition: background-color 1s linear;\n  }\n}\n\n.ConnectionStatusIndicator-connected {\n  --ball-color: green;\n}\n\n.ConnectionStatusIndicator-connecting {\n  --ball-color: red;\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(--ballbox-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(--ballbox-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";
+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.js

@@ -58,6 +58,7 @@ const ConnectionStatusIndicator = ({
   };
   const balls = getSmallBalls();
   const displayState = connectionStatus;
+  const retryCount = connectionStatus === "disconnected" ? retryAttemptsTotal : 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -65,6 +66,7 @@ const ConnectionStatusIndicator = ({
         expanded: expandedRef.current
       }),
       ref: ballbox,
+      style: { "--retry-count": retryCount },
       children: [
         /* @__PURE__ */ jsx(Ball, { large: true }),
         balls

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

@@ -1 +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\n  return (\n    <div\n      className={cx(classBase, `${classBase}-${displayState}`, {\n        expanded: expandedRef.current,\n      })}\n      ref={ballbox}\n    >\n      <Ball large />\n      {balls}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"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":";;;;;;;AASA,MAAM,SAAY,GAAA,2BAAA,CAAA;AAOlB,MAAM,IAAA,GAAO,KAAK,CAAC,EAAE,YAAY,CAAI,GAAA,CAAA,EAAG,KAAQ,GAAA,KAAA,EAAuB,KAAA;AACrE,EAAA,IAAI,KAAO,EAAA;AACT,IAAO,uBAAA,GAAA,CAAC,SAAI,SAAU,EAAA,YAAA,EAAqB,OAAO,EAAE,UAAA,MAAZ,CAA0B,CAAA,CAAA;AAAA,GAC7D,MAAA;AACL,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,YAAA;AAAA,QAEV,OAAO,EAAE,KAAA,EAAO,EAAE,CAAA,GAAI,IAAI,UAAW,EAAA;AAAA,OAAA;AAAA,MADhC,CAAA;AAAA,KAEP,CAAA;AAAA,GAEJ;AACF,CAAC,CAAA,CAAA;AACD,IAAA,CAAK,WAAc,GAAA,MAAA,CAAA;AAMZ,MAAM,4BAA4B,CAAC;AAAA,EACxC,eAAA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAA,4BAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAM,MAAA,WAAA,GAAc,OAAO,KAAK,CAAA,CAAA;AAChC,EAAA,MAAM,EAAE,gBAAA,EAAkB,sBAAwB,EAAA,kBAAA,EAChD,GAAA,eAAA,CAAA;AAEF,EAAA,IAAI,qBAAqB,cAAgB,EAAA;AAEvC,IAAA,WAAA,CAAY,OAAU,GAAA,IAAA,CAAA;AAAA,GACxB;AACA,EAAM,MAAA,UAAA,GACJ,gBAAqB,KAAA,WAAA,IAAe,gBAAqB,KAAA,QAAA,CAAA;AAE3D,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA;AAAA,KACxB;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,MAAM,MAAS,GAAA,KAAA,CAAM,kBAAkB,CAAA,CAAE,KAAK,WAAW,CAAA,CAAA;AACzD,IAAA,MAAM,QAAQ,kBAAqB,GAAA,sBAAA,CAAA;AACnC,IAAA,IAAI,sBAAwB,EAAA;AAC1B,MAAA,MAAA,CAAO,KAAK,CAAI,GAAA,QAAA,CAAA;AAChB,MAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,KAAA,EAAO,CAAK,EAAA,EAAA;AAC9B,QAAA,MAAA,CAAO,CAAC,CAAI,GAAA,KAAA,CAAA;AAAA,OACd;AAAA,KACK,MAAA;AACL,MAAA,MAAA,CAAO,KAAK,KAAK,CAAA,CAAA;AAAA,KACnB;AACA,IAAA,MAAA,CAAO,OAAQ,EAAA,CAAA;AACf,IAAO,OAAA,MAAA,CAAO,GAAI,CAAA,CAAC,UAAY,EAAA,CAAA,yBAC5B,IAAa,EAAA,EAAA,CAAA,EAAM,UAAT,EAAA,EAAA,CAAiC,CAC7C,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,QAAQ,aAAc,EAAA,CAAA;AAG5B,EAAA,MAAM,YAAe,GAAA,gBAAA,CAAA;AACrB,EAAM,MAAA,UAAA,GACJ,gBAAqB,KAAA,cAAA,GAAiB,kBAAqB,GAAA,CAAA,CAAA;AAE7D,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAG,CAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,YAAY,CAAI,CAAA,EAAA;AAAA,QACvD,UAAU,WAAY,CAAA,OAAA;AAAA,OACvB,CAAA;AAAA,MACD,GAAK,EAAA,OAAA;AAAA,MACL,KAAA,EAAO,EAAE,eAAA,EAAiB,UAAW,EAAA;AAAA,MAErC,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,OAAK,IAAC,EAAA,CAAA;AAAA,QACX,KAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/package.json

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