@devalok/shilp-sutra 0.55.1 → 0.57.0

package/dist/ui/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@primitives/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/* ── Active-value context (drives layoutId indicator) ────── */\ntype TabsOrientation = 'horizontal' | 'vertical'\nconst TabsValueContext = React.createContext<string | undefined>(undefined)\nconst TabsOrientationContext = React.createContext<TabsOrientation>('horizontal')\n\n/**\n * Tabs compound component — accessible tabbed navigation with keyboard support and two visual\n * variants (line underline and contained pill styles).\n *\n * **Parts (in composition order):**\n * - `Tabs` — manages active tab state (this root; takes `defaultValue`, `value`, `onValueChange`)\n * - `TabsList` — tab bar container (takes `variant=\"line\"|\"contained\"`, default `\"line\"`)\n * - `TabsTrigger` — individual tab button (requires `value`; inherits `variant` from TabsList via context)\n * - `TabsContent` — the panel shown when its tab is active (requires `value` matching a TabsTrigger)\n *\n * **Critical behavior:** `variant` set on `TabsList` propagates automatically via React context to\n * all `TabsTrigger` children. You do NOT need to repeat `variant` on each trigger — but you CAN\n * override it per-trigger if needed.\n *\n * The active tab indicator animates between tabs using Framer Motion `layoutId`. Line variant\n * shows a sliding underline; contained variant shows a sliding pill background.\n *\n * @compound\n * @example\n * // Default line variant:\n * <Tabs defaultValue=\"overview\">\n *   <TabsList>\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *     <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n *   <TabsContent value=\"settings\">Settings content</TabsContent>\n * </Tabs>\n *\n * @example\n * // Contained pill variant (controlled):\n * const [tab, setTab] = useState('members')\n * <Tabs value={tab} onValueChange={setTab}>\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"members\">Members</TabsTrigger>\n *     <TabsTrigger value=\"roles\">Roles</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"members\">Members list here.</TabsContent>\n *   <TabsContent value=\"roles\">Roles list here.</TabsContent>\n * </Tabs>\n */\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>(({ value: valueProp, defaultValue, onValueChange, orientation, ...props }, ref) => {\n  // Track the active value so TabsTrigger can conditionally render the motion indicator.\n  // For controlled usage, mirror the prop; for uncontrolled, manage internal state.\n  const [activeValue, setActiveValue] = React.useState(valueProp ?? defaultValue ?? '')\n\n  // Sync controlled value\n  React.useEffect(() => {\n    if (valueProp !== undefined) setActiveValue(valueProp)\n  }, [valueProp])\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      setActiveValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [onValueChange],\n  )\n\n  const resolvedOrientation: TabsOrientation = orientation ?? 'horizontal'\n\n  return (\n    <TabsValueContext.Provider value={activeValue}>\n      <TabsOrientationContext.Provider value={resolvedOrientation}>\n        <TabsPrimitive.Root\n          ref={ref}\n          value={valueProp}\n          defaultValue={valueProp === undefined ? defaultValue : undefined}\n          onValueChange={handleValueChange}\n          orientation={orientation}\n          {...props}\n          className={cn(\n            resolvedOrientation === 'vertical' && 'flex flex-row gap-ds-05',\n            props.className,\n          )}\n        />\n      </TabsOrientationContext.Provider>\n    </TabsValueContext.Provider>\n  )\n})\nTabs.displayName = 'Tabs'\n\n/** Props for the Tabs root (defaultValue, value, onValueChange, etc.). */\nexport type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n\ntype TabsVariant = 'line' | 'contained'\ntype TabsSize = 'sm' | 'md' | 'lg'\ntype TabsColor = 'accent' | 'neutral'\n\ninterface TabsListContextValue {\n  variant: TabsVariant\n  size: TabsSize\n  color: TabsColor\n  layoutId: string\n}\n\nconst TabsListContext = React.createContext<TabsListContextValue>({\n  variant: 'line',\n  size: 'md',\n  color: 'accent',\n  layoutId: 'tab-indicator',\n})\n\nconst tabsListVariants = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      line: 'border-b border-surface-border-strong w-full gap-0',\n      contained:\n        'bg-surface-raised p-ds-02 rounded-surface gap-ds-02',\n    },\n    size: {\n      sm: 'h-8',\n      md: 'h-10',\n      lg: 'h-12',\n    },\n    orientation: {\n      horizontal: '',\n      vertical: 'flex-col',\n    },\n  },\n  compoundVariants: [\n    // Vertical line: left border instead of bottom, fixed width, auto height\n    { variant: 'line', orientation: 'vertical', class: 'border-b-0 border-l border-surface-border-strong w-48 shrink-0 h-auto gap-0' },\n    // Vertical contained: column layout, fixed width, auto height\n    { variant: 'contained', orientation: 'vertical', class: 'h-auto w-48 shrink-0' },\n  ],\n  defaultVariants: { variant: 'line', size: 'md', orientation: 'horizontal' },\n})\n\nconst tabsTriggerVariants = cva(\n  'relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      variant: {\n        line: [\n          '-mb-px',\n          'text-surface-fg-muted hover:text-surface-fg',\n        ],\n        contained: [\n          'rounded-control',\n          'text-surface-fg-muted hover:text-surface-fg',\n          'data-[state=active]:text-surface-fg',\n        ],\n      },\n      size: {\n        sm: 'px-ds-03 py-ds-02 text-body-xs',\n        md: 'px-ds-05 py-ds-03 text-body-sm',\n        lg: 'px-ds-06 py-ds-04 text-body-md',\n      },\n    },\n    defaultVariants: { variant: 'line', size: 'md' },\n  },\n)\n\n/**\n * TabsList — container for tab triggers. Sets `variant` for all child TabsTriggers via context.\n *\n * **Compound structure — variant propagates automatically:**\n * ```tsx\n * <Tabs defaultValue=\"overview\">\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n * </Tabs>\n * ```\n *\n * `variant` on `TabsList` flows to all `TabsTrigger` children via React context.\n * You do NOT need to repeat `variant` on each `TabsTrigger`.\n */\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  /** Color axis — affects active tab indicator and text color. @default \"accent\" */\n  color?: TabsColor\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, color, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const resolvedVariant: TabsVariant = variant ?? 'line'\n  const resolvedSize: TabsSize = size ?? 'md'\n  const resolvedColor: TabsColor = color ?? 'accent'\n  const layoutId = React.useId()\n  const contextValue = React.useMemo(\n    () => ({\n      variant: resolvedVariant,\n      size: resolvedSize,\n      color: resolvedColor,\n      layoutId: `tab-indicator-${layoutId}`,\n    }),\n    [resolvedVariant, resolvedSize, resolvedColor, layoutId],\n  )\n  return (\n    <TabsListContext.Provider value={contextValue}>\n      <LayoutGroup>\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(tabsListVariants({ variant: resolvedVariant, size: resolvedSize, orientation }), className)}\n          {...props}\n        />\n      </LayoutGroup>\n    </TabsListContext.Provider>\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {}\n\n/* ── Color classes for active state ────── */\nconst lineActiveColorMap: Record<TabsColor, string> = {\n  accent: 'data-[state=active]:text-accent-11',\n  neutral: 'data-[state=active]:text-surface-fg',\n}\n\nconst lineIndicatorColorMap: Record<TabsColor, string> = {\n  accent: 'bg-accent-9',\n  neutral: 'bg-surface-fg',\n}\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, variant: variantProp, children, ...props }, ref) => {\n  const listContext = React.useContext(TabsListContext)\n  const activeValue = React.useContext(TabsValueContext)\n  const orientation = React.useContext(TabsOrientationContext)\n  const variant = variantProp ?? listContext.variant\n  const size = listContext.size\n  const color = listContext.color\n  const isActive = props.value === activeValue\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size }),\n        variant === 'line' && lineActiveColorMap[color],\n        // Vertical: full width triggers, left margin instead of bottom\n        isVertical && 'w-full justify-start',\n        variant === 'line' && isVertical && '-ml-px -mb-0',\n        className,\n      )}\n      {...props}\n    >\n      {/* Contained variant: sliding pill background */}\n      {variant === 'contained' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-contained`}\n          className=\"absolute inset-0 rounded-control bg-surface-overlay shadow-raised\"\n          transition={springs.smooth}\n        />\n      )}\n      {/* Content sits above the indicator */}\n      <span className=\"relative z-[1] inline-flex min-w-0 items-center gap-ds-02\">\n        <span className=\"truncate\">{children}</span>\n      </span>\n      {/* Line variant: sliding indicator -- bottom underline (horizontal) or left bar (vertical) */}\n      {variant === 'line' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-line`}\n          className={cn(\n            'absolute',\n            isVertical\n              ? 'left-0 top-0 bottom-0 w-0.5'\n              : 'bottom-0 left-0 right-0 h-0.5',\n            lineIndicatorColorMap[color],\n          )}\n          transition={springs.smooth}\n        />\n      )}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        isVertical ? 'mt-0 flex-1 min-w-0' : 'mt-ds-05',\n        className,\n      )}\n    {...props}\n  >\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n    >\n      {children}\n    </motion.div>\n  </TabsPrimitive.Content>\n  )\n})\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\n/** Props for TabsContent. The `value` prop must match a TabsTrigger's `value`. */\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n\nexport { Tabs, TabsContent,TabsList, TabsTrigger }\nexport type { TabsColor, TabsOrientation,TabsSize }\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAAmB,EAAM,cAAkC,KAAA,CAAS,GACpE,IAAyB,EAAM,cAA+B,YAAY,GA6C1E,IAAO,EAAM,YAGhB,EAAE,OAAO,GAAW,iBAAc,kBAAe,gBAAa,GAAG,KAAS,MAAQ;CAGnF,IAAM,CAAC,GAAa,KAAkB,EAAM,SAAS,KAAa,KAAgB,EAAE;CAGpF,EAAM,gBAAgB;EACpB,AAAI,MAAc,KAAA,KAAW,EAAe,CAAS;CACvD,GAAG,CAAC,CAAS,CAAC;CAEd,IAAM,IAAoB,EAAM,aAC7B,MAAqB;EAEpB,AADA,EAAe,CAAQ,GACvB,IAAgB,CAAQ;CAC1B,GACA,CAAC,CAAa,CAChB,GAEM,IAAuC,KAAe;CAE5D,OACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,EAAuB,UAAxB;GAAiC,OAAO;aACtC,kBAAC,GAAD;IACO;IACL,OAAO;IACP,cAAc,MAAc,KAAA,IAAY,IAAe,KAAA;IACvD,eAAe;IACF;IACb,GAAI;IACJ,WAAW,EACT,MAAwB,cAAc,2BACtC,EAAM,SACR;GACD,CAAA;EAC8B,CAAA;CACR,CAAA;AAE/B,CAAC;AACD,EAAK,cAAc;AAgBnB,IAAM,IAAkB,EAAM,cAAoC;CAChE,SAAS;CACT,MAAM;CACN,OAAO;CACP,UAAU;AACZ,CAAC,GAEK,IAAmB,EAAI,4BAA4B;CACvD,UAAU;EACR,SAAS;GACP,MAAM;GACN,WACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;CACF;CACA,kBAAkB,CAEhB;EAAE,SAAS;EAAQ,aAAa;EAAY,OAAO;CAA8E,GAEjI;EAAE,SAAS;EAAa,aAAa;EAAY,OAAO;CAAuB,CACjF;CACA,iBAAiB;EAAE,SAAS;EAAQ,MAAM;EAAM,aAAa;CAAa;AAC5E,CAAC,GAEK,IAAsB,EAC1B,6SACA;CACE,UAAU;EACR,SAAS;GACP,MAAM,CACJ,UACA,6CACF;GACA,WAAW;IACT;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EAAE,SAAS;EAAQ,MAAM;CAAK;AACjD,CACF,GA2BM,IAAW,EAAM,YAGpB,EAAE,cAAW,YAAS,SAAM,UAAO,GAAG,KAAS,MAAQ;CACxD,IAAM,IAAc,EAAM,WAAW,CAAsB,GACrD,IAA+B,KAAW,QAC1C,IAAyB,KAAQ,MACjC,IAA2B,KAAS,UACpC,IAAW,EAAM,MAAM,GACvB,IAAe,EAAM,eAClB;EACL,SAAS;EACT,MAAM;EACN,OAAO;EACP,UAAU,iBAAiB;CAC7B,IACA;EAAC;EAAiB;EAAc;EAAe;CAAQ,CACzD;CACA,OACE,kBAAC,EAAgB,UAAjB;EAA0B,OAAO;YAC/B,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GACO;GACL,WAAW,EAAG,EAAiB;IAAE,SAAS;IAAiB,MAAM;IAAc;GAAY,CAAC,GAAG,CAAS;GACxG,GAAI;EACL,CAAA,EACU,CAAA;CACW,CAAA;AAE9B,CAAC;AACD,EAAS,cAAA,EAAiC;AAO1C,IAAM,IAAgD;CACpD,QAAQ;CACR,SAAS;AACX,GAEM,IAAmD;CACvD,QAAQ;CACR,SAAS;AACX,GAEM,IAAc,EAAM,YAGvB,EAAE,cAAW,SAAS,GAAa,aAAU,GAAG,KAAS,MAAQ;CAClE,IAAM,IAAc,EAAM,WAAW,CAAe,GAC9C,IAAc,EAAM,WAAW,CAAgB,GAC/C,IAAc,EAAM,WAAW,CAAsB,GACrD,IAAU,KAAe,EAAY,SACrC,IAAO,EAAY,MACnB,IAAQ,EAAY,OACpB,IAAW,EAAM,UAAU,GAC3B,IAAa,MAAgB;CAEnC,OACE,kBAAC,GAAD;EACO;EACL,WAAW,EACT,EAAoB;GAAE;GAAS;EAAK,CAAC,GACrC,MAAY,UAAU,EAAmB,IAEzC,KAAc,wBACd,MAAY,UAAU,KAAc,gBACpC,CACF;EACA,GAAI;YAVN;GAaG,MAAY,eAAe,KAC1B,kBAAC,EAAO,MAAR;IACE,UAAU,GAAG,EAAY,SAAS;IAClC,WAAU;IACV,YAAY,EAAQ;GACrB,CAAA;GAGH,kBAAC,QAAD;IAAM,WAAU;cACd,kBAAC,QAAD;KAAM,WAAU;KAAY;IAAe,CAAA;GACvC,CAAA;GAEL,MAAY,UAAU,KACrB,kBAAC,EAAO,MAAR;IACE,UAAU,GAAG,EAAY,SAAS;IAClC,WAAW,EACT,YACA,IACI,gCACA,iCACJ,EAAsB,EACxB;IACA,YAAY,EAAQ;GACrB,CAAA;EAEkB;;AAE3B,CAAC;AACD,EAAY,cAAA,EAAoC;AAEhD,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,aAAU,GAAG,KAAS,MAKlC,kBAAC,GAAD;CACO;CACL,WAAW,EACT,oIAPc,EAAM,WAAW,CAClB,MAAgB,aAOhB,wBAAwB,YACrC,CACF;CACF,GAAI;WAEJ,kBAAC,EAAO,KAAR;EACE,SAAS,EAAE,SAAS,EAAE;EACtB,SAAS,EAAE,SAAS,EAAE;EACtB,YAAY,EAAO;EAElB;CACS,CAAA;AACS,CAAA,CAExB;AACD,EAAY,cAAA,EAAoC"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@primitives/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/* ── Active-value context (drives layoutId indicator) ────── */\ntype TabsOrientation = 'horizontal' | 'vertical'\nconst TabsValueContext = React.createContext<string | undefined>(undefined)\nconst TabsOrientationContext = React.createContext<TabsOrientation>('horizontal')\n\n/**\n * Tabs compound component — accessible tabbed navigation with keyboard support and two visual\n * variants (line underline and contained pill styles).\n *\n * **Parts (in composition order):**\n * - `Tabs` — manages active tab state (this root; takes `defaultValue`, `value`, `onValueChange`)\n * - `TabsList` — tab bar container (takes `variant=\"line\"|\"contained\"`, default `\"line\"`)\n * - `TabsTrigger` — individual tab button (requires `value`; inherits `variant` from TabsList via context)\n * - `TabsContent` — the panel shown when its tab is active (requires `value` matching a TabsTrigger)\n *\n * **Critical behavior:** `variant` set on `TabsList` propagates automatically via React context to\n * all `TabsTrigger` children. You do NOT need to repeat `variant` on each trigger — but you CAN\n * override it per-trigger if needed.\n *\n * The active tab indicator animates between tabs using Framer Motion `layoutId`. Line variant\n * shows a sliding underline; contained variant shows a sliding pill background.\n *\n * @compound\n * @example\n * // Default line variant:\n * <Tabs defaultValue=\"overview\">\n *   <TabsList>\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *     <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n *   <TabsContent value=\"settings\">Settings content</TabsContent>\n * </Tabs>\n *\n * @example\n * // Contained pill variant (controlled):\n * const [tab, setTab] = useState('members')\n * <Tabs value={tab} onValueChange={setTab}>\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"members\">Members</TabsTrigger>\n *     <TabsTrigger value=\"roles\">Roles</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"members\">Members list here.</TabsContent>\n *   <TabsContent value=\"roles\">Roles list here.</TabsContent>\n * </Tabs>\n */\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>(({ value: valueProp, defaultValue, onValueChange, orientation, ...props }, ref) => {\n  // Track the active value so TabsTrigger can conditionally render the motion indicator.\n  // For controlled usage, mirror the prop; for uncontrolled, manage internal state.\n  const [activeValue, setActiveValue] = React.useState(valueProp ?? defaultValue ?? '')\n\n  // Sync controlled value\n  React.useEffect(() => {\n    if (valueProp !== undefined) setActiveValue(valueProp)\n  }, [valueProp])\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      setActiveValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [onValueChange],\n  )\n\n  const resolvedOrientation: TabsOrientation = orientation ?? 'horizontal'\n\n  return (\n    <TabsValueContext.Provider value={activeValue}>\n      <TabsOrientationContext.Provider value={resolvedOrientation}>\n        <TabsPrimitive.Root\n          ref={ref}\n          value={valueProp}\n          defaultValue={valueProp === undefined ? defaultValue : undefined}\n          onValueChange={handleValueChange}\n          orientation={orientation}\n          {...props}\n          className={cn(\n            resolvedOrientation === 'vertical' && 'flex flex-row gap-ds-05',\n            props.className,\n          )}\n        />\n      </TabsOrientationContext.Provider>\n    </TabsValueContext.Provider>\n  )\n})\nTabs.displayName = 'Tabs'\n\n/** Props for the Tabs root (defaultValue, value, onValueChange, etc.). */\nexport type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n\ntype TabsVariant = 'line' | 'contained'\ntype TabsSize = 'sm' | 'md' | 'lg'\ntype TabsColor = 'accent' | 'neutral'\n\ninterface TabsListContextValue {\n  variant: TabsVariant\n  size: TabsSize\n  color: TabsColor\n  layoutId: string\n}\n\nconst TabsListContext = React.createContext<TabsListContextValue>({\n  variant: 'line',\n  size: 'md',\n  color: 'accent',\n  layoutId: 'tab-indicator',\n})\n\nconst tabsListVariants = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      line: 'border-b border-surface-border-strong w-full gap-0',\n      contained:\n        // alpha, not a fixed tier: a contained track must read as a groove on the\n        // page AND on a card, and in light the page and panel are the same white\n        'bg-segment-track p-ds-02 rounded-surface gap-ds-02',\n    },\n    size: {\n      sm: 'h-8',\n      md: 'h-10',\n      lg: 'h-12',\n    },\n    orientation: {\n      horizontal: '',\n      vertical: 'flex-col',\n    },\n  },\n  compoundVariants: [\n    // Vertical line: left border instead of bottom, fixed width, auto height\n    { variant: 'line', orientation: 'vertical', class: 'border-b-0 border-l border-surface-border-strong w-48 shrink-0 h-auto gap-0' },\n    // Vertical contained: column layout, fixed width, auto height\n    { variant: 'contained', orientation: 'vertical', class: 'h-auto w-48 shrink-0' },\n  ],\n  defaultVariants: { variant: 'line', size: 'md', orientation: 'horizontal' },\n})\n\nconst tabsTriggerVariants = cva(\n  'relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      variant: {\n        line: [\n          '-mb-px',\n          'text-surface-fg-muted hover:text-surface-fg',\n        ],\n        contained: [\n          'rounded-control',\n          'text-surface-fg-muted hover:text-surface-fg',\n          'data-[state=active]:text-surface-fg',\n        ],\n      },\n      size: {\n        sm: 'px-ds-03 py-ds-02 text-body-xs',\n        md: 'px-ds-05 py-ds-03 text-body-sm',\n        lg: 'px-ds-06 py-ds-04 text-body-md',\n      },\n    },\n    defaultVariants: { variant: 'line', size: 'md' },\n  },\n)\n\n/**\n * TabsList — container for tab triggers. Sets `variant` for all child TabsTriggers via context.\n *\n * **Compound structure — variant propagates automatically:**\n * ```tsx\n * <Tabs defaultValue=\"overview\">\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n * </Tabs>\n * ```\n *\n * `variant` on `TabsList` flows to all `TabsTrigger` children via React context.\n * You do NOT need to repeat `variant` on each `TabsTrigger`.\n */\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  /** Color axis — affects active tab indicator and text color. @default \"accent\" */\n  color?: TabsColor\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, color, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const resolvedVariant: TabsVariant = variant ?? 'line'\n  const resolvedSize: TabsSize = size ?? 'md'\n  const resolvedColor: TabsColor = color ?? 'accent'\n  const layoutId = React.useId()\n  const contextValue = React.useMemo(\n    () => ({\n      variant: resolvedVariant,\n      size: resolvedSize,\n      color: resolvedColor,\n      layoutId: `tab-indicator-${layoutId}`,\n    }),\n    [resolvedVariant, resolvedSize, resolvedColor, layoutId],\n  )\n  return (\n    <TabsListContext.Provider value={contextValue}>\n      <LayoutGroup>\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(tabsListVariants({ variant: resolvedVariant, size: resolvedSize, orientation }), className)}\n          {...props}\n        />\n      </LayoutGroup>\n    </TabsListContext.Provider>\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {}\n\n/* ── Color classes for active state ────── */\nconst lineActiveColorMap: Record<TabsColor, string> = {\n  accent: 'data-[state=active]:text-accent-11',\n  neutral: 'data-[state=active]:text-surface-fg',\n}\n\nconst lineIndicatorColorMap: Record<TabsColor, string> = {\n  accent: 'bg-accent-9',\n  neutral: 'bg-surface-fg',\n}\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, variant: variantProp, children, ...props }, ref) => {\n  const listContext = React.useContext(TabsListContext)\n  const activeValue = React.useContext(TabsValueContext)\n  const orientation = React.useContext(TabsOrientationContext)\n  const variant = variantProp ?? listContext.variant\n  const size = listContext.size\n  const color = listContext.color\n  const isActive = props.value === activeValue\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size }),\n        variant === 'line' && lineActiveColorMap[color],\n        // Vertical: full width triggers, left margin instead of bottom\n        isVertical && 'w-full justify-start',\n        variant === 'line' && isVertical && '-ml-px -mb-0',\n        className,\n      )}\n      {...props}\n    >\n      {/* Contained variant: sliding pill background */}\n      {variant === 'contained' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-contained`}\n          className=\"absolute inset-0 rounded-control bg-surface-overlay shadow-raised\"\n          transition={springs.smooth}\n        />\n      )}\n      {/* Content sits above the indicator */}\n      <span className=\"relative z-[1] inline-flex min-w-0 items-center gap-ds-02\">\n        <span className=\"truncate\">{children}</span>\n      </span>\n      {/* Line variant: sliding indicator -- bottom underline (horizontal) or left bar (vertical) */}\n      {variant === 'line' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-line`}\n          className={cn(\n            'absolute',\n            isVertical\n              ? 'left-0 top-0 bottom-0 w-0.5'\n              : 'bottom-0 left-0 right-0 h-0.5',\n            lineIndicatorColorMap[color],\n          )}\n          transition={springs.smooth}\n        />\n      )}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        isVertical ? 'mt-0 flex-1 min-w-0' : 'mt-ds-05',\n        className,\n      )}\n    {...props}\n  >\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n    >\n      {children}\n    </motion.div>\n  </TabsPrimitive.Content>\n  )\n})\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\n/** Props for TabsContent. The `value` prop must match a TabsTrigger's `value`. */\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n\nexport { Tabs, TabsContent,TabsList, TabsTrigger }\nexport type { TabsColor, TabsOrientation,TabsSize }\n"],"mappings":"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"}

package/dist/ui/text.js

@@ -1,8 +1,8 @@
-import { cva as e } from "../_chunks/vendor-utils.js";
-import { cn as t } from "./lib/utils.js";
-import * as n from "react";
+import { cn as e } from "./lib/utils.js";
+import * as t from "react";
+import { cva as n } from "class-variance-authority";
 //#region src/ui/text.tsx
-var r = e("font-sans", {
+var r = n("font-sans", {
 	variants: { variant: {
 		"heading-2xl": "font-display text-[length:var(--typo-heading-2xl-size)] font-[number:var(--typo-heading-2xl-weight)] leading-[var(--typo-heading-2xl-leading)] tracking-[var(--typo-heading-2xl-tracking)]",
 		"heading-xl": "font-display text-[length:var(--typo-heading-xl-size)] font-[number:var(--typo-heading-xl-weight)] leading-[var(--typo-heading-xl-leading)] tracking-[var(--typo-heading-xl-tracking)]",
@@ -47,11 +47,11 @@ var r = e("font-sans", {
 	"label-plain-lg": "span",
 	"label-plain-md": "span",
 	"label-plain-sm": "span"
-}, a = n.forwardRef(({ variant: e = "body-md", as: a, className: o, children: s, ...c }, l) => {
-	let u = a || i[e] || "p";
-	return n.createElement(u, {
+}, a = t.forwardRef(({ variant: n = "body-md", as: a, className: o, children: s, ...c }, l) => {
+	let u = a || i[n] || "p";
+	return t.createElement(u, {
 		ref: l,
-		className: t(r({ variant: e }), o),
+		className: e(r({ variant: n }), o),
 		...c
 	}, s);
 });

package/dist/ui/textarea.js

@@ -1,23 +1,23 @@
 "use client";
 import { motionProps as e } from "./lib/motion.js";
-import { cva as t } from "../_chunks/vendor-utils.js";
-import { cn as n } from "./lib/utils.js";
-import { useFormField as r } from "./form.js";
-import { resolveFieldState as i } from "../_chunks/field-state.js";
-import * as a from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { motion as s } from "framer-motion";
+import { cn as t } from "./lib/utils.js";
+import { useFormField as n } from "./form.js";
+import { resolveFieldState as r } from "../_chunks/field-state.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { motion as o } from "framer-motion";
+import { cva as s } from "class-variance-authority";
 //#region src/ui/textarea.tsx
-var c = t([
+var c = s([
 	"flex w-full font-sans resize-y",
-	"bg-surface-raised-hover text-surface-fg",
-	"border border-surface-border-strong rounded-control",
-	"placeholder:text-surface-fg-subtle",
-	"hover:bg-surface-raised-active",
+	"bg-surface-panel-hover text-surface-fg",
+	"border border-surface-border-interactive rounded-control",
+	"placeholder:text-surface-fg-muted",
+	"hover:bg-surface-panel-active",
 	"transition-colors duration-fast-01 ease-productive-standard",
 	"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7",
 	"disabled:cursor-not-allowed disabled:opacity-action-disabled",
-	"read-only:bg-surface-raised read-only:cursor-default"
+	"read-only:bg-surface-panel read-only:cursor-default"
 ], {
 	variants: { size: {
 		xs: "min-h-ds-09 text-body-sm px-ds-02 py-ds-02",
@@ -26,13 +26,13 @@ var c = t([
 		lg: "min-h-[120px] text-body-md px-ds-05 py-ds-04"
 	} },
 	defaultVariants: { size: "md" }
-}), l = a.forwardRef(({ className: t, state: a, size: l, ...u }, d) => {
-	let f = r(), p = i(a, f.state), m = u["aria-describedby"] ?? f.helperTextId, h = u["aria-required"] ?? f.required, g = u.id ?? f.inputId;
-	return /* @__PURE__ */ o(s.textarea, {
+}), l = i.forwardRef(({ className: i, state: s, size: l, ...u }, d) => {
+	let f = n(), p = r(s, f.state), m = u["aria-describedby"] ?? f.helperTextId, h = u["aria-required"] ?? f.required, g = u.id ?? f.inputId;
+	return /* @__PURE__ */ a(o.textarea, {
 		"aria-invalid": p === "error" || void 0,
 		"aria-describedby": m,
 		"aria-required": h || void 0,
-		className: n(c({ size: l }), p === "error" && "border-error-7 focus-visible:ring-error-7", p === "warning" && "border-warning-7 focus-visible:ring-warning-7", p === "success" && "border-success-7 focus-visible:ring-success-7", t),
+		className: t(c({ size: l }), p === "error" && "border-error-7 focus-visible:ring-error-7", p === "warning" && "border-warning-7 focus-visible:ring-warning-7", p === "success" && "border-success-7 focus-visible:ring-success-7", i),
 		ref: d,
 		...e(u),
 		id: g

package/dist/ui/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../src/ui/textarea.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { motionProps } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst textareaVariants = cva(\n  [\n    'flex w-full font-sans resize-y',\n    'bg-surface-raised-hover text-surface-fg',\n    'border border-surface-border-strong rounded-control',\n    'placeholder:text-surface-fg-subtle',\n    'hover:bg-surface-raised-active',\n    'transition-colors duration-fast-01 ease-productive-standard',\n    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7',\n    'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n    'read-only:bg-surface-raised read-only:cursor-default',\n  ],\n  {\n    variants: {\n      // Min-height ramp 48/60/80/120: 48/80 map to spacing tokens (ds-09/ds-11);\n      // 60/120 have no exact token so stay arbitrary (allowed). Rendered sizes unchanged.\n      size: {\n        xs: 'min-h-ds-09 text-body-sm px-ds-02 py-ds-02',\n        sm: 'min-h-[60px] text-body-sm px-ds-03 py-ds-02',\n        md: 'min-h-ds-11 text-body-md px-ds-04 py-ds-03',\n        lg: 'min-h-[120px] text-body-md px-ds-05 py-ds-04',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\n/**\n * Props for Textarea — a resizable multi-line text input with size variants and validation state coloring,\n * sharing the same `FieldState` type as every form control.\n *\n * **Sizes:** `sm` (min 60px) | `md` (min 80px, default) | `lg` (min 120px) — all are vertically resizable.\n *\n * **Validation states:** `state=\"error\"` | `\"warning\"` | `\"success\"` — changes border color and focus ring.\n * HTML's native `size` attribute is omitted; use `rows` for initial height or CSS `min-height`.\n *\n * **Pair with FormField:** Use inside `<FormField>` to get a label, helper text, and associated `state`.\n *\n * @example\n * // Basic description textarea in a form:\n * <Textarea placeholder=\"Describe the issue...\" rows={4} />\n *\n * @example\n * // Error state when validation fails:\n * <Textarea state=\"error\" value={bio} onChange={(e) => setBio(e.target.value)} />\n *\n * @example\n * // Large textarea for a full email draft composer:\n * <Textarea size=\"lg\" placeholder=\"Write your message...\" className=\"min-h-[200px]\" />\n *\n * @example\n * // Read-only view of a previously submitted note:\n * <Textarea readOnly value={submission.notes} size=\"md\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,\n    VariantProps<typeof textareaVariants> {\n  state?: FieldState\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, state: stateProp, size, ...props }, ref) => {\n    const fieldCtx = useFormField()\n    // Merge FormField context — explicit props always win (shared precedence)\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n    const ariaRequired = props['aria-required'] ?? fieldCtx.required\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n    const textareaId = props.id ?? fieldCtx.inputId\n\n    return (\n      <motion.textarea\n        aria-invalid={state === 'error' || undefined}\n        aria-describedby={ariaDescribedBy}\n        aria-required={ariaRequired || undefined}\n        className={cn(\n          textareaVariants({ size }),\n          state === 'error' && 'border-error-7 focus-visible:ring-error-7',\n          state === 'warning' && 'border-warning-7 focus-visible:ring-warning-7',\n          state === 'success' && 'border-success-7 focus-visible:ring-success-7',\n          className,\n        )}\n        ref={ref}\n        {...motionProps(props)}\n        id={textareaId}\n      />\n    )\n  },\n)\nTextarea.displayName = 'Textarea'\n\nexport { Textarea, textareaVariants }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAmB,EACvB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EAGR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAoCM,IAAW,EAAM,YACpB,EAAE,cAAW,OAAO,GAAW,SAAM,GAAG,KAAS,MAAQ;CACxD,IAAM,IAAW,EAAa,GAExB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAa,EAAM,MAAM,EAAS;CAExC,OACE,kBAAC,EAAO,UAAR;EACE,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,WAAW,EACT,EAAiB,EAAE,QAAK,CAAC,GACzB,MAAU,WAAW,6CACrB,MAAU,aAAa,iDACvB,MAAU,aAAa,iDACvB,CACF;EACK;EACL,GAAI,EAAY,CAAK;EACrB,IAAI;CACL,CAAA;AAEL,CACF;AACA,EAAS,cAAc"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../../src/ui/textarea.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { motionProps } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst textareaVariants = cva(\n  [\n    'flex w-full font-sans resize-y',\n    'bg-surface-panel-hover text-surface-fg',\n    'border border-surface-border-interactive rounded-control',\n    'placeholder:text-surface-fg-muted',\n    'hover:bg-surface-panel-active',\n    'transition-colors duration-fast-01 ease-productive-standard',\n    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7',\n    'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n    'read-only:bg-surface-panel read-only:cursor-default',\n  ],\n  {\n    variants: {\n      // Min-height ramp 48/60/80/120: 48/80 map to spacing tokens (ds-09/ds-11);\n      // 60/120 have no exact token so stay arbitrary (allowed). Rendered sizes unchanged.\n      size: {\n        xs: 'min-h-ds-09 text-body-sm px-ds-02 py-ds-02',\n        sm: 'min-h-[60px] text-body-sm px-ds-03 py-ds-02',\n        md: 'min-h-ds-11 text-body-md px-ds-04 py-ds-03',\n        lg: 'min-h-[120px] text-body-md px-ds-05 py-ds-04',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\n/**\n * Props for Textarea — a resizable multi-line text input with size variants and validation state coloring,\n * sharing the same `FieldState` type as every form control.\n *\n * **Sizes:** `sm` (min 60px) | `md` (min 80px, default) | `lg` (min 120px) — all are vertically resizable.\n *\n * **Validation states:** `state=\"error\"` | `\"warning\"` | `\"success\"` — changes border color and focus ring.\n * HTML's native `size` attribute is omitted; use `rows` for initial height or CSS `min-height`.\n *\n * **Pair with FormField:** Use inside `<FormField>` to get a label, helper text, and associated `state`.\n *\n * @example\n * // Basic description textarea in a form:\n * <Textarea placeholder=\"Describe the issue...\" rows={4} />\n *\n * @example\n * // Error state when validation fails:\n * <Textarea state=\"error\" value={bio} onChange={(e) => setBio(e.target.value)} />\n *\n * @example\n * // Large textarea for a full email draft composer:\n * <Textarea size=\"lg\" placeholder=\"Write your message...\" className=\"min-h-[200px]\" />\n *\n * @example\n * // Read-only view of a previously submitted note:\n * <Textarea readOnly value={submission.notes} size=\"md\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,\n    VariantProps<typeof textareaVariants> {\n  state?: FieldState\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, state: stateProp, size, ...props }, ref) => {\n    const fieldCtx = useFormField()\n    // Merge FormField context — explicit props always win (shared precedence)\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n    const ariaRequired = props['aria-required'] ?? fieldCtx.required\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves.\n    const textareaId = props.id ?? fieldCtx.inputId\n\n    return (\n      <motion.textarea\n        aria-invalid={state === 'error' || undefined}\n        aria-describedby={ariaDescribedBy}\n        aria-required={ariaRequired || undefined}\n        className={cn(\n          textareaVariants({ size }),\n          state === 'error' && 'border-error-7 focus-visible:ring-error-7',\n          state === 'warning' && 'border-warning-7 focus-visible:ring-warning-7',\n          state === 'success' && 'border-success-7 focus-visible:ring-success-7',\n          className,\n        )}\n        ref={ref}\n        {...motionProps(props)}\n        id={textareaId}\n      />\n    )\n  },\n)\nTextarea.displayName = 'Textarea'\n\nexport { Textarea, textareaVariants }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAmB,EACvB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EAGR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAoCM,IAAW,EAAM,YACpB,EAAE,cAAW,OAAO,GAAW,SAAM,GAAG,KAAS,MAAQ;CACxD,IAAM,IAAW,EAAa,GAExB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAa,EAAM,MAAM,EAAS;CAExC,OACE,kBAAC,EAAO,UAAR;EACE,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,WAAW,EACT,EAAiB,EAAE,QAAK,CAAC,GACzB,MAAU,WAAW,6CACrB,MAAU,aAAa,iDACvB,MAAU,aAAa,iDACvB,CACF;EACK;EACL,GAAI,EAAY,CAAK;EACrB,IAAI;CACL,CAAA;AAEL,CACF;AACA,EAAS,cAAc"}

package/dist/ui/toast.js

@@ -155,7 +155,7 @@ function k({ type: a, title: o, description: u, action: d, cancel: f, duration:
 							children: [d && /* @__PURE__ */ c("button", {
 								type: "button",
 								onClick: d.onClick,
-								className: "text-body-sm font-medium text-accent-11 underline-offset-2 hover:underline hover:bg-surface-raised-hover rounded-control-inner px-ds-02 py-ds-01 transition-[color,background-color] duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-control-inner",
+								className: "text-body-sm font-medium text-accent-11 underline-offset-2 hover:underline hover:bg-surface-panel-hover rounded-control-inner px-ds-02 py-ds-01 transition-[color,background-color] duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-control-inner",
 								children: d.label
 							}), f && /* @__PURE__ */ c("button", {
 								type: "button",

package/dist/ui/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":[],"sources":["../../src/ui/toast.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconAlertCircle,\n  IconAlertTriangle,\n  IconCheck,\n  IconCircleCheck,\n  IconCircleX,\n  IconFile,\n  IconInfoCircle,\n  IconPhoto,\n  IconRefresh,\n  IconUpload,\n  IconX,\n} from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { type ExternalToast,toast as sonnerToast } from 'sonner'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Progress } from './progress'\nimport { Spinner } from './spinner'\nimport { assertToasterMounted } from './toast-registry'\nimport type {\n  ToastActionOptions,\n  ToastOptions,\n  ToastType,\n  ToastUndoOptions,\n  ToastUploadOptions,\n  UploadFile,\n} from './toast-types'\n\n/* ---------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------ */\n\nconst DEFAULT_DURATION = 5000\nconst UNDO_DURATION = 8000\nconst UPLOAD_COMPLETE_DELAY = 3000\n\n/* ---------------------------------------------------------------------------\n * Accent bar & icon config per toast type\n * ------------------------------------------------------------------------ */\n\nconst TOAST_TYPE_CONFIG: Record<\n  ToastType,\n  {\n    accentClass: string\n    iconClass: string\n    icon: React.ForwardRefExoticComponent<any> | null\n    timerBarClass: string\n  }\n> = {\n  message: {\n    accentClass: '',\n    iconClass: '',\n    icon: null,\n    timerBarClass: 'bg-surface-border',\n  },\n  success: {\n    accentClass: 'bg-success-9',\n    iconClass: 'text-success-11',\n    icon: IconCircleCheck,\n    timerBarClass: 'bg-success-9',\n  },\n  error: {\n    accentClass: 'bg-error-9',\n    iconClass: 'text-error-11',\n    icon: IconCircleX,\n    timerBarClass: 'bg-error-9',\n  },\n  warning: {\n    accentClass: 'bg-warning-9',\n    iconClass: 'text-warning-11',\n    icon: IconAlertTriangle,\n    timerBarClass: 'bg-warning-9',\n  },\n  info: {\n    accentClass: 'bg-info-9',\n    iconClass: 'text-info-11',\n    icon: IconInfoCircle,\n    timerBarClass: 'bg-info-9',\n  },\n  loading: {\n    accentClass: 'bg-accent-9',\n    iconClass: 'text-accent-11',\n    icon: null,\n    timerBarClass: 'bg-accent-9',\n  },\n}\n\n/* ---------------------------------------------------------------------------\n * Timer bar — shows auto-dismiss countdown\n * ------------------------------------------------------------------------ */\n\nfunction TimerBar({\n  duration,\n  type,\n  paused,\n}: {\n  duration: number\n  type: ToastType\n  paused: boolean\n}) {\n  const config = TOAST_TYPE_CONFIG[type]\n  return (\n    <div className=\"absolute bottom-0 left-0 right-0 h-ds-01 overflow-hidden\">\n      <div\n        className={cn(\n          'h-full w-full origin-left opacity-30',\n          config.timerBarClass,\n          'motion-safe:animate-timer-bar',\n        )}\n        style={{\n          animationDuration: `${duration}ms`,\n          animationPlayState: paused ? 'paused' : 'running',\n        }}\n      />\n    </div>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Base toast UI — used by all typed toasts\n * ------------------------------------------------------------------------ */\n\nfunction ToastContent({\n  type,\n  title,\n  description,\n  action,\n  cancel,\n  duration = DEFAULT_DURATION,\n  showTimerBar = true,\n  showAccent = false,\n  selfDismissId,\n}: {\n  type: ToastType\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionOptions\n  cancel?: ToastActionOptions\n  duration?: number\n  showTimerBar?: boolean\n  /** Render the colored left accent bar. Off by default (status = icon + timer bar). */\n  showAccent?: boolean\n  /** When set, this component manages its own dismiss timer (hover-aware). */\n  selfDismissId?: string | number\n}) {\n  const [hovered, setHovered] = React.useState(false)\n  const [focused, setFocused] = React.useState(false)\n  const paused = hovered || focused\n  const config = TOAST_TYPE_CONFIG[type]\n  const StatusIcon = config.icon\n\n  // Self-managed dismiss timer that pauses on hover or keyboard focus\n  const remainingRef = React.useRef(duration)\n  const startTimeRef = React.useRef(0)\n\n  React.useEffect(() => {\n    if (selfDismissId == null || duration === Infinity) return\n    if (paused) {\n      // Pause: save remaining time\n      const elapsed = Date.now() - startTimeRef.current\n      remainingRef.current = Math.max(0, remainingRef.current - elapsed)\n      return\n    }\n    // Start/resume timer\n    startTimeRef.current = Date.now()\n    const timer = setTimeout(() => {\n      sonnerToast.dismiss(selfDismissId)\n    }, remainingRef.current)\n    return () => clearTimeout(timer)\n  }, [selfDismissId, duration, paused])\n\n  // Error toasts announce assertively so screen readers interrupt;\n  // warnings stay polite but atomically re-read the message.\n  const isUrgent = type === 'error'\n  return (\n    <motion.div\n      layout=\"position\"\n      role={isUrgent ? 'alert' : 'status'}\n      aria-live={isUrgent ? 'assertive' : 'polite'}\n      aria-atomic=\"true\"\n      className={cn(\n        'group relative flex w-full overflow-hidden rounded-overlay-sm bg-surface-overlay shadow-floating',\n        // Faint surface tint on error only — the one you must not miss.\n        type === 'error' && 'bg-error-2',\n      )}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onFocusCapture={() => setFocused(true)}\n      onBlurCapture={() => setFocused(false)}\n      transition={springs.smooth}\n    >\n      {/* Left accent bar — opt-in via showAccent (status is carried by icon + timer bar) */}\n      {showAccent && config.accentClass && (\n        <div\n          className={cn('w-1 shrink-0 rounded-l-overlay-sm', config.accentClass)}\n        />\n      )}\n\n      {/* Content */}\n      <div className=\"flex min-w-0 flex-1 items-start gap-ds-03 p-ds-04\">\n        {/* Status icon — animates between spinner ↔ typed icon */}\n        <AnimatePresence mode=\"wait\">\n          {type === 'loading' ? (\n            <motion.div\n              key=\"loading\"\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={tweens.fade}\n              className=\"mt-0.5 shrink-0\"\n            >\n              <Spinner size=\"sm\" className=\"h-4 w-4\" />\n            </motion.div>\n          ) : StatusIcon ? (\n            <motion.div\n              key={type}\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={springs.bouncy}\n              className=\"mt-0.5 shrink-0\"\n            >\n              <Icon icon={StatusIcon} size=\"sm\" className={config.iconClass} />\n            </motion.div>\n          ) : null}\n        </AnimatePresence>\n\n        {/* Text */}\n        <div className=\"min-w-0 flex-1\">\n          {title && (\n            <p className=\"text-body-md font-semibold text-surface-fg\">\n              {title}\n            </p>\n          )}\n          {description && (\n            <p\n              className={cn(\n                'text-body-sm text-surface-fg-muted',\n                title && 'mt-0.5',\n              )}\n            >\n              {description}\n            </p>\n          )}\n\n          {/* Action / cancel buttons */}\n          {(action || cancel) && (\n            <div className=\"mt-ds-03 flex items-center gap-ds-03\">\n              {action && (\n                <button\n                  type=\"button\"\n                  onClick={action.onClick}\n                  className=\"text-body-sm font-medium text-accent-11 underline-offset-2 hover:underline hover:bg-surface-raised-hover rounded-control-inner px-ds-02 py-ds-01 transition-[color,background-color] duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-control-inner\"\n                >\n                  {action.label}\n                </button>\n              )}\n              {cancel && (\n                <button\n                  type=\"button\"\n                  onClick={cancel.onClick}\n                  className=\"text-body-sm text-surface-fg-muted hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-control-inner\"\n                >\n                  {cancel.label}\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Timer bar */}\n      {showTimerBar && type !== 'loading' && (\n        <TimerBar duration={duration} type={type} paused={paused} />\n      )}\n    </motion.div>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Upload toast UI\n * ------------------------------------------------------------------------ */\n\nconst IMAGE_EXTENSIONS = new Set([\n  'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'avif',\n])\n\nfunction isImageFile(file: UploadFile): boolean {\n  if (file.previewUrl) return true\n  const ext = file.name.split('.').pop()?.toLowerCase() ?? ''\n  return IMAGE_EXTENSIONS.has(ext)\n}\n\nfunction getProgressColor(\n  status: UploadFile['status'],\n): 'accent' | 'success' | 'error' {\n  switch (status) {\n    case 'complete':\n      return 'success'\n    case 'error':\n      return 'error'\n    default:\n      return 'accent'\n  }\n}\n\nfunction getProgressValue(file: UploadFile): number | undefined {\n  switch (file.status) {\n    case 'pending':\n      return 0\n    case 'uploading':\n      return file.progress ?? 0\n    case 'processing':\n      return undefined\n    case 'complete':\n      return 100\n    case 'error':\n      return file.progress ?? 0\n  }\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (!bytes || bytes < 0 || !Number.isFinite(bytes)) return '0 B'\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  if (bytes < 1024 * 1024 * 1024)\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`\n}\n\nfunction UploadFileRow({\n  file,\n  onRetry,\n  onRemove,\n}: {\n  file: UploadFile\n  onRetry?: (fileId: string) => void\n  onRemove?: (fileId: string) => void\n}) {\n  const isTerminal = file.status === 'complete' || file.status === 'error'\n  const isUploading =\n    file.status === 'uploading' || file.status === 'processing'\n\n  return (\n    <motion.div\n      layout\n      className=\"flex items-center gap-ds-02 py-1\"\n      initial={false}\n      animate={{ opacity: 1, y: 0 }}\n      exit={{ opacity: 0, x: -20, height: 0 }}\n      transition={springs.snappy}\n    >\n      {/* File icon — animates between states */}\n      <div className=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n        <AnimatePresence mode=\"wait\">\n          {file.status === 'complete' ? (\n            <motion.div\n              key=\"complete\"\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={springs.bouncy}\n            >\n              <Icon icon={IconCheck} size=\"xs\" className=\"text-success-11\" />\n            </motion.div>\n          ) : file.status === 'error' ? (\n            <motion.div\n              key=\"error\"\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={tweens.fade}\n            >\n              <Icon icon={IconAlertCircle} size=\"xs\" className=\"text-error-11\" />\n            </motion.div>\n          ) : file.status === 'processing' ? (\n            <motion.div\n              key=\"processing\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            >\n              <Spinner size=\"sm\" className=\"h-3.5 w-3.5\" />\n            </motion.div>\n          ) : isImageFile(file) ? (\n            <motion.div\n              key=\"image\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            >\n              <Icon icon={IconPhoto} size=\"xs\" className=\"text-surface-fg-muted\" />\n            </motion.div>\n          ) : (\n            <motion.div\n              key=\"file\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            >\n              <Icon icon={IconFile} size=\"xs\" className=\"text-surface-fg-muted\" />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n\n      {/* Filename */}\n      <span className=\"min-w-0 flex-1 truncate text-body-xs text-surface-fg\">\n        {file.name}\n      </span>\n\n      {/* Progress bar or status */}\n      {isUploading ? (\n        <div className=\"flex w-16 items-center gap-1\">\n          <Progress\n            size=\"sm\"\n            color={getProgressColor(file.status)}\n            value={getProgressValue(file)}\n            className=\"flex-1\"\n          />\n          {file.progress !== undefined && (\n            <span className=\"shrink-0 text-caption tabular-nums text-surface-fg-muted\">\n              {file.progress}%\n            </span>\n          )}\n        </div>\n      ) : file.status === 'complete' ? (\n        <span className=\"text-body-xs text-success-11\">Done</span>\n      ) : file.status === 'error' ? (\n        <span className=\"max-w-[60px] truncate text-body-xs text-error-11\">\n          {file.error || 'Failed'}\n        </span>\n      ) : (\n        <span className=\"text-caption text-surface-fg-muted\">\n          {formatFileSize(file.size)}\n        </span>\n      )}\n\n      {/* Actions */}\n      {file.status === 'error' && onRetry && (\n        <button\n          type=\"button\"\n          onClick={() => onRetry(file.id)}\n          className=\"touch-target flex min-h-6 min-w-6 items-center justify-center rounded-control-inner text-surface-fg-muted hover:text-surface-fg\"\n          aria-label={`Retry ${file.name}`}\n          title=\"Retry\"\n        >\n          <IconRefresh className=\"h-3.5 w-3.5\" />\n        </button>\n      )}\n      {!isTerminal && onRemove && (\n        <button\n          type=\"button\"\n          onClick={() => onRemove(file.id)}\n          className=\"touch-target flex min-h-6 min-w-6 items-center justify-center rounded-control-inner text-surface-fg-muted hover:text-surface-fg\"\n          aria-label={`Cancel ${file.name}`}\n          title=\"Remove\"\n        >\n          <IconX className=\"h-3.5 w-3.5\" />\n        </button>\n      )}\n    </motion.div>\n  )\n}\n\nfunction UploadToastContent({\n  files,\n  onRetry,\n  onRemove,\n  selfDismissId,\n  showAccent = false,\n}: {\n  files: UploadFile[]\n  onRetry?: (fileId: string) => void\n  onRemove?: (fileId: string) => void\n  selfDismissId?: string | number\n  /** Render the colored left accent bar. Off by default. */\n  showAccent?: boolean\n}) {\n  const [hovered, setHovered] = React.useState(false)\n  const [focused, setFocused] = React.useState(false)\n  const paused = hovered || focused\n  const completeCount = files.filter((f) => f.status === 'complete').length\n  const errorCount = files.filter((f) => f.status === 'error').length\n  const allTerminal = files.every(\n    (f) => f.status === 'complete' || f.status === 'error',\n  )\n\n  // Self-managed dismiss timer that pauses on hover or keyboard focus\n  const remainingRef = React.useRef(UPLOAD_COMPLETE_DELAY)\n  const startTimeRef = React.useRef(0)\n\n  React.useEffect(() => {\n    if (selfDismissId == null || !allTerminal) return\n    if (paused) {\n      const elapsed = Date.now() - startTimeRef.current\n      remainingRef.current = Math.max(0, remainingRef.current - elapsed)\n      return\n    }\n    startTimeRef.current = Date.now()\n    const timer = setTimeout(() => {\n      sonnerToast.dismiss(selfDismissId)\n    }, remainingRef.current)\n    return () => clearTimeout(timer)\n  }, [selfDismissId, allTerminal, paused])\n\n  const accentClass = allTerminal\n    ? errorCount > 0\n      ? 'bg-error-7'\n      : 'bg-success-7'\n    : 'bg-accent-9'\n\n  const timerBarType: ToastType = allTerminal\n    ? errorCount > 0\n      ? 'error'\n      : 'success'\n    : 'loading'\n\n  const uploadUrgent = allTerminal && errorCount > 0\n  return (\n    <motion.div\n      layout\n      role={uploadUrgent ? 'alert' : 'status'}\n      aria-live={uploadUrgent ? 'assertive' : 'polite'}\n      aria-label=\"File uploads\"\n      className={cn(\n        'group relative flex w-full overflow-hidden rounded-overlay-sm bg-surface-overlay shadow-floating',\n        // Faint surface tint when the batch ended with failures.\n        uploadUrgent && 'bg-error-2',\n      )}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onFocusCapture={() => setFocused(true)}\n      onBlurCapture={() => setFocused(false)}\n      transition={springs.smooth}\n    >\n      {/* Left accent bar — opt-in via showAccent */}\n      {showAccent && (\n        <div className={cn('w-1 shrink-0 rounded-l-overlay-sm', accentClass)} />\n      )}\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1 p-ds-04\">\n        {/* Header — icon morphs between upload ↔ result */}\n        <div className=\"flex items-center gap-ds-02\">\n          <AnimatePresence mode=\"wait\">\n            {allTerminal ? (\n              errorCount > 0 ? (\n                <motion.div\n                  key=\"error-icon\"\n                  initial={{ opacity: 0, scale: 0.5 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.5 }}\n                  transition={springs.bouncy}\n                >\n                  <Icon icon={IconAlertCircle} size=\"sm\" className=\"shrink-0 text-error-11\" />\n                </motion.div>\n              ) : (\n                <motion.div\n                  key=\"success-icon\"\n                  initial={{ opacity: 0, scale: 0.5 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.5 }}\n                  transition={springs.bouncy}\n                >\n                  <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0 text-success-11\" />\n                </motion.div>\n              )\n            ) : (\n              <motion.div\n                key=\"upload-icon\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"sm\" className=\"shrink-0 text-surface-fg-muted\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <p className=\"text-body-md font-semibold text-surface-fg\">\n            {allTerminal\n              ? errorCount > 0\n                ? `${completeCount} of ${files.length} uploaded`\n                : `${files.length} file${files.length > 1 ? 's' : ''} uploaded`\n              : `Uploading ${files.length} file${files.length > 1 ? 's' : ''}`}\n          </p>\n        </div>\n        {!allTerminal && (\n          <p className=\"mt-0.5 text-caption text-surface-fg-muted\">\n            {completeCount} of {files.length} complete\n            {errorCount > 0 && ` · ${errorCount} failed`}\n          </p>\n        )}\n\n        {/* File list */}\n        <div className=\"mt-ds-02 max-h-[140px] overflow-y-auto\">\n          <AnimatePresence>\n            {files.map((file) => (\n              <UploadFileRow\n                key={file.id}\n                file={file}\n                onRetry={onRetry}\n                onRemove={onRemove}\n              />\n            ))}\n          </AnimatePresence>\n        </div>\n\n        {/* Screen reader announcement */}\n        <div className=\"sr-only\" aria-live=\"polite\">\n          {completeCount} of {files.length} files uploaded\n          {errorCount > 0 && `, ${errorCount} failed`}\n        </div>\n      </div>\n\n      {/* Timer bar — only after all terminal */}\n      {allTerminal && (\n        <TimerBar\n          duration={UPLOAD_COMPLETE_DELAY}\n          type={timerBarType}\n          paused={false}\n        />\n      )}\n    </motion.div>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Toast API — wraps Sonner with our styled UI\n * ------------------------------------------------------------------------ */\n\nfunction createSonnerOptions(\n  options?: ToastOptions,\n  duration?: number,\n): ExternalToast {\n  return {\n    id: options?.id,\n    duration: options?.duration ?? duration ?? DEFAULT_DURATION,\n    unstyled: true,\n    classNames: { toast: 'w-full' },\n  }\n}\n\nfunction createTypedToast(\n  type: ToastType,\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) {\n  assertToasterMounted()\n  const duration = options?.duration ?? DEFAULT_DURATION\n  return sonnerToast.custom(\n    () => (\n      <ToastContent\n        type={type}\n        title={message}\n        description={options?.description}\n        action={options?.action}\n        cancel={options?.cancel}\n        duration={duration}\n        showAccent={options?.showAccent}\n      />\n    ),\n    createSonnerOptions(options, duration),\n  )\n}\n\n/**\n * Toast API — imperative toast notifications with Sonner rendering engine.\n *\n * Mount `<Toaster />` once at your root layout. Then call `toast()` from anywhere.\n *\n * @example\n * toast('Something happened')\n * toast.success('Saved!')\n * toast.error('Failed to save')\n * toast.promise(saveFn(), { loading: 'Saving...', success: 'Done!', error: 'Failed' })\n * toast.undo('Deleted', { onUndo: () => restore() })\n * toast.upload({ files, onRetry, onRemove })\n */\nfunction toast(message: string | React.ReactNode, options?: ToastOptions) {\n  return createTypedToast('message', message, options)\n}\n\ntoast.message = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('message', message, options)\n}\n\ntoast.success = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('success', message, options)\n}\n\ntoast.error = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('error', message, options)\n}\n\ntoast.warning = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('warning', message, options)\n}\n\ntoast.info = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('info', message, options)\n}\n\ntoast.loading = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('loading', message, {\n    ...options,\n    duration: options?.duration ?? Infinity,\n  })\n}\n\ntoast.promise = <T,>(\n  promise: Promise<T>,\n  options: {\n    loading: string | React.ReactNode\n    success: string | React.ReactNode | ((data: T) => string | React.ReactNode)\n    error:\n      | string\n      | React.ReactNode\n      | ((error: unknown) => string | React.ReactNode)\n  },\n) => {\n  const id = sonnerToast.custom(\n    () => (\n      <ToastContent type=\"loading\" title={options.loading} showTimerBar={false} />\n    ),\n    { duration: Infinity, unstyled: true, classNames: { toast: 'w-full' } },\n  )\n\n  const replaceWith = (type: ToastType, message: React.ReactNode) => {\n    // Sonner doesn't reset its auto-dismiss timer when updating a custom toast\n    // in-place from duration: Infinity, so ToastContent manages its own\n    // hover-aware dismiss timer via selfDismissId.\n    sonnerToast.custom(\n      () => (\n        <ToastContent\n          type={type}\n          title={message}\n          duration={DEFAULT_DURATION}\n          selfDismissId={id}\n        />\n      ),\n      { id, duration: Infinity, unstyled: true, classNames: { toast: 'w-full' } },\n    )\n  }\n\n  promise\n    .then((data) => {\n      const message =\n        typeof options.success === 'function'\n          ? options.success(data)\n          : options.success\n      replaceWith('success', message)\n    })\n    .catch((error) => {\n      const message =\n        typeof options.error === 'function'\n          ? options.error(error)\n          : options.error\n      replaceWith('error', message)\n    })\n\n  return id\n}\n\ntoast.undo = (message: string | React.ReactNode, options: ToastUndoOptions) => {\n  const duration = options.duration ?? UNDO_DURATION\n  return sonnerToast.custom(\n    () => (\n      <ToastContent\n        type=\"message\"\n        title={message}\n        description={options.description}\n        action={{ label: 'Undo', onClick: options.onUndo }}\n        duration={duration}\n      />\n    ),\n    { duration, unstyled: true, classNames: { toast: 'w-full' } },\n  )\n}\n\ntoast.upload = (options: ToastUploadOptions) => {\n  // Pre-determine the id so we can pass it to UploadToastContent for self-dismiss.\n  const toastId = options.id ?? String(Date.now())\n\n  sonnerToast.custom(\n    () => (\n      <UploadToastContent\n        files={options.files}\n        onRetry={options.onRetry}\n        onRemove={options.onRemove}\n        selfDismissId={toastId}\n        showAccent={options.showAccent}\n      />\n    ),\n    {\n      id: toastId,\n      duration: Infinity,\n      unstyled: true,\n      classNames: { toast: 'w-full' },\n    },\n  )\n\n  return toastId\n}\n\ntoast.custom = (\n  render: (id: string | number) => React.ReactElement,\n  options?: ExternalToast,\n) => {\n  return sonnerToast.custom(render, {\n    ...options,\n    unstyled: true,\n    classNames: { toast: 'w-full', ...(options?.classNames as Record<string, string>) },\n  })\n}\n\ntoast.dismiss = (id?: string | number) => {\n  if (id !== undefined) {\n    sonnerToast.dismiss(id)\n  } else {\n    sonnerToast.dismiss()\n  }\n}\n\n/* ---------------------------------------------------------------------------\n * Exports\n * ------------------------------------------------------------------------ */\n\nexport type ToastProps = ToastOptions\n\nexport {\n  formatFileSize,\n  TimerBar,\n  toast,\n  ToastContent,\n  UploadFileRow,\n  UploadToastContent,\n}\nexport type {\n  ToastActionOptions,\n  ToastOptions,\n  ToastType,\n  ToastUndoOptions,\n  ToastUploadOptions,\n  UploadFile,\n} from './toast-types'\n"],"mappings":"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"}
+{"version":3,"file":"toast.js","names":[],"sources":["../../src/ui/toast.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconAlertCircle,\n  IconAlertTriangle,\n  IconCheck,\n  IconCircleCheck,\n  IconCircleX,\n  IconFile,\n  IconInfoCircle,\n  IconPhoto,\n  IconRefresh,\n  IconUpload,\n  IconX,\n} from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { type ExternalToast,toast as sonnerToast } from 'sonner'\n\nimport { Icon } from './icon'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Progress } from './progress'\nimport { Spinner } from './spinner'\nimport { assertToasterMounted } from './toast-registry'\nimport type {\n  ToastActionOptions,\n  ToastOptions,\n  ToastType,\n  ToastUndoOptions,\n  ToastUploadOptions,\n  UploadFile,\n} from './toast-types'\n\n/* ---------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------ */\n\nconst DEFAULT_DURATION = 5000\nconst UNDO_DURATION = 8000\nconst UPLOAD_COMPLETE_DELAY = 3000\n\n/* ---------------------------------------------------------------------------\n * Accent bar & icon config per toast type\n * ------------------------------------------------------------------------ */\n\nconst TOAST_TYPE_CONFIG: Record<\n  ToastType,\n  {\n    accentClass: string\n    iconClass: string\n    icon: React.ForwardRefExoticComponent<any> | null\n    timerBarClass: string\n  }\n> = {\n  message: {\n    accentClass: '',\n    iconClass: '',\n    icon: null,\n    timerBarClass: 'bg-surface-border',\n  },\n  success: {\n    accentClass: 'bg-success-9',\n    iconClass: 'text-success-11',\n    icon: IconCircleCheck,\n    timerBarClass: 'bg-success-9',\n  },\n  error: {\n    accentClass: 'bg-error-9',\n    iconClass: 'text-error-11',\n    icon: IconCircleX,\n    timerBarClass: 'bg-error-9',\n  },\n  warning: {\n    accentClass: 'bg-warning-9',\n    iconClass: 'text-warning-11',\n    icon: IconAlertTriangle,\n    timerBarClass: 'bg-warning-9',\n  },\n  info: {\n    accentClass: 'bg-info-9',\n    iconClass: 'text-info-11',\n    icon: IconInfoCircle,\n    timerBarClass: 'bg-info-9',\n  },\n  loading: {\n    accentClass: 'bg-accent-9',\n    iconClass: 'text-accent-11',\n    icon: null,\n    timerBarClass: 'bg-accent-9',\n  },\n}\n\n/* ---------------------------------------------------------------------------\n * Timer bar — shows auto-dismiss countdown\n * ------------------------------------------------------------------------ */\n\nfunction TimerBar({\n  duration,\n  type,\n  paused,\n}: {\n  duration: number\n  type: ToastType\n  paused: boolean\n}) {\n  const config = TOAST_TYPE_CONFIG[type]\n  return (\n    <div className=\"absolute bottom-0 left-0 right-0 h-ds-01 overflow-hidden\">\n      <div\n        className={cn(\n          'h-full w-full origin-left opacity-30',\n          config.timerBarClass,\n          'motion-safe:animate-timer-bar',\n        )}\n        style={{\n          animationDuration: `${duration}ms`,\n          animationPlayState: paused ? 'paused' : 'running',\n        }}\n      />\n    </div>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Base toast UI — used by all typed toasts\n * ------------------------------------------------------------------------ */\n\nfunction ToastContent({\n  type,\n  title,\n  description,\n  action,\n  cancel,\n  duration = DEFAULT_DURATION,\n  showTimerBar = true,\n  showAccent = false,\n  selfDismissId,\n}: {\n  type: ToastType\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionOptions\n  cancel?: ToastActionOptions\n  duration?: number\n  showTimerBar?: boolean\n  /** Render the colored left accent bar. Off by default (status = icon + timer bar). */\n  showAccent?: boolean\n  /** When set, this component manages its own dismiss timer (hover-aware). */\n  selfDismissId?: string | number\n}) {\n  const [hovered, setHovered] = React.useState(false)\n  const [focused, setFocused] = React.useState(false)\n  const paused = hovered || focused\n  const config = TOAST_TYPE_CONFIG[type]\n  const StatusIcon = config.icon\n\n  // Self-managed dismiss timer that pauses on hover or keyboard focus\n  const remainingRef = React.useRef(duration)\n  const startTimeRef = React.useRef(0)\n\n  React.useEffect(() => {\n    if (selfDismissId == null || duration === Infinity) return\n    if (paused) {\n      // Pause: save remaining time\n      const elapsed = Date.now() - startTimeRef.current\n      remainingRef.current = Math.max(0, remainingRef.current - elapsed)\n      return\n    }\n    // Start/resume timer\n    startTimeRef.current = Date.now()\n    const timer = setTimeout(() => {\n      sonnerToast.dismiss(selfDismissId)\n    }, remainingRef.current)\n    return () => clearTimeout(timer)\n  }, [selfDismissId, duration, paused])\n\n  // Error toasts announce assertively so screen readers interrupt;\n  // warnings stay polite but atomically re-read the message.\n  const isUrgent = type === 'error'\n  return (\n    <motion.div\n      layout=\"position\"\n      role={isUrgent ? 'alert' : 'status'}\n      aria-live={isUrgent ? 'assertive' : 'polite'}\n      aria-atomic=\"true\"\n      className={cn(\n        'group relative flex w-full overflow-hidden rounded-overlay-sm bg-surface-overlay shadow-floating',\n        // Faint surface tint on error only — the one you must not miss.\n        type === 'error' && 'bg-error-2',\n      )}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onFocusCapture={() => setFocused(true)}\n      onBlurCapture={() => setFocused(false)}\n      transition={springs.smooth}\n    >\n      {/* Left accent bar — opt-in via showAccent (status is carried by icon + timer bar) */}\n      {showAccent && config.accentClass && (\n        <div\n          className={cn('w-1 shrink-0 rounded-l-overlay-sm', config.accentClass)}\n        />\n      )}\n\n      {/* Content */}\n      <div className=\"flex min-w-0 flex-1 items-start gap-ds-03 p-ds-04\">\n        {/* Status icon — animates between spinner ↔ typed icon */}\n        <AnimatePresence mode=\"wait\">\n          {type === 'loading' ? (\n            <motion.div\n              key=\"loading\"\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={tweens.fade}\n              className=\"mt-0.5 shrink-0\"\n            >\n              <Spinner size=\"sm\" className=\"h-4 w-4\" />\n            </motion.div>\n          ) : StatusIcon ? (\n            <motion.div\n              key={type}\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={springs.bouncy}\n              className=\"mt-0.5 shrink-0\"\n            >\n              <Icon icon={StatusIcon} size=\"sm\" className={config.iconClass} />\n            </motion.div>\n          ) : null}\n        </AnimatePresence>\n\n        {/* Text */}\n        <div className=\"min-w-0 flex-1\">\n          {title && (\n            <p className=\"text-body-md font-semibold text-surface-fg\">\n              {title}\n            </p>\n          )}\n          {description && (\n            <p\n              className={cn(\n                'text-body-sm text-surface-fg-muted',\n                title && 'mt-0.5',\n              )}\n            >\n              {description}\n            </p>\n          )}\n\n          {/* Action / cancel buttons */}\n          {(action || cancel) && (\n            <div className=\"mt-ds-03 flex items-center gap-ds-03\">\n              {action && (\n                <button\n                  type=\"button\"\n                  onClick={action.onClick}\n                  className=\"text-body-sm font-medium text-accent-11 underline-offset-2 hover:underline hover:bg-surface-panel-hover rounded-control-inner px-ds-02 py-ds-01 transition-[color,background-color] duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-control-inner\"\n                >\n                  {action.label}\n                </button>\n              )}\n              {cancel && (\n                <button\n                  type=\"button\"\n                  onClick={cancel.onClick}\n                  className=\"text-body-sm text-surface-fg-muted hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-control-inner\"\n                >\n                  {cancel.label}\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Timer bar */}\n      {showTimerBar && type !== 'loading' && (\n        <TimerBar duration={duration} type={type} paused={paused} />\n      )}\n    </motion.div>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Upload toast UI\n * ------------------------------------------------------------------------ */\n\nconst IMAGE_EXTENSIONS = new Set([\n  'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'avif',\n])\n\nfunction isImageFile(file: UploadFile): boolean {\n  if (file.previewUrl) return true\n  const ext = file.name.split('.').pop()?.toLowerCase() ?? ''\n  return IMAGE_EXTENSIONS.has(ext)\n}\n\nfunction getProgressColor(\n  status: UploadFile['status'],\n): 'accent' | 'success' | 'error' {\n  switch (status) {\n    case 'complete':\n      return 'success'\n    case 'error':\n      return 'error'\n    default:\n      return 'accent'\n  }\n}\n\nfunction getProgressValue(file: UploadFile): number | undefined {\n  switch (file.status) {\n    case 'pending':\n      return 0\n    case 'uploading':\n      return file.progress ?? 0\n    case 'processing':\n      return undefined\n    case 'complete':\n      return 100\n    case 'error':\n      return file.progress ?? 0\n  }\n}\n\nfunction formatFileSize(bytes: number): string {\n  if (!bytes || bytes < 0 || !Number.isFinite(bytes)) return '0 B'\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  if (bytes < 1024 * 1024 * 1024)\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`\n}\n\nfunction UploadFileRow({\n  file,\n  onRetry,\n  onRemove,\n}: {\n  file: UploadFile\n  onRetry?: (fileId: string) => void\n  onRemove?: (fileId: string) => void\n}) {\n  const isTerminal = file.status === 'complete' || file.status === 'error'\n  const isUploading =\n    file.status === 'uploading' || file.status === 'processing'\n\n  return (\n    <motion.div\n      layout\n      className=\"flex items-center gap-ds-02 py-1\"\n      initial={false}\n      animate={{ opacity: 1, y: 0 }}\n      exit={{ opacity: 0, x: -20, height: 0 }}\n      transition={springs.snappy}\n    >\n      {/* File icon — animates between states */}\n      <div className=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n        <AnimatePresence mode=\"wait\">\n          {file.status === 'complete' ? (\n            <motion.div\n              key=\"complete\"\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={springs.bouncy}\n            >\n              <Icon icon={IconCheck} size=\"xs\" className=\"text-success-11\" />\n            </motion.div>\n          ) : file.status === 'error' ? (\n            <motion.div\n              key=\"error\"\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={tweens.fade}\n            >\n              <Icon icon={IconAlertCircle} size=\"xs\" className=\"text-error-11\" />\n            </motion.div>\n          ) : file.status === 'processing' ? (\n            <motion.div\n              key=\"processing\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            >\n              <Spinner size=\"sm\" className=\"h-3.5 w-3.5\" />\n            </motion.div>\n          ) : isImageFile(file) ? (\n            <motion.div\n              key=\"image\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            >\n              <Icon icon={IconPhoto} size=\"xs\" className=\"text-surface-fg-muted\" />\n            </motion.div>\n          ) : (\n            <motion.div\n              key=\"file\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            >\n              <Icon icon={IconFile} size=\"xs\" className=\"text-surface-fg-muted\" />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n\n      {/* Filename */}\n      <span className=\"min-w-0 flex-1 truncate text-body-xs text-surface-fg\">\n        {file.name}\n      </span>\n\n      {/* Progress bar or status */}\n      {isUploading ? (\n        <div className=\"flex w-16 items-center gap-1\">\n          <Progress\n            size=\"sm\"\n            color={getProgressColor(file.status)}\n            value={getProgressValue(file)}\n            className=\"flex-1\"\n          />\n          {file.progress !== undefined && (\n            <span className=\"shrink-0 text-caption tabular-nums text-surface-fg-muted\">\n              {file.progress}%\n            </span>\n          )}\n        </div>\n      ) : file.status === 'complete' ? (\n        <span className=\"text-body-xs text-success-11\">Done</span>\n      ) : file.status === 'error' ? (\n        <span className=\"max-w-[60px] truncate text-body-xs text-error-11\">\n          {file.error || 'Failed'}\n        </span>\n      ) : (\n        <span className=\"text-caption text-surface-fg-muted\">\n          {formatFileSize(file.size)}\n        </span>\n      )}\n\n      {/* Actions */}\n      {file.status === 'error' && onRetry && (\n        <button\n          type=\"button\"\n          onClick={() => onRetry(file.id)}\n          className=\"touch-target flex min-h-6 min-w-6 items-center justify-center rounded-control-inner text-surface-fg-muted hover:text-surface-fg\"\n          aria-label={`Retry ${file.name}`}\n          title=\"Retry\"\n        >\n          <IconRefresh className=\"h-3.5 w-3.5\" />\n        </button>\n      )}\n      {!isTerminal && onRemove && (\n        <button\n          type=\"button\"\n          onClick={() => onRemove(file.id)}\n          className=\"touch-target flex min-h-6 min-w-6 items-center justify-center rounded-control-inner text-surface-fg-muted hover:text-surface-fg\"\n          aria-label={`Cancel ${file.name}`}\n          title=\"Remove\"\n        >\n          <IconX className=\"h-3.5 w-3.5\" />\n        </button>\n      )}\n    </motion.div>\n  )\n}\n\nfunction UploadToastContent({\n  files,\n  onRetry,\n  onRemove,\n  selfDismissId,\n  showAccent = false,\n}: {\n  files: UploadFile[]\n  onRetry?: (fileId: string) => void\n  onRemove?: (fileId: string) => void\n  selfDismissId?: string | number\n  /** Render the colored left accent bar. Off by default. */\n  showAccent?: boolean\n}) {\n  const [hovered, setHovered] = React.useState(false)\n  const [focused, setFocused] = React.useState(false)\n  const paused = hovered || focused\n  const completeCount = files.filter((f) => f.status === 'complete').length\n  const errorCount = files.filter((f) => f.status === 'error').length\n  const allTerminal = files.every(\n    (f) => f.status === 'complete' || f.status === 'error',\n  )\n\n  // Self-managed dismiss timer that pauses on hover or keyboard focus\n  const remainingRef = React.useRef(UPLOAD_COMPLETE_DELAY)\n  const startTimeRef = React.useRef(0)\n\n  React.useEffect(() => {\n    if (selfDismissId == null || !allTerminal) return\n    if (paused) {\n      const elapsed = Date.now() - startTimeRef.current\n      remainingRef.current = Math.max(0, remainingRef.current - elapsed)\n      return\n    }\n    startTimeRef.current = Date.now()\n    const timer = setTimeout(() => {\n      sonnerToast.dismiss(selfDismissId)\n    }, remainingRef.current)\n    return () => clearTimeout(timer)\n  }, [selfDismissId, allTerminal, paused])\n\n  const accentClass = allTerminal\n    ? errorCount > 0\n      ? 'bg-error-7'\n      : 'bg-success-7'\n    : 'bg-accent-9'\n\n  const timerBarType: ToastType = allTerminal\n    ? errorCount > 0\n      ? 'error'\n      : 'success'\n    : 'loading'\n\n  const uploadUrgent = allTerminal && errorCount > 0\n  return (\n    <motion.div\n      layout\n      role={uploadUrgent ? 'alert' : 'status'}\n      aria-live={uploadUrgent ? 'assertive' : 'polite'}\n      aria-label=\"File uploads\"\n      className={cn(\n        'group relative flex w-full overflow-hidden rounded-overlay-sm bg-surface-overlay shadow-floating',\n        // Faint surface tint when the batch ended with failures.\n        uploadUrgent && 'bg-error-2',\n      )}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onFocusCapture={() => setFocused(true)}\n      onBlurCapture={() => setFocused(false)}\n      transition={springs.smooth}\n    >\n      {/* Left accent bar — opt-in via showAccent */}\n      {showAccent && (\n        <div className={cn('w-1 shrink-0 rounded-l-overlay-sm', accentClass)} />\n      )}\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1 p-ds-04\">\n        {/* Header — icon morphs between upload ↔ result */}\n        <div className=\"flex items-center gap-ds-02\">\n          <AnimatePresence mode=\"wait\">\n            {allTerminal ? (\n              errorCount > 0 ? (\n                <motion.div\n                  key=\"error-icon\"\n                  initial={{ opacity: 0, scale: 0.5 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.5 }}\n                  transition={springs.bouncy}\n                >\n                  <Icon icon={IconAlertCircle} size=\"sm\" className=\"shrink-0 text-error-11\" />\n                </motion.div>\n              ) : (\n                <motion.div\n                  key=\"success-icon\"\n                  initial={{ opacity: 0, scale: 0.5 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.5 }}\n                  transition={springs.bouncy}\n                >\n                  <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0 text-success-11\" />\n                </motion.div>\n              )\n            ) : (\n              <motion.div\n                key=\"upload-icon\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"sm\" className=\"shrink-0 text-surface-fg-muted\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <p className=\"text-body-md font-semibold text-surface-fg\">\n            {allTerminal\n              ? errorCount > 0\n                ? `${completeCount} of ${files.length} uploaded`\n                : `${files.length} file${files.length > 1 ? 's' : ''} uploaded`\n              : `Uploading ${files.length} file${files.length > 1 ? 's' : ''}`}\n          </p>\n        </div>\n        {!allTerminal && (\n          <p className=\"mt-0.5 text-caption text-surface-fg-muted\">\n            {completeCount} of {files.length} complete\n            {errorCount > 0 && ` · ${errorCount} failed`}\n          </p>\n        )}\n\n        {/* File list */}\n        <div className=\"mt-ds-02 max-h-[140px] overflow-y-auto\">\n          <AnimatePresence>\n            {files.map((file) => (\n              <UploadFileRow\n                key={file.id}\n                file={file}\n                onRetry={onRetry}\n                onRemove={onRemove}\n              />\n            ))}\n          </AnimatePresence>\n        </div>\n\n        {/* Screen reader announcement */}\n        <div className=\"sr-only\" aria-live=\"polite\">\n          {completeCount} of {files.length} files uploaded\n          {errorCount > 0 && `, ${errorCount} failed`}\n        </div>\n      </div>\n\n      {/* Timer bar — only after all terminal */}\n      {allTerminal && (\n        <TimerBar\n          duration={UPLOAD_COMPLETE_DELAY}\n          type={timerBarType}\n          paused={false}\n        />\n      )}\n    </motion.div>\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Toast API — wraps Sonner with our styled UI\n * ------------------------------------------------------------------------ */\n\nfunction createSonnerOptions(\n  options?: ToastOptions,\n  duration?: number,\n): ExternalToast {\n  return {\n    id: options?.id,\n    duration: options?.duration ?? duration ?? DEFAULT_DURATION,\n    unstyled: true,\n    classNames: { toast: 'w-full' },\n  }\n}\n\nfunction createTypedToast(\n  type: ToastType,\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) {\n  assertToasterMounted()\n  const duration = options?.duration ?? DEFAULT_DURATION\n  return sonnerToast.custom(\n    () => (\n      <ToastContent\n        type={type}\n        title={message}\n        description={options?.description}\n        action={options?.action}\n        cancel={options?.cancel}\n        duration={duration}\n        showAccent={options?.showAccent}\n      />\n    ),\n    createSonnerOptions(options, duration),\n  )\n}\n\n/**\n * Toast API — imperative toast notifications with Sonner rendering engine.\n *\n * Mount `<Toaster />` once at your root layout. Then call `toast()` from anywhere.\n *\n * @example\n * toast('Something happened')\n * toast.success('Saved!')\n * toast.error('Failed to save')\n * toast.promise(saveFn(), { loading: 'Saving...', success: 'Done!', error: 'Failed' })\n * toast.undo('Deleted', { onUndo: () => restore() })\n * toast.upload({ files, onRetry, onRemove })\n */\nfunction toast(message: string | React.ReactNode, options?: ToastOptions) {\n  return createTypedToast('message', message, options)\n}\n\ntoast.message = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('message', message, options)\n}\n\ntoast.success = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('success', message, options)\n}\n\ntoast.error = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('error', message, options)\n}\n\ntoast.warning = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('warning', message, options)\n}\n\ntoast.info = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('info', message, options)\n}\n\ntoast.loading = (\n  message: string | React.ReactNode,\n  options?: ToastOptions,\n) => {\n  return createTypedToast('loading', message, {\n    ...options,\n    duration: options?.duration ?? Infinity,\n  })\n}\n\ntoast.promise = <T,>(\n  promise: Promise<T>,\n  options: {\n    loading: string | React.ReactNode\n    success: string | React.ReactNode | ((data: T) => string | React.ReactNode)\n    error:\n      | string\n      | React.ReactNode\n      | ((error: unknown) => string | React.ReactNode)\n  },\n) => {\n  const id = sonnerToast.custom(\n    () => (\n      <ToastContent type=\"loading\" title={options.loading} showTimerBar={false} />\n    ),\n    { duration: Infinity, unstyled: true, classNames: { toast: 'w-full' } },\n  )\n\n  const replaceWith = (type: ToastType, message: React.ReactNode) => {\n    // Sonner doesn't reset its auto-dismiss timer when updating a custom toast\n    // in-place from duration: Infinity, so ToastContent manages its own\n    // hover-aware dismiss timer via selfDismissId.\n    sonnerToast.custom(\n      () => (\n        <ToastContent\n          type={type}\n          title={message}\n          duration={DEFAULT_DURATION}\n          selfDismissId={id}\n        />\n      ),\n      { id, duration: Infinity, unstyled: true, classNames: { toast: 'w-full' } },\n    )\n  }\n\n  promise\n    .then((data) => {\n      const message =\n        typeof options.success === 'function'\n          ? options.success(data)\n          : options.success\n      replaceWith('success', message)\n    })\n    .catch((error) => {\n      const message =\n        typeof options.error === 'function'\n          ? options.error(error)\n          : options.error\n      replaceWith('error', message)\n    })\n\n  return id\n}\n\ntoast.undo = (message: string | React.ReactNode, options: ToastUndoOptions) => {\n  const duration = options.duration ?? UNDO_DURATION\n  return sonnerToast.custom(\n    () => (\n      <ToastContent\n        type=\"message\"\n        title={message}\n        description={options.description}\n        action={{ label: 'Undo', onClick: options.onUndo }}\n        duration={duration}\n      />\n    ),\n    { duration, unstyled: true, classNames: { toast: 'w-full' } },\n  )\n}\n\ntoast.upload = (options: ToastUploadOptions) => {\n  // Pre-determine the id so we can pass it to UploadToastContent for self-dismiss.\n  const toastId = options.id ?? String(Date.now())\n\n  sonnerToast.custom(\n    () => (\n      <UploadToastContent\n        files={options.files}\n        onRetry={options.onRetry}\n        onRemove={options.onRemove}\n        selfDismissId={toastId}\n        showAccent={options.showAccent}\n      />\n    ),\n    {\n      id: toastId,\n      duration: Infinity,\n      unstyled: true,\n      classNames: { toast: 'w-full' },\n    },\n  )\n\n  return toastId\n}\n\ntoast.custom = (\n  render: (id: string | number) => React.ReactElement,\n  options?: ExternalToast,\n) => {\n  return sonnerToast.custom(render, {\n    ...options,\n    unstyled: true,\n    classNames: { toast: 'w-full', ...(options?.classNames as Record<string, string>) },\n  })\n}\n\ntoast.dismiss = (id?: string | number) => {\n  if (id !== undefined) {\n    sonnerToast.dismiss(id)\n  } else {\n    sonnerToast.dismiss()\n  }\n}\n\n/* ---------------------------------------------------------------------------\n * Exports\n * ------------------------------------------------------------------------ */\n\nexport type ToastProps = ToastOptions\n\nexport {\n  formatFileSize,\n  TimerBar,\n  toast,\n  ToastContent,\n  UploadFileRow,\n  UploadToastContent,\n}\nexport type {\n  ToastActionOptions,\n  ToastOptions,\n  ToastType,\n  ToastUndoOptions,\n  ToastUploadOptions,\n  UploadFile,\n} from './toast-types'\n"],"mappings":"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"}

package/dist/ui/toggle.js

@@ -1,17 +1,17 @@
 "use client";
 import { motionProps as e, springs as t } from "./lib/motion.js";
-import { cva as n } from "../_chunks/vendor-utils.js";
-import { cn as r } from "./lib/utils.js";
-import { Root as i } from "../_chunks/primitives/react-toggle.js";
-import * as a from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { motion as s } from "framer-motion";
+import { cn as n } from "./lib/utils.js";
+import { Root as r } from "../_chunks/primitives/react-toggle.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { motion as o } from "framer-motion";
+import { cva as s } from "class-variance-authority";
 //#region src/ui/toggle.tsx
-var c = s.create(i), l = n("inline-flex items-center justify-center gap-ds-03 rounded-control font-medium transition-colors duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", {
+var c = o.create(r), l = s("inline-flex items-center justify-center gap-ds-03 rounded-control font-medium transition-colors duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", {
 	variants: {
 		variant: {
-			default: "bg-transparent hover:bg-surface-raised-hover text-surface-fg-muted",
-			outline: "border border-surface-border-strong bg-transparent hover:bg-surface-raised-hover hover:border-surface-border-strong"
+			default: "bg-transparent hover:bg-surface-panel-hover text-surface-fg-muted",
+			outline: "border border-surface-border-interactive bg-transparent hover:bg-surface-panel-hover hover:border-surface-border-interactive"
 		},
 		size: {
 			sm: "h-ds-sm px-ds-03 text-body-sm",
@@ -22,7 +22,7 @@ var c = s.create(i), l = n("inline-flex items-center justify-center gap-ds-03 ro
 			accent: "data-[state=on]:bg-accent-2 data-[state=on]:text-accent-11",
 			error: "data-[state=on]:bg-error-2 data-[state=on]:text-error-11",
 			success: "data-[state=on]:bg-success-2 data-[state=on]:text-success-11",
-			neutral: "data-[state=on]:bg-surface-raised-hover data-[state=on]:text-surface-fg"
+			neutral: "data-[state=on]:bg-surface-panel-hover data-[state=on]:text-surface-fg"
 		}
 	},
 	defaultVariants: {
@@ -30,17 +30,17 @@ var c = s.create(i), l = n("inline-flex items-center justify-center gap-ds-03 ro
 		size: "md",
 		color: "accent"
 	}
-}), u = a.forwardRef(({ className: n, variant: i, size: a, color: s, ...u }, d) => /* @__PURE__ */ o(c, {
+}), u = i.forwardRef(({ className: r, variant: i, size: o, color: s, ...u }, d) => /* @__PURE__ */ a(c, {
 	ref: d,
 	whileTap: { scale: .95 },
 	transition: t.snappy,
-	className: r(l({
+	className: n(l({
 		variant: i,
-		size: a,
+		size: o,
 		color: s
-	}), n),
+	}), r),
 	...e(u)
 }));
-u.displayName = i.displayName;
+u.displayName = r.displayName;
 //#endregion
 export { u as Toggle, l as toggleVariants };

package/dist/ui/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":[],"sources":["../../src/ui/toggle.tsx"],"sourcesContent":["'use client'\n\nimport * as TogglePrimitive from '@primitives/react-toggle'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst MotionToggleRoot = motion.create(TogglePrimitive.Root)\n\nconst toggleVariants = cva(\n  'inline-flex items-center justify-center gap-ds-03 rounded-control font-medium transition-colors duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-transparent hover:bg-surface-raised-hover text-surface-fg-muted',\n        outline:\n          'border border-surface-border-strong bg-transparent hover:bg-surface-raised-hover hover:border-surface-border-strong',\n      },\n      size: {\n        sm: 'h-ds-sm px-ds-03 text-body-sm',\n        md: 'h-ds-md px-ds-04 text-body-md',\n        lg: 'h-ds-lg px-ds-05 text-body-lg',\n      },\n      color: {\n        accent: 'data-[state=on]:bg-accent-2 data-[state=on]:text-accent-11',\n        error: 'data-[state=on]:bg-error-2 data-[state=on]:text-error-11',\n        success: 'data-[state=on]:bg-success-2 data-[state=on]:text-success-11',\n        neutral: 'data-[state=on]:bg-surface-raised-hover data-[state=on]:text-surface-fg',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'accent',\n    },\n  },\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, color, ...props }, ref) => (\n  <MotionToggleRoot\n    ref={ref}\n    whileTap={{ scale: 0.95 }}\n    transition={springs.snappy}\n    className={cn(toggleVariants({ variant, size, color }), className)}\n    {...motionProps(props)}\n  />\n))\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport type ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>\n\nexport { Toggle, toggleVariants }\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAmB,EAAO,OAAO,CAAoB,GAErD,IAAiB,EACrB,qTACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF,GAEM,IAAS,EAAM,YAIlB,EAAE,cAAW,YAAS,SAAM,UAAO,GAAG,KAAS,MAChD,kBAAC,GAAD;CACO;CACL,UAAU,EAAE,OAAO,IAAK;CACxB,YAAY,EAAQ;CACpB,WAAW,EAAG,EAAe;EAAE;EAAS;EAAM;CAAM,CAAC,GAAG,CAAS;CACjE,GAAI,EAAY,CAAK;AACtB,CAAA,CACF;AACD,EAAO,cAAA,EAAmC"}
+{"version":3,"file":"toggle.js","names":[],"sources":["../../src/ui/toggle.tsx"],"sourcesContent":["'use client'\n\nimport * as TogglePrimitive from '@primitives/react-toggle'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst MotionToggleRoot = motion.create(TogglePrimitive.Root)\n\nconst toggleVariants = cva(\n  'inline-flex items-center justify-center gap-ds-03 rounded-control font-medium transition-colors duration-fast-01 ease-productive-standard focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-transparent hover:bg-surface-panel-hover text-surface-fg-muted',\n        outline:\n          'border border-surface-border-interactive bg-transparent hover:bg-surface-panel-hover hover:border-surface-border-interactive',\n      },\n      size: {\n        sm: 'h-ds-sm px-ds-03 text-body-sm',\n        md: 'h-ds-md px-ds-04 text-body-md',\n        lg: 'h-ds-lg px-ds-05 text-body-lg',\n      },\n      color: {\n        accent: 'data-[state=on]:bg-accent-2 data-[state=on]:text-accent-11',\n        error: 'data-[state=on]:bg-error-2 data-[state=on]:text-error-11',\n        success: 'data-[state=on]:bg-success-2 data-[state=on]:text-success-11',\n        neutral: 'data-[state=on]:bg-surface-panel-hover data-[state=on]:text-surface-fg',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'accent',\n    },\n  },\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, color, ...props }, ref) => (\n  <MotionToggleRoot\n    ref={ref}\n    whileTap={{ scale: 0.95 }}\n    transition={springs.snappy}\n    className={cn(toggleVariants({ variant, size, color }), className)}\n    {...motionProps(props)}\n  />\n))\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport type ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>\n\nexport { Toggle, toggleVariants }\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAmB,EAAO,OAAO,CAAoB,GAErD,IAAiB,EACrB,qTACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;EACX;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF,GAEM,IAAS,EAAM,YAIlB,EAAE,cAAW,YAAS,SAAM,UAAO,GAAG,KAAS,MAChD,kBAAC,GAAD;CACO;CACL,UAAU,EAAE,OAAO,IAAK;CACxB,YAAY,EAAQ;CACpB,WAAW,EAAG,EAAe;EAAE;EAAS;EAAM;CAAM,CAAC,GAAG,CAAS;CACjE,GAAI,EAAY,CAAK;AACtB,CAAA,CACF;AACD,EAAO,cAAA,EAAmC"}

package/docs/components/composed/avatar-group.md

@@ -9,7 +9,7 @@
     max: number (default: 4, overflow shows "+N" badge)
     size: "xs" | "sm" | "md" | "lg" | "xl"
     showTooltip: boolean (default: true)
-    borderColor: "surface-base" | "surface-raised" (default: "surface-raised") — overlap border color
+    borderColor: "surface-base" | "surface-panel" (default: "surface-panel") — overlap border color
     onOverflowClick: () => void — makes the "+N" badge interactive (button)
     renderAvatar: (user: AvatarUser, index: number) => ReactNode — custom avatar render
     expandDirection: "left" | "right" (default: "right") — direction group expands on hover
@@ -22,7 +22,7 @@
     indicator?: "lead" | "admin" | ReactNode — small dot indicator at top-right of avatar
 
 ## Defaults
-    size="md", max=4, showTooltip=true, borderColor="surface-raised", expandDirection="right", expandAmount="default"
+    size="md", max=4, showTooltip=true, borderColor="surface-panel", expandDirection="right", expandAmount="default"
 
 ## Example
 ```jsx
@@ -42,7 +42,7 @@
 - **Built on ui/Avatar** — each slot is an Avatar with overlap + border + optional Tooltip.
 - **Wraps TooltipProvider internally** — don't add another.
 - **renderAvatar** escape hatch for custom shapes. Wrapper handles overlap/border positioning; your renderer sets size + shape.
-- **borderColor** must match the surface the group sits on (`surface-raised` on Card, `surface-base` on page bg). Mismatch = visible seam.
+- **borderColor** must match the surface the group sits on (`surface-panel` on Card, `surface-base` on page bg). Mismatch = visible seam.
 - **Overflow:** +N badge with optional `onOverflowClick` → pair with a Popover/Sheet for "show all members".
 - Per-user `ring` (lead/admin/client) surfaces Avatar's ring semantic at group level — use for role/presence hints.
 
@@ -51,7 +51,7 @@
 - Users beyond `max` are collapsed into a "+N" overflow badge
 - Missing `image` falls back to initials derived from `name`
 - Hover expand animation uses CSS `group-hover` — parent must not clip overflow
-- `borderColor` should match the surface the group sits on (`surface-base` on page bg, `surface-raised` on cards)
+- `borderColor` should match the surface the group sits on (`surface-base` on page bg, `surface-panel` on cards)
 - `renderAvatar` wrapper is positioning-only — pass `size` directly to your Avatar (do NOT use `className="h-full w-full"`)
 
 ## Changes

package/docs/components/composed/diff.md

@@ -17,6 +17,9 @@
     afterLabel: string (new-side column label, split mode)
     onAcceptHunk: (hunk) => void (adds per-change Accept control)
     onRejectHunk: (hunk) => void (adds per-change Reject control)
+    language: string (syntax-highlight full lines as this language — inline/split, "line" granularity only; lazy-loads react-syntax-highlighter, one-dark theme, same pattern as MarkdownViewer)
+    beforeParseError: (raw: string) => ReactNode (custom render when `before` fails to parse as JSON in fields mode; default is a plain message)
+    afterParseError: (raw: string) => ReactNode (custom render when `after` fails to parse as JSON in fields mode; default is a plain message)
 
 ## Defaults
     mode="inline", granularity="line", collapseUnchanged={true}, collapseThreshold={6}, contextLines={3}, showSummary={true}, beforeLabel="Committed", afterLabel="Pending"
@@ -44,7 +47,12 @@
 - **Semantic colour:** additions use the `success` scale, removals the `error` scale — flips correctly in dark.
 
 ## Gotchas
-- `fields` mode requires valid JSON on both sides; it reports a clear message otherwise. For YAML, parse to an object and `JSON.stringify` before passing.
-- `granularity="word"` is for prose; it renders a flowing word-level diff, not line gutters.
+- `fields` mode requires valid JSON on both sides; it reports a clear message per side otherwise (override with `beforeParseError`/`afterParseError`). For YAML, parse to an object and `JSON.stringify` before passing.
+- `granularity="word"` is for prose; it renders a flowing word-level diff, not line gutters. `language` has no effect in word granularity or `fields` mode.
 - Accept/Reject controls only appear when the matching handler is provided — the Diff itself doesn't mutate content; the consumer applies the decision.
 - Hunk = a contiguous run of added/removed lines; `onAcceptHunk`/`onRejectHunk` receive `{ index, before, after }`.
+
+## Changes
+### Unreleased
+- **Added** `language?: string` — syntax-highlight full lines (inline/split, line granularity) via lazy-loaded `react-syntax-highlighter`.
+- **Added** `beforeParseError?: (raw: string) => ReactNode` / `afterParseError?: (raw: string) => ReactNode` — customize the fallback shown per side when `fields` mode JSON parsing fails (previously one fixed message covered both sides).

package/docs/components/composed/schedule-view.md

@@ -55,7 +55,7 @@ Event colors: "accent" | "success" | "warning" | "error" | "info" | "neutral"
 ## Changes
 ### v0.53.0
 - **Changed** Read-only schedules no longer flood the tab order — slots are interactive only when `onSlotClick` is set; otherwise inert grid lines. Interactive slots use roving tabindex + Arrow/Home/End keyboard navigation (RTL-aware).
-- **Changed** Overlapping events now lay out in side-by-side columns instead of stacking illegibly. The now-line ticks live (per-minute) and scrolls into view; shell uses the `surface-2` card tier (fixed the prior `surface-raised` + dead-`border-card-strong` regression); layout uses logical (RTL-safe) properties; magic-number sizes tokenized.
+- **Changed** Overlapping events now lay out in side-by-side columns instead of stacking illegibly. The now-line ticks live (per-minute) and scrolls into view; shell uses the `surface-2` card tier (fixed the prior `surface-panel` + dead-`border-card-strong` regression); layout uses logical (RTL-safe) properties; magic-number sizes tokenized.
 - **Added** `selectedEventId`, `renderEvent`, `header`, `emptyState`, and `height` props.
 
 ### v0.49.0