@tangle-network/ui 11.40.0 → 11.40.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @tangle-network/ui
 
+## 11.40.1
+
+### Patch Changes
+
+- af0c788: Give Button, Input and SelectTrigger a shared 44px minimum in both dimensions on coarse primary pointers, including compact density. Icon buttons keep a square 44px touch target. Fine-pointer sizes and the existing field text floor are unchanged.
+  
+  Name UploadProgress retry and remove actions after their file, and render them with the shared ghost icon Button for consistent focus and hit areas. Actions remain non-submitting buttons; retry is available only for failed files.
+
 ## 11.40.0
 
 ### Minor Changes

package/dist/lib/control-presentation.d.ts

@@ -35,7 +35,7 @@ export declare const fieldSizes: {
   readonly lg: string;
 };
 export declare const controlSizes: {
-  readonly compact: "h-[var(--control-height)] px-3 py-1 text-sm";
+  readonly compact: "h-[var(--control-height)] px-3 py-1 text-sm pointer-coarse:min-h-11 pointer-coarse:min-w-11";
   readonly touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base";
 };
 export declare const fieldPresentation: string;

package/dist/lib/control-presentation.js

@@ -30,18 +30,20 @@ const controlSquare = {
 */
 const fieldTouchText = "pointer-coarse:text-base";
 /**
-* A control that is shorter than 44px on a fine pointer still gets a 44px hit
-* height on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+* A control smaller than 44px on a fine pointer still gets a 44px target
+* in both dimensions on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+* Follow the primary pointer, matching SegmentedControl; a secondary touch
+* input alone does not inflate a fine-pointer desktop layout.
 */
-const touchTarget = "pointer-coarse:min-h-11";
+const touchTarget = "pointer-coarse:min-h-11 pointer-coarse:min-w-11";
 /** Field sizes: the control scale with field padding. */
 const fieldSizes = {
-	sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, "px-2.5"),
-	md: cn(controlHeight.md, controlText.md, controlRadius.md, "px-3"),
-	lg: cn(controlHeight.lg, controlText.lg, controlRadius.lg, "px-4")
+	sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, touchTarget, "px-2.5"),
+	md: cn(controlHeight.md, controlText.md, controlRadius.md, touchTarget, "px-3"),
+	lg: cn(controlHeight.lg, controlText.lg, controlRadius.lg, touchTarget, "px-4")
 };
 const controlSizes = {
-	compact: "h-[var(--control-height)] px-3 py-1 text-sm",
+	compact: `h-[var(--control-height)] px-3 py-1 text-sm ${touchTarget}`,
 	touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base"
 };
 const fieldPresentation = cn(focusField, ixField, controlMotion, "min-w-0 text-foreground", "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]", "autofill:shadow-[inset_0_0_0_1000px_var(--field-surface,var(--well))] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]");

package/dist/presentation.js

@@ -2,7 +2,7 @@ import { controlMotion, surfaceMotion } from "./lib/motion.js";
 import { ixControl, ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 import { focusFieldInvalid, focusRing } from "./lib/focus.js";
 import { cn } from "./lib/utils.js";
-import { controlHeight, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "./lib/control-presentation.js";
+import { controlHeight, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText, touchTarget } from "./lib/control-presentation.js";
 import { cva } from "class-variance-authority";
 //#region src/presentation.ts
 /** React-free presentation. Consumers scan this published source with Tailwind. */
@@ -19,15 +19,15 @@ const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whites
 			sandbox: `bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] ${ixControl}`
 		},
 		size: {
-			default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
-			md: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
-			sm: `${controlHeight.sm} ${controlText.sm} ${controlRadius.sm} px-3`,
-			lg: `${controlHeight.lg} ${controlText.lg} ${controlRadius.lg} px-7`,
+			default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} ${touchTarget} px-4 py-2`,
+			md: `${controlHeight.md} ${controlText.md} ${controlRadius.md} ${touchTarget} px-4 py-2`,
+			sm: `${controlHeight.sm} ${controlText.sm} ${controlRadius.sm} ${touchTarget} px-3`,
+			lg: `${controlHeight.lg} ${controlText.lg} ${controlRadius.lg} ${touchTarget} px-7`,
 			display: "tangle-control-display",
 			xl: "h-13 rounded-xl px-9 text-base",
-			icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md}`,
-			"icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm}`,
-			"icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg}`,
+			icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md} ${touchTarget}`,
+			"icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm} ${touchTarget}`,
+			"icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg} ${touchTarget}`,
 			...controlSizes
 		}
 	},

