@adea-ai/ui 0.27.0 → 0.29.0

package/src/styles/dev-view.css

@@ -122,9 +122,10 @@
 }
 
 .dev-workspace__body {
-  display: grid;
+  position: relative;
+  display: flex;
   min-height: 0;
-  grid-template-columns: minmax(13rem, 17rem) minmax(20rem, 1fr) minmax(13rem, 18rem);
+  min-width: 0;
 }
 
 .dev-sidebar,
@@ -136,6 +137,8 @@
 
 .dev-sidebar {
   display: flex;
+  flex: none;
+  width: clamp(13rem, 16vw, 17rem);
   flex-direction: column;
   padding: 0.65rem;
   border-inline-end: 1px solid var(--dev-border);
@@ -241,6 +244,7 @@
 }
 
 .dev-center {
+  flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
@@ -324,6 +328,7 @@
 }
 
 .dev-pane {
+  position: relative;
   display: grid;
   min-width: 0;
   min-height: 0;
@@ -453,11 +458,137 @@
 
 .dev-utility {
   display: grid;
+  flex: none;
+  width: var(--dev-utility-size, 18rem);
   min-height: 0;
+}
+
+.dev-utility--size-240 {
+  --dev-utility-size: 15rem;
+}
+
+.dev-utility--size-336 {
+  --dev-utility-size: 21rem;
+}
+
+.dev-utility--size-384 {
+  --dev-utility-size: 24rem;
+}
+
+.dev-utility--right {
   grid-template-columns: 2.75rem minmax(0, 1fr);
   border-inline-start: 1px solid var(--dev-border);
 }
 
+.dev-utility--left {
+  grid-template-columns: minmax(0, 1fr) 2.75rem;
+  border-inline-end: 1px solid var(--dev-border);
+}
+
+.dev-utility--left .dev-utility-tabs {
+  order: 2;
+  border-inline-end: 0;
+  border-inline-start: 1px solid var(--dev-border);
+}
+
+.dev-utility-splitter {
+  flex: none;
+  width: 0.45rem;
+  padding: 0;
+  border: 0;
+  border-inline: 1px solid var(--dev-border);
+  background: color-mix(in srgb, var(--foreground) 3%, transparent);
+  cursor: col-resize;
+}
+
+.dev-utility-splitter:hover,
+.dev-utility-splitter:focus-visible {
+  background: color-mix(in srgb, var(--primary) 35%, transparent);
+}
+
+.dev-utility-splitter:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+.dev-row-badges {
+  display: inline-flex;
+  flex: none;
+  gap: 0.2rem;
+  align-items: center;
+  margin-inline-start: auto;
+}
+
+.dev-row-badge {
+  padding: 0 0.3rem;
+  border: 1px solid var(--dev-border);
+  border-radius: 999px;
+  color: var(--dev-muted);
+  font-size: 0.56rem;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.dev-row-badge--success {
+  color: var(--success);
+  border-color: color-mix(in srgb, var(--success) 40%, transparent);
+}
+
+.dev-row-badge--failure {
+  color: var(--destructive);
+  border-color: color-mix(in srgb, var(--destructive) 40%, transparent);
+}
+
+.dev-row-badge--progress {
+  color: var(--primary);
+  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
+}
+
+.dev-tree-row__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dev-pane header {
+  cursor: grab;
+}
+
+.dev-pane-grip {
+  color: var(--dev-muted);
+}
+
+.dev-pane-drop-hint {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.dev-pane-drop-hint.dev-pane--drop-row-before,
+.dev-pane-drop-hint.dev-pane--drop-row-after,
+.dev-pane-drop-hint.dev-pane--drop-column-before,
+.dev-pane-drop-hint.dev-pane--drop-column-after {
+  opacity: 1;
+  background: color-mix(in srgb, var(--ring) 8%, transparent);
+}
+
+.dev-pane-drop-hint.dev-pane--drop-row-before {
+  box-shadow: inset 0.2rem 0 0 var(--ring);
+}
+
+.dev-pane-drop-hint.dev-pane--drop-row-after {
+  box-shadow: inset -0.2rem 0 0 var(--ring);
+}
+
+.dev-pane-drop-hint.dev-pane--drop-column-before {
+  box-shadow: inset 0 0.2rem 0 var(--ring);
+}
+
+.dev-pane-drop-hint.dev-pane--drop-column-after {
+  box-shadow: inset 0 -0.2rem 0 var(--ring);
+}
+
 .dev-utility-tabs {
   display: flex;
   flex-direction: column;
@@ -512,65 +643,109 @@
 
 .workspace-frame:has(.dev-workspace--focus) > .global-rail,
 .dev-workspace--focus .dev-sidebar,
-.dev-workspace--focus .dev-utility {
+.dev-workspace--focus .dev-utility,
+.dev-workspace--focus .dev-utility-splitter {
   display: none;
 }
 
-.dev-workspace--focus .dev-workspace__body {
-  grid-template-columns: minmax(0, 1fr);
+.dev-workspace--left-full .dev-sidebar,
+.dev-workspace--left-full .dev-center,
+.dev-workspace--left-full .dev-utility--right,
+.dev-workspace--left-full .dev-utility-splitter {
+  display: none;
 }
 
-.dev-workspace--utility-full .dev-sidebar,
-.dev-workspace--utility-full .dev-center {
-  display: none;
+.dev-workspace--left-full .dev-utility--left {
+  flex: 1 1 auto;
+  width: auto;
+  border-inline-end: 0;
 }
 
-.dev-workspace--utility-full .dev-workspace__body {
-  grid-template-columns: minmax(0, 1fr);
+.dev-workspace--right-full .dev-sidebar,
+.dev-workspace--right-full .dev-center,
+.dev-workspace--right-full .dev-utility--left,
+.dev-workspace--right-full .dev-utility-splitter {
+  display: none;
 }
 
-.dev-workspace--utility-full .dev-utility {
+.dev-workspace--right-full .dev-utility--right {
+  flex: 1 1 auto;
+  width: auto;
   border-inline-start: 0;
 }
 
-.dev-sidebar-toggle,
-.dev-utility-toggle {
+.dev-sidebar-toggle {
   display: none;
 }
 
 @media (max-width: 70rem) {
-  .dev-workspace__body {
-    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
+  .dev-sidebar {
+    width: clamp(12rem, 30vw, 15rem);
   }
 
   .dev-utility {
     position: absolute;
     z-index: 4;
-    inset-block: 3rem 0;
-    inset-inline-end: 0;
+    inset-block: 0;
     width: min(19rem, 78vw);
+    visibility: hidden;
+    transition:
+      transform 160ms ease,
+      visibility 0s linear 160ms;
+  }
+
+  .dev-utility--right {
+    inset-inline-end: 0;
+    transform: translateX(105%);
     box-shadow: -0.5rem 0 2rem color-mix(in srgb, var(--scrim) 12%, transparent);
   }
+
+  .dev-utility--left {
+    inset-inline-start: 0;
+    transform: translateX(-105%);
+    box-shadow: 0.5rem 0 2rem color-mix(in srgb, var(--scrim) 12%, transparent);
+  }
+
+  .dev-utility--open {
+    visibility: visible;
+    transform: translateX(0);
+    transition-delay: 0s;
+  }
+
+  .dev-utility-splitter {
+    display: none;
+  }
 }
 
 @media (max-width: 48rem) {
-  .dev-sidebar-toggle,
-  .dev-utility-toggle {
+  .dev-sidebar-toggle {
     display: inline-grid;
   }
 
-  .dev-toolbar__actions .dev-button {
+  .dev-toolbar__actions .dev-button--secondary {
     display: none;
   }
 
-  .dev-workspace__body {
-    grid-template-columns: minmax(0, 1fr);
+  .dev-toolbar__actions .dev-button--toggle {
+    display: inline-grid;
+    width: 2rem;
+    padding: 0;
+    place-items: center;
+  }
+
+  .dev-toolbar__actions .dev-button--toggle span {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
   }
 
   .dev-sidebar {
     position: absolute;
     z-index: 5;
-    inset-block: 3rem 0;
+    inset-block: 0;
     inset-inline-start: 0;
     width: min(17rem, 84vw);
     visibility: hidden;
@@ -597,21 +772,6 @@
     border-block: 1px solid var(--dev-border);
     border-inline: 0;
   }
-
-  .dev-utility {
-    display: grid;
-    visibility: hidden;
-    transform: translateX(105%);
-    transition:
-      transform 160ms ease,
-      visibility 0s linear 160ms;
-  }
-
-  .dev-utility--open {
-    visibility: visible;
-    transform: translateX(0);
-    transition-delay: 0s;
-  }
 }
 
 @media (pointer: coarse) {

package/src/styles/theme.css

@@ -72,6 +72,62 @@
   --z-dialog: 120;
   --z-menu: 140;
   --z-tooltip: 160;
+  /* Surface glass. The appearance provider resolves the effective surface
+     (opaque/frosted/translucent) and reduced-transparency policy; these
+     declarations are the opaque defaults plus the frost amounts the resolved
+     values modulate. */
+  --surface-alpha: 1;
+  --surface-frost: 0.92;
+  --surface-translucent: 0.8;
+  /* Terminal roles for the default light variant (xterm ANSI, cursor,
+     selection). Non-default variants apply their manifest values inline; the
+     terminal consumes the custom properties so a theme switch updates a live
+     session without remounting. */
+  --terminal-background: #ffffff;
+  --terminal-foreground: #1b1f24;
+  --terminal-cursor: #24292f;
+  --terminal-selection: #b6c7ff;
+  --terminal-ansi-black: #1b1f24;
+  --terminal-ansi-red: #b91c1c;
+  --terminal-ansi-green: #116a2e;
+  --terminal-ansi-yellow: #8a5a1b;
+  --terminal-ansi-blue: #0b57d0;
+  --terminal-ansi-magenta: #a0186f;
+  --terminal-ansi-cyan: #0e7490;
+  --terminal-ansi-white: #57606a;
+  --terminal-ansi-bright-black: #57606a;
+  --terminal-ansi-bright-red: #c94d4d;
+  --terminal-ansi-bright-green: #1f9d4f;
+  --terminal-ansi-bright-yellow: #a9752c;
+  --terminal-ansi-bright-blue: #3b82f6;
+  --terminal-ansi-bright-magenta: #c04a92;
+  --terminal-ansi-bright-cyan: #0891b2;
+  --terminal-ansi-bright-white: #24292f;
+  /* Editor roles (CodeMirror syntax/diff/search) for the default light
+     variant. */
+  --editor-keyword: #0b57d0;
+  --editor-string: #116a2e;
+  --editor-number: #8a5a1b;
+  --editor-comment: #57606a;
+  --editor-function: #a0186f;
+  --editor-variable: #1b1f24;
+  --editor-type: #0e7490;
+  --editor-tag: #b91c1c;
+  --editor-attribute: #8a5a1b;
+  --editor-operator: #1b1f24;
+  --editor-heading: #1b1f24;
+  --editor-link: #0b57d0;
+  --editor-diff-add: #116a2e;
+  --editor-diff-delete: #b91c1c;
+  --editor-diff-hunk: #57606a;
+  --editor-search-match: #8a5a1b;
+  /* Chart series roles. */
+  --chart-1: #0b57d0;
+  --chart-2: #116a2e;
+  --chart-3: #8a5a1b;
+  --chart-4: #a0186f;
+  --chart-5: #0e7490;
+  --chart-6: #57606a;
 }
 
 .dark {
@@ -94,6 +150,72 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
+  /* Terminal/editor/chart roles for the default dark variant. */
+  --terminal-background: #0d1117;
+  --terminal-foreground: #e6edf3;
+  --terminal-cursor: #e6edf3;
+  --terminal-selection: #264f78;
+  --terminal-ansi-black: #2f3742;
+  --terminal-ansi-red: #ff8183;
+  --terminal-ansi-green: #56d364;
+  --terminal-ansi-yellow: #e3b341;
+  --terminal-ansi-blue: #6ca4f8;
+  --terminal-ansi-magenta: #db61a2;
+  --terminal-ansi-cyan: #39c5cf;
+  --terminal-ansi-white: #d5dde5;
+  --terminal-ansi-bright-black: #57606a;
+  --terminal-ansi-bright-red: #ff9494;
+  --terminal-ansi-bright-green: #79dd8a;
+  --terminal-ansi-bright-yellow: #f0c264;
+  --terminal-ansi-bright-blue: #8db9ff;
+  --terminal-ansi-bright-magenta: #e87cb4;
+  --terminal-ansi-bright-cyan: #66d3dc;
+  --terminal-ansi-bright-white: #eef2f6;
+  --editor-keyword: #6ca4f8;
+  --editor-string: #56d364;
+  --editor-number: #e3b341;
+  --editor-comment: #8b949e;
+  --editor-function: #db61a2;
+  --editor-variable: #e6edf3;
+  --editor-type: #39c5cf;
+  --editor-tag: #ff8183;
+  --editor-attribute: #e3b341;
+  --editor-operator: #e6edf3;
+  --editor-heading: #e6edf3;
+  --editor-link: #6ca4f8;
+  --editor-diff-add: #56d364;
+  --editor-diff-delete: #ff8183;
+  --editor-diff-hunk: #8b949e;
+  --editor-search-match: #e3b341;
+  --chart-1: #6ca4f8;
+  --chart-2: #56d364;
+  --chart-3: #e3b341;
+  --chart-4: #db61a2;
+  --chart-5: #39c5cf;
+  --chart-6: #8b949e;
+}
+
+/* Surface glass amounts. The provider resolves the effective surface and the
+   reduced-transparency policy; this media query is the OS-level backstop so a
+   frost amount can never outlive a system Reduce Transparency setting. */
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --surface-alpha: 1;
+  }
+}
+
+/* Appearance picker swatches (see components/theme-swatch.tsx). The dot
+   color itself is runtime token data applied by the component. */
+.theme-swatch {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+.theme-swatch__dot {
+  display: inline-block;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: calc(infinity * 1px);
+  border: 1px solid var(--border);
 }
 
 @layer base {