npm - @vuu-ui/vuu-shell - Versions diffs - 0.6.27 → 0.7.0-debug - Mend

@vuu-ui/vuu-shell 0.6.27 → 0.7.0-debug

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/esm/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/vuu-shell/src/connection-status/ConnectionStatusIcon.tsx", "../../../packages/vuu-shell/src/density-switch/DensitySwitch.tsx", "../../../packages/vuu-shell/src/feature/Feature.tsx", "../../../packages/vuu-shell/src/feature/ErrorBoundary.jsx", "../../../packages/vuu-shell/src/feature/Loader.tsx", "../../../packages/vuu-shell/src/login/LoginPanel.tsx", "../../../packages/vuu-shell/src/login/login-utils.ts", "../../../packages/vuu-shell/src/shell.tsx", "../../../packages/vuu-shell/src/ShellContextProvider.tsx", "../../../packages/vuu-shell/src/use-layout-config.js", "../../../packages/vuu-shell/src/app-header/AppHeader.tsx", "../../../packages/vuu-shell/src/user-profile/UserProfile.tsx", "../../../packages/vuu-shell/src/user-profile/UserPanel.tsx", "../../../packages/vuu-shell/src/get-layout-history.ts", "../../../packages/vuu-shell/src/theme-switch/ThemeSwitch.tsx", "../../../packages/vuu-shell/src/theme-provider/ThemeProvider.tsx"],
-  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport './ConnectionStatusIcon.css';\n\ntype connectionStatus = 'connected' | 'reconnected' | 'connecting' | 'disconnected';\n\ninterface ConnectionStatusProps {\n\tconnectionStatus: connectionStatus\n\tclassName?: string;\n\tprops?: unknown;\n\telement?: string;\n}\n\nexport const ConnectionStatusIcon = ({ connectionStatus, className, element = 'span', ...props}: ConnectionStatusProps) => {\n\tconst [classBase, setClassBase] = useState<string>('vuuConnectingStatus');\n\tuseEffect(() => {\n\t\tswitch(connectionStatus) {\n\t\t\tcase 'connected':\n\t\t\tcase 'reconnected':\n\t\t\t\tsetClassBase('vuuActiveStatus');\n\t\t\t\tbreak;\n\t\t\tcase 'connecting':\n\t\t\t\tsetClassBase('vuuConnectingStatus');\n\t\t\t\tbreak;\n\t\t\tcase 'disconnected':\n\t\t\t\tsetClassBase('vuuDisconnectedStatus');\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t}, [connectionStatus]);\n\n\tconst statusIcon = React.createElement (\n\t\telement,\n\t\t{\n\t\t\t...props,\n\t\t\tclassName: cx('vuuStatus vuuIcon', classBase, className)\n\t\t},\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t<div className='vuuStatus-container salt-theme'>\n\t\t\t\t{statusIcon}\n\t\t\t\t<div\tclassName='vuuStatus-text'>Status: {connectionStatus.toUpperCase()}</div>\n\t\t\t</div>\n\t\t</>\n\t)\n}", "import { Dropdown } from \"@heswell/salt-lab\";\nimport { Density } from \"@salt-ds/core\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport cx from \"classnames\";\n\nconst classBase = \"vuuDensitySwitch\";\n\nconst densities:Density[] = [\"high\", \"medium\", \"low\", \"touch\"];\nconst DEFAULT_DENSITY = \"high\";\n\nexport interface DensitySwitchProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultDensity?: Density;\n  density?: Density;\n  onDensityChange: (density: Density) => void;\n}\n\nexport const DensitySwitch = ({\n  className: classNameProp,\n  defaultDensity=DEFAULT_DENSITY,\n  onDensityChange,\n}:DensitySwitchProps) => {\n  const handleSelectionChange = useCallback((_event, selectedItem) => {\n    onDensityChange(selectedItem);\n  }, [onDensityChange])\n\n  const className = cx(classBase, classNameProp);\n\n  return (\n    <Dropdown\n    className={className}\n    source={densities}\n    defaultSelected={defaultDensity}\n    onSelectionChange={handleSelectionChange}\n    />\n  )\n}", "import React, { Suspense } from \"react\";\nimport { registerComponent } from \"@vuu-ui/vuu-layout\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { Loader } from \"./Loader\";\n// import { importCSS } from \"./css-module-loader\";\n\nexport interface FeatureProps<Params extends object | undefined = undefined> {\n  height?: number;\n  url: string;\n  css?: string;\n  width?: number;\n  params: Params;\n}\n\nfunction RawFeature<Params extends object | undefined>({\n  url,\n  css,\n  params,\n  ...props\n}: FeatureProps<Params>) {\n  if (css) {\n    import(/* @vite-ignore */ css, { assert: { type: \"css\" } }).then(\n      (cssModule) => {\n        document.adoptedStyleSheets = [\n          ...document.adoptedStyleSheets,\n          cssModule.default,\n        ];\n      }\n    );\n    // Polyfill until vite build supports import assertions\n    // Note: already fully supported in esbuild, so vite dev\n    // importCSS(css).then((styleSheet) => {\n    //   document.adoptedStyleSheets = [\n    //     ...document.adoptedStyleSheets,\n    //     styleSheet,\n    //   ];\n    // });\n  }\n  const LazyFeature = React.lazy(() => import(/* @vite-ignore */ url));\n  return (\n    <ErrorBoundary>\n      <Suspense fallback={<Loader />}>\n        <LazyFeature {...props} {...params} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n}\n\nexport const Feature = React.memo(RawFeature);\nFeature.displayName = \"Feature\";\nregisterComponent(\"Feature\", Feature, \"view\");\n", "import React from 'react';\n// TODO\nexport class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { errorMessage: null };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render will show the fallback UI.\n    return { errorMessage: error.message };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    // You can also log the error to an error reporting service\n    console.log(error, errorInfo);\n  }\n\n  render() {\n    if (this.state.errorMessage) {\n      return (\n        <>\n          <h1>Something went wrong.</h1>\n          <p>{this.state.errorMessage}</p>\n        </>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n", "// TODO\nexport const Loader = () => <div className=\"hwLoader\">loading</div>;\n", "import { ChangeEvent, HTMLAttributes, useState } from \"react\";\nimport { Button } from \"@salt-ds/core\";\nimport { FormField, Input } from \"@heswell/salt-lab\";\n\nimport \"./LoginPanel.css\";\n\nconst classBase = \"vuuLoginPanel\";\n\nexport interface LoginPanelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\"> {\n  onSubmit: (username: string, password: string) => void;\n}\n\nexport const LoginPanel = ({ onSubmit }: LoginPanelProps) => {\n  const [username, setUserName] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n\n  const login = () => {\n    onSubmit(username, password);\n  };\n\n  const handleUsername = (\n    _event: ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setUserName(value);\n  };\n\n  const handlePassword = (\n    _event: ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setPassword(value);\n  };\n\n  const dataIsValid = username.trim() !== \"\" && password.trim() !== \"\";\n\n  return (\n    <div className={classBase}>\n      <FormField label=\"Username\" style={{ width: 200 }}>\n        <Input value={username} id=\"text-username\" onChange={handleUsername} />\n      </FormField>\n\n      <FormField label=\"Password\" style={{ width: 200 }}>\n        <Input\n          type=\"password\"\n          value={password}\n          id=\"text-password\"\n          onChange={handlePassword}\n        />\n      </FormField>\n\n      <Button\n        className={`${classBase}-login`}\n        disabled={!dataIsValid}\n        onClick={login}\n        variant=\"cta\"\n      >\n        Login\n      </Button>\n    </div>\n  );\n};\n", "import { getCookieValue } from \"@vuu-ui/vuu-utils\";\n\nexport const getAuthDetailsFromCookies = () => {\n  const username = getCookieValue(\"vuu-username\");\n  const token = getCookieValue(\"vuu-auth-token\");\n  return [username, token];\n};\n\nexport const redirectToLogin = (loginUrl = \"/login.html\") => {\n  window.location.href = loginUrl;\n};\n\nexport const logout = (loginUrl?: string) => {\n  document.cookie = \"vuu-username= ; expires = Thu, 01 Jan 1970 00:00:00 GMT\";\n  document.cookie = \"vuu-auth-token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT\";\n  redirectToLogin(loginUrl);\n};\n", "import { connectToServer } from \"@vuu-ui/vuu-data\";\nimport cx from \"classnames\";\nimport {\n  HTMLAttributes,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ShellContextProvider } from \"./ShellContextProvider\";\nimport useLayoutConfig from \"./use-layout-config\";\nimport {\n  DockLayout,\n  DraggableLayout,\n  Drawer,\n  Flexbox,\n  LayoutProvider,\n  View,\n} from \"@vuu-ui/vuu-layout\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-layout/src/layout-reducer\";\nimport { AppHeader } from \"./app-header\";\nimport { ThemeMode } from \"./theme-provider\";\n\nimport \"./shell.css\";\n\nexport type VuuUser = {\n  username: string;\n  token: string;\n};\n\nconst warningLayout = {\n  type: \"View\",\n  props: {\n    style: { height: \"calc(100% - 6px)\" },\n  },\n  children: [\n    {\n      props: {\n        className: \"vuuShell-warningPlaceholder\",\n      },\n      type: \"Placeholder\",\n    },\n  ],\n};\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  defaultLayout?: LayoutJSON;\n  leftSidePanel?: ReactElement;\n  loginUrl?: string;\n  // paletteConfig: any;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nexport const Shell = ({\n  children,\n  className: classNameProp,\n  defaultLayout = warningLayout,\n  leftSidePanel,\n  loginUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const paletteView = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const layoutId = useRef(\"latest\");\n\n  const [layout, setLayoutConfig, loadLayoutById] = useLayoutConfig(\n    user,\n    defaultLayout\n  );\n\n  const handleLayoutChange = useCallback(\n    (layout) => {\n      setLayoutConfig(layout);\n    },\n    [setLayoutConfig]\n  );\n\n  const handleSwitchTheme = useCallback((mode: ThemeMode) => {\n    if (rootRef.current) {\n      rootRef.current.dataset.mode = mode;\n    }\n  }, []);\n\n  const handleDrawerClick = (e: MouseEvent<HTMLElement>) => {\n    const target = e.target as HTMLElement;\n    if (!paletteView.current?.contains(target)) {\n      setOpen(!open);\n    }\n  };\n\n  const handleNavigate = useCallback(\n    (id) => {\n      layoutId.current = id;\n      loadLayoutById(id);\n    },\n    [loadLayoutById]\n  );\n\n  useEffect(() => {\n    if (serverUrl && user.token) {\n      connectToServer(serverUrl, user.token);\n    }\n  }, [serverUrl, user.token]);\n\n  const getDrawers = () => {\n    const drawers: ReactElement[] = [];\n    if (leftSidePanel) {\n      drawers.push(\n        <Drawer\n          key=\"left-panel\"\n          onClick={handleDrawerClick}\n          open={open}\n          position=\"left\"\n          inline\n          peekaboo\n          sizeOpen={200}\n          toggleButton=\"end\"\n        >\n          <View\n            className=\"vuuShell-palette\"\n            id=\"vw-app-palette\"\n            key=\"app-palette\"\n            ref={paletteView}\n            style={{ height: \"100%\" }}\n          >\n            {leftSidePanel}\n          </View>\n        </Drawer>\n      );\n    }\n\n    return drawers;\n  };\n\n  const className = cx(\n    \"vuuShell\",\n    classNameProp,\n    \"salt-theme\",\n    \"salt-density-high\"\n  );\n\n  return (\n    // ShellContext TBD\n    <ShellContextProvider value={undefined}>\n      <LayoutProvider layout={layout} onLayoutChange={handleLayoutChange}>\n        <DraggableLayout\n          className={className}\n          data-mode=\"light\"\n          ref={rootRef}\n          {...htmlAttributes}\n        >\n          <Flexbox\n            className=\"App\"\n            style={{ flexDirection: \"column\", height: \"100%\", width: \"100%\" }}\n          >\n            <AppHeader\n              layoutId={layoutId.current}\n              loginUrl={loginUrl}\n              user={user}\n              onNavigate={handleNavigate}\n              onSwitchTheme={handleSwitchTheme}\n            />\n            <DockLayout style={{ flex: 1 }}>\n              {getDrawers().concat(\n                <DraggableLayout\n                  dropTarget\n                  key=\"main-content\"\n                  style={{ width: \"100%\", height: \"100%\" }}\n                />\n              )}\n            </DockLayout>\n          </Flexbox>\n        </DraggableLayout>\n      </LayoutProvider>\n      {children}\n    </ShellContextProvider>\n  );\n};\n", "import { MenuRpcResponse } from \"@vuu-ui/vuu-data\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-datagrid-types\";\nimport { createContext, ReactElement, ReactNode, useContext } from \"react\";\n\nexport interface ShellContextProps {\n  getDefaultColumnConfig?: (\n    tableName: string,\n    columnName: string\n  ) => Partial<ColumnDescriptor>;\n  handleRpcResponse?: (response?: MenuRpcResponse) => void;\n}\n\nconst defaultConfig = {};\n\nconst ShellContext = createContext<ShellContextProps>(defaultConfig);\n\nexport interface ShellProviderProps {\n  children: ReactNode;\n  value?: ShellContextProps;\n}\n\nconst Provider = ({\n  children,\n  context,\n  inheritedContext,\n}: {\n  children: ReactNode;\n  context?: ShellContextProps;\n  inheritedContext?: ShellContextProps;\n}) => {\n  // TODO functions provided at multiple levels must be merged\n  const mergedContext = {\n    ...inheritedContext,\n    ...context,\n  };\n  return (\n    <ShellContext.Provider value={mergedContext}>\n      {children}\n    </ShellContext.Provider>\n  );\n};\n\nexport const ShellContextProvider = ({\n  children,\n  value,\n}: ShellProviderProps): ReactElement => {\n  return (\n    <ShellContext.Consumer>\n      {(context) => (\n        <Provider context={value} inheritedContext={context}>\n          {children}\n        </Provider>\n      )}\n    </ShellContext.Consumer>\n  );\n};\n\nexport const useShellContext = () => {\n  return useContext(ShellContext);\n};\n", "import { useCallback, useEffect, useState } from \"react\";\n\nconst useLayoutConfig = (user, defaultLayout) => {\n  const [layout, _setLayout] = useState(defaultLayout);\n\n  const setLayout = (layout) => {\n    _setLayout(layout);\n  };\n\n  const load = useCallback(\n    async (id = \"latest\") => {\n      fetch(`api/vui/${user.username}/${id}`, {})\n        .then((response) => {\n          return response.ok ? response.json() : defaultLayout;\n        })\n        .then(setLayout)\n        .catch(() => {\n          // TODO we should set a layout with a warning here\n          setLayout(defaultLayout);\n        });\n    },\n    [defaultLayout, user.username]\n  );\n\n  useEffect(() => {\n    load();\n  }, [load]);\n\n  const saveData = useCallback(\n    (data) => {\n      fetch(`api/vui/${user.username}`, {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify(data),\n      }).then((response) => {\n        return response.ok ? response.json() : defaultLayout;\n      });\n    },\n    [defaultLayout, user]\n  );\n\n  const loadLayoutById = useCallback(\n    (id) => {\n      load(id);\n    },\n    [load]\n  );\n\n  return [layout, saveData, loadLayoutById];\n};\n\nexport default useLayoutConfig;\n", "import { HTMLAttributes, useCallback } from \"react\";\nimport { VuuUser } from \"../shell\";\nimport { UserProfile } from \"../user-profile\";\nimport { ThemeSwitch } from \"../theme-switch\";\nimport { ThemeMode } from \"../theme-provider\";\nimport cx from \"classnames\";\n\nimport \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  layoutId: string;\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  onSwitchTheme?: (mode: ThemeMode) => void;\n  themeMode?: ThemeMode;\n  user: VuuUser;\n}\n\nexport const AppHeader = ({\n  className: classNameProp,\n  layoutId,\n  loginUrl,\n  onNavigate,\n  onSwitchTheme,\n  themeMode = \"light\",\n  user,\n  ...htmlAttributes\n}: AppHeaderProps) => {\n  const className = cx(classBase, classNameProp);\n  const handleSwitchTheme = useCallback(\n    (mode: ThemeMode) => onSwitchTheme?.(mode),\n    [onSwitchTheme]\n  );\n  return (\n    <header className={className} {...htmlAttributes}>\n      <ThemeSwitch defaultMode={themeMode} onChange={handleSwitchTheme} />\n      <UserProfile\n        layoutId={layoutId}\n        loginUrl={loginUrl}\n        onNavigate={onNavigate}\n        user={user}\n      />\n    </header>\n  );\n};\n", "import { Button } from \"@salt-ds/core\";\nimport { DropdownBase } from \"@heswell/salt-lab\";\nimport { UserSolidIcon } from \"@salt-ds/icons\";\nimport { UserPanel } from \"./UserPanel\";\n\nimport \"./UserProfile.css\";\nimport { VuuUser } from \"../shell\";\n\nexport interface UserProfileProps {\n  layoutId: string;\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  user: VuuUser;\n}\n\nexport const UserProfile = ({\n  layoutId,\n  loginUrl,\n  onNavigate,\n  user,\n}: UserProfileProps) => {\n  const handleNavigate = (id: string) => {\n    onNavigate(id);\n  };\n\n  return (\n    <DropdownBase className=\"vuuUserProfile\" placement=\"bottom-end\">\n      <Button variant=\"secondary\">\n        <UserSolidIcon />\n      </Button>\n      <UserPanel\n        layoutId={layoutId}\n        loginUrl={loginUrl}\n        onNavigate={handleNavigate}\n        user={user}\n      />\n    </DropdownBase>\n  );\n};\n", "import { formatDate } from \"@vuu-ui/vuu-utils\";\nimport { List, ListItem, ListItemProps } from \"@heswell/salt-lab\";\nimport { Button } from \"@salt-ds/core\";\nimport { ExportIcon } from \"@salt-ds/icons\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { getLayoutHistory, LayoutHistoryItem } from \"../get-layout-history\";\nimport { logout } from \"../login\";\nimport { VuuUser } from \"../shell\";\n\nimport \"./UserPanel.css\";\n\nconst byLastUpdate = (\n  { lastUpdate: l1 }: LayoutHistoryItem,\n  { lastUpdate: l2 }: LayoutHistoryItem\n) => {\n  return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;\n};\n\ntype HistoryEntry = {\n  id: string;\n  label: string;\n  lastUpdate: number;\n};\n\nconst HistoryListItem = (props: ListItemProps<HistoryEntry>) => {\n  return <ListItem {...props} />;\n};\n\nexport interface UserPanelProps extends HTMLAttributes<HTMLDivElement> {\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  user: VuuUser;\n  layoutId: string;\n}\n\nexport const UserPanel = forwardRef(function UserPanel(\n  { loginUrl, onNavigate, user, layoutId = \"latest\" }: UserPanelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const [history, setHistory] = useState<HistoryEntry[]>([]);\n\n  useEffect(() => {\n    async function getHistory() {\n      const history = await getLayoutHistory(user);\n      const sortedHistory = history\n        .filter((item) => item.id !== \"latest\")\n        .sort(byLastUpdate)\n        .map<HistoryEntry>(({ id, lastUpdate }) => ({\n          lastUpdate,\n          id,\n          label: `Saved at ${formatDate(new Date(lastUpdate), \"kk:mm:ss\")}`,\n        }));\n      console.log({ sortedHistory });\n      setHistory(sortedHistory);\n    }\n\n    getHistory();\n  }, [user]);\n\n  const handleHisorySelected = useCallback(\n    (evt, selected) => {\n      if (selected) {\n        onNavigate(selected.id);\n      }\n    },\n    [onNavigate]\n  );\n\n  const handleLogout = useCallback(() => {\n    logout(loginUrl);\n  }, [loginUrl]);\n\n  const selected =\n    history.length === 0\n      ? null\n      : layoutId === \"latest\"\n      ? history[0]\n      : history.find((i) => i.id === layoutId);\n\n  return (\n    <div className=\"vuuUserPanel\" ref={forwardedRef}>\n      <List<HistoryEntry>\n        ListItem={HistoryListItem}\n        className=\"vuuUserPanel-history\"\n        onSelect={handleHisorySelected}\n        selected={selected}\n        source={history}\n      />\n      <div className=\"vuuUserPanel-buttonBar\">\n        <Button aria-label=\"logout\" onClick={handleLogout}>\n          <ExportIcon /> Logout\n        </Button>\n      </div>\n    </div>\n  );\n});\n", "import { VuuUser } from \"./shell\";\n\nexport interface LayoutHistoryItem {\n  user: string;\n  id: string;\n  uniqueId: string;\n  lastUpdate: number;\n}\n\nexport const getLayoutHistory = async (\n  user: VuuUser\n): Promise<LayoutHistoryItem[]> => {\n  const history = await fetch(`api/vui/${user.username}`, {})\n    .then((response) => {\n      return response.ok ? response.json() : null;\n    })\n    .catch(() => {\n      // TODO we should set a layout with a warning here\n      console.log(\"error getting history\");\n    });\n\n  return history;\n};\n", "import {\n  ToggleButton,\n  ToggleButtonGroup,\n  ToggleButtonGroupChangeEventHandler,\n} from \"@heswell/salt-lab\";\nimport cx from \"classnames\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { HTMLAttributes, useCallback } from \"react\";\n\nimport \"./ThemeSwitch.css\";\nimport { ThemeMode } from \"../theme-provider\";\n\nconst classBase = \"vuuThemeSwitch\";\nexport interface ThemeSwitchProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultMode?: ThemeMode;\n  mode?: ThemeMode;\n  onChange: (mode: ThemeMode) => void;\n}\n\nconst modes: ThemeMode[] = [\"light\", \"dark\"];\n\nexport const ThemeSwitch = ({\n  className: classNameProp,\n  defaultMode: defaultModeProp,\n  mode: modeProp,\n  onChange,\n  ...htmlAttributes\n}: ThemeSwitchProps) => {\n  const [mode, setMode] = useControlled<ThemeMode>({\n    controlled: modeProp,\n    default: defaultModeProp ?? \"light\",\n    name: \"ThemeSwitch\",\n    state: \"mode\",\n  });\n\n  const selectedIndex = modes.indexOf(mode);\n\n  const handleChangeSecondary: ToggleButtonGroupChangeEventHandler =\n    useCallback(\n      (_evt, index) => {\n        const mode = modes[index];\n        setMode(mode);\n        onChange(mode);\n      },\n      [onChange, setMode]\n    );\n  const className = cx(classBase, classNameProp);\n  return (\n    <ToggleButtonGroup\n      className={className}\n      {...htmlAttributes}\n      onChange={handleChangeSecondary}\n      selectedIndex={selectedIndex}\n    >\n      <ToggleButton\n        aria-label=\"alert\"\n        tooltipText=\"Light Theme\"\n        data-icon=\"light\"\n      />\n      <ToggleButton\n        aria-label=\"home\"\n        tooltipText=\"Dark Theme\"\n        data-icon=\"dark\"\n      />\n    </ToggleButtonGroup>\n  );\n};\n", "import React, {\n  createContext,\n  HTMLAttributes,\n  ReactNode,\n  ReactElement,\n  isValidElement,\n  cloneElement,\n  useContext,\n} from \"react\";\nimport cx from \"classnames\";\n\nexport const DEFAULT_DENSITY: Density = \"medium\";\nexport const DEFAULT_THEME = \"salt-theme\";\nexport const DEFAULT_THEME_MODE: ThemeMode = \"light\";\n\nexport type Density = \"high\" | \"medium\" | \"low\" | \"touch\";\nexport type ThemeMode = \"light\" | \"dark\";\nexport type TargetElement = \"root\" | \"scope\" | \"child\";\n\nexport interface ThemeContextProps {\n  density: Density;\n  theme: string;\n  themeMode: ThemeMode;\n}\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  density: \"high\",\n  theme: \"salt-theme\",\n  themeMode: \"light\",\n});\n\nconst createThemedChildren = (\n  children: ReactNode,\n  theme: string,\n  themeMode: ThemeMode,\n  density: Density\n) => {\n  if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n    return cloneElement(children, {\n      className: cx(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        children.props?.className,\n        theme,\n        `salt-density-${density}`\n      ),\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error\n      \"data-mode\": themeMode,\n    });\n  } else {\n    console.warn(\n      `\\nThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.\n          Wrap elements with a single container`\n    );\n    return children;\n  }\n};\n\ninterface ThemeProviderProps {\n  children: ReactElement;\n  density?: Density;\n  theme?: string;\n  themeMode?: ThemeMode;\n  applyClassesTo?: TargetElement;\n}\n\nexport const ThemeProvider = ({\n  children,\n  theme: themeProp,\n  themeMode: themeModeProp,\n  density: densityProp,\n}: ThemeProviderProps) => {\n  const {\n    density: inheritedDensity,\n    themeMode: inheritedThemeMode,\n    theme: inheritedTheme,\n  } = useContext(ThemeContext);\n\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeMode = themeModeProp ?? inheritedThemeMode ?? DEFAULT_THEME_MODE;\n  const theme = themeProp ?? inheritedTheme ?? DEFAULT_THEME;\n  const themedChildren = createThemedChildren(\n    children,\n    theme,\n    themeMode,\n    density\n  );\n\n  return (\n    <ThemeContext.Provider value={{ themeMode, density, theme }}>\n      {themedChildren}\n    </ThemeContext.Provider>\n  );\n};\n\nThemeProvider.displayName = \"ThemeProvider\";\n"],
-  "mappings": "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",
-  "names": ["React", "useEffect", "useState", "cx", "Fragment", "jsx", "jsxs", "ConnectionStatusIcon", "connectionStatus", "className", "element", "props", "classBase", "setClassBase", "useState", "useEffect", "statusIcon", "React", "cx", "Dropdown", "useCallback", "cx", "jsx", "classBase", "densities", "DEFAULT_DENSITY", "DensitySwitch", "classNameProp", "defaultDensity", "onDensityChange", "handleSelectionChange", "_event", "selectedItem", "className", "React", "Suspense", "registerComponent", "React", "Fragment", "jsx", "jsxs", "ErrorBoundary", "props", "error", "errorInfo", "jsx", "Loader", "jsx", "RawFeature", "url", "css", "params", "props", "cssModule", "LazyFeature", "React", "ErrorBoundary", "Suspense", "Loader", "Feature", "registerComponent", "useState", "Button", "FormField", "Input", "jsx", "jsxs", "classBase", "LoginPanel", "onSubmit", "username", "setUserName", "useState", "password", "setPassword", "login", "handleUsername", "_event", "value", "handlePassword", "dataIsValid", "FormField", "Input", "Button", "getCookieValue", "getAuthDetailsFromCookies", "username", "token", "redirectToLogin", "loginUrl", "logout", "connectToServer", "cx", "useCallback", "useEffect", "useRef", "useState", "createContext", "useContext", "jsx", "defaultConfig", "ShellContext", "Provider", "children", "context", "inheritedContext", "mergedContext", "ShellContextProvider", "value", "useShellContext", "useCallback", "useEffect", "useState", "useLayoutConfig", "user", "defaultLayout", "layout", "_setLayout", "setLayout", "load", "id", "response", "saveData", "data", "loadLayoutById", "use_layout_config_default", "DockLayout", "DraggableLayout", "Drawer", "Flexbox", "LayoutProvider", "View", "useCallback", "Button", "DropdownBase", "UserSolidIcon", "formatDate", "List", "ListItem", "Button", "ExportIcon", "forwardRef", "useCallback", "useEffect", "useState", "getLayoutHistory", "user", "response", "jsx", "jsxs", "byLastUpdate", "l1", "l2", "HistoryListItem", "props", "ListItem", "UserPanel", "forwardRef", "loginUrl", "onNavigate", "user", "layoutId", "forwardedRef", "history", "setHistory", "useState", "useEffect", "getHistory", "sortedHistory", "getLayoutHistory", "item", "id", "lastUpdate", "formatDate", "handleHisorySelected", "useCallback", "evt", "selected", "handleLogout", "logout", "i", "List", "Button", "ExportIcon", "jsx", "jsxs", "UserProfile", "layoutId", "loginUrl", "onNavigate", "user", "DropdownBase", "Button", "UserSolidIcon", "UserPanel", "id", "ToggleButton", "ToggleButtonGroup", "cx", "useControlled", "useCallback", "jsx", "jsxs", "classBase", "modes", "ThemeSwitch", "classNameProp", "defaultModeProp", "modeProp", "onChange", "htmlAttributes", "mode", "setMode", "useControlled", "selectedIndex", "handleChangeSecondary", "useCallback", "_evt", "index", "className", "cx", "ToggleButtonGroup", "ToggleButton", "cx", "jsx", "jsxs", "classBase", "AppHeader", "classNameProp", "layoutId", "loginUrl", "onNavigate", "onSwitchTheme", "themeMode", "user", "htmlAttributes", "className", "cx", "handleSwitchTheme", "useCallback", "mode", "ThemeSwitch", "UserProfile", "jsx", "jsxs", "warningLayout", "Shell", "children", "classNameProp", "defaultLayout", "leftSidePanel", "loginUrl", "serverUrl", "user", "htmlAttributes", "rootRef", "useRef", "paletteView", "open", "setOpen", "useState", "layoutId", "layout", "setLayoutConfig", "loadLayoutById", "use_layout_config_default", "handleLayoutChange", "useCallback", "handleSwitchTheme", "mode", "handleDrawerClick", "e", "_a", "target", "handleNavigate", "id", "useEffect", "connectToServer", "getDrawers", "drawers", "Drawer", "View", "className", "cx", "ShellContextProvider", "LayoutProvider", "DraggableLayout", "Flexbox", "AppHeader", "DockLayout", "createContext", "isValidElement", "cloneElement", "useContext", "cx", "jsx", "DEFAULT_DENSITY", "DEFAULT_THEME", "DEFAULT_THEME_MODE", "ThemeContext", "createThemedChildren", "children", "theme", "themeMode", "density", "_a", "ThemeProvider", "themeProp", "themeModeProp", "densityProp", "_b", "_c", "inheritedDensity", "inheritedThemeMode", "inheritedTheme", "themedChildren"]
+  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport './ConnectionStatusIcon.css';\n\ntype connectionStatus = 'connected' | 'reconnected' | 'connecting' | 'disconnected';\n\ninterface ConnectionStatusProps {\n\tconnectionStatus: connectionStatus\n\tclassName?: string;\n\tprops?: unknown;\n\telement?: string;\n}\n\nexport const ConnectionStatusIcon = ({ connectionStatus, className, element = 'span', ...props}: ConnectionStatusProps) => {\n\tconst [classBase, setClassBase] = useState<string>('vuuConnectingStatus');\n\tuseEffect(() => {\n\t\tswitch(connectionStatus) {\n\t\t\tcase 'connected':\n\t\t\tcase 'reconnected':\n\t\t\t\tsetClassBase('vuuActiveStatus');\n\t\t\t\tbreak;\n\t\t\tcase 'connecting':\n\t\t\t\tsetClassBase('vuuConnectingStatus');\n\t\t\t\tbreak;\n\t\t\tcase 'disconnected':\n\t\t\t\tsetClassBase('vuuDisconnectedStatus');\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t}, [connectionStatus]);\n\n\tconst statusIcon = React.createElement (\n\t\telement,\n\t\t{\n\t\t\t...props,\n\t\t\tclassName: cx('vuuStatus vuuIcon', classBase, className)\n\t\t},\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t<div className='vuuStatus-container salt-theme'>\n\t\t\t\t{statusIcon}\n\t\t\t\t<div\tclassName='vuuStatus-text'>Status: {connectionStatus.toUpperCase()}</div>\n\t\t\t</div>\n\t\t</>\n\t)\n}", "import { Dropdown } from \"@heswell/salt-lab\";\nimport { Density } from \"@salt-ds/core\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport cx from \"classnames\";\n\nconst classBase = \"vuuDensitySwitch\";\n\nconst densities:Density[] = [\"high\", \"medium\", \"low\", \"touch\"];\nconst DEFAULT_DENSITY = \"high\";\n\nexport interface DensitySwitchProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultDensity?: Density;\n  density?: Density;\n  onDensityChange: (density: Density) => void;\n}\n\nexport const DensitySwitch = ({\n  className: classNameProp,\n  defaultDensity=DEFAULT_DENSITY,\n  onDensityChange,\n}:DensitySwitchProps) => {\n  const handleSelectionChange = useCallback((_event, selectedItem) => {\n    onDensityChange(selectedItem);\n  }, [onDensityChange])\n\n  const className = cx(classBase, classNameProp);\n\n  return (\n    <Dropdown\n    className={className}\n    source={densities}\n    defaultSelected={defaultDensity}\n    onSelectionChange={handleSelectionChange}\n    />\n  )\n}", "import React, { Suspense } from \"react\";\nimport { registerComponent } from \"@vuu-ui/vuu-layout\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { Loader } from \"./Loader\";\n// import { importCSS } from \"./css-module-loader\";\n\nexport interface FeatureProps<Params extends object | undefined = undefined> {\n  height?: number;\n  url: string;\n  css?: string;\n  width?: number;\n  params: Params;\n}\n\nfunction RawFeature<Params extends object | undefined>({\n  url,\n  css,\n  params,\n  ...props\n}: FeatureProps<Params>) {\n  if (css) {\n    import(/* @vite-ignore */ css, { assert: { type: \"css\" } }).then(\n      (cssModule) => {\n        document.adoptedStyleSheets = [\n          ...document.adoptedStyleSheets,\n          cssModule.default,\n        ];\n      }\n    );\n    // Polyfill until vite build supports import assertions\n    // Note: already fully supported in esbuild, so vite dev\n    // importCSS(css).then((styleSheet) => {\n    //   document.adoptedStyleSheets = [\n    //     ...document.adoptedStyleSheets,\n    //     styleSheet,\n    //   ];\n    // });\n  }\n  const LazyFeature = React.lazy(() => import(/* @vite-ignore */ url));\n  return (\n    <ErrorBoundary>\n      <Suspense fallback={<Loader />}>\n        <LazyFeature {...props} {...params} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n}\n\nexport const Feature = React.memo(RawFeature);\nFeature.displayName = \"Feature\";\nregisterComponent(\"Feature\", Feature, \"view\");\n", "import React from 'react';\n// TODO\nexport class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { errorMessage: null };\n  }\n\n  static getDerivedStateFromError(error) {\n    // Update state so the next render will show the fallback UI.\n    return { errorMessage: error.message };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    // You can also log the error to an error reporting service\n    console.log(error, errorInfo);\n  }\n\n  render() {\n    if (this.state.errorMessage) {\n      return (\n        <>\n          <h1>Something went wrong.</h1>\n          <p>{this.state.errorMessage}</p>\n        </>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n", "// TODO\nexport const Loader = () => <div className=\"hwLoader\">loading</div>;\n", "import { ChangeEvent, HTMLAttributes, useState } from \"react\";\nimport { Button } from \"@salt-ds/core\";\nimport { FormField, Input } from \"@heswell/salt-lab\";\n\nimport \"./LoginPanel.css\";\n\nconst classBase = \"vuuLoginPanel\";\n\nexport interface LoginPanelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\"> {\n  onSubmit: (username: string, password: string) => void;\n}\n\nexport const LoginPanel = ({ onSubmit }: LoginPanelProps) => {\n  const [username, setUserName] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n\n  const login = () => {\n    onSubmit(username, password);\n  };\n\n  const handleUsername = (\n    _event: ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setUserName(value);\n  };\n\n  const handlePassword = (\n    _event: ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setPassword(value);\n  };\n\n  const dataIsValid = username.trim() !== \"\" && password.trim() !== \"\";\n\n  return (\n    <div className={classBase}>\n      <FormField label=\"Username\" style={{ width: 200 }}>\n        <Input value={username} id=\"text-username\" onChange={handleUsername} />\n      </FormField>\n\n      <FormField label=\"Password\" style={{ width: 200 }}>\n        <Input\n          type=\"password\"\n          value={password}\n          id=\"text-password\"\n          onChange={handlePassword}\n        />\n      </FormField>\n\n      <Button\n        className={`${classBase}-login`}\n        disabled={!dataIsValid}\n        onClick={login}\n        variant=\"cta\"\n      >\n        Login\n      </Button>\n    </div>\n  );\n};\n", "import { getCookieValue } from \"@vuu-ui/vuu-utils\";\n\nexport const getAuthDetailsFromCookies = () => {\n  const username = getCookieValue(\"vuu-username\");\n  const token = getCookieValue(\"vuu-auth-token\");\n  return [username, token];\n};\n\nexport const redirectToLogin = (loginUrl = \"login.html\") => {\n  window.location.href = loginUrl;\n};\n\nexport const logout = (loginUrl?: string) => {\n  document.cookie = \"vuu-username= ; expires = Thu, 01 Jan 1970 00:00:00 GMT\";\n  document.cookie = \"vuu-auth-token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT\";\n  redirectToLogin(loginUrl);\n};\n", "import { connectToServer } from \"@vuu-ui/vuu-data\";\nimport cx from \"classnames\";\nimport {\n  HTMLAttributes,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ShellContextProvider } from \"./ShellContextProvider\";\nimport useLayoutConfig from \"./use-layout-config\";\nimport {\n  DockLayout,\n  DraggableLayout,\n  Drawer,\n  Flexbox,\n  LayoutProvider,\n  View,\n} from \"@vuu-ui/vuu-layout\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-layout/src/layout-reducer\";\nimport { AppHeader } from \"./app-header\";\nimport { ThemeMode } from \"./theme-provider\";\n\nimport \"./shell.css\";\n\nexport type VuuUser = {\n  username: string;\n  token: string;\n};\n\nconst warningLayout = {\n  type: \"View\",\n  props: {\n    style: { height: \"calc(100% - 6px)\" },\n  },\n  children: [\n    {\n      props: {\n        className: \"vuuShell-warningPlaceholder\",\n      },\n      type: \"Placeholder\",\n    },\n  ],\n};\n\nexport interface ShellProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  defaultLayout?: LayoutJSON;\n  leftSidePanel?: ReactElement;\n  loginUrl?: string;\n  // paletteConfig: any;\n  serverUrl?: string;\n  user: VuuUser;\n}\n\nexport const Shell = ({\n  children,\n  className: classNameProp,\n  defaultLayout = warningLayout,\n  leftSidePanel,\n  loginUrl,\n  serverUrl,\n  user,\n  ...htmlAttributes\n}: ShellProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const paletteView = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const layoutId = useRef(\"latest\");\n\n  const [layout, setLayoutConfig, loadLayoutById] = useLayoutConfig(\n    user,\n    defaultLayout\n  );\n\n  const handleLayoutChange = useCallback(\n    (layout) => {\n      setLayoutConfig(layout);\n    },\n    [setLayoutConfig]\n  );\n\n  const handleSwitchTheme = useCallback((mode: ThemeMode) => {\n    if (rootRef.current) {\n      rootRef.current.dataset.mode = mode;\n    }\n  }, []);\n\n  const handleDrawerClick = (e: MouseEvent<HTMLElement>) => {\n    const target = e.target as HTMLElement;\n    if (!paletteView.current?.contains(target)) {\n      setOpen(!open);\n    }\n  };\n\n  const handleNavigate = useCallback(\n    (id) => {\n      layoutId.current = id;\n      loadLayoutById(id);\n    },\n    [loadLayoutById]\n  );\n\n  useEffect(() => {\n    if (serverUrl && user.token) {\n      connectToServer({\n        authToken: user.token,\n        url: serverUrl,\n        username: user.username,\n      });\n    }\n  }, [serverUrl, user.token, user.username]);\n\n  const getDrawers = () => {\n    const drawers: ReactElement[] = [];\n    if (leftSidePanel) {\n      drawers.push(\n        <Drawer\n          key=\"left-panel\"\n          onClick={handleDrawerClick}\n          open={open}\n          position=\"left\"\n          inline\n          peekaboo\n          sizeOpen={200}\n          toggleButton=\"end\"\n        >\n          <View\n            className=\"vuuShell-palette\"\n            id=\"vw-app-palette\"\n            key=\"app-palette\"\n            ref={paletteView}\n            style={{ height: \"100%\" }}\n          >\n            {leftSidePanel}\n          </View>\n        </Drawer>\n      );\n    }\n\n    return drawers;\n  };\n\n  const className = cx(\n    \"vuuShell\",\n    classNameProp,\n    \"salt-theme\",\n    \"salt-density-high\"\n  );\n\n  return (\n    // ShellContext TBD\n    <ShellContextProvider value={undefined}>\n      <LayoutProvider layout={layout} onLayoutChange={handleLayoutChange}>\n        <DraggableLayout\n          className={className}\n          data-mode=\"light\"\n          ref={rootRef}\n          {...htmlAttributes}\n        >\n          <Flexbox\n            className=\"App\"\n            style={{ flexDirection: \"column\", height: \"100%\", width: \"100%\" }}\n          >\n            <AppHeader\n              layoutId={layoutId.current}\n              loginUrl={loginUrl}\n              user={user}\n              onNavigate={handleNavigate}\n              onSwitchTheme={handleSwitchTheme}\n            />\n            <DockLayout style={{ flex: 1 }}>\n              {getDrawers().concat(\n                <DraggableLayout\n                  dropTarget\n                  key=\"main-content\"\n                  style={{ width: \"100%\", height: \"100%\" }}\n                />\n              )}\n            </DockLayout>\n          </Flexbox>\n        </DraggableLayout>\n      </LayoutProvider>\n      {children}\n    </ShellContextProvider>\n  );\n};\n", "import { MenuRpcResponse } from \"@vuu-ui/vuu-data\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-datagrid-types\";\nimport { createContext, ReactElement, ReactNode, useContext } from \"react\";\n\nexport interface ShellContextProps {\n  getDefaultColumnConfig?: (\n    tableName: string,\n    columnName: string\n  ) => Partial<ColumnDescriptor>;\n  handleRpcResponse?: (response?: MenuRpcResponse) => void;\n}\n\nconst defaultConfig = {};\n\nconst ShellContext = createContext<ShellContextProps>(defaultConfig);\n\nexport interface ShellProviderProps {\n  children: ReactNode;\n  value?: ShellContextProps;\n}\n\nconst Provider = ({\n  children,\n  context,\n  inheritedContext,\n}: {\n  children: ReactNode;\n  context?: ShellContextProps;\n  inheritedContext?: ShellContextProps;\n}) => {\n  // TODO functions provided at multiple levels must be merged\n  const mergedContext = {\n    ...inheritedContext,\n    ...context,\n  };\n  return (\n    <ShellContext.Provider value={mergedContext}>\n      {children}\n    </ShellContext.Provider>\n  );\n};\n\nexport const ShellContextProvider = ({\n  children,\n  value,\n}: ShellProviderProps): ReactElement => {\n  return (\n    <ShellContext.Consumer>\n      {(context) => (\n        <Provider context={value} inheritedContext={context}>\n          {children}\n        </Provider>\n      )}\n    </ShellContext.Consumer>\n  );\n};\n\nexport const useShellContext = () => {\n  return useContext(ShellContext);\n};\n", "import { useCallback, useEffect, useState } from \"react\";\n\nconst useLayoutConfig = (user, defaultLayout) => {\n  const [layout, _setLayout] = useState(defaultLayout);\n\n  const setLayout = (layout) => {\n    _setLayout(layout);\n  };\n\n  const load = useCallback(\n    async (id = \"latest\") => {\n      fetch(`api/vui/${user.username}/${id}`, {})\n        .then((response) => {\n          return response.ok ? response.json() : defaultLayout;\n        })\n        .then(setLayout)\n        .catch(() => {\n          // TODO we should set a layout with a warning here\n          setLayout(defaultLayout);\n        });\n    },\n    [defaultLayout, user.username]\n  );\n\n  useEffect(() => {\n    load();\n  }, [load]);\n\n  const saveData = useCallback(\n    (data) => {\n      fetch(`api/vui/${user.username}`, {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify(data),\n      }).then((response) => {\n        return response.ok ? response.json() : defaultLayout;\n      });\n    },\n    [defaultLayout, user]\n  );\n\n  const loadLayoutById = useCallback(\n    (id) => {\n      load(id);\n    },\n    [load]\n  );\n\n  return [layout, saveData, loadLayoutById];\n};\n\nexport default useLayoutConfig;\n", "import { HTMLAttributes, useCallback } from \"react\";\nimport { VuuUser } from \"../shell\";\nimport { UserProfile } from \"../user-profile\";\nimport { ThemeSwitch } from \"../theme-switch\";\nimport { ThemeMode } from \"../theme-provider\";\nimport cx from \"classnames\";\n\nimport \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  layoutId: string;\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  onSwitchTheme?: (mode: ThemeMode) => void;\n  themeMode?: ThemeMode;\n  user: VuuUser;\n}\n\nexport const AppHeader = ({\n  className: classNameProp,\n  layoutId,\n  loginUrl,\n  onNavigate,\n  onSwitchTheme,\n  themeMode = \"light\",\n  user,\n  ...htmlAttributes\n}: AppHeaderProps) => {\n  const className = cx(classBase, classNameProp);\n  const handleSwitchTheme = useCallback(\n    (mode: ThemeMode) => onSwitchTheme?.(mode),\n    [onSwitchTheme]\n  );\n  return (\n    <header className={className} {...htmlAttributes}>\n      <ThemeSwitch defaultMode={themeMode} onChange={handleSwitchTheme} />\n      <UserProfile\n        layoutId={layoutId}\n        loginUrl={loginUrl}\n        onNavigate={onNavigate}\n        user={user}\n      />\n    </header>\n  );\n};\n", "import { Button } from \"@salt-ds/core\";\nimport { DropdownBase } from \"@heswell/salt-lab\";\nimport { UserSolidIcon } from \"@salt-ds/icons\";\nimport { UserPanel } from \"./UserPanel\";\n\nimport \"./UserProfile.css\";\nimport { VuuUser } from \"../shell\";\n\nexport interface UserProfileProps {\n  layoutId: string;\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  user: VuuUser;\n}\n\nexport const UserProfile = ({\n  layoutId,\n  loginUrl,\n  onNavigate,\n  user,\n}: UserProfileProps) => {\n  const handleNavigate = (id: string) => {\n    onNavigate(id);\n  };\n\n  return (\n    <DropdownBase className=\"vuuUserProfile\" placement=\"bottom-end\">\n      <Button variant=\"secondary\">\n        <UserSolidIcon />\n      </Button>\n      <UserPanel\n        layoutId={layoutId}\n        loginUrl={loginUrl}\n        onNavigate={handleNavigate}\n        user={user}\n      />\n    </DropdownBase>\n  );\n};\n", "import { formatDate } from \"@vuu-ui/vuu-utils\";\nimport { List, ListItem, ListItemProps } from \"@heswell/salt-lab\";\nimport { Button } from \"@salt-ds/core\";\nimport { ExportIcon } from \"@salt-ds/icons\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { getLayoutHistory, LayoutHistoryItem } from \"../get-layout-history\";\nimport { logout } from \"../login\";\nimport { VuuUser } from \"../shell\";\n\nimport \"./UserPanel.css\";\n\nconst byLastUpdate = (\n  { lastUpdate: l1 }: LayoutHistoryItem,\n  { lastUpdate: l2 }: LayoutHistoryItem\n) => {\n  return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;\n};\n\ntype HistoryEntry = {\n  id: string;\n  label: string;\n  lastUpdate: number;\n};\n\nconst HistoryListItem = (props: ListItemProps<HistoryEntry>) => {\n  return <ListItem {...props} />;\n};\n\nexport interface UserPanelProps extends HTMLAttributes<HTMLDivElement> {\n  loginUrl?: string;\n  onNavigate: (id: string) => void;\n  user: VuuUser;\n  layoutId: string;\n}\n\nexport const UserPanel = forwardRef(function UserPanel(\n  { loginUrl, onNavigate, user, layoutId = \"latest\" }: UserPanelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const [history, setHistory] = useState<HistoryEntry[]>([]);\n\n  useEffect(() => {\n    async function getHistory() {\n      const history = await getLayoutHistory(user);\n      const sortedHistory = history\n        .filter((item) => item.id !== \"latest\")\n        .sort(byLastUpdate)\n        .map<HistoryEntry>(({ id, lastUpdate }) => ({\n          lastUpdate,\n          id,\n          label: `Saved at ${formatDate(new Date(lastUpdate), \"kk:mm:ss\")}`,\n        }));\n      console.log({ sortedHistory });\n      setHistory(sortedHistory);\n    }\n\n    getHistory();\n  }, [user]);\n\n  const handleHisorySelected = useCallback(\n    (evt, selected) => {\n      if (selected) {\n        onNavigate(selected.id);\n      }\n    },\n    [onNavigate]\n  );\n\n  const handleLogout = useCallback(() => {\n    logout(loginUrl);\n  }, [loginUrl]);\n\n  const selected =\n    history.length === 0\n      ? null\n      : layoutId === \"latest\"\n      ? history[0]\n      : history.find((i) => i.id === layoutId);\n\n  return (\n    <div className=\"vuuUserPanel\" ref={forwardedRef}>\n      <List<HistoryEntry>\n        ListItem={HistoryListItem}\n        className=\"vuuUserPanel-history\"\n        onSelect={handleHisorySelected}\n        selected={selected}\n        source={history}\n      />\n      <div className=\"vuuUserPanel-buttonBar\">\n        <Button aria-label=\"logout\" onClick={handleLogout}>\n          <ExportIcon /> Logout\n        </Button>\n      </div>\n    </div>\n  );\n});\n", "import { VuuUser } from \"./shell\";\n\nexport interface LayoutHistoryItem {\n  user: string;\n  id: string;\n  uniqueId: string;\n  lastUpdate: number;\n}\n\nexport const getLayoutHistory = async (\n  user: VuuUser\n): Promise<LayoutHistoryItem[]> => {\n  const history = await fetch(`api/vui/${user.username}`, {})\n    .then((response) => {\n      return response.ok ? response.json() : null;\n    })\n    .catch(() => {\n      // TODO we should set a layout with a warning here\n      console.log(\"error getting history\");\n    });\n\n  return history;\n};\n", "import {\n  ToggleButton,\n  ToggleButtonGroup,\n  ToggleButtonGroupChangeEventHandler,\n} from \"@heswell/salt-lab\";\nimport cx from \"classnames\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { HTMLAttributes, useCallback } from \"react\";\n\nimport \"./ThemeSwitch.css\";\nimport { ThemeMode } from \"../theme-provider\";\n\nconst classBase = \"vuuThemeSwitch\";\nexport interface ThemeSwitchProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultMode?: ThemeMode;\n  mode?: ThemeMode;\n  onChange: (mode: ThemeMode) => void;\n}\n\nconst modes: ThemeMode[] = [\"light\", \"dark\"];\n\nexport const ThemeSwitch = ({\n  className: classNameProp,\n  defaultMode: defaultModeProp,\n  mode: modeProp,\n  onChange,\n  ...htmlAttributes\n}: ThemeSwitchProps) => {\n  const [mode, setMode] = useControlled<ThemeMode>({\n    controlled: modeProp,\n    default: defaultModeProp ?? \"light\",\n    name: \"ThemeSwitch\",\n    state: \"mode\",\n  });\n\n  const selectedIndex = modes.indexOf(mode);\n\n  const handleChangeSecondary: ToggleButtonGroupChangeEventHandler =\n    useCallback(\n      (_evt, index) => {\n        const mode = modes[index];\n        setMode(mode);\n        onChange(mode);\n      },\n      [onChange, setMode]\n    );\n  const className = cx(classBase, classNameProp);\n  return (\n    <ToggleButtonGroup\n      className={className}\n      {...htmlAttributes}\n      onChange={handleChangeSecondary}\n      selectedIndex={selectedIndex}\n    >\n      <ToggleButton\n        aria-label=\"alert\"\n        tooltipText=\"Light Theme\"\n        data-icon=\"light\"\n      />\n      <ToggleButton\n        aria-label=\"home\"\n        tooltipText=\"Dark Theme\"\n        data-icon=\"dark\"\n      />\n    </ToggleButtonGroup>\n  );\n};\n", "import React, {\n  createContext,\n  HTMLAttributes,\n  ReactNode,\n  ReactElement,\n  isValidElement,\n  cloneElement,\n  useContext,\n} from \"react\";\nimport cx from \"classnames\";\n\nexport const DEFAULT_DENSITY: Density = \"medium\";\nexport const DEFAULT_THEME = \"salt-theme\";\nexport const DEFAULT_THEME_MODE: ThemeMode = \"light\";\n\nexport type Density = \"high\" | \"medium\" | \"low\" | \"touch\";\nexport type ThemeMode = \"light\" | \"dark\";\nexport type TargetElement = \"root\" | \"scope\" | \"child\";\n\nexport interface ThemeContextProps {\n  density: Density;\n  theme: string;\n  themeMode: ThemeMode;\n}\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  density: \"high\",\n  theme: \"salt-theme\",\n  themeMode: \"light\",\n});\n\nconst createThemedChildren = (\n  children: ReactNode,\n  theme: string,\n  themeMode: ThemeMode,\n  density: Density\n) => {\n  if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n    return cloneElement(children, {\n      className: cx(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        children.props?.className,\n        theme,\n        `salt-density-${density}`\n      ),\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error\n      \"data-mode\": themeMode,\n    });\n  } else {\n    console.warn(\n      `\\nThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.\n          Wrap elements with a single container`\n    );\n    return children;\n  }\n};\n\ninterface ThemeProviderProps {\n  children: ReactElement;\n  density?: Density;\n  theme?: string;\n  themeMode?: ThemeMode;\n  applyClassesTo?: TargetElement;\n}\n\nexport const ThemeProvider = ({\n  children,\n  theme: themeProp,\n  themeMode: themeModeProp,\n  density: densityProp,\n}: ThemeProviderProps) => {\n  const {\n    density: inheritedDensity,\n    themeMode: inheritedThemeMode,\n    theme: inheritedTheme,\n  } = useContext(ThemeContext);\n\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeMode = themeModeProp ?? inheritedThemeMode ?? DEFAULT_THEME_MODE;\n  const theme = themeProp ?? inheritedTheme ?? DEFAULT_THEME;\n  const themedChildren = createThemedChildren(\n    children,\n    theme,\n    themeMode,\n    density\n  );\n\n  return (\n    <ThemeContext.Provider value={{ themeMode, density, theme }}>\n      {themedChildren}\n    </ThemeContext.Provider>\n  );\n};\n\nThemeProvider.displayName = \"ThemeProvider\";\n"],
+  "mappings": ";AAAA,OAAO,SAAS,WAAW,gBAAgB;AAC3C,OAAO,QAAQ;AAwCb,wBAGE,YAHF;AA5BK,IAAM,uBAAuB,CAAC,EAAE,kBAAkB,WAAW,UAAU,QAAQ,GAAG,MAAK,MAA6B;AAC1H,QAAM,CAACA,YAAW,YAAY,IAAI,SAAiB,qBAAqB;AACxE,YAAU,MAAM;AACf,YAAO,kBAAkB;AAAA,MACxB,KAAK;AAAA,MACL,KAAK;AACJ,qBAAa,iBAAiB;AAC9B;AAAA,MACD,KAAK;AACJ,qBAAa,qBAAqB;AAClC;AAAA,MACD,KAAK;AACJ,qBAAa,uBAAuB;AACpC;AAAA,MACD;AACC;AAAA,IACF;AAAA,EACD,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,aAAa,MAAM;AAAA,IACxB;AAAA,IACA;AAAA,MACC,GAAG;AAAA,MACH,WAAW,GAAG,qBAAqBA,YAAW,SAAS;AAAA,IACxD;AAAA,EACD;AAEA,SACC,gCACC,+BAAC,SAAI,WAAU,kCACb;AAAA;AAAA,IACD,qBAAC,SAAI,WAAU,kBAAiB;AAAA;AAAA,MAAS,iBAAiB,YAAY;AAAA,OAAE;AAAA,KACzE,GACD;AAEF;;;AChDA,SAAS,gBAAgB;AAEzB,SAAyB,mBAAmB;AAC5C,OAAOC,SAAQ;AA0BX,gBAAAC,YAAA;AAxBJ,IAAM,YAAY;AAElB,IAAM,YAAsB,CAAC,QAAQ,UAAU,OAAO,OAAO;AAC7D,IAAM,kBAAkB;AASjB,IAAM,gBAAgB,CAAC;AAAA,EAC5B,WAAW;AAAA,EACX,iBAAe;AAAA,EACf;AACF,MAAyB;AACvB,QAAM,wBAAwB,YAAY,CAAC,QAAQ,iBAAiB;AAClE,oBAAgB,YAAY;AAAA,EAC9B,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,YAAYD,IAAG,WAAW,aAAa;AAE7C,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACD;AAAA,MACA,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,mBAAmB;AAAA;AAAA,EACnB;AAEJ;;;ACpCA,OAAOC,UAAS,gBAAgB;AAChC,SAAS,yBAAyB;;;ACDlC,OAAOC,YAAW;AAqBV,qBAAAC,WACE,OAAAC,MADF,QAAAC,aAAA;AAnBD,IAAM,gBAAN,cAA4BH,OAAM,UAAU;AAAA,EACjD,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,QAAQ,EAAE,cAAc,KAAK;AAAA,EACpC;AAAA,EAEA,OAAO,yBAAyB,OAAO;AAErC,WAAO,EAAE,cAAc,MAAM,QAAQ;AAAA,EACvC;AAAA,EAEA,kBAAkB,OAAO,WAAW;AAElC,YAAQ,IAAI,OAAO,SAAS;AAAA,EAC9B;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,cAAc;AAC3B,aACE,gBAAAG,MAAAF,WAAA,EACE;AAAA,wBAAAC,KAAC,QAAG,mCAAqB;AAAA,QACzB,gBAAAA,KAAC,OAAG,eAAK,MAAM,cAAa;AAAA,SAC9B;AAAA,IAEJ;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;;;AC7B4B,gBAAAE,YAAA;AAArB,IAAM,SAAS,MAAM,gBAAAA,KAAC,SAAI,WAAU,YAAW,qBAAO;;;AFwCnC,gBAAAC,YAAA;AA3B1B,SAAS,WAA8C;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,MAAI,KAAK;AACP;AAAA;AAAA,MAA0B;AAAA,MAAkC;AAAA,MAC1D,CAAC,cAAc;AACb,iBAAS,qBAAqB;AAAA,UAC5B,GAAG,SAAS;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF;AAAA,EASF;AACA,QAAM,cAAcC,OAAM,KAAK,MAAM;AAAA;AAAA,IAA0B;AAAA,GAAI;AACnE,SACE,gBAAAD,KAAC,iBACC,0BAAAA,KAAC,YAAS,UAAU,gBAAAA,KAAC,UAAO,GAC1B,0BAAAA,KAAC,eAAa,GAAG,OAAQ,GAAG,QAAQ,GACtC,GACF;AAEJ;AAEO,IAAM,UAAUC,OAAM,KAAK,UAAU;AAC5C,QAAQ,cAAc;AACtB,kBAAkB,WAAW,SAAS,MAAM;;;AGlD5C,SAAsC,YAAAC,iBAAgB;AACtD,SAAS,cAAc;AACvB,SAAS,WAAW,aAAa;AAoC7B,SAEI,OAAAC,MAFJ,QAAAC,aAAA;AAhCJ,IAAMC,aAAY;AAOX,IAAM,aAAa,CAAC,EAAE,SAAS,MAAuB;AAC3D,QAAM,CAAC,UAAU,WAAW,IAAIC,UAAS,EAAE;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAIA,UAAS,EAAE;AAE3C,QAAM,QAAQ,MAAM;AAClB,aAAS,UAAU,QAAQ;AAAA,EAC7B;AAEA,QAAM,iBAAiB,CACrB,QACA,UACG;AACH,gBAAY,KAAK;AAAA,EACnB;AAEA,QAAM,iBAAiB,CACrB,QACA,UACG;AACH,gBAAY,KAAK;AAAA,EACnB;AAEA,QAAM,cAAc,SAAS,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM;AAElE,SACE,gBAAAF,MAAC,SAAI,WAAWC,YACd;AAAA,oBAAAF,KAAC,aAAU,OAAM,YAAW,OAAO,EAAE,OAAO,IAAI,GAC9C,0BAAAA,KAAC,SAAM,OAAO,UAAU,IAAG,iBAAgB,UAAU,gBAAgB,GACvE;AAAA,IAEA,gBAAAA,KAAC,aAAU,OAAM,YAAW,OAAO,EAAE,OAAO,IAAI,GAC9C,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,IAAG;AAAA,QACH,UAAU;AAAA;AAAA,IACZ,GACF;AAAA,IAEA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAGE;AAAA,QACd,UAAU,CAAC;AAAA,QACX,SAAS;AAAA,QACT,SAAQ;AAAA,QACT;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;;;AC9DA,SAAS,sBAAsB;AAExB,IAAM,4BAA4B,MAAM;AAC7C,QAAM,WAAW,eAAe,cAAc;AAC9C,QAAM,QAAQ,eAAe,gBAAgB;AAC7C,SAAO,CAAC,UAAU,KAAK;AACzB;AAEO,IAAM,kBAAkB,CAAC,WAAW,iBAAiB;AAC1D,SAAO,SAAS,OAAO;AACzB;AAEO,IAAM,SAAS,CAAC,aAAsB;AAC3C,WAAS,SAAS;AAClB,WAAS,SAAS;AAClB,kBAAgB,QAAQ;AAC1B;;;AChBA,SAAS,uBAAuB;AAChC,OAAOE,SAAQ;AACf;AAAA,EAKE,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA,YAAAC;AAAA,OACK;;;ACTP,SAAS,eAAwC,kBAAkB;AAkC/D,gBAAAC,YAAA;AAxBJ,IAAM,gBAAgB,CAAC;AAEvB,IAAM,eAAe,cAAiC,aAAa;AAOnE,IAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AAEJ,QAAM,gBAAgB;AAAA,IACpB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,SACE,gBAAAA,KAAC,aAAa,UAAb,EAAsB,OAAO,eAC3B,UACH;AAEJ;AAEO,IAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AACF,MAAwC;AACtC,SACE,gBAAAA,KAAC,aAAa,UAAb,EACE,WAAC,YACA,gBAAAA,KAAC,YAAS,SAAS,OAAO,kBAAkB,SACzC,UACH,GAEJ;AAEJ;AAEO,IAAM,kBAAkB,MAAM;AACnC,SAAO,WAAW,YAAY;AAChC;;;AC3DA,SAAS,eAAAC,cAAa,aAAAC,YAAW,YAAAC,iBAAgB;AAEjD,IAAM,kBAAkB,CAAC,MAAM,kBAAkB;AAC/C,QAAM,CAAC,QAAQ,UAAU,IAAIA,UAAS,aAAa;AAEnD,QAAM,YAAY,CAACC,YAAW;AAC5B,eAAWA,OAAM;AAAA,EACnB;AAEA,QAAM,OAAOH;AAAA,IACX,OAAO,KAAK,aAAa;AACvB,YAAM,WAAW,KAAK,YAAY,MAAM,CAAC,CAAC,EACvC,KAAK,CAAC,aAAa;AAClB,eAAO,SAAS,KAAK,SAAS,KAAK,IAAI;AAAA,MACzC,CAAC,EACA,KAAK,SAAS,EACd,MAAM,MAAM;AAEX,kBAAU,aAAa;AAAA,MACzB,CAAC;AAAA,IACL;AAAA,IACA,CAAC,eAAe,KAAK,QAAQ;AAAA,EAC/B;AAEA,EAAAC,WAAU,MAAM;AACd,SAAK;AAAA,EACP,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,WAAWD;AAAA,IACf,CAAC,SAAS;AACR,YAAM,WAAW,KAAK,YAAY;AAAA,QAChC,QAAQ;AAAA,QACR,SAAS;AAAA,UACP,gBAAgB;AAAA,QAClB;AAAA,QACA,MAAM,KAAK,UAAU,IAAI;AAAA,MAC3B,CAAC,EAAE,KAAK,CAAC,aAAa;AACpB,eAAO,SAAS,KAAK,SAAS,KAAK,IAAI;AAAA,MACzC,CAAC;AAAA,IACH;AAAA,IACA,CAAC,eAAe,IAAI;AAAA,EACtB;AAEA,QAAM,iBAAiBA;AAAA,IACrB,CAAC,OAAO;AACN,WAAK,EAAE;AAAA,IACT;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,SAAO,CAAC,QAAQ,UAAU,cAAc;AAC1C;AAEA,IAAO,4BAAQ;;;AFvCf;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;AGrBP,SAAyB,eAAAI,oBAAmB;;;ACA5C,SAAS,UAAAC,eAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;;;ACF9B,SAAS,kBAAkB;AAC3B,SAAS,MAAM,gBAA+B;AAC9C,SAAS,UAAAC,eAAc;AACvB,SAAS,kBAAkB;AAC3B;AAAA,EAEE;AAAA,EAEA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,OACK;;;ACFA,IAAM,mBAAmB,OAC9B,SACiC;AACjC,QAAM,UAAU,MAAM,MAAM,WAAW,KAAK,YAAY,CAAC,CAAC,EACvD,KAAK,CAAC,aAAa;AAClB,WAAO,SAAS,KAAK,SAAS,KAAK,IAAI;AAAA,EACzC,CAAC,EACA,MAAM,MAAM;AAEX,YAAQ,IAAI,uBAAuB;AAAA,EACrC,CAAC;AAEH,SAAO;AACT;;;ADUS,gBAAAC,MAgED,QAAAC,aAhEC;AAdT,IAAM,eAAe,CACnB,EAAE,YAAY,GAAG,GACjB,EAAE,YAAY,GAAG,MACd;AACH,SAAO,OAAO,KAAK,IAAI,KAAK,KAAK,KAAK;AACxC;AAQA,IAAM,kBAAkB,CAAC,UAAuC;AAC9D,SAAO,gBAAAD,KAAC,YAAU,GAAG,OAAO;AAC9B;AASO,IAAM,YAAY,WAAW,SAASE,WAC3C,EAAE,UAAU,YAAY,MAAM,WAAW,SAAS,GAClD,cACA;AACA,QAAM,CAAC,SAAS,UAAU,IAAIC,UAAyB,CAAC,CAAC;AAEzD,EAAAC,WAAU,MAAM;AACd,mBAAe,aAAa;AAC1B,YAAMC,WAAU,MAAM,iBAAiB,IAAI;AAC3C,YAAM,gBAAgBA,SACnB,OAAO,CAAC,SAAS,KAAK,OAAO,QAAQ,EACrC,KAAK,YAAY,EACjB,IAAkB,CAAC,EAAE,IAAI,WAAW,OAAO;AAAA,QAC1C;AAAA,QACA;AAAA,QACA,OAAO,YAAY,WAAW,IAAI,KAAK,UAAU,GAAG,UAAU;AAAA,MAChE,EAAE;AACJ,cAAQ,IAAI,EAAE,cAAc,CAAC;AAC7B,iBAAW,aAAa;AAAA,IAC1B;AAEA,eAAW;AAAA,EACb,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,uBAAuBC;AAAA,IAC3B,CAAC,KAAKC,cAAa;AACjB,UAAIA,WAAU;AACZ,mBAAWA,UAAS,EAAE;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,eAAeD,aAAY,MAAM;AACrC,WAAO,QAAQ;AAAA,EACjB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,WACJ,QAAQ,WAAW,IACf,OACA,aAAa,WACb,QAAQ,CAAC,IACT,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ;AAE3C,SACE,gBAAAL,MAAC,SAAI,WAAU,gBAAe,KAAK,cACjC;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA,QAAQ;AAAA;AAAA,IACV;AAAA,IACA,gBAAAA,KAAC,SAAI,WAAU,0BACb,0BAAAC,MAACO,SAAA,EAAO,cAAW,UAAS,SAAS,cACnC;AAAA,sBAAAR,KAAC,cAAW;AAAA,MAAE;AAAA,OAChB,GACF;AAAA,KACF;AAEJ,CAAC;;;AD5EG,SAEI,OAAAS,MAFJ,QAAAC,aAAA;AAXG,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,QAAM,iBAAiB,CAAC,OAAe;AACrC,eAAW,EAAE;AAAA,EACf;AAEA,SACE,gBAAAA,MAAC,gBAAa,WAAU,kBAAiB,WAAU,cACjD;AAAA,oBAAAD,KAACE,SAAA,EAAO,SAAQ,aACd,0BAAAF,KAAC,iBAAc,GACjB;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;;;AGtCA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,OAAOG,SAAQ;AACf,SAAS,qBAAqB;AAC9B,SAAyB,eAAAC,oBAAmB;AA0CxC,SAME,OAAAC,OANF,QAAAC,aAAA;AArCJ,IAAMC,aAAY;AAQlB,IAAM,QAAqB,CAAC,SAAS,MAAM;AAEpC,IAAM,cAAc,CAAC;AAAA,EAC1B,WAAW;AAAA,EACX,aAAa;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,cAAyB;AAAA,IAC/C,YAAY;AAAA,IACZ,SAAS,4CAAmB;AAAA,IAC5B,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AAED,QAAM,gBAAgB,MAAM,QAAQ,IAAI;AAExC,QAAM,wBACJC;AAAA,IACE,CAAC,MAAM,UAAU;AACf,YAAMC,QAAO,MAAM,KAAK;AACxB,cAAQA,KAAI;AACZ,eAASA,KAAI;AAAA,IACf;AAAA,IACA,CAAC,UAAU,OAAO;AAAA,EACpB;AACF,QAAM,YAAYC,IAAGH,YAAW,aAAa;AAC7C,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MAEA;AAAA,wBAAAD;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,aAAY;AAAA,YACZ,aAAU;AAAA;AAAA,QACZ;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,aAAY;AAAA,YACZ,aAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EACF;AAEJ;;;AJ9DA,OAAOM,SAAQ;AA8BX,SACE,OAAAC,OADF,QAAAC,aAAA;AA1BJ,IAAMC,aAAY;AAUX,IAAM,YAAY,CAAC;AAAA,EACxB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,YAAYC,IAAGD,YAAW,aAAa;AAC7C,QAAM,oBAAoBE;AAAA,IACxB,CAAC,SAAoB,+CAAgB;AAAA,IACrC,CAAC,aAAa;AAAA,EAChB;AACA,SACE,gBAAAH,MAAC,YAAO,WAAuB,GAAG,gBAChC;AAAA,oBAAAD,MAAC,eAAY,aAAa,WAAW,UAAU,mBAAmB;AAAA,IAClE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;;;AHqFU,gBAAAK,OAiCA,QAAAC,aAjCA;AAjGV,IAAM,gBAAgB;AAAA,EACpB,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO,EAAE,QAAQ,mBAAmB;AAAA,EACtC;AAAA,EACA,UAAU;AAAA,IACR;AAAA,MACE,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAYO,IAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AAChB,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAIC,UAAS,KAAK;AACtC,QAAM,WAAW,OAAO,QAAQ;AAEhC,QAAM,CAAC,QAAQ,iBAAiB,cAAc,IAAI;AAAA,IAChD;AAAA,IACA;AAAA,EACF;AAEA,QAAM,qBAAqBC;AAAA,IACzB,CAACC,YAAW;AACV,sBAAgBA,OAAM;AAAA,IACxB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,oBAAoBD,aAAY,CAAC,SAAoB;AACzD,QAAI,QAAQ,SAAS;AACnB,cAAQ,QAAQ,QAAQ,OAAO;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB,CAAC,MAA+B;AA3F5D;AA4FI,UAAM,SAAS,EAAE;AACjB,QAAI,GAAC,iBAAY,YAAZ,mBAAqB,SAAS,UAAS;AAC1C,cAAQ,CAAC,IAAI;AAAA,IACf;AAAA,EACF;AAEA,QAAM,iBAAiBA;AAAA,IACrB,CAAC,OAAO;AACN,eAAS,UAAU;AACnB,qBAAe,EAAE;AAAA,IACnB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,EAAAE,WAAU,MAAM;AACd,QAAI,aAAa,KAAK,OAAO;AAC3B,sBAAgB;AAAA,QACd,WAAW,KAAK;AAAA,QAChB,KAAK;AAAA,QACL,UAAU,KAAK;AAAA,MACjB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,OAAO,KAAK,QAAQ,CAAC;AAEzC,QAAM,aAAa,MAAM;AACvB,UAAM,UAA0B,CAAC;AACjC,QAAI,eAAe;AACjB,cAAQ;AAAA,QACN,gBAAAL;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS;AAAA,YACT;AAAA,YACA,UAAS;AAAA,YACT,QAAM;AAAA,YACN,UAAQ;AAAA,YACR,UAAU;AAAA,YACV,cAAa;AAAA,YAEb,0BAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,IAAG;AAAA,gBAEH,KAAK;AAAA,gBACL,OAAO,EAAE,QAAQ,OAAO;AAAA,gBAEvB;AAAA;AAAA,cAJG;AAAA,YAKN;AAAA;AAAA,UAjBI;AAAA,QAkBN;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,YAAYM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA;AAAA;AAAA,IAEE,gBAAAL,MAAC,wBAAqB,OAAO,QAC3B;AAAA,sBAAAD,MAAC,kBAAe,QAAgB,gBAAgB,oBAC9C,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,aAAU;AAAA,UACV,KAAK;AAAA,UACJ,GAAG;AAAA,UAEJ,0BAAAC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,eAAe,UAAU,QAAQ,QAAQ,OAAO,OAAO;AAAA,cAEhE;AAAA,gCAAAD;AAAA,kBAAC;AAAA;AAAA,oBACC,UAAU,SAAS;AAAA,oBACnB;AAAA,oBACA;AAAA,oBACA,YAAY;AAAA,oBACZ,eAAe;AAAA;AAAA,gBACjB;AAAA,gBACA,gBAAAA,MAAC,cAAW,OAAO,EAAE,MAAM,EAAE,GAC1B,qBAAW,EAAE;AAAA,kBACZ,gBAAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,YAAU;AAAA,sBAEV,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA;AAAA,oBADnC;AAAA,kBAEN;AAAA,gBACF,GACF;AAAA;AAAA;AAAA,UACF;AAAA;AAAA,MACF,GACF;AAAA,MACC;AAAA,OACH;AAAA;AAEJ;;;AQ7LA;AAAA,EACE,iBAAAO;AAAA,EAIA;AAAA,EACA;AAAA,EACA,cAAAC;AAAA,OACK;AACP,OAAOC,SAAQ;AAgFX,gBAAAC,aAAA;AA9EG,IAAMC,mBAA2B;AACjC,IAAM,gBAAgB;AACtB,IAAM,qBAAgC;AAYtC,IAAM,eAAeJ,eAAiC;AAAA,EAC3D,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AACb,CAAC;AAED,IAAM,uBAAuB,CAC3B,UACA,OACA,WACA,YACG;AApCL;AAqCE,MAAI,eAA4C,QAAQ,GAAG;AACzD,WAAO,aAAa,UAAU;AAAA,MAC5B,WAAWE;AAAA;AAAA,SAET,cAAS,UAAT,mBAAgB;AAAA,QAChB;AAAA,QACA,gBAAgB;AAAA,MAClB;AAAA;AAAA;AAAA,MAGA,aAAa;AAAA,IACf,CAAC;AAAA,EACH,OAAO;AACL,YAAQ;AAAA,MACN;AAAA;AAAA;AAAA,IAEF;AACA,WAAO;AAAA,EACT;AACF;AAUO,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AACX,MAA0B;AAvE1B;AAwEE,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,EACT,IAAID,YAAW,YAAY;AAE3B,QAAM,WAAU,yCAAe,qBAAf,YAAmCG;AACnD,QAAM,aAAY,6CAAiB,uBAAjB,YAAuC;AACzD,QAAM,SAAQ,qCAAa,mBAAb,YAA+B;AAC7C,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,gBAAAD,MAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,WAAW,SAAS,MAAM,GACvD,0BACH;AAEJ;AAEA,cAAc,cAAc;",
+  "names": ["classBase", "cx", "jsx", "React", "React", "Fragment", "jsx", "jsxs", "jsx", "jsx", "React", "useState", "jsx", "jsxs", "classBase", "useState", "cx", "useCallback", "useEffect", "useState", "jsx", "useCallback", "useEffect", "useState", "layout", "useCallback", "Button", "Button", "useCallback", "useEffect", "useState", "jsx", "jsxs", "UserPanel", "useState", "useEffect", "history", "useCallback", "selected", "Button", "jsx", "jsxs", "Button", "cx", "useCallback", "jsx", "jsxs", "classBase", "useCallback", "mode", "cx", "cx", "jsx", "jsxs", "classBase", "cx", "useCallback", "jsx", "jsxs", "useState", "useCallback", "layout", "useEffect", "cx", "createContext", "useContext", "cx", "jsx", "DEFAULT_DENSITY"]
 }

