@tangle-network/sandbox-ui 0.35.0 → 0.37.0

package/dist/{chunk-75Z5H43I.js → chunk-4PCDRCDA.js}

@@ -1,7 +1,7 @@
 import {
   Button,
   Logo
-} from "./chunk-7ZA5SEK3.js";
+} from "./chunk-4ZZUMXPX.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -1496,6 +1496,10 @@ function DashboardLayoutInner({
   topNavLinks,
   activeTopNavHref,
   LinkComponent = DefaultLink2,
+  logoHref = "/",
+  onLogoClick,
+  logoAriaLabel = "Toggle navigation",
+  labeledRail = false,
   footer,
   railFooter,
   profileMenuItems,
@@ -1522,7 +1526,7 @@ function DashboardLayoutInner({
       document.removeEventListener("keydown", keyHandler);
     };
   }, [notificationsOpen]);
-  const { contentMargin, hidden, mode, hasPanels, panelOpen } = useSidebar();
+  const { contentMargin, hidden, mode, hasPanels, panelOpen, toggleRail, railCollapsed } = useSidebar();
   const modeSet = React6.useMemo(() => new Set(modeItems), [modeItems]);
   const sidebarUser = React6.useMemo(
     () => user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0,
@@ -1532,7 +1536,34 @@ function DashboardLayoutInner({
   const buildSidebarContent = React6.useCallback(
     (showLabels) => /* @__PURE__ */ jsxs13(Fragment8, { children: [
       /* @__PURE__ */ jsxs13(SidebarRail, { wide: showLabels, children: [
-        /* @__PURE__ */ jsx14(SidebarRailHeader, { children: /* @__PURE__ */ jsx14(Link, { href: "/", to: "/", className: "p-1 rounded-md transition-colors hover:bg-muted/50", children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true }) }) }),
+        /* @__PURE__ */ jsx14(SidebarRailHeader, { children: onLogoClick ? /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            onClick: onLogoClick,
+            "aria-label": logoAriaLabel,
+            className: "p-1 rounded-md transition-colors hover:bg-muted/50",
+            children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
+          }
+        ) : labeledRail ? /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            onClick: toggleRail,
+            "aria-label": railCollapsed ? "Expand navigation" : "Collapse navigation",
+            "aria-expanded": !railCollapsed,
+            className: "p-1 rounded-md transition-colors hover:bg-muted/50",
+            children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
+          }
+        ) : /* @__PURE__ */ jsx14(
+          Link,
+          {
+            href: logoHref,
+            to: logoHref,
+            className: "p-1 rounded-md transition-colors hover:bg-muted/50",
+            children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
+          }
+        ) }),
         /* @__PURE__ */ jsx14(SidebarRailNav, { children: navItems.map((item, i) => {
           const isMode = modeSet.has(item.id);
           const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
@@ -1586,6 +1617,12 @@ function DashboardLayoutInner({
     [
       Link,
       variant,
+      onLogoClick,
+      logoAriaLabel,
+      logoHref,
+      labeledRail,
+      toggleRail,
+      railCollapsed,
       navItems,
       modeSet,
       activeNavId,
@@ -1602,7 +1639,10 @@ function DashboardLayoutInner({
       mode
     ]
   );
-  const sidebarContent = React6.useMemo(() => buildSidebarContent(false), [buildSidebarContent]);
+  const sidebarContent = React6.useMemo(
+    () => buildSidebarContent(labeledRail && !railCollapsed),
+    [buildSidebarContent, labeledRail, railCollapsed]
+  );
   const mobileSidebarContent = React6.useMemo(() => buildSidebarContent(true), [buildSidebarContent]);
   return /* @__PURE__ */ jsxs13("div", { className: cn("min-h-screen bg-background text-foreground", className), children: [
     /* @__PURE__ */ jsxs13(
@@ -1615,7 +1655,7 @@ function DashboardLayoutInner({
         },
         children: [
           /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-8", children: [
-            /* @__PURE__ */ jsx14(Link, { href: "/", to: "/", className: "lg:hidden flex items-center p-1 rounded-md hover:bg-muted/50 transition-colors", children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true }) }),
+            /* @__PURE__ */ jsx14(Link, { href: logoHref, to: logoHref, className: "lg:hidden flex items-center p-1 rounded-md hover:bg-muted/50 transition-colors", children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true }) }),
             topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx14(
               Link,
               {
@@ -1732,8 +1772,8 @@ function DashboardLayoutInner({
     footer
   ] });
 }
-function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }) {
-  return /* @__PURE__ */ jsx14(SidebarProvider, { defaultPanelOpen, defaultMode, hasPanels: (props.panels?.length ?? 0) > 0, children: /* @__PURE__ */ jsx14(DashboardLayoutInner, { defaultPanelOpen, defaultMode, ...props }) });
+function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, ...props }) {
+  return /* @__PURE__ */ jsx14(SidebarProvider, { defaultPanelOpen, defaultMode, labeledRail, hasPanels: (props.panels?.length ?? 0) > 0, children: /* @__PURE__ */ jsx14(DashboardLayoutInner, { defaultPanelOpen, defaultMode, labeledRail, ...props }) });
 }
 
 // src/dashboard/sidebar-layout.tsx

package/dist/{chunk-7ZA5SEK3.js → chunk-4ZZUMXPX.js}

@@ -147,9 +147,103 @@ function Logo({ variant = "sandbox", size = "md", className, iconOnly = false })
 }
 Logo.displayName = "Logo";
 
+// src/primitives/heading.tsx
+import {
+  forwardRef
+} from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var VARIANT_CLASS = {
+  display: "font-display font-bold text-foreground text-[length:var(--font-size-display,3rem)] leading-[var(--line-height-display,1.05)] tracking-[var(--tracking-tight,-0.02em)]",
+  hero: "font-display font-bold text-foreground text-[length:var(--font-size-hero,2.5rem)] leading-[1.1] tracking-[var(--tracking-tight,-0.02em)]",
+  page: "font-display font-semibold text-foreground text-[length:var(--font-size-3xl,1.875rem)] leading-[var(--line-height-heading,1.15)] tracking-[var(--tracking-tight,-0.02em)]",
+  section: "font-display font-semibold text-foreground text-[length:var(--font-size-xl,1.25rem)] leading-[1.3] tracking-[var(--tracking-snug,-0.01em)]",
+  subsection: "font-semibold text-foreground text-[length:var(--font-size-lg,1rem)] leading-[1.4]",
+  eyebrow: "font-semibold uppercase text-muted-foreground text-[length:var(--font-size-sm,0.75rem)] leading-none tracking-[var(--tracking-wide,0.08em)]"
+};
+var DEFAULT_TAG = {
+  display: "h1",
+  hero: "h2",
+  page: "h1",
+  section: "h2",
+  subsection: "h3",
+  eyebrow: "p"
+};
+var Heading = forwardRef(function Heading2({ role, as, className, children, ...rest }, ref) {
+  const Tag = as ?? DEFAULT_TAG[role];
+  return /* @__PURE__ */ jsx2(Tag, { ref, className: cn(VARIANT_CLASS[role], className), ...rest, children });
+});
+function PageHeader({
+  title,
+  description,
+  eyebrow,
+  action,
+  className,
+  titleAs
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-1.5", children: [
+          eyebrow ? /* @__PURE__ */ jsx2(Heading, { role: "eyebrow", children: eyebrow }) : null,
+          /* @__PURE__ */ jsx2(Heading, { role: "page", as: titleAs, children: title }),
+          description ? /* @__PURE__ */ jsx2("p", { className: "max-w-2xl text-[length:var(--font-size-base,0.9375rem)] text-muted-foreground leading-relaxed", children: description }) : null
+        ] }),
+        action ? /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 items-center gap-2", children: action }) : null
+      ]
+    }
+  );
+}
+function SectionTitle({
+  title,
+  description,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx2(Heading, { role: "section", children: title }),
+          description ? /* @__PURE__ */ jsx2("p", { className: "max-w-xl text-[length:var(--font-size-sm,0.75rem)] text-muted-foreground", children: description }) : null
+        ] }),
+        action ? /* @__PURE__ */ jsx2("div", { className: "shrink-0", children: action }) : null
+      ]
+    }
+  );
+}
+
+// src/primitives/page-shell.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function PageShell({ children, className }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "mx-auto w-full max-w-6xl space-y-8 px-6 py-8 lg:px-8",
+        className
+      ),
+      children
+    }
+  );
+}
+
 export {
   TangleKnot,
   Logo,
+  Heading,
+  PageHeader,
+  SectionTitle,
+  PageShell,
   Avatar,
   AvatarFallback,
   AvatarImage,

package/dist/dashboard.d.ts

@@ -654,6 +654,28 @@ interface DashboardLayoutProps {
     topNavLinks?: TopNavLink[];
     activeTopNavHref?: string;
     LinkComponent?: React.ComponentType<any>;
+    /**
+     * Where the in-app logo links. Defaults to "/" (backward compatible);
+     * pass an in-app path (e.g. "/dashboard") so the logo never bounces an
+     * authenticated user back out to the public marketing homepage.
+     */
+    logoHref?: string;
+    /**
+     * If provided, the rail logo becomes a button calling this instead of
+     * navigating — e.g. to toggle the sidebar. Takes precedence over logoHref.
+     */
+    onLogoClick?: () => void;
+    /**
+     * Accessible label for the logo button when onLogoClick is set. Defaults to
+     * "Toggle navigation"; set it to match what onLogoClick actually does (e.g.
+     * "Open command palette") so screen readers don't announce a stale action.
+     */
+    logoAriaLabel?: string;
+    /**
+     * Let the icon rail expand to a labeled rail. When true, the rail logo
+     * toggles between icon-only and labeled instead of navigating.
+     */
+    labeledRail?: boolean;
     footer?: React.ReactNode;
     defaultPanelOpen?: boolean;
     defaultMode?: string;
@@ -675,7 +697,7 @@ interface DashboardLayoutProps {
         onMarkAllRead?: () => void;
     };
 }
-declare function DashboardLayout({ defaultPanelOpen, defaultMode, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+declare function DashboardLayout({ defaultPanelOpen, defaultMode, labeledRail, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 
 /** A sub-destination revealed inside a nav item's right-flyout. */
 interface SidebarLayoutFlyoutItem {

package/dist/dashboard.js

@@ -52,7 +52,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-75Z5H43I.js";
+} from "./chunk-4PCDRCDA.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -61,7 +61,7 @@ import {
   UsageChart,
   formatPrice
 } from "./chunk-2XNT74ZX.js";
-import "./chunk-7ZA5SEK3.js";
+import "./chunk-4ZZUMXPX.js";
 import {
   BackendSelector,
   HARNESS_BRAND,

package/dist/globals.css

@@ -39,12 +39,12 @@
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
+    --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
     --container-5xl: 64rem;
     --container-6xl: 72rem;
-    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -1033,9 +1033,6 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
-  .max-w-7xl {
-    max-width: var(--container-7xl);
-  }
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
@@ -1093,6 +1090,9 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -2475,6 +2475,27 @@
   .text-\[calc\(var\(--font-size-xs\)-1px\)\] {
     font-size: calc(var(--font-size-xs) - 1px);
   }
+  .text-\[length\:var\(--font-size-3xl\,1\.875rem\)\] {
+    font-size: var(--font-size-3xl,1.875rem);
+  }
+  .text-\[length\:var\(--font-size-base\,0\.9375rem\)\] {
+    font-size: var(--font-size-base,0.9375rem);
+  }
+  .text-\[length\:var\(--font-size-display\,3rem\)\] {
+    font-size: var(--font-size-display,3rem);
+  }
+  .text-\[length\:var\(--font-size-hero\,2\.5rem\)\] {
+    font-size: var(--font-size-hero,2.5rem);
+  }
+  .text-\[length\:var\(--font-size-lg\,1rem\)\] {
+    font-size: var(--font-size-lg,1rem);
+  }
+  .text-\[length\:var\(--font-size-sm\,0\.75rem\)\] {
+    font-size: var(--font-size-sm,0.75rem);
+  }
+  .text-\[length\:var\(--font-size-xl\,1\.25rem\)\] {
+    font-size: var(--font-size-xl,1.25rem);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -2487,6 +2508,18 @@
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
   }
+  .leading-\[1\.1\] {
+    --tw-leading: 1.1;
+    line-height: 1.1;
+  }
+  .leading-\[1\.3\] {
+    --tw-leading: 1.3;
+    line-height: 1.3;
+  }
+  .leading-\[1\.4\] {
+    --tw-leading: 1.4;
+    line-height: 1.4;
+  }
   .leading-\[1\.6\] {
     --tw-leading: 1.6;
     line-height: 1.6;
@@ -2499,6 +2532,14 @@
     --tw-leading: var(--line-height-base);
     line-height: var(--line-height-base);
   }
+  .leading-\[var\(--line-height-display\,1\.05\)\] {
+    --tw-leading: var(--line-height-display,1.05);
+    line-height: var(--line-height-display,1.05);
+  }
+  .leading-\[var\(--line-height-heading\,1\.15\)\] {
+    --tw-leading: var(--line-height-heading,1.15);
+    line-height: var(--line-height-heading,1.15);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -2583,6 +2624,18 @@
     --tw-tracking: var(--chat-label-tracking,0.16em);
     letter-spacing: var(--chat-label-tracking,0.16em);
   }
+  .tracking-\[var\(--tracking-snug\,-0\.01em\)\] {
+    --tw-tracking: var(--tracking-snug,-0.01em);
+    letter-spacing: var(--tracking-snug,-0.01em);
+  }
+  .tracking-\[var\(--tracking-tight\,-0\.02em\)\] {
+    --tw-tracking: var(--tracking-tight,-0.02em);
+    letter-spacing: var(--tracking-tight,-0.02em);
+  }
+  .tracking-\[var\(--tracking-wide\,0\.08em\)\] {
+    --tw-tracking: var(--tracking-wide,0.08em);
+    letter-spacing: var(--tracking-wide,0.08em);
+  }
   .tracking-normal {
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
@@ -3762,6 +3815,11 @@
       align-items: center;
     }
   }
+  .sm\:items-start {
+    @media (width >= 40rem) {
+      align-items: flex-start;
+    }
+  }
   .sm\:justify-between {
     @media (width >= 40rem) {
       justify-content: space-between;
@@ -3863,11 +3921,6 @@
       align-items: center;
     }
   }
-  .md\:items-end {
-    @media (width >= 48rem) {
-      align-items: flex-end;
-    }
-  }
   .md\:justify-between {
     @media (width >= 48rem) {
       justify-content: space-between;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { ArtifactPane, ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalDisplay, TerminalCursor as TerminalDisplayCursor, TerminalInput as TerminalDisplayInput, TerminalLine as TerminalDisplayLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast } from '@tangle-network/ui/primitives';
-export { Logo, LogoProps, TangleKnot } from './primitives.js';
+export { L as Logo, a as LogoProps, T as TangleKnot } from './logo-CZ6moVvw.js';
 export { CodeBlock as CodeBlockDisplay, Markdown, MarkdownProps } from '@tangle-network/ui/markdown';
 export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionCreatedDetail, SessionOptimisticController, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, ShellShouldRevalidateArgs, ShellShouldRevalidateOptions, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, UseOptimisticSessionItemsOptions, WorkspaceLayout, WorkspaceLayoutProps, createShellShouldRevalidate, dispatchSessionCreated, shellShouldRevalidate, useOptimisticSessionItems } from './workspace.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';

package/dist/index.js

@@ -199,7 +199,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-75Z5H43I.js";
+} from "./chunk-4PCDRCDA.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -294,7 +294,7 @@ import {
   buttonVariants,
   useTheme,
   useToast
-} from "./chunk-7ZA5SEK3.js";
+} from "./chunk-4ZZUMXPX.js";
 import {
   BackendSelector,
   HARNESS_BRAND,

package/dist/logo-CZ6moVvw.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LogoProps {
+    variant?: "sandbox";
+    size?: "sm" | "md" | "lg" | "xl";
+    className?: string;
+    iconOnly?: boolean;
+}
+declare function TangleKnot({ size, className }: {
+    size: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Logo({ variant, size, className, iconOnly }: LogoProps): react_jsx_runtime.JSX.Element;
+declare namespace Logo {
+    var displayName: string;
+}
+
+export { Logo as L, TangleKnot as T, type LogoProps as a };

package/dist/pages.js

@@ -15,6 +15,7 @@ import {
   DialogHeader,
   DialogTitle,
   Input,
+  PageHeader,
   Select,
   SelectContent,
   SelectItem,
@@ -22,7 +23,7 @@ import {
   SelectValue,
   Switch,
   Textarea
-} from "./chunk-7ZA5SEK3.js";
+} from "./chunk-4ZZUMXPX.js";
 import "./chunk-NMR2CTGP.js";
 import {
   cn
@@ -2547,7 +2548,7 @@ function parseEnvText(text) {
 }
 
 // src/pages/secrets-page.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var MAX_IMPORT_FILE_BYTES = 256 * 1024;
 function SecretsPage({ apiClient, className, teamSecretsHint }) {
   const [secrets, setSecrets] = React6.useState([]);
@@ -2724,39 +2725,40 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
       return dateStr;
     }
   };
-  return /* @__PURE__ */ jsxs7("div", { className: cn("mx-auto w-full max-w-7xl space-y-8", className), children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-4 md:flex-row md:items-end md:justify-between", children: [
-      /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsx7("h1", { className: "font-display text-3xl font-extrabold tracking-tight text-foreground", children: "Environment Secrets" }),
-        /* @__PURE__ */ jsx7("p", { className: "mt-1 text-sm text-muted-foreground", children: "Secrets are securely stored and automatically exposed as environment variables across all your sandboxes." })
-      ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxs7(
-          "button",
-          {
-            type: "button",
-            onClick: () => setIsImportOpen(true),
-            className: "inline-flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-2.5 text-sm font-semibold text-foreground hover:bg-muted transition-colors active:scale-[0.97]",
-            children: [
-              /* @__PURE__ */ jsx7(Upload, { className: "h-4 w-4" }),
-              "Import .env"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs7(
-          "button",
-          {
-            type: "button",
-            onClick: () => setIsCreateOpen(true),
-            className: "inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] border border-[var(--border-accent,transparent)] px-5 py-2.5 text-sm font-semibold text-[var(--btn-primary-text)] hover:bg-[var(--btn-primary-hover)] transition-colors active:scale-[0.97]",
-            children: [
-              /* @__PURE__ */ jsx7(Plus3, { className: "h-4 w-4" }),
-              "New Secret"
-            ]
-          }
-        )
-      ] })
-    ] }),
+  return /* @__PURE__ */ jsxs7("div", { className: cn("mx-auto w-full max-w-6xl space-y-8", className), children: [
+    /* @__PURE__ */ jsx7(
+      PageHeader,
+      {
+        title: "Environment Secrets",
+        description: "Secrets are securely stored and automatically exposed as environment variables across all your sandboxes.",
+        action: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+          /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsImportOpen(true),
+              className: "inline-flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-2.5 text-sm font-semibold text-foreground hover:bg-muted transition-colors active:scale-[0.97]",
+              children: [
+                /* @__PURE__ */ jsx7(Upload, { className: "h-4 w-4" }),
+                "Import .env"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsCreateOpen(true),
+              className: "inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] border border-[var(--border-accent,transparent)] px-5 py-2.5 text-sm font-semibold text-[var(--btn-primary-text)] hover:bg-[var(--btn-primary-hover)] transition-colors active:scale-[0.97]",
+              children: [
+                /* @__PURE__ */ jsx7(Plus3, { className: "h-4 w-4" }),
+                "New Secret"
+              ]
+            }
+          )
+        ] })
+      }
+    ),
     teamSecretsHint && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-[var(--accent-surface-soft)]/40 px-4 py-3", children: [
       /* @__PURE__ */ jsx7(Users, { className: "h-5 w-5 shrink-0 text-[var(--accent-text)]", "aria-hidden": "true" }),
       /* @__PURE__ */ jsxs7("div", { className: "flex-1 text-sm", children: [
@@ -3571,25 +3573,26 @@ function StartupScriptsPage({ apiClient, className }) {
     }));
   };
   const activeCount = scripts.filter((s) => s.enabled).length;
-  return /* @__PURE__ */ jsxs9("div", { className: cn("mx-auto w-full max-w-7xl space-y-6", className), children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-4 md:flex-row md:items-end md:justify-between", children: [
-      /* @__PURE__ */ jsxs9("div", { children: [
-        /* @__PURE__ */ jsx9("h1", { className: "font-display text-3xl font-extrabold tracking-tight text-foreground", children: "Startup Scripts" }),
-        /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-muted-foreground", children: "Define scripts that run automatically when your sandboxes start. Scripts can access your encrypted secrets." })
-      ] }),
-      /* @__PURE__ */ jsxs9(
-        "button",
-        {
-          type: "button",
-          onClick: openCreate,
-          className: "inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] px-4 py-2.5 text-sm font-bold text-[var(--btn-primary-text)] shadow-sm transition-colors hover:bg-[var(--btn-primary-hover)]",
-          children: [
-            /* @__PURE__ */ jsx9(Plus4, { className: "h-4 w-4" }),
-            "New Script"
-          ]
-        }
-      )
-    ] }),
+  return /* @__PURE__ */ jsxs9("div", { className: cn("mx-auto w-full max-w-6xl space-y-8", className), children: [
+    /* @__PURE__ */ jsx9(
+      PageHeader,
+      {
+        title: "Startup Scripts",
+        description: "Define scripts that run automatically when your sandboxes start. Scripts can access your encrypted secrets.",
+        action: /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            type: "button",
+            onClick: openCreate,
+            className: "inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] px-4 py-2.5 text-sm font-bold text-[var(--btn-primary-text)] shadow-sm transition-colors hover:bg-[var(--btn-primary-hover)]",
+            children: [
+              /* @__PURE__ */ jsx9(Plus4, { className: "h-4 w-4" }),
+              "New Script"
+            ]
+          }
+        )
+      }
+    ),
     /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-4", children: [
       /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border border-border bg-card p-5 shadow-[var(--shadow-card)]", children: [
         /* @__PURE__ */ jsx9("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Total Scripts" }),

package/dist/primitives.d.ts

@@ -1,19 +1,76 @@
 export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast } from '@tangle-network/ui/primitives';
+export { L as Logo, a as LogoProps, T as TangleKnot } from './logo-CZ6moVvw.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { HTMLAttributes, ElementType, ReactNode } from 'react';
 
-interface LogoProps {
-    variant?: "sandbox";
-    size?: "sm" | "md" | "lg" | "xl";
+/**
+ * Canonical type roles for the Tangle design system. Every title in every
+ * product app should be a Heading (or a PageHeader / SectionTitle composite
+ * built on it) so size, weight, tracking, and leading stay identical across
+ * surfaces. Sizes/leadings/tracking resolve from @tangle-network/brand tokens
+ * (with literal fallbacks so the component still renders if brand styles are
+ * absent, e.g. in isolation tests or Storybook).
+ *
+ * Weights are deliberately quiet (Tangle Quiet): heroes at 700, titles at 600
+ * — never extrabold.
+ *
+ * Semantic-tag invariant: both `display` and `page` default to <h1>. Use at
+ * most one of them per page (the marketing hero OR the dashboard page title);
+ * if a page needs both, override the secondary one with `as` to keep a single
+ * <h1> for accessibility and SEO.
+ */
+type HeadingVariant = "display" | "hero" | "page" | "section" | "subsection" | "eyebrow";
+/** @deprecated Renamed to {@link HeadingVariant}; kept as an alias. */
+type HeadingRole = HeadingVariant;
+interface HeadingProps extends Omit<HTMLAttributes<HTMLElement>, "role"> {
+    /** Type role from the design system (size + weight + tracking + leading). */
+    role: HeadingVariant;
+    /** Override the rendered element (defaults to the semantic tag for the role). */
+    as?: ElementType;
+    children: ReactNode;
+}
+/**
+ * Role-based heading. Forwards a ref to the underlying element and passes
+ * through standard HTML/ARIA/data-* attributes so it drops into tests,
+ * scroll-spy, and a11y tooling without friction.
+ */
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>>;
+interface PageHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Uppercase label rendered above the title. */
+    eyebrow?: ReactNode;
+    /** Primary action(s), right-aligned on wide viewports. */
+    action?: ReactNode;
+    className?: string;
+    /** Override the title element (default h1). */
+    titleAs?: ElementType;
+}
+/**
+ * Standard page header: one title size, one description style, one action
+ * slot — used by every page so titles never drift between surfaces.
+ */
+declare function PageHeader({ title, description, eyebrow, action, className, titleAs, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+interface SectionTitleProps {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
     className?: string;
-    iconOnly?: boolean;
 }
-declare function TangleKnot({ size, className }: {
-    size: number;
+/** Section heading inside a page — smaller than PageHeader, same rhythm. */
+declare function SectionTitle({ title, description, action, className, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
+
+interface PageShellProps {
+    children: ReactNode;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
-declare function Logo({ variant, size, className, iconOnly }: LogoProps): react_jsx_runtime.JSX.Element;
-declare namespace Logo {
-    var displayName: string;
 }
+/**
+ * Canonical page container — one max-width, one gutter, one vertical rhythm
+ * so every page sits on the same grid. Gutter widens on large viewports.
+ * Layout primitive (not a heading); kept in its own module so consumers
+ * looking for page layout don't have to reach into the typography file.
+ */
+declare function PageShell({ children, className }: PageShellProps): react_jsx_runtime.JSX.Element;
 
-export { Logo, type LogoProps, TangleKnot };
+export { Heading, type HeadingProps, type HeadingRole, type HeadingVariant, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, SectionTitle, type SectionTitleProps };

package/dist/primitives.js

@@ -39,11 +39,15 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   EmptyState,
+  Heading,
   InlineCode,
   Input,
   Label,
   Logo,
+  PageHeader,
+  PageShell,
   Progress,
+  SectionTitle,
   SegmentedControl,
   Select,
   SelectContent,
@@ -87,7 +91,7 @@ import {
   buttonVariants,
   useTheme,
   useToast
-} from "./chunk-7ZA5SEK3.js";
+} from "./chunk-4ZZUMXPX.js";
 import "./chunk-EI44GEQ5.js";
 export {
   Avatar,
@@ -130,11 +134,15 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   EmptyState,
+  Heading,
   InlineCode,
   Input,
   Label,
   Logo,
+  PageHeader,
+  PageShell,
   Progress,
+  SectionTitle,
   SegmentedControl,
   Select,
   SelectContent,

package/dist/styles.css

@@ -39,12 +39,12 @@
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
+    --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
     --container-5xl: 64rem;
     --container-6xl: 72rem;
-    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -1033,9 +1033,6 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
-  .max-w-7xl {
-    max-width: var(--container-7xl);
-  }
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
@@ -1093,6 +1090,9 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -2475,6 +2475,27 @@
   .text-\[calc\(var\(--font-size-xs\)-1px\)\] {
     font-size: calc(var(--font-size-xs) - 1px);
   }
+  .text-\[length\:var\(--font-size-3xl\,1\.875rem\)\] {
+    font-size: var(--font-size-3xl,1.875rem);
+  }
+  .text-\[length\:var\(--font-size-base\,0\.9375rem\)\] {
+    font-size: var(--font-size-base,0.9375rem);
+  }
+  .text-\[length\:var\(--font-size-display\,3rem\)\] {
+    font-size: var(--font-size-display,3rem);
+  }
+  .text-\[length\:var\(--font-size-hero\,2\.5rem\)\] {
+    font-size: var(--font-size-hero,2.5rem);
+  }
+  .text-\[length\:var\(--font-size-lg\,1rem\)\] {
+    font-size: var(--font-size-lg,1rem);
+  }
+  .text-\[length\:var\(--font-size-sm\,0\.75rem\)\] {
+    font-size: var(--font-size-sm,0.75rem);
+  }
+  .text-\[length\:var\(--font-size-xl\,1\.25rem\)\] {
+    font-size: var(--font-size-xl,1.25rem);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -2487,6 +2508,18 @@
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
   }
+  .leading-\[1\.1\] {
+    --tw-leading: 1.1;
+    line-height: 1.1;
+  }
+  .leading-\[1\.3\] {
+    --tw-leading: 1.3;
+    line-height: 1.3;
+  }
+  .leading-\[1\.4\] {
+    --tw-leading: 1.4;
+    line-height: 1.4;
+  }
   .leading-\[1\.6\] {
     --tw-leading: 1.6;
     line-height: 1.6;
@@ -2499,6 +2532,14 @@
     --tw-leading: var(--line-height-base);
     line-height: var(--line-height-base);
   }
+  .leading-\[var\(--line-height-display\,1\.05\)\] {
+    --tw-leading: var(--line-height-display,1.05);
+    line-height: var(--line-height-display,1.05);
+  }
+  .leading-\[var\(--line-height-heading\,1\.15\)\] {
+    --tw-leading: var(--line-height-heading,1.15);
+    line-height: var(--line-height-heading,1.15);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -2583,6 +2624,18 @@
     --tw-tracking: var(--chat-label-tracking,0.16em);
     letter-spacing: var(--chat-label-tracking,0.16em);
   }
+  .tracking-\[var\(--tracking-snug\,-0\.01em\)\] {
+    --tw-tracking: var(--tracking-snug,-0.01em);
+    letter-spacing: var(--tracking-snug,-0.01em);
+  }
+  .tracking-\[var\(--tracking-tight\,-0\.02em\)\] {
+    --tw-tracking: var(--tracking-tight,-0.02em);
+    letter-spacing: var(--tracking-tight,-0.02em);
+  }
+  .tracking-\[var\(--tracking-wide\,0\.08em\)\] {
+    --tw-tracking: var(--tracking-wide,0.08em);
+    letter-spacing: var(--tracking-wide,0.08em);
+  }
   .tracking-normal {
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
@@ -3762,6 +3815,11 @@
       align-items: center;
     }
   }
+  .sm\:items-start {
+    @media (width >= 40rem) {
+      align-items: flex-start;
+    }
+  }
   .sm\:justify-between {
     @media (width >= 40rem) {
       justify-content: space-between;
@@ -3863,11 +3921,6 @@
       align-items: center;
     }
   }
-  .md\:items-end {
-    @media (width >= 48rem) {
-      align-items: flex-end;
-    }
-  }
   .md\:justify-between {
     @media (width >= 48rem) {
       justify-content: space-between;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",