@tangle-network/sandbox-ui 0.123.3 → 0.124.0

package/dist/globals.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);
   }
@@ -5598,15 +5878,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;
@@ -5862,15 +6198,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;

package/dist/{index-v1lfd9oE.d.ts → index-CV-BKrDF.d.ts}

@@ -1,4 +1,4 @@
-import { S as ExposedPort } from "./index-B_70pkX2.js";
+import { S as ExposedPort } from "./index-Qm_yQvZh.js";
 import { _ as RichFileTreeGitStatus, g as RichFileTreeGitEntry } from "./index-B6wKsKV6.js";
 import { a as PreviewReadiness, i as PreviewAccess } from "./embedded-app-view-B_vMTtJn.js";
 import * as React$1 from "react";

package/dist/index-DloDwgbc.d.ts

@@ -0,0 +1,30 @@
+import { ArtifactPane as ArtifactPane$1, ArtifactPaneProps, Avatar as Avatar$1, AvatarFallback as AvatarFallback$1, AvatarImage as AvatarImage$1, Badge as Badge$1, BadgeProps, Button as Button$1, ButtonProps as ButtonProps$1, CATEGORY_TONES, Card as Card$1, CardContent as CardContent$1, CardDescription as CardDescription$1, CardFooter, CardHeader as CardHeader$1, CardTitle as CardTitle$1, CardTitleProps, CategoryTone, Chip, ChipProps, CodeBlock, CodeBlockProps, CopyButton, Dialog as Dialog$1, DialogClose as DialogClose$1, DialogContent as DialogContent$1, DialogDescription as DialogDescription$1, DialogFooter as DialogFooter$1, DialogHeader as DialogHeader$1, DialogOverlay, DialogPortal, DialogTitle as DialogTitle$1, DialogTrigger as DialogTrigger$1, DropZone, DropZoneProps, DropdownMenu as DropdownMenu$1, DropdownMenuCheckboxItem, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuGroup, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuLabel as DropdownMenuLabel$1, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator as DropdownMenuSeparator$1, DropdownMenuShortcut, DropdownMenuSub as DropdownMenuSub$1, DropdownMenuSubContent as DropdownMenuSubContent$1, DropdownMenuSubTrigger as DropdownMenuSubTrigger$1, DropdownMenuTrigger as DropdownMenuTrigger$1, EmptyState as EmptyState$1, EmptyStateProps, FilterField, FilterFieldProps, Heading, HeadingVariant, HeadingVariant as HeadingVariant$1, IconTile, IconTileProps, InlineCode, InlineCodeProps, Input as Input$1, InputProps, Label as Label$1, Metric, MetricProps, MetricStrip, MetricStripProps, PageHeader as PageHeader$1, PageHeaderProps, PageHeaderProps as PageHeaderProps$1, PageShell as PageShell$1, PageShellProps, Progress as Progress$1, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select as Select$1, SelectContent as SelectContent$1, SelectGroup, SelectItem as SelectItem$1, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger as SelectTrigger$1, SelectValue as SelectValue$1, SidebarDropZone, SidebarDropZoneProps, Skeleton as Skeleton$1, SkeletonCard as SkeletonCard$1, SkeletonTable, StatCard as StatCard$1, StatCardProps, StatusPill as StatusPill$1, StatusPillProps as StatusPillProps$1, StatusTone as StatusTone$1, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableProps, TableRow, Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1, Tag, TagProps, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, TextShimmerProps, Textarea as Textarea$1, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Tone, ToneClasses, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, initialsOf, toneFor, useTheme as useTheme$1, useToast } from "@tangle-network/ui/primitives";
+import { TangleKnot as TangleKnot$1 } from "@tangle-network/brand";
+import { ElementType, HTMLAttributes, ReactNode } from "react";
+//#region src/primitives/logo.d.ts
+interface LogoProps {
+  variant?: "sandbox";
+  size?: "sm" | "md" | "lg" | "xl";
+  className?: string;
+  iconOnly?: boolean;
+}
+/** Keep the Sandbox wordmark API while Brand owns the mark and layout. */
+declare function Logo$1({ variant, size, className, iconOnly }: LogoProps): import("react").JSX.Element;
+declare namespace Logo$1 {
+  var displayName: string;
+}
+//#endregion
+//#region src/primitives/heading.d.ts
+/** Preserve the existing public type's required visual role and children.
+ * The binding above remains UI's object, without a local render function.
+ */
+interface HeadingProps extends Omit<HTMLAttributes<HTMLElement>, "role"> {
+  role: HeadingVariant;
+  as?: ElementType;
+  children: ReactNode;
+}
+type SectionTitleProps = Pick<PageHeaderProps, "title" | "description" | "action" | "className">;
+/** Compatibility name for the canonical nested (h2) page header. */
+declare function SectionTitle(props: SectionTitleProps): import("react").JSX.Element;
+//#endregion
+export { FilterField as $, Tabs$1 as $t, DialogOverlay as A, HeadingProps as An, SelectTrigger$1 as At, DropdownMenuItem$1 as B, StatusPillProps$1 as Bt, CopyButton as C, UploadProgressProps as Cn, SelectContent$1 as Ct, DialogDescription$1 as D, toneFor as Dn, SelectScrollDownButton as Dt, DialogContent$1 as E, initialsOf as En, SelectLabel as Et, DropZoneProps as F, TangleKnot$1 as Fn, SkeletonCard$1 as Ft, DropdownMenuSeparator$1 as G, TableBody as Gt, DropdownMenuPortal as H, Switch as Ht, DropdownMenu$1 as I, SkeletonTable as It, DropdownMenuSubContent$1 as J, TableFooter as Jt, DropdownMenuShortcut as K, TableCaption as Kt, DropdownMenuCheckboxItem as L, StatCard$1 as Lt, DialogTitle$1 as M, SectionTitleProps as Mn, SidebarDropZone as Mt, DialogTrigger$1 as N, Logo$1 as Nn, SidebarDropZoneProps as Nt, DialogFooter$1 as O, useTheme$1 as On, SelectScrollUpButton as Ot, DropZone as P, LogoProps as Pn, Skeleton$1 as Pt, EmptyStateProps as Q, TableRow as Qt, DropdownMenuContent$1 as R, StatCardProps as Rt, CodeBlockProps as S, UploadProgress as Sn, Select$1 as St, DialogClose$1 as T, buttonVariants as Tn, SelectItem$1 as Tt, DropdownMenuRadioGroup as U, TONE_CLASSES as Ut, DropdownMenuLabel$1 as V, StatusTone$1 as Vt, DropdownMenuRadioItem as W, Table as Wt, DropdownMenuTrigger$1 as X, TableHeader as Xt, DropdownMenuSubTrigger$1 as Y, TableHead as Yt, EmptyState$1 as Z, TableProps as Zt, CardTitleProps as _, Tone as _n, PageShellProps as _t, AvatarImage$1 as a, TerminalCursor as an, InlineCode as at, ChipProps as b, ToolbarProps as bn, SegmentedControlOption as bt, Button$1 as c, TerminalLine as cn, InputProps as ct, Card$1 as d, Textarea$1 as dn, MetricProps as dt, TabsContent$1 as en, FilterFieldProps as et, CardContent$1 as f, TextareaProps as fn, MetricStrip as ft, CardTitle$1 as g, ToastProvider as gn, PageShell$1 as gt, CardHeader$1 as h, ToastContainer as hn, PageHeaderProps$1 as ht, AvatarFallback$1 as i, TagProps as in, IconTileProps as it, DialogPortal as j, SectionTitle as jn, SelectValue$1 as jt, DialogHeader$1 as k, useToast as kn, SelectSeparator as kt, ButtonProps$1 as l, TextShimmer as ln, Label$1 as lt, CardFooter as m, Toast as mn, PageHeader$1 as mt, ArtifactPaneProps as n, TabsTrigger$1 as nn, HeadingVariant$1 as nt, Badge$1 as o, TerminalDisplay as on, InlineCodeProps as ot, CardDescription$1 as p, ThemeToggle as pn, MetricStripProps as pt, DropdownMenuSub$1 as q, TableCell as qt, Avatar$1 as r, Tag as rn, IconTile as rt, BadgeProps as s, TerminalInput as sn, Input$1 as st, ArtifactPane$1 as t, TabsList$1 as tn, Heading as tt, CATEGORY_TONES as u, TextShimmerProps as un, Metric as ut, CategoryTone as v, ToneClasses as vn, Progress$1 as vt, Dialog$1 as w, badgeVariants as wn, SelectGroup as wt, CodeBlock as x, UploadFile as xn, SegmentedControlProps as xt, Chip as y, Toolbar as yn, SegmentedControl as yt, DropdownMenuGroup as z, StatusPill$1 as zt };