package/dist/primitives/segmented-control.js

@@ -152,7 +152,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 						"aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]"
 					], variant === "tabs" && [
 						"shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2",
-						"pointer-coarse:min-h-11",
+						"pointer-coarse:min-h-11 pointer-coarse:min-w-11",
 						focusRingInset,
 						"hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]"
 					], active ? "text-[var(--accent-text)]" : "text-muted-foreground hover:text-foreground"),

package/dist/primitives/upload-progress.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircle, CheckCircle2, FileText, Loader2, RefreshCw, X } from "lucide-react";
 //#region src/primitives/upload-progress.tsx
@@ -52,16 +53,20 @@ function UploadProgress({ files, onRemove, onRetry, className }) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex shrink-0 items-center gap-1",
-					children: [file.status === "error" && onRetry && /* @__PURE__ */ jsx("button", {
+					children: [file.status === "error" && onRetry && /* @__PURE__ */ jsx(Button, {
 						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
 						onClick: () => onRetry(file.id),
-						className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-						children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3.5 w-3.5" })
-					}), onRemove && /* @__PURE__ */ jsx("button", {
+						"aria-label": `Retry ${file.name}`,
+						children: /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" })
+					}), onRemove && /* @__PURE__ */ jsx(Button, {
 						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
 						onClick: () => onRemove(file.id),
-						className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-						children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+						"aria-label": `Remove ${file.name}`,
+						children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
 					})]
 				})
 			]

package/package.json

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

package/src/lib/control-presentation.ts

@@ -46,22 +46,24 @@ export const controlSquare = {
 export const fieldTouchText = "pointer-coarse:text-base";
 
 /**
- * A control that is shorter than 44px on a fine pointer still gets a 44px hit
- * height on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+ * A control smaller than 44px on a fine pointer still gets a 44px target
+ * in both dimensions on a coarse one (WCAG 2.5.5, Apple HIG). Same floor as `touch`.
+ * Follow the primary pointer, matching SegmentedControl; a secondary touch
+ * input alone does not inflate a fine-pointer desktop layout.
  */
-export const touchTarget = "pointer-coarse:min-h-11";
+export const touchTarget = "pointer-coarse:min-h-11 pointer-coarse:min-w-11";
 
 /** Field sizes: the control scale with field padding. */
 export const fieldSizes = {
-  sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, "px-2.5"),
-  md: cn(controlHeight.md, controlText.md, controlRadius.md, "px-3"),
-  lg: cn(controlHeight.lg, controlText.lg, controlRadius.lg, "px-4"),
+  sm: cn(controlHeight.sm, controlText.sm, controlRadius.sm, touchTarget, "px-2.5"),
+  md: cn(controlHeight.md, controlText.md, controlRadius.md, touchTarget, "px-3"),
+  lg: cn(controlHeight.lg, controlText.lg, controlRadius.lg, touchTarget, "px-4"),
 } as const satisfies Record<ControlSize, string>;
 
 // Explicit opt-in sizes kept for existing callers. Compact follows the
 // consumer's density token (md); touch is lg with a guaranteed 44px minimum.
 export const controlSizes = {
-  compact: "h-[var(--control-height)] px-3 py-1 text-sm",
+  compact: `h-[var(--control-height)] px-3 py-1 text-sm ${touchTarget}`,
   touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base",
 } as const;
 

package/src/presentation.ts

@@ -1,7 +1,7 @@
 /** React-free presentation. Consumers scan this published source with Tailwind. */
 import { surfaceMotion } from "./lib/motion";
 import { cva } from "class-variance-authority";
-import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText } from "./lib/control-presentation";
+import { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText, touchTarget } from "./lib/control-presentation";
 import { focusRing, focusFieldInvalid } from "./lib/focus";
 import { ixControl, ixControlSoft, ixSelected, ixTabUnderline } from "./lib/interaction";
 import { cn } from "./lib/utils";
