@tangle-network/ui 11.51.15 → 11.51.17

package/dist/run.d.ts

@@ -1,12 +1,13 @@
 import { ToolCallStatus, ToolCallType } from "./run/tool-call-step.js";
 import { FeedSegment, ToolCallData, ToolCallFeed, ToolCallFeedProps, parseToolEvent } from "./run/tool-call-feed.js";
 import { RunGroup, RunGroupProps } from "./run/run-group.js";
-import { RunRowShell, RunRowShellProps, RunRowStatus } from "./run/run-row-shell.js";
+import { RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot } from "./run/run-row-shell.js";
 import { InlineToolItem, InlineToolItemProps } from "./run/inline-tool-item.js";
 import { InlineThinkingItem, InlineThinkingItemProps } from "./run/inline-thinking-item.js";
 import { ExpandedToolDetail, ExpandedToolDetailProps } from "./run/expanded-tool-detail.js";
+import { LiveDuration } from "./run/run-item-primitives.js";
 import { TaskList, TaskListItem, TaskListProps, TaskStatus, showsTaskPriority, taskProgress, taskStatus } from "./run/task-list.js";
 import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep } from "./run/approval-card.js";
 import { RunPhase, RunPhaseList } from "./run/run-phase-list.js";
 import { RunStatus, RunStatusIcon, RunStatusIconProps, StatusMeta, isOpen, runStatus, statusMeta } from "./run/status-meta.js";
-export { ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, type RunStatus, RunStatusIcon, type RunStatusIconProps, type StatusMeta, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, isOpen, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };
+export { ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, type RunStatus, RunStatusIcon, type RunStatusIconProps, type StatusMeta, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, isOpen, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };

package/dist/run.js

@@ -1,11 +1,12 @@
 import { RunStatusIcon, isOpen, runStatus, statusMeta } from "./run/status-meta.js";
 import { ExpandedToolDetail } from "./run/expanded-tool-detail.js";
-import { RunRowShell } from "./run/run-row-shell.js";
+import { RunRowShell, RunRowStatusDot } from "./run/run-row-shell.js";
 import { InlineToolItem } from "./run/inline-tool-item.js";
 import { InlineThinkingItem } from "./run/inline-thinking-item.js";
 import { RunGroup } from "./run/run-group.js";
+import { LiveDuration } from "./run/run-item-primitives.js";
 import { ToolCallFeed, parseToolEvent } from "./run/tool-call-feed.js";
 import { TaskList, showsTaskPriority, taskProgress, taskStatus } from "./run/task-list.js";
 import { ApprovalCard, ApprovalDiffSummary } from "./run/approval-card.js";
 import { RunPhaseList } from "./run/run-phase-list.js";
-export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, RunGroup, RunPhaseList, RunRowShell, RunStatusIcon, TaskList, ToolCallFeed, isOpen, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };
+export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, isOpen, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };

package/dist/tool-previews/command-preview.js

@@ -107,7 +107,7 @@ function parseStructured(text) {
 *  prints below. A clean run stays quiet green. */
 function ExitBadge({ output, status }) {
 	if (status === "running" || status === "pending") return /* @__PURE__ */ jsxs("span", {
-		className: "inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground",
+		className: "inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground",
 		children: [/* @__PURE__ */ jsx(Loader2, {
 			className: "h-3 w-3 animate-spin",
 			"aria-hidden": "true"
@@ -134,7 +134,7 @@ function ExitBadge({ output, status }) {
 	}
 	if (label === null) return null;
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex shrink-0 items-center rounded-full border px-1.5 py-px font-sans text-[11px] font-medium tabular-nums", tone === "danger" && "border-transparent bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]", tone === "success" && "border-transparent bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]", tone === "warning" && "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]"),
+		className: cn("inline-flex shrink-0 items-center rounded-full border px-1.5 py-px font-sans text-xs font-medium tabular-nums", tone === "danger" && "border-transparent bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]", tone === "success" && "border-transparent bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]", tone === "warning" && "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]"),
 		children: label
 	});
 }
@@ -177,7 +177,7 @@ function OutputRegion({ label, text, className }) {
 		}), clipped && !full ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => setFull(true),
-			className: cn("w-full border-t border-white/10 px-3 py-1.5 text-left font-sans text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground", focusRing),
+			className: cn("w-full border-t border-white/10 px-3 py-1.5 text-left font-sans text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", focusRing),
 			children: [
 				"Show all ",
 				label,

package/dist/tool-previews/diff-preview.js

@@ -49,7 +49,7 @@ const DiffPreview = memo(({ part }) => {
 			!payload.diff && payload.before ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground",
+					className: "text-xs font-medium text-muted-foreground",
 					children: "Before"
 				}), /* @__PURE__ */ jsx(CodeBlock, {
 					code: payload.before,
@@ -60,7 +60,7 @@ const DiffPreview = memo(({ part }) => {
 			!payload.diff && payload.after ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground",
+					className: "text-xs font-medium text-muted-foreground",
 					children: "After"
 				}), /* @__PURE__ */ jsx(CodeBlock, {
 					code: payload.after,

package/dist/tool-previews/question-preview.js

@@ -42,7 +42,7 @@ const QuestionPreview = memo(({ part }) => {
 				className: "rounded-[var(--radius-md)] border border-border bg-muted px-3 py-3",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: "text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground",
+						className: "text-xs font-medium text-muted-foreground",
 						children: ["Question ", index + 1]
 					}),
 					/* @__PURE__ */ jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.15",
+  "version": "11.51.17",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/thinking-indicator.tsx

@@ -19,10 +19,8 @@ export function ThinkingIndicator({ className }: ThinkingIndicatorProps) {
       aria-label="Agent is thinking"
       className={cn("flex items-center gap-2 px-3 py-1.5", className)}
     >
-      <div className="flex gap-[3px]">
-        <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "0ms" }} />
-        <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "150ms" }} />
-        <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "300ms" }} />
+      <div className="flex gap-1">
+        {[0, 200, 400].map((delay) => <span key={delay} className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-[tangle-breathe_var(--motion-ambient)_infinite] rounded-full bg-[var(--brand-glow)] motion-reduce:animate-none" style={{ animationDelay: `${delay}ms` }} />)}
       </div>
       {elapsed > 3 && (
         <span className="text-[length:var(--font-size-xs)] tabular-nums text-muted-foreground">

package/src/editor/document-editor-pane.stories.tsx

@@ -9,7 +9,7 @@ Source: \`github.com/tangle-network/gtm-agent\`
 
 ## What It Is
 
-GTM Agent is an AI-powered go-to-market workspace where founders get a sandboxed environment.
+GTM Agent is a go-to-market workspace where founders get a sandboxed environment.
 
 ## Architecture
 

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>