@tangle-network/sandbox-ui 0.29.0 → 0.30.0

package/dist/{chunk-F2M5MN7K.js → chunk-YPBFIETY.js}

@@ -24,11 +24,11 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 var PANEL_OPEN_KEY = "sandbox-sidebar-panel-open";
 var SIDEBAR_MODE_KEY = "sandbox-sidebar-mode";
-var SIDEBAR_RAIL_WIDTH = 64;
-var SIDEBAR_PANEL_WIDTH = 260;
+var SIDEBAR_RAIL_WIDTH = 56;
+var SIDEBAR_PANEL_WIDTH = 268;
 var SIDEBAR_TOTAL_WIDTH = SIDEBAR_RAIL_WIDTH + SIDEBAR_PANEL_WIDTH;
 var SIDEBAR_MOBILE_WIDTH = 256;
-var SIDEBAR_RAIL_LABELED_WIDTH = 224;
+var SIDEBAR_RAIL_LABELED_WIDTH = 248;
 var SidebarContext = React.createContext(null);
 function readStorage(key, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -168,8 +168,8 @@ function RailThemeToggle({ className }) {
       "aria-label": "Toggle theme",
       title: isDark ? "Switch to light mode" : "Switch to dark mode",
       className: cn(
-        "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
-        "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
         className
       ),
@@ -222,9 +222,9 @@ function RailSeparator({ className }) {
 }
 function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children }) {
   const classes = cn(
-    "group relative flex shrink-0 items-center justify-center rounded-xl transition-all duration-200",
-    showLabel ? "w-full justify-start px-3 h-11 gap-3" : "w-11 h-11 justify-center",
-    "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+    "group relative flex shrink-0 items-center justify-center rounded-md transition-all duration-200",
+    showLabel ? "w-full justify-start px-2.5 h-9 gap-2.5" : "w-9 h-9 justify-center",
+    "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
     "active:scale-95",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
     isActive && "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]",
@@ -232,8 +232,8 @@ function RailButton({ icon: Icon, label, isActive, badge, onClick, className, sh
     className
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(Icon, { className: "h-5 w-5 shrink-0" }),
-    showLabel && /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsx2(Icon, { className: "h-[17px] w-[17px] shrink-0" }),
+    showLabel && /* @__PURE__ */ jsx2("span", { className: "text-[13.5px] font-medium", children: label }),
     badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary text-[9px] font-bold text-[var(--md3-on-primary)] px-1 shadow-sm", children: badge > 99 ? "99+" : badge })
   ] });
   if (asChild && React2.isValidElement(children)) {
@@ -273,9 +273,9 @@ function RailFlyout({
     };
   }, [open]);
   const triggerClasses = cn(
-    "group relative flex shrink-0 items-center rounded-xl transition-all duration-200",
-    showLabel ? "w-full justify-start px-3 h-11 gap-3" : "w-11 h-11 justify-center",
-    "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+    "group relative flex shrink-0 items-center rounded-md transition-all duration-200",
+    showLabel ? "w-full justify-start px-2.5 h-9 gap-2.5" : "w-9 h-9 justify-center",
+    "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
     "active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
     isActive || open ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]" : "text-muted-foreground",
     className
@@ -317,7 +317,7 @@ function RailFlyout({
           if (el.closest("a,button")) setOpen(false);
         },
         className: cn(
-          "absolute top-0 z-50 min-w-[12rem] rounded-xl border border-border bg-card p-1.5 shadow-lg",
+          "absolute top-0 z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1.5 shadow-dropdown",
           showLabel ? "left-full ml-2" : "left-full ml-2"
         ),
         children: [
@@ -356,10 +356,10 @@ function SidebarPanel({ children, className }) {
     {
       className: cn(
         "transition-[opacity] duration-150 h-full overflow-hidden border-l border-border bg-card",
-        panelOpen ? "w-[260px] opacity-100" : "w-0 opacity-0 pointer-events-none",
+        panelOpen ? "w-[268px] opacity-100" : "w-0 opacity-0 pointer-events-none",
         className
       ),
-      children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col h-full w-[260px]", children })
+      children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col h-full w-[268px]", children })
     }
   );
 }

package/dist/dashboard.d.ts

@@ -140,9 +140,9 @@ interface ProfileAvatarProps {
 }
 declare function ProfileAvatar({ user, isLoading, onLogout, onSettingsClick, settingsHref, children, className, showDetails, LinkComponent, }: ProfileAvatarProps): react_jsx_runtime.JSX.Element;
 
-/** Width constants (px) matching blueprint-agent layout */
-declare const SIDEBAR_RAIL_WIDTH = 64;
-declare const SIDEBAR_PANEL_WIDTH = 260;
+/** Width constants (px) — Tangle Quiet density (ChatGPT-minimal) */
+declare const SIDEBAR_RAIL_WIDTH = 56;
+declare const SIDEBAR_PANEL_WIDTH = 268;
 declare const SIDEBAR_TOTAL_WIDTH: number;
 /**
  * Width of the mobile drawer when the rail is rendered with labels

package/dist/dashboard.js

@@ -48,7 +48,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-F2M5MN7K.js";
+} from "./chunk-YPBFIETY.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -694,6 +694,9 @@
   .h-\[3px\] {
     height: 3px;
   }
+  .h-\[17px\] {
+    height: 17px;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
@@ -949,11 +952,14 @@
   .w-\[3px\] {
     width: 3px;
   }
+  .w-\[17px\] {
+    width: 17px;
+  }
   .w-\[72\%\] {
     width: 72%;
   }
-  .w-\[260px\] {
-    width: 260px;
+  .w-\[268px\] {
+    width: 268px;
   }
   .w-\[300px\] {
     width: 300px;
@@ -2457,6 +2463,9 @@
   .text-\[12px\] {
     font-size: 12px;
   }
+  .text-\[13\.5px\] {
+    font-size: 13.5px;
+  }
   .text-\[13px\] {
     font-size: 13px;
   }
@@ -4060,24 +4069,24 @@
   --md3-inverse-primary: #4F46E5;
   --md3-inverse-on-surface: #000000;
   --md3-surface-tint: #818CF8;
-  --hsl-background: 244 28% 5%;
-  --hsl-foreground: 240 18% 94%;
-  --hsl-card: 246 30% 11%;
-  --hsl-card-foreground: 240 18% 94%;
-  --hsl-popover: 246 28% 14%;
-  --hsl-popover-foreground: 240 18% 94%;
+  --hsl-background: 240 8% 5%;
+  --hsl-foreground: 240 6% 93%;
+  --hsl-card: 240 5% 8%;
+  --hsl-card-foreground: 240 6% 93%;
+  --hsl-popover: 240 4% 13%;
+  --hsl-popover-foreground: 240 6% 93%;
   --hsl-primary: 239 84% 67%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 248 24% 18%;
-  --hsl-secondary-foreground: 240 16% 90%;
-  --hsl-muted: 246 22% 15%;
-  --hsl-muted-foreground: 240 14% 58%;
-  --hsl-accent: 248 26% 20%;
-  --hsl-accent-foreground: 240 16% 92%;
+  --hsl-secondary: 240 5% 11%;
+  --hsl-secondary-foreground: 240 6% 93%;
+  --hsl-muted: 240 5% 11%;
+  --hsl-muted-foreground: 240 4% 62%;
+  --hsl-accent: 240 5% 11%;
+  --hsl-accent-foreground: 240 6% 93%;
   --hsl-destructive: 348 90% 60%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 244 14% 22%;
-  --hsl-input: 246 28% 14%;
+  --hsl-border: 240 3% 13%;
+  --hsl-input: 240 5% 11%;
   --hsl-ring: 239 84% 67%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
@@ -4105,18 +4114,18 @@
   --warning: var(--hsl-warning);
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
-  --sidebar-background: 244 28% 5%;
-  --sidebar-foreground: 240 18% 94%;
+  --sidebar-background: 240 5% 8%;
+  --sidebar-foreground: 240 6% 93%;
   --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 248 26% 20%;
-  --sidebar-accent-foreground: 240 16% 92%;
-  --sidebar-border: 244 14% 17%;
+  --sidebar-accent: 240 5% 11%;
+  --sidebar-accent-foreground: 240 6% 93%;
+  --sidebar-border: 240 3% 13%;
   --sidebar-ring: 239 84% 67%;
-  --depth-1: #0C0B1D;
-  --depth-2: #141328;
-  --depth-3: #1D1B38;
-  --depth-4: #262448;
+  --depth-1: #0b0b0d;
+  --depth-2: #141416;
+  --depth-3: #1a1a1d;
+  --depth-4: #202023;
   --status-running: #10B981;
   --status-creating: #9B93F0;
   --status-stopped: #FFB800;
@@ -4153,29 +4162,27 @@
   --glass-border: var(--border-subtle);
   --glass-border-hover: var(--border-default);
   --glass-blur: 0px;
-  --mesh-teal: rgba(16, 185, 129, 0.05);
-  --mesh-violet: rgba(99, 102, 241, 0.07);
-  --mesh-blue: rgba(129, 140, 248, 0.04);
+  --mesh-teal: transparent;
+  --mesh-violet: transparent;
+  --mesh-blue: transparent;
   --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
   --tangle-gradient-text: linear-gradient(135deg, #A5AAFC, #818CF8);
   --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
-  --accent-surface-soft: rgba(99, 102, 241, 0.12);
-  --accent-surface-strong: rgba(99, 102, 241, 0.20);
-  --accent-text: #A5AAFC;
-  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(99, 102, 241, 0.08), transparent),
-             radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
-             linear-gradient(180deg, var(--depth-1), #0D0C1E 100%);
+  --accent-surface-soft: rgba(255, 255, 255, 0.04);
+  --accent-surface-strong: rgba(129, 140, 248, 0.14);
+  --accent-text: #b9bffb;
+  --bg-root: #0b0b0d;
   --bg-dark: var(--depth-1);
-  --bg-card: hsl(var(--hsl-card));
-  --bg-elevated: hsl(246 28% 17%);
-  --bg-section: hsl(246 28% 9%);
-  --bg-input: hsl(var(--hsl-input));
-  --bg-hover: rgba(99, 102, 241, 0.08);
-  --bg-selection: rgba(99, 102, 241, 0.18);
-  --text-primary: hsl(var(--hsl-foreground));
-  --text-secondary: hsl(240 16% 85%);
-  --text-muted: #8688B0;
-  --text-dim: #606294;
+  --bg-card: var(--depth-2);
+  --bg-elevated: var(--depth-4);
+  --bg-section: var(--depth-1);
+  --bg-input: var(--depth-3);
+  --bg-hover: rgba(255, 255, 255, 0.04);
+  --bg-selection: rgba(129, 140, 248, 0.14);
+  --text-primary: #ececee;
+  --text-secondary: #c8c8cd;
+  --text-muted: #9a9aa2;
+  --text-dim: #6b6b73;
   --brand-primary: #6366F1;
   --brand-strong: #2E2A5E;
   --brand-strong-text: #ffffff;
@@ -4186,11 +4193,11 @@
   --brand-purple: #C7D2FE;
   --brand-vibrant: #6366F1;
   --brand-emerald: #10B981;
-  --border-subtle: rgba(100, 100, 148, 0.10);
-  --border-default: rgba(100, 100, 148, 0.18);
-  --border-hover: rgba(100, 100, 148, 0.28);
-  --border-accent: rgba(99, 102, 241, 0.18);
-  --border-accent-hover: rgba(99, 102, 241, 0.35);
+  --border-subtle: rgba(255, 255, 255, 0.05);
+  --border-default: rgba(255, 255, 255, 0.07);
+  --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-text: #ffffff;
@@ -4203,20 +4210,21 @@
   --code-success: #10B981;
   --code-comment: #606294;
   --code-error: #FF4D6D;
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
-  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
-  --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
-  --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --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);
   --radius-sm: 6px;
   --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
   --radius-pill: 999px;
   --radius-full: 999px;
-  --radius: 0.625rem;
+  --radius-composer: 26px;
+  --radius: 0.5rem;
   --control-height: 2.25rem;
   --panel-padding: 1rem;
   --content-max-width: 80rem;
@@ -4226,8 +4234,8 @@
   --font-size-lg: 1rem;
   --font-size-xl: 1.25rem;
   --line-height-tight: 1.3;
-  --line-height-base: 1.75;
-  --line-height-relaxed: 1.8;
+  --line-height-base: 1.6;
+  --line-height-relaxed: 1.75;
   --avatar-size: 2rem;
   --timeline-dot-size: 0.625rem;
   --indicator-dot-size: 0.25rem;
@@ -4254,8 +4262,8 @@
   --transition-fast: 0.1s ease;
   --transition-default: 0.16s ease;
   --transition-medium: 0.24s ease;
-  --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Outfit", "Geist", sans-serif;
+  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 [data-sandbox-theme="vault"] {
@@ -4295,32 +4303,32 @@
   --md3-inverse-primary: #A5AAFC;
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
-  --hsl-background: 225 20% 97%;
-  --hsl-foreground: 228 20% 12%;
-  --hsl-card: 0 0% 100%;
-  --hsl-card-foreground: 228 20% 12%;
+  --hsl-background: 0 0% 100%;
+  --hsl-foreground: 0 0% 5%;
+  --hsl-card: 240 7% 97%;
+  --hsl-card-foreground: 0 0% 5%;
   --hsl-popover: 0 0% 100%;
-  --hsl-popover-foreground: 228 20% 12%;
-  --hsl-primary: 239 84% 67%;
+  --hsl-popover-foreground: 0 0% 5%;
+  --hsl-primary: 245 62% 57%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 242 22% 42%;
-  --hsl-secondary-foreground: 0 0% 100%;
-  --hsl-muted: 240 14% 89%;
-  --hsl-muted-foreground: 240 10% 36%;
-  --hsl-accent: 248 22% 86%;
-  --hsl-accent-foreground: 248 38% 30%;
+  --hsl-secondary: 240 6% 93%;
+  --hsl-secondary-foreground: 0 0% 10%;
+  --hsl-muted: 240 6% 93%;
+  --hsl-muted-foreground: 240 5% 38%;
+  --hsl-accent: 240 6% 93%;
+  --hsl-accent-foreground: 0 0% 10%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 244 14% 78%;
-  --hsl-input: 244 12% 80%;
-  --hsl-ring: 239 84% 67%;
+  --hsl-border: 240 6% 89%;
+  --hsl-input: 240 6% 89%;
+  --hsl-ring: 245 62% 57%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
   --hsl-info: 212 80% 50%;
-  --depth-1: #f4f4f9;
-  --depth-2: #edecf4;
-  --depth-3: #e5e4ee;
-  --depth-4: #dcdbe8;
+  --depth-1: #ffffff;
+  --depth-2: #f7f7f8;
+  --depth-3: #ececee;
+  --depth-4: #e3e3e6;
   --status-running: #059669;
   --status-creating: #3E349E;
   --status-stopped: #B45309;
@@ -4356,29 +4364,29 @@
   --surface-neutral-bg: var(--depth-3);
   --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
-  --sidebar-background: 232 18% 96%;
-  --sidebar-foreground: 228 20% 12%;
-  --sidebar-primary: 239 84% 67%;
+  --sidebar-background: 240 7% 97%;
+  --sidebar-foreground: 0 0% 5%;
+  --sidebar-primary: 245 62% 57%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 18% 90%;
-  --sidebar-accent-foreground: 240 38% 30%;
-  --sidebar-border: 244 14% 78%;
-  --sidebar-ring: 239 84% 67%;
-  --mesh-teal: rgba(5, 150, 105, 0.04);
-  --mesh-violet: rgba(99, 102, 241, 0.03);
-  --mesh-blue: rgba(129, 140, 248, 0.03);
-  --bg-root: #f4f4f9;
-  --bg-dark: #edecf4;
-  --bg-card: #ffffff;
-  --bg-elevated: #e5e4ee;
-  --bg-section: #edecf4;
-  --bg-input: #edecf4;
-  --bg-hover: rgba(99, 102, 241, 0.05);
-  --bg-selection: rgba(99, 102, 241, 0.10);
-  --text-primary: #191c24;
-  --text-secondary: #3a3a50;
-  --text-muted: #5E5E7A;
-  --text-dim: #A0A0B8;
+  --sidebar-accent: 240 6% 93%;
+  --sidebar-accent-foreground: 0 0% 10%;
+  --sidebar-border: 240 6% 89%;
+  --sidebar-ring: 245 62% 57%;
+  --mesh-teal: transparent;
+  --mesh-violet: transparent;
+  --mesh-blue: transparent;
+  --bg-root: #ffffff;
+  --bg-dark: #f7f7f8;
+  --bg-card: #f7f7f8;
+  --bg-elevated: #ffffff;
+  --bg-section: #f7f7f8;
+  --bg-input: #ececee;
+  --bg-hover: rgba(0, 0, 0, 0.04);
+  --bg-selection: rgba(91, 78, 212, 0.10);
+  --text-primary: #0d0d0d;
+  --text-secondary: #2a2a30;
+  --text-muted: #5d5d66;
+  --text-dim: #8e8e98;
   --brand-primary: #6366F1;
   --brand-strong: #2E2A5E;
   --brand-strong-text: #ffffff;
@@ -4389,15 +4397,15 @@
   --brand-purple: #6366F1;
   --brand-vibrant: #6366F1;
   --brand-emerald: #059669;
-  --border-subtle: rgba(110, 108, 148, 0.20);
-  --border-default: rgba(110, 108, 148, 0.35);
-  --border-hover: rgba(110, 108, 148, 0.50);
-  --border-accent: rgba(99, 102, 241, 0.15);
-  --border-accent-hover: rgba(99, 102, 241, 0.30);
-  --btn-primary-bg: #6366F1;
+  --border-subtle: rgba(0, 0, 0, 0.06);
+  --border-default: rgba(0, 0, 0, 0.08);
+  --border-hover: rgba(0, 0, 0, 0.13);
+  --border-accent: rgba(91, 78, 212, 0.18);
+  --border-accent-hover: rgba(91, 78, 212, 0.35);
+  --btn-primary-bg: #5B4ED4;
   --btn-primary-hover: #4F46E5;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #6366F1;
+  --btn-cta-bg: #5B4ED4;
   --btn-cta-text: #ffffff;
   --code-keyword: #3E349E;
   --code-string: #059669;
@@ -4406,26 +4414,27 @@
   --code-success: #059669;
   --code-comment: #6B6E8A;
   --code-error: #ba1a1a;
-  --shadow-card: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(200, 198, 218, 0.22);
-  --shadow-dropdown: 0 8px 32px rgba(25, 28, 36, 0.10), 0 0 0 1px rgba(200, 198, 218, 0.28);
+  --shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
+  --shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
   --shadow-glow: none;
-  --shadow-accent: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(99, 102, 241, 0.15);
-  --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
-  --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #6366F1);
-  --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
-  --accent-surface-soft: rgba(99, 102, 241, 0.06);
-  --accent-surface-strong: rgba(99, 102, 241, 0.12);
+  --shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
+  --tangle-gradient: linear-gradient(135deg, #4F46E5, #5B4ED4);
+  --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #5B4ED4);
+  --accent-gradient-strong: linear-gradient(135deg, #4F46E5, #5B4ED4);
+  --accent-surface-soft: rgba(0, 0, 0, 0.04);
+  --accent-surface-strong: rgba(91, 78, 212, 0.10);
   --accent-text: #4F46E5;
-  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Manrope", "Inter", sans-serif;
+  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
-  --radius: 0.375rem;
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 6px;
-  --radius-xl: 8px;
+  --radius: 0.5rem;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
   --radius-pill: 999px;
   --radius-full: 999px;
+  --radius-composer: 26px;
 }
 @layer base {
   :root {

package/dist/index.js

@@ -195,7 +195,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-F2M5MN7K.js";
+} from "./chunk-YPBFIETY.js";
 import {
   BillingDashboard,
   InfoPanel,