@@ -29,15 +29,15 @@ export const buttonVariants = cva(
           `bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] ${ixControl}`,
       },
       size: {
-        default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
-        md: `${controlHeight.md} ${controlText.md} ${controlRadius.md} px-4 py-2`,
-        sm: `${controlHeight.sm} ${controlText.sm} ${controlRadius.sm} px-3`,
-        lg: `${controlHeight.lg} ${controlText.lg} ${controlRadius.lg} px-7`,
+        default: `${controlHeight.md} ${controlText.md} ${controlRadius.md} ${touchTarget} px-4 py-2`,
+        md: `${controlHeight.md} ${controlText.md} ${controlRadius.md} ${touchTarget} px-4 py-2`,
+        sm: `${controlHeight.sm} ${controlText.sm} ${controlRadius.sm} ${touchTarget} px-3`,
+        lg: `${controlHeight.lg} ${controlText.lg} ${controlRadius.lg} ${touchTarget} px-7`,
         display: "tangle-control-display",
         xl: "h-13 rounded-xl px-9 text-base",
-        icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md}`,
-        "icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm}`,
-        "icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg}`,
+        icon: `${controlSquare.md} ${controlText.md} ${controlRadius.md} ${touchTarget}`,
+        "icon-sm": `${controlSquare.sm} ${controlText.sm} ${controlRadius.sm} ${touchTarget}`,
+        "icon-lg": `${controlSquare.lg} ${controlText.lg} ${controlRadius.lg} ${touchTarget}`,
         ...controlSizes,
       },
     },

package/src/primitives/control-presentation.stories.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./button";
+import { X } from "lucide-react";
 import { HelpText } from "./help-text";
 import { Input, Textarea } from "./input";
 import { Label } from "./label";
