@tangle-network/sandbox-ui 0.113.4 → 0.113.6

package/dist/globals.css

@@ -392,6 +392,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .right-full {
+    right: 100%;
+  }
   .-bottom-0\.5 {
     bottom: calc(var(--spacing) * -0.5);
   }
@@ -473,9 +476,27 @@
   .z-\[100\] {
     z-index: 100;
   }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
   .col-span-12 {
     grid-column: span 12 / span 12;
   }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
+  .col-start-2 {
+    grid-column-start: 2;
+  }
+  .row-start-1 {
+    grid-row-start: 1;
+  }
+  .row-start-2 {
+    grid-row-start: 2;
+  }
+  .row-start-3 {
+    grid-row-start: 3;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -500,9 +521,15 @@
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
+  .m-auto {
+    margin: auto;
+  }
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
+  .-mx-3 {
+    margin-inline: calc(var(--spacing) * -3);
+  }
   .mx-1 {
     margin-inline: var(--spacing);
   }
@@ -527,9 +554,6 @@
   .my-8 {
     margin-block: calc(var(--spacing) * 8);
   }
-  .-mt-0\.5 {
-    margin-top: calc(var(--spacing) * -0.5);
-  }
   .-mt-10 {
     margin-top: calc(var(--spacing) * -10);
   }
@@ -548,6 +572,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-2\.5 {
+    margin-top: calc(var(--spacing) * 2.5);
+  }
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -560,9 +587,6 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
-  .mt-\[calc\(\(2\.5rem-var\(--timeline-dot-size\)\)\/2\)\] {
-    margin-top: calc((2.5rem - var(--timeline-dot-size)) / 2);
-  }
   .mt-auto {
     margin-top: auto;
   }
@@ -796,9 +820,18 @@
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
+  .h-72 {
+    height: calc(var(--spacing) * 72);
+  }
   .h-80 {
     height: calc(var(--spacing) * 80);
   }
+  .h-\[1\.375rem\] {
+    height: 1.375rem;
+  }
+  .h-\[1em\] {
+    height: 1em;
+  }
   .h-\[3px\] {
     height: 3px;
   }
@@ -826,9 +859,6 @@
   .h-\[34rem\] {
     height: 34rem;
   }
-  .h-\[70vh\] {
-    height: 70vh;
-  }
   .h-\[72\%\] {
     height: 72%;
   }
@@ -838,21 +868,42 @@
   .h-\[380px\] {
     height: 380px;
   }
+  .h-\[420px\] {
+    height: 420px;
+  }
+  .h-\[450px\] {
+    height: 450px;
+  }
+  .h-\[460px\] {
+    height: 460px;
+  }
   .h-\[480px\] {
     height: 480px;
   }
   .h-\[500px\] {
     height: 500px;
   }
+  .h-\[550px\] {
+    height: 550px;
+  }
   .h-\[560px\] {
     height: 560px;
   }
+  .h-\[580px\] {
+    height: 580px;
+  }
   .h-\[620px\] {
     height: 620px;
   }
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[650px\] {
+    height: 650px;
+  }
+  .h-\[680px\] {
+    height: 680px;
+  }
   .h-\[720px\] {
     height: 720px;
   }
@@ -868,9 +919,6 @@
   .h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
-  .h-\[var\(--timeline-dot-size\)\] {
-    height: var(--timeline-dot-size);
-  }
   .h-\[var\(--timeline-dot-size\,0\.5rem\)\] {
     height: var(--timeline-dot-size,0.5rem);
   }
@@ -922,15 +970,24 @@
   .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
+  .max-h-full {
+    max-height: 100%;
+  }
   .min-h-0 {
     min-height: 0px;
   }
   .min-h-8 {
     min-height: calc(var(--spacing) * 8);
   }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
   .min-h-24 {
     min-height: calc(var(--spacing) * 24);
   }
+  .min-h-56 {
+    min-height: calc(var(--spacing) * 56);
+  }
   .min-h-\[2px\] {
     min-height: 2px;
   }
@@ -952,6 +1009,9 @@
   .min-h-\[16rem\] {
     min-height: 16rem;
   }
+  .min-h-\[24rem\] {
+    min-height: 24rem;
+  }
   .min-h-\[30px\] {
     min-height: 30px;
   }
@@ -997,6 +1057,9 @@
   .w-0 {
     width: 0px;
   }
+  .w-0\.5 {
+    width: calc(var(--spacing) * 0.5);
+  }
   .w-1 {
     width: var(--spacing);
   }
@@ -1117,6 +1180,9 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-\[1\.375rem\] {
+    width: 1.375rem;
+  }
   .w-\[3px\] {
     width: 3px;
   }
@@ -1207,15 +1273,15 @@
   .w-\[var\(--radix-select-trigger-width\)\] {
     width: var(--radix-select-trigger-width);
   }
-  .w-\[var\(--timeline-dot-size\)\] {
-    width: var(--timeline-dot-size);
-  }
   .w-\[var\(--timeline-dot-size\,0\.5rem\)\] {
     width: var(--timeline-dot-size,0.5rem);
   }
   .w-\[var\(--tool-icon-size\)\] {
     width: var(--tool-icon-size);
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -1270,21 +1336,81 @@
   .max-w-\[140px\] {
     max-width: 140px;
   }
-  .max-w-\[250px\] {
-    max-width: 250px;
-  }
-  .max-w-\[300px\] {
-    max-width: 300px;
-  }
   .max-w-\[320px\] {
     max-width: 320px;
   }
+  .max-w-\[400px\] {
+    max-width: 400px;
+  }
   .max-w-\[420px\] {
     max-width: 420px;
   }
+  .max-w-\[430px\] {
+    max-width: 430px;
+  }
+  .max-w-\[440px\] {
+    max-width: 440px;
+  }
+  .max-w-\[460px\] {
+    max-width: 460px;
+  }
   .max-w-\[480px\] {
     max-width: 480px;
   }
+  .max-w-\[500px\] {
+    max-width: 500px;
+  }
+  .max-w-\[540px\] {
+    max-width: 540px;
+  }
+  .max-w-\[560px\] {
+    max-width: 560px;
+  }
+  .max-w-\[600px\] {
+    max-width: 600px;
+  }
+  .max-w-\[620px\] {
+    max-width: 620px;
+  }
+  .max-w-\[650px\] {
+    max-width: 650px;
+  }
+  .max-w-\[680px\] {
+    max-width: 680px;
+  }
+  .max-w-\[700px\] {
+    max-width: 700px;
+  }
+  .max-w-\[760px\] {
+    max-width: 760px;
+  }
+  .max-w-\[800px\] {
+    max-width: 800px;
+  }
+  .max-w-\[840px\] {
+    max-width: 840px;
+  }
+  .max-w-\[850px\] {
+    max-width: 850px;
+  }
+  .max-w-\[860px\] {
+    max-width: 860px;
+  }
+  .max-w-\[900px\] {
+    max-width: 900px;
+  }
+  .max-w-\[1000px\] {
+    max-width: 1000px;
+  }
+  .max-w-\[1040px\] {
+    max-width: 1040px;
+  }
+  .max-w-\[1050px\] {
+    max-width: 1050px;
+  }
+  .max-w-\[1100px\] {
+    max-width: 1100px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1315,6 +1441,9 @@
   .min-w-4 {
     min-width: calc(var(--spacing) * 4);
   }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
@@ -1345,12 +1474,21 @@
   .min-w-\[360px\] {
     min-width: 360px;
   }
+  .min-w-\[min\(100\%\,18rem\)\] {
+    min-width: min(100%, 18rem);
+  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
   .flex-1 {
     flex: 1;
   }
+  .flex-\[1_1_10rem\] {
+    flex: 1 1 10rem;
+  }
+  .flex-\[1_1_12rem\] {
+    flex: 1 1 12rem;
+  }
   .flex-\[2\] {
     flex: 2;
   }
@@ -1464,6 +1602,12 @@
   .cursor-text {
     cursor: text;
   }
+  .cursor-zoom-in {
+    cursor: zoom-in;
+  }
+  .cursor-zoom-out {
+    cursor: zoom-out;
+  }
   .touch-none {
     touch-action: none;
   }
@@ -1509,6 +1653,9 @@
   .grid-cols-\[auto_minmax\(0\,1fr\)\] {
     grid-template-columns: auto minmax(0,1fr);
   }
+  .grid-cols-\[minmax\(0\,1fr\)_auto\] {
+    grid-template-columns: minmax(0,1fr) auto;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1711,6 +1858,12 @@
   :where(.divide-border > :not(:last-child)) {
     border-color: var(--color-border);
   }
+  .self-start {
+    align-self: flex-start;
+  }
+  .justify-self-start {
+    justify-self: flex-start;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1799,6 +1952,10 @@
     border-top-left-radius: var(--radius-sm);
     border-top-right-radius: var(--radius-sm);
   }
+  .rounded-t-md {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
   .rounded-t-sm {
     border-top-left-radius: var(--radius-sm);
     border-top-right-radius: var(--radius-sm);
@@ -2242,9 +2399,6 @@
   .bg-\[var\(--surface-info-bg\)\] {
     background-color: var(--surface-info-bg);
   }
-  .bg-\[var\(--surface-info-text\)\] {
-    background-color: var(--surface-info-text);
-  }
   .bg-\[var\(--surface-neutral-bg\)\] {
     background-color: var(--surface-neutral-bg);
   }
@@ -2838,6 +2992,9 @@
   .pb-1 {
     padding-bottom: var(--spacing);
   }
+  .pb-1\.5 {
+    padding-bottom: calc(var(--spacing) * 1.5);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2871,6 +3028,9 @@
   .pl-11 {
     padding-left: calc(var(--spacing) * 11);
   }
+  .pl-\[2\.375rem\] {
+    padding-left: 2.375rem;
+  }
   .text-center {
     text-align: center;
   }
@@ -3019,6 +3179,10 @@
     --tw-leading: 1.4;
     line-height: 1.4;
   }
+  .leading-\[1\.5\] {
+    --tw-leading: 1.5;
+    line-height: 1.5;
+  }
   .leading-\[1\.6\] {
     --tw-leading: 1.6;
     line-height: 1.6;
@@ -3609,8 +3773,13 @@
       --tw-ring-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
     }
   }
-  .ring-offset-background {
-    --tw-ring-offset-color: var(--color-background);
+  .outline-hidden {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
   }
   .outline {
     outline-style: var(--tw-outline-style);
@@ -3648,11 +3817,21 @@
     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));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[border-color\,box-shadow\] {
     transition-property: 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-\[color\,background-color\,border-color\,box-shadow\] {
+    transition-property: color,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-\[left\,width\] {
     transition-property: left,width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3663,6 +3842,11 @@
     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));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[opacity\] {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3756,6 +3940,12 @@
     rotate: 180deg;
   }
   @media (hover: hover) {
+    .group-hover\:block:is(:where(.group):hover *) {
+      display: block;
+    }
+    .group-hover\:hidden:is(:where(.group):hover *) {
+      display: none;
+    }
     .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
       --tw-translate-x: calc(var(--spacing) * 0.5);
       translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3849,9 +4039,6 @@
     content: var(--tw-content);
     background-color: var(--color-primary);
   }
-  .first\:mt-0:first-child {
-    margin-top: 0px;
-  }
   .last\:border-0:last-child {
     border-style: var(--tw-border-style);
     border-width: 0px;
@@ -3860,12 +4047,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
   }
-  .focus-within\:border-\[var\(--border-accent-hover\)\]:focus-within {
-    border-color: var(--border-accent-hover);
-  }
-  .focus-within\:border-border:focus-within {
-    border-color: var(--color-border);
-  }
   @media (hover: hover) {
     .hover\:-translate-y-0\.5:hover {
       --tw-translate-y: calc(var(--spacing) * -0.5);
@@ -3874,18 +4055,21 @@
     .hover\:border-\[var\(--border-accent\)\]:hover {
       border-color: var(--border-accent);
     }
-    .hover\:border-\[var\(--border-accent-hover\)\]:hover {
-      border-color: var(--border-accent-hover);
-    }
     .hover\:border-\[var\(--border-default\,hsl\(var\(--border\)\)\)\]:hover {
       border-color: var(--border-default,hsl(var(--border)));
     }
+    .hover\:border-\[var\(--border-strong\)\]:hover {
+      border-color: var(--border-strong);
+    }
     .hover\:border-\[var\(--md3-outline\)\]:hover {
       border-color: var(--md3-outline);
     }
     .hover\:border-\[var\(--md3-outline-variant\)\]:hover {
       border-color: var(--md3-outline-variant);
     }
+    .hover\:border-\[var\(--surface-danger-border\)\]:hover {
+      border-color: var(--surface-danger-border);
+    }
     .hover\:border-accent\/50:hover {
       border-color: color-mix(in srgb, hsl(var(--accent)) 50%, transparent);
     }
@@ -3894,9 +4078,6 @@
         border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
       }
     }
-    .hover\:border-border:hover {
-      border-color: var(--color-border);
-    }
     .hover\:border-border\/80:hover {
       border-color: color-mix(in srgb, hsl(var(--border)) 80%, transparent);
     }
@@ -3956,14 +4137,6 @@
         border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
       }
     }
-    .hover\:border-primary\/40:hover {
-      border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-primary\/40:hover {
-        border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-      }
-    }
     .hover\:border-primary\/50:hover {
       border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
     }
@@ -3984,9 +4157,15 @@
     .hover\:bg-\[var\(--bg-hover\,hsl\(var\(--accent\)\)\)\]:hover {
       background-color: var(--bg-hover,hsl(var(--accent)));
     }
+    .hover\:bg-\[var\(--btn-primary-bg\)\]:hover {
+      background-color: var(--btn-primary-bg);
+    }
     .hover\:bg-\[var\(--btn-primary-hover\)\]:hover {
       background-color: var(--btn-primary-hover);
     }
+    .hover\:bg-\[var\(--md3-surface-container\)\]:hover {
+      background-color: var(--md3-surface-container);
+    }
     .hover\:bg-\[var\(--surface-container-high\)\]\/40:hover {
       background-color: var(--surface-container-high);
     }
@@ -4199,6 +4378,9 @@
     .hover\:text-\[var\(--accent-text\)\]:hover {
       color: var(--accent-text);
     }
+    .hover\:text-\[var\(--btn-primary-text\)\]:hover {
+      color: var(--btn-primary-text);
+    }
     .hover\:text-\[var\(--status-error\,\#ff4d6d\)\]:hover {
       color: var(--status-error,#ff4d6d);
     }
@@ -4263,14 +4445,11 @@
       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,);
     }
   }
-  .focus\:border-\[var\(--border-accent\)\]:focus {
-    border-color: var(--border-accent);
+  .focus\:border-\[var\(--focus-border\)\]:focus {
+    border-color: var(--focus-border);
   }
-  .focus\:border-\[var\(--border-accent-hover\)\]:focus {
-    border-color: var(--border-accent-hover);
-  }
-  .focus\:border-primary:focus {
-    border-color: var(--color-primary);
+  .focus\:border-\[var\(--focus-border-danger\)\]:focus {
+    border-color: var(--focus-border-danger);
   }
   .focus\:bg-accent:focus {
     background-color: var(--color-accent);
@@ -4315,61 +4494,37 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .focus\:ring-1:focus {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .focus\:ring-2:focus {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .focus\:ring-\[var\(--border-accent\)\]:focus {
-    --tw-ring-color: var(--border-accent);
-  }
-  .focus\:ring-\[var\(--surface-danger-border\)\]:focus {
-    --tw-ring-color: var(--surface-danger-border);
-  }
-  .focus\:ring-primary:focus {
-    --tw-ring-color: var(--color-primary);
+  .focus\:ring-3:focus {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .focus\:ring-primary\/30:focus {
-    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
-    }
+  .focus\:ring-\[var\(--focus-halo\)\]:focus {
+    --tw-ring-color: var(--focus-halo);
   }
-  .focus\:ring-primary\/40:focus {
-    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
+  .focus\:ring-\[var\(--focus-halo-danger\)\]:focus {
+    --tw-ring-color: var(--focus-halo-danger);
   }
   .focus\:ring-ring:focus {
     --tw-ring-color: var(--color-ring);
   }
-  .focus\:ring-offset-0:focus {
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
-  .focus\:ring-offset-2:focus {
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  .focus\:outline-hidden:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
   }
   .focus\:outline-none:focus {
     --tw-outline-style: none;
     outline-style: none;
   }
-  .focus-visible\:border-\[var\(--border-accent\)\]:focus-visible {
-    border-color: var(--border-accent);
-  }
-  .focus-visible\:border-primary:focus-visible {
-    border-color: var(--color-primary);
-  }
-  .focus-visible\:border-primary\/50:focus-visible {
-    border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
-    }
+  .focus-visible\:pointer-events-auto:focus-visible {
+    pointer-events: auto;
   }
   .focus-visible\:bg-background:focus-visible {
     background-color: var(--color-background);
@@ -4383,57 +4538,35 @@
   .focus-visible\:bg-surface-container:focus-visible {
     background-color: var(--color-surface-container);
   }
-  .focus-visible\:bg-transparent:focus-visible {
-    background-color: transparent;
-  }
   .focus-visible\:text-foreground:focus-visible {
     color: var(--color-foreground);
   }
   .focus-visible\:opacity-100:focus-visible {
     opacity: 100%;
   }
-  .focus-visible\:ring-1:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  .focus-visible\:ring-0:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .focus-visible\:ring-2:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  .focus-visible\:ring-4:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .focus-visible\:ring-\[var\(--border-accent\)\]:focus-visible {
-    --tw-ring-color: var(--border-accent);
-  }
-  .focus-visible\:ring-primary\/20:focus-visible {
-    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    }
-  }
-  .focus-visible\:ring-primary\/40:focus-visible {
-    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
-  }
-  .focus-visible\:ring-primary\/60:focus-visible {
-    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
+  .focus-visible\:ring-\[var\(--focus-halo\)\]:focus-visible {
+    --tw-ring-color: var(--focus-halo);
   }
-  .focus-visible\:ring-ring:focus-visible {
-    --tw-ring-color: var(--color-ring);
+  .focus-visible\:outline-1:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
   }
-  .focus-visible\:ring-offset-2:focus-visible {
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  .focus-visible\:-outline-offset-1:focus-visible {
+    outline-offset: calc(1px * -1);
   }
-  .focus-visible\:ring-offset-background:focus-visible {
-    --tw-ring-offset-color: var(--color-background);
+  .focus-visible\:outline-offset-0:focus-visible {
+    outline-offset: 0px;
   }
-  .focus-visible\:outline-none:focus-visible {
-    --tw-outline-style: none;
-    outline-style: none;
+  .focus-visible\:outline-\[var\(--focus-border\)\]:focus-visible {
+    outline-color: var(--focus-border);
   }
   .focus-visible\:ring-inset:focus-visible {
     --tw-ring-inset: inset;
@@ -4465,21 +4598,12 @@
   .disabled\:pointer-events-none:disabled {
     pointer-events: none;
   }
+  .disabled\:cursor-default:disabled {
+    cursor: default;
+  }
   .disabled\:cursor-not-allowed:disabled {
     cursor: not-allowed;
   }
-  .disabled\:bg-primary\/55:disabled {
-    background-color: color-mix(in srgb, hsl(var(--primary)) 55%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 55%, transparent);
-    }
-  }
-  .disabled\:text-primary-foreground\/90:disabled {
-    color: color-mix(in srgb, hsl(var(--primary-foreground)) 90%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-primary-foreground) 90%, transparent);
-    }
-  }
   .disabled\:opacity-30:disabled {
     opacity: 30%;
   }
@@ -4489,6 +4613,9 @@
   .disabled\:opacity-50:disabled {
     opacity: 50%;
   }
+  .disabled\:opacity-55:disabled {
+    opacity: 55%;
+  }
   .disabled\:opacity-60:disabled {
     opacity: 60%;
   }
@@ -4496,6 +4623,16 @@
     --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);
   }
+  .has-\[\:is\(textarea\,select\,\[contenteditable\]\:not\(\[contenteditable\=false\]\)\,input\:not\(\[type\=button\]\,\[type\=submit\]\,\[type\=reset\]\,\[type\=image\]\,\[type\=checkbox\]\,\[type\=radio\]\,\[type\=range\]\,\[type\=color\]\,\[type\=file\]\)\)\:focus\]\:border-\[var\(--focus-border\)\]:has(:is(:is(textarea, select, [contenteditable]:not([contenteditable=false]), input:not([type=button], [type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range], [type=color], [type=file])):focus)) {
+    border-color: var(--focus-border);
+  }
+  .has-\[\:is\(textarea\,select\,\[contenteditable\]\:not\(\[contenteditable\=false\]\)\,input\:not\(\[type\=button\]\,\[type\=submit\]\,\[type\=reset\]\,\[type\=image\]\,\[type\=checkbox\]\,\[type\=radio\]\,\[type\=range\]\,\[type\=color\]\,\[type\=file\]\)\)\:focus\]\:ring-3:has(:is(:is(textarea, select, [contenteditable]:not([contenteditable=false]), input:not([type=button], [type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range], [type=color], [type=file])):focus)) {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .has-\[\:is\(textarea\,select\,\[contenteditable\]\:not\(\[contenteditable\=false\]\)\,input\:not\(\[type\=button\]\,\[type\=submit\]\,\[type\=reset\]\,\[type\=image\]\,\[type\=checkbox\]\,\[type\=radio\]\,\[type\=range\]\,\[type\=color\]\,\[type\=file\]\)\)\:focus\]\:ring-\[var\(--focus-halo\)\]:has(:is(:is(textarea, select, [contenteditable]:not([contenteditable=false]), input:not([type=button], [type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range], [type=color], [type=file])):focus)) {
+    --tw-ring-color: var(--focus-halo);
+  }
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
@@ -4625,9 +4762,36 @@
     }
   }
   @media (width >= 40rem) {
+    .sm\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+    .sm\:col-start-2 {
+      grid-column-start: 2;
+    }
+    .sm\:col-start-3 {
+      grid-column-start: 3;
+    }
+    .sm\:col-start-4 {
+      grid-column-start: 4;
+    }
+    .sm\:row-start-1 {
+      grid-row-start: 1;
+    }
+    .sm\:grid {
+      display: grid;
+    }
+    .sm\:hidden {
+      display: none;
+    }
     .sm\:inline {
       display: inline;
     }
+    .sm\:table-cell {
+      display: table-cell;
+    }
+    .sm\:w-auto {
+      width: auto;
+    }
     .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4637,6 +4801,9 @@
     .sm\:grid-cols-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
+    .sm\:grid-cols-\[4rem_minmax\(0\,1fr\)_5\.5rem_3rem\] {
+      grid-template-columns: 4rem minmax(0,1fr) 5.5rem 3rem;
+    }
     .sm\:flex-row {
       flex-direction: row;
     }
@@ -4652,14 +4819,40 @@
     .sm\:justify-end {
       justify-content: flex-end;
     }
+    .sm\:gap-2 {
+      gap: calc(var(--spacing) * 2);
+    }
+    .sm\:gap-x-2 {
+      column-gap: calc(var(--spacing) * 2);
+    }
     :where(.sm\:space-x-2 > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
+    .sm\:truncate {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
     .sm\:p-5 {
       padding: calc(var(--spacing) * 5);
     }
+    .sm\:px-4 {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+    .sm\:px-5 {
+      padding-inline: calc(var(--spacing) * 5);
+    }
+    .sm\:px-6 {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+    .sm\:py-1 {
+      padding-block: var(--spacing);
+    }
+    .sm\:py-4 {
+      padding-block: calc(var(--spacing) * 4);
+    }
     .sm\:text-left {
       text-align: left;
     }
@@ -4667,6 +4860,10 @@
       font-size: var(--text-5xl);
       line-height: var(--tw-leading, var(--text-5xl--line-height));
     }
+    .sm\:break-normal {
+      overflow-wrap: normal;
+      word-break: normal;
+    }
     .sm\:opacity-0 {
       opacity: 0%;
     }
@@ -5364,6 +5561,27 @@
   --radius-full: 999px;
   --radius-composer: 26px;
 }
+: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);
+  @supports (color: color-mix(in lab, red, red)) {
+    --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent);
+  }
+  --focus-halo-danger: var(--surface-danger-text);
+  @supports (color: color-mix(in lab, red, red)) {
+    --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
+  }
+  --border-strong: hsl(var(--hsl-border));
+  @supports (color: color-mix(in lab, red, red)) {
+    --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
+  }
+}
 [data-theme] {
   --color-background: hsl(var(--hsl-background));
   --color-foreground: hsl(var(--hsl-foreground));
@@ -5744,7 +5962,48 @@
   --trees-border-color-override: var(--md3-outline-variant);
   --trees-indent-guide-bg-override: var(--md3-outline-variant);
   --trees-accent-override: hsl(var(--primary));
-  --trees-focus-ring-color-override: hsl(var(--primary) / 0.4);
+  --trees-focus-ring-color-override: var(--focus-border);
+}
+.sandbox-code-view {
+  container-type: inline-size;
+}
+.sandbox-code-view-mobile-toolbar {
+  display: none;
+}
+@container (max-width: 560px) {
+  .sandbox-code-view-layout {
+    flex-direction: column;
+  }
+  .sandbox-code-view-mobile-toolbar {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0.375rem 0.75rem;
+    border-bottom: 1px solid var(--md3-outline-variant);
+    background: var(--md3-surface-container-lowest);
+  }
+  .sandbox-code-view-mobile-toolbar button {
+    padding: 0.25rem 0.625rem;
+    border-radius: 0.375rem;
+    color: hsl(var(--muted-foreground));
+    font-size: 0.75rem;
+  }
+  .sandbox-code-view-mobile-toolbar button[aria-pressed="true"] {
+    background: var(--md3-surface-container-high);
+    color: hsl(var(--foreground));
+  }
+  .sandbox-code-view-tree {
+    display: none;
+    width: 100%;
+    min-height: 0;
+    flex: 1;
+    border-right: 0;
+  }
+  .sandbox-code-view-tree[data-mobile-open="true"] {
+    display: flex;
+  }
+  .sandbox-code-view-editor[data-mobile-hidden="true"] {
+    display: none;
+  }
 }
 @layer base {
   :root {
@@ -5754,6 +6013,45 @@
   * {
     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 {
+    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 {
+    outline: 1px solid var(--focus-border);
+    outline-offset: -1px;
+    box-shadow: none;
+  }
   body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -5788,7 +6086,8 @@
   }
 }
 @layer utilities {
-  .text-gradient-sandbox {
+  .text-gradient-sandbox,
+  .text-gradient-brand {
     background-image: var(--tangle-gradient);
     background-clip: text;
     -webkit-background-clip: text;