@tangle-network/sandbox-ui 0.38.0 → 0.39.1

package/dist/chat.js

@@ -16,9 +16,9 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-DVEIMFMF.js";
-import "./chunk-I64YISXS.js";
-import "./chunk-NMR2CTGP.js";
+} from "./chunk-CUUUFJF5.js";
+import "./chunk-KIRJZUX2.js";
+import "./chunk-3RNYDTQ3.js";
 import "./chunk-EI44GEQ5.js";
 export {
   AgentSessionControls,

package/dist/{chunk-NMR2CTGP.js → chunk-3RNYDTQ3.js}

@@ -234,6 +234,20 @@ function compareModelGroups(a, b) {
 function compareModelsByDisplayName(a, b) {
   return (a.name ?? a.id).localeCompare(b.name ?? b.id);
 }
+function stripBrandPrefix(name, identity) {
+  if (!identity) return name;
+  for (const label of [identity.lab.label, identity.host.label]) {
+    if (!label) continue;
+    if (name.toLowerCase().startsWith(label.toLowerCase())) {
+      const after = name.slice(label.length);
+      if (/^[\s:]/.test(after)) {
+        const rest = after.replace(/^[\s:]+/, "").trim();
+        if (rest) return rest;
+      }
+    }
+  }
+  return name;
+}
 function ModelPicker({
   value,
   onChange,
@@ -291,8 +305,11 @@ function ModelPicker({
     () => models.find((m) => canonicalModelId(m) === value),
     [models, value]
   );
-  const currentLabel = current?.name ?? current?.id ?? value;
   const currentIdentity = current ? resolveModelBrandIdentity(current) : null;
+  const currentLabel = stripBrandPrefix(
+    current?.name ?? current?.id ?? value,
+    currentIdentity
+  );
   const recentIds = React.useMemo(() => {
     if (!recents?.length) return [];
     const lookup = new Map(models.map((m) => [canonicalModelId(m), m]));

package/dist/{chunk-DVEIMFMF.js → chunk-CUUUFJF5.js}

@@ -2,11 +2,11 @@ import {
   HARNESS_OPTIONS,
   HarnessLogo,
   chatCapableHarnesses
-} from "./chunk-I64YISXS.js";
+} from "./chunk-KIRJZUX2.js";
 import {
   ModelPicker,
   canonicalModelId
-} from "./chunk-NMR2CTGP.js";
+} from "./chunk-3RNYDTQ3.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -115,10 +115,7 @@ function ReasoningLevelPicker({
         children: shown.map((option) => /* @__PURE__ */ jsxs(
           DropdownMenu.Item,
           {
-            onSelect: (event) => {
-              event.preventDefault();
-              onChange(option.value);
-            },
+            onSelect: () => onChange(option.value),
             className: cn(
               "flex cursor-pointer items-start gap-2.5 rounded-md px-2.5 py-2 outline-none",
               "transition-colors hover:bg-accent/40 focus:bg-accent/40",

package/dist/{chunk-I64YISXS.js → chunk-KIRJZUX2.js}

@@ -1,6 +1,6 @@
 import {
   moonshot_default
-} from "./chunk-NMR2CTGP.js";
+} from "./chunk-3RNYDTQ3.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";

package/dist/dashboard.js

@@ -69,7 +69,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-I64YISXS.js";
+} from "./chunk-KIRJZUX2.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -78,7 +78,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-NMR2CTGP.js";
+} from "./chunk-3RNYDTQ3.js";
 import "./chunk-EI44GEQ5.js";
 export {
   ActivityFeed,

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/index.js

@@ -104,7 +104,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-DVEIMFMF.js";
+} from "./chunk-CUUUFJF5.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -302,7 +302,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-I64YISXS.js";
+} from "./chunk-KIRJZUX2.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -311,7 +311,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-NMR2CTGP.js";
+} from "./chunk-3RNYDTQ3.js";
 import "./chunk-EI44GEQ5.js";
 
 // src/index.ts

package/dist/pages.js

@@ -24,7 +24,7 @@ import {
   Switch,
   Textarea
 } from "./chunk-4ZZUMXPX.js";
-import "./chunk-NMR2CTGP.js";
+import "./chunk-3RNYDTQ3.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";

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.1",
   "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",