@tangle-network/sandbox-ui 0.123.3 → 0.125.0

package/dist/styles.css

@@ -732,6 +732,14 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
@@ -740,6 +748,10 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
@@ -989,6 +1001,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-6 {
+    min-height: calc(var(--spacing) * 6);
+  }
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
@@ -1367,6 +1382,9 @@
   .max-w-\[140px\] {
     max-width: 140px;
   }
+  .max-w-\[220px\] {
+    max-width: 220px;
+  }
   .max-w-\[320px\] {
     max-width: 320px;
   }
@@ -1932,6 +1950,9 @@
     border-top-width: calc(1px * var(--tw-divide-y-reverse));
     border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   }
+  :where(.divide-\[var\(--border-subtle\)\] > :not(:last-child)) {
+    border-color: var(--border-subtle);
+  }
   :where(.divide-\[var\(--md3-outline-variant\)\] > :not(:last-child)) {
     border-color: var(--md3-outline-variant);
   }
@@ -1991,6 +2012,9 @@
   .rounded-\[4px\] {
     border-radius: 4px;
   }
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
   .rounded-\[20px\] {
     border-radius: 20px;
   }
@@ -2144,6 +2168,9 @@
   .border-\[var\(--border-accent\,transparent\)\] {
     border-color: var(--border-accent,transparent);
   }
+  .border-\[var\(--border-default\)\] {
+    border-color: var(--border-default);
+  }
   .border-\[var\(--border-subtle\)\] {
     border-color: var(--border-subtle);
   }
@@ -2204,15 +2231,60 @@
   .border-\[var\(--surface-success-border\)\] {
     border-color: var(--surface-success-border);
   }
-  .border-\[var\(--surface-teal-border\)\] {
-    border-color: var(--surface-teal-border);
-  }
-  .border-\[var\(--surface-violet-border\)\] {
-    border-color: var(--surface-violet-border);
-  }
   .border-\[var\(--surface-warning-border\)\] {
     border-color: var(--surface-warning-border);
   }
+  .border-\[var\(--text-dim\)\] {
+    border-color: var(--text-dim);
+  }
+  .border-\[var\(--tone-blue-border\)\] {
+    border-color: var(--tone-blue-border);
+  }
+  .border-\[var\(--tone-blue-border-selected\)\] {
+    border-color: var(--tone-blue-border-selected);
+  }
+  .border-\[var\(--tone-brown-border\)\] {
+    border-color: var(--tone-brown-border);
+  }
+  .border-\[var\(--tone-brown-border-selected\)\] {
+    border-color: var(--tone-brown-border-selected);
+  }
+  .border-\[var\(--tone-cyan-border\)\] {
+    border-color: var(--tone-cyan-border);
+  }
+  .border-\[var\(--tone-cyan-border-selected\)\] {
+    border-color: var(--tone-cyan-border-selected);
+  }
+  .border-\[var\(--tone-lime-border\)\] {
+    border-color: var(--tone-lime-border);
+  }
+  .border-\[var\(--tone-lime-border-selected\)\] {
+    border-color: var(--tone-lime-border-selected);
+  }
+  .border-\[var\(--tone-orange-border\)\] {
+    border-color: var(--tone-orange-border);
+  }
+  .border-\[var\(--tone-orange-border-selected\)\] {
+    border-color: var(--tone-orange-border-selected);
+  }
+  .border-\[var\(--tone-pink-border\)\] {
+    border-color: var(--tone-pink-border);
+  }
+  .border-\[var\(--tone-pink-border-selected\)\] {
+    border-color: var(--tone-pink-border-selected);
+  }
+  .border-\[var\(--tone-teal-border\)\] {
+    border-color: var(--tone-teal-border);
+  }
+  .border-\[var\(--tone-teal-border-selected\)\] {
+    border-color: var(--tone-teal-border-selected);
+  }
+  .border-\[var\(--tone-violet-border\)\] {
+    border-color: var(--tone-violet-border);
+  }
+  .border-\[var\(--tone-violet-border-selected\)\] {
+    border-color: var(--tone-violet-border-selected);
+  }
   .border-background {
     border-color: hsl(var(--background));
   }
