@tangle-network/sandbox-ui 0.71.0 → 0.73.0

package/dist/globals.css

@@ -1171,9 +1171,6 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
-  .max-w-\[72\%\] {
-    max-width: 72%;
-  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1686,15 +1683,9 @@
   .rounded-\[4px\] {
     border-radius: 4px;
   }
-  .rounded-\[18px\] {
-    border-radius: 18px;
-  }
   .rounded-\[20px\] {
     border-radius: 20px;
   }
-  .rounded-\[22px\] {
-    border-radius: 22px;
-  }
   .rounded-\[26px\] {
     border-radius: 26px;
   }
@@ -1754,9 +1745,6 @@
     border-bottom-right-radius: var(--radius-sm);
     border-bottom-left-radius: var(--radius-sm);
   }
-  .rounded-br-\[12px\] {
-    border-bottom-right-radius: 12px;
-  }
   .rounded-bl-lg {
     border-bottom-left-radius: var(--radius-lg);
   }
@@ -2099,9 +2087,6 @@
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
-  .bg-\[var\(--bg-card\)\] {
-    background-color: var(--bg-card);
-  }
   .bg-\[var\(--bg-root\)\] {
     background-color: var(--bg-root);
   }
@@ -2129,9 +2114,6 @@
   .bg-\[var\(--brand-glow\)\] {
     background-color: var(--brand-glow);
   }
-  .bg-\[var\(--brand-primary\)\] {
-    background-color: var(--brand-primary);
-  }
   .bg-\[var\(--brand-primary\,hsl\(var\(--primary\)\)\)\] {
     background-color: var(--brand-primary,hsl(var(--primary)));
   }
@@ -2171,6 +2153,12 @@
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
   }
