@tangle-network/sandbox-ui 0.45.0 → 0.46.0

package/dist/globals.css

@@ -94,6 +94,31 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-destructive: hsl(var(--destructive));
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+    --color-surface: var(--md3-surface);
+    --color-surface-dim: var(--md3-surface-dim);
+    --color-surface-container-lowest: var(--md3-surface-container-lowest);
+    --color-surface-container-low: var(--md3-surface-container-low);
+    --color-surface-container: var(--md3-surface-container);
+    --color-surface-container-high: var(--md3-surface-container-high);
+    --color-surface-container-highest: var(--md3-surface-container-highest);
   }
 }
 @layer base {
@@ -364,6 +389,9 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-1 {
+    bottom: calc(var(--spacing) * 1);
+  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
@@ -613,6 +641,9 @@
   .table {
     display: table;
   }
+  .table-row {
+    display: table-row;
+  }
   .aspect-\[9\/16\] {
     aspect-ratio: 9/16;
   }
@@ -719,6 +750,9 @@
   .h-\[560px\] {
     height: 560px;
   }
+  .h-\[640px\] {
+    height: 640px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -803,6 +837,12 @@
   .min-h-\[16rem\] {
     min-height: 16rem;
   }
+  .min-h-\[30px\] {
+    min-height: 30px;
+  }
+  .min-h-\[38px\] {
+    min-height: 38px;
+  }
   .min-h-\[42px\] {
     min-height: 42px;
   }
@@ -947,6 +987,9 @@
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
+  .w-60 {
+    width: calc(var(--spacing) * 60);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -1076,6 +1119,9 @@
   .max-w-\[120px\] {
     max-width: 120px;
   }
+  .max-w-\[140px\] {
+    max-width: 140px;
+  }
   .max-w-\[150px\] {
     max-width: 150px;
   }
@@ -1088,6 +1134,9 @@
   .max-w-\[300px\] {
     max-width: 300px;
   }
+  .max-w-\[320px\] {
+    max-width: 320px;
+  }
   .max-w-\[460px\] {
     max-width: 460px;
   }
@@ -1145,6 +1194,9 @@
   .min-w-\[180px\] {
     min-width: 180px;
   }
+  .min-w-\[240px\] {
+    min-width: 240px;
+  }
   .min-w-\[320px\] {
     min-width: 320px;
   }
@@ -1525,6 +1577,16 @@
       border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
+  .divide-\[var\(--md3-outline-variant\)\] {
+    :where(& > :not(:last-child)) {
+      border-color: var(--md3-outline-variant);
+    }
+  }
+  .divide-border {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-border);
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1757,6 +1819,12 @@
   .border-\[var\(--glass-border\)\] {
     border-color: var(--glass-border);
   }
+  .border-\[var\(--md3-outline\)\] {
+    border-color: var(--md3-outline);
+  }
+  .border-\[var\(--md3-outline-variant\)\] {
+    border-color: var(--md3-outline-variant);
+  }
   .border-\[var\(--status-running\)\]\/30 {
     border-color: var(--status-running);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1787,6 +1855,9 @@
   .border-\[var\(--surface-warning-border\)\] {
     border-color: var(--surface-warning-border);
   }
+  .border-background {
+    border-color: var(--color-background);
+  }
   .border-blue-400 {
     border-color: var(--color-blue-400);
   }
@@ -1796,6 +1867,39 @@
       border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
     }
   }
+  .border-border {
+    border-color: var(--color-border);
+  }
+  .border-destructive\/20 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+    }
+  }
+  .border-destructive\/25 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 25%, transparent);
+    }
+  }
+  .border-destructive\/30 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
+    }
+  }
+  .border-destructive\/40 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+    }
+  }
+  .border-destructive\/50 {
+    border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
+    }
+  }
   .border-emerald-500\/30 {
     border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1808,12 +1912,54 @@
       border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
     }
   }
+  .border-foreground {
+    border-color: var(--color-foreground);
+  }
   .border-green-500\/30 {
     border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
     }
   }
+  .border-input {
+    border-color: var(--color-input);
+  }
+  .border-muted-foreground {
+    border-color: var(--color-muted-foreground);
+  }
+  .border-primary {
+    border-color: var(--color-primary);
+  }
+  .border-primary\/10 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    }
+  }
+  .border-primary\/20 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+  }
+  .border-primary\/30 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+    }
+  }
+  .border-primary\/40 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+  }
+  .border-primary\/60 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
+    }
+  }
   .border-red-500\/20 {
     border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1853,9 +1999,18 @@
       border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
     }
   }
