@kinetixui/ui 0.17.0 → 0.19.0

package/dist/index.js

@@ -60,7 +60,7 @@ var buttonVariants = cva(
         // (light: 90% = 5.05, 85% = 4.54, 80% = 4.11 fails) — enforced by check:contrast.
         // (the old hover:bg-[--color-blue-600] was a hard-coded dark navy — on dark mode,
         //  where --primary is light, it inverted the button into the near-black background.)
-        Primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/85 disabled:bg-border disabled:text-muted-foreground",
+        Primary: "bg-action text-action-foreground hover:bg-action/90 active:bg-action/85 disabled:bg-border disabled:text-muted-foreground",
         // rest = --secondary; hover/active promote to the --secondary-foreground fill with
         //  inverted text — theme-aware, unlike the previous hard-coded green primitives.
         //  Active is solid like hover: dimming it (90% was 3.97:1) drops the text under AA,
@@ -68,12 +68,12 @@ var buttonVariants = cva(
         Secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground active:text-secondary focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
         // 1px outline; hover fills with accent + strengthens the edge to --ring so the
         // state stays visible on the darkest surfaces (WCAG 2.2 SC 1.4.11); active pins primary
-        Outline: "border border-input bg-transparent text-foreground hover:border-ring hover:bg-accent active:border-primary active:bg-accent active:text-primary disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
+        Outline: "border border-input bg-transparent text-foreground hover:border-ring hover:bg-accent active:border-action active:bg-accent active:text-action disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
         Destructive: "bg-destructive text-destructive-foreground hover:brightness-95 active:brightness-90 disabled:bg-border disabled:text-muted-foreground",
         // transparent rest; hover adds an inset --ring outline (the accent fill alone is
         // <3:1 against the page on dark) plus the accent fill; active pins primary text
-        Ghost: "bg-transparent text-foreground hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring active:bg-accent active:text-primary active:ring-0 disabled:text-muted-foreground disabled:bg-transparent",
-        Link: "bg-transparent text-primary underline-offset-4 hover:underline hover:text-foreground rounded-none px-0 disabled:text-muted-foreground disabled:no-underline"
+        Ghost: "bg-transparent text-foreground hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring active:bg-accent active:text-action active:ring-0 disabled:text-muted-foreground disabled:bg-transparent",
+        Link: "bg-transparent text-link underline-offset-4 hover:underline hover:text-foreground rounded-none px-0 disabled:text-muted-foreground disabled:no-underline"
       },
       size: {
         // padding = Figma spacing/3 + spacing/2 ; type = Label Small (11/16, +0.5 tracking)
@@ -102,14 +102,14 @@ var buttonVariants = cva(
     },
     compoundVariants: [
       { variant: "Destructive", class: "focus-visible:shadow-focus-destructive" },
-      { variant: "Primary", state: "Hover", class: "bg-primary/90" },
-      { variant: "Primary", state: "Active", class: "bg-primary/85" },
+      { variant: "Primary", state: "Hover", class: "bg-action/90" },
+      { variant: "Primary", state: "Active", class: "bg-action/85" },
       { variant: "Secondary", state: "Hover", class: "bg-secondary-foreground text-secondary" },
       { variant: "Secondary", state: "Active", class: "bg-secondary-foreground text-secondary" },
       { variant: "Outline", state: "Hover", class: "border-ring bg-accent" },
-      { variant: "Outline", state: "Active", class: "border-primary bg-accent text-primary" },
+      { variant: "Outline", state: "Active", class: "border-action bg-accent text-action" },
       { variant: "Ghost", state: "Hover", class: "bg-accent ring-1 ring-inset ring-ring" },
-      { variant: "Ghost", state: "Active", class: "bg-accent text-primary" },
+      { variant: "Ghost", state: "Active", class: "bg-accent text-action" },
       { variant: "Link", state: "Hover", class: "underline text-foreground" },
       { variant: "Link", size: ["sm", "md", "lg"], class: "py-2 px-0 h-auto" }
     ],
@@ -145,7 +145,7 @@ var inputVariants = cva2(
     "font-sans text-body-md text-foreground",
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
-    "focus-visible:border-primary focus-visible:shadow-focus",
+    "focus-visible:border-action focus-visible:shadow-focus",
     "disabled:cursor-not-allowed disabled:opacity-disabled",
     "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive"
   ],
@@ -153,7 +153,7 @@ var inputVariants = cva2(
     variants: {
       state: {
         Default: "",
-        Focus: "border-primary shadow-focus",
+        Focus: "border-action shadow-focus",
         Error: "border-destructive",
         Disabled: "opacity-disabled pointer-events-none"
       },
@@ -195,7 +195,7 @@ var textareaVariants = cva3(
     "font-sans text-body-md text-foreground",
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
-    "focus-visible:border-primary focus-visible:shadow-focus",
+    "focus-visible:border-action focus-visible:shadow-focus",
     "disabled:cursor-not-allowed disabled:opacity-disabled",
     "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive"
   ],
@@ -203,7 +203,7 @@ var textareaVariants = cva3(
     variants: {
       state: {
         Default: "",
-        Focus: "border-primary shadow-focus",
+        Focus: "border-action shadow-focus",
         Error: "border-destructive",
         Disabled: "opacity-disabled pointer-events-none resize-none"
       }
@@ -429,7 +429,7 @@ var badgeVariants = cva5(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground",
+        default: "bg-action text-action-foreground",
         secondary: "bg-secondary-foreground text-secondary",
         destructive: "bg-destructive text-destructive-foreground",
         outline: "border border-input text-foreground",
@@ -546,8 +546,8 @@ var Checkbox = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__
       "peer size-[18px] shrink-0 rounded-sm border-2 border-input outline-none transition-colors",
       "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
       "disabled:cursor-not-allowed disabled:opacity-disabled",
-      "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      "data-[state=checked]:border-action data-[state=checked]:bg-action data-[state=checked]:text-action-foreground",
+      "data-[state=indeterminate]:border-action data-[state=indeterminate]:bg-action data-[state=indeterminate]:text-action-foreground",
       "aria-invalid:border-destructive aria-invalid:data-[state=checked]:border-destructive aria-invalid:data-[state=checked]:bg-destructive",
       className
     ),
@@ -814,7 +814,7 @@ var Progress = React18.forwardRef(({ className, value, ...props }, ref) => /* @_
     children: /* @__PURE__ */ jsx19(
       ProgressPrimitive.Indicator,
       {
-        className: "size-full flex-1 bg-primary transition-transform",
+        className: "size-full flex-1 bg-action transition-transform",
         style: { transform: `translateX(-${100 - (value || 0)}%)` }
       }
     )
@@ -834,15 +834,15 @@ var RadioGroupItem = React19.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "aspect-square size-[18px] rounded-full border-2 border-input text-primary outline-none transition-colors",
+      "aspect-square size-[18px] rounded-full border-2 border-input text-action outline-none transition-colors",
       "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
       "disabled:cursor-not-allowed disabled:opacity-disabled",
-      "data-[state=checked]:border-primary",
+      "data-[state=checked]:border-action",
       "aria-invalid:border-destructive",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx20(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx20(Circle2, { className: "size-2.5 fill-primary text-primary" }) })
+    children: /* @__PURE__ */ jsx20(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx20(Circle2, { className: "size-2.5 fill-action text-action" }) })
   }
 ));
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
@@ -852,7 +852,7 @@ import * as React20 from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 var ScrollArea = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
-  /* @__PURE__ */ jsx21(ScrollAreaPrimitive.Viewport, { className: "size-full rounded-[inherit]", children }),
+  /* @__PURE__ */ jsx21(ScrollAreaPrimitive.Viewport, { tabIndex: 0, className: "size-full rounded-[inherit] outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", children }),
   /* @__PURE__ */ jsx21(ScrollBar, {}),
   /* @__PURE__ */ jsx21(ScrollAreaPrimitive.Corner, {})
 ] }));
