@vuu-ui/vuu-shell 0.8.5-debug → 0.8.6-debug

package/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/vuu-shell/src/connection-status/ConnectionStatusIcon.css", "../../../packages/vuu-shell/src/login/LoginPanel.css", "../../../packages/vuu-shell/src/session-editing-form/SessionEditingForm.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-layouts/context-panel/ContextPanel.css", "../../../packages/vuu-shell/src/left-nav/LeftNav.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", ".vuuSessionEditingForm {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 400px;\n    padding: 6px;\n}\n\n.vuuSessionEditingForm-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    gap: 3px;\n    overflow: auto;\n}\n\n.vuuSessionEditingForm-field {\n    align-items: center;\n    display: flex;\n    height: 32px;\n}\n\n.vuuSessionEditingForm-fieldLabel {\n    flex: 0 0 50%;\n}\n\n.vuuSessionEditingForm-fieldValue {\n    max-width: 50%;\n}\n\n.vuuSessionEditingForm-fieldValue.vuuReadOnly {\n    font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n.vuuSessionEditingForm-buttonbar {\n    align-items: center;\n    border-top: solid 1px var(--salt-container-primary-borderColor);\n    display: flex;\n    justify-content: flex-end;\n    flex: 0 0 autox;\n    gap: 6px;\n    padding-top: 6px;\n}\n\n.vuuSessionEditingForm-errorBanner {\n    --vuu-icon-left: 3px;\n    --vuu-icon-size: 18px;\n    --vuu-icon-top: 3px;\n    border: solid 1px var(--salt-status-error-borderColor);\n    line-height: 24px;\n    padding: 0 6px 0 26px;\n    position: relative;\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\n.vuu-purple-theme .vuuAppHeader {\n  border-radius: 8px;\n  border: 1px solid #D6D7DA; \n  height: 44px;\n  margin-bottom: 8px;\n}", ".vuuContextPanel {\n    position: relative;\n    transition: width .3s ease-in-out;\n    width: var(--vuu-side-panel-width, 0px) !important;\n    z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n    --vuu-side-panel-width: 300px !important;\n    --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n    --vuu-side-panel-padding: 24px;\n}\n\n.vuuContextPanel-overlay {\n    width: 0px !important;\n}\n\n.vuuContextPanel-inner {\n    background-color: var(--salt-container-primary-background);\n    box-shadow: var(--vuu-side-panel-shadow, none);\n    height: 100%;\n    padding-bottom: 24px;\n    padding-top: 24px;\n    padding-left: var(--vuu-side-panel-padding, 0);\n    padding-right: var(--vuu-side-panel-padding, 0);\n    position: absolute;\n    right: 0;\n    top:0;\n    transition-property: padding-left, padding-right, width;\n    transition-duration: .3s;\n    transition-timing-function: ease-in-out;\n    width: var(--vuu-side-panel-width, 0px);\n\n}\n\n.vuuContextPanel-header {\n    align-items: center;\n    display: flex;\n    flex-wrap: nowrap;\n    height: 27px;\n    justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n    font-size: 20px;\n    font-weight: 700;\n    white-space: nowrap;\n}", ".vuuLeftNav {\n\n    --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n    --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n    --svg-templates: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n    --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n    --vuu-accent-color: #f37880;\n    --vuu-light-text-primary: #15171b;\n    background-color: #2A015F;\n    container-type: inline-size;\n    display: flex;\n    flex-direction: column;\n    padding: 32px 16px;\n    transition: width .3s ease-in-out;\n\n}\n\n.vuuLeftNav-logo {\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n}\n\n.vuuLeftNav-main {\n    flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n    color: white;\n    margin-top: 102px;\n    padding: 0;\n}\n\n.vuuLeftNav-menuitem {\n    --vuu-icon-color: white;\n    align-items: center;\n    border-radius: 6px;\n    display: flex;\n    font-weight: 700;\n    height: 40px;\n   line-height: 24px;\n   list-style: none;\n   padding: 8px 16px 8px 48px;    \n}\n\n.vuuLeftNav-menuitem[data-icon] {\n    --vuu-icon-left: 32px;\n    --vuu-icon-size: 16px;\n}\n\n.vuuLeftNav-menuitem[data-icon='demo'] {\n    --vuu-icon-svg: var(--svg-demo);\n  }\n.vuuLeftNav-menuitem[data-icon='tables'] {\n    --vuu-icon-svg: var(--svg-tables);\n  }\n.vuuLeftNav-menuitem[data-icon='templates'] {\n    --vuu-icon-svg: var(--svg-templates);\n  }\n.vuuLeftNav-menuitem[data-icon='layouts'] {\n    --vuu-icon-svg: var(--svg-layouts);\n  }\n\n  .vuuLeftNav-menuitem-label {\n    white-space: nowrap;\n  }\n\n.vuuLeftNav-menuitem-active {\n   --vuu-icon-color: var(--vuu-accent-color);\n   background: rgba(255, 255, 255, 0.10);\n   border-left: solid 4px var(--vuu-accent-color);\n}\n\n@container (max-width: 100px) {\n    .vuuLeftNav-menuitem {\n        padding-left: 28px;\n    }\n    .vuuLeftNav-menuitem-label {\n        display: none;\n    }\n}\n\n.vuuLeftNav-buttonBar {\n    align-items: center;\n    display: flex;\n    flex: 0 0 100px;\n    justify-content: center;;\n}\n\n.vuuLeftNav-toggleButton {\n    --vuu-icon-color: var(--vuu-light-text-primary);\n    --vuu-icon-left: 11px;\n    --vuu-icon-top: 10px;\n    --vuu-icon-size: 16px;\n    background-color: var(--vuu-accent-color);\n    border-width: 0;\n    border-radius: 18px;\n    height: 36px;\n    position: relative;\n    width: 36px\n}\n\n.vuuLeftNav-toggleButton-open {\n    --vuu-icon-left: 9px;\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;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;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACnDJ;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;AAGF;AACE;AACA;AACA;AACA;AAAA;;;ACZF;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;;;AC9CJ;AAEI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACD;AACA;AACA;AAAA;AAGH;AACI;AACA;AAAA;AAGJ;AACI;AAAA;AAEJ;AACI;AAAA;AAEJ;AACI;AAAA;AAEJ;AACI;AAAA;AAGF;AACE;AAAA;AAGJ;AACG;AACA;AACA;AAAA;AAGH;AACI;AACI;AAAA;AAEJ;AACI;AAAA;AAAA;AAIR;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AAAA;;;ACvGJ;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;",
+  "sources": ["../../../packages/vuu-shell/src/connection-status/ConnectionStatusIcon.css", "../../../packages/vuu-shell/src/layout-management/SaveLayoutPanel.css", "../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css", "../../../packages/vuu-popups/src/popup-menu/PopupMenu.css", "../../../packages/vuu-ui-controls/src/drag-drop/Draggable.css", "../../../packages/vuu-ui-controls/src/editable-label/EditableLabel.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.css", "../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tab.css", "../../../packages/vuu-ui-controls/src/tree/Tree.css", "../../../packages/vuu-shell/src/left-nav/LeftNav.css", "../../../packages/vuu-shell/src/login/LoginPanel.css", "../../../packages/vuu-shell/src/session-editing-form/SessionEditingForm.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-layouts/context-panel/ContextPanel.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}", ".vuuSaveLayoutPanel {\n    background-color: aqua;\n    height: 400px;\n    width: 600px;\n}", ".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  padding: var(--vuuDialog-padding, 0);\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n\n  --saltToolbar-background: transparent;\n  --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n  align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n  right: 2px;\n}\n\n\n", ".vuuMenuList {\n  --context-menu-color: var(--vuuMenuList-color,#161616);\n  --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n  --context-menu-highlight-bg: #a4d5f4;\n  --context-menu-blur-focus-bg: #e0e4e9;\n  --menu-item-icon-color: black;\n  --menu-item-twisty-color: black;\n  --menu-item-twisty-content: '';\n  --menu-item-twisty-top: 50%;\n  --menu-item-twisty-left: auto;\n  --menu-item-twisty-right: 0px;\n  --menu-icon-size: 12px;\n\n  background-clip: padding-box;\n  background-color: white;\n  border-radius: 4px;\n  border: solid 1px var(--vuuMenuList-borderColor, rgba(0, 0, 0, 0.15));\n  box-shadow: var(--context-menu-shadow);\n  font-size: var(--vuuMenuList-fontSize, var(--salt-text-label-fontSize));\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  list-style: none;\n  margin: 2px 0 0;\n  outline: 0;\n  overflow: hidden;\n  padding: var(--vuuMenuList-padding, 0);\n  position: absolute;\n}\n\n.vuuMenuItem {\n  align-items: center;\n  border-width: 1px;\n  border-color: var(--vuuMenuItem-borderColor, transparent);\n  border-style: var(--vuuMenuItem-borderStyle, none);\n  color: var(--context-menu-color);\n  display: flex;\n  gap: 6px;\n  height: var(--vuuMenuItem-height, var(--hw-list-item-height, 24px));\n  padding: var(--context-menu-padding);\n  padding-right: 24px;\n  position: relative;\n  white-space: nowrap;\n}\n\n.vuuIconContainer {\n  display: inline-block;\n  flex: 12px 0 0;\n  height: var(--menu-icon-size);\n  mask-repeat: no-repeat;\n  width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n  border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n  content: var(--menu-item-twisty-content);\n  -webkit-mask: var(--vuu-svg-chevron-right) center center/8px 8px no-repeat;\n  mask: var(---vuu-svg-chevron-right) center center/8px 8px no-repeat;\n  background-color: var(--menu-item-twisty-color);\n  height: 16px;\n  left: var(--menu-item-twisty-left);\n  right: var(--menu-item-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--menu-item-twisty-top);\n  transition: transform 0.3s;\n  width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n  background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n  background-color: var(--context-menu-highlight-bg);\n  cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .vuuMenuItem[data-highlighted] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n  left: auto;\n  right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n  text-decoration: none;\n  color: rgb(0, 0, 0);\n  background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.vuuMenuItem-button:hover {\n  outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n  clear: both;\n  font-weight: normal;\n  line-height: 1.5;\n  color: rgb(120, 120, 120);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: default;\n}\n", ".vuuPopup {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.vuuPopup {\n  position: absolute;\n}\n", ".vuuPopupMenu {\n    --saltButton-height: 24px;\n    --saltButton-width: 24px;\n    --vuu-icon-color: #606477;\n    --vuu-icon-height: 20px;\n    --vuu-icon-left: 2px;\n    --vuu-icon-size: 16px;\n    --vuu-icon-top: 2px;\n    --vuu-icon-width: 20px;\n\n    background: var(--vuuPopupMenu-background, transparent);\n    border-radius: 4px;\n    cursor: pointer;\n    display: inline-block;\n    margin-top: 2px;\n    padding: 2px;\n}\n\n.vuuPopupMenu:hover {\n    /* --vuu-icon-color: #15171B; */\n    --vuu-icon-color: var(--saltButton-text-color-hover);\n}\n\n.vuuPopupMenu-open {\n    --saltButton-background: var(--salt-actionable-secondary-background-active);\n    --vuu-icon-color: white;\n}\n\n/* temp references to theme until new theme fully incorporated */\n.vuu-theme .vuuPopupMenu:hover {\n    --saltButton-background-hover: #F37880;\n}\n\n.vuu-theme .vuuPopupMenu-open {\n    --saltButton-background: #6D18BD;\n}", ".vuuDraggable {\n  background: transparent;\n  box-shadow: var(--salt-overlayable-shadow-drag);\n  cursor: var(--salt-draggable-grab-cursor-active);\n  position: absolute;\n  opacity: .95;\n  z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n  display: var(--saltDraggable-display, inline-block);\n  height: var(--saltDraggable-spacer-height, var(--tabstrip-height));\n  transition: var(--saltDraggable-transitionProp, width) 0.3s ease;\n  width: var(--saltDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n  display: var(--saltDraggable-display, inline-block);\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  height: 0px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n  transition: var(--saltDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  background-color: var(--salt-palette-accent-background);\n  height: 2px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n  background-color: var(--salt-palette-accent-background);\n  position: absolute;\n  top: -2px;\n  left: -3px;\n}\n\n.vuuDraggable-settling {\n  transition-property: left, top;\n  transition-duration: .15s;\n  transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n  order: 1;\n}", ".vuuEditableLabel {\n  --saltInput-background: transparent;\n  --saltInput-minWidth: 14px;\n  --saltInput-position: absolute;\n  --editableLabel-padding: var(--saltEditableLabel-padding, 6px);\n  --editableLabel-height: var(--saltEditableLabel-height, 26px);\n  color: inherit;\n  cursor: default;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  outline: none;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  position: absolute;\n  right: var(--editableLabel-padding, 0);\n  top: var(--saltEditableLabel-top, 2px);\n  width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n  display: none;\n}\n\n.vuuEditableLabel-input {\n  background-color: transparent;\n  border: none;\n  box-sizing: content-box;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 20px;\n  margin:0;\n  min-width:0;\n  outline: none;\n  padding: 0;\n}\n", "/* Component class applied to the root element */\n.vuuTabstrip {\n  --vuuOverflowContainer-background: transparent;\n  /* --tabstrip-height: var(--vuuTabstrip-height, var(--salt-size-stackable)); */\n  --tabstrip-dragging-display: none;\n  --tabstrip-display: inline-flex;\n  --tabstrip-background: transparent;\n\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n  position: relative;\n  overflow: visible;\n  display: flex;\n  min-width: 28px;\n  width: var(--tabstrip-width);\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip-horizontal {\n  --tabstrip-height: var(--vuuTabstrip-height, 28px);\n  --tabstrip-width: var(--vuuTabstrip-width, 100%);\n  --tab-width: auto;\n  --tab-thumb-height: 2px;\n  --tab-thumb-left: var(--tab-thumb-offset, 0);\n  --tab-thumb-top: auto;\n  --tab-thumb-width: var(--tab-thumb-size, 100%);\n  align-items: flex-start;\n  border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor));\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip-vertical {\n  --tabstrip-height: var(--vuuTabstrip-height, 100%);\n  --tabstrip-width: var(--vuuTabstrip-width, 100px);\n  --tab-width: 100%;\n  --tab-thumb-height: var(--tab-thumb-size, 100%);\n  --tab-thumb-left: 0;\n  --tab-thumb-top: var(--tab-thumb-offset, 0);\n  --tab-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n  pointer-events: none;\n}\n\n.vuuTabstrip-addTabButton {\n  --saltButton-height: 20px;\n  --saltButton-width: 20px;\n}\n\n.vuuTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.vuuTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabstrip-height);\n}\n\n.vuuTabstrip-vertical .vuuTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n  --tabstrip-display: flex;\n  --tabstrip-height: 100%;\n  --tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.vuuDraggable-tabstrip-horizontal {\n  --tab-thumb-height: 2px;\n  --tabstrip-height: 28px;\n\n  line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n  order: 99;\n  visibility: hidden;\n} */\n\n.vuuTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n", ".vuuTabMenu {\n    top: -2px;\n}", "/* Class applied to root Tab element */\n.vuuTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n  --saltEditableLabel-top: 3px;\n\n  --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));\n  --tab-cursor: pointer;\n  --tab-position: relative;\n}\n\n.vuuTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--tab-background);\n  border: none;\n  border-radius: var(--vuuTab-borderRadius, 0);\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--vuuTab-cursor, var(--tab-cursor));\n  display: var(--tabstrip-display);\n  gap: 8px;\n  height: var(--vuuTab-height, var(--tabstrip-height));\n  letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n  min-width: var(--vuuTab-minWidth, 40px);\n  outline: none;\n  padding: var(--vuuTab-padding, 0 24px);\n  position: var(--vuuTab-position, var(--tab-position));\n  user-select: none;\n  width: var(--tab-width)\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n/* .vuuTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n} */\n\n.vuuTab {\n  margin: 0 var(--tab-spacing) 0 0;\n}\n\n.vuuTab-selected {\n  background: var(--vuuTab-background-selected, var(--tab-background));\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n  align-items: center;;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--vuuTabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n  display: none;\n}\n\n.vuuTab .vuuTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--vuuTab-top, var(--tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.vuuTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.vuuTab.vuuFocusVisible {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n  outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\n  outline-style: dashed;\n  outline-width: 1px;\n  outline-offset: -1px;\n}\n\n.vuuTab:before {\n  content: var(--tab-before-content, none);\n  content: \"\";\n  background: var(--tab-before-background);\n  height: var(--tab-before-height);\n  inset: var(--tab-before-inset);\n  position: absolute;\n  width: var(--tab-before-width);\n  z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n/* .vuuDraggable .vuuTab:before,\n.vuuTab:not(.vuuTab-selected).saltFocusVisible:before,\n.vuuTab:hover:not(.vuuTab-selected):before {\n  --tab-before-content: \"\";\n  --tab-before-background: var(--salt-navigable-indicator-hover);\n  --tab-before-height: var(--tab-thumb-height);\n  --tab-before-inset: var(--tab-activationIndicator-inset);\n  --tab-before-width: var(--tab-activationIndicator-thumb-width);\n} */\n\n.vuuTab-selected:before {\n  --tab-before-content: \"\";\n  background: var(--salt-navigable-indicator-active);\n  height: var(--tab-thumb-height);\n  position: absolute;\n  left: var(--tab-thumb-left);\n  bottom: 0px; \n  top: var(--tab-thumb-top, auto);\n  transition: var(--tab-thumb-transition, none);\n  width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover) {\n  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n/* .vuuTabstrip.vuuTabThumb-noTransition .vuuTab-selected:before {\n  transition: none; \n} */", ".vuuTree {\n  --tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));\n  --tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));\n  --tree-toggle-width: 12px;\n  --tree-icon-color: var(--vuuTree-icon-color, #4c505b);\n  --tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);\n  --tree-node-indent: 0px;\n\n  --list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, 0.1));\n  --list-item-height: var(--hw-list-item-height, 30px);\n  --list-item-padding: var(--hw-list-item-padding, 0 6px);\n  --list-item-header-bg: var(--hw-list-item-header-bg, black);\n  --list-item-header-color: var(--hw-list-item-header-color, white);\n  --list-item-header-font-weight: bold;\n  --list-item-header-twisty-color: black;\n  --list-item-header-twisty-content: '';\n  --list-item-header-twisty-top: 50%;\n  --list-item-header-twisty-left: -18px;\n  --list-item-header-twisty-right: auto;\n  --list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);\n  --list-item-selected-color: white;\n  --list-item-text-color: var(--hw-gray-800);\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n\n  list-style: none;\n  margin: 0;\n  padding: 0 1px;\n  font-size: var(--vuuTree-font-size, 14px);\n  max-height: inherit;\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n}\n\n.vuuTree-viewport {\n  --list-item-height: 30px;\n  box-sizing: border-box;\n  max-height: inherit;\n  overflow: auto;\n}\n\n.vuuTree-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.vuuTree-scrollingContentContainer .vuuTreeNode {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n\n.vuuTreeNode {\n  list-style: none;\n}\n\n/* Leaf node or the div child of a collapsible node */\n.vuuTreeNode:not([aria-expanded]),\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n  --checkbox-border-color: black;\n  --checkbox-border-width: 1px;\n  --checkbox-tick: black;\n  --list-item-padding-left: 6px;\n  --svg-toggle: var(--tree-node-collapse);\n\n  align-items: center;\n  color: var(--list-item-text-color);\n  display: flex;\n  flex-wrap: nowrap;\n  height: var(--list-item-height);\n  line-height: var(--list-item-height);\n  padding: var(--list-item-padding);\n  padding-left: var(--padding-left);\n  position: relative;\n  cursor: default;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.vuuTreeNode:not([aria-expanded]) {\n  --padding-left: calc(\n    var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n  );\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n  --padding-left: calc(\n    var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n  );\n}\n\n.vuuTreeNode-icon {\n  background-color: var(--tree-icon-color);\n  display: inline-block;\n  height: 18px;\n  margin-right: 6px;\n  -webkit-mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n  mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n  flex: 0 0 18px;\n}\n\n.vuuTreeNode[aria-expanded] {\n  flex-direction: column;\n}\n\n.vuuTreeNode[aria-expanded] {\n  flex-direction: column;\n  height: auto;\n}\n\n.vuuTreeNode > *[role='group'] {\n  padding-left: 0px;\n}\n\n.vuuTreeNode {\n  padding-left: calc(var(--padding-left) + var(--tree-node-indent));\n}\n\n.vuuTreeNode[aria-level='2'] {\n  --tree-node-indent: 12px;\n}\n.vuuTreeNode[aria-level='3'] {\n  --tree-node-indent: 24px;\n}\n.vuuTreeNode[aria-level='4'] {\n  --tree-node-indent: 36px;\n}\n\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted]\n  > div:first-child {\n  background-color: var(--list-hilited-bg);\n}\n\n.vuuTreeNode-toggle {\n  cursor: pointer;\n}\n\n.vuuTreeNode > .vuuTreeNode-toggle {\n  display: inline-block;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  width: calc(var(--list-item-padding-left) + var(--tree-toggle-width));\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label:after {\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--svg-toggle) center center/8px 8px no-repeat;\n  mask: var(--svg-toggle) center center/8px 8px no-repeat;\n  background-color: var(--list-item-header-twisty-color);\n  height: 18px;\n  margin-top: -9px;\n  left: var(--tree-node-indent);\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 18px;\n}\n\n.vuuTreeNode[aria-selected='true'] {\n  --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n\n.vuuTreeNode:not(.focusVisible):focus {\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vuuTreeNode:not([aria-expanded]).focusVisible:before,\n.vuuTreeNode[aria-expanded].focusVisible > div:first-child:before {\n  content: '';\n  position: absolute;\n  top: 0px;\n  left: var(--tree-focus-offset, 0px);\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n  background-color: var(--list-hilited-bg);\n}\n\n\n.vuuTreeNode[aria-expanded='false'] > *:first-child:after {\n  --svg-toggle: var(--tree-node-expand);\n}\n\n.vuuTreeNode[aria-expanded='true'] > *:first-child:after {\n  transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected='true'],\n.vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected='true'] > div:first-child {\n  --checkbox-border-color: var(--list-item-selected-color);\n  --checkbox-tick: var(--list-item-selected-color);\n  --focus-visible-border-color: var(--list-item-selected-color);\n  background-color: var(--list-item-selected-bg);\n  color: var(--list-item-selected-color);\n}\n\n.with-checkbox .vuuTreeNode {\n  padding-left: 28px;\n}\n\n.with-checkbox .vuuTreeNode:before {\n  border-style: solid;\n  border-width: var(--checkbox-border-width);\n  border-color: var(--checkbox-border-color);\n  content: '';\n  height: 12px;\n  left: 3px;\n  margin-top: -7px;\n  position: absolute;\n  top: 50%;\n  width: 12px;\n}\n", ".vuuLeftNav {\n    --salt-navigable-fontWeight-active: 700;\n    --vuuTab-background-selected: rgba(255, 255, 255, 0.10);\n    --vuuTab-hover-background: rgba(255, 255, 255, 0.10);\n    --vuuTab-before-content: none;\n    --vuuTab-borderRadius: 6px;\n    --vuuTab-height: 40px;\n    --vuuTab-padding: 0 0 0 48px;\n    --vuuTabstrip-fontWeight: 700;\n    --vuuTabstrip-width: 100%;\n    --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n    --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n    --svg-templates: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n    --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n    --vuu-light-text-primary: #15171b;\n\n    display: flex;\n    transition: width .3s ease-in-out;\n\n}\n\n.vuuLeftNav-menu-full {\n    --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n    --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-content {\n    --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-content .vuuLeftNav-menu-secondary {\n    display: block;\n}\n\n.vuuLeftNav-menu-primary {\n    background-color: #2A015F;\n    container-type: inline-size;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    padding: 32px 16px;\n    transition: width ease .3s;\n    width: var(--menu-width, 100%);\n}\n\n.vuuLeftNav-menu-secondary {\n    flex: 1 1 auto;\n    height: 100%;\n    display: none;\n}\n\n.vuuLeftNav .vuuTabstrip {\n    margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n    --vuuTab-focusVisible-color: pink;\n    --vuu-icon-color: white;\n    --vuu-icon-left: 12px;\n    --vuu-icon-size: 16px;\n    border-left: solid 4px transparent;\n}\n\n.vuuLeftNav .vuuTab-selected {\n    --vuu-icon-color: var(--salt-navigable-indicator-active);\n    border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n}\n\n.vuuLeftNav-main {\n    flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n    color: white;\n    margin-top: 102px;\n    padding: 0;\n}\n\n/* .vuuLeftNav [data-icon]:after {\n    transition: left ease .3s;\n} */\n\n.vuuLeftNav [data-icon='demo'] {\n    --vuu-icon-svg: var(--svg-demo);\n  }\n.vuuLeftNav [data-icon='tables'] {\n    --vuu-icon-svg: var(--svg-tables);\n  }\n.vuuLeftNav [data-icon='templates'] {\n    --vuu-icon-svg: var(--svg-templates);\n  }\n.vuuLeftNav [data-icon='layouts'] {\n    --vuu-icon-svg: var(--svg-layouts);\n}\n\n\n@container (max-width: 100px) {\n    .vuuTab {\n        /* --vuu-icon-left: 12px !important; */\n        --vuuTab-padding: 0 0 0 42px;\n    }\n    .vuuTab-main {\n        display: none !important;\n    }\n}\n\n.vuuLeftNav-buttonBar {\n    align-items: center;\n    display: flex;\n    flex: 0 0 100px;\n    justify-content: center;;\n}\n\n.vuuLeftNav-toggleButton {\n    --vuu-icon-color: var(--vuu-light-text-primary);\n    --vuu-icon-left: 11px;\n    --vuu-icon-top: 10px;\n    --vuu-icon-size: 16px;\n    background-color: var(--salt-navigable-indicator-active);\n    border-width: 0;\n    border-radius: 18px;\n    height: 36px;\n    position: relative;\n    width: 36px\n}\n\n.vuuLeftNav-toggleButton-open {\n    --vuu-icon-left: 9px;\n\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", ".vuuSessionEditingForm {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 400px;\n    padding: 6px;\n}\n\n.vuuSessionEditingForm-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    gap: 3px;\n    overflow: auto;\n}\n\n.vuuSessionEditingForm-field {\n    align-items: center;\n    display: flex;\n    height: 32px;\n}\n\n.vuuSessionEditingForm-fieldLabel {\n    flex: 0 0 50%;\n}\n\n.vuuSessionEditingForm-fieldValue {\n    max-width: 50%;\n}\n\n.vuuSessionEditingForm-fieldValue.vuuReadOnly {\n    font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n.vuuSessionEditingForm-buttonbar {\n    align-items: center;\n    border-top: solid 1px var(--salt-container-primary-borderColor);\n    display: flex;\n    justify-content: flex-end;\n    flex: 0 0 autox;\n    gap: 6px;\n    padding-top: 6px;\n}\n\n.vuuSessionEditingForm-errorBanner {\n    --vuu-icon-left: 3px;\n    --vuu-icon-size: 18px;\n    --vuu-icon-top: 3px;\n    border: solid 1px var(--salt-status-error-borderColor);\n    line-height: 24px;\n    padding: 0 6px 0 26px;\n    position: relative;\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", "\n.vuuThemeSwitch {\n    --saltButton-minWidth: 22px;\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    padding: 2px;\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\n.vuuThemeSwitch .saltToggleButton {\n    height: 20px;\n    width: 20px;\n}\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\n.vuu-theme .vuuAppHeader {\n  border-radius: 8px;\n  border: 1px solid #D6D7DA; \n  height: 44px;\n  margin-bottom: 8px;\n}", ".vuuContextPanel {\n    position: relative;\n    transition: width .3s ease-in-out;\n    width: var(--vuu-side-panel-width, 0px) !important;\n    z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n    --vuu-side-panel-width: 300px !important;\n    --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n    --vuu-side-panel-padding: 24px;\n}\n\n.vuuContextPanel-overlay {\n    width: 0px !important;\n}\n\n.vuuContextPanel-inner {\n    background-color: var(--salt-container-primary-background);\n    box-shadow: var(--vuu-side-panel-shadow, none);\n    height: 100%;\n    padding-bottom: 24px;\n    padding-top: 24px;\n    padding-left: var(--vuu-side-panel-padding, 0);\n    padding-right: var(--vuu-side-panel-padding, 0);\n    position: absolute;\n    right: 0;\n    top:0;\n    transition-property: padding-left, padding-right, width;\n    transition-duration: .3s;\n    transition-timing-function: ease-in-out;\n    width: var(--vuu-side-panel-width, 0px);\n\n}\n\n.vuuContextPanel-header {\n    align-items: center;\n    display: flex;\n    flex-wrap: nowrap;\n    height: 27px;\n    justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n    font-size: 20px;\n    font-weight: 700;\n    white-space: nowrap;\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;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;AACI;AACA;AACA;AAAA;;;ACHJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACxBF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAEF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC3HF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACZF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AAEI;AAAA;AAGJ;AACI;AACA;AAAA;AAIJ;AACI;AAAA;AAGJ;AACI;AAAA;;;AClCJ;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAGA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACtDF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACpDF;AACE;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AAEA;AAAA;AAIF;AACE;AAAA;AAQF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AClIF;AACI;AAAA;;;ACAJ;AACE;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAQF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAaF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC3KF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAKF;AACE;AAAA;AAKF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAGE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAKF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC3NF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAIJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAOJ;AACI;AAAA;AAEJ;AACI;AAAA;AAEJ;AACI;AAAA;AAEJ;AACI;AAAA;AAIJ;AACI;AAEI;AAAA;AAEJ;AACI;AAAA;AAAA;AAIR;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AAAA;;;ACxIJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACtBF;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACnDJ;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;;;ACAF;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AAAA;AAEJ;AACI;AAAA;AAGJ;AACI;AACA;AAAA;;;AC3BJ;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;;;ACZF;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;;;AC9CJ;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;",
   "names": []
 }

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@vuu-ui/vuu-shell",
-  "version": "0.8.5-debug",
+  "version": "0.8.6-debug",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "dependencies": {
-    "@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.8.5-debug",
-    "@vuu-ui/vuu-layout": "0.8.5-debug",
-    "@vuu-ui/vuu-utils": "0.8.5-debug"
+    "@salt-ds/core": "1.8.0-rc.5",
+    "@salt-ds/icons": "1.5.1",
+    "@salt-ds/lab": "1.0.0-alpha.14",
+    "@vuu-ui/vuu-data": "0.8.6-debug",
+    "@vuu-ui/vuu-layout": "0.8.6-debug",
+    "@vuu-ui/vuu-utils": "0.8.6-debug"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",

package/types/vuu-data-react/src/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./useDataSource";
+export * from "./useServerConnectionStatus";
+export * from "./useServerConnectionQuality";
+export * from "./useTypeaheadSuggestions";
+export * from "./useVuuMenuActions";
+export * from "./useVuuTables";

package/types/vuu-data-react/src/hooks/useDataSource.d.ts

@@ -0,0 +1,24 @@
+import { DataSource } from "@vuu-ui/vuu-data";
+import { DataSourceRow } from "@vuu-ui/vuu-data-types";
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+export interface DataSourceHookProps {
+    dataSource: DataSource;
+    renderBufferSize?: number;
+}
+export declare function useDataSource({ dataSource, renderBufferSize, }: DataSourceHookProps): [
+    DataSourceRow[],
+    number,
+    VuuRange,
+    (range: VuuRange) => void
+];
+export declare class MovingWindow {
+    data: DataSourceRow[];
+    rowCount: number;
+    private range;
+    constructor({ from, to }: VuuRange);
+    setRowCount: (rowCount: number) => void;
+    add(data: DataSourceRow): void;
+    getAtIndex(index: number): DataSourceRow | undefined;
+    isWithinRange(index: number): boolean;
+    setRange(from: number, to: number): void;
+}

package/types/vuu-data-react/src/hooks/useServerConnectionQuality.d.ts

@@ -0,0 +1 @@
+export declare const useServerConnectionQuality: () => number;

package/types/vuu-data-react/src/hooks/useServerConnectionStatus.d.ts

@@ -0,0 +1 @@
+export declare const useServerConnectionStatus: () => string;

package/types/vuu-data-react/src/hooks/useTypeaheadSuggestions.d.ts

@@ -0,0 +1,4 @@
+import { TypeaheadParams, VuuTable } from "@vuu-ui/vuu-protocol-types";
+export type SuggestionFetcher = (params: TypeaheadParams) => Promise<string[]>;
+export declare const getTypeaheadParams: (table: VuuTable, column: string, text?: string, selectedValues?: string[]) => TypeaheadParams;
+export declare const useTypeaheadSuggestions: () => SuggestionFetcher;

package/types/vuu-data-react/src/hooks/useVuuMenuActions.d.ts

@@ -0,0 +1,57 @@
+import { DataSource, DataSourceMenusMessage, DataSourceVisualLinkCreatedMessage, DataSourceVisualLinkRemovedMessage, DataSourceVisualLinksMessage, MenuRpcResponse, VuuFeatureInvocationMessage, VuuFeatureMessage, VuuUIMessageInRPCEditReject, VuuUIMessageInRPCEditResponse } from "@vuu-ui/vuu-data";
+import { DataSourceRow, MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+import { GridAction } from "@vuu-ui/vuu-datagrid-types";
+import { LinkDescriptorWithLabel, VuuMenu, VuuMenuItem, VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { ColumnMap } from "@vuu-ui/vuu-utils";
+export declare const addRowsFromInstruments = "addRowsFromInstruments";
+export interface VuuCellMenuItem extends VuuMenuItem {
+    rowKey: string;
+    field: string;
+    value: VuuRowDataItemType;
+}
+export interface VuuRowMenuItem extends VuuMenuItem {
+    rowKey: string;
+    row: {
+        [key: string]: VuuRowDataItemType;
+    };
+}
+export declare const isVisualLinksAction: (action: GridAction) => action is DataSourceVisualLinksMessage;
+export declare const isVisualLinkCreatedAction: (action: GridAction) => action is DataSourceVisualLinkCreatedMessage;
+export declare const isVisualLinkRemovedAction: (action: GridAction) => action is DataSourceVisualLinkRemovedMessage;
+export declare const isViewportMenusAction: (action: GridAction) => action is DataSourceMenusMessage;
+export declare const isVuuFeatureAction: (action: GridAction) => action is VuuFeatureMessage;
+export declare const isVuuFeatureInvocation: (action: GridAction) => action is VuuFeatureInvocationMessage;
+export type VuuMenuActionHandler = (type: string, options: unknown) => boolean;
+export interface ViewServerHookResult {
+    buildViewserverMenuOptions: MenuBuilder;
+    handleMenuAction: MenuActionHandler;
+}
+export interface MenuActionConfig {
+    vuuMenu?: VuuMenu;
+    visualLink?: DataSourceVisualLinkCreatedMessage;
+    visualLinks?: LinkDescriptorWithLabel[];
+}
+export type RpcResponseHandler = (response: MenuRpcResponse | VuuUIMessageInRPCEditReject | VuuUIMessageInRPCEditResponse) => void;
+export interface VuuMenuActionHookProps {
+    /**
+     * By default, vuuMenuActions will be handled automatically. When activated, a
+     * message will be sent to server and response will be handled here too.
+     * This prop allows client to provide a custom handler for a menu Item. This will
+     * take priority and if handler returns true, no further processing for the menu
+     * item will be handled by Vuu. This can also be used to prevent an item from being
+     * actioned, even when no custom handling is intended. If the handler returns false,
+     * Vuu will process the menuItem.
+     */
+    clientSideMenuActionHandler?: VuuMenuActionHandler;
+    dataSource: DataSource;
+    menuActionConfig?: MenuActionConfig;
+    onRpcResponse?: RpcResponseHandler;
+}
+export type VuuServerMenuOptions = {
+    columnMap: ColumnMap;
+    columnName: string;
+    row: DataSourceRow;
+    selectedRows: DataSourceRow[];
+    viewport: string;
+};
+export declare const useVuuMenuActions: ({ clientSideMenuActionHandler, dataSource, menuActionConfig, onRpcResponse, }: VuuMenuActionHookProps) => ViewServerHookResult;

package/types/vuu-data-react/src/hooks/useVuuTables.d.ts

@@ -0,0 +1,2 @@
+import { TableSchema } from "@vuu-ui/vuu-data";
+export declare const useVuuTables: () => Map<string, TableSchema> | undefined;

package/types/vuu-data-react/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./hooks";

package/types/vuu-popups/src/dialog/Dialog.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+import "./Dialog.css";
+export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
+    isOpen?: boolean;
+    onClose?: () => void;
+}
+export declare const Dialog: ({ children, className, isOpen, onClose, title, ...props }: DialogProps) => JSX.Element | null;

package/types/vuu-popups/src/dialog/index.d.ts

@@ -0,0 +1 @@
+export * from "./Dialog";

package/types/vuu-popups/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./dialog";
+export * from "./menu";
+export * from "./popup";
+export * from "./popup-menu";
+export * from "./portal";

package/types/vuu-popups/src/menu/ContextMenu.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { MenuListProps } from "./MenuList";
+import { PopupCloseCallback } from "../popup";
+export interface ContextMenuProps extends Omit<MenuListProps, "onCloseMenu"> {
+    onClose?: PopupCloseCallback;
+    position?: {
+        x: number;
+        y: number;
+    };
+    withPortal?: boolean;
+}
+export declare const ContextMenu: {
+    ({ activatedByKeyboard, children: childrenProp, className, id: idProp, onClose, position, style, ...menuListProps }: ContextMenuProps): JSX.Element;
+    displayName: string;
+};

package/types/vuu-popups/src/menu/MenuList.d.ts

@@ -0,0 +1,43 @@
+import React, { FC, HTMLAttributes, ReactElement, ReactNode } from "react";
+import "./MenuList.css";
+export declare const Separator: () => JSX.Element;
+export interface MenuItemGroupProps {
+    children: ReactElement<MenuItemProps>[] | [ReactElement<MenuItemLabelProps>, ...ReactElement<MenuItemProps>[]];
+    label?: string;
+}
+export interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
+    action?: string;
+    idx?: number;
+    options?: unknown;
+}
+export declare const MenuItemGroup: FC<MenuItemGroupProps>;
+export declare const MenuItem: {
+    ({ children, idx, ...props }: MenuItemProps): JSX.Element;
+    Label: {
+        ({ children }: {
+            children: ReactNode;
+        }): JSX.Element;
+        displayName: string;
+    };
+};
+export interface MenuItemLabelProps {
+    children: ReactNode;
+}
+export declare const isMenuItemLabel: (item: ReactNode) => item is React.ReactElement<MenuItemLabelProps, string | React.JSXElementConstructor<any>>;
+export interface MenuListProps extends HTMLAttributes<HTMLDivElement> {
+    activatedByKeyboard?: boolean;
+    children: ReactElement[];
+    childMenuShowing?: string;
+    highlightedIdx?: number;
+    isRoot?: boolean;
+    listItemProps?: Partial<MenuItemProps>;
+    onActivate?: (menuId: string) => void;
+    onCloseMenu: (idx: number) => void;
+    onOpenMenu?: (menuItemEl: HTMLElement) => void;
+    onHighlightMenuItem?: (idx: number) => void;
+}
+declare const MenuList: {
+    ({ activatedByKeyboard, childMenuShowing, children, className, highlightedIdx: highlightedIdxProp, id: idProp, isRoot, listItemProps, onHighlightMenuItem, onActivate, onCloseMenu, onOpenMenu, ...props }: MenuListProps): JSX.Element;
+    displayName: string;
+};
+export default MenuList;

package/types/vuu-popups/src/menu/context-menu-provider.d.ts

@@ -0,0 +1,10 @@
+import type { ContextMenuContextType, MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+import { ReactNode } from "react";
+export declare const ContextMenuContext: import("react").Context<ContextMenuContextType | null>;
+export interface ContextMenuProviderProps {
+    children: ReactNode;
+    label?: string;
+    menuActionHandler?: MenuActionHandler;
+    menuBuilder: MenuBuilder;
+}
+export declare const ContextMenuProvider: ({ children, label, menuActionHandler, menuBuilder, }: ContextMenuProviderProps) => JSX.Element;

package/types/vuu-popups/src/menu/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ContextMenu";
+export * from "./MenuList";
+export * from "./context-menu-provider";
+export * from "./useContextMenu";

package/types/vuu-popups/src/menu/key-code.d.ts

@@ -0,0 +1,12 @@
+export declare const ArrowUp = "ArrowUp";
+export declare const ArrowDown = "ArrowDown";
+export declare const ArrowLeft = "ArrowLeft";
+export declare const Backspace = "Backspace";
+export declare const ArrowRight = "ArrowRight";
+export declare const Enter = "Enter";
+export declare const Escape = "Escape";
+export declare const Delete = "Delete";
+export declare const isCharacterKey: (evt: KeyboardEvent) => boolean | undefined;
+export declare const isNavigationKey: ({ key }: {
+    key: string;
+}, orientation?: string) => boolean;

package/types/vuu-popups/src/menu/list-dom-utils.d.ts

@@ -0,0 +1,4 @@
+export declare function listItemIndex(listItemEl: HTMLElement): number | undefined;
+export declare const closestListItem: (el: HTMLElement | null | undefined) => HTMLElement;
+export declare const closestListItemId: (el: HTMLElement) => string | undefined;
+export declare const closestListItemIndex: (el: HTMLElement) => number | undefined;

package/types/vuu-popups/src/menu/use-cascade.d.ts

@@ -0,0 +1,25 @@
+import { MouseEvent } from "react";
+import { MenuItemProps } from "./MenuList";
+export type RuntimeMenuDescriptor = {
+    id: string;
+    left: number;
+    top: number;
+};
+export declare const getHostMenuId: (id: string, rootId: string) => string;
+export interface CascadeHookProps {
+    id: string;
+    onActivate: (menuId: string) => void;
+    onMouseEnterItem: (evt: MouseEvent, itemId: string) => void;
+    position: {
+        x: number;
+        y: number;
+    };
+}
+export interface CascadeHooksResult {
+    closeMenu: () => void;
+    handleRender: () => void;
+    listItemProps: Partial<MenuItemProps>;
+    openMenu: (menuItemEl: HTMLElement) => void;
+    openMenus: RuntimeMenuDescriptor[];
+}
+export declare const useCascade: ({ id: rootId, onActivate, onMouseEnterItem, position: { x: posX, y: posY }, }: CascadeHookProps) => CascadeHooksResult;

package/types/vuu-popups/src/menu/use-items-with-ids-next.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+export declare const isMenuItemGroup: (child: ReactElement) => boolean;
+type Menus = {
+    [key: string]: ReactElement[];
+};
+type Actions = {
+    [key: string]: {
+        action: string;
+        options?: unknown;
+    };
+};
+export declare const useItemsWithIdsNext: (childrenProp: ReactElement[], rootId: string) => [Menus, Actions];
+export {};

package/types/vuu-popups/src/menu/use-keyboard-navigation.d.ts

@@ -0,0 +1,26 @@
+import { FocusEvent, KeyboardEvent } from "react";
+export interface KeyboardNavigationProps {
+    autoHighlightFirstItem?: boolean;
+    count: number;
+    highlightedIndex?: number;
+    onActivate: (idx: number) => void;
+    onHighlight?: (idx: number) => void;
+    onCloseMenu: (idx: number) => void;
+    onOpenMenu?: (menuItemEl: HTMLElement) => void;
+}
+export interface KeyboardHookListProps {
+    onFocus: (evt: FocusEvent) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    onMouseDownCapture: () => void;
+    onMouseMove: () => void;
+    onMouseLeave: () => void;
+}
+export interface NavigationHookResult {
+    focusVisible: number;
+    controlledHighlighting: boolean;
+    highlightedIndex: number;
+    setHighlightedIndex: (idx: number) => void;
+    listProps: KeyboardHookListProps;
+    setIgnoreFocus: (ignoreFocus: boolean) => void;
+}
+export declare const useKeyboardNavigation: ({ autoHighlightFirstItem, count, highlightedIndex: highlightedIndexProp, onActivate, onHighlight, onCloseMenu, onOpenMenu, }: KeyboardNavigationProps) => NavigationHookResult;

package/types/vuu-popups/src/menu/useContextMenu.d.ts

@@ -0,0 +1,13 @@
+import { MouseEvent } from "react";
+import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+import { ContextMenuProps } from "./ContextMenu";
+export type ContextMenuOptions = {
+    [key: string]: unknown;
+    contextMenu?: JSX.Element;
+    ContextMenuProps?: Partial<ContextMenuProps> & {
+        className?: string;
+        "data-mode"?: string;
+    };
+};
+export type ShowContextMenu = (e: MouseEvent<HTMLElement>, location: string, options: ContextMenuOptions) => void;
+export declare const useContextMenu: (menuBuilder?: MenuBuilder, menuActionHandler?: MenuActionHandler) => [ShowContextMenu, () => void];

package/types/vuu-popups/src/menu/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isRoot: (el: HTMLElement) => boolean;
+export declare const hasPopup: (el: HTMLElement, idx: number) => boolean;

package/types/vuu-popups/src/popup/index.d.ts

@@ -0,0 +1 @@
+export * from "./popup-service";

package/types/vuu-popups/src/popup/popup-service.d.ts

@@ -0,0 +1,55 @@
+import React, { ReactElement } from "react";
+import { ContextMenuOptions } from "../menu";
+import "./popup-service.css";
+export type PopupCloseCallback = (reason?: PopupCloseReason) => void;
+export type ClickAwayClosePopup = {
+    type: "click-away";
+    mouseEvt: MouseEvent;
+};
+export type MenuActionClosePopup = {
+    menuId: string;
+    options: ContextMenuOptions;
+    type: "menu-action";
+};
+export type PopupCloseReason = ClickAwayClosePopup | MenuActionClosePopup;
+export declare const reasonIsMenuAction: (reason?: PopupCloseReason) => reason is MenuActionClosePopup;
+export declare const reasonIsClickAway: (reason?: PopupCloseReason) => reason is ClickAwayClosePopup;
+export interface ShowPopupProps {
+    depth?: number;
+    /**
+     * if true, focus will be invoked on first focusable element
+     */
+    focus?: boolean;
+    name?: string;
+    group?: string;
+    position?: "above" | "below" | "";
+    left?: number;
+    right?: "auto" | number;
+    top?: number;
+    component: ReactElement;
+    width?: number | "auto";
+}
+export declare class PopupService {
+    static onClose: PopupCloseCallback | undefined;
+    static showPopup({ group, name, left, position, right, top, width, component, }: ShowPopupProps): void;
+    static escapeKeyListener(evt: KeyboardEvent): void;
+    static hidePopup(reason?: PopupCloseReason, name?: string, group?: string): void;
+    static keepWithinThePage(el: HTMLElement, right?: number | "auto"): void;
+}
+export declare class DialogService {
+    static showDialog(dialog: ReactElement): void;
+    static closeDialog(): void;
+}
+export interface PopupProps {
+    children: ReactElement;
+    close?: boolean;
+    depth: number;
+    group?: string;
+    name: string;
+    position?: "above" | "below" | "";
+    width: number;
+}
+export declare const Popup: (props: PopupProps) => React.DetailedReactHTMLElement<{
+    className: string;
+    ref: React.RefObject<HTMLElement>;
+}, HTMLElement>;

package/types/vuu-popups/src/popup-menu/PopupMenu.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from "react";
+import "./PopupMenu.css";
+import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+export interface PopupMenuProps extends HTMLAttributes<HTMLButtonElement> {
+    icon?: string;
+    menuActionHandler?: MenuActionHandler;
+    menuBuilder?: MenuBuilder;
+    menuLocation?: string;
+    menuOptions?: {
+        [key: string]: unknown;
+    };
+    onMenuClose?: () => void;
+}
+export declare const PopupMenu: ({ className, icon, id: idProp, menuActionHandler, menuBuilder, menuLocation, menuOptions, onMenuClose, tabIndex, ...htmlAttributes }: PopupMenuProps) => JSX.Element;

package/types/vuu-popups/src/popup-menu/index.d.ts

@@ -0,0 +1 @@
+export * from "./PopupMenu";

package/types/vuu-popups/src/portal/Portal.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+export interface PortalProps {
+    children: ReactElement;
+    onRender?: () => void;
+    x?: number;
+    y?: number;
+}
+export declare const Portal: ({ children, x, y, onRender, }: PortalProps) => null;

package/types/vuu-popups/src/portal/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Portal";
+export * from "./render-portal";
+export * from "./portal-utils";

package/types/vuu-popups/src/portal/portal-utils.d.ts

@@ -0,0 +1 @@
+export declare const installTheme: (themeId: string) => void;

package/types/vuu-popups/src/portal/render-portal.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+export interface HTMLContainerProps {
+    className?: string;
+    dataMode?: string;
+    x?: number;
+    y?: number;
+    win?: typeof globalThis;
+}
+export declare const createContainer: (props: HTMLContainerProps) => HTMLDivElement;
+export declare const renderPortal: (component: ReactElement, container: HTMLElement, x: number, y: number, onRender?: () => void) => void;