+  .border-t-muted-foreground\/30 {
+    border-top-color: color-mix(in srgb, hsl(var(--muted-foreground)) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-top-color: color-mix(in oklab, var(--color-muted-foreground) 30%, transparent);
+    }
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
+  .border-b-primary {
+    border-bottom-color: var(--color-primary);
+  }
   .\!bg-transparent {
     background-color: transparent !important;
   }
@@ -1958,9 +2113,6 @@
       background-color: color-mix(in oklab, var(--code-success) 5%, transparent);
     }
   }
-  .bg-\[var\(--depth-1\,hsl\(var\(--muted\)\)\)\] {
-    background-color: var(--depth-1,hsl(var(--muted)));
-  }
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
   }
@@ -2003,12 +2155,30 @@
   .bg-\[var\(--surface-warning-text\)\] {
     background-color: var(--surface-warning-text);
   }
+  .bg-accent {
+    background-color: var(--color-accent);
+  }
+  .bg-accent\/30 {
+    background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
+    }
+  }
   .bg-amber-500\/10 {
     background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
     }
   }
+  .bg-background {
+    background-color: var(--color-background);
+  }
+  .bg-background\/80 {
+    background-color: color-mix(in srgb, hsl(var(--background)) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
+    }
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -2051,12 +2221,54 @@
       background-color: color-mix(in oklab, var(--color-blue-600) 20%, transparent);
     }
   }
+  .bg-border {
+    background-color: var(--color-border);
+  }
+  .bg-card {
+    background-color: var(--color-card);
+  }
+  .bg-card\/50 {
+    background-color: color-mix(in srgb, hsl(var(--card)) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-card) 50%, transparent);
+    }
+  }
+  .bg-card\/80 {
+    background-color: color-mix(in srgb, hsl(var(--card)) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-card) 80%, transparent);
+    }
+  }
+  .bg-destructive {
+    background-color: var(--color-destructive);
+  }
+  .bg-destructive\/5 {
+    background-color: color-mix(in srgb, hsl(var(--destructive)) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-destructive) 5%, transparent);
+    }
+  }
+  .bg-destructive\/10 {
+    background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+    }
+  }
+  .bg-destructive\/15 {
+    background-color: color-mix(in srgb, hsl(var(--destructive)) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-destructive) 15%, transparent);
+    }
+  }
   .bg-emerald-500\/10 {
     background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
     }
   }
+  .bg-foreground {
+    background-color: var(--color-foreground);
+  }
   .bg-green-400 {
     background-color: var(--color-green-400);
   }
@@ -2069,6 +2281,96 @@
       background-color: color-mix(in oklab, var(--color-green-600) 20%, transparent);
     }
   }
+  .bg-muted {
+    background-color: var(--color-muted);
+  }
+  .bg-muted-foreground {
+    background-color: var(--color-muted-foreground);
+  }
+  .bg-muted-foreground\/40 {
+    background-color: color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
+    }
+  }
+  .bg-muted\/10 {
+    background-color: color-mix(in srgb, hsl(var(--muted)) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 10%, transparent);
+    }
+  }
+  .bg-muted\/20 {
+    background-color: color-mix(in srgb, hsl(var(--muted)) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 20%, transparent);
+    }
+  }
+  .bg-muted\/30 {
+    background-color: color-mix(in srgb, hsl(var(--muted)) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
+    }
+  }
+  .bg-muted\/40 {
+    background-color: color-mix(in srgb, hsl(var(--muted)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
+    }
+  }
+  .bg-muted\/50 {
+    background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+    }
+  }
+  .bg-muted\/55 {
+    background-color: color-mix(in srgb, hsl(var(--muted)) 55%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 55%, transparent);
+    }
+  }
+  .bg-muted\/60 {
+    background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
+    }
+  }
+  .bg-popover {
+    background-color: var(--color-popover);
+  }
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+  .bg-primary\/5 {
+    background-color: color-mix(in srgb, hsl(var(--primary)) 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
+    }
+  }
+  .bg-primary\/10 {
+    background-color: color-mix(in srgb, hsl(var(--primary)) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    }
+  }
+  .bg-primary\/15 {
+    background-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    }
+  }
+  .bg-primary\/20 {
+    background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+  }
+  .bg-primary\/\[0\.04\] {
+    background-color: color-mix(in srgb, hsl(var(--primary)) 4%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 4%, transparent);
+    }
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -2087,6 +2389,33 @@
       background-color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
     }
   }
