@tangle-network/sandbox-ui 0.127.4 → 0.128.1

package/dist/styles.css

@@ -31,6 +31,7 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
@@ -485,6 +486,9 @@
   .m-0 {
     margin: 0px;
   }
+  .m-1 {
+    margin: var(--spacing);
+  }
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
@@ -521,6 +525,9 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
+  .my-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
@@ -626,6 +633,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
   .ml-10 {
     margin-left: calc(var(--spacing) * 10);
   }
@@ -686,6 +696,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .inline-grid {
+    display: inline-grid;
+  }
   .table {
     display: table;
   }
@@ -695,6 +708,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .\!size-2 {
+    width: calc(var(--spacing) * 2) !important;
+    height: calc(var(--spacing) * 2) !important;
+  }
   .size-2 {
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
@@ -703,6 +720,10 @@
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
   }
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .size-4 {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -727,6 +748,14 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .size-16 {
+    width: calc(var(--spacing) * 16);
+    height: calc(var(--spacing) * 16);
+  }
+  .size-20 {
+    width: calc(var(--spacing) * 20);
+    height: calc(var(--spacing) * 20);
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -794,6 +823,9 @@
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
   .h-28 {
     height: calc(var(--spacing) * 28);
   }
@@ -821,9 +853,15 @@
   .h-\[18px\] {
     height: 18px;
   }
+  .h-\[22px\] {
+    height: 22px;
+  }
   .h-\[24rem\] {
     height: 24rem;
   }
+  .h-\[26px\] {
+    height: 26px;
+  }
   .h-\[26rem\] {
     height: 26rem;
   }
@@ -845,6 +883,9 @@
   .h-\[72px\] {
     height: 72px;
   }
+  .h-\[100dvh\] {
+    height: 100dvh;
+  }
   .h-\[220px\] {
     height: 220px;
   }
@@ -953,6 +994,9 @@
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
+  .max-h-\[100dvh\] {
+    max-height: 100dvh;
+  }
   .max-h-\[min\(24rem\,calc\(var\(--radix-select-content-available-height\)-2px\)\)\] {
     max-height: min(24rem, calc(var(--radix-select-content-available-height) - 2px));
   }
@@ -1016,6 +1060,9 @@
   .min-h-\[16rem\] {
     min-height: 16rem;
   }
+  .min-h-\[20rem\] {
+    min-height: 20rem;
+  }
   .min-h-\[24rem\] {
     min-height: 24rem;
   }
@@ -1037,6 +1084,9 @@
   .min-h-\[80px\] {
     min-height: 80px;
   }
+  .min-h-\[100dvh\] {
+    min-height: 100dvh;
+  }
   .min-h-\[120px\] {
     min-height: 120px;
   }
@@ -1292,6 +1342,9 @@
   .w-full {
     width: 100%;
   }
+  .w-max {
+    width: max-content;
+  }
   .w-px {
     width: 1px;
   }
@@ -1325,6 +1378,9 @@
   .max-w-\[45\%\] {
     max-width: 45%;
   }
+  .max-w-\[50\%\] {
+    max-width: 50%;
+  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1430,6 +1486,9 @@
   .max-w-\[1100px\] {
     max-width: 1100px;
   }
+  .max-w-\[calc\(100\%-2rem\)\] {
+    max-width: calc(100% - 2rem);
+  }
   .max-w-\[calc\(100vw-2rem\)\] {
     max-width: calc(100vw - 2rem);
   }
@@ -1463,6 +1522,9 @@
   .max-w-xl {
     max-width: var(--container-xl);
   }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .\!min-w-0 {
     min-width: 0px !important;
   }
@@ -1472,12 +1534,18 @@
   .min-w-4 {
     min-width: calc(var(--spacing) * 4);
   }
+  .min-w-8 {
+    min-width: calc(var(--spacing) * 8);
+  }
   .min-w-10 {
     min-width: calc(var(--spacing) * 10);
   }
   .min-w-11 {
     min-width: calc(var(--spacing) * 11);
   }
+  .min-w-12 {
+    min-width: calc(var(--spacing) * 12);
+  }
   .min-w-14 {
     min-width: calc(var(--spacing) * 14);
   }
@@ -1523,6 +1591,9 @@
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
+  .min-w-full {
+    min-width: 100%;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1565,6 +1636,12 @@
   .border-collapse {
     border-collapse: collapse;
   }
+  .origin-\(--radix-popover-content-transform-origin\) {
+    transform-origin: var(--radix-popover-content-transform-origin);
+  }
+  .origin-\(--radix-tooltip-content-transform-origin\) {
+    transform-origin: var(--radix-tooltip-content-transform-origin);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1705,6 +1782,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-content-center {
+    place-content: center;
+  }
   .items-baseline {
     align-items: baseline;
   }
@@ -1934,6 +2014,9 @@
   .rounded-\[3px\] {
     border-radius: 3px;
   }
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
   .rounded-\[5px\] {
     border-radius: 5px;
   }
@@ -2090,6 +2173,9 @@
   .border-\[var\(--border-default\)\] {
     border-color: var(--border-default);
   }
+  .border-\[var\(--border-strong\)\] {
+    border-color: var(--border-strong);
+  }
   .border-\[var\(--border-subtle\)\] {
     border-color: var(--border-subtle);
   }
@@ -2258,6 +2344,9 @@
   .border-input {
     border-color: hsl(var(--input));
   }
+  .border-muted-foreground {
+    border-color: hsl(var(--muted-foreground));
+  }
   .border-primary {
     border-color: hsl(var(--primary));
   }
@@ -3010,6 +3099,9 @@
   .py-\[2px\] {
     padding-block: 2px;
   }
+  .py-\[3px\] {
+    padding-block: 3px;
+  }
   .py-\[var\(--chat-message-py\)\] {
     padding-block: var(--chat-message-py);
   }
@@ -3058,6 +3150,9 @@
   .pr-1 {
     padding-right: var(--spacing);
   }
+  .pr-1\.5 {
+    padding-right: calc(var(--spacing) * 1.5);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -3097,6 +3192,9 @@
   .pl-1 {
     padding-left: var(--spacing);
   }
+  .pl-1\.5 {
+    padding-left: calc(var(--spacing) * 1.5);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -3217,9 +3315,6 @@
   .text-\[15px\] {
     font-size: 15px;
   }
-  .text-\[calc\(var\(--font-size-xs\)-1px\)\] {
-    font-size: calc(var(--font-size-xs) - 1px);
-  }
   .text-\[length\:var\(--font-size-3xl\,1\.875rem\)\] {
     font-size: var(--font-size-3xl,1.875rem);
   }
@@ -3587,6 +3682,9 @@
   .text-card-foreground {
     color: hsl(var(--card-foreground));
   }
+  .text-current {
+    color: currentcolor;
+  }
   .text-destructive {
     color: hsl(var(--destructive));
   }
@@ -3813,6 +3911,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3922,13 +4024,13 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[background-color\,border-color\,color\] {
-    transition-property: background-color,border-color,color;
+  .transition-\[background-color\,border-color\,box-shadow\] {
+    transition-property: background-color,border-color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[background-color\,box-shadow\] {
-    transition-property: background-color,box-shadow;
+  .transition-\[background-color\,border-color\,color\] {
+    transition-property: background-color,border-color,color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -3937,6 +4039,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[box-shadow\] {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[color\,background-color\,border-color\,box-shadow\,transform\,scale\] {
     transition-property: color,background-color,border-color,box-shadow,transform,scale;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3972,6 +4079,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[translate\,background-color\] {
+    transition-property: translate,background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4103,6 +4215,15 @@
       background-color: color-mix(in oklab, hsl(var(--primary)) 30%, transparent);
     }
   }
+  .group-data-\[state\=indeterminate\]\/checkbox\:block:is(:where(.group\/checkbox)[data-state="indeterminate"] *) {
+    display: block;
+  }
+  .group-data-\[state\=indeterminate\]\/checkbox\:hidden:is(:where(.group\/checkbox)[data-state="indeterminate"] *) {
+    display: none;
+  }
+  .group-data-\[state\=open\]\:rotate-90:is(:where(.group)[data-state="open"] *) {
+    rotate: 90deg;
+  }
   .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
     cursor: not-allowed;
   }
@@ -4124,6 +4245,9 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .placeholder\:text-\[var\(--text-dim\)\]::placeholder {
+    color: var(--text-dim);
+  }
   .placeholder\:text-muted-foreground::placeholder {
     color: hsl(var(--muted-foreground));
   }
@@ -4305,6 +4429,9 @@
     .hover\:bg-\[var\(--accent-surface-strong\)\]:hover {
       background-color: var(--accent-surface-strong);
     }
+    .hover\:bg-\[var\(--bg-hover\)\]:hover {
+      background-color: var(--bg-hover);
+    }
     .hover\:bg-\[var\(--bg-hover\,hsl\(var\(--accent\)\)\)\]:hover {
       background-color: var(--bg-hover,hsl(var(--accent)));
     }
@@ -4395,6 +4522,9 @@
         background-color: color-mix(in oklab, var(--color-blue-600) 30%, transparent);
       }
     }
+    .hover\:bg-card:hover {
+      background-color: hsl(var(--card));
+    }
     .hover\:bg-destructive\/5:hover {
       background-color: hsl(var(--destructive));
     }
@@ -4783,8 +4913,35 @@
   .data-\[disabled\]\:opacity-50[data-disabled] {
     opacity: 50%;
   }
-  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
-    color: hsl(var(--muted-foreground));
+  .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
+    height: calc(var(--spacing) * 1.5);
+  }
+  .data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
+    height: 100%;
+  }
+  .data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
+    width: 100%;
+  }
+  .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
+    height: 100%;
+  }
+  .data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
+    min-height: calc(var(--spacing) * 44);
+  }
+  .data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
+    width: calc(var(--spacing) * 1.5);
+  }
+  .data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
+    width: auto;
+  }
+  .data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
+    width: 100%;
+  }
+  .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+  .data-\[placeholder\]\:text-\[var\(--text-dim\)\][data-placeholder] {
+    color: var(--text-dim);
   }
   .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
     --tw-translate-y: var(--spacing);
@@ -4825,12 +4982,24 @@
     --tw-translate-x: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .data-\[state\=checked\]\:border-primary[data-state="checked"] {
+    border-color: hsl(var(--primary));
+  }
+  .data-\[state\=checked\]\:border-transparent[data-state="checked"] {
+    border-color: transparent;
+  }
   .data-\[state\=checked\]\:bg-\[var\(--accent-surface-soft\)\][data-state="checked"] {
     background-color: var(--accent-surface-soft);
   }
   .data-\[state\=checked\]\:bg-\[var\(--accent-surface-strong\)\][data-state="checked"] {
     background-color: var(--accent-surface-strong);
   }
+  .data-\[state\=checked\]\:bg-\[var\(--accent-text\)\][data-state="checked"] {
+    background-color: var(--accent-text);
+  }
+  .data-\[state\=checked\]\:bg-card[data-state="checked"] {
+    background-color: hsl(var(--card));
+  }
   .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
     background-color: hsl(var(--primary));
   }