@@ -13,7 +14,7 @@ function Contract() {
   return (
     <main className="mx-auto max-w-5xl space-y-6 bg-background p-4 text-foreground" data-presentation-contract>
       <h1 className="text-xl font-semibold">Field and metric presentation</h1>
-      {(["sm", "md", "lg", "compact", "touch"] as const).map((size) => (
+      {(["default", "sm", "md", "lg", "compact", "touch"] as const).map((size) => (
         <section key={size} data-size-row={size} className="space-y-2">
           <h2 className="font-semibold">{size}</h2>
           <div className="flex flex-wrap items-end gap-3">
@@ -27,10 +28,16 @@ function Contract() {
             </Select>
             <Button size={size} onClick={() => setActions((value) => value + 1)}>Save</Button>
             <Button size={size} variant="outline">Cancel</Button>
+            <Button size={size} aria-label={`${size} short action`}>+</Button>
           </div>
           <Textarea size={size} aria-label={`${size} notes`} placeholder="Details" />
         </section>
       ))}
+      <section className="flex flex-wrap gap-3" aria-label="Icon controls">
+        {(["icon-sm", "icon", "icon-lg"] as const).map((size) => (
+          <Button key={size} size={size} aria-label={`${size} action`} onClick={() => setActions((value) => value + 1)}><X aria-hidden="true" /></Button>
+        ))}
+      </section>
       <section className="max-w-sm space-y-1.5" data-form-text>
         <Label htmlFor="workspace-name">Workspace name</Label>
         <Input id="workspace-name" aria-describedby="workspace-name-hint" placeholder="Acme" />

package/src/primitives/upload-progress.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { Button } from './button'
 import { UploadProgress, type UploadFile } from './upload-progress'
 
 const meta: Meta<typeof UploadProgress> = {
@@ -7,7 +9,7 @@ const meta: Meta<typeof UploadProgress> = {
   parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
   decorators: [
     (Story) => (
-      <div className="w-[420px]">
+      <div className="w-[420px] max-w-[calc(100vw-2rem)]">
         <Story />
       </div>
     ),
@@ -118,3 +120,36 @@ export const NoActions: Story = {
   name: 'No remove / retry handlers',
   args: { files: [complete, uploading45, error] },
 }
+
+// A failed upload inside a form, as used by the Agent Builder cover field.
+// Each retry becomes pending; a new observed failure makes retry available again.
+const cover: UploadFile = {
+  id: 'cover',
+  name: 'cover-image-with-a-long-filename-for-project-review.png',
+  size: 2048,
+  status: 'error',
+  error: 'The upload failed. Try again or remove this file.',
+}
+
+function RecoveryExample() {
+  const [files, setFiles] = useState<UploadFile[]>([cover, complete])
+  const [retries, setRetries] = useState(0)
+  const [submits, setSubmits] = useState(0)
+  return (
+    <form className="space-y-4" onSubmit={(event) => { event.preventDefault(); setSubmits((count) => count + 1) }}>
+      <UploadProgress
+        files={files}
+        onRetry={(id) => {
+          setRetries((count) => count + 1)
+          setFiles((current) => current.map((file) => file.id === id ? { ...file, status: 'pending', error: undefined } : file))
+        }}
+        onRemove={(id) => setFiles((current) => current.filter((file) => file.id !== id))}
+      />
+      <Button type="button" variant="outline" onClick={() => setFiles((current) => current.map((file) => file.id === cover.id ? cover : file))}>Simulate another failure</Button>
+      <output className="block text-foreground" aria-label="Retry count">{retries}</output>
+      <output className="block text-foreground" aria-label="Form submissions">{submits}</output>
+    </form>
+  )
+}
+
+export const Recovery: Story = { render: () => <RecoveryExample /> }

package/src/primitives/upload-progress.tsx

@@ -7,6 +7,7 @@
 
 import { AlertCircle, CheckCircle2, FileText, Loader2, RefreshCw, X } from "lucide-react";
 import { cn } from "../lib/utils";
+import { Button } from "./button";
 
 export interface UploadFile {
   id: string;
@@ -85,22 +86,26 @@ export function UploadProgress({ files, onRemove, onRetry, className }: UploadPr
           {/* Actions */}
           <div className="flex shrink-0 items-center gap-1">
             {file.status === "error" && onRetry && (
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="icon-sm"
                 onClick={() => onRetry(file.id)}
-                className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                aria-label={`Retry ${file.name}`}
               >
-                <RefreshCw className="h-3.5 w-3.5" />
-              </button>
+                <RefreshCw aria-hidden="true" />
+              </Button>
             )}
             {onRemove && (
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="icon-sm"
                 onClick={() => onRemove(file.id)}
-                className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                aria-label={`Remove ${file.name}`}
               >
-                <X className="h-3.5 w-3.5" />
-              </button>
+                <X aria-hidden="true" />
+              </Button>
             )}
           </div>
         </div>

package/src/styles/compat.css

@@ -1,10 +1,10 @@
 /* Generated by scripts/generate-presentation-css.mjs from shared primitive recipes. Requires Tailwind + Brand theme. */
 @layer components {
-  .btn { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-4 py-2; }
-  .btn-primary { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-4 py-2; }
-  .btn-secondary { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-4 py-2; }
-  .btn-danger { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-4 py-2; }
-  .input { @apply flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)] bg-[var(--field-surface,var(--well))] border-[var(--field-border)] shadow-[var(--shadow-well)] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--shadow-well),var(--ix-hover)] [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none min-w-0 text-foreground aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)] autofill:shadow-[inset_0_0_0_1000px_var(--field-surface,var(--well))] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)] pointer-coarse:text-base h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg px-3; }
+  .btn { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg pointer-coarse:min-h-11 pointer-coarse:min-w-11 px-4 py-2; }
+  .btn-primary { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg pointer-coarse:min-h-11 pointer-coarse:min-w-11 px-4 py-2; }
+  .btn-secondary { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg pointer-coarse:min-h-11 pointer-coarse:min-w-11 px-4 py-2; }
+  .btn-danger { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0 disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--ix-hover)] focus:not-focus-visible:border-[var(--ix-hover-border)] focus:not-focus-visible:shadow-[var(--ix-after)] active:border-[hsl(var(--hsl-ring))] active:shadow-[var(--ix-press)] focus-visible:shadow-none h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg pointer-coarse:min-h-11 pointer-coarse:min-w-11 px-4 py-2; }
+  .input { @apply flex w-full border py-1 placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)] bg-[var(--field-surface,var(--well))] border-[var(--field-border)] shadow-[var(--shadow-well)] hover:border-[var(--ix-hover-border)] hover:shadow-[var(--shadow-well),var(--ix-hover)] [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none min-w-0 text-foreground aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)] autofill:shadow-[inset_0_0_0_1000px_var(--field-surface,var(--well))] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)] pointer-coarse:text-base h-[var(--control-height,2.25rem)] text-[length:var(--control-text-md,0.875rem)] rounded-lg pointer-coarse:min-h-11 pointer-coarse:min-w-11 px-3; }
   .card { @apply rounded-[var(--radius-lg)] border text-card-foreground [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)] p-4; }
   .stat-card { @apply rounded-[var(--radius-lg)] border text-card-foreground [transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none bg-card border-border shadow-[var(--edge-highlight),var(--shadow-card)] min-w-0 border-border p-4 sm:p-5; }
   .table-header { @apply h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0; }