+  .bg-ring {
+    background-color: var(--color-ring);
+  }
+  .bg-secondary {
+    background-color: var(--color-secondary);
+  }
+  .bg-surface {
+    background-color: var(--color-surface);
+  }
+  .bg-surface-container {
+    background-color: var(--color-surface-container);
+  }
+  .bg-surface-container-high {
+    background-color: var(--color-surface-container-high);
+  }
+  .bg-surface-container-highest {
+    background-color: var(--color-surface-container-highest);
+  }
+  .bg-surface-container-low {
+    background-color: var(--color-surface-container-low);
+  }
+  .bg-surface-container-lowest {
+    background-color: var(--color-surface-container-lowest);
+  }
+  .bg-surface-dim {
+    background-color: var(--color-surface-dim);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -2746,6 +3075,9 @@
   .text-\[var\(--code-error\)\] {
     color: var(--code-error);
   }
+  .text-\[var\(--code-error\,\#FF4D6D\)\] {
+    color: var(--code-error,#FF4D6D);
+  }
   .text-\[var\(--code-function\)\] {
     color: var(--code-function);
   }
@@ -2761,6 +3093,9 @@
   .text-\[var\(--code-success\)\] {
     color: var(--code-success);
   }
+  .text-\[var\(--code-success\,\#10B981\)\] {
+    color: var(--code-success,#10B981);
+  }
   .text-\[var\(--font-size-base\)\] {
     color: var(--font-size-base);
   }
@@ -2818,6 +3153,9 @@
   .text-\[var\(--text-primary\,hsl\(var\(--foreground\)\)\)\] {
     color: var(--text-primary,hsl(var(--foreground)));
   }
+  .text-accent-foreground {
+    color: var(--color-accent-foreground);
+  }
   .text-amber-600 {
     color: var(--color-amber-600);
   }
@@ -2827,27 +3165,96 @@
   .text-blue-500 {
     color: var(--color-blue-500);
   }
+  .text-border {
+    color: var(--color-border);
+  }
+  .text-card-foreground {
+    color: var(--color-card-foreground);
+  }
+  .text-destructive {
+    color: var(--color-destructive);
+  }
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
   .text-emerald-500 {
     color: var(--color-emerald-500);
   }
+  .text-foreground {
+    color: var(--color-foreground);
+  }
+  .text-foreground\/70 {
+    color: color-mix(in srgb, hsl(var(--foreground)) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
+    }
+  }
+  .text-foreground\/80 {
+    color: color-mix(in srgb, hsl(var(--foreground)) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 80%, transparent);
+    }
+  }
   .text-green-400 {
     color: var(--color-green-400);
   }
+  .text-muted-foreground {
+    color: var(--color-muted-foreground);
+  }
+  .text-muted-foreground\/40 {
+    color: color-mix(in srgb, hsl(var(--muted-foreground)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
+    }
+  }
+  .text-muted-foreground\/50 {
+    color: color-mix(in srgb, hsl(var(--muted-foreground)) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
+    }
+  }
+  .text-muted-foreground\/60 {
+    color: color-mix(in srgb, hsl(var(--muted-foreground)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-muted-foreground) 60%, transparent);
+    }
+  }
+  .text-muted-foreground\/70 {
+    color: color-mix(in srgb, hsl(var(--muted-foreground)) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
+    }
+  }
   .text-neutral-400 {
     color: var(--color-neutral-400);
   }
   .text-orange-400 {
     color: var(--color-orange-400);
   }
+  .text-popover-foreground {
+    color: var(--color-popover-foreground);
+  }
+  .text-primary {
+    color: var(--color-primary);
+  }
+  .text-primary-foreground {
+    color: var(--color-primary-foreground);
+  }
+  .text-primary\/70 {
+    color: color-mix(in srgb, hsl(var(--primary)) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-primary) 70%, transparent);
+    }
+  }
   .text-red-200 {
     color: var(--color-red-200);
   }
   .text-red-400 {
     color: var(--color-red-400);
   }
+  .text-secondary-foreground {
+    color: var(--color-secondary-foreground);
+  }
   .text-sky-400 {
     color: var(--color-sky-400);
   }
@@ -2901,6 +3308,12 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .accent-foreground {
+    accent-color: var(--color-foreground);
+  }
+  .accent-primary {
+    accent-color: var(--color-primary);
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -2947,6 +3360,10 @@
     --tw-shadow: 0 8px 20px var(--tw-shadow-color, rgba(15,23,42,0.12));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.45\)\] {
+    --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(0,0,0,0.45));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[var\(--chat-input-shadow\,0_1px_2px_rgba\(15\,23\,42\,0\.05\)\)\] {
     --tw-shadow: var(--chat-input-shadow,0 1px 2px rgba(15,23,42,0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3007,9 +3424,36 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-\[\#ffffff14\] {
+    --tw-ring-color: #ffffff14;
+  }
   .ring-\[var\(--bg-root\)\] {
     --tw-ring-color: var(--bg-root);
   }
+  .ring-\[var\(--md3-outline-variant\)\] {
+    --tw-ring-color: var(--md3-outline-variant);
+  }
+  .ring-border {
+    --tw-ring-color: var(--color-border);
+  }
+  .ring-card {
+    --tw-ring-color: var(--color-card);
+  }
+  .ring-primary\/20 {
+    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+  }
+  .ring-primary\/25 {
+    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
+    }
+  }
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--color-background);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -3021,6 +3465,11 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur {
+    --tw-backdrop-blur: blur(8px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-md {
     --tw-backdrop-blur: blur(var(--blur-md));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -3036,6 +3485,10 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3167,6 +3620,30 @@
       }
     }
   }
+  .group-hover\:border-primary\/40 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+        }
+      }
+    }
+  }
+  .group-hover\:bg-primary {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-primary);
+      }
+    }
+  }
+  .group-hover\:text-primary {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-primary);
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3196,6 +3673,11 @@
       }
     }
   }