@@ -2360,6 +2432,12 @@
       background-color: color-mix(in oklch,var(--color-warning,orange) 18%,transparent);
     }
   }
+  .bg-\[color-mix\(in_srgb\,var\(--surface-neutral-bg\)\,var\(--text-primary\)_12\%\)\] {
+    background-color: var(--surface-neutral-bg);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--surface-neutral-bg),var(--text-primary) 12%);
+    }
+  }
   .bg-\[color\:color-mix\(in_srgb\,var\(--bg-card\)_94\%\,transparent\)\] {
     background-color: var(--bg-card);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2375,6 +2453,9 @@
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
+  .bg-\[var\(--bg-card\)\] {
+    background-color: var(--bg-card);
+  }
   .bg-\[var\(--bg-input\)\] {
     background-color: var(--bg-input);
   }
@@ -2483,9 +2564,6 @@
   .bg-\[var\(--surface-success-text\)\] {
     background-color: var(--surface-success-text);
   }
-  .bg-\[var\(--surface-teal-bg\)\] {
-    background-color: var(--surface-teal-bg);
-  }
   .bg-\[var\(--surface-violet-bg\)\] {
     background-color: var(--surface-violet-bg);
   }
@@ -2495,6 +2573,54 @@
   .bg-\[var\(--surface-warning-text\)\] {
     background-color: var(--surface-warning-text);
   }
+  .bg-\[var\(--tone-blue-bg\)\] {
+    background-color: var(--tone-blue-bg);
+  }
+  .bg-\[var\(--tone-blue-bg-selected\)\] {
+    background-color: var(--tone-blue-bg-selected);
+  }
+  .bg-\[var\(--tone-brown-bg\)\] {
+    background-color: var(--tone-brown-bg);
+  }
+  .bg-\[var\(--tone-brown-bg-selected\)\] {
+    background-color: var(--tone-brown-bg-selected);
+  }
+  .bg-\[var\(--tone-cyan-bg\)\] {
+    background-color: var(--tone-cyan-bg);
+  }
+  .bg-\[var\(--tone-cyan-bg-selected\)\] {
+    background-color: var(--tone-cyan-bg-selected);
+  }
+  .bg-\[var\(--tone-lime-bg\)\] {
+    background-color: var(--tone-lime-bg);
+  }
+  .bg-\[var\(--tone-lime-bg-selected\)\] {
+    background-color: var(--tone-lime-bg-selected);
+  }
+  .bg-\[var\(--tone-orange-bg\)\] {
+    background-color: var(--tone-orange-bg);
+  }
+  .bg-\[var\(--tone-orange-bg-selected\)\] {
+    background-color: var(--tone-orange-bg-selected);
+  }
+  .bg-\[var\(--tone-pink-bg\)\] {
+    background-color: var(--tone-pink-bg);
+  }
+  .bg-\[var\(--tone-pink-bg-selected\)\] {
+    background-color: var(--tone-pink-bg-selected);
+  }
+  .bg-\[var\(--tone-teal-bg\)\] {
+    background-color: var(--tone-teal-bg);
+  }
+  .bg-\[var\(--tone-teal-bg-selected\)\] {
+    background-color: var(--tone-teal-bg-selected);
+  }
+  .bg-\[var\(--tone-violet-bg\)\] {
+    background-color: var(--tone-violet-bg);
+  }
+  .bg-\[var\(--tone-violet-bg-selected\)\] {
+    background-color: var(--tone-violet-bg-selected);
+  }
   .bg-accent {
     background-color: hsl(var(--accent));
   }
@@ -3037,6 +3163,9 @@
   .pt-12 {
     padding-top: calc(var(--spacing) * 12);
   }
+  .pr-0\.5 {
+    padding-right: calc(var(--spacing) * 0.5);
+  }
   .pr-1 {
     padding-right: var(--spacing);
   }
@@ -3523,6 +3652,54 @@
   .text-\[var\(--text-secondary\)\] {
     color: var(--text-secondary);
   }
+  .text-\[var\(--tone-blue-icon\)\] {
+    color: var(--tone-blue-icon);
+  }
+  .text-\[var\(--tone-blue-text\)\] {
+    color: var(--tone-blue-text);
+  }
+  .text-\[var\(--tone-brown-icon\)\] {
+    color: var(--tone-brown-icon);
+  }
+  .text-\[var\(--tone-brown-text\)\] {
+    color: var(--tone-brown-text);
+  }
+  .text-\[var\(--tone-cyan-icon\)\] {
+    color: var(--tone-cyan-icon);
+  }
+  .text-\[var\(--tone-cyan-text\)\] {
+    color: var(--tone-cyan-text);
+  }
+  .text-\[var\(--tone-lime-icon\)\] {
+    color: var(--tone-lime-icon);
+  }
+  .text-\[var\(--tone-lime-text\)\] {
+    color: var(--tone-lime-text);
+  }
+  .text-\[var\(--tone-orange-icon\)\] {
+    color: var(--tone-orange-icon);
+  }
+  .text-\[var\(--tone-orange-text\)\] {
+    color: var(--tone-orange-text);
+  }
+  .text-\[var\(--tone-pink-icon\)\] {
+    color: var(--tone-pink-icon);
+  }
+  .text-\[var\(--tone-pink-text\)\] {
+    color: var(--tone-pink-text);
+  }
+  .text-\[var\(--tone-teal-icon\)\] {
+    color: var(--tone-teal-icon);
+  }
+  .text-\[var\(--tone-teal-text\)\] {
+    color: var(--tone-teal-text);
+  }
+  .text-\[var\(--tone-violet-icon\)\] {
+    color: var(--tone-violet-icon);
+  }
+  .text-\[var\(--tone-violet-text\)\] {
+    color: var(--tone-violet-text);
+  }
   .text-\[var\(--x\)\] {
     color: var(--x);
   }
@@ -3897,6 +4074,11 @@
     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-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-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3922,6 +4104,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[opacity\,background-color\] {
+    transition-property: opacity,background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\,box-shadow\] {
     transition-property: opacity,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4103,6 +4290,26 @@
   .placeholder\:text-muted-foreground::placeholder {
     color: hsl(var(--muted-foreground));
   }
+  .before\:absolute::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  .before\:-inset-1\.5::before {
+    content: var(--tw-content);
+    inset: calc(var(--spacing) * -1.5);
+  }
+  .before\:inset-x-0::before {
+    content: var(--tw-content);
+    inset-inline: 0px;
+  }
+  .before\:-inset-y-1::before {
+    content: var(--tw-content);
+    inset-block: calc(var(--spacing) * -1);
+  }
+  .before\:content-\[\'\'\]::before {
+    --tw-content: '';
+    content: var(--tw-content);
+  }
   .after\:absolute::after {
     content: var(--tw-content);
     position: absolute;
@@ -4242,6 +4449,22 @@
     .hover\:\!bg-primary:hover {
       background-color: hsl(var(--primary)) !important;
     }
+    .hover\:bg-\[color-mix\(in_srgb\,currentColor_14\%\,transparent\)\]:hover {
+      background-color: currentColor;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-\[color-mix\(in_srgb\,currentColor_14\%\,transparent\)\]:hover {
+        background-color: color-mix(in srgb,currentColor 14%,transparent);
+      }
+    }
+    .hover\:bg-\[color-mix\(in_srgb\,var\(--surface-neutral-bg\)\,var\(--text-primary\)_6\%\)\]:hover {
+      background-color: var(--surface-neutral-bg);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-\[color-mix\(in_srgb\,var\(--surface-neutral-bg\)\,var\(--text-primary\)_6\%\)\]:hover {
+        background-color: color-mix(in srgb,var(--surface-neutral-bg),var(--text-primary) 6%);
+      }
+    }
     .hover\:bg-\[var\(--accent-surface-soft\)\]:hover {
       background-color: var(--accent-surface-soft);
     }
@@ -4274,6 +4497,30 @@
     .hover\:bg-\[var\(--surface-success-border\)\]:hover {
       background-color: var(--surface-success-border);
     }
+    .hover\:bg-\[var\(--tone-blue-bg-hover\)\]:hover {
+      background-color: var(--tone-blue-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-brown-bg-hover\)\]:hover {
+      background-color: var(--tone-brown-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-cyan-bg-hover\)\]:hover {
+      background-color: var(--tone-cyan-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-lime-bg-hover\)\]:hover {
+      background-color: var(--tone-lime-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-orange-bg-hover\)\]:hover {
+      background-color: var(--tone-orange-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-pink-bg-hover\)\]:hover {
+      background-color: var(--tone-pink-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-teal-bg-hover\)\]:hover {
+      background-color: var(--tone-teal-bg-hover);
+    }
+    .hover\:bg-\[var\(--tone-violet-bg-hover\)\]:hover {
+      background-color: var(--tone-violet-bg-hover);
+    }
     .hover\:bg-accent:hover {
       background-color: hsl(var(--accent));
     }
@@ -4890,9 +5137,15 @@
     }
   }
   @media (width < 40rem) {
+    .max-sm\:order-last {
+      order: 9999;
+    }
     .max-sm\:col-span-2 {
       grid-column: span 2 / span 2;
     }
+    .max-sm\:basis-full {
+      flex-basis: 100%;
+    }
     .max-sm\:border-b {
       border-bottom-style: var(--tw-border-style);
       border-bottom-width: 1px;
@@ -4905,6 +5158,9 @@
       border-left-style: var(--tw-border-style) !important;
       border-left-width: 0px !important;
     }
+    .max-sm\:pl-4 {
+      padding-left: calc(var(--spacing) * 4);
+    }
   }
   @media (width >= 40rem) {
     .sm\:col-span-1 {
@@ -4961,6 +5217,9 @@
     .sm\:flex-row {
       flex-direction: row;
     }
+    .sm\:flex-nowrap {
+      flex-wrap: nowrap;
+    }
     .sm\:flex-wrap {
       flex-wrap: wrap;
     }
@@ -5104,6 +5363,9 @@
     .lg\:flex-1 {
       flex: 1;
     }
+    .lg\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
@@ -5201,6 +5463,12 @@
       }
     }
   }
