@tangle-network/ui 11.51.16 → 11.51.17

package/src/editor/tiptap-editor.tsx

@@ -299,19 +299,19 @@ function ConnectionIndicator({
 }) {
   const config = {
     disconnected: {
-      color: "bg-red-500",
+      color: "bg-[var(--surface-danger-text)]",
       label: "Disconnected",
     },
     connecting: {
-      color: "bg-yellow-500 animate-pulse",
+      color: "bg-[var(--surface-warning-text)] animate-pulse motion-reduce:animate-none",
       label: "Connecting...",
     },
     connected: {
-      color: "bg-blue-500",
+      color: "bg-[var(--surface-info-text)]",
       label: "Connected",
     },
     synced: {
-      color: "bg-green-500",
+      color: "bg-[var(--surface-success-text)]",
       label: "Synced",
     },
   }[state];

package/src/files/file-preview.tsx

@@ -379,7 +379,7 @@ export function FilePreview({
         <div className="flex items-center gap-2 px-3 py-2 border-b border-border shrink-0">
           <div className="min-w-0 flex-1">
             <div className="truncate text-sm font-medium text-foreground">{filename}</div>
-            <div className="mt-0.5 text-[11px] uppercase tracking-[0.12em] text-muted-foreground">
+            <div className="mt-0.5 text-xs text-muted-foreground">
               {previewLabel}
             </div>
           </div>

package/src/hooks/index.ts

@@ -11,3 +11,4 @@ export * from "./use-sse-stream";
 
 export { useEventStream, type EventStreamHandlers, type EventStreamSource, type EventStreamOpener } from "./use-event-stream";
 export { useFollowTail } from "./use-follow-tail";
+export { usePhone, PHONE_MEDIA } from "./use-phone";

package/src/hooks/use-phone.ts

@@ -0,0 +1,18 @@
+"use client";
+import { useSyncExternalStore } from "react";
+
+/** Below the tablet breakpoint a workspace shows one region at a time and an agent opens as a full-screen sheet. */
+export const PHONE_MEDIA = "(max-width: 767px)";
+
+/** Whether the page is phone-width. The server renders the desktop shape; the client corrects it on hydration. */
+export function usePhone(media: string = PHONE_MEDIA): boolean {
+  return useSyncExternalStore(
+    (notify) => {
+      const query = window.matchMedia(media);
+      query.addEventListener("change", notify);
+      return () => query.removeEventListener("change", notify);
+    },
+    () => window.matchMedia(media).matches,
+    () => false,
+  );
+}

package/src/markdown/markdown.stories.tsx

@@ -30,7 +30,7 @@ Source: \`github.com/tangle-network/gtm-agent\` Live at: [gtm.tangle.tools](http
 
 ## What It Is
 
-GTM Agent is an AI-powered go-to-market workspace where founders get a sandboxed environment with an AI co-founder.
+GTM Agent is a go-to-market workspace where founders get a sandboxed environment and an agent that works alongside them.
 
 ## Architecture
 

package/src/openui/openui-artifact-renderer.tsx

@@ -232,7 +232,7 @@ function renderNode(
       return (
         <div className="space-y-1">
           {node.kicker && (
-            <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            <div className="text-xs font-medium text-muted-foreground">
               {node.kicker}
             </div>
           )}
@@ -275,7 +275,7 @@ function renderNode(
       return (
         <Card variant="glass" className="border-border shadow-[var(--shadow-card)]">
           <CardContent className="space-y-2 p-4">
-            <div className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+            <div className="text-xs text-muted-foreground">
               {node.label}
             </div>
             <div className="text-2xl font-semibold tracking-tight text-foreground">
@@ -310,7 +310,7 @@ function renderNode(
               key={item.id ?? `${item.label}-${index}`}
               className="rounded-[var(--radius-lg)] border border-border bg-card px-4 py-3"
             >
-              <dt className="text-[11px] uppercase tracking-[0.12em] text-muted-foreground">
+              <dt className="text-xs text-muted-foreground">
                 {item.label}
               </dt>
               <dd
@@ -330,7 +330,7 @@ function renderNode(
       return (
         <div className="space-y-2">
           {node.title && (
-            <div className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+            <div className="text-xs text-muted-foreground">
               {node.title}
             </div>
           )}
@@ -365,7 +365,7 @@ function renderNode(
                   <TableHead
                     key={column.key}
                     className={cn(
-                      "h-10 text-[11px] uppercase tracking-[0.1em] text-muted-foreground",
+                      "h-10 text-xs text-muted-foreground",
                       column.align === "right" && "text-right",
                     )}
                   >
@@ -408,7 +408,7 @@ function renderNode(
         <div className="flex items-center gap-3">
           <div className="h-px flex-1 bg-border" />
           {node.label && (
-            <span className="text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+            <span className="text-xs text-muted-foreground">
               {node.label}
             </span>
           )}
@@ -460,7 +460,7 @@ function renderNode(
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0 flex-1 space-y-1">
                   {node.eyebrow && (
-                    <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                    <div className="text-xs font-medium text-muted-foreground">
                       {node.eyebrow}
                     </div>
                   )}

package/src/presentation.ts

@@ -264,7 +264,7 @@ export const cardPresentation = {
  variants: {
     default: "bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)]",
     elevated: "bg-muted/50 border-border shadow-[var(--shadow-card)]",
-    glass: "bg-card/80 backdrop-blur-xl border-border shadow-[var(--shadow-card)]",
+    glass: "bg-card border-border shadow-[var(--shadow-card)]",
     sandbox: "bg-muted/50 border-primary/20 shadow-[var(--shadow-accent)]",
   },
 } as const;

package/src/primitives/artifact-pane.tsx

@@ -69,7 +69,7 @@ export function ArtifactPane({
                 {!hideTitleBlock && (
                   <>
                     {eyebrow && (
-                      <div className="mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                      <div className="mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-xs font-medium text-muted-foreground">
                         {eyebrow}
                       </div>
                     )}

package/src/primitives/avatar.stories.tsx

@@ -48,7 +48,7 @@ export const Overview: Story = {
   name: 'Overview',
   render: () => (
     <div className="flex flex-col gap-6 p-6">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Sizes</div>
+      <div className="text-muted-foreground text-xs font-mono">Sizes</div>
       <div className="flex items-center gap-4">
         <Avatar className="h-6 w-6">
           <AvatarFallback className="text-xs">XS</AvatarFallback>
@@ -66,7 +66,7 @@ export const Overview: Story = {
           <AvatarFallback className="text-xl">XL</AvatarFallback>
         </Avatar>
       </div>
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Team</div>
+      <div className="text-muted-foreground text-xs font-mono mt-2">Team</div>
       <div className="flex items-center gap-3">
         {[
           { initials: 'AK', label: 'Alex Kim' },
@@ -82,7 +82,7 @@ export const Overview: Story = {
           </div>
         ))}
       </div>
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Stacked</div>
+      <div className="text-muted-foreground text-xs font-mono mt-2">Stacked</div>
       <div className="flex -space-x-2">
         {['AK', 'JD', 'MR', 'SP', '+4'].map((label) => (
           <Avatar key={label} className="border-2 border-background">

package/src/primitives/badge.stories.tsx

@@ -29,10 +29,10 @@ export const Cold: Story = { args: { variant: 'cold', dot: true, children: 'Cold
 export const Deleted: Story = { args: { variant: 'deleted', dot: true, children: 'Deleted' } }
 
 export const AllVariants: Story = {
-  name: 'All Variants',
+  name: 'All variants',
   render: () => (
     <div className="flex flex-col gap-4 p-6">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Semantic</div>
+      <div className="text-muted-foreground text-xs font-mono">Semantic</div>
       <div className="flex flex-wrap gap-2">
         <Badge variant="default">Default</Badge>
         <Badge variant="secondary">Secondary</Badge>
@@ -43,7 +43,7 @@ export const AllVariants: Story = {
         <Badge variant="error">Error</Badge>
         <Badge variant="info">Info</Badge>
       </div>
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Operational Status</div>
+      <div className="text-muted-foreground text-xs font-mono mt-2">Operational status</div>
       <div className="flex flex-wrap gap-2">
         <Badge variant="running" dot>Running</Badge>
         <Badge variant="creating" dot>Creating</Badge>

package/src/primitives/card.stories.tsx

@@ -15,7 +15,7 @@ const SampleCard = ({ variant, hover }: { variant?: 'default' | 'glass' | 'sandb
   <Card variant={variant} hover={hover} className="w-72">
     <CardHeader>
       <div className="flex items-center justify-between">
-        <CardTitle>Agent Session</CardTitle>
+        <CardTitle>Agent session</CardTitle>
         <Badge variant="running" dot>Running</Badge>
       </div>
       <CardDescription>GPT-4o · Tangle Cloud</CardDescription>

package/src/primitives/compliance-badge.stories.tsx

@@ -52,21 +52,21 @@ export const AllStates: Story = {
   name: 'All States',
   render: () => (
     <div className="flex flex-col gap-4 p-6">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">HIPAA</div>
+      <div className="text-muted-foreground text-xs font-mono">HIPAA</div>
       <div className="flex flex-wrap items-center gap-2">
         <ComplianceBadge status="ready" />
         <ComplianceBadge status="compliant" />
         <ComplianceBadge status="ready" size="md" />
         <ComplianceBadge status="compliant" size="md" />
       </div>
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">SOC 2</div>
+      <div className="text-muted-foreground text-xs font-mono mt-2">SOC 2</div>
       <div className="flex flex-wrap items-center gap-2">
         <ComplianceBadge product="soc2" status="ready" />
         <ComplianceBadge product="soc2" status="compliant" />
         <ComplianceBadge product="soc2" status="ready" size="md" />
         <ComplianceBadge product="soc2" status="compliant" size="md" />
       </div>
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Linked</div>
+      <div className="text-muted-foreground text-xs font-mono mt-2">Linked</div>
       <div className="flex flex-wrap items-center gap-2">
         <ComplianceBadge status="ready" href="/trust" />
         <ComplianceBadge product="soc2" status="compliant" href="/trust" />

package/src/primitives/dropdown-menu.stories.tsx

@@ -90,7 +90,7 @@ export const RegionSelector: Story = {
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-52">
-        <DropdownMenuLabel className="text-xs text-muted-foreground font-normal tracking-widest uppercase">
+        <DropdownMenuLabel className="text-xs text-muted-foreground font-normal">
           Regions
         </DropdownMenuLabel>
         <DropdownMenuSeparator />

package/src/primitives/heading.tsx

@@ -22,7 +22,7 @@ const VARIANT_CLASS: Record<HeadingVariant, string> = {
   subsection:
     "font-semibold text-foreground text-[length:var(--font-size-base,1rem)] leading-[1.4]",
   eyebrow:
-    "font-semibold uppercase text-muted-foreground text-[length:var(--font-size-xs,0.75rem)] leading-none tracking-[var(--tracking-wide,0.08em)]",
+    "font-medium text-muted-foreground text-[length:var(--font-size-xs,0.75rem)] leading-4",
 };
 
 const DEFAULT_TAG: Record<HeadingVariant, React.ElementType> = {

package/src/primitives/input.stories.tsx

@@ -90,7 +90,7 @@ export const Overview: Story = {
   name: 'Overview',
   render: () => (
     <div className="flex flex-col gap-6 p-6 w-96">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Input variants</div>
+      <div className="text-muted-foreground text-xs font-mono">Input variants</div>
       <Input label="Sandbox name" placeholder="my-sandbox-01" />
       <Input
         variant="sandbox"
@@ -104,7 +104,7 @@ export const Overview: Story = {
         error="Must be a number between 1 and 32."
       />
       <Input label="Region" defaultValue="us-east-1" disabled />
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Textarea</div>
+      <div className="text-muted-foreground text-xs font-mono mt-2">Textarea</div>
       <Textarea
         label="Environment variables"
         placeholder="NODE_ENV=production&#10;PORT=3000"

package/src/primitives/label.stories.tsx

@@ -49,10 +49,10 @@ export const Overview: Story = {
   name: 'Overview',
   render: () => (
     <div className="flex flex-col gap-6 p-6 w-80">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Standalone</div>
+      <div className="text-muted-foreground text-xs font-mono">Standalone</div>
       <Label>Standalone label</Label>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Paired with input</div>
+      <div className="text-muted-foreground text-xs font-mono">Paired with input</div>
       <div className="flex flex-col gap-1.5">
         <Label htmlFor="overview-name">Sandbox name</Label>
         <Input id="overview-name" placeholder="my-sandbox-01" />
@@ -62,7 +62,7 @@ export const Overview: Story = {
         <Input id="overview-image" placeholder="ubuntu:22.04" />
       </div>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Paired with switch</div>
+      <div className="text-muted-foreground text-xs font-mono">Paired with switch</div>
       <div className="flex flex-col gap-3">
         <div className="flex items-center gap-2">
           <Switch id="overview-sleep" defaultChecked />

package/src/primitives/progress.stories.tsx

@@ -60,27 +60,27 @@ export const Overview: Story = {
   name: 'Overview',
   render: () => (
     <div className="flex flex-col gap-8 p-6 w-96">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Default variant</div>
+      <div className="text-muted-foreground text-xs font-mono">Default variant</div>
       <div className="flex flex-col gap-4">
         {[0, 25, 50, 75, 100].map((v) => (
           <div key={v} className="flex items-center gap-3">
             <span className="text-muted-foreground text-xs w-8 text-right">{v}%</span>
-            <Progress value={v} className="flex-1" />
+            <div className="flex-1"><Progress value={v} /></div>
           </div>
         ))}
       </div>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Sandbox variant</div>
+      <div className="text-muted-foreground text-xs font-mono">Sandbox variant</div>
       <div className="flex flex-col gap-4">
         {[0, 25, 50, 75, 100].map((v) => (
           <div key={v} className="flex items-center gap-3">
             <span className="text-muted-foreground text-xs w-8 text-right">{v}%</span>
-            <Progress value={v} variant="sandbox" className="flex-1" />
+            <div className="flex-1"><Progress value={v} variant="sandbox" /></div>
           </div>
         ))}
       </div>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Sandbox task list</div>
+      <div className="text-muted-foreground text-xs font-mono">Sandbox task list</div>
       <div className="rounded-xl border border-border bg-card p-4 flex flex-col gap-4">
         {[
           { label: 'Pulling image', value: 100 },

package/src/primitives/progress.tsx

@@ -42,7 +42,7 @@ const Progress = React.forwardRef<
         >
           <ProgressPrimitive.Indicator
             className={cn(
-              "h-full w-full flex-1 transition-all duration-300 ease-out",
+              "h-full w-full flex-1 transition-transform duration-300 ease-out",
               tone ? TONE_FILL[tone] : indicatorVariants[variant],
             )}
             style={{ transform: `translateX(-${100 - (value || 0)}%)` }}

package/src/primitives/select.stories.tsx

@@ -117,7 +117,7 @@ export const Overview: Story = {
   name: 'Overview',
   render: () => (
     <div className="flex flex-col gap-6 p-6 w-72">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Region</div>
+      <div className="text-muted-foreground text-xs font-mono">Region</div>
       <Select defaultValue="us-east-1">
         <SelectTrigger>
           <SelectValue />
@@ -130,7 +130,7 @@ export const Overview: Story = {
         </SelectContent>
       </Select>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Runtime</div>
+      <div className="text-muted-foreground text-xs font-mono">Runtime</div>
       <Select>
         <SelectTrigger>
           <SelectValue placeholder="Select runtime..." />
@@ -150,7 +150,7 @@ export const Overview: Story = {
         </SelectContent>
       </Select>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Disabled</div>
+      <div className="text-muted-foreground text-xs font-mono">Disabled</div>
       <Select disabled>
         <SelectTrigger>
           <SelectValue placeholder="Locked to current plan" />

package/src/primitives/sidebar-drop-zone.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof SidebarDropZone> = {
   decorators: [
     (Story) => (
       <div className="w-64 p-4 rounded-xl border border-border bg-background space-y-3">
-        <div className="text-xs text-muted-foreground font-mono uppercase tracking-widest">Workspace Files</div>
+        <div className="text-xs text-muted-foreground font-mono">Workspace files</div>
         <div className="space-y-1 text-sm text-foreground">
           <div className="px-2 py-1 rounded hover:bg-accent">index.ts</div>
           <div className="px-2 py-1 rounded hover:bg-accent">utils.ts</div>

package/src/primitives/sidebar-drop-zone.tsx

@@ -108,7 +108,7 @@ export function SidebarDropZone({
       onDragOver={handleDragOver}
       onDrop={handleDrop}
       className={cn(
-        "rounded-lg border-2 border-dashed transition-all duration-150",
+        "rounded-lg border-2 border-dashed transition-colors duration-150",
         isVisible ? "p-4" : "p-0 border-transparent",
         dragOver
           ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--accent-surface-soft)]"

package/src/primitives/skeleton.stories.tsx

@@ -42,7 +42,7 @@ export const Overview: Story = {
   name: 'Overview',
   render: () => (
     <div className="flex flex-col gap-8 p-6 w-[560px]">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Inline elements</div>
+      <div className="text-muted-foreground text-xs font-mono">Inline elements</div>
       <div className="flex flex-col gap-2">
         <Skeleton className="h-5 w-3/4" />
         <Skeleton className="h-4 w-full" />
@@ -50,7 +50,7 @@ export const Overview: Story = {
         <Skeleton className="h-4 w-2/3" />
       </div>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Team list</div>
+      <div className="text-muted-foreground text-xs font-mono">Team list</div>
       <div className="flex flex-col gap-3">
         {[1, 2, 3].map((i) => (
           <div key={i} className="flex items-center gap-3">
@@ -64,13 +64,13 @@ export const Overview: Story = {
         ))}
       </div>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Cards</div>
+      <div className="text-muted-foreground text-xs font-mono">Cards</div>
       <div className="flex gap-4">
         <SkeletonCard className="flex-1" />
         <SkeletonCard className="flex-1" />
       </div>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">Table</div>
+      <div className="text-muted-foreground text-xs font-mono">Table</div>
       <div className="rounded-xl border border-border bg-card p-4">
         <SkeletonTable rows={3} />
       </div>

package/src/primitives/stat-card.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Activity, Cpu, DollarSign, HardDrive, Terminal, Users, Zap } from 'lucide-react'
+import { Terminal } from 'lucide-react'
 import { StatCard } from './stat-card'
 
 const meta: Meta<typeof StatCard> = {
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof StatCard>
 
 export const Default: Story = {
   args: {
-    title: 'Active Sessions',
+    title: 'Active sessions',
     value: 24,
     subtitle: 'across 3 regions',
     icon: <Terminal className="h-5 w-5" />,
@@ -21,10 +21,10 @@ export const Default: Story = {
 }
 
 export const SandboxVariant: Story = {
-  name: 'Sandbox Variant',
+  name: 'Sandbox variant',
   args: {
     variant: 'sandbox',
-    title: 'Active Sessions',
+    title: 'Active sessions',
     value: 24,
     subtitle: 'across 3 regions',
     icon: <Terminal className="h-5 w-5" />,
@@ -33,103 +33,92 @@ export const SandboxVariant: Story = {
 }
 
 export const CpuUsage: Story = {
-  name: 'CPU Usage',
+  name: 'CPU usage',
   args: {
-    title: 'Avg CPU Usage',
+    title: 'Avg CPU usage',
     value: '68%',
     subtitle: 'p95: 94%',
-    icon: <Cpu className="h-5 w-5" />,
     trend: { value: -4, label: 'vs yesterday' },
   },
 }
 
 export const MemoryUsage: Story = {
-  name: 'Memory Usage',
+  name: 'Memory usage',
   args: {
-    title: 'Memory Allocated',
+    title: 'Memory allocated',
     value: '12.4 GB',
     subtitle: 'of 32 GB pool',
-    icon: <HardDrive className="h-5 w-5" />,
     trend: { value: 8, label: 'vs last hour' },
   },
 }
 
 export const MonthlyCost: Story = {
-  name: 'Monthly Cost',
+  name: 'Monthly cost',
   args: {
-    title: 'Estimated Cost',
+    title: 'Estimated cost',
     value: '$142.80',
     subtitle: 'current billing cycle',
-    icon: <DollarSign className="h-5 w-5" />,
     trend: { value: 0, label: 'vs last month' },
   },
 }
 
 export const TrendPositive: Story = {
-  name: 'Trend — Positive',
+  name: 'Trend up',
   args: {
-    title: 'Sessions Today',
+    title: 'Sessions today',
     value: 1284,
-    icon: <Activity className="h-5 w-5" />,
     trend: { value: 23, label: 'vs yesterday' },
   },
 }
 
 export const TrendNegative: Story = {
-  name: 'Trend — Negative',
+  name: 'Trend down',
   args: {
-    title: 'Error Rate',
+    title: 'Error rate',
     value: '1.2%',
-    icon: <Zap className="h-5 w-5" />,
     trend: { value: -18, label: 'vs last week' },
   },
 }
 
 export const InfraGrid: Story = {
-  name: 'Infrastructure Grid',
+  name: 'Infrastructure grid',
   render: () => (
     <div className="grid grid-cols-2 gap-4 w-[640px]">
       <StatCard
-        title="Active Sessions"
+        title="Active sessions"
         value={24}
         subtitle="across 3 regions"
-        icon={<Terminal className="h-5 w-5" />}
         trend={{ value: 12, label: 'vs last hour' }}
       />
       <StatCard
-        title="CPU Usage"
+        title="CPU usage"
         value="68%"
         subtitle="p95: 94%"
-        icon={<Cpu className="h-5 w-5" />}
         trend={{ value: -4, label: 'vs yesterday' }}
       />
       <StatCard
-        title="Memory Allocated"
+        title="Memory allocated"
         value="12.4 GB"
         subtitle="of 32 GB pool"
-        icon={<HardDrive className="h-5 w-5" />}
         trend={{ value: 8, label: 'vs last hour' }}
       />
       <StatCard
         variant="sandbox"
-        title="Estimated Cost"
+        title="Estimated cost"
         value="$142.80"
         subtitle="current billing cycle"
-        icon={<DollarSign className="h-5 w-5" />}
         trend={{ value: 3, label: 'vs last month' }}
       />
       <StatCard
-        title="Unique Users"
+        title="Unique users"
         value={312}
         subtitle="last 30 days"
-        icon={<Users className="h-5 w-5" />}
-        trend={{ value: 19, label: 'MoM' }}
+        trend={{ value: 19, label: 'vs last month' }}
       />
       <StatCard
-        title="Avg Startup Time"
+        title="Avg startup time"
         value="840ms"
         subtitle="p99: 1.4s"
-        icon={<Zap className="h-5 w-5" />}
         trend={{ value: -11, label: 'vs last week' }}
       />
     </div>

package/src/primitives/stat-card.tsx

@@ -57,7 +57,7 @@ const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
         <div className="flex items-start justify-between">
           <div className="space-y-1">
             <p className="text-muted-foreground text-sm">{title}</p>
-            <p className="font-bold text-3xl tracking-tight">{value}</p>
+            <p className="font-medium text-3xl tabular-nums tracking-tight">{value}</p>
             {/* A token, never `opacity-70` over the muted tone: a translucent
                 foreground renders as the token COMPOSITED over whatever plane sits
                 behind it, so the same class lands a different colour — and a

package/src/primitives/switch.stories.tsx

@@ -41,7 +41,7 @@ export const Overview: Story = {
   name: 'Overview',
   render: () => (
     <div className="flex flex-col gap-6 p-6 w-80">
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">States</div>
+      <div className="text-muted-foreground text-xs font-mono">States</div>
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between">
           <span className="text-sm text-muted-foreground">Off</span>
@@ -61,7 +61,7 @@ export const Overview: Story = {
         </div>
       </div>
 
-      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Settings panel</div>
+      <div className="text-muted-foreground text-xs font-mono mt-2">Settings panel</div>
       <div className="rounded-xl border border-border bg-card p-4 flex flex-col gap-4">
         {[
           { id: 'auto-sleep', label: 'Auto-sleep after idle', checked: true },

package/src/primitives/tabs.stories.tsx

@@ -104,7 +104,7 @@ export const Overview: Story = {
   render: () => (
     <div className="flex flex-col gap-10 p-6 w-[480px]">
       <div>
-        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mb-4">Default (segmented)</div>
+        <div className="text-muted-foreground text-xs font-mono mb-4">Default (segmented)</div>
         <Tabs defaultValue="overview">
           <TabsList>
             <TabsTrigger value="overview">Overview</TabsTrigger>
@@ -137,7 +137,7 @@ export const Overview: Story = {
       </div>
 
       <div>
-        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mb-4">Pills</div>
+        <div className="text-muted-foreground text-xs font-mono mb-4">Pills</div>
         <Tabs defaultValue="all">
           <TabsList variant="pills">
             <TabsTrigger value="all" variant="pills">All</TabsTrigger>
@@ -157,7 +157,7 @@ export const Overview: Story = {
       </div>
 
       <div>
-        <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mb-4">Underline</div>
+        <div className="text-muted-foreground text-xs font-mono mb-4">Underline</div>
         <Tabs defaultValue="settings">
           <TabsList variant="underline">
             <TabsTrigger value="settings" variant="underline">Settings</TabsTrigger>