+  .group-focus\:bg-primary {
+    &:is(:where(.group):focus *) {
+      background-color: var(--color-primary);
+    }
+  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -3235,6 +3717,11 @@
       font-weight: var(--font-weight-normal);
     }
   }
+  .placeholder\:text-muted-foreground {
+    &::placeholder {
+      color: var(--color-muted-foreground);
+    }
+  }
   .after\:absolute {
     &::after {
       content: var(--tw-content);
@@ -3265,6 +3752,12 @@
       height: 2px;
     }
   }
+  .after\:bg-primary {
+    &::after {
+      content: var(--tw-content);
+      background-color: var(--color-primary);
+    }
+  }
   .last\:border-0 {
     &:last-child {
       border-style: var(--tw-border-style);
@@ -3281,6 +3774,11 @@
       border-color: var(--chat-input-focus-border,var(--border-accent));
     }
   }
+  .focus-within\:border-border {
+    &:focus-within {
+      border-color: var(--color-border);
+    }
+  }
   .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,0_10px_30px_rgba\(15\,23\,42\,0\.08\)\)\] {
     &:focus-within {
       --tw-shadow: var(--chat-input-focus-shadow,0 10px 30px rgba(15,23,42,0.08));
@@ -3324,76 +3822,251 @@
       }
     }
   }
-  .hover\:border-emerald-500\/30 {
+  .hover\:border-\[var\(--md3-outline\)\] {
     &:hover {
       @media (hover: hover) {
-        border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
-        }
+        border-color: var(--md3-outline);
       }
     }
   }
-  .hover\:bg-\[var\(--accent-surface-soft\)\] {
+  .hover\:border-\[var\(--md3-outline-variant\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent-surface-soft);
+        border-color: var(--md3-outline-variant);
       }
     }
   }
-  .hover\:bg-\[var\(--accent-surface-strong\)\] {
+  .hover\:border-accent\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent-surface-strong);
+        border-color: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+        }
       }
     }
   }
-  .hover\:bg-\[var\(--bg-hover\,hsl\(var\(--accent\)\)\)\] {
+  .hover\:border-border {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--bg-hover,hsl(var(--accent)));
+        border-color: var(--color-border);
       }
     }
   }
