@openviking/react 0.1.1 → 0.1.3

package/dist/components/file-tree/style.css

@@ -1,8 +1,139 @@
+.ov-agent-connect, .ov-divider, .ov-file-browser, .ov-file-browser-entries, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-popover, .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-divider, .dark .ov-file-browser, .dark .ov-file-browser-entries, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-popover, .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-popover {
+  --ov-ui-popover-bg: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default, #fff));
+  --ov-ui-popover-text: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default, #0b0b0f));
+  --ov-ui-popover-border: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
+  z-index: 1000;
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-popover-border);
+  background: var(--ov-ui-popover-bg);
+  max-width: 320px;
+  color: var(--ov-ui-popover-text);
+  overflow-wrap: break-word;
+  border-radius: 8px;
+  padding: 12px;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  animation: .12s ease-out ov-popover-enter;
+  position: fixed;
+  box-shadow: 0 15px 35px -2px #0000000d, 0 5px 15px #0000000d;
+}
+
+@keyframes ov-popover-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ov-popover {
+    animation: none;
+  }
+}
+
 .ov-file-tree {
+  --ov-ui-file-tree-row-height: 32px;
+  --ov-ui-file-tree-row-radius: 4px;
+  --ov-ui-file-tree-indent: 16px;
+  --ov-ui-file-tree-text: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default, #0b0b0f));
+  --ov-ui-file-tree-text-muted: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default, #6e718c));
+  --ov-ui-file-tree-icon: var(--ov-ui-color-text-3, var(--ov-ui-text-3-default, #6e718c));
+  --ov-ui-file-tree-row-hover: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default, #f1f2f9));
+  --ov-ui-file-tree-row-selected: var(--ov-ui-color-bg-4, var(--ov-ui-bg-4-default, #f6f7fa));
+  --ov-ui-file-tree-guide: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
+  --ov-ui-file-tree-spinner-track: var(--ov-ui-color-border-3, var(--ov-ui-border-3-default, #d7daea));
+  --ov-ui-file-tree-spinner: var(--ov-ui-color-primary, var(--ov-ui-primary-default, #5252ff));
+  --ov-ui-file-tree-action: var(--ov-ui-color-primary, var(--ov-ui-primary-default, #5252ff));
+  --ov-ui-file-tree-warning: var(--ov-ui-color-warning, var(--ov-ui-warning-default, #b26a00));
   box-sizing: border-box;
   min-width: 0;
   min-height: 0;
-  color: inherit;
+  color: var(--ov-ui-file-tree-text);
   flex-direction: column;
   font-family: inherit;
   font-size: 13px;
@@ -23,43 +154,59 @@
 
 .ov-file-tree__rows {
   flex-direction: column;
+  width: max-content;
+  min-width: 100%;
   display: flex;
 }
 
-.ov-file-tree__row {
+.ov-file-tree__row, .ov-file-tree__state-row {
   box-sizing: border-box;
-  border-radius: var(--ov-ui-radius, 6px);
-  height: 28px;
-  color: inherit;
-  cursor: default;
+  width: max-content;
+  min-width: 100%;
+  height: var(--ov-ui-file-tree-row-height);
+  border-radius: var(--ov-ui-file-tree-row-radius);
+  cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
   outline: none;
   align-items: center;
-  gap: 4px;
-  padding-right: 8px;
+  gap: 2px;
+  padding-right: 4px;
   display: flex;
   position: relative;
 }
 
-.ov-file-tree__row:hover {
-  background: var(--ov-ui-row-hover, color-mix(in srgb, currentColor 6%, transparent));
+.ov-file-tree__row {
+  transition: background-color .12s;
 }
 
-.ov-file-tree__row:focus-visible {
-  outline: 2px solid var(--ov-ui-focus-ring, #2563c5);
-  outline-offset: -2px;
+.ov-file-tree__row:hover {
+  background-color: var(--ov-ui-file-tree-row-hover);
 }
 
 .ov-file-tree__row[data-selected] {
-  background: var(--ov-ui-row-selected, #2563c51a);
+  background-color: var(--ov-ui-file-tree-row-selected);
+}
+
+.ov-file-tree__row:focus-visible, .ov-file-tree__state-row:focus-visible {
+  outline: 2px solid var(--ov-ui-file-tree-action);
+  outline-offset: -2px;
 }
 
 .ov-file-tree__row[data-disabled] {
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
+  color: var(--ov-ui-file-tree-text-muted);
   cursor: not-allowed;
 }
 
+.ov-file-tree__guide {
+  background-color: var(--ov-ui-file-tree-guide);
+  pointer-events: none;
+  width: 1px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
 .ov-file-tree__toggle, .ov-file-tree__toggle-spacer {
   flex: none;
   justify-content: center;
@@ -70,7 +217,7 @@
 }
 
 .ov-file-tree__toggle {
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
+  color: var(--ov-ui-file-tree-text-muted);
   cursor: pointer;
   background: none;
   border: 0;
@@ -78,12 +225,16 @@
   padding: 0;
 }
 
-.ov-file-tree__toggle:hover {
-  background: color-mix(in srgb, currentColor 10%, transparent);
+.ov-file-tree__toggle:hover:not(:disabled) {
+  background-color: var(--ov-ui-file-tree-row-hover);
+}
+
+.ov-file-tree__toggle:disabled {
+  cursor: default;
 }
 
 .ov-file-tree__chevron {
-  transition: transform .12s;
+  transition: transform .15s cubic-bezier(.22, 1, .36, 1);
 }
 
 .ov-file-tree__chevron[data-expanded] {
@@ -91,50 +242,73 @@
 }
 
 .ov-file-tree__icon-slot {
-  color: var(--ov-ui-icon, color-mix(in srgb, currentColor 62%, transparent));
+  width: 16px;
+  height: 16px;
+  color: var(--ov-ui-file-tree-icon);
   flex: none;
+  justify-content: center;
   align-items: center;
   display: inline-flex;
 }
 
-.ov-file-tree__icon {
-  display: block;
+.ov-file-tree__folder {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  position: relative;
+}
+
+.ov-file-tree__folder-layer {
+  opacity: 0;
+  width: 14px;
+  height: 14px;
+  transition: opacity .22s cubic-bezier(.22, 1, .36, 1);
+  position: absolute;
+  inset: 0;
+}
+
+.ov-file-tree__folder-layer[data-open="true"] {
+  opacity: 1;
+}
+
+.ov-file-tree__file-icon {
+  width: 16px;
+  height: 16px;
 }
 
 .ov-file-tree__label-group {
-  flex: auto;
-  align-items: baseline;
-  gap: 6px;
-  min-width: 0;
+  flex: none;
+  align-items: center;
+  gap: 8px;
   display: flex;
 }
 
 .ov-file-tree__label {
-  text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
+  flex: none;
 }
 
 .ov-file-tree__description {
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
+  max-width: 200px;
+  color: var(--ov-ui-file-tree-text-muted);
+  letter-spacing: .03px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
+  flex: none;
+  font-size: 10px;
+  line-height: 20px;
   overflow: hidden;
 }
 
 .ov-file-tree__level {
-  background: var(--ov-ui-chip, color-mix(in srgb, currentColor 10%, transparent));
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
-  border-radius: 3px;
+  color: var(--ov-ui-file-tree-text-muted);
   flex: none;
-  padding: 0 4px;
-  font-size: 11px;
-  line-height: 16px;
+  margin-left: auto;
+  font-size: 14px;
 }
 
 .ov-file-tree__expiry {
-  color: var(--ov-ui-warning, #b26a00);
+  color: var(--ov-ui-file-tree-warning);
   flex: none;
   font-size: 12px;
 }
@@ -155,72 +329,77 @@
   display: inline-flex;
 }
 
-.ov-file-tree__tooltip {
-  z-index: 1;
-  border-radius: var(--ov-ui-radius, 6px);
-  background: var(--ov-ui-tooltip-bg, #1f2329);
-  max-width: 320px;
-  color: var(--ov-ui-tooltip-text, #fff);
-  pointer-events: none;
-  padding: 6px 8px;
-  font-size: 12px;
-  line-height: 18px;
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
+.ov-file-tree__info {
+  flex-direction: column;
+  gap: 8px;
+  display: flex;
 }
 
-.ov-file-tree__child-row {
-  box-sizing: border-box;
-  height: 28px;
-  color: var(--ov-ui-text-muted, color-mix(in srgb, currentColor 62%, transparent));
-  align-items: center;
-  gap: 6px;
-  padding-right: 8px;
+.ov-file-tree__info-title {
+  color: var(--ov-ui-file-tree-text);
+  word-break: break-all;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.ov-file-tree__info-row {
+  gap: 8px;
+  min-width: 0;
   display: flex;
 }
 
-.ov-file-tree__child-row[data-tone="error"] {
-  color: var(--ov-ui-status-error, #c43838);
+.ov-file-tree__info-label {
+  color: var(--ov-ui-file-tree-text-muted);
+  flex: none;
 }
 
-.ov-file-tree__child-action {
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  background: none;
-  border: 0;
-  padding: 0;
-  text-decoration: underline;
+.ov-file-tree__info-value {
+  min-width: 0;
+  color: var(--ov-ui-file-tree-text);
+  word-break: break-word;
 }
 
-.ov-file-tree__child-action:disabled {
-  cursor: default;
-  opacity: .6;
+.ov-file-tree__info-path {
+  min-width: 0;
+  color: var(--ov-ui-file-tree-text-muted);
+  word-break: break-all;
+}
+
+.ov-file-tree__state-row {
+  color: var(--ov-ui-file-tree-text-muted);
+}
+
+.ov-file-tree__state-row[data-tone="error"] {
+  color: var(--ov-ui-color-status-error, var(--ov-ui-status-error-default, #c43838));
 }
 
 .ov-file-tree__state {
   box-sizing: border-box;
+  min-height: 120px;
+  color: var(--ov-ui-file-tree-text-muted);
   justify-content: center;
   align-items: center;
-  min-height: 120px;
   padding: 24px;
   display: flex;
 }
 
 .ov-file-tree__muted {
   color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .ov-file-tree__spinner {
   box-sizing: border-box;
-  border: 1.5px solid;
-  border-right-color: #0000;
+  border: 1px solid var(--ov-ui-file-tree-spinner-track);
+  border-top-color: var(--ov-ui-file-tree-spinner);
   border-radius: 50%;
   flex: none;
   width: 12px;
   height: 12px;
-  animation: .72s linear infinite ov-file-tree-spin;
+  animation: .9s linear infinite ov-file-tree-spin;
   display: inline-block;
 }
 
@@ -230,8 +409,26 @@
   }
 }
 
+.ov-file-tree__action {
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  transition: color .12s;
+}
+
+.ov-file-tree__action:hover:not(:disabled) {
+  color: var(--ov-ui-file-tree-action);
+}
+
+.ov-file-tree__action:disabled {
+  cursor: default;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .ov-file-tree__chevron {
+  .ov-file-tree__chevron, .ov-file-tree__folder-layer {
     transition: none;
   }
 
@@ -240,5 +437,13 @@
   }
 }
 
+.ov-file-tree__file-type-icon {
+  color: var(--ov-file-tree-icon-light, var(--ov-ui-file-tree-icon));
+}
+
+.dark .ov-file-tree__file-type-icon {
+  color: var(--ov-file-tree-icon-dark, var(--ov-ui-file-tree-icon));
+}
+