package/index.css CHANGED Viewed

@@ -1,2 +1,162 @@
-.vuuStatus-container{display:flex}.vuuStatus-text{align-self:center}.vuuStatus{--vuu-icon-height: 18px;--vuu-icon-padding: var(--vuuStatus-padding, 6px);--vuu-icon-width: var(--vuuStatus-width, auto);--vuu-icon-min-width: var(--vuuStatus-min-width, 20px);align-items:center;display:inline-flex;height:var(--vuu-icon-height);justify-content:center;min-width:var(--vuu-icon-min-width);padding:0 var(--vuu-icon-padding);width:var(--vuu-icon-width);position:relative}.vuuStatus[data-icon]:after{inset:0 0 0 0;content:"";box-shadow:0 0 #000;position:absolute;mask:var(--vuu-icon-svg) center center/20px 20px no-repeat;-webkit-mask:var(--vuu-icon-svg) center center/20px 20px no-repeat}.vuuActiveStatus:after{--vuu-icon-svg: var(--svg-active-status);background-color:#0f0}.vuuConnectingStatus:after{--vuu-icon-svg: var(--svg-connecting-status);background-color:orange;transform:scale(1);animation:infinite pulse 1s}.vuuDisconnectedStatus:after{--vuu-icon-svg: var(--svg-disconnected-status);background-color:red;transform:scale(1);animation:infinite pulse .5s}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #000000b3}70%{transform:scale(1);box-shadow:0 0 #0000}to{transform:scale(.95);box-shadow:0 0 #0000}}.vuuLoginPanel{--hwTextInput-border: solid 1px #ccc;--hwTextInput-height: 28px;--hwTextInput-padding: 0 12px;--hwTextInput-width: 100%;--login-row-height: 60px;align-content:center;align-items:center;border:solid 1px lightgray;display:flex;flex-direction:column;gap:24px;justify-content:center;justify-items:center;margin:0 auto;padding:48px 48px 24px;width:fit-content}.vuuLoginPanel-login{grid-column:2/3;align-self:end;justify-self:end}.vuuUserPanel{background-color:#fff;display:flex;flex-direction:column;max-height:400px;padding:12px}vuuUserPanel-history{flex:1 1 auto}.vuuUserPanel-buttonBar{--saltButton-width: 100%;align-items:flex-end;border-top:1px solid var(--surface3);display:flex;flex:0 0 32px;justify-content:flex-start}.btn-logout{--hwButton-icon-left: 12px;--hwButton-padding: 0 6px 0 24px;padding-left:24px}.vuuUserProfile{--svg-icon: var(--svg-user)}.vuuThemeSwitch{--saltButton-minWidth: 22px}.vuuThemeSwitch{--svg-light: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z"/></svg>');--svg-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z"/></svg>')}.salt-density-high .vuuThemeSwitch{--saltButton-minWidth: 16px;--saltButton-width: 18px;--vuuThemeSwitch-iconSize: 16px}.vuuThemeSwitch [data-icon]{--vuu-icon-size: var(--vuuThemeSwitch-iconSize,18px)}.vuuThemeSwitch [data-icon=light]{--vuu-icon-svg: var(--svg-light)}.vuuThemeSwitch [data-icon=dark]{--vuu-icon-svg: var(--svg-dark)}.vuuAppHeader{align-items:center;border-bottom:solid 1px var(--salt-container-secondary-borderColor);display:flex;height:40px;justify-content:flex-end}.vuuShell{background-color:var(--salt-container-primary-background, ivory);height:var(--vuuShell-height, 100vh);width:var(--vuuShell-width, 100vw)}.vuuShell-palette{--vuuView-border: none;--vuuView-margin: 0}.vuuShell-warningPlaceholder{background-color:var(--salt-container-background-high);height:100%}
+/* src/connection-status/ConnectionStatusIcon.css */
+.vuuStatus-container {
+  display: flex;
+}
+.vuuStatus-text {
+  align-self: center;
+}
+.vuuStatus {
+  --vuu-icon-height: 18px;
+  --vuu-icon-padding: var(--vuuStatus-padding, 6px);
+  --vuu-icon-width: var(--vuuStatus-width, auto);
+  --vuu-icon-min-width: var(--vuuStatus-min-width, 20px);
+  align-items: center;
+  display: inline-flex;
+  height: var(--vuu-icon-height);
+  justify-content: center;
+  min-width: var(--vuu-icon-min-width);
+  padding: 0 var(--vuu-icon-padding);
+  width: var(--vuu-icon-width);
+  position: relative;
+}
+.vuuStatus[data-icon]::after {
+  inset: 0 0 0 0;
+  content: "";
+  box-shadow: 0 0 0 0 black;
+  position: absolute;
+  mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
+  -webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;
+}
+.vuuActiveStatus::after {
+  --vuu-icon-svg: var(--svg-active-status);
+  background-color: rgb(0, 255, 0);
+}
+.vuuConnectingStatus::after {
+  --vuu-icon-svg: var(--svg-connecting-status);
+  background-color: orange;
+  transform: scale(1);
+  animation: infinite pulse 1s;
+}
+.vuuDisconnectedStatus::after {
+  --vuu-icon-svg: var(--svg-disconnected-status);
+  background-color: red;
+  transform: scale(1);
+  animation: infinite pulse 0.5s;
+}
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+/* src/login/LoginPanel.css */
+.vuuLoginPanel {
+  --hwTextInput-border: solid 1px #ccc;
+  --hwTextInput-height: 28px;
+  --hwTextInput-padding: 0 12px;
+  --hwTextInput-width: 100%;
+  --login-row-height: 60px;
+  align-content: center;
+  align-items: center;
+  border: solid 1px lightgray;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  justify-content: center;
+  justify-items: center;
+  margin: 0 auto;
+  padding: 48px 48px 24px 48px;
+  width: fit-content;
+}
+.vuuLoginPanel-login {
+  grid-column: 2/3;
+  align-self: end;
+  justify-self: end;
+}
+/* src/user-profile/UserPanel.css */
+.vuuUserPanel {
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  max-height: 400px;
+  padding: 12px;
+}
+vuuUserPanel-history {
+  flex: 1 1 auto;
+}
+.vuuUserPanel-buttonBar {
+  --saltButton-width: 100%;
+  align-items: flex-end;
+  border-top: 1px solid var(--surface3);
+  display: flex;
+  flex: 0 0 32px;
+  justify-content: flex-start;
+}
+.btn-logout {
+  --hwButton-icon-left: 12px;
+  --hwButton-padding: 0 6px 0 24px;
+  padding-left: 24px;
+}
+/* src/user-profile/UserProfile.css */
+.vuuUserProfile {
+  --svg-icon: var(--svg-user);
+}
+/* src/theme-switch/ThemeSwitch.css */
+.vuuThemeSwitch {
+  --saltButton-minWidth: 22px;
+}
+.vuuThemeSwitch {
+  --svg-light: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z"/></svg>');
+  --svg-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z"/></svg>');
+}
+.salt-density-high .vuuThemeSwitch {
+  --saltButton-minWidth: 16px;
+  --saltButton-width: 18px;
+  --vuuThemeSwitch-iconSize: 16px;
+}
+.vuuThemeSwitch [data-icon] {
+  --vuu-icon-size: var(--vuuThemeSwitch-iconSize,18px);
+}
+.vuuThemeSwitch [data-icon=light] {
+  --vuu-icon-svg: var(--svg-light);
+}
+.vuuThemeSwitch [data-icon=dark] {
+  --vuu-icon-svg: var(--svg-dark);
+}
+/* src/app-header/AppHeader.css */
+.vuuAppHeader {
+  align-items: center;
+  border-bottom: solid 1px var(--salt-container-secondary-borderColor);
+  display: flex;
+  height: 40px;
+  justify-content: flex-end;
+}
+/* src/shell.css */
+.vuuShell {
+  background-color: var(--salt-container-primary-background, ivory);
+  height: var(--vuuShell-height, 100vh);
+  width: var(--vuuShell-width, 100vw);
+}
+.vuuShell-palette {
+  --vuuView-border: none;
+  --vuuView-margin: 0;
+}
+.vuuShell-warningPlaceholder {
+  background-color: var(--salt-container-background-high);
+  height: 100%;
+}
 /*# sourceMappingURL=index.css.map */

package/index.css.map CHANGED Viewed

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/vuu-shell/src/connection-status/ConnectionStatusIcon.css", "../../../packages/vuu-shell/src/login/LoginPanel.css", "../../../packages/vuu-shell/src/user-profile/UserPanel.css", "../../../packages/vuu-shell/src/user-profile/UserProfile.css", "../../../packages/vuu-shell/src/theme-switch/ThemeSwitch.css", "../../../packages/vuu-shell/src/app-header/AppHeader.css", "../../../packages/vuu-shell/src/shell.css"],
   "sourcesContent": [".vuuStatus-container {\n\tdisplay: flex;\n}\n\n.vuuStatus-text {\n\talign-self: center;\n}\n\n\n.vuuStatus {\n\t--vuu-icon-height: 18px;\n\t--vuu-icon-padding: var(--vuuStatus-padding, 6px);\n\t--vuu-icon-width: var(--vuuStatus-width, auto);\n\t--vuu-icon-min-width: var(--vuuStatus-min-width, 20px);\n\talign-items: center;\n\tdisplay: inline-flex;\n\theight: var(--vuu-icon-height);\n\tjustify-content: center;\n\tmin-width: var(--vuu-icon-min-width);\n\tpadding: 0 var(--vuu-icon-padding);\n\twidth: var(--vuu-icon-width);\n\tposition: relative;\n}\n\n.vuuStatus[data-icon]::after {\n\tinset: 0 0 0 0;\n\tcontent: '';\n\tbox-shadow: 0 0 0 0 black;\n\tposition: absolute;\n\tmask: var(--vuu-icon-svg) center center/20px 20px no-repeat;\n\t-webkit-mask: var(--vuu-icon-svg) center center/20px 20px no-repeat;\n}\n\n.vuuActiveStatus::after {\n\t--vuu-icon-svg: var(--svg-active-status);\n\tbackground-color: rgb(0, 255, 0);\n}\n\n.vuuConnectingStatus::after {\n\t--vuu-icon-svg: var(--svg-connecting-status);\n\tbackground-color: orange;\n\ttransform: scale(1);\n\tanimation: infinite pulse 1s;\n}\n\n.vuuDisconnectedStatus::after {\n\t--vuu-icon-svg: var(--svg-disconnected-status);\n\tbackground-color: red;\n\ttransform: scale(1);\n\tanimation: infinite pulse 0.5s;\n}\n\n@keyframes pulse {\n\t0% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);\n\t}\n\n\t70% {\n\t\ttransform: scale(1);\n\t\tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0);\n\t}\n\n\t100% {\n\t\ttransform: scale(0.95);\n\t\tbox-shadow: 0 0 0 0 rgba(0, 0, 0, 0);\n\t}\n}", ".vuuLoginPanel {\n  --hwTextInput-border: solid 1px #ccc;\n  --hwTextInput-height: 28px;\n  --hwTextInput-padding: 0 12px;\n  --hwTextInput-width: 100%;\n  --login-row-height: 60px;\n  align-content: center;\n  align-items: center;\n  border: solid 1px lightgray;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  justify-content: center;\n  justify-items: center;\n  margin: 0 auto;\n  padding: 48px 48px 24px 48px;\n  width: fit-content;\n}\n\n.vuuLoginPanel-login {\n  grid-column: 2/3;\n  align-self: end;\n  justify-self: end;\n}\n", ".vuuUserPanel {\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  max-height: 400px;\n  padding: 12px;\n}\n\nvuuUserPanel-history {\n  flex: 1 1 auto;\n}\n\n.vuuUserPanel-buttonBar {\n  --saltButton-width: 100%;\n  align-items: flex-end;\n  border-top: 1px solid var(--surface3);\n  display: flex;\n  flex: 0 0 32px;\n  justify-content: flex-start;\n}\n\n.btn-logout {\n  --hwButton-icon-left: 12px;\n  --hwButton-padding: 0 6px 0 24px;\n  padding-left: 24px;\n}\n", ".vuuUserProfile {\n  --svg-icon: var(--svg-user);\n}\n", ".vuuThemeSwitch {\n    --saltButton-minWidth: 22px;\n}\n\n.vuuThemeSwitch {\n    --svg-light: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 31q2.9 0 4.95-2.05Q31 26.9 31 24q0-2.9-2.05-4.95Q26.9 17 24 17q-2.9 0-4.95 2.05Q17 21.1 17 24q0 2.9 2.05 4.95Q21.1 31 24 31Zm0 3q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM3.5 25.5q-.65 0-1.075-.425Q2 24.65 2 24q0-.65.425-1.075Q2.85 22.5 3.5 22.5h5q.65 0 1.075.425Q10 23.35 10 24q0 .65-.425 1.075-.425.425-1.075.425Zm36 0q-.65 0-1.075-.425Q38 24.65 38 24q0-.65.425-1.075.425-.425 1.075-.425h5q.65 0 1.075.425Q46 23.35 46 24q0 .65-.425 1.075-.425.425-1.075.425ZM24 10q-.65 0-1.075-.425Q22.5 9.15 22.5 8.5v-5q0-.65.425-1.075Q23.35 2 24 2q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 10 24 10Zm0 36q-.65 0-1.075-.425-.425-.425-.425-1.075v-5q0-.65.425-1.075Q23.35 38 24 38q.65 0 1.075.425.425.425.425 1.075v5q0 .65-.425 1.075Q24.65 46 24 46ZM12 14.1l-2.85-2.8q-.45-.45-.425-1.075.025-.625.425-1.075.45-.45 1.075-.45t1.075.45L14.1 12q.4.45.4 1.05 0 .6-.4 1-.4.45-1.025.45-.625 0-1.075-.4Zm24.7 24.75L33.9 36q-.4-.45-.4-1.075t.45-1.025q.4-.45 1-.45t1.05.45l2.85 2.8q.45.45.425 1.075-.025.625-.425 1.075-.45.45-1.075.45t-1.075-.45ZM33.9 14.1q-.45-.45-.45-1.05 0-.6.45-1.05l2.8-2.85q.45-.45 1.075-.425.625.025 1.075.425.45.45.45 1.075t-.45 1.075L36 14.1q-.4.4-1.025.4-.625 0-1.075-.4ZM9.15 38.85q-.45-.45-.45-1.075t.45-1.075L12 33.9q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05l-2.8 2.85q-.45.45-1.075.425-.625-.025-1.075-.425ZM24 24Z\"/></svg>');\n    --svg-dark: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\"><path d=\"M24 42q-7.5 0-12.75-5.25T6 24q0-7.5 5.25-12.75T24 6q.4 0 .85.025.45.025 1.15.075-1.8 1.6-2.8 3.95-1 2.35-1 4.95 0 4.5 3.15 7.65Q28.5 25.8 33 25.8q2.6 0 4.95-.925T41.9 22.3q.05.6.075.975Q42 23.65 42 24q0 7.5-5.25 12.75T24 42Zm0-3q5.45 0 9.5-3.375t5.05-7.925q-1.25.55-2.675.825Q34.45 28.8 33 28.8q-5.75 0-9.775-4.025T19.2 15q0-1.2.25-2.575.25-1.375.9-3.125-4.9 1.35-8.125 5.475Q9 18.9 9 24q0 6.25 4.375 10.625T24 39Zm-.2-14.85Z\"/></svg>');\n}\n\n.salt-density-high .vuuThemeSwitch {\n    --saltButton-minWidth: 16px;\n    --saltButton-width: 18px;\n    --vuuThemeSwitch-iconSize: 16px;\n}\n\n.vuuThemeSwitch [data-icon] {\n    --vuu-icon-size: var(--vuuThemeSwitch-iconSize,18px);\n}\n\n.vuuThemeSwitch [data-icon='light'] {\n    --vuu-icon-svg: var(--svg-light);\n}\n.vuuThemeSwitch [data-icon='dark'] {\n    --vuu-icon-svg: var(--svg-dark);\n}\n", ".vuuAppHeader {\n  align-items: center;\n  border-bottom: solid 1px var(--salt-container-secondary-borderColor);\n  display: flex;\n  height: 40px;\n  justify-content: flex-end;\n}\n", ".vuuShell {\n  background-color: var(--salt-container-primary-background, ivory);\n  height: var(--vuuShell-height, 100vh);\n  width: var(--vuuShell-width, 100vw);\n}\n\n.vuuShell-palette {\n  --vuuView-border: none;\n  --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n  background-color: var(--salt-container-background-high);\n  height: 100%;\n}\n"],
-  "mappings": "AAAA,qBACC,aAGD,gBACC,kBAID,WACC,wBACA,kDACA,+CACA,uDACA,mBACA,oBACA,8BACA,uBACA,oCACA,kCACA,4BACA,kBAGD,4BACC,cACA,WACA,oBACA,kBACA,2DACA,mEAGD,uBACC,yCACA,sBAGD,2BACC,6CACA,wBACA,mBACA,4BAGD,6BACC,+CACA,qBACA,mBACA,6BAGD,oBAEE,qBACA,6BAIA,mBACA,wBAIA,qBACA,sBCjEF,eACE,qCACA,2BACA,8BACA,0BACA,yBACA,qBACA,mBACA,2BACA,aACA,sBACA,SACA,uBACA,qBAbF,qCAgBE,kBAGF,qBACE,gBACA,eACA,iBCtBF,cACE,sBACA,aACA,sBACA,iBAJF,aAQA,qBACE,cAGF,wBACE,yBACA,qBACA,qCACA,aACA,cACA,2BAGF,YACE,2BACA,iCACA,kBCxBF,gBACE,4BCDF,gBACI,4BAGJ,gBACI,kgDACA,miBAGJ,mCACI,4BACA,yBACA,gCAGJ,4BACI,qDAGJ,kCACI,iCAEJ,iCACI,gCCvBJ,cACE,mBACA,oEACA,aACA,YACA,yBCLF,UACE,iEACA,qCACA,mCAGF,kBACE,uBACA,oBAGF,6BACE,uDACA",
+  "mappings": ";AAAA;AACC;AAAA;AAGD;AACC;AAAA;AAID;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGD;AACC;AACA;AACA;AACA;AACA;AACA;AAAA;AAGD;AACC;AACA;AAAA;AAGD;AACC;AACA;AACA;AACA;AAAA;AAGD;AACC;AACA;AACA;AACA;AAAA;AAGD;AAAA;AAEE;AACA;AAAA;AAAA;AAIA;AACA;AAAA;AAAA;AAIA;AACA;AAAA;AAAA;;;ACjEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACtBF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACxBF;AACE;AAAA;;;ACDF;AACI;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAEJ;AACI;AAAA;;;ACvBJ;AACE;AACA;AACA;AACA;AACA;AAAA;;;ACLF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;",
   "names": []
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vuu-ui/vuu-shell",
-  "version": "0.6.27",
+  "version": "0.7.0-debug",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -8,9 +8,9 @@
     "@salt-ds/core": "1.2.0",
     "@salt-ds/icons": "1.1.0",
     "@heswell/salt-lab": "1.0.0-alpha.2",
-    "@vuu-ui/vuu-data": "0.6.27",
-    "@vuu-ui/vuu-layout": "0.6.27",
-    "@vuu-ui/vuu-utils": "0.6.27"
+    "@vuu-ui/vuu-data": "0.7.0-debug",
+    "@vuu-ui/vuu-layout": "0.7.0-debug",
+    "@vuu-ui/vuu-utils": "0.7.0-debug"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",

package/types/shellTypes.d.ts CHANGED Viewed

@@ -12,5 +12,6 @@ export type Features = {
 };
 export interface VuuConfig {
     features: Features;
+    authUrl?: string;
     websocketUrl: string;
 }