-  .hover\:bg-\[var\(--btn-primary-hover\)\] {
+  .hover\:border-border\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--btn-primary-hover);
+        border-color: color-mix(in srgb, hsl(var(--border)) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-border) 80%, transparent);
+        }
       }
     }
   }
-  .hover\:bg-\[var\(--code-error\)\]\/24 {
+  .hover\:border-destructive\/30 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--code-error);
+        border-color: color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--code-error) 24%, transparent);
+          border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
         }
       }
     }
   }
-  .hover\:bg-\[var\(--surface-danger-bg\)\] {
+  .hover\:border-emerald-500\/30 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--surface-danger-bg);
+        border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
+        }
       }
     }
   }
-  .hover\:bg-\[var\(--surface-danger-border\)\] {
+  .hover\:border-foreground\/15 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--surface-danger-border);
+        border-color: color-mix(in srgb, hsl(var(--foreground)) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-foreground) 15%, transparent);
+        }
       }
     }
   }
-  .hover\:bg-\[var\(--surface-success-border\)\] {
+  .hover\:border-foreground\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--surface-success-border);
+        border-color: color-mix(in srgb, hsl(var(--foreground)) 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-foreground) 20%, transparent);
+        }
       }
     }
   }
-  .hover\:bg-black\/60 {
+  .hover\:border-primary\/20 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:border-primary\/30 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:border-primary\/40 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:border-primary\/50 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-\[var\(--accent-surface-soft\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent-surface-soft);
+      }
+    }
+  }
+  .hover\:bg-\[var\(--accent-surface-strong\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent-surface-strong);
+      }
+    }
+  }
+  .hover\:bg-\[var\(--bg-hover\,hsl\(var\(--accent\)\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--bg-hover,hsl(var(--accent)));
+      }
+    }
+  }
+  .hover\:bg-\[var\(--btn-primary-hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--btn-primary-hover);
+      }
+    }
+  }
+  .hover\:bg-\[var\(--code-error\)\]\/24 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--code-error);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--code-error) 24%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-\[var\(--surface-danger-bg\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-danger-bg);
+      }
+    }
+  }
+  .hover\:bg-\[var\(--surface-danger-border\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-danger-border);
+      }
+    }
+  }
+  .hover\:bg-\[var\(--surface-success-border\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-success-border);
+      }
+    }
+  }
+  .hover\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-accent);
+      }
+    }
+  }
+  .hover\:bg-accent\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-accent\/35 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--accent)) 35%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-accent) 35%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-accent\/40 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--accent)) 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-accent) 40%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-accent\/45 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--accent)) 45%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-accent) 45%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-accent\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-background {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background);
+      }
+    }
+  }
+  .hover\:bg-black\/60 {
     &:hover {
       @media (hover: hover) {
         background-color: color-mix(in srgb, #000 60%, transparent);
@@ -3413,6 +4086,36 @@
       }
     }
   }
+  .hover\:bg-destructive\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--destructive)) 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-destructive) 5%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-destructive\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-destructive\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--destructive)) 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-emerald-500\/10 {
     &:hover {
       @media (hover: hover) {
@@ -3443,6 +4146,80 @@
       }
     }
   }
+  .hover\:bg-muted {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-muted);
+      }
+    }
+  }
+  .hover\:bg-muted\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-muted\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--muted)) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-primary {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary);
+      }
+    }
+  }
+  .hover\:bg-primary\/15 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-primary\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-primary\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-primary\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-red-600\/30 {
     &:hover {
       @media (hover: hover) {
@@ -3460,6 +4237,20 @@
       }
     }
   }
+  .hover\:bg-surface-container-high {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-surface-container-high);
+      }
+    }
+  }
+  .hover\:bg-surface-container-highest {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-surface-container-highest);
+      }
+    }
+  }
   .hover\:bg-transparent {
     &:hover {
       @media (hover: hover) {
@@ -3467,6 +4258,16 @@
       }
     }
   }
+  .hover\:bg-white\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-yellow-600\/30 {
     &:hover {
       @media (hover: hover) {
@@ -3491,6 +4292,27 @@
       }
     }
   }
+  .hover\:text-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-accent-foreground);
+      }
+    }
+  }
+  .hover\:text-destructive {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-destructive);
+      }
+    }
+  }
+  .hover\:text-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-foreground);
+      }
+    }
+  }
   .hover\:text-green-600 {
     &:hover {
       @media (hover: hover) {
@@ -3498,6 +4320,30 @@
       }
     }
   }