@@ -891,8 +891,8 @@ var SelectTrigger = React21.forwardRef(({ className, children, ...props }, ref)
       "font-sans text-body-md text-foreground",
       "data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
       "outline-none transition-colors",
-      "focus:border-primary focus:shadow-focus",
-      "data-[state=open]:border-primary",
+      "focus:border-action focus:shadow-focus",
+      "data-[state=open]:border-action",
       "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus:shadow-focus-destructive",
       "disabled:cursor-not-allowed disabled:opacity-disabled",
       className
@@ -1111,7 +1111,7 @@ function Modal({
 // src/components/skeleton.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx26("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
+  return /* @__PURE__ */ jsx26("div", { className: cn("animate-pulse rounded-md bg-muted motion-reduce:animate-none", className), ...props });
 }
 
 // src/components/slider.tsx
@@ -1125,13 +1125,13 @@ var Slider = React24.forwardRef(({ className, "aria-label": ariaLabel, "aria-lab
     className: cn("relative flex w-full touch-none select-none items-center", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx27(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx27(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsx27(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx27(SliderPrimitive.Range, { className: "absolute h-full bg-action" }) }),
       /* @__PURE__ */ jsx27(
         SliderPrimitive.Thumb,
         {
           "aria-label": ariaLabel,
           "aria-labelledby": ariaLabelledBy,
-          className: "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled"
+          className: "block size-4 rounded-full border border-action/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled"
         }
       )
     ]
@@ -1152,7 +1152,7 @@ function Toaster({ theme = "system", ...props }) {
         classNames: {
           toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          actionButton: "group-[.toast]:bg-action group-[.toast]:text-action-foreground",
           cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
         }
       },
@@ -1173,7 +1173,7 @@ var Switch = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
       "peer inline-flex h-6 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
       "disabled:cursor-not-allowed disabled:opacity-disabled",
-      "data-[state=checked]:bg-primary data-[state=unchecked]:bg-tertiary",
+      "data-[state=checked]:bg-action data-[state=unchecked]:bg-tertiary",
       className
     ),
     ...props,
@@ -1386,7 +1386,7 @@ var TooltipContent = React31.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "z-overlay overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground font-sans",
+      "z-overlay overflow-hidden rounded-md bg-action px-3 py-1.5 text-xs text-action-foreground font-sans",
       "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
@@ -1438,7 +1438,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         ),
         day_button: cn(
           buttonVariants({ variant: "Ghost", size: "icon" }),
-          "size-8 p-0 font-normal group-aria-selected:opacity-visible group-data-[selected=true]:bg-primary group-data-[selected=true]:text-primary-foreground group-data-[selected=true]:hover:bg-primary group-data-[selected=true]:hover:text-primary-foreground group-data-[selected=true]:focus:bg-primary group-data-[selected=true]:focus:text-primary-foreground"
+          "size-8 p-0 font-normal group-aria-selected:opacity-visible group-data-[selected=true]:bg-action group-data-[selected=true]:text-action-foreground group-data-[selected=true]:hover:bg-action group-data-[selected=true]:hover:text-action-foreground group-data-[selected=true]:focus:bg-action group-data-[selected=true]:focus:text-action-foreground"
         ),
         range_start: "day-range-start rounded-l-md",
         range_end: "day-range-end rounded-r-md",
@@ -1662,7 +1662,7 @@ var ChartContainer = React33.forwardRef(({
       role: role ?? "img",
       "aria-label": name,
       className: cn(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+        "flex aspect-video justify-center text-xs [&_.recharts-surface:focus-visible]:[outline:2px_solid_hsl(var(--ring))] [&_.recharts-surface:focus-visible]:rounded-sm [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
         className
       ),
       ...props,
@@ -1696,7 +1696,7 @@ function ChartState({
         state === "loading" ? /* @__PURE__ */ jsx38("div", { "aria-hidden": true, className: "flex w-full max-w-[220px] items-end justify-between gap-1.5", children: [40, 72, 56, 88, 48, 64, 80].map((h, i) => /* @__PURE__ */ jsx38(
           "span",
           {
-            className: "w-full animate-pulse rounded-sm bg-muted",
+            className: "w-full animate-pulse rounded-sm bg-muted motion-reduce:animate-none",
             style: { height: `${h}px`, animationDelay: `${i * 90}ms` }
           },
           i
@@ -2189,7 +2189,7 @@ var InputGroup = React40.forwardRef(
       "data-slot": "input-group",
       className: cn(
         "flex w-full items-center overflow-hidden rounded-sm border border-input bg-background font-sans transition-colors",
-        "focus-within:border-primary focus-within:shadow-focus",
+        "focus-within:border-action focus-within:shadow-focus",
         "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:shadow-focus-destructive",
         "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-disabled",
         className
@@ -2276,7 +2276,8 @@ var InputOTPSlot = React41.forwardRef(({ index, className, ...props }, ref) => {
       ref,
       className: cn(
         "relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-docked ring-1 ring-ring",
+        // ring is a box-shadow, which forced-colors mode strips; the outline survives it
+        isActive && "z-docked ring-1 ring-ring forced-colors:[outline:2px_solid] forced-colors:[outline-offset:-2px]",
         className
       ),
       ...props,
@@ -2826,7 +2827,7 @@ var AudioPlayer = React46.forwardRef(
         type: "button",
         onClick: toggle,
         "aria-label": playing ? "Pause" : "Play",
-        className: "grid shrink-0 place-items-center rounded-full bg-primary text-primary-foreground outline-none transition-transform hover:scale-105 focus-visible:shadow-focus",
+        className: "grid shrink-0 place-items-center rounded-full bg-action text-action-foreground outline-none transition-transform hover:scale-105 focus-visible:shadow-focus",
         style: { width: size, height: size },
         children: playing ? /* @__PURE__ */ jsx52(Pause, { className: "size-1/3 fill-current" }) : /* @__PURE__ */ jsx52(Play, { className: "size-1/3 translate-x-px fill-current" })
       }
@@ -2852,7 +2853,7 @@ var AudioPlayer = React46.forwardRef(
             ] }),
             /* @__PURE__ */ jsx52("button", { type: "button", onClick: () => skip(skipBy), "aria-label": `Forward ${skipBy}s`, className: iconBtn, children: /* @__PURE__ */ jsx52(SkipForward, {}) }),
             /* @__PURE__ */ jsx52(PlayPause, { size: 36 }),
-            /* @__PURE__ */ jsx52("div", { className: "absolute inset-x-0 bottom-0 h-1 bg-muted", children: /* @__PURE__ */ jsx52("div", { className: "h-full bg-primary transition-[width]", style: { width: `${pct}%` } }) })
+            /* @__PURE__ */ jsx52("div", { className: "absolute inset-x-0 bottom-0 h-1 bg-muted", children: /* @__PURE__ */ jsx52("div", { className: "h-full bg-action transition-[width]", style: { width: `${pct}%` } }) })
           ]
         }
       );
@@ -2936,7 +2937,7 @@ var CircularProgress = React47.forwardRef(
                 strokeLinecap: "round",
                 strokeDasharray: c,
                 strokeDashoffset: c - v / 100 * c,
-                className: "stroke-primary transition-[stroke-dashoffset] duration-base"
+                className: "stroke-action transition-[stroke-dashoffset] duration-base"
               }
             )
           ] }),
@@ -3149,7 +3150,7 @@ Rating.displayName = "Rating";
 import * as React51 from "react";
 import { cva as cva16 } from "class-variance-authority";
 import { jsx as jsx57 } from "react/jsx-runtime";
-var spinnerVariants = cva16("inline-block animate-spin rounded-full border-2 border-current border-t-transparent", {
+var spinnerVariants = cva16("inline-block animate-spin motion-reduce:animate-[spin_3s_linear_infinite] rounded-full border-2 border-current border-t-transparent", {
   variants: {
     size: {
       sm: "size-4",
@@ -3157,9 +3158,9 @@ var spinnerVariants = cva16("inline-block animate-spin rounded-full border-2 bor
       lg: "size-8"
     },
     variant: {
-      default: "text-primary",
+      default: "text-action",
       muted: "text-muted-foreground",
-      onColor: "text-primary-foreground"
+      onColor: "text-action-foreground"
     }
   },
   defaultVariants: { size: "md", variant: "default" }
@@ -3171,7 +3172,7 @@ Spinner.displayName = "Spinner";
 
 // src/components/list.tsx
 import * as React52 from "react";
-import { jsx as jsx58, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx58, jsxs as jsxs29 } from "react/jsx-runtime";
 var List3 = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx58("div", { ref, role: "list", className: cn("flex flex-col divide-y divide-border", className), ...props })
 );
@@ -3179,38 +3180,42 @@ List3.displayName = "List";
 var ListItem = React52.forwardRef(
   ({ className, leading, title, description, trailing, disabled, onSelect, ...props }, ref) => {
     const interactive = !!onSelect && !disabled;
-    return /* @__PURE__ */ jsxs29(
+    const rowClass = cn(
+      "flex items-center gap-3 px-3 py-3 font-sans outline-none",
+      // ring keeps the highlighted row perceptible where the accent fill is <3:1 (dark)
+      interactive && "cursor-pointer hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+      disabled && "pointer-events-none opacity-disabled",
+      className
+    );
+    const content = /* @__PURE__ */ jsxs29(Fragment, { children: [
+      leading && /* @__PURE__ */ jsx58("div", { className: "flex shrink-0 items-center justify-center", children: leading }),
+      /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx58("div", { className: "truncate text-body-md text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx58("div", { className: "truncate text-body-sm text-muted-foreground", children: description })
+      ] }),
+      trailing && /* @__PURE__ */ jsx58("div", { className: "flex shrink-0 items-center gap-2", children: trailing })
+    ] });
+    if (!interactive) {
+      return /* @__PURE__ */ jsx58("div", { ref, role: "listitem", "aria-disabled": disabled, className: rowClass, ...props, children: content });
+    }
+    return /* @__PURE__ */ jsx58("div", { role: "listitem", children: /* @__PURE__ */ jsx58(
       "div",
       {
         ref,
-        role: interactive ? "button" : "listitem",
-        tabIndex: interactive ? 0 : void 0,
-        "aria-disabled": disabled,
-        onClick: disabled ? void 0 : onSelect,
-        onKeyDown: interactive ? (e) => {
+        role: "button",
+        tabIndex: 0,
+        onClick: onSelect,
+        onKeyDown: (e) => {
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             onSelect?.();
           }
-        } : void 0,
-        className: cn(
-          "flex items-center gap-3 px-3 py-3 font-sans outline-none",
-          // ring keeps the highlighted row perceptible where the accent fill is <3:1 (dark)
-          interactive && "cursor-pointer hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-          disabled && "pointer-events-none opacity-disabled",
-          className
-        ),
+        },
+        className: rowClass,
         ...props,
-        children: [
-          leading && /* @__PURE__ */ jsx58("div", { className: "flex shrink-0 items-center justify-center", children: leading }),
-          /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx58("div", { className: "truncate text-body-md text-foreground", children: title }),
-            description && /* @__PURE__ */ jsx58("div", { className: "truncate text-body-sm text-muted-foreground", children: description })
-          ] }),
-          trailing && /* @__PURE__ */ jsx58("div", { className: "flex shrink-0 items-center gap-2", children: trailing })
-        ]
+        children: content
       }
-    );
+    ) });
   }
 );
 ListItem.displayName = "ListItem";
@@ -3237,8 +3242,8 @@ var Stepper = React53.forwardRef(
                 {
                   className: cn(
                     "flex size-7 shrink-0 items-center justify-center rounded-full text-label-md font-medium",
-                    status === "complete" && "bg-primary text-primary-foreground",
-                    status === "current" && "border-2 border-primary text-primary",
+                    status === "complete" && "bg-action text-action-foreground",
+                    status === "current" && "border-2 border-action text-action",
                     status === "upcoming" && "border border-input text-muted-foreground"
                   ),
                   children: status === "complete" ? /* @__PURE__ */ jsx59(Check6, { className: "size-4" }) : i + 1
@@ -3251,7 +3256,7 @@ var Stepper = React53.forwardRef(
                   className: cn(
                     "bg-border",
                     vertical ? "my-1 min-h-6 w-px flex-1 self-stretch" : "mt-3.5 h-px flex-1",
-                    status === "complete" && "bg-primary"
+                    status === "complete" && "bg-action"
                   )
                 }
               )
@@ -3284,7 +3289,7 @@ var fabVariants = cva17(
   {
     variants: {
       variant: {
-        Primary: "bg-primary text-primary-foreground hover:bg-[--color-blue-600] active:bg-[--color-blue-700]",
+        Primary: "bg-action text-action-foreground hover:bg-action/90 active:bg-action/85",
         Secondary: "bg-secondary text-secondary-foreground hover:bg-[--color-green-500] hover:text-[--color-green-50] active:bg-[--color-green-600] active:text-[--color-green-50]"
       },
       size: {
@@ -3339,7 +3344,7 @@ var TabBarItem = React55.forwardRef(
       "aria-current": active ? "page" : void 0,
       className: cn(
         "relative flex flex-1 flex-col items-center justify-center gap-1 py-2 text-label-sm outline-none transition-colors",
-        active ? "text-primary" : "text-muted-foreground hover:text-foreground",
+        active ? "text-action" : "text-muted-foreground hover:text-foreground",
         "focus-visible:bg-accent",
         className
       ),
@@ -3509,16 +3514,7 @@ var FileUpload = React58.forwardRef(
       /* @__PURE__ */ jsxs34(
         "div",
         {
-          role: "button",
-          tabIndex: disabled ? -1 : 0,
-          "aria-disabled": disabled,
           onClick: () => !disabled && inputRef.current?.click(),
-          onKeyDown: (e) => {
-            if (!disabled && (e.key === "Enter" || e.key === " ")) {
-              e.preventDefault();
-              inputRef.current?.click();
-            }
-          },
           onDragOver: (e) => {
             e.preventDefault();
             if (!disabled) setDragging(true);
@@ -3530,9 +3526,9 @@ var FileUpload = React58.forwardRef(
             if (!disabled) pick(e.dataTransfer.files);
           },
           className: cn(
-            "flex flex-col items-center gap-2 rounded-md border border-dashed border-input p-6 text-center outline-none transition-colors",
-            !disabled && "cursor-pointer hover:bg-accent/50 focus-visible:shadow-focus",
-            dragging && "border-primary bg-accent",
+            "flex flex-col items-center gap-2 rounded-md border border-dashed border-input p-6 text-center transition-colors",
+            !disabled && "cursor-pointer hover:bg-accent/50",
+            dragging && "border-action bg-accent",
             disabled && "pointer-events-none opacity-disabled"
           ),
           children: [
@@ -3565,6 +3561,8 @@ var FileUpload = React58.forwardRef(
                 multiple,
                 accept,
                 disabled,
+                tabIndex: -1,
+                "aria-hidden": "true",
                 className: "sr-only",
                 onChange: (e) => {
                   pick(e.target.files);
@@ -3584,18 +3582,18 @@ function FileUploadItem({ file, onRemove, onRetry }) {
   const isError = file.status === "error";
   const isLoading = file.status === "loading";
   return /* @__PURE__ */ jsxs34("li", { className: cn("flex items-center gap-2.5 rounded-md border p-2.5 text-body-sm", isError ? "border-destructive bg-destructive/5" : "border-input"), children: [
-    isLoading ? /* @__PURE__ */ jsx64(Loader2, { className: "size-4 shrink-0 animate-spin text-muted-foreground", "aria-hidden": true }) : isError ? /* @__PURE__ */ jsx64(TriangleAlert3, { className: "size-4 shrink-0 text-destructive", "aria-hidden": true }) : /* @__PURE__ */ jsx64(File, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+    isLoading ? /* @__PURE__ */ jsx64(Loader2, { className: "size-4 shrink-0 animate-spin motion-reduce:animate-[spin_3s_linear_infinite] text-muted-foreground", "aria-hidden": true }) : isError ? /* @__PURE__ */ jsx64(TriangleAlert3, { className: "size-4 shrink-0 text-destructive", "aria-hidden": true }) : /* @__PURE__ */ jsx64(File, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
     /* @__PURE__ */ jsxs34("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx64("p", { className: "truncate text-foreground", children: file.name }),
       isError && file.error ? /* @__PURE__ */ jsx64("p", { className: "text-destructive", children: file.error }) : /* @__PURE__ */ jsx64("p", { className: "text-muted-foreground", children: formatBytes(file.size) }),
-      isLoading && typeof file.progress === "number" && /* @__PURE__ */ jsx64("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx64("div", { className: "h-full bg-primary transition-[width]", style: { width: `${Math.max(0, Math.min(100, file.progress))}%` } }) })
+      isLoading && typeof file.progress === "number" && /* @__PURE__ */ jsx64("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx64("div", { className: "h-full bg-action transition-[width]", style: { width: `${Math.max(0, Math.min(100, file.progress))}%` } }) })
     ] }),
     isError && onRetry && /* @__PURE__ */ jsx64(
       "button",
       {
         type: "button",
         onClick: () => onRetry(file.id),
-        className: "shrink-0 text-label-md font-medium text-primary underline-offset-2 outline-none hover:underline focus-visible:underline",
+        className: "shrink-0 text-label-md font-medium text-link underline-offset-2 outline-none hover:underline focus-visible:underline",
         children: "Retry"
       }
     ),
@@ -3685,7 +3683,7 @@ var CodeBlock = React60.forwardRef(
             onClick: () => setActive(i),
             className: cn(
               "border-b-2 px-3 py-2 text-body-sm transition-colors outline-none",
-              i === active ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+              i === active ? "border-action text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
             ),
             children: t.name || "code"
           },
@@ -3908,7 +3906,7 @@ var TableOfContents = React65.forwardRef(
         style: { paddingInlineStart: `${((item.level ?? 1) - 1) * 12 + 12}px` },
         className: cn(
           "-ms-px border-s py-1.5 text-body-sm outline-none transition-colors",
-          isActive ? "border-primary font-medium text-primary" : "border-transparent text-muted-foreground hover:text-foreground"
+          isActive ? "border-action font-medium text-action" : "border-transparent text-muted-foreground hover:text-foreground"
         ),
         children: item.label
       },
@@ -4044,7 +4042,7 @@ var nativeSelectVariants = cva19(
     "flex w-full appearance-none border border-input bg-background px-3 py-3 pe-9",
     "font-sans text-body-md text-foreground",
     "outline-none transition-colors",
-    "focus-visible:border-primary focus-visible:shadow-focus",
+    "focus-visible:border-action focus-visible:shadow-focus",
     "disabled:cursor-not-allowed disabled:opacity-disabled",
     "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive"
   ],
@@ -4052,7 +4050,7 @@ var nativeSelectVariants = cva19(
     variants: {
       state: {
         Default: "",
-        Focus: "border-primary shadow-focus",
+        Focus: "border-action shadow-focus",
         Error: "border-destructive",
         Disabled: "opacity-disabled pointer-events-none"
       },
@@ -4167,7 +4165,7 @@ var ICON2 = {
 var Banner = React71.forwardRef(
   ({ className, variant = "information", sticky, hideIcon, onDismiss, action, children, ...props }, ref) => {
     const Icon2 = ICON2[variant ?? "information"];
-    return /* @__PURE__ */ jsxs43("div", { ref, role: "banner", className: cn(bannerVariants({ variant, sticky }), className), ...props, children: [
+    return /* @__PURE__ */ jsxs43("div", { ref, className: cn(bannerVariants({ variant, sticky }), className), ...props, children: [
       !hideIcon && /* @__PURE__ */ jsx77(Icon2, {}),
       /* @__PURE__ */ jsxs43("div", { className: "mx-auto flex min-w-0 max-w-4xl flex-1 flex-wrap items-center justify-center gap-x-3 gap-y-1 text-center", children: [
         /* @__PURE__ */ jsx77("span", { children }),
@@ -4235,7 +4233,7 @@ var Body = ({ item, align }) => /* @__PURE__ */ jsxs44("div", { className: cn("p
   item.content && /* @__PURE__ */ jsx79("div", { className: "text-body-sm text-muted-foreground", children: item.content })
 ] });
 var Rail = ({ item, isLast }) => /* @__PURE__ */ jsxs44("div", { className: "flex flex-col items-center", children: [
-  /* @__PURE__ */ jsx79("span", { className: "flex size-2.5 shrink-0 items-center justify-center rounded-full bg-primary", children: item.icon }),
+  /* @__PURE__ */ jsx79("span", { className: "flex size-2.5 shrink-0 items-center justify-center rounded-full bg-action", children: item.icon }),
   !isLast && /* @__PURE__ */ jsx79("span", { "aria-hidden": true, className: "my-1 w-px flex-1 bg-border" })
 ] });
 var Timeline = React73.forwardRef(
@@ -4413,7 +4411,7 @@ var NotificationCenterContent = React77.forwardRef(
         {
           type: "button",
           onClick: onMarkAllRead,
-          className: "text-label-md font-medium text-primary outline-none hover:underline focus-visible:underline",
+          className: "text-label-md font-medium text-link outline-none hover:underline focus-visible:underline",
           children: "Mark all read"
         }
       )
@@ -4445,7 +4443,7 @@ var NotificationItem = React77.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx83("span", { className: cn("mt-1.5 size-2 shrink-0 rounded-full", unread ? "bg-primary" : "bg-transparent") }),
+          /* @__PURE__ */ jsx83("span", { className: cn("mt-1.5 size-2 shrink-0 rounded-full", unread ? "bg-action" : "bg-transparent") }),
           /* @__PURE__ */ jsxs48("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx83("p", { className: cn("truncate text-body-sm", unread ? "font-medium text-foreground" : "text-muted-foreground"), children: title }),
             description && /* @__PURE__ */ jsx83("p", { className: "truncate text-body-sm text-muted-foreground", children: description }),
@@ -4700,8 +4698,8 @@ var MultiSelect = React79.forwardRef(
           },
           className: cn(
             "flex min-h-11 w-full flex-wrap items-center gap-1.5 border border-input bg-background px-3 py-2 font-sans",
-            "outline-none focus-visible:border-primary focus-visible:shadow-focus",
-            "aria-expanded:border-primary aria-expanded:shadow-focus",
+            "outline-none focus-visible:border-action focus-visible:shadow-focus",
+            "aria-expanded:border-action aria-expanded:shadow-focus",
             className
           ),
           ...props,
@@ -4721,7 +4719,20 @@ var MultiSelect = React79.forwardRef(
             anchorRef.current?.focus();
           },
           children: /* @__PURE__ */ jsxs50(Command, { shouldFilter: !creatable, children: [
-            /* @__PURE__ */ jsx85(CommandInput, { placeholder: "Search\u2026", value: query, onValueChange: setQuery }),
+            /* @__PURE__ */ jsx85(
+              CommandInput,
+              {
+                placeholder: "Search\u2026",
+                value: query,
+                onValueChange: setQuery,
+                onKeyDown: (e) => {
+                  if (e.key === "Backspace" && query === "" && current.length > 0) {
+                    e.preventDefault();
+                    remove(current[current.length - 1]);
+                  }
+                }
+              }
+            ),
             /* @__PURE__ */ jsxs50(CommandList, { children: [
               /* @__PURE__ */ jsx85(CommandEmpty, { children: canCreate ? /* @__PURE__ */ jsxs50(
                 "button",
@@ -4767,7 +4778,7 @@ var MessageBubble = React80.forwardRef(
           {
             className: cn(
               "min-w-0 rounded-2xl px-3.5 py-2 text-body-sm",
-              sent ? "bg-primary text-primary-foreground" : "bg-muted text-foreground",
+              sent ? "bg-action text-action-foreground" : "bg-muted text-foreground",
               sent && grouped && "rounded-tr-md",
               !sent && grouped && "rounded-tl-md"
             ),
@@ -4776,7 +4787,7 @@ var MessageBubble = React80.forwardRef(
         ),
         (timestamp || sent && status) && /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-1 px-1 text-label-sm text-muted-foreground", children: [
           timestamp,
-          sent && status && /* @__PURE__ */ jsx86("span", { className: cn(status === "read" && "text-primary"), children: status === "sent" ? /* @__PURE__ */ jsx86(Check9, { className: "size-3.5" }) : /* @__PURE__ */ jsx86(CheckCheck, { className: "size-3.5" }) })
+          sent && status && /* @__PURE__ */ jsx86("span", { className: cn(status === "read" && "text-action"), children: status === "sent" ? /* @__PURE__ */ jsx86(Check9, { className: "size-3.5" }) : /* @__PURE__ */ jsx86(CheckCheck, { className: "size-3.5" }) })
         ] })
       ] })
     ] });
@@ -4796,7 +4807,7 @@ var TypingIndicator = React80.forwardRef(
         "span",
         {
           "aria-hidden": true,
-          className: "size-1.5 animate-typing-dot rounded-full bg-muted-foreground",
+          className: "size-1.5 animate-typing-dot motion-reduce:animate-none motion-reduce:opacity-70 rounded-full bg-muted-foreground",
           style: { animationDelay: `${i * 150}ms` }
         },
         i
@@ -4809,7 +4820,7 @@ TypingIndicator.displayName = "TypingIndicator";
 // src/components/tour.tsx
 import * as React81 from "react";
 import { createPortal } from "react-dom";
-import { Fragment, jsx as jsx87, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx87, jsxs as jsxs52 } from "react/jsx-runtime";
 var SPOTLIGHT_PADDING = 8;
 var Tour = ({
   steps,
@@ -4898,7 +4909,7 @@ var Tour = ({
     left: Math.min(Math.max(rect.left, 16), window.innerWidth - 336)
   } : { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
   return createPortal(
-    /* @__PURE__ */ jsxs52(Fragment, { children: [
+    /* @__PURE__ */ jsxs52(Fragment2, { children: [
       /* @__PURE__ */ jsx87(
         "div",
         {
@@ -4929,7 +4940,7 @@ var Tour = ({
               ] }),
               /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2", children: [
                 !isFirst && /* @__PURE__ */ jsx87(Button, { variant: "Ghost", size: "sm", onClick: () => onStepIndexChange(stepIndex - 1), children: backLabel }),
-                !isLast ? /* @__PURE__ */ jsxs52(Fragment, { children: [
+                !isLast ? /* @__PURE__ */ jsxs52(Fragment2, { children: [
                   /* @__PURE__ */ jsx87(Button, { variant: "Link", size: "sm", onClick: () => onOpenChange(false), children: skipLabel }),
                   /* @__PURE__ */ jsx87(Button, { size: "sm", onClick: () => onStepIndexChange(stepIndex + 1), children: nextLabel })
                 ] }) : /* @__PURE__ */ jsx87(Button, { size: "sm", onClick: () => onOpenChange(false), children: doneLabel })
@@ -4981,7 +4992,8 @@ function VirtualList({
     {
       ref: containerRef,
       role: "list",
-      className: cn("overflow-y-auto font-sans", className),
+      tabIndex: 0,
+      className: cn("overflow-y-auto font-sans outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", className),
       style: { height, ...style },
       onScroll: (e) => {
         onScroll?.(e);
@@ -5006,7 +5018,7 @@ function VirtualList({
 
 // src/components/data-grid.tsx
 import * as React83 from "react";
-import { jsx as jsx89, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx89, jsxs as jsxs53 } from "react/jsx-runtime";
 var DEFAULT_WIDTH = 160;
 var DEFAULT_MIN_WIDTH = 60;
 var DEFAULT_ROW_HEIGHT = 40;
@@ -5017,7 +5029,9 @@ function DataGrid({
   rowHeight = DEFAULT_ROW_HEIGHT,
   overscan = 6,
   getRowId,
-  className
+  className,
+  selectable = false,
+  onSelectionChange
 }) {
   const columnById = React83.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
   const [order, setOrder] = React83.useState(() => columns.map((c) => c.id));
@@ -5129,136 +5143,333 @@ function DataGrid({
     column.onCellEdit?.(row, rowIndex, value);
     endEdit(restoreFocus);
   }
-  return /* @__PURE__ */ jsx89(
-    "div",
-    {
-      ref: containerRef,
-      role: "grid",
-      className: cn("relative overflow-auto rounded-md border font-sans text-sm", className),
-      style: { height },
-      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-      children: /* @__PURE__ */ jsxs53("div", { style: { width: totalWidth, minWidth: "100%" }, children: [
-        /* @__PURE__ */ jsx89("div", { role: "row", className: "sticky top-0 z-[2] flex border-b bg-background", children: renderedColumns.map((column) => {
-          const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
-          const pinnedStyle = column.pinned === "left" ? { position: "sticky", left: leftOffsets[column.id], zIndex: 3 } : column.pinned === "right" ? { position: "sticky", right: rightOffsets[column.id], zIndex: 3 } : {};
-          const isSorted = sort?.columnId === column.id;
-          return /* @__PURE__ */ jsxs53(
-            "div",
-            {
-              role: "columnheader",
-              ...column.sortable ? { "aria-sort": isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" } : {},
-              draggable: !column.pinned,
-              onDragStart: () => {
-                dragIdRef.current = column.id;
-              },
-              onDragOver: (e) => {
-                if (!column.pinned) e.preventDefault();
-              },
-              onDrop: (e) => {
-                e.preventDefault();
-                const draggedId = dragIdRef.current;
-                dragIdRef.current = null;
-                if (!draggedId || draggedId === column.id) return;
-                setOrder((prev) => {
-                  const next = prev.filter((id) => id !== draggedId);
-                  const targetIndex = next.indexOf(column.id);
-                  next.splice(targetIndex, 0, draggedId);
-                  return next;
-                });
-              },
-              onClick: () => column.sortable && toggleSort(column.id),
-              tabIndex: column.sortable ? 0 : void 0,
-              onKeyDown: (e) => {
-                if (column.sortable && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+  const HEADER_HEIGHT = 40;
+  const [active, setActive] = React83.useState({ row: -1, columnId: columns[0]?.id ?? "" });
+  const pendingFocusRef = React83.useRef(null);
+  const [announcement, setAnnouncement] = React83.useState("");
+  const [sel, setSel] = React83.useState(null);
+  const onSelectionChangeRef = React83.useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const lastEmittedRef = React83.useRef("null");
+  const rowCount = sortedData.length;
+  const colIds = renderedColumns.map((c) => c.id);
+  const activeCol = colIds.includes(active.columnId) ? active.columnId : colIds[0] ?? "";
+  const activeRow = Math.min(active.row, rowCount - 1);
+  const activeRendered = activeRow < 0 || activeRow >= startIndex && activeRow < endIndex;
+  const tabStop = { row: activeRendered ? activeRow : -1, columnId: activeCol };
+  const colKey = colIds.join("|");
+  const range = React83.useMemo(() => {
+    if (!selectable || !sel) return null;
+    const a = colIds.indexOf(sel.anchor.columnId);
+    const b = colIds.indexOf(sel.end.columnId);
+    if (a < 0 || b < 0) return null;
+    return { r0: Math.min(sel.anchor.row, sel.end.row), r1: Math.max(sel.anchor.row, sel.end.row), c0: Math.min(a, b), c1: Math.max(a, b) };
+  }, [selectable, sel, colKey]);
+  React83.useEffect(() => setSel(null), [sort, rowCount]);
+  React83.useEffect(() => {
+    if (!selectable) return;
+    const value = range ? { rows: [range.r0, range.r1], columns: colIds.slice(range.c0, range.c1 + 1) } : null;
+    const key = JSON.stringify(value);
+    if (key === lastEmittedRef.current) return;
+    lastEmittedRef.current = key;
+    onSelectionChangeRef.current?.(value);
+    setAnnouncement(value ? `${(range.r1 - range.r0 + 1) * (range.c1 - range.c0 + 1)} cells selected` : "Selection cleared");
+  }, [selectable, range]);
+  function extendSelection(fromRow, fromCol, toRow, toCol) {
+    const anchor = sel?.anchor ?? { row: fromRow, columnId: fromCol };
+    const end = { row: Math.max(0, Math.min(toRow, rowCount - 1)), columnId: toCol };
+    setSel({ anchor, end });
+    moveTo(end.row, end.columnId);
+  }
+  function selectAll() {
+    if (rowCount === 0 || colIds.length === 0) return;
+    setSel({ anchor: { row: 0, columnId: colIds[0] }, end: { row: rowCount - 1, columnId: colIds[colIds.length - 1] } });
+  }
+  function copySelection() {
+    if (!range) return;
+    const ids = colIds.slice(range.c0, range.c1 + 1);
+    const text = sortedData.slice(range.r0, range.r1 + 1).map((r) => ids.map((id) => {
+      const c = columnById.get(id);
+      return c?.value ? String(c.value(r)) : "";
+    }).join("	")).join("\n");
+    try {
+      void navigator.clipboard?.writeText(text);
+      setAnnouncement(`Copied ${(range.r1 - range.r0 + 1) * ids.length} cells`);
+    } catch {
+    }
+  }
+  const pageRows = Math.max(1, Math.floor((viewportHeight - HEADER_HEIGHT) / rowHeight) - 1);
+  const labelOf = (c) => typeof c.header === "string" ? c.header : c.id;
+  function ensureRowVisible(row) {
+    const el = containerRef.current;
+    if (!el) return;
+    if (row < 0) {
+      if (scrollTop !== 0) {
+        el.scrollTop = 0;
+        setScrollTop(0);
+      }
+      return;
+    }
+    const top = HEADER_HEIGHT + row * rowHeight;
+    const bottom = top + rowHeight;
+    let next = scrollTop;
+    if (top < scrollTop + HEADER_HEIGHT) next = row * rowHeight;
+    else if (bottom > scrollTop + viewportHeight) next = bottom - viewportHeight;
+    if (next !== scrollTop) {
+      el.scrollTop = next;
+      setScrollTop(next);
+    }
+  }
+  function moveTo(row, columnId) {
+    const r = Math.max(-1, Math.min(row, rowCount - 1));
+    ensureRowVisible(r);
+    pendingFocusRef.current = { row: r, columnId };
+    setActive({ row: r, columnId });
+  }
+  React83.useEffect(() => {
+    const p = pendingFocusRef.current;
+    if (!p) return;
+    const selector = p.row < 0 ? `[data-header="${p.columnId}"]` : `[data-cell="${p.row}:${p.columnId}"]`;
+    const el = containerRef.current?.querySelector(selector);
+    if (el) {
+      pendingFocusRef.current = null;
+      el.focus();
+    }
+  });
+  function moveColumn(column, dir) {
+    if (column.pinned) return;
+    const ids = unpinnedOrdered.map((c) => c.id);
+    const from = ids.indexOf(column.id);
+    const to = from + dir;
+    if (to < 0 || to >= ids.length) {
+      setAnnouncement(`${labelOf(column)} is already the ${dir < 0 ? "first" : "last"} movable column`);
+      return;
+    }
+    const targetId = ids[to];
+    setOrder((prev) => {
+      const next = prev.filter((id) => id !== column.id);
+      next.splice(next.indexOf(targetId) + (dir > 0 ? 1 : 0), 0, column.id);
+      return next;
+    });
+    pendingFocusRef.current = { row: -1, columnId: column.id };
+    setAnnouncement(`${labelOf(column)} moved to position ${leftPinned.length + to + 1} of ${colIds.length}`);
+  }
+  function resizeColumn(column, delta) {
+    const current = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+    const next = Math.max(column.minWidth ?? DEFAULT_MIN_WIDTH, current + delta);
+    setWidths((prev) => ({ ...prev, [column.id]: next }));
+    setAnnouncement(`${labelOf(column)} column width ${next} pixels`);
+  }
+  function onNavKeyDown(e, row, column) {
+    if (e.target !== e.currentTarget) return;
+    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+    const idx = colIds.indexOf(column.id);
+    const horizontal = e.key === "ArrowRight" ? rtl ? -1 : 1 : e.key === "ArrowLeft" ? rtl ? 1 : -1 : 0;
+    if (row < 0 && horizontal !== 0 && (e.altKey || e.shiftKey)) {
+      e.preventDefault();
+      if (e.altKey) moveColumn(column, horizontal);
+      else resizeColumn(column, horizontal * 10);
+      return;
+    }
+    const mod = e.ctrlKey || e.metaKey;
+    if (selectable && row >= 0) {
+      if (mod && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        return selectAll();
+      }
+      if (mod && e.key.toLowerCase() === "c" && range) {
+        e.preventDefault();
+        return copySelection();
+      }
+      if (e.key === "Escape" && sel) {
+        e.preventDefault();
+        return setSel(null);
+      }
+    }
+    const extend = selectable && e.shiftKey && row >= 0;
+    const go = (r, i) => {
+      e.preventDefault();
+      const target = colIds[Math.max(0, Math.min(i, colIds.length - 1))];
+      if (extend) return extendSelection(row, column.id, r, target);
+      if (sel) setSel(null);
+      moveTo(r, target);
+    };
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowLeft":
+        return go(row, idx + horizontal);
+      case "ArrowDown":
+        return go(row + 1, idx);
+      case "ArrowUp":
+        return go(row - 1, idx);
+      case "Home":
+        return go(e.ctrlKey ? -1 : row, 0);
+      case "End":
+        return go(e.ctrlKey ? rowCount - 1 : row, colIds.length - 1);
+      case "PageDown":
+        return go(row + pageRows, idx);
+      case "PageUp":
+        return go(Math.max(row - pageRows, row >= 0 ? 0 : -1), idx);
+      case "Enter":
+      case " ":
+        if (row < 0 && column.sortable) {
+          e.preventDefault();
+          toggleSort(column.id);
+        } else if (row >= 0 && column.editable && e.key === "Enter") {
+          e.preventDefault();
+          setEditing({ rowIndex: row, columnId: column.id });
+        }
+        return;
+      case "F2":
+        if (row >= 0 && column.editable) {
+          e.preventDefault();
+          setEditing({ rowIndex: row, columnId: column.id });
+        }
+        return;
+    }
+  }
+  return /* @__PURE__ */ jsxs53(Fragment3, { children: [
+    /* @__PURE__ */ jsx89(
+      "div",
+      {
+        ref: containerRef,
+        role: "grid",
+        "aria-rowcount": rowCount + 1,
+        "aria-colcount": colIds.length,
+        "aria-multiselectable": selectable || void 0,
+        className: cn("relative overflow-auto rounded-md border font-sans text-sm", className),
+        style: { height },
+        onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+        children: /* @__PURE__ */ jsxs53("div", { style: { width: totalWidth, minWidth: "100%" }, children: [
+          /* @__PURE__ */ jsx89("div", { role: "row", "aria-rowindex": 1, className: "sticky top-0 z-[2] flex border-b bg-background", children: renderedColumns.map((column, colIdx) => {
+            const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+            const pinnedStyle = column.pinned === "left" ? { position: "sticky", left: leftOffsets[column.id], zIndex: 3 } : column.pinned === "right" ? { position: "sticky", right: rightOffsets[column.id], zIndex: 3 } : {};
+            const isSorted = sort?.columnId === column.id;
+            return /* @__PURE__ */ jsxs53(
+              "div",
+              {
+                role: "columnheader",
+                "data-header": column.id,
+                "aria-colindex": colIdx + 1,
+                "aria-keyshortcuts": `Shift+ArrowLeft Shift+ArrowRight${column.pinned ? "" : " Alt+ArrowLeft Alt+ArrowRight"}`,
+                ...column.sortable ? { "aria-sort": isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" } : {},
+                draggable: !column.pinned,
+                onDragStart: () => {
+                  dragIdRef.current = column.id;
+                },
+                onDragOver: (e) => {
+                  if (!column.pinned) e.preventDefault();
+                },
+                onDrop: (e) => {
                   e.preventDefault();
-                  toggleSort(column.id);
-                }
+                  const draggedId = dragIdRef.current;
+                  dragIdRef.current = null;
+                  if (!draggedId || draggedId === column.id) return;
+                  setOrder((prev) => {
+                    const next = prev.filter((id) => id !== draggedId);
+                    const targetIndex = next.indexOf(column.id);
+                    next.splice(targetIndex, 0, draggedId);
+                    return next;
+                  });
+                },
+                onClick: () => column.sortable && toggleSort(column.id),
+                tabIndex: tabStop.row === -1 && tabStop.columnId === column.id ? 0 : -1,
+                onFocus: () => setActive({ row: -1, columnId: column.id }),
+                onKeyDown: (e) => onNavKeyDown(e, -1, column),
+                className: cn(
+                  "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                  column.sortable && "cursor-pointer hover:text-foreground",
+                  column.pinned && "bg-background"
+                ),
+                style: { width, ...pinnedStyle },
+                children: [
+                  /* @__PURE__ */ jsx89("span", { className: "truncate", children: column.header }),
+                  column.sortable && isSorted && /* @__PURE__ */ jsx89("span", { "aria-hidden": "true", className: "text-xs", children: sort.direction === "asc" ? "\u25B2" : "\u25BC" }),
+                  /* @__PURE__ */ jsx89(
+                    "div",
+                    {
+                      onPointerDown: (e) => {
+                        e.stopPropagation();
+                        beginResize(column.id, column.minWidth ?? DEFAULT_MIN_WIDTH, e.clientX, width);
+                      },
+                      className: "absolute right-0 top-0 h-full w-1 touch-none cursor-col-resize hover:bg-action/50"
+                    }
+                  )
+                ]
               },
-              className: cn(
-                "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground",
-                column.sortable && "cursor-pointer outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-                column.pinned && "bg-background"
-              ),
-              style: { width, ...pinnedStyle },
-              children: [
-                /* @__PURE__ */ jsx89("span", { className: "truncate", children: column.header }),
-                column.sortable && isSorted && /* @__PURE__ */ jsx89("span", { "aria-hidden": "true", className: "text-xs", children: sort.direction === "asc" ? "\u25B2" : "\u25BC" }),
-                /* @__PURE__ */ jsx89(
-                  "div",
-                  {
-                    onPointerDown: (e) => {
-                      e.stopPropagation();
-                      beginResize(column.id, column.minWidth ?? DEFAULT_MIN_WIDTH, e.clientX, width);
-                    },
-                    className: "absolute right-0 top-0 h-full w-1 touch-none cursor-col-resize hover:bg-primary/50"
-                  }
-                )
-              ]
-            },
-            column.id
-          );
-        }) }),
-        /* @__PURE__ */ jsx89("div", { style: { height: totalHeight, position: "relative" }, children: visibleRows.map((row, i) => {
-          const rowIndex = startIndex + i;
-          return /* @__PURE__ */ jsx89(
-            "div",
-            {
-              role: "row",
-              className: "absolute flex w-full border-b hover:bg-muted/50",
-              style: { top: rowIndex * rowHeight, height: rowHeight },
-              children: renderedColumns.map((column) => {
-                const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
-                const pinnedStyle = column.pinned === "left" ? { position: "sticky", left: leftOffsets[column.id], zIndex: 1 } : column.pinned === "right" ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 } : {};
-                const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
-                return /* @__PURE__ */ jsx89(
-                  "div",
-                  {
-                    role: "gridcell",
-                    "data-cell": `${rowIndex}:${column.id}`,
-                    onDoubleClick: () => column.editable && setEditing({ rowIndex, columnId: column.id }),
-                    tabIndex: column.editable ? 0 : void 0,
-                    onKeyDown: (e) => {
-                      if (column.editable && e.target === e.currentTarget && (e.key === "Enter" || e.key === "F2")) {
-                        e.preventDefault();
-                        setEditing({ rowIndex, columnId: column.id });
-                      }
+              column.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx89("div", { style: { height: totalHeight, position: "relative" }, children: visibleRows.map((row, i) => {
+            const rowIndex = startIndex + i;
+            return /* @__PURE__ */ jsx89(
+              "div",
+              {
+                role: "row",
+                "aria-rowindex": rowIndex + 2,
+                className: "absolute flex w-full border-b hover:bg-muted/50",
+                style: { top: rowIndex * rowHeight, height: rowHeight },
+                children: renderedColumns.map((column, colIdx) => {
+                  const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+                  const pinnedStyle = column.pinned === "left" ? { position: "sticky", left: leftOffsets[column.id], zIndex: 1 } : column.pinned === "right" ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 } : {};
+                  const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
+                  const selected = selectable && !!range && rowIndex >= range.r0 && rowIndex <= range.r1 && colIdx >= range.c0 && colIdx <= range.c1;
+                  return /* @__PURE__ */ jsx89(
+                    "div",
+                    {
+                      role: "gridcell",
+                      "aria-colindex": colIdx + 1,
+                      "aria-selected": selectable ? selected : void 0,
+                      "data-cell": `${rowIndex}:${column.id}`,
+                      onMouseDown: (e) => {
+                        if (!selectable || e.button !== 0) return;
+                        if (e.shiftKey) {
+                          e.preventDefault();
+                          extendSelection(activeRow >= 0 ? activeRow : rowIndex, activeCol, rowIndex, column.id);
+                        } else if (sel) setSel(null);
+                      },
+                      onDoubleClick: () => column.editable && setEditing({ rowIndex, columnId: column.id }),
+                      tabIndex: tabStop.row === rowIndex && tabStop.columnId === column.id ? 0 : -1,
+                      onFocus: () => setActive({ row: rowIndex, columnId: column.id }),
+                      onKeyDown: (e) => onNavKeyDown(e, rowIndex, column),
+                      className: cn(
+                        "flex shrink-0 items-center px-2 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                        column.pinned && "bg-background",
+                        selected && "bg-accent"
+                      ),
+                      style: { width, ...pinnedStyle },
+                      children: isEditing ? /* @__PURE__ */ jsx89(
+                        "input",
+                        {
+                          autoFocus: true,
+                          defaultValue: column.value ? String(column.value(row)) : "",
+                          className: "h-7 w-full rounded-sm border-0 bg-transparent px-1 text-sm outline-none ring-1 ring-inset ring-ring",
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value, true);
+                            else if (e.key === "Escape") endEdit(true);
+                          },
+                          onBlur: (e) => commitEdit(column, row, rowIndex, e.currentTarget.value)
+                        }
+                      ) : /* @__PURE__ */ jsx89("span", { className: "truncate", children: column.cell(row, rowIndex) })
                     },
-                    className: cn(
-                      "flex shrink-0 items-center px-2",
-                      column.editable && "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-                      column.pinned && "bg-background"
-                    ),
-                    style: { width, ...pinnedStyle },
-                    children: isEditing ? /* @__PURE__ */ jsx89(
-                      "input",
-                      {
-                        autoFocus: true,
-                        defaultValue: column.value ? String(column.value(row)) : "",
-                        className: "h-7 w-full rounded-sm border-0 bg-transparent px-1 text-sm outline-none ring-1 ring-inset ring-ring",
-                        onKeyDown: (e) => {
-                          if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value, true);
-                          else if (e.key === "Escape") endEdit(true);
-                        },
-                        onBlur: (e) => commitEdit(column, row, rowIndex, e.currentTarget.value)
-                      }
-                    ) : /* @__PURE__ */ jsx89("span", { className: "truncate", children: column.cell(row, rowIndex) })
-                  },
-                  column.id
-                );
-              })
-            },
-            getRowId ? getRowId(row, rowIndex) : rowIndex
-          );
-        }) })
-      ] })
-    }
-  );
+                    column.id
+                  );
+                })
+              },
+              getRowId ? getRowId(row, rowIndex) : rowIndex
+            );
+          }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx89("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })
+  ] });
 }
 
 // src/components/json-viewer.tsx
 import * as React84 from "react";
 import { Check as Check10, ChevronRight as ChevronRight8, Copy as Copy2 } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx90, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx90, jsxs as jsxs54 } from "react/jsx-runtime";
 var JsonViewer = React84.forwardRef(
   ({ data, expandDepth = 1, hideCopy, className, ...props }, ref) => {
     const [copied, setCopied] = React84.useState(false);
@@ -5360,8 +5571,8 @@ function JsonNode({
         !expanded && !isLast && /* @__PURE__ */ jsx90("span", { className: "text-muted-foreground", children: "," })
       ] })
     ] }),
-    expanded && /* @__PURE__ */ jsxs54(Fragment2, { children: [
-      entries.map(([key, val], i) => /* @__PURE__ */ jsx90(
+    expanded && /* @__PURE__ */ jsxs54(Fragment4, { children: [
+      /* @__PURE__ */ jsx90("div", { role: "group", children: entries.map(([key, val], i) => /* @__PURE__ */ jsx90(
         JsonNode,
         {
           name: isArray ? void 0 : key,
@@ -5371,7 +5582,7 @@ function JsonNode({
           isLast: i === entries.length - 1
         },
         key
-      )),
+      )) }),
       /* @__PURE__ */ jsxs54("div", { style: { paddingLeft: depth * 16 }, children: [
         /* @__PURE__ */ jsx90("span", { children: closeBracket }),
         !isLast && /* @__PURE__ */ jsx90("span", { className: "text-muted-foreground", children: "," })
@@ -5442,11 +5653,12 @@ function UnifiedDiff({ ops }) {
       role: "row",
       className: cn("flex", op.type === "add" && "bg-success/10", op.type === "remove" && "bg-destructive/10"),
       children: [
-        /* @__PURE__ */ jsx91("span", { className: "w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground", children: op.type !== "add" ? op.oldLine : "" }),
-        /* @__PURE__ */ jsx91("span", { className: "w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground", children: op.type !== "remove" ? op.newLine : "" }),
+        /* @__PURE__ */ jsx91("span", { role: "cell", className: "w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground", children: op.type !== "add" ? op.oldLine : "" }),
+        /* @__PURE__ */ jsx91("span", { role: "cell", className: "w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground", children: op.type !== "remove" ? op.newLine : "" }),
         /* @__PURE__ */ jsx91(
           "span",
           {
+            role: "cell",
             className: cn(
               "w-4 shrink-0 select-none text-center",
               op.type === "add" && "text-success",
@@ -5455,7 +5667,7 @@ function UnifiedDiff({ ops }) {
             children: op.type === "add" ? "+" : op.type === "remove" ? "\u2212" : ""
           }
         ),
-        /* @__PURE__ */ jsx91("span", { className: "min-w-0 flex-1 whitespace-pre px-1", children: op.text })
+        /* @__PURE__ */ jsx91("span", { role: "cell", className: "min-w-0 flex-1 whitespace-pre px-1", children: op.text })
       ]
     },
     i
@@ -5463,16 +5675,16 @@ function UnifiedDiff({ ops }) {
 }
 function SplitDiff({ ops, oldLabel, newLabel }) {
   return /* @__PURE__ */ jsxs55("div", { role: "table", children: [
-    /* @__PURE__ */ jsxs55("div", { className: "flex border-b bg-muted/40 text-muted-foreground", children: [
-      /* @__PURE__ */ jsx91("div", { className: "flex-1 px-2 py-1", children: oldLabel }),
-      /* @__PURE__ */ jsx91("div", { className: "flex-1 border-l px-2 py-1", children: newLabel })
+    /* @__PURE__ */ jsxs55("div", { role: "row", className: "flex border-b bg-muted/40 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx91("div", { role: "columnheader", className: "flex-1 px-2 py-1", children: oldLabel }),
+      /* @__PURE__ */ jsx91("div", { role: "columnheader", className: "flex-1 border-l px-2 py-1", children: newLabel })
     ] }),
     ops.map((op, i) => /* @__PURE__ */ jsxs55("div", { role: "row", className: "flex", children: [
-      /* @__PURE__ */ jsxs55("div", { className: cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10"), children: [
+      /* @__PURE__ */ jsxs55("div", { role: "cell", className: cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10"), children: [
         /* @__PURE__ */ jsx91("span", { className: "w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground", children: op.type !== "add" ? op.oldLine : "" }),
         /* @__PURE__ */ jsx91("span", { className: "min-w-0 flex-1 whitespace-pre px-1", children: op.type !== "add" ? op.text : "" })
       ] }),
-      /* @__PURE__ */ jsxs55("div", { className: cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10"), children: [
+      /* @__PURE__ */ jsxs55("div", { role: "cell", className: cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10"), children: [
         /* @__PURE__ */ jsx91("span", { className: "w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground", children: op.type !== "remove" ? op.newLine : "" }),
         /* @__PURE__ */ jsx91("span", { className: "min-w-0 flex-1 whitespace-pre px-1", children: op.type !== "remove" ? op.text : "" })
       ] })
@@ -5625,6 +5837,9 @@ var ColorPicker = React86.forwardRef(
           role: "slider",
           tabIndex: 0,
           "aria-label": "Saturation and value",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": Math.round(s),
           "aria-valuetext": `saturation ${Math.round(s)}%, value ${Math.round(v)}%`,
           onPointerDown: handleSquarePointerDown,
           onPointerMove: handleSquarePointerMove,
@@ -5762,6 +5977,7 @@ function HexField({
   return /* @__PURE__ */ jsx92(
     Input,
     {
+      "aria-label": "Hex color",
       value: draft,
       onChange: (e) => setDraft(e.target.value.replace(/[^0-9a-fA-F]/g, "").slice(0, alpha ? 8 : 6)),
       onBlur: commit,
@@ -6044,7 +6260,7 @@ function renderMarkdown(source) {
   return out.join("\n");
 }
 var MarkdownEditor = React88.forwardRef(
-  ({ value, onChange, placeholder, rows = 10, className, ...props }, ref) => {
+  ({ value, onChange, placeholder, rows = 10, className, "aria-label": ariaLabel = "Markdown", ...props }, ref) => {
     const textareaRef = React88.useRef(null);
     const [showPreview, setShowPreview] = React88.useState(false);
     const pendingSelection = React88.useRef(null);
@@ -6100,13 +6316,14 @@ var MarkdownEditor = React88.forwardRef(
             onChange: (e) => onChange(e.target.value),
             placeholder,
             rows,
+            "aria-label": ariaLabel,
             className: "resize-none rounded-none border-0 font-mono text-[13px] focus-visible:border-transparent focus-visible:shadow-none"
           }
         ),
         showPreview && /* @__PURE__ */ jsx94(
           "div",
           {
-            className: "overflow-auto p-3 text-sm [&_a]:text-primary [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_p]:mb-2 [&_pre]:overflow-auto [&_pre]:rounded-sm [&_pre]:bg-muted [&_pre]:p-2 [&_ul]:list-disc",
+            className: "overflow-auto p-3 text-sm [&_a]:text-link [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_p]:mb-2 [&_pre]:overflow-auto [&_pre]:rounded-sm [&_pre]:bg-muted [&_pre]:p-2 [&_ul]:list-disc",
             dangerouslySetInnerHTML: { __html: renderMarkdown(value) }
           }
         )