+  .bg-\[var\(--md3-surface-container\)\] {
+    background-color: var(--md3-surface-container);
+  }
+  .bg-\[var\(--md3-surface-container-high\)\] {
+    background-color: var(--md3-surface-container-high);
+  }
   .bg-\[var\(--status-error\,\#ff4d6d\)\]\/15 {
     background-color: var(--status-error,#ff4d6d);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2219,12 +2207,6 @@
   .bg-accent {
     background-color: var(--color-accent);
   }
-  .bg-accent\/20 {
-    background-color: color-mix(in srgb, hsl(var(--accent)) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 20%, 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)) {
@@ -2282,12 +2264,6 @@
   .bg-card {
     background-color: var(--color-card);
   }
-  .bg-card\/40 {
-    background-color: color-mix(in srgb, hsl(var(--card)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-card) 40%, transparent);
-    }
-  }
   .bg-card\/50 {
     background-color: color-mix(in srgb, hsl(var(--card)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2932,10 +2908,6 @@
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
-  .leading-6\.5 {
-    --tw-leading: calc(var(--spacing) * 6.5);
-    line-height: calc(var(--spacing) * 6.5);
-  }
   .leading-7 {
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
@@ -3191,9 +3163,6 @@
   .text-\[var\(--surface-warning-text\)\] {
     color: var(--surface-warning-text);
   }
-  .text-\[var\(--text-dim\)\] {
-    color: var(--text-dim);
-  }
   .text-\[var\(--text-muted\)\] {
     color: var(--text-muted);
   }
@@ -3323,12 +3292,6 @@
   .text-white {
     color: var(--color-white);
   }
-  .text-white\/60 {
-    color: color-mix(in srgb, #fff 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 60%, transparent);
-    }
-  }
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
@@ -3415,10 +3378,6 @@
     --tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(15,23,42,0.08));
     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_20px_rgba\(15\,23\,42\,0\.12\)\] {
-    --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);
@@ -3793,6 +3752,11 @@
       background-color: var(--color-primary);
     }
   }
+  .first\:mt-0 {
+    &:first-child {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
   .last\:border-0 {
     &:last-child {
       border-style: var(--tw-border-style);
@@ -3995,6 +3959,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--md3-surface-container-high\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--md3-surface-container-high);
+      }
+    }
+  }
   .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
     &:hover {
       @media (hover: hover) {
@@ -4043,16 +4014,6 @@
       }
     }
   }
-  .hover\:bg-accent\/25 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--accent)) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 25%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-accent\/30 {
     &:hover {
       @media (hover: hover) {
@@ -5362,7 +5323,7 @@
   --hsl-card-foreground: 240 6% 93%;
   --hsl-popover: 240 5% 17%;
   --hsl-popover-foreground: 240 6% 93%;
-  --hsl-primary: 239 84% 67%;
+  --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
   --hsl-secondary: 240 5% 15%;
   --hsl-secondary-foreground: 240 6% 93%;
@@ -5370,7 +5331,7 @@
   --hsl-muted-foreground: 240 4% 64%;
   --hsl-accent: 240 5% 15%;
   --hsl-accent-foreground: 240 6% 93%;
-  --hsl-destructive: 348 90% 60%;
+  --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
   --hsl-border: 240 5% 16%;
   --hsl-input: 240 5% 15%;
@@ -5395,7 +5356,7 @@
   --destructive: var(--hsl-destructive);
   --destructive-foreground: var(--hsl-destructive-foreground);
   --border: var(--hsl-border);
-  --input: var(--hsl-input);
+  --input: var(--hsl-muted-foreground);
   --ring: var(--hsl-ring);
   --success: var(--hsl-success);
   --warning: var(--hsl-warning);
@@ -5485,10 +5446,10 @@
   --border-hover: rgba(255, 255, 255, 0.12);
   --border-accent: rgba(129, 140, 248, 0.20);
   --border-accent-hover: rgba(129, 140, 248, 0.35);
-  --btn-primary-bg: #6366F1;
-  --btn-primary-hover: #818CF8;
+  --btn-primary-bg: #5B4ED4;
+  --btn-primary-hover: #4F46E5;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #818CF8;
+  --btn-cta-bg: #4F46E5;
   --btn-cta-text: #FFFFFF;
   --code-keyword: #A5AAFC;
   --code-string: #34D399;
@@ -5547,7 +5508,7 @@
   --tool-card-px: 0.75rem;
   --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
-  --syntax-comment: #6B7094;
+  --syntax-comment: #8b8fbc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
   --syntax-function: #6D9FFF;
@@ -6030,6 +5991,91 @@
 [data-sandbox-theme="vault"] .glow-primary:hover {
   box-shadow: none;
 }
+.tangle-prose {
+  color: var(--text-primary);
+  line-height: 1.7;
+}
+.tangle-prose :where(p, ul, ol) {
+  margin: 0;
+}
+.tangle-prose > * + * {
+  margin-top: 0.85em;
+}
+.tangle-prose h1, .tangle-prose h2, .tangle-prose h3, .tangle-prose h4 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.4em;
+  margin-bottom: 0.5em;
+  color: var(--text-primary);
+}
+.tangle-prose h1 {
+  font-size: 1.4em;
+}
+.tangle-prose h2 {
+  font-size: 1.25em;
+}
+.tangle-prose h3 {
+  font-size: 1.1em;
+}
+.tangle-prose ul, .tangle-prose ol {
+  padding-left: 1.4em;
+}
+.tangle-prose li {
+  margin: 0.25em 0;
+}
+.tangle-prose li > ul, .tangle-prose li > ol {
+  margin-top: 0.25em;
+}
+.tangle-prose a {
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tangle-prose blockquote {
+  border-left: 2px solid var(--border-default);
+  padding-left: 0.9em;
+  color: var(--text-muted);
+}
+.tangle-prose hr {
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  margin: 1.2em 0;
+}
+.tangle-prose :not(pre) > code {
+  background: var(--md3-surface-container-high);
+  padding: 0.12em 0.36em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+}
+.tangle-prose pre {
+  margin: 0.85em 0;
+}
+.tangle-prose table {
+  width: 100%;
+  margin: 0.85em 0;
+  font-size: 0.95em;
+  display: block;
+  overflow-x: auto;
+}
+.tangle-prose thead {
+  border-bottom: 1px solid var(--border-default);
+}
+.tangle-prose th {
+  text-align: left;
+  font-weight: 600;
+  padding: 0.5em 0.85em;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.tangle-prose td {
+  padding: 0.5em 0.85em;
+  border-top: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+.tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
+  border-left: 1px solid var(--border-subtle);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/styles.css

@@ -1171,9 +1171,6 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
-  .max-w-\[72\%\] {
-    max-width: 72%;
-  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1686,15 +1683,9 @@
   .rounded-\[4px\] {
     border-radius: 4px;
   }
-  .rounded-\[18px\] {
-    border-radius: 18px;
-  }
   .rounded-\[20px\] {
     border-radius: 20px;
   }
-  .rounded-\[22px\] {
-    border-radius: 22px;
-  }
   .rounded-\[26px\] {
     border-radius: 26px;
   }
@@ -1754,9 +1745,6 @@
     border-bottom-right-radius: var(--radius-sm);
     border-bottom-left-radius: var(--radius-sm);
   }
-  .rounded-br-\[12px\] {
-    border-bottom-right-radius: 12px;
-  }
   .rounded-bl-lg {
     border-bottom-left-radius: var(--radius-lg);
   }
@@ -2099,9 +2087,6 @@
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
-  .bg-\[var\(--bg-card\)\] {
-    background-color: var(--bg-card);
-  }
   .bg-\[var\(--bg-root\)\] {
     background-color: var(--bg-root);
   }
@@ -2129,9 +2114,6 @@
   .bg-\[var\(--brand-glow\)\] {
     background-color: var(--brand-glow);
   }
-  .bg-\[var\(--brand-primary\)\] {
-    background-color: var(--brand-primary);
-  }
   .bg-\[var\(--brand-primary\,hsl\(var\(--primary\)\)\)\] {
     background-color: var(--brand-primary,hsl(var(--primary)));
   }
@@ -2171,6 +2153,12 @@
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
   }
+  .bg-\[var\(--md3-surface-container\)\] {
+    background-color: var(--md3-surface-container);
+  }
+  .bg-\[var\(--md3-surface-container-high\)\] {
+    background-color: var(--md3-surface-container-high);
+  }
   .bg-\[var\(--status-error\,\#ff4d6d\)\]\/15 {
     background-color: var(--status-error,#ff4d6d);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2219,12 +2207,6 @@
   .bg-accent {
     background-color: var(--color-accent);
   }
-  .bg-accent\/20 {
-    background-color: color-mix(in srgb, hsl(var(--accent)) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 20%, 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)) {
@@ -2282,12 +2264,6 @@
   .bg-card {
     background-color: var(--color-card);
   }
-  .bg-card\/40 {
-    background-color: color-mix(in srgb, hsl(var(--card)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-card) 40%, transparent);
-    }
-  }
   .bg-card\/50 {
     background-color: color-mix(in srgb, hsl(var(--card)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2932,10 +2908,6 @@
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
-  .leading-6\.5 {
-    --tw-leading: calc(var(--spacing) * 6.5);
-    line-height: calc(var(--spacing) * 6.5);
-  }
   .leading-7 {
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
@@ -3191,9 +3163,6 @@
   .text-\[var\(--surface-warning-text\)\] {
     color: var(--surface-warning-text);
   }
-  .text-\[var\(--text-dim\)\] {
-    color: var(--text-dim);
-  }
   .text-\[var\(--text-muted\)\] {
     color: var(--text-muted);
   }
@@ -3323,12 +3292,6 @@
   .text-white {
     color: var(--color-white);
   }
-  .text-white\/60 {
-    color: color-mix(in srgb, #fff 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 60%, transparent);
-    }
-  }
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
@@ -3415,10 +3378,6 @@
     --tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(15,23,42,0.08));
     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_20px_rgba\(15\,23\,42\,0\.12\)\] {
-    --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);
@@ -3793,6 +3752,11 @@
       background-color: var(--color-primary);
     }
   }
+  .first\:mt-0 {
+    &:first-child {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
   .last\:border-0 {
     &:last-child {
       border-style: var(--tw-border-style);
@@ -3995,6 +3959,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--md3-surface-container-high\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--md3-surface-container-high);
+      }
+    }
+  }
   .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
     &:hover {
       @media (hover: hover) {
@@ -4043,16 +4014,6 @@
       }
     }
   }
-  .hover\:bg-accent\/25 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--accent)) 25%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 25%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-accent\/30 {
     &:hover {
       @media (hover: hover) {
@@ -5362,7 +5323,7 @@
   --hsl-card-foreground: 240 6% 93%;
   --hsl-popover: 240 5% 17%;
   --hsl-popover-foreground: 240 6% 93%;
-  --hsl-primary: 239 84% 67%;
+  --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
   --hsl-secondary: 240 5% 15%;
   --hsl-secondary-foreground: 240 6% 93%;
@@ -5370,7 +5331,7 @@
   --hsl-muted-foreground: 240 4% 64%;
   --hsl-accent: 240 5% 15%;
   --hsl-accent-foreground: 240 6% 93%;
-  --hsl-destructive: 348 90% 60%;
+  --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
   --hsl-border: 240 5% 16%;
   --hsl-input: 240 5% 15%;
@@ -5395,7 +5356,7 @@
   --destructive: var(--hsl-destructive);
   --destructive-foreground: var(--hsl-destructive-foreground);
   --border: var(--hsl-border);
-  --input: var(--hsl-input);
+  --input: var(--hsl-muted-foreground);
   --ring: var(--hsl-ring);
   --success: var(--hsl-success);
   --warning: var(--hsl-warning);
@@ -5485,10 +5446,10 @@
   --border-hover: rgba(255, 255, 255, 0.12);
   --border-accent: rgba(129, 140, 248, 0.20);
   --border-accent-hover: rgba(129, 140, 248, 0.35);
-  --btn-primary-bg: #6366F1;
-  --btn-primary-hover: #818CF8;
+  --btn-primary-bg: #5B4ED4;
+  --btn-primary-hover: #4F46E5;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #818CF8;
+  --btn-cta-bg: #4F46E5;
   --btn-cta-text: #FFFFFF;
   --code-keyword: #A5AAFC;
   --code-string: #34D399;
@@ -5547,7 +5508,7 @@
   --tool-card-px: 0.75rem;
   --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
-  --syntax-comment: #6B7094;
+  --syntax-comment: #8b8fbc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
   --syntax-function: #6D9FFF;
@@ -6030,6 +5991,91 @@
 [data-sandbox-theme="vault"] .glow-primary:hover {
   box-shadow: none;
 }
+.tangle-prose {
+  color: var(--text-primary);
+  line-height: 1.7;
+}
+.tangle-prose :where(p, ul, ol) {
+  margin: 0;
+}
+.tangle-prose > * + * {
+  margin-top: 0.85em;
+}
+.tangle-prose h1, .tangle-prose h2, .tangle-prose h3, .tangle-prose h4 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.4em;
+  margin-bottom: 0.5em;
+  color: var(--text-primary);
+}
+.tangle-prose h1 {
+  font-size: 1.4em;
+}
+.tangle-prose h2 {
+  font-size: 1.25em;
+}
+.tangle-prose h3 {
+  font-size: 1.1em;
+}
+.tangle-prose ul, .tangle-prose ol {
+  padding-left: 1.4em;
+}
+.tangle-prose li {
+  margin: 0.25em 0;
+}
+.tangle-prose li > ul, .tangle-prose li > ol {
+  margin-top: 0.25em;
+}
+.tangle-prose a {
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tangle-prose blockquote {
+  border-left: 2px solid var(--border-default);
+  padding-left: 0.9em;
+  color: var(--text-muted);
+}
+.tangle-prose hr {
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  margin: 1.2em 0;
+}
+.tangle-prose :not(pre) > code {
+  background: var(--md3-surface-container-high);
+  padding: 0.12em 0.36em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+}
+.tangle-prose pre {
+  margin: 0.85em 0;
+}
+.tangle-prose table {
+  width: 100%;
+  margin: 0.85em 0;
+  font-size: 0.95em;
+  display: block;
+  overflow-x: auto;
+}
+.tangle-prose thead {
+  border-bottom: 1px solid var(--border-default);
+}
+.tangle-prose th {
+  text-align: left;
+  font-weight: 600;
+  padding: 0.5em 0.85em;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.tangle-prose td {
+  padding: 0.5em 0.85em;
+  border-top: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+.tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
+  border-left: 1px solid var(--border-subtle);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/tokens.css

@@ -57,7 +57,7 @@
   --hsl-card-foreground: 240 6% 93%;
   --hsl-popover: 240 5% 17%;       /* #28282d elevated */
   --hsl-popover-foreground: 240 6% 93%;
-  --hsl-primary: 239 84% 67%;
+  --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
   --hsl-secondary: 240 5% 15%;     /* #242428 surface-2 */
   --hsl-secondary-foreground: 240 6% 93%;
@@ -65,7 +65,7 @@
   --hsl-muted-foreground: 240 4% 64%;  /* #9c9ca6 text-muted */
   --hsl-accent: 240 5% 15%;        /* neutral hover (indigo lives in accent-surface-strong) */
   --hsl-accent-foreground: 240 6% 93%;
-  --hsl-destructive: 348 90% 60%;
+  --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
   --hsl-border: 240 5% 16%;        /* soft edge — fill carries separation, not the line */
   --hsl-input: 240 5% 15%;
@@ -92,7 +92,7 @@
   --destructive: var(--hsl-destructive);
   --destructive-foreground: var(--hsl-destructive-foreground);
   --border: var(--hsl-border);
-  --input: var(--hsl-input);
+  --input: var(--hsl-muted-foreground);
   --ring: var(--hsl-ring);
   --success: var(--hsl-success);
   --warning: var(--hsl-warning);
@@ -207,10 +207,10 @@
   --border-accent-hover: rgba(129, 140, 248, 0.35);
 
   /* Buttons */
-  --btn-primary-bg: #6366F1;
-  --btn-primary-hover: #818CF8;
+  --btn-primary-bg: #5B4ED4;
+  --btn-primary-hover: #4F46E5;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #818CF8;
+  --btn-cta-bg: #4F46E5;
   --btn-cta-text: #FFFFFF;
 
   /* Code / runtime syntax */
@@ -288,7 +288,7 @@
   --tool-icon-size: 1.75rem;
 
   /* Syntax highlighting — override per-theme in vault section */
-  --syntax-comment: #6B7094;
+  --syntax-comment: #8b8fbc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
   --syntax-function: #6D9FFF;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.71.0",
+  "version": "0.73.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -123,8 +123,8 @@
   },
   "peerDependencies": {
     "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
-    "@tangle-network/brand": "^0.8.0",
-    "@tangle-network/ui": "^9.0.0",
+    "@tangle-network/brand": "^1.0.0",
+    "@tangle-network/ui": "^11.0.0",
     "@xyflow/react": "^12.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
@@ -178,8 +178,8 @@
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
     "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
-    "@tangle-network/brand": "^0.8.0",
-    "@tangle-network/ui": "^9.0.0",
+    "@tangle-network/brand": "^1.0.0",
+    "@tangle-network/ui": "^11.0.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",