+  @media (pointer: coarse) {
+    .pointer-coarse\:before\:-inset-y-2\.5::before {
+      content: var(--tw-content);
+      inset-block: calc(var(--spacing) * -2.5);
+    }
+  }
   .\[\&_\[role\=menuitem\]\]\:min-h-10 [role=menuitem] {
     min-height: calc(var(--spacing) * 10);
   }
@@ -5252,10 +5520,22 @@
   .\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }
+  .\[\&_svg\]\:size-3 svg {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+  .\[\&_svg\]\:size-3\.5 svg {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
   .\[\&_svg\]\:size-4 svg {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .\[\&_svg\]\:size-5 svg {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .\[\&_svg\]\:h-3\.5 svg {
     height: calc(var(--spacing) * 3.5);
   }
@@ -5471,20 +5751,7 @@
     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,);
   }
 }
-: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="tangle-dark"],
-[data-theme="tangle-light"],
-.light,
-.dark {
+: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="tangle-dark"], [data-theme="tangle-light"], .light, .dark {
   color-scheme: dark;
   --md3-surface: #161616;
   --md3-surface-dim: #101010;
@@ -5598,15 +5865,71 @@
   --surface-info-bg: #2d4e67;
   --surface-info-border: #3d7292;
   --surface-info-text: #67cdff;
-  --surface-teal-bg: #042f2e;
-  --surface-teal-border: #134e4a;
-  --surface-teal-text: #2dd4bf;
-  --surface-violet-bg: #403d66;
-  --surface-violet-border: #5f58b8;
-  --surface-violet-text: #c9c4ff;
-  --surface-orange-bg: #431407;
-  --surface-orange-border: #7c2d12;
-  --surface-orange-text: #fb923c;
+  --tone-violet-bg: #4e3a60;
+  --tone-violet-bg-hover: #583d71;
+  --tone-violet-bg-selected: #624080;
+  --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-border: #a35829;
+  --tone-orange-border-selected: #ff801f;
+  --tone-orange-text: #ffe0c2;
+  --tone-orange-icon: #ff801f;
+  --tone-teal-bg: #2a4744;
+  --tone-teal-bg-hover: #28504b;
+  --tone-teal-bg-selected: #265751;
+  --tone-teal-border: #207e73;
+  --tone-teal-border-selected: #0eb39e;
+  --tone-teal-text: #adf0dd;
+  --tone-teal-icon: #0eb39e;
+  --tone-blue-bg: #25455e;
+  --tone-blue-bg-hover: #224c6c;
+  --tone-blue-bg-selected: #1f537b;
+  --tone-blue-border: #2870bd;
+  --tone-blue-border-selected: #70b8ff;
+  --tone-blue-text: #c2e6ff;
+  --tone-blue-icon: #70b8ff;
+  --tone-pink-bg: #5e344f;
+  --tone-pink-bg-hover: #6d3659;
+  --tone-pink-bg-selected: #7b3762;
+  --tone-pink-border: #a84885;
+  --tone-pink-border-selected: #ff8dcc;
+  --tone-pink-text: #fdd1ea;
+  --tone-pink-icon: #ff8dcc;
+  --tone-brown-bg: #494038;
+  --tone-brown-bg-hover: #54473c;
+  --tone-brown-bg-selected: #5c4c3e;
+  --tone-brown-border: #7c5f46;
+  --tone-brown-border-selected: #dbb594;
+  --tone-brown-text: #f2e1ca;
+  --tone-brown-icon: #dbb594;
+  --tone-cyan-bg: #27464d;
+  --tone-cyan-bg-hover: #234f59;
+  --tone-cyan-bg-selected: #205662;
+  --tone-cyan-border: #11809c;
+  --tone-cyan-border-selected: #23afd0;
+  --tone-cyan-text: #b6ecf7;
+  --tone-cyan-icon: #23afd0;
+  --tone-lime-bg: #404536;
+  --tone-lime-bg-hover: #444b37;
+  --tone-lime-bg-selected: #495239;
+  --tone-lime-border: #577538;
+  --tone-lime-border-selected: #bdee63;
+  --tone-lime-text: #e3f7ba;
+  --tone-lime-icon: #bdee63;
+  --surface-violet-bg: #4e3a60;
+  --surface-violet-border: #8457aa;
+  --surface-violet-text: #d19dff;
+  --surface-orange-bg: #583c2b;
+  --surface-orange-border: #a35829;
+  --surface-orange-text: #ffa057;
+  --surface-teal-bg: #2a4744;
+  --surface-teal-border: #207e73;
+  --surface-teal-text: #0bd8b6;
   --run-mix-succeeded: #76edb9;
   --run-mix-waiting: #e9b642;
   --run-mix-failed: #e1918e;
@@ -5756,13 +6079,7 @@
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
-[data-sandbox-theme="vault"]:where(:not(.dark)),
-[data-sandbox-theme="dawn"]:where(:not(.dark)),
-[data-theme="light"],
-[data-theme="aubergine-light"],
-[data-theme="arena-light"],
-[data-theme="tangle-light"],
-.light {
+[data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="light"], [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="tangle-light"], .light {
   color-scheme: light;
   --code-header-bg: hsl(var(--hsl-muted));
   @supports (color: color-mix(in lab, red, red)) {
@@ -5862,15 +6179,71 @@
   --surface-info-bg: #f0f9ff;
   --surface-info-border: #bae6fd;
   --surface-info-text: #0369a1;
-  --surface-teal-bg: #f0fdfa;
-  --surface-teal-border: #99f6e4;
-  --surface-teal-text: #0f766e;
-  --surface-violet-bg: #F0EEFF;
-  --surface-violet-border: #C5C0F0;
-  --surface-violet-text: #3E349E;
-  --surface-orange-bg: #fff7ed;
-  --surface-orange-border: #fed7aa;
-  --surface-orange-text: #c2410c;
+  --tone-violet-bg: #f7edfe;
+  --tone-violet-bg-hover: #f2e2fc;
+  --tone-violet-bg-selected: #ead5f9;
+  --tone-violet-border: #e0c4f4;
+  --tone-violet-border-selected: #8e4ec6;
+  --tone-violet-text: #402060;
+  --tone-violet-icon: #8e4ec6;
+  --tone-orange-bg: #ffefd6;
+  --tone-orange-bg-hover: #ffdfb5;
+  --tone-orange-bg-selected: #ffd19a;
+  --tone-orange-border: #ffc182;
+  --tone-orange-border-selected: #cc4e00;
+  --tone-orange-text: #582d1d;
+  --tone-orange-icon: #cc4e00;
+  --tone-teal-bg: #e0f8f3;
+  --tone-teal-bg-hover: #ccf3ea;
+  --tone-teal-bg-selected: #b8eae0;
+  --tone-teal-border: #a1ded2;
+  --tone-teal-border-selected: #008573;
+  --tone-teal-text: #0d3d38;
+  --tone-teal-icon: #008573;
+  --tone-blue-bg: #e6f4fe;
+  --tone-blue-bg-hover: #d5efff;
+  --tone-blue-bg-selected: #c2e5ff;
+  --tone-blue-border: #acd8fc;
+  --tone-blue-border-selected: #0d74ce;
+  --tone-blue-text: #113264;
+  --tone-blue-icon: #0d74ce;
+  --tone-pink-bg: #fee9f5;
+  --tone-pink-bg-hover: #fbdcef;
+  --tone-pink-bg-selected: #f6cee7;
+  --tone-pink-border: #efbfdd;
+  --tone-pink-border-selected: #cf3897;
+  --tone-pink-text: #651249;
+  --tone-pink-icon: #cf3897;
+  --tone-brown-bg: #f6eee7;
+  --tone-brown-bg-hover: #f0e4d9;
+  --tone-brown-bg-selected: #ebdaca;
+  --tone-brown-border: #e4cdb7;
+  --tone-brown-border-selected: #815e46;
+  --tone-brown-text: #3e332e;
+  --tone-brown-icon: #815e46;
+  --tone-cyan-bg: #def7f9;
+  --tone-cyan-bg-hover: #caf1f6;
+  --tone-cyan-bg-selected: #b5e9f0;
+  --tone-cyan-border: #9ddde7;
+  --tone-cyan-border-selected: #107d98;
+  --tone-cyan-text: #0d3c48;
+  --tone-cyan-icon: #107d98;
+  --tone-lime-bg: #eef6d6;
+  --tone-lime-bg-hover: #e2f0bd;
+  --tone-lime-bg-selected: #d3e7a6;
+  --tone-lime-border: #c2da91;
+  --tone-lime-border-selected: #5c7c2f;
+  --tone-lime-text: #37401c;
+  --tone-lime-icon: #5c7c2f;
+  --surface-violet-bg: #f7edfe;
+  --surface-violet-border: #e0c4f4;
+  --surface-violet-text: #8145b5;
+  --surface-orange-bg: #ffefd6;
+  --surface-orange-border: #ffc182;
+  --surface-orange-text: #bc4904;
+  --surface-teal-bg: #e0f8f3;
+  --surface-teal-border: #a1ded2;
+  --surface-teal-text: #017d6d;
   --run-mix-succeeded: #3c9b78;
   --run-mix-waiting: #c16227;
   --run-mix-failed: #cd342f;
@@ -5951,12 +6324,7 @@
   --radius-full: 999px;
   --radius-composer: 26px;
 }
-:root,
-.dark,
-.light,
-[data-sandbox-ui],
-[data-sandbox-theme],
-[data-theme] {
+:root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
   --focus-border: hsl(var(--hsl-ring) / 0.8);
   --focus-halo: hsl(var(--hsl-ring) / 0.18);
   --focus-border-danger: var(--surface-danger-text);
@@ -5983,11 +6351,7 @@
   --chart-tier-a: #8b87f0;
   --chart-tier-s: #b1a9ff;
 }
-[data-sandbox-theme="vault"]:where(:not(.dark)),
-[data-sandbox-theme="dawn"]:where(:not(.dark)),
-[data-theme="light"],
-.light,
-[data-theme$="-light"] {
+[data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
   --chart-accent: hsl(var(--hsl-primary));
   --chart-tier-c: #9b9ef0;
   --chart-tier-b: #7c7fe3;
@@ -5995,12 +6359,7 @@
   --chart-tier-s: #272962;
 }
 @media (prefers-reduced-motion: reduce) {
-  :root,
-  .dark,
-  .light,
-  [data-sandbox-ui],
-  [data-sandbox-theme],
-  [data-theme] {
+  :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
     --duration-instant: 0ms;
     --duration-fast: 0ms;
     --duration-base: 0ms;
@@ -6015,12 +6374,7 @@
     --motion-arrive: var(--duration-arrive) var(--ease-expo);
   }
 }
-:root,
-.dark,
-.light,
-[data-sandbox-ui],
-[data-sandbox-theme],
-[data-theme] {
+:root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
   --text-display: var(--font-size-display);
   --text-hero: var(--font-size-hero);
   --text-page: var(--font-size-3xl);
@@ -6058,9 +6412,7 @@
   --color-fg-muted: var(--text-muted);
   --color-fg-dim: var(--text-dim);
 }
-[data-theme="aubergine-light"],
-[data-theme="arena-light"],
-[data-theme="tangle-light"] {
+[data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="tangle-light"] {
   --hsl-secondary-foreground: 0 0% 10%;
   --surface-neutral-text: #4b5563;
 }
@@ -6436,41 +6788,12 @@
   * {
     border-color: hsl(var(--border));
   }
-  :where(
-      a[href],
-      button,
-      summary,
-      input:is([type="checkbox"], [type="radio"]),
-      [role="button"],
-      [role="checkbox"],
-      [role="link"],
-      [role="menuitem"],
-      [role="option"],
-      [role="radio"],
-      [role="switch"],
-      [role="tab"],
-      [tabindex]:not([tabindex="-1"])
-    ):focus-visible {
+  :where( a[href], button, summary, input:is([type="checkbox"], [type="radio"]), [role="button"], [role="checkbox"], [role="link"], [role="menuitem"], [role="option"], [role="radio"], [role="switch"], [role="tab"], [tabindex]:not([tabindex="-1"]) ):focus-visible {
     outline: 1px solid var(--focus-border);
     outline-offset: 0;
     box-shadow: 0 0 0 4px var(--focus-halo);
   }
-  :where(
-      input:not(
-          [type="button"],
-          [type="checkbox"],
-          [type="color"],
-          [type="file"],
-          [type="hidden"],
-          [type="image"],
-          [type="radio"],
-          [type="range"],
-          [type="reset"],
-          [type="submit"]
-        ),
-      select,
-      textarea
-    ):focus-visible {
+  :where( input:not( [type="button"], [type="checkbox"], [type="color"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"] ), select, textarea ):focus-visible {
     outline: 1px solid var(--focus-border);
     outline-offset: -1px;
     box-shadow: none;
@@ -6484,9 +6807,7 @@
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
     font-family: var(--font-sans);
-    font-feature-settings: "rlig" 1,
-      "calt" 1,
-      "ss01" 1;
+    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
   }
   ::selection {
     background: var(--bg-selection);
@@ -6512,8 +6833,7 @@
   }
 }
 @layer utilities {
-  .text-gradient-sandbox,
-  .text-gradient-brand {
+  .text-gradient-sandbox, .text-gradient-brand {
     background-image: var(--tangle-gradient);
     background-clip: text;
     -webkit-background-clip: text;
@@ -6634,24 +6954,12 @@
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
   .shimmer {
-    background: linear-gradient(
-      90deg,
-      hsl(var(--muted)) 0%,
-      hsl(var(--accent)) 50%,
-      hsl(var(--muted)) 100%
-    );
+    background: linear-gradient( 90deg, hsl(var(--muted)) 0%, hsl(var(--accent)) 50%, hsl(var(--muted)) 100% );
     background-size: 200% 100%;
     animation: shimmer 2s infinite;
   }
   .shimmer-text {
-    background-image: linear-gradient(
-      90deg,
-      hsl(var(--muted-foreground) / 0.5) 0%,
-      hsl(var(--muted-foreground) / 0.5) 40%,
-      hsl(var(--primary)) 50%,
-      hsl(var(--muted-foreground) / 0.5) 60%,
-      hsl(var(--muted-foreground) / 0.5) 100%
-    );
+    background-image: linear-gradient( 90deg, hsl(var(--muted-foreground) / 0.5) 0%, hsl(var(--muted-foreground) / 0.5) 40%, hsl(var(--primary)) 50%, hsl(var(--muted-foreground) / 0.5) 60%, hsl(var(--muted-foreground) / 0.5) 100% );
     background-size: 200% 100%;
     -webkit-background-clip: text;
     background-clip: text;
@@ -6773,12 +7081,10 @@
   }
 }
 @keyframes agent-caret {
-  0%,
-  49% {
+  0%, 49% {
     opacity: 1;
   }
-  50%,
-  100% {
+  50%, 100% {
     opacity: 0;
   }
 }
@@ -6803,12 +7109,7 @@
   animation-delay: calc(min(var(--stagger-index), 8) * var(--stagger-step));
 }
 .agent-shimmer {
-  background: linear-gradient(
-    90deg,
-    hsl(var(--muted-foreground)) 0%,
-    hsl(var(--foreground)) 45%,
-    hsl(var(--muted-foreground)) 60%
-  );
+  background: linear-gradient( 90deg, hsl(var(--muted-foreground)) 0%, hsl(var(--foreground)) 45%, hsl(var(--muted-foreground)) 60% );
   background-size: 250% auto;
   background-clip: text;
   -webkit-background-clip: text;
@@ -6839,9 +7140,7 @@
     --duration-arrive: 1ms;
     --stagger-step: 0ms;
   }
-  *:where(:not([data-motion="essential"], [data-motion="essential"] *)),
-  *:where(:not([data-motion="essential"], [data-motion="essential"] *))::before,
-  *:where(:not([data-motion="essential"], [data-motion="essential"] *))::after {
+  *:where(:not([data-motion="essential"], [data-motion="essential"] *)), *:where(:not([data-motion="essential"], [data-motion="essential"] *))::before, *:where(:not([data-motion="essential"], [data-motion="essential"] *))::after {
     animation-duration: 1ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 1ms !important;