+  .hover\:text-primary {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-primary);
+      }
+    }
+  }
+  .hover\:text-primary-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-primary-foreground);
+      }
+    }
+  }
+  .hover\:text-primary\/70 {
+    &:hover {
+      @media (hover: hover) {
+        color: color-mix(in srgb, hsl(var(--primary)) 70%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-primary) 70%, transparent);
+        }
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -3559,11 +4405,66 @@
       border-color: var(--border-accent-hover);
     }
   }
+  .focus\:bg-accent {
+    &:focus {
+      background-color: var(--color-accent);
+    }
+  }
+  .focus\:bg-accent\/40 {
+    &:focus {
+      background-color: color-mix(in srgb, hsl(var(--accent)) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-accent) 40%, transparent);
+      }
+    }
+  }
+  .focus\:bg-accent\/50 {
+    &:focus {
+      background-color: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+      }
+    }
+  }
+  .focus\:bg-destructive\/10 {
+    &:focus {
+      background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      }
+    }
+  }
+  .focus\:bg-muted\/50 {
+    &:focus {
+      background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      }
+    }
+  }
+  .focus\:bg-primary\/15 {
+    &:focus {
+      background-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+      }
+    }
+  }
   .focus\:text-\[var\(--surface-danger-text\)\] {
     &:focus {
       color: var(--surface-danger-text);
     }
   }
+  .focus\:text-destructive {
+    &:focus {
+      color: var(--color-destructive);
+    }
+  }
+  .focus\:text-foreground {
+    &:focus {
+      color: var(--color-foreground);
+    }
+  }
   .focus\:text-red-400 {
     &:focus {
       color: var(--color-red-400);
@@ -3597,6 +4498,32 @@
       --tw-ring-color: var(--surface-danger-border);
     }
   }
+  .focus\:ring-primary {
+    &:focus {
+      --tw-ring-color: var(--color-primary);
+    }
+  }
+  .focus\:ring-primary\/30 {
+    &:focus {
+      --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+      }
+    }
+  }
+  .focus\:ring-primary\/40 {
+    &:focus {
+      --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      }
+    }
+  }
+  .focus\:ring-ring {
+    &:focus {
+      --tw-ring-color: var(--color-ring);
+    }
+  }
   .focus\:ring-offset-0 {
     &:focus {
       --tw-ring-offset-width: 0px;
@@ -3620,6 +4547,22 @@
       border-color: var(--border-accent);
     }
   }
+  .focus-visible\:border-primary\/50 {
+    &:focus-visible {
+      border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+      }
+    }
+  }
+  .focus-visible\:bg-primary\/40 {
+    &:focus-visible {
+      background-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      }
+    }
+  }
   .focus-visible\:bg-transparent {
     &:focus-visible {
       background-color: transparent;
@@ -3660,12 +4603,38 @@
       }
     }
   }
