@tangle-network/ui 11.51.16 → 11.51.17

package/src/primitives/toast.tsx

@@ -13,7 +13,7 @@ import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 
 const toastVariants = cva(
-  "pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all",
+  "pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-[transform,opacity]",
   {
     variants: {
       variant: {

package/src/primitives/upload-progress.tsx

@@ -67,8 +67,8 @@ export function UploadProgress({ files, onRemove, onRetry, className }: UploadPr
             {file.status === "uploading" && file.progress !== undefined && (
               <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-muted/50">
                 <div
-                  className="h-full rounded-full bg-primary transition-all"
-                  style={{ width: `${file.progress}%` }}
+                  className="h-full w-full rounded-full bg-primary transition-transform duration-300 ease-out"
+                  style={{ transform: `translateX(-${100 - file.progress}%)` }}
                 />
               </div>
             )}

package/src/primitives/wizard.tsx

@@ -137,7 +137,7 @@ export function Wizard({ children, step, defaultStep = 0, onStepChange, onFinish
           </p>
           <div className="mt-2 h-1 overflow-hidden rounded-full bg-muted" role="progressbar"
             aria-valuemin={1} aria-valuemax={total} aria-valuenow={current + 1} aria-label={`Step ${current + 1} of ${total}`}>
-            <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${((current + 1) / total) * 100}%` }} />
+            <div className="h-full w-full rounded-full bg-primary transition-transform duration-300 ease-out" style={{ transform: `translateX(-${100 - ((current + 1) / total) * 100}%)` }} />
           </div>
         </div>
         {steps.map((child, index) => index === current

package/src/run/expandable-content.tsx

@@ -68,7 +68,7 @@ export function ExpandableContent({
           type="button"
           onClick={() => setExpanded((value) => !value)}
           className={cn(
-            "mt-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground",
+            "mt-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
             toggleClassName,
           )}
         >

package/src/run/expanded-tool-detail.tsx

@@ -128,7 +128,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
         <div className="overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card">
           <div className="flex items-center gap-2 border-b border-border bg-background px-3 py-2">
             <ArrowRight className="h-3 w-3 text-primary" />
-            <span className="text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground">
+            <span className="text-xs font-medium text-muted-foreground">
               Input
             </span>
           </div>
@@ -141,7 +141,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
         <div className="overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card">
           <div className="flex items-center gap-2 border-b border-border bg-background px-3 py-2">
             <ArrowLeft className="h-3 w-3 text-primary" />
-            <span className="text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground">
+            <span className="text-xs font-medium text-muted-foreground">
               Output
             </span>
           </div>
@@ -164,7 +164,7 @@ export const ExpandedToolDetail = memo(({ part }: ExpandedToolDetailProps) => {
         <div className="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--surface-danger-border)]">
           <div className="flex items-center gap-2 border-b border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-2">
             <RunStatusIcon status="failed" aria-hidden className="size-3" />
-            <span className="text-xs font-medium uppercase tracking-[0.08em] text-[var(--surface-danger-text)]">
+            <span className="text-xs font-medium text-[var(--surface-danger-text)]">
               Error
             </span>
           </div>

package/src/run/inline-thinking-item.stories.tsx

@@ -154,11 +154,11 @@ export const UnifiedWithToolRow: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="p-6 max-w-2xl space-y-3">
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1">Active</p>
+      <p className="text-xs font-mono text-muted-foreground px-1">Active</p>
       <InlineThinkingItem part={thinkingActive} defaultOpen={true} autoCollapse={false} />
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Complete (collapsed)</p>
+      <p className="text-xs font-mono text-muted-foreground px-1 pt-2">Complete (collapsed)</p>
       <InlineThinkingItem part={thinkingComplete} defaultOpen={false} autoCollapse={false} />
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Complete (expanded)</p>
+      <p className="text-xs font-mono text-muted-foreground px-1 pt-2">Complete (expanded)</p>
       <InlineThinkingItem part={thinkingLong} defaultOpen={true} autoCollapse={false} />
     </div>
   ),

package/src/run/inline-tool-item.stories.tsx

@@ -211,11 +211,11 @@ export const GroupedSequence: Story = {
 export const AllStates: Story = {
   render: () => (
     <div className="p-6 max-w-2xl space-y-3">
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1">Completed</p>
+      <p className="text-xs font-mono text-muted-foreground px-1">Completed</p>
       <InlineToolItem part={bashComplete} groupPosition="single" />
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Running</p>
+      <p className="text-xs font-mono text-muted-foreground px-1 pt-2">Running</p>
       <InlineToolItem part={bashRunning} groupPosition="single" />
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Error</p>
+      <p className="text-xs font-mono text-muted-foreground px-1 pt-2">Error</p>
       <InlineToolItem part={bashError} groupPosition="single" />
     </div>
   ),

package/src/run/run-group.tsx

@@ -80,7 +80,7 @@ const DEFAULT_BRANDING: AgentBranding = {
 };
 
 const ASSISTANT_SHELL =
-  "min-w-0 flex-1 space-y-3 rounded-[26px] border border-[var(--border-subtle)] bg-[color:color-mix(in_srgb,var(--bg-card)_94%,transparent)] px-5 py-4 shadow-[0_1px_2px_rgba(15,23,42,0.04)]";
+  "min-w-0 flex-1 space-y-3 rounded-[var(--radius-panel)] border border-[var(--border-subtle)] bg-[color:color-mix(in_srgb,var(--bg-card)_94%,transparent)] px-5 py-4 shadow-[0_1px_2px_rgba(15,23,42,0.04)]";
 
 function AssistantShell({
   branding,
@@ -251,7 +251,7 @@ function CategoryBadges({ categories }: { categories: Set<ToolCategory> }) {
           <span
             key={cat}
             title={cat}
-            className="flex h-5 w-5 items-center justify-center rounded border border-border text-muted-foreground"
+            className="flex h-5 w-5 items-center justify-center text-muted-foreground"
           >
             <Icon className="h-3 w-3" />
           </span>
@@ -326,10 +326,10 @@ export const RunGroup = memo(
     const pendingResponse = (
       <AssistantShell branding={branding} isStreaming={true}>
         <div className="flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]">
-          <span className="flex gap-[5px]">
-            <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "0ms" }} />
-            <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "150ms" }} />
-            <span className="h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "300ms" }} />
+          <span className="flex gap-1">
+            <span className="h-2 w-2 animate-[tangle-breathe_var(--motion-ambient)_infinite] motion-reduce:animate-none rounded-full bg-[var(--brand-glow)]" />
+            <span className="h-2 w-2 animate-[tangle-breathe_var(--motion-ambient)_infinite] motion-reduce:animate-none rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "200ms" }} />
+            <span className="h-2 w-2 animate-[tangle-breathe_var(--motion-ambient)_infinite] motion-reduce:animate-none rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "400ms" }} />
           </span>
         </div>
       </AssistantShell>
@@ -474,16 +474,16 @@ export const RunGroup = memo(
                   {branding.label}
                 </span>
                 {renderSummary(run) ? (
-                  <span className="text-[11px] text-muted-foreground">{renderSummary(run)}</span>
+                  <span className="text-xs text-muted-foreground">{renderSummary(run)}</span>
                 ) : null}
                 {collapsed && run.summaryText ? (
-                  <span className="min-w-0 truncate text-[11px] text-foreground/70">
+                  <span className="min-w-0 truncate text-xs text-foreground/70">
                     {run.summaryText}
                   </span>
                 ) : null}
                 <span className="ml-auto flex shrink-0 items-center gap-1.5">
                   <CategoryBadges categories={stats.toolCategories} />
-                  <span className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-px text-[10px] font-semibold uppercase text-muted-foreground">
+                  <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                     <RunStatusIcon status={isStreaming ? "running" : "done"} aria-hidden className="size-3" />
                     {statusMeta(isStreaming ? "running" : "done").label}
                   </span>

package/src/run/run-item-primitives.tsx

@@ -5,7 +5,7 @@ export function LiveDuration({ startTime }: { startTime: number }) {
   const elapsed = useLiveTime(100) - startTime;
 
   return (
-    <span className="text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums">
+    <span className="text-xs font-mono text-muted-foreground tabular-nums">
       {formatDuration(elapsed)}
     </span>
   );

package/src/styles/presentation.css

@@ -5,7 +5,7 @@
 .tangle-heading[data-variant="page"] { font-size: var(--font-size-3xl); }
 .tangle-heading[data-variant="section"] { font-size: var(--font-size-xl); }
 .tangle-heading[data-variant="subsection"] { font-size: var(--font-size-base); }
-.tangle-heading[data-variant="eyebrow"] { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: hsl(var(--muted-foreground)); }
+.tangle-heading[data-variant="eyebrow"] { font-size: var(--font-size-xs); line-height: 1rem; font-weight: 500; letter-spacing: 0; color: hsl(var(--muted-foreground)); }
 .tangle-page-header { min-width: 0; margin-bottom: 1.5rem; }
 .tangle-page-header-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
 .tangle-intro .tangle-page-header-main { display: block; }

package/src/tool-previews/command-preview.tsx

@@ -139,7 +139,7 @@ function ExitBadge({
 }) {
   if (status === "running" || status === "pending") {
     return (
-      <span className="inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground">
+      <span className="inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground">
         <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" />
         running
       </span>
@@ -171,7 +171,7 @@ function ExitBadge({
     <span
       className={cn(
         // Every badge has a border, so mixed rows keep one height.
-        "inline-flex shrink-0 items-center rounded-full border px-1.5 py-px font-sans text-[11px] font-medium tabular-nums",
+        "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" &&
@@ -253,7 +253,7 @@ function OutputRegion({
           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",
+            "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,
           )}
         >

package/src/tool-previews/diff-preview.tsx

@@ -64,7 +64,7 @@ export const DiffPreview = memo(({ part }: DiffPreviewProps) => {
       ) : null}
       {!payload.diff && payload.before ? (
         <div className="space-y-2">
-          <div className="text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+          <div className="text-xs font-medium text-muted-foreground">
             Before
           </div>
           <CodeBlock code={payload.before} language="text" className="rounded-[var(--radius-md)]" />
@@ -72,7 +72,7 @@ export const DiffPreview = memo(({ part }: DiffPreviewProps) => {
       ) : null}
       {!payload.diff && payload.after ? (
         <div className="space-y-2">
-          <div className="text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+          <div className="text-xs font-medium text-muted-foreground">
             After
           </div>
           <CodeBlock code={payload.after} language="text" className="rounded-[var(--radius-md)]" />

package/src/tool-previews/question-preview.tsx

@@ -83,7 +83,7 @@ export const QuestionPreview = memo(({ part }: QuestionPreviewProps) => {
           key={`${question}-${index}`}
           className="rounded-[var(--radius-md)] border border-border bg-muted px-3 py-3"
         >
-          <div className="text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+          <div className="text-xs font-medium text-muted-foreground">
             Question {index + 1}
           </div>
           <div className="mt-2 text-sm leading-relaxed text-foreground">