@tangle-network/sandbox-ui 0.38.0 → 0.39.0

package/dist/globals.css

@@ -619,6 +619,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -706,6 +710,9 @@
   .h-\[500px\] {
     height: 500px;
   }
+  .h-\[560px\] {
+    height: 560px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -982,6 +989,9 @@
   .w-\[680px\] {
     width: 680px;
   }
+  .w-\[760px\] {
+    width: 760px;
+  }
   .w-\[900px\] {
     width: 900px;
   }
@@ -1821,14 +1831,11 @@
   .border-t-transparent {
     border-top-color: transparent;
   }
-  .bg-\[\#8E59FF\] {
-    background-color: #8E59FF;
-  }
-  .bg-\[\#FEBC2E\] {
-    background-color: #FEBC2E;
-  }
-  .bg-\[\#FF5F57\] {
-    background-color: #FF5F57;
+  .bg-\[color-mix\(in_oklch\,var\(--color-warning\,orange\)_18\%\,transparent\)\] {
+    background-color: var(--color-warning,orange);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklch,var(--color-warning,orange) 18%,transparent);
+    }
   }
   .bg-\[color\:color-mix\(in_srgb\,var\(--bg-card\)_94\%\,transparent\)\] {
     background-color: var(--bg-card);
@@ -2331,9 +2338,6 @@
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
-  .pr-4 {
-    padding-right: calc(var(--spacing) * 4);
-  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -2397,9 +2401,6 @@
   .align-text-bottom {
     vertical-align: text-bottom;
   }
-  .align-top {
-    vertical-align: top;
-  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -2669,9 +2670,6 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .whitespace-pre {
-    white-space: pre;
-  }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
@@ -4305,9 +4303,9 @@
   --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
   --shadow-glow: none;
   --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
-  --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
-  --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
+  --shadow-status-running: none;
+  --shadow-status-creating: none;
+  --shadow-status-error: none;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 10px;
@@ -4324,9 +4322,19 @@
   --font-size-base: 0.9375rem;
   --font-size-lg: 1rem;
   --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
+  --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem);
   --line-height-tight: 1.3;
   --line-height-base: 1.6;
   --line-height-relaxed: 1.75;
+  --line-height-display: 1.05;
+  --line-height-heading: 1.15;
+  --tracking-tight: -0.02em;
+  --tracking-snug: -0.01em;
+  --tracking-wide: 0.08em;
   --avatar-size: 2rem;
   --timeline-dot-size: 0.625rem;
   --indicator-dot-size: 0.25rem;

package/dist/styles.css

@@ -619,6 +619,10 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -706,6 +710,9 @@
   .h-\[500px\] {
     height: 500px;
   }
+  .h-\[560px\] {
+    height: 560px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -982,6 +989,9 @@
   .w-\[680px\] {
     width: 680px;
   }
+  .w-\[760px\] {
+    width: 760px;
+  }
   .w-\[900px\] {
     width: 900px;
   }
@@ -1821,14 +1831,11 @@
   .border-t-transparent {
     border-top-color: transparent;
   }
-  .bg-\[\#8E59FF\] {
-    background-color: #8E59FF;
-  }
-  .bg-\[\#FEBC2E\] {
-    background-color: #FEBC2E;
-  }
-  .bg-\[\#FF5F57\] {
-    background-color: #FF5F57;
+  .bg-\[color-mix\(in_oklch\,var\(--color-warning\,orange\)_18\%\,transparent\)\] {
+    background-color: var(--color-warning,orange);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklch,var(--color-warning,orange) 18%,transparent);
+    }
   }
   .bg-\[color\:color-mix\(in_srgb\,var\(--bg-card\)_94\%\,transparent\)\] {
     background-color: var(--bg-card);
@@ -2331,9 +2338,6 @@
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
-  .pr-4 {
-    padding-right: calc(var(--spacing) * 4);
-  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -2397,9 +2401,6 @@
   .align-text-bottom {
     vertical-align: text-bottom;
   }
-  .align-top {
-    vertical-align: top;
-  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -2669,9 +2670,6 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .whitespace-pre {
-    white-space: pre;
-  }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
@@ -4305,9 +4303,9 @@
   --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
   --shadow-glow: none;
   --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
-  --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
-  --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
+  --shadow-status-running: none;
+  --shadow-status-creating: none;
+  --shadow-status-error: none;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 10px;
@@ -4324,9 +4322,19 @@
   --font-size-base: 0.9375rem;
   --font-size-lg: 1rem;
   --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
+  --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem);
   --line-height-tight: 1.3;
   --line-height-base: 1.6;
   --line-height-relaxed: 1.75;
+  --line-height-display: 1.05;
+  --line-height-heading: 1.15;
+  --tracking-tight: -0.02em;
+  --tracking-snug: -0.01em;
+  --tracking-wide: 0.08em;
   --avatar-size: 2rem;
   --timeline-dot-size: 0.625rem;
   --indicator-dot-size: 0.25rem;

package/dist/tokens.css

@@ -222,9 +222,9 @@
   --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
   --shadow-glow: none;
   --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
-  --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
-  --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
+  --shadow-status-running: none;
+  --shadow-status-creating: none;
+  --shadow-status-error: none;
 
   /* Radii */
   --radius-sm: 6px;
@@ -247,10 +247,24 @@
   --font-size-sm: 0.75rem;        /* 12px — captions, meta */
   --font-size-base: 0.9375rem;    /* 15px — message body */
   --font-size-lg: 1rem;           /* 16px — emphasized text */
-  --font-size-xl: 1.25rem;        /* 20px — section headers */
+  --font-size-xl: 1.25rem;        /* 20px — section title (h2) */
+  /* Display tier — page titles, marketing section heads, and heroes.
+     Hero sizes are fluid (clamp) so they scale with the viewport without
+     per-breakpoint overrides; the dense-app sizes above stay fixed. */
+  --font-size-2xl: 1.5rem;        /* 24px — large section title */
+  --font-size-3xl: 1.875rem;      /* 30px — page title (h1) */
+  --font-size-4xl: 2.25rem;       /* 36px — compact marketing section head */
+  --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);    /* 32→48px — secondary hero */
+  --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem); /* 40→64px — primary hero */
   --line-height-tight: 1.3;
   --line-height-base: 1.6;        /* tighter body rhythm (was 1.75) */
   --line-height-relaxed: 1.75;
+  --line-height-display: 1.05;    /* heroes — near-solid set */
+  --line-height-heading: 1.15;    /* page/section titles */
+  /* Letter-spacing — titles tighten, eyebrows/labels open up */
+  --tracking-tight: -0.02em;      /* display + page titles */
+  --tracking-snug: -0.01em;       /* section titles */
+  --tracking-wide: 0.08em;        /* uppercase eyebrows / stat labels */
 
   /* Component spacing — override per-app for tighter/looser layouts */
   --avatar-size: 2rem;            /* 32px — chat avatars */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -114,8 +114,8 @@
     "test:bridge": "pnpm build && vitest run src/__tests__/re-export-identity.test.ts"
   },
   "peerDependencies": {
-    "@tangle-network/brand": "^0.4.0",
-    "@tangle-network/ui": "^1.0.1",
+    "@tangle-network/brand": "^0.5.0",
+    "@tangle-network/ui": "^4.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "@tangle-network/agent-interface": ">=0.10.0 <1.0.0"
@@ -162,8 +162,8 @@
     "@storybook/react-vite": "^8.6.18",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
-    "@tangle-network/brand": "^0.4.0",
-    "@tangle-network/ui": "^1.0.1",
+    "@tangle-network/brand": "^0.5.0",
+    "@tangle-network/ui": "^4.1.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",