@@ -4847,6 +5016,13 @@
   .data-\[state\=checked\]\:text-foreground[data-state="checked"] {
     color: hsl(var(--foreground));
   }
+  .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
+    color: hsl(var(--primary-foreground));
+  }
+  .data-\[state\=closed\]\:duration-200[data-state="closed"] {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
   .data-\[state\=inactive\]\:text-muted-foreground[data-state="inactive"] {
     color: hsl(var(--muted-foreground));
   }
@@ -4855,6 +5031,15 @@
       background-color: hsl(var(--muted));
     }
   }
+  .data-\[state\=indeterminate\]\:border-primary[data-state="indeterminate"] {
+    border-color: hsl(var(--primary));
+  }
+  .data-\[state\=indeterminate\]\:bg-primary[data-state="indeterminate"] {
+    background-color: hsl(var(--primary));
+  }
+  .data-\[state\=indeterminate\]\:text-primary-foreground[data-state="indeterminate"] {
+    color: hsl(var(--primary-foreground));
+  }
   .data-\[state\=open\]\:rotate-180[data-state="open"] {
     rotate: 180deg;
   }
@@ -4888,6 +5073,10 @@
   .data-\[state\=open\]\:opacity-100[data-state="open"] {
     opacity: 100%;
   }
+  .data-\[state\=open\]\:duration-300[data-state="open"] {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .data-\[state\=selected\]\:bg-muted\/50[data-state="selected"] {
     background-color: hsl(var(--muted));
     @supports (color: color-mix(in lab, red, red)) {
@@ -4898,8 +5087,14 @@
     --tw-translate-x: 0px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
-    background-color: hsl(var(--input));
+  .data-\[state\=unchecked\]\:border-muted-foreground[data-state="unchecked"] {
+    border-color: hsl(var(--muted-foreground));
+  }
+  .data-\[state\=unchecked\]\:bg-muted-foreground[data-state="unchecked"] {
+    background-color: hsl(var(--muted-foreground));
+  }
+  .data-\[state\=unchecked\]\:bg-transparent[data-state="unchecked"] {
+    background-color: transparent;
   }
   @supports (display:grid) {
     .supports-\[display\:grid\]\:text-white\/50 {
@@ -4981,6 +5176,12 @@
     .sm\:row-start-1 {
       grid-row-start: 1;
     }
+    .sm\:line-clamp-1 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+    }
     .sm\:grid {
       display: grid;
     }
@@ -4993,12 +5194,24 @@
     .sm\:table-cell {
       display: table-cell;
     }
+    .sm\:h-\[680px\] {
+      height: 680px;
+    }
     .sm\:w-48 {
       width: calc(var(--spacing) * 48);
     }
     .sm\:w-auto {
       width: auto;
     }
+    .sm\:max-w-\[820px\] {
+      max-width: 820px;
+    }
+    .sm\:max-w-lg {
+      max-width: var(--container-lg);
+    }
+    .sm\:max-w-sm {
+      max-width: var(--container-sm);
+    }
     .sm\:min-w-40 {
       min-width: calc(var(--spacing) * 40);
     }
@@ -5326,6 +5539,14 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .\[\&_svg\]\:size-8 svg {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+  .\[\&_svg\]\:size-10 svg {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
   .\[\&_svg\]\:h-3\.5 svg {
     height: calc(var(--spacing) * 3.5);
   }
@@ -5355,6 +5576,9 @@
   .\[\&\>\*\]\:min-w-0 > * {
     min-width: 0px;
   }
+  .\[\&\>\*\]\:shrink-0 > * {
+    flex-shrink: 0;
+  }
   .\[\&\>\:is\(ul\,ol\)\:last-child\>li\:last-child\]\:after\:ml-0\.5 > :is(ul, ol):last-child > li:last-child::after {
     content: var(--tw-content);
     margin-left: calc(var(--spacing) * 0.5);
@@ -5471,6 +5695,12 @@
   .\[\&\>span\]\:text-left > span {
     text-align: left;
   }
+  .\[\&\>svg\]\:h-4 > svg {
+    height: calc(var(--spacing) * 4);
+  }
+  .\[\&\>svg\]\:w-4 > svg {
+    width: calc(var(--spacing) * 4);
+  }
   .\[\&\>svg\]\:transition-transform > svg {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5487,18 +5717,21 @@
     --tw-invert: invert(100%);
     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,);
   }
+  [data-tone=neutral] .\[\[data-tone\=neutral\]_\&\]\:text-muted-foreground {
+    color: hsl(var(--muted-foreground));
+  }
 }
 :root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], [data-theme="hospitality"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], .light, .dark {
   color-scheme: dark;
-  --md3-surface: #161616;
-  --md3-surface-dim: #101010;
-  --md3-surface-bright: #3b3b3b;
-  --md3-surface-container-lowest: #101010;
-  --md3-surface-container-low: #242424;
-  --md3-surface-container: #303030;
-  --md3-surface-container-high: #353535;
-  --md3-surface-container-highest: #3b3b3b;
-  --md3-surface-variant: #353535;
+  --md3-surface: #0a0a14;
+  --md3-surface-dim: #060610;
+  --md3-surface-bright: #232238;
+  --md3-surface-container-lowest: #050509;
+  --md3-surface-container-low: #12111f;
+  --md3-surface-container: #191826;
+  --md3-surface-container-high: #221f33;
+  --md3-surface-container-highest: #2c2942;
+  --md3-surface-variant: #221f33;
   --md3-on-surface: #e6e6e6;
   --md3-on-surface-variant: #b5b5b5;
   --md3-primary: #A5B4FC;
@@ -5516,7 +5749,7 @@
   --md3-tertiary: #10B981;
   --md3-tertiary-container: var(--surface-success-bg);
   --md3-outline: #8e8e8e;
-  --md3-outline-variant: #4c4c4c;
+  --md3-outline-variant: #2a293d;
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
   --md3-error-container: #82042b;
@@ -5526,24 +5759,24 @@
   --md3-inverse-primary: #4C3FC5;
   --md3-inverse-on-surface: #000000;
   --md3-surface-tint: #A5B4FC;
-  --hsl-background: 0 0% 8.6275%;
+  --hsl-background: 240 33% 6%;
   --hsl-foreground: 0 0% 90.1961%;
-  --hsl-card: 0 0% 18.8235%;
+  --hsl-card: 244 23% 12%;
   --hsl-card-foreground: 0 0% 90.1961%;
-  --hsl-popover: 0 0% 20.7843%;
+  --hsl-popover: 247 23% 21%;
   --hsl-popover-foreground: 0 0% 90.1961%;
   --hsl-primary: 246 54% 51%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 0 0% 20.7843%;
+  --hsl-secondary: 249 24% 16%;
   --hsl-secondary-foreground: 0 0% 90.1961%;
-  --hsl-muted: 0 0% 20.7843%;
-  --hsl-muted-foreground: 0 0% 70.9804%;
-  --hsl-accent: 0 0% 20.7843%;
+  --hsl-muted: 249 24% 16%;
+  --hsl-muted-foreground: 240 5% 68%;
+  --hsl-accent: 249 24% 16%;
   --hsl-accent-foreground: 0 0% 90.1961%;
   --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 0 0% 29.8039%;
-  --hsl-input: 0 0% 12.1569%;
+  --hsl-border: 243 20% 20%;
+  --hsl-input: 244 29% 9%;
   --hsl-ring: 233 100% 87%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
@@ -5571,7 +5804,7 @@
   --warning: var(--hsl-warning);
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
-  --sidebar-background: 0 0% 6.2745%;
+  --sidebar-background: 244 29% 9%;
   --sidebar-foreground: 0 0% 90.1961%;
   --sidebar-primary: 246 54% 51%;
   --sidebar-primary-foreground: 0 0% 100%;
@@ -5579,10 +5812,10 @@
   --sidebar-accent-foreground: 0 0% 90.1961%;
   --sidebar-border: 0 0% 29.8039%;
   --sidebar-ring: 233 100% 87%;
-  --depth-1: #161616;
-  --depth-2: #303030;
-  --depth-3: #353535;
-  --depth-4: #3b3b3b;
+  --depth-1: #0a0a14;
+  --depth-2: #191826;
+  --depth-3: #221f33;
+  --depth-4: #2c2942;
   --status-running: #10B981;
   --status-creating: #A5B4FC;
   --status-stopped: #FFB800;
@@ -5602,69 +5835,69 @@
   --surface-info-bg: #2d4e67;
   --surface-info-border: #3d7292;
   --surface-info-text: #67cdff;
-  --tone-violet-bg: #4e3a60;
-  --tone-violet-bg-hover: #583d71;
-  --tone-violet-bg-selected: #624080;
+  --tone-violet-bg: #392751;
+  --tone-violet-bg-hover: #432b60;
+  --tone-violet-bg-selected: #4c306c;
   --tone-violet-border: #8457aa;
   --tone-violet-border-selected: #d19dff;
   --tone-violet-text: #ecd9fa;
   --tone-violet-icon: #d19dff;
-  --tone-orange-bg: #583c2b;
-  --tone-orange-bg-hover: #664029;
-  --tone-orange-bg-selected: #724327;
+  --tone-orange-bg: #432823;
+  --tone-orange-bg-hover: #512d22;
+  --tone-orange-bg-selected: #5e3221;
   --tone-orange-border: #a35829;
-  --tone-orange-border-selected: #ff801f;
+  --tone-orange-border-selected: #f76b15;
   --tone-orange-text: #ffe0c2;
-  --tone-orange-icon: #ff801f;
-  --tone-teal-bg: #2a4744;
-  --tone-teal-bg-hover: #28504b;
-  --tone-teal-bg-selected: #265751;
+  --tone-orange-icon: #f76b15;
+  --tone-teal-bg: #18333b;
+  --tone-teal-bg-hover: #173b42;
+  --tone-teal-bg-selected: #174448;
   --tone-teal-border: #207e73;
-  --tone-teal-border-selected: #0eb39e;
+  --tone-teal-border-selected: #12a594;
   --tone-teal-text: #adf0dd;
-  --tone-teal-icon: #0eb39e;
-  --tone-blue-bg: #25455e;
-  --tone-blue-bg-hover: #224c6c;
-  --tone-blue-bg-selected: #1f537b;
+  --tone-teal-icon: #12a594;
+  --tone-blue-bg: #143051;
+  --tone-blue-bg-hover: #123861;
+  --tone-blue-bg-selected: #113e6b;
   --tone-blue-border: #2870bd;
-  --tone-blue-border-selected: #70b8ff;
+  --tone-blue-border-selected: #0090ff;
   --tone-blue-text: #c2e6ff;
-  --tone-blue-icon: #70b8ff;
-  --tone-pink-bg: #5e344f;
-  --tone-pink-bg-hover: #6d3659;
-  --tone-pink-bg-selected: #7b3762;
+  --tone-blue-icon: #0090ff;
+  --tone-pink-bg: #462243;
+  --tone-pink-bg-hover: #55254d;
+  --tone-pink-bg-selected: #612754;
   --tone-pink-border: #a84885;
-  --tone-pink-border-selected: #ff8dcc;
+  --tone-pink-border-selected: #de51a8;
   --tone-pink-text: #fdd1ea;
-  --tone-pink-icon: #ff8dcc;
-  --tone-brown-bg: #494038;
-  --tone-brown-bg-hover: #54473c;
-  --tone-brown-bg-selected: #5c4c3e;
+  --tone-pink-icon: #de51a8;
+  --tone-brown-bg: #372d30;
+  --tone-brown-bg-hover: #413434;
+  --tone-brown-bg-selected: #4a3a37;
   --tone-brown-border: #7c5f46;
-  --tone-brown-border-selected: #dbb594;
+  --tone-brown-border-selected: #ad7f58;
   --tone-brown-text: #f2e1ca;
-  --tone-brown-icon: #dbb594;
-  --tone-cyan-bg: #27464d;
-  --tone-cyan-bg-hover: #234f59;
-  --tone-cyan-bg-selected: #205662;
+  --tone-brown-icon: #ad7f58;
+  --tone-cyan-bg: #143245;
+  --tone-cyan-bg-hover: #133b4e;
+  --tone-cyan-bg-selected: #114358;
   --tone-cyan-border: #11809c;
-  --tone-cyan-border-selected: #23afd0;
+  --tone-cyan-border-selected: #00a2c7;
   --tone-cyan-text: #b6ecf7;
-  --tone-cyan-icon: #23afd0;
-  --tone-lime-bg: #404536;
-  --tone-lime-bg-hover: #444b37;
-  --tone-lime-bg-selected: #495239;
+  --tone-cyan-icon: #00a2c7;
+  --tone-lime-bg: #2b302d;
+  --tone-lime-bg-hover: #32382f;
+  --tone-lime-bg-selected: #384132;
   --tone-lime-border: #577538;
   --tone-lime-border-selected: #bdee63;
   --tone-lime-text: #e3f7ba;
   --tone-lime-icon: #bdee63;
-  --surface-violet-bg: #4e3a60;
+  --surface-violet-bg: #392751;
   --surface-violet-border: #8457aa;
   --surface-violet-text: #d19dff;
-  --surface-orange-bg: #583c2b;
+  --surface-orange-bg: #432823;
   --surface-orange-border: #a35829;
   --surface-orange-text: #ffa057;
-  --surface-teal-bg: #2a4744;
+  --surface-teal-bg: #18333b;
   --surface-teal-border: #207e73;
   --surface-teal-text: #0bd8b6;
   --run-mix-succeeded: #76edb9;
@@ -5689,7 +5922,7 @@
   --accent-surface-soft: rgba(165, 180, 252, 0.07);
   --accent-surface-strong: rgba(76, 63, 197, 0.30);
   --accent-text: #A5B4FC;
-  --bg-root: #161616;
+  --bg-root: #0a0a14;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
@@ -5734,6 +5967,9 @@
   --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow-overlay: 0 2px 6px hsl(var(--hsl-foreground) / 0.1),
     0 16px 40px hsl(var(--hsl-foreground) / 0.16);
+  --scrim: rgb(0 0 0 / 0.4);
+  --scrim-strong: rgb(0 0 0 / 0.72);
+  --on-media: #ffffff;
   --shadow-status-running: none;
   --shadow-status-creating: none;
   --shadow-status-error: none;
@@ -5744,6 +5980,12 @@
   --radius-pill: 999px;
   --radius-full: 999px;
   --radius-composer: 26px;
+  --radius-tag: 4px;
+  --radius-chip: 8px;
+  --radius-field: 12px;
+  --radius-panel: 16px;
+  --radius-cover: 20px;
+  --radius-sheet: 24px;
   --radius: 0.5rem;
   --control-height: 2.25rem;
   --panel-padding: 1rem;
@@ -5822,24 +6064,24 @@
   @supports (color: color-mix(in lab, red, red)) {
     --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
   }
-  --syntax-foreground: #24292f;
-  --syntax-comment: #57606a;
-  --syntax-keyword: #6d28d9;
+  --syntax-foreground: #24243a;
+  --syntax-comment: #6b7280;
+  --syntax-keyword: #7c3aed;
   --syntax-string: #047857;
-  --syntax-function: #1d4ed8;
-  --syntax-number: #92400e;
-  --syntax-meta: #7c3aed;
-  --syntax-variable: #24292f;
-  --syntax-error: #b91c1c;
-  --md3-surface: #eaeaea;
-  --md3-surface-dim: #dadada;
+  --syntax-function: #2563eb;
+  --syntax-number: #b45309;
+  --syntax-meta: #6d28d9;
+  --syntax-variable: #334155;
+  --syntax-error: #dc2626;
+  --md3-surface: #eceef3;
+  --md3-surface-dim: #dcdee6;
   --md3-surface-bright: #ffffff;
   --md3-surface-container-lowest: #ffffff;
-  --md3-surface-container-low: #f7f7f7;
+  --md3-surface-container-low: #f6f7fa;
   --md3-surface-container: #ffffff;
-  --md3-surface-container-high: #f2f2f2;
+  --md3-surface-container-high: #f1f2f7;
   --md3-surface-container-highest: #ffffff;
-  --md3-surface-variant: #f2f2f2;
+  --md3-surface-variant: #f1f2f7;
   --md3-on-surface: #2d2d2d;
   --md3-on-surface-variant: #4c4c4c;
   --md3-primary: #3E349E;
@@ -5857,7 +6099,7 @@
   --md3-tertiary: #065F46;
   --md3-tertiary-container: #D1FAE5;
   --md3-outline: #787878;
-  --md3-outline-variant: #d0d0d0;
+  --md3-outline-variant: #c7c6d6;
   --md3-error: #ba1a1a;
   --md3-error-dim: #93000a;
   --md3-error-container: #ffdad6;
@@ -5867,7 +6109,7 @@
   --md3-inverse-primary: #A5AAFC;
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
-  --hsl-background: 0 0% 91.7647%;
+  --hsl-background: 223 23% 94%;
   --hsl-foreground: 0 0% 17.6471%;
   --hsl-card: 0 0% 100%;
   --hsl-card-foreground: 0 0% 17.6471%;
@@ -5875,23 +6117,23 @@
   --hsl-popover-foreground: 0 0% 17.6471%;
   --hsl-primary: 246 54% 51%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 0 0% 94.902%;
+  --hsl-secondary: 230 27% 96%;
   --hsl-secondary-foreground: 0 0% 17.6471%;
-  --hsl-muted: 0 0% 94.902%;
+  --hsl-muted: 230 27% 96%;
   --hsl-muted-foreground: 0 0% 29.8039%;
-  --hsl-accent: 0 0% 94.902%;
+  --hsl-accent: 230 27% 96%;
   --hsl-accent-foreground: 0 0% 17.6471%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 0 0% 81.5686%;
-  --hsl-input: 0 0% 96.0784%;
+  --hsl-border: 244 16% 81%;
+  --hsl-input: 225 29% 97%;
   --hsl-ring: 246 54% 51%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
   --hsl-info: 212 80% 50%;
-  --depth-1: #eaeaea;
+  --depth-1: #eceef3;
   --depth-2: #ffffff;
-  --depth-3: #f2f2f2;
+  --depth-3: #f1f2f7;
   --depth-4: #ffffff;
   --status-running: #059669;
   --status-creating: #3E349E;
@@ -6000,7 +6242,7 @@
   --mesh-teal: transparent;
   --mesh-violet: transparent;
   --mesh-blue: transparent;
-  --bg-root: #eaeaea;
+  --bg-root: #eceef3;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
@@ -6048,7 +6290,7 @@
   --accent-gradient-strong: linear-gradient(135deg, #4F46E5, #5B4ED4);
   --accent-surface-soft: rgba(76, 63, 198, 0.05);
   --accent-surface-strong: rgba(76, 63, 198, 0.13);
-  --accent-text: #5047eb;
+  --accent-text: #3c32e9;
   --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
@@ -6060,6 +6302,12 @@
   --radius-pill: 999px;
   --radius-full: 999px;
   --radius-composer: 26px;
+  --radius-tag: 4px;
+  --radius-chip: 8px;
+  --radius-field: 12px;
+  --radius-panel: 16px;
+  --radius-cover: 20px;
+  --radius-sheet: 24px;
 }
 :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
   --focus-border: hsl(var(--hsl-ring) / 0.8);
@@ -6189,6 +6437,9 @@
   --text-page: var(--font-size-3xl);
   --text-section: var(--font-size-xl);
   --text-eyebrow: var(--font-size-sm);
+  --color-scrim: var(--scrim);
+  --color-scrim-strong: var(--scrim-strong);
+  --color-on-media: var(--on-media);
   --color-depth-1: var(--depth-1);
   --color-depth-2: var(--depth-2);
   --color-depth-3: var(--depth-3);
@@ -6303,7 +6554,7 @@
   --border-subtle: rgba(60,32,110,0.10);
   --border-default: rgba(60,32,110,0.16);
   --border-hover: rgba(60,32,110,0.30);
-  --accent-text: #6d28d9;
+  --accent-text: #6423c8;
   --brand-primary: #6d28d9;
   --brand-glow: #8b5cf6;
   --text-primary: #160f22;
@@ -6395,7 +6646,7 @@
   --border-subtle: rgba(6,95,70,0.10);
   --border-default: rgba(6,95,70,0.16);
   --border-hover: rgba(6,95,70,0.30);
-  --accent-text: #047857;
+  --accent-text: #03674b;
   --brand-primary: #059669;
   --brand-glow: #10b981;
   --text-primary: #06231a;
@@ -6528,38 +6779,38 @@
   --md3-on-surface-variant: var(--text-muted);
 }
 [data-theme="tangle-dark"] {
-  --hsl-background: 0 0% 8.6275%;
+  --hsl-background: 240 33% 6%;
   --hsl-foreground: 0 0% 90.1961%;
-  --hsl-card: 0 0% 18.8235%;
+  --hsl-card: 244 23% 12%;
   --hsl-card-foreground: 0 0% 90.1961%;
-  --hsl-popover: 0 0% 20.7843%;
+  --hsl-popover: 247 23% 21%;
   --hsl-popover-foreground: 0 0% 90.1961%;
   --hsl-primary: 246 54% 51%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 0 0% 20.7843%;
+  --hsl-secondary: 249 24% 16%;
   --hsl-secondary-foreground: 0 0% 90.1961%;
-  --hsl-muted: 0 0% 20.7843%;
-  --hsl-muted-foreground: 0 0% 70.9804%;
-  --hsl-accent: 0 0% 20.7843%;
+  --hsl-muted: 249 24% 16%;
+  --hsl-muted-foreground: 240 5% 68%;
+  --hsl-accent: 249 24% 16%;
   --hsl-accent-foreground: 0 0% 90.1961%;
   --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 0 0% 29.8039%;
-  --hsl-input: 0 0% 12.1569%;
+  --hsl-border: 243 20% 20%;
+  --hsl-input: 244 29% 9%;
   --hsl-ring: 233 100% 87%;
-  --depth-1: #161616;
-  --depth-2: #303030;
-  --depth-3: #353535;
-  --depth-4: #3b3b3b;
-  --bg-root: #161616;
+  --depth-1: #0a0a14;
+  --depth-2: #191826;
+  --depth-3: #221f33;
+  --depth-4: #2c2942;
+  --bg-root: #0a0a14;
   --bg-card: var(--depth-2);
   --bg-input: hsl(var(--hsl-input));
-  --md3-surface-container-lowest: #101010;
-  --md3-surface-container-low: #242424;
-  --md3-surface-container: #303030;
-  --md3-surface-container-high: #353535;
-  --md3-surface-container-highest: #3b3b3b;
-  --md3-outline-variant: #4c4c4c;
+  --md3-surface-container-lowest: #050509;
+  --md3-surface-container-low: #12111f;
+  --md3-surface-container: #191826;
+  --md3-surface-container-high: #221f33;
+  --md3-surface-container-highest: #2c2942;
+  --md3-outline-variant: #2a293d;
   --border-subtle: rgba(255, 255, 255, 0.10);
   --border-default: rgba(255, 255, 255, 0.16);
   --border-hover: rgba(255, 255, 255, 0.28);
@@ -6603,7 +6854,7 @@
   --border-subtle: rgba(20,20,40,0.08);
   --border-default: rgba(20,20,40,0.14);
   --border-hover: rgba(20,20,40,0.26);
-  --accent-text: #4f46e5;
+  --accent-text: #453be3;
   --brand-primary: #6366f1;
   --brand-glow: #818cf8;
   --text-primary: #15131f;
@@ -6763,7 +7014,7 @@
   --md3-on-surface-variant: #afbbb4;
   --md3-outline: #8a938e;
   --md3-outline-variant: #48504c;
-  --md3-primary: #76b791;
+  --md3-primary: #99caad;
   --md3-primary-dim: #396a52;
   --md3-primary-container: #396a52;
   --md3-on-primary: #11221a;
@@ -6785,7 +7036,7 @@
   --border-hover: rgba(227, 233, 229, 0.28);
   --border-accent: rgba(118, 183, 145, 0.35);
   --border-accent-hover: rgba(118, 183, 145, 0.50);
-  --accent-text: #76b791;
+  --accent-text: #99caad;
   --accent-surface-soft: rgba(118, 183, 145, 0.07);
   --accent-surface-strong: rgba(57, 106, 82, 0.40);
   --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);