+  .focus-visible\:ring-primary\/20 {
+    &:focus-visible {
+      --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      }
+    }
+  }
+  .focus-visible\:ring-primary\/60 {
+    &:focus-visible {
+      --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
+      }
+    }
+  }
+  .focus-visible\:ring-ring {
+    &:focus-visible {
+      --tw-ring-color: var(--color-ring);
+    }
+  }
   .focus-visible\:ring-offset-2 {
     &:focus-visible {
       --tw-ring-offset-width: 2px;
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .focus-visible\:ring-offset-background {
+    &:focus-visible {
+      --tw-ring-offset-color: var(--color-background);
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
@@ -3777,6 +4746,31 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=active\]\:border-primary {
+    &[data-state="active"] {
+      border-color: var(--color-primary);
+    }
+  }
+  .data-\[state\=active\]\:bg-background {
+    &[data-state="active"] {
+      background-color: var(--color-background);
+    }
+  }
+  .data-\[state\=active\]\:bg-primary {
+    &[data-state="active"] {
+      background-color: var(--color-primary);
+    }
+  }
+  .data-\[state\=active\]\:text-foreground {
+    &[data-state="active"] {
+      color: var(--color-foreground);
+    }
+  }
+  .data-\[state\=active\]\:text-primary-foreground {
+    &[data-state="active"] {
+      color: var(--color-primary-foreground);
+    }
+  }
   .data-\[state\=active\]\:shadow-sm {
     &[data-state="active"] {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -3794,6 +4788,11 @@
       background-color: var(--accent-surface-soft);
     }
   }
+  .data-\[state\=checked\]\:bg-primary {
+    &[data-state="checked"] {
+      background-color: var(--color-primary);
+    }
+  }
   .data-\[state\=checked\]\:text-\[var\(--accent-text\)\] {
     &[data-state="checked"] {
       color: var(--accent-text);
@@ -3804,17 +4803,77 @@
       color: var(--brand-primary);
     }
   }
+  .data-\[state\=inactive\]\:text-muted-foreground {
+    &[data-state="inactive"] {
+      color: var(--color-muted-foreground);
+    }
+  }
+  .data-\[state\=inactive\]\:hover\:bg-muted {
+    &[data-state="inactive"] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+    }
+  }
   .data-\[state\=open\]\:rotate-180 {
     &[data-state="open"] {
       rotate: 180deg;
     }
   }
+  .data-\[state\=open\]\:border-\[var\(--md3-outline\)\] {
+    &[data-state="open"] {
+      border-color: var(--md3-outline);
+    }
+  }
+  .data-\[state\=open\]\:border-\[var\(--md3-outline-variant\)\] {
+    &[data-state="open"] {
+      border-color: var(--md3-outline-variant);
+    }
+  }
+  .data-\[state\=open\]\:bg-accent {
+    &[data-state="open"] {
+      background-color: var(--color-accent);
+    }
+  }
+  .data-\[state\=open\]\:bg-muted\/50 {
+    &[data-state="open"] {
+      background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      }
+    }
+  }
+  .data-\[state\=open\]\:bg-surface-container-high {
+    &[data-state="open"] {
+      background-color: var(--color-surface-container-high);
+    }
+  }
+  .data-\[state\=open\]\:text-muted-foreground {
+    &[data-state="open"] {
+      color: var(--color-muted-foreground);
+    }
+  }
+  .data-\[state\=selected\]\:bg-muted\/50 {
+    &[data-state="selected"] {
+      background-color: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      }
+    }
+  }
   .data-\[state\=unchecked\]\:translate-x-0 {
     &[data-state="unchecked"] {
       --tw-translate-x: calc(var(--spacing) * 0);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=unchecked\]\:bg-input {
+    &[data-state="unchecked"] {
+      background-color: var(--color-input);
+    }
+  }
   .max-lg\:hidden {
     @media (width < 64rem) {
       display: none;
@@ -3850,11 +4909,6 @@
       flex-direction: row;
     }
   }
-  .sm\:flex-nowrap {
-    @media (width >= 40rem) {
-      flex-wrap: nowrap;
-    }
-  }
   .sm\:items-center {
     @media (width >= 40rem) {
       align-items: center;
@@ -4062,11 +5116,21 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&_svg\]\:h-3\.5 {
+    & svg {
+      height: calc(var(--spacing) * 3.5);
+    }
+  }
   .\[\&_svg\]\:h-\[18px\] {
     & svg {
       height: 18px;
     }
   }
+  .\[\&_svg\]\:w-3\.5 {
+    & svg {
+      width: calc(var(--spacing) * 3.5);
+    }
+  }
   .\[\&_svg\]\:w-\[18px\] {
     & svg {
       width: 18px;
@@ -4099,6 +5163,11 @@
       border-radius: calc(infinity * 1px);
     }
   }
+  .\[\&\:\:-moz-range-track\]\:bg-border {
+    &::-moz-range-track {
+      background-color: var(--color-border);
+    }
+  }
   .\[\&\:\:-webkit-slider-runnable-track\]\:h-1\.5 {
     &::-webkit-slider-runnable-track {
       height: calc(var(--spacing) * 1.5);
@@ -4109,6 +5178,11 @@
       border-radius: calc(infinity * 1px);
     }
   }
+  .\[\&\:\:-webkit-slider-runnable-track\]\:bg-border {
+    &::-webkit-slider-runnable-track {
+      background-color: var(--color-border);
+    }
+  }
   .\[\&\:\:-webkit-slider-thumb\]\:-mt-\[5px\] {
     &::-webkit-slider-thumb {
       margin-top: calc(5px * -1);
@@ -4140,6 +5214,16 @@
       border-width: 2px;
     }
   }
+  .\[\&\:\:-webkit-slider-thumb\]\:border-primary-foreground {
+    &::-webkit-slider-thumb {
+      border-color: var(--color-primary-foreground);
+    }
+  }
+  .\[\&\:\:-webkit-slider-thumb\]\:bg-primary {
+    &::-webkit-slider-thumb {
+      background-color: var(--color-primary);
+    }
+  }
   .\[\&\:\:-webkit-slider-thumb\]\:shadow-sm {
     &::-webkit-slider-thumb {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -4586,6 +5670,23 @@
   --radius-full: 999px;
   --radius-composer: 26px;
 }
+.sandbox-tree-surface {
+  --trees-bg-override: var(--md3-surface-container-lowest);
+  --trees-bg-muted-override: var(--md3-surface-container-low);
+  --trees-search-bg-override: var(--md3-surface-container);
+  --trees-input-bg-override: var(--md3-surface-container);
+  --trees-hover-bg-override: var(--md3-surface-container-high);
+  --trees-selected-bg-override: hsl(var(--primary) / 0.16);
+  --trees-selected-fg-override: hsl(var(--foreground));
+  --trees-fg-override: hsl(var(--foreground));
+  --trees-fg-muted-override: hsl(var(--muted-foreground));
+  --trees-muted-fg-override: hsl(var(--muted-foreground));
+  --trees-search-fg-override: hsl(var(--foreground));
+  --trees-border-color-override: var(--md3-outline-variant);
+  --trees-indent-guide-bg-override: var(--md3-outline-variant);
+  --trees-accent-override: hsl(var(--primary));
+  --trees-focus-ring-color-override: hsl(var(--primary) / 0.4);
+}
 @layer base {
   :root {
     --sandbox: var(--primary);
@@ -4638,29 +5739,29 @@
     box-shadow: none;
   }
   .glass-card {
-    background: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
+    background: var(--md3-surface-container);
+    border: 1px solid var(--md3-outline-variant);
     transition: border-color var(--transition-default), box-shadow var(--transition-default);
   }
   .glass-card:hover {
-    border-color: hsl(var(--border));
+    border-color: var(--md3-outline-variant);
   }
   .glass-card-strong {
-    background: hsl(var(--muted));
-    border: 1px solid hsl(var(--border));
+    background: var(--md3-surface-container-high);
+    border: 1px solid var(--md3-outline-variant);
   }
   .glass-panel {
-    background: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
+    background: var(--md3-surface-container);
+    border: 1px solid var(--md3-outline-variant);
     box-shadow: var(--shadow-card);
   }
   .glass-panel-heavy {
-    background: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
+    background: var(--md3-surface-container-high);
+    border: 1px solid var(--md3-outline-variant);
     box-shadow: var(--shadow-card);
   }
   .glass-panel:hover {
-    border-color: hsl(var(--border));
+    border-color: var(--md3-outline-variant);
   }
   .glow-primary {
     box-shadow: none;
@@ -4698,8 +5799,8 @@
     border-radius: 0 4px 4px 0;
   }
   .glass {
-    background-color: var(--depth-2);
-    border: 1px solid var(--border-subtle);
+    background-color: var(--md3-surface-container);
+    border: 1px solid var(--md3-outline-variant);
   }
   .bg-mesh {
     position: relative;
@@ -4822,20 +5923,20 @@
   }
 }
 [data-sandbox-theme="vault"] .glass-panel {
-  background: hsl(var(--card));
+  background: var(--md3-surface-container);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
-  border-color: hsl(var(--border));
+  border-color: var(--md3-outline-variant);
   box-shadow: var(--shadow-card);
 }
 [data-sandbox-theme="vault"] .glass-panel:hover {
-  border-color: hsl(var(--foreground) / 0.15);
+  border-color: var(--md3-outline);
 }
 [data-sandbox-theme="vault"] .glass-panel-heavy {
-  background: hsl(var(--card));
+  background: var(--md3-surface-container-high);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
-  border-color: hsl(var(--border));
+  border-color: var(--md3-outline-variant);
   box-shadow: var(--shadow-card);
 }
 [data-sandbox-theme="vault"] .glow-primary {