@openviking/react 0.1.1 → 0.1.2

package/dist/lk~0.js

@@ -58,7 +58,8 @@ function createScopeController() {
             const options = await (0 === index ? api.loadLibraries(request.signal) : 1 === index ? api.loadSpaces(libraryId, request.signal) : api.loadUsers(libraryId, spaceId, request.signal));
             if (!active || request.signal.aborted || requests[index] !== request) return;
             const previous = snapshots[index].selected;
-            const selected = options.find((option)=>option.id === previous?.id && !option.disabled);
+            const selected = options.find((option)=>option.id === previous?.id && !option.disabled) ?? options.find((option)=>!option.disabled);
+            const changed = void 0 !== selected && selected.id !== previous?.id;
             update(index, {
                 options,
                 selected,
@@ -66,9 +67,10 @@ function createScopeController() {
                 error: null
             });
             const revoked = void 0 !== previous && void 0 === selected;
-            if (revoked) resetDescendants(index);
+            if (revoked || changed) resetDescendants(index);
             notify(index);
-            if (revoked) for(let next = index + 1; next < 3; next++)notify(next);
+            if (revoked || changed) for(let next = index + 1; next < 3; next++)notify(next);
+            if (changed && index < 2) load(index + 1);
         } catch (error) {
             if (!active || request.signal.aborted || requests[index] !== request) return;
             update(index, {
@@ -156,24 +158,35 @@ function LevelView({ level, state, name, labels, retryLabel }) {
     const [keyword, setKeyword] = useState('');
     return /*#__PURE__*/ jsx(ScopeSelector, {
         labels: labels,
-        level: {
-            kind: 'selectable',
+        kind: "selectable",
+        identity: {
             key: name,
-            ariaLabel: name,
+            ariaLabel: name
+        },
+        trigger: {
+            label: state.selected?.label ?? name,
+            icon: state.selected?.icon
+        },
+        data: {
             selectedId: state.selected?.id ?? '',
-            selectedLabel: state.selected?.label ?? name,
-            icon: state.selected?.icon,
-            disabled: !state.enabled,
-            options: state.options.filter((option)=>option.label.toLocaleLowerCase().includes(keyword.toLocaleLowerCase())),
             total: state.options.length,
+            options: state.options,
+            visibleOptions: state.options.filter((option)=>option.label.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))
+        },
+        state: {
+            disabled: !state.enabled,
             loading: state.loading,
             error: null !== state.error,
-            searchKeyword: keyword,
+            searchKeyword: keyword
+        },
+        actions: {
             onSearchKeywordChange: setKeyword,
             onSelect: (option)=>{
                 level.select(option);
                 setKeyword('');
-            },
+            }
+        },
+        slots: {
             errorFallback: /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     labels?.error ?? 'Unable to load options',

package/dist/modules/console/style.css

@@ -1,6 +1,88 @@
+.ov-agent-connect, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5252ff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-light-default: #f5f7ff;
+  --ov-ui-connect-glow-warm-default: #ff952b0a;
+  --ov-ui-connect-glow-pink-default: #fb4fbc0f;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc0a;
+  --ov-ui-on-primary-default: #fff;
+  --ov-ui-text-1-default: #0b0b0f;
+  --ov-ui-text-2-default: #3f3f51;
+  --ov-ui-text-3-default: #6e718c;
+  --ov-ui-text-description-default: #0006;
+  --ov-ui-text-disabled-default: #a5a7bb;
+  --ov-ui-border-1-default: #f0f2fa;
+  --ov-ui-border-2-default: #e1e4f2;
+  --ov-ui-border-3-default: #d7daea;
+  --ov-ui-bg-1-default: #fff;
+  --ov-ui-bg-3-default: #f7f8fd;
+  --ov-ui-bg-4-default: #f6f7fa;
+  --ov-ui-bg-5-default: #f1f2f9;
+  --ov-ui-status-success-default: #1f9d55;
+  --ov-ui-shadow-default: #0f172a;
+  --ov-ui-focus-default: #5252ff;
+  --ov-ui-fill-hover-default: #f1f2f9;
+  --ov-ui-status-error-default: #c43838;
+  --ov-ui-warning-default: #b26a00;
+  --ov-ui-warning-light-default: #fff0b3;
+  --ov-ui-tooltip-bg-default: #1f2329;
+  --ov-ui-tooltip-text-default: #fff;
+}
+
+.dark .ov-agent-connect, .dark .ov-file-browser, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-scope-switcher, .dark .ov-tooltip, .dark .ov-tui, .dark .ov-viking-bot, .dark .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5f5fff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #4242ba;
+  --ov-ui-primary-light-default: #1a1632;
+  --ov-ui-connect-glow-warm-default: #ff952b05;
+  --ov-ui-connect-glow-pink-default: #fb4fbc08;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc05;
+  --ov-ui-text-1-default: #c7ccd6;
+  --ov-ui-text-2-default: #9da3af;
+  --ov-ui-text-3-default: #737a87;
+  --ov-ui-text-description-default: #fff6;
+  --ov-ui-text-disabled-default: #42464e;
+  --ov-ui-border-1-default: #23252a;
+  --ov-ui-border-2-default: #2e3138;
+  --ov-ui-border-3-default: #3a3d45;
+  --ov-ui-bg-1-default: #131416;
+  --ov-ui-bg-3-default: #1b1d21;
+  --ov-ui-bg-4-default: #202227;
+  --ov-ui-bg-5-default: #23252a;
+  --ov-ui-focus-default: #5f5fff;
+  --ov-ui-fill-hover-default: #23252a;
+  --ov-ui-status-error-default: #ff9595;
+  --ov-ui-warning-default: #e0a04a;
+  --ov-ui-warning-light-default: #3a2f14;
+  --ov-ui-tooltip-bg-default: #2a2d33;
+  --ov-ui-tooltip-text-default: #f0f1f3;
+}
+
+.ov-agent-connect {
+  --ov-ui-connect-card-default: #fbfbfc;
+  --ov-ui-connect-tabs-default: #f7f7f9;
+  --ov-ui-connect-selected-default: #f3f4f7;
+  --ov-ui-connect-border-default: #edeef2;
+  --ov-ui-connect-outline-default: #e1e3ea;
+  --ov-ui-connect-muted-default: #787c91;
+  --ov-ui-connect-notice-default: #2e2984;
+}
+
+.dark .ov-agent-connect {
+  --ov-ui-connect-card-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-tabs-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-selected-default: var(--ov-ui-bg-4-default);
+  --ov-ui-connect-border-default: var(--ov-ui-border-1-default);
+  --ov-ui-connect-outline-default: var(--ov-ui-border-2-default);
+  --ov-ui-connect-muted-default: var(--ov-ui-text-3-default);
+  --ov-ui-connect-notice-default: var(--ov-ui-text-2-default);
+}
+
 .ov-module-placeholder {
   box-sizing: border-box;
-  border: 1px dashed var(--ov-ui-border, currentColor);
+  border: 1px dashed
+    var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, currentColor));
   border-radius: var(--ov-ui-radius, 6px);
   min-width: 0;
   min-height: 160px;

package/dist/modules/file-browser/style.css

@@ -1,9 +1,90 @@
+.ov-agent-connect, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5252ff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-light-default: #f5f7ff;
+  --ov-ui-connect-glow-warm-default: #ff952b0a;
+  --ov-ui-connect-glow-pink-default: #fb4fbc0f;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc0a;
+  --ov-ui-on-primary-default: #fff;
+  --ov-ui-text-1-default: #0b0b0f;
+  --ov-ui-text-2-default: #3f3f51;
+  --ov-ui-text-3-default: #6e718c;
+  --ov-ui-text-description-default: #0006;
+  --ov-ui-text-disabled-default: #a5a7bb;
+  --ov-ui-border-1-default: #f0f2fa;
+  --ov-ui-border-2-default: #e1e4f2;
+  --ov-ui-border-3-default: #d7daea;
+  --ov-ui-bg-1-default: #fff;
+  --ov-ui-bg-3-default: #f7f8fd;
+  --ov-ui-bg-4-default: #f6f7fa;
+  --ov-ui-bg-5-default: #f1f2f9;
+  --ov-ui-status-success-default: #1f9d55;
+  --ov-ui-shadow-default: #0f172a;
+  --ov-ui-focus-default: #5252ff;
+  --ov-ui-fill-hover-default: #f1f2f9;
+  --ov-ui-status-error-default: #c43838;
+  --ov-ui-warning-default: #b26a00;
+  --ov-ui-warning-light-default: #fff0b3;
+  --ov-ui-tooltip-bg-default: #1f2329;
+  --ov-ui-tooltip-text-default: #fff;
+}
+
+.dark .ov-agent-connect, .dark .ov-file-browser, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-scope-switcher, .dark .ov-tooltip, .dark .ov-tui, .dark .ov-viking-bot, .dark .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5f5fff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #4242ba;
+  --ov-ui-primary-light-default: #1a1632;
+  --ov-ui-connect-glow-warm-default: #ff952b05;
+  --ov-ui-connect-glow-pink-default: #fb4fbc08;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc05;
+  --ov-ui-text-1-default: #c7ccd6;
+  --ov-ui-text-2-default: #9da3af;
+  --ov-ui-text-3-default: #737a87;
+  --ov-ui-text-description-default: #fff6;
+  --ov-ui-text-disabled-default: #42464e;
+  --ov-ui-border-1-default: #23252a;
+  --ov-ui-border-2-default: #2e3138;
+  --ov-ui-border-3-default: #3a3d45;
+  --ov-ui-bg-1-default: #131416;
+  --ov-ui-bg-3-default: #1b1d21;
+  --ov-ui-bg-4-default: #202227;
+  --ov-ui-bg-5-default: #23252a;
+  --ov-ui-focus-default: #5f5fff;
+  --ov-ui-fill-hover-default: #23252a;
+  --ov-ui-status-error-default: #ff9595;
+  --ov-ui-warning-default: #e0a04a;
+  --ov-ui-warning-light-default: #3a2f14;
+  --ov-ui-tooltip-bg-default: #2a2d33;
+  --ov-ui-tooltip-text-default: #f0f1f3;
+}
+
+.ov-agent-connect {
+  --ov-ui-connect-card-default: #fbfbfc;
+  --ov-ui-connect-tabs-default: #f7f7f9;
+  --ov-ui-connect-selected-default: #f3f4f7;
+  --ov-ui-connect-border-default: #edeef2;
+  --ov-ui-connect-outline-default: #e1e3ea;
+  --ov-ui-connect-muted-default: #787c91;
+  --ov-ui-connect-notice-default: #2e2984;
+}
+
+.dark .ov-agent-connect {
+  --ov-ui-connect-card-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-tabs-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-selected-default: var(--ov-ui-bg-4-default);
+  --ov-ui-connect-border-default: var(--ov-ui-border-1-default);
+  --ov-ui-connect-outline-default: var(--ov-ui-border-2-default);
+  --ov-ui-connect-muted-default: var(--ov-ui-text-3-default);
+  --ov-ui-connect-notice-default: var(--ov-ui-text-2-default);
+}
+
 .ov-file-browser__toolbar-button {
   align-items: center;
   gap: var(--ov-ui-space-2, 8px);
   padding: var(--ov-ui-space-2, 8px) var(--ov-ui-space-3, 12px);
   border-radius: var(--ov-ui-radius-sm, 4px);
-  color: var(--ov-ui-color-primary, #1664ff);
+  color: var(--ov-ui-color-primary, var(--ov-ui-primary-default, #5252ff));
   font: inherit;
   cursor: pointer;
   background: none;
@@ -12,16 +93,17 @@
 }
 
 .ov-file-browser__toolbar-button:hover:not(:disabled) {
-  background: var(--ov-ui-color-fill-hover, #1664ff14);
+  background: var(--ov-ui-color-fill-hover, var(--ov-ui-fill-hover-default, #f1f2f9));
 }
 
 .ov-file-browser__toolbar-button:focus-visible {
-  outline: 2px solid var(--ov-ui-color-focus, #1664ff);
+  outline: 2px solid
+    var(--ov-ui-color-focus, var(--ov-ui-focus-default, #5252ff));
   outline-offset: 2px;
 }
 
 .ov-file-browser__toolbar-button:disabled {
-  color: var(--ov-ui-color-text-disabled, #00000040);
+  color: var(--ov-ui-color-text-disabled, var(--ov-ui-text-disabled-default, #a5a7bb));
   cursor: not-allowed;
 }
 
@@ -39,14 +121,15 @@
   width: 1px;
   height: 16px;
   margin-right: var(--ov-ui-space-2, 8px);
-  background: var(--ov-ui-color-border, #0000001f);
+  background: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
   vertical-align: middle;
   display: inline-block;
 }
 
 .ov-module-placeholder {
   box-sizing: border-box;
-  border: 1px dashed var(--ov-ui-border, currentColor);
+  border: 1px dashed
+    var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, currentColor));
   border-radius: var(--ov-ui-radius, 6px);
   min-width: 0;
   min-height: 160px;