@tangle-network/sandbox-ui 0.124.0 → 0.125.0

package/README.md

@@ -38,6 +38,16 @@ Import styles in your app root:
 import "@tangle-network/sandbox-ui/styles";
 ```
 
+An app that runs its own Tailwind v4 compile imports the source entry instead, and lists no `node_modules` paths:
+
+```css
+@import "tailwindcss";
+@import "@tangle-network/sandbox-ui/tailwind.css";
+```
+
+The entry carries Brand's tokens and utility registrations, this package's runtime CSS, and `@source` lines for its own `dist` and the `@tangle-network/ui` peer, so every component utility compiles once, in the app's own layer order.
+Agent apps import `@tangle-network/agent-app/tailwind.css`, which includes this entry.
+
 ### Dashboard page spacing
 
 For apps whose pages already provide their own gutters, pass `contentClassName="px-0 pb-0 lg:px-0"` to `DashboardLayout`. New Sandbox is at the top of the sidebar; notifications sit above the account menu. Set `notificationsEnabled={false}` when the app has no notification feed. The desktop has no top bar; the mobile menu opens a focus-managed drawer.
@@ -492,6 +502,7 @@ Retheming is absolutely supported, but the documentation was thinner than it sho
 | `/types` | TypeScript types for messages, parts, runs, sessions |
 | `/utils` | cn, formatDuration, timeAgo, tool display helpers |
 | `/styles` | Compiled CSS bundle |
+| `/tailwind.css` | Tailwind v4 source entry: tokens, runtime CSS, and the `@source` lines for this package and `@tangle-network/ui` |
 
 ## Stack
 

package/dist/globals.css

@@ -5751,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;
@@ -6092,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)) {
@@ -6343,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);
@@ -6375,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;
@@ -6387,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;
@@ -6407,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);
@@ -6450,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;
 }
@@ -6828,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;
@@ -6876,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);
@@ -6904,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;
@@ -7026,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;
@@ -7165,12 +7081,10 @@
   }
 }
 @keyframes agent-caret {
-  0%,
-  49% {
+  0%, 49% {
     opacity: 1;
   }
-  50%,
-  100% {
+  50%, 100% {
     opacity: 0;
   }
 }
@@ -7195,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;
@@ -7231,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;

package/dist/styles.css

@@ -5751,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;
@@ -6092,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)) {
@@ -6343,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);
@@ -6375,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;
@@ -6387,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;
@@ -6407,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);
@@ -6450,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;
 }
@@ -6828,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;
@@ -6876,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);
@@ -6904,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;
@@ -7026,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;
@@ -7165,12 +7081,10 @@
   }
 }
 @keyframes agent-caret {
-  0%,
-  49% {
+  0%, 49% {
     opacity: 1;
   }
-  50%,
-  100% {
+  50%, 100% {
     opacity: 0;
   }
 }
@@ -7195,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;
@@ -7231,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;