@devalok/shilp-sutra 0.55.1 → 0.57.0

package/dist/_chunks/badge-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-group.js","names":[],"sources":["../../src/ui/badge.tsx","../../src/ui/badge-group.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Dot } from './dot'\nimport { Icon } from './icon'\nimport type { IconInput } from './lib/icon-input'\nimport { durations,springs } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n// ── Color map — single source of truth for all badge color × variant combos ──\nconst colorMap = {\n  default: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  accent:  { bg: 'bg-accent-3',  fg: 'text-accent-11',  border: 'border-accent-7',  solid: 'bg-accent-9',  solidFg: 'text-accent-fg' },\n  error:   { bg: 'bg-error-3',   fg: 'text-error-11',   border: 'border-error-7',   solid: 'bg-error-9',   solidFg: 'text-error-fg' },\n  success: { bg: 'bg-success-3', fg: 'text-success-11', border: 'border-success-7', solid: 'bg-success-9', solidFg: 'text-success-fg' },\n  warning: { bg: 'bg-warning-3', fg: 'text-warning-11', border: 'border-warning-7', solid: 'bg-warning-9', solidFg: 'text-warning-fg' },\n  info:    { bg: 'bg-info-3',    fg: 'text-info-11',    border: 'border-info-7',    solid: 'bg-info-9',    solidFg: 'text-info-fg' },\n  neutral: { bg: 'bg-surface-raised-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  teal:    { bg: 'bg-category-teal-3',    fg: 'text-category-teal-11',    border: 'border-category-teal-7',    solid: 'bg-category-teal-9',    solidFg: 'text-white' },\n  amber:   { bg: 'bg-category-amber-3',   fg: 'text-category-amber-11',   border: 'border-category-amber-7',   solid: 'bg-category-amber-9',   solidFg: 'text-white' },\n  slate:   { bg: 'bg-category-slate-3',   fg: 'text-category-slate-11',   border: 'border-category-slate-7',   solid: 'bg-category-slate-9',   solidFg: 'text-white' },\n  indigo:  { bg: 'bg-category-indigo-3',  fg: 'text-category-indigo-11',  border: 'border-category-indigo-7',  solid: 'bg-category-indigo-9',  solidFg: 'text-white' },\n  cyan:    { bg: 'bg-category-cyan-3',    fg: 'text-category-cyan-11',    border: 'border-category-cyan-7',    solid: 'bg-category-cyan-9',    solidFg: 'text-white' },\n  orange:  { bg: 'bg-category-orange-3',  fg: 'text-category-orange-11',  border: 'border-category-orange-7',  solid: 'bg-category-orange-9',  solidFg: 'text-white' },\n  emerald: { bg: 'bg-category-emerald-3', fg: 'text-category-emerald-11', border: 'border-category-emerald-7', solid: 'bg-category-emerald-9', solidFg: 'text-white' },\n} as const\n\ntype BadgeColor = keyof typeof colorMap | 'custom'\n\n/** Derive color classes for a given variant + color pair */\nfunction getColorClasses(variant: 'subtle' | 'solid' | 'outline' | 'soft', color: BadgeColor): string {\n  if (color === 'custom') return ''\n  const c = colorMap[color]\n  switch (variant) {\n    case 'subtle':  return cn(c.bg, c.fg, c.border)\n    case 'solid':   return cn(c.solid, c.solidFg, 'border-transparent')\n    case 'outline': return cn('bg-transparent', c.fg, c.border)\n    case 'soft':    return cn(c.bg, c.fg, 'border-transparent')\n  }\n}\n\nconst badgeVariants = cva(\n  'relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n  {\n    variants: {\n      variant: {\n        subtle: 'border',\n        solid: 'border border-transparent',\n        outline: 'border',\n        soft: 'border border-transparent',\n      },\n      size: {\n        xs: 'h-4 px-ds-02b text-body-xs gap-ds-02',\n        sm: 'h-5 px-ds-03 text-body-xs gap-ds-02',\n        md: 'h-6 px-2.5 text-body-xs gap-ds-02b', /* px-2.5=10px — no exact DS token */\n        lg: 'h-7 px-ds-04 text-body-sm gap-ds-02b',\n      },\n    },\n    defaultVariants: {\n      variant: 'subtle',\n      size: 'md',\n    },\n  },\n)\n\n/** Icon sizing per badge size */\nconst iconSizeMap: Record<string, string> = {\n  xs: '[&>svg]:h-2.5 [&>svg]:w-2.5',\n  sm: '[&>svg]:h-3 [&>svg]:w-3',\n  md: '[&>svg]:h-3 [&>svg]:w-3',\n  lg: '[&>svg]:h-3.5 [&>svg]:w-3.5',\n}\n\n/** Reduced left padding when leading content (icon/dot/selected) is present */\nconst paddingLeftWithIcon: Record<string, string> = {\n  xs: 'pl-ds-02',\n  sm: 'pl-ds-02b',\n  md: 'pl-ds-03',\n  lg: 'pl-2.5', /* 10px — no exact DS token */\n}\n\n/** Reduced right padding when trailing content (dismiss/endIcon) is present */\nconst paddingRightWithTrailing: Record<string, string> = {\n  xs: 'pr-ds-01',\n  sm: 'pr-ds-02',\n  md: 'pr-ds-02',\n  lg: 'pr-ds-02b',\n}\n\n/**\n * Badge — a compact inline label with a two-axis variant system.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"subtle\"` | `\"solid\"` | `\"outline\"` | `\"soft\"`\n * - `color` controls **semantic intent/category**: 16 built-in colors + `\"custom\"` (CSS variable)\n *\n * **Interactive:** Pass `onClick` to make it a button. Pass `selected` for toggle state.\n * **Dismissible:** Pass `onDismiss` to show a dismiss button.\n * **Custom colors:** Set `color=\"custom\"` and CSS variable `--badge-color` on a parent or via `style`.\n * For light custom colors on solid variant, set `--badge-fg-color` to a dark value.\n *\n * @example\n * <Badge color=\"success\">Active</Badge>\n *\n * @example\n * <Badge variant=\"solid\" size=\"sm\" dot>3 new</Badge>\n *\n * @example\n * <Badge color=\"custom\" style={{ '--badge-color': '#8b5cf6' } as React.CSSProperties}>\n *   Custom\n * </Badge>\n */\ninterface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof badgeVariants> {\n  /** Semantic intent or category color. Use `\"custom\"` with `--badge-color` CSS variable. */\n  color?: BadgeColor\n  asChild?: boolean\n  startIcon?: IconInput\n  endIcon?: IconInput\n  dot?: boolean\n  /** Pulse the status dot (opt-in; static by default). @default false */\n  dotPulse?: boolean\n  onDismiss?: () => void\n  selected?: boolean\n  disabled?: boolean\n  maxWidth?: number\n  /**\n   * Truncate children with ellipsis when they overflow the badge width.\n   * Use with a fixed width (e.g. `className=\"w-20\"`) or `maxWidth` for\n   * constrained pill badges. Always adds a title tooltip on the full text.\n   */\n  truncate?: boolean\n  circle?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLElement, BadgeProps>(\n  (\n    {\n      className,\n      variant,\n      color,\n      size,\n      asChild,\n      startIcon,\n      endIcon,\n      dot,\n      dotPulse,\n      onDismiss,\n      onClick,\n      selected,\n      disabled,\n      maxWidth,\n      truncate,\n      circle,\n      children,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedVariant = variant ?? 'subtle'\n    const resolvedColor = color ?? 'default'\n    const resolvedSize = size ?? 'md'\n\n    // When both onClick + onDismiss, use div with role=\"button\" to avoid nested <button>\n    const Comp = asChild\n      ? Slot\n      : onClick && onDismiss\n        ? 'div'\n        : onClick\n          ? 'button'\n          : 'span'\n\n    // Custom color inline styles via CSS variable\n    const customStyles =\n      resolvedColor === 'custom'\n        ? {\n            ...(resolvedVariant === 'subtle' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 15%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 40%, transparent)',\n            }),\n            ...(resolvedVariant === 'solid' && {\n              backgroundColor: 'var(--badge-color)',\n              color: 'var(--badge-fg-color, white)',\n              borderColor: 'transparent',\n            }),\n            ...(resolvedVariant === 'outline' && {\n              backgroundColor: 'transparent',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 50%, transparent)',\n            }),\n            ...(resolvedVariant === 'soft' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 12%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'transparent',\n            }),\n          }\n        : undefined\n\n    // Keyboard handler for div[role=\"button\"] (onClick + onDismiss case)\n    const handleKeyDown =\n      onClick && onDismiss\n        ? (e: React.KeyboardEvent<HTMLElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              if (!disabled) onClick(e as unknown as React.MouseEvent<HTMLElement>)\n            }\n            props.onKeyDown?.(e)\n          }\n        : props.onKeyDown\n\n    const hasLeading = !!(dot || startIcon || (onClick && selected && !startIcon && !dot))\n    const hasTrailing = !!(onDismiss || endIcon)\n\n    return (\n      <Comp\n        ref={ref as React.Ref<never>}\n        className={cn(\n          badgeVariants({ variant: resolvedVariant, size: resolvedSize }),\n          getColorClasses(resolvedVariant, resolvedColor),\n          hasLeading && paddingLeftWithIcon[resolvedSize],\n          hasTrailing && paddingRightWithTrailing[resolvedSize],\n          onClick &&\n            'cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]',\n          selected && 'ring-1 ring-current/20 transition-shadow duration-fast-02',\n          disabled && 'opacity-action-disabled pointer-events-none saturate-[0.3]',\n          circle && 'justify-center px-0 aspect-square',\n          className,\n        )}\n        style={{ ...style, ...customStyles, ...(maxWidth ? { maxWidth } : undefined) }}\n        onClick={disabled ? undefined : (onClick as React.MouseEventHandler<HTMLElement>)}\n        onKeyDown={handleKeyDown}\n        {...(Comp === 'button' && { type: 'button' as const })}\n        {...(Comp === 'button' && disabled ? { disabled: true } : {})}\n        {...(Comp === 'div' && onClick ? { role: 'button' as const, tabIndex: 0 } : {})}\n        {...props}\n      >\n        {/* Dot indicator — animated entrance, uses the shared <Dot> (current colour + pulse) */}\n        <AnimatePresence>\n          {dot && (\n            <motion.span\n              key=\"dot\"\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              exit={{ scale: 0 }}\n              transition={springs.snappy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Dot color=\"current\" size=\"sm\" pulse={dotPulse} />\n            </motion.span>\n          )}\n        </AnimatePresence>\n\n        {/* Selected check icon — always mounted for interactive badges */}\n        {onClick && !startIcon && !dot && (\n          <motion.span\n            initial={false}\n            animate={selected\n              ? { opacity: 1, scale: 1, width: 'auto', marginRight: 0 }\n              : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 }\n            }\n            transition={{ type: 'tween', duration: durations.moderate01, ease: [0.2, 0, 0.38, 0.9] }}  /* ease-productive-standard */\n            className=\"inline-flex shrink-0 overflow-hidden\"\n            aria-hidden={!selected}\n          >\n            <Icon icon={IconCheck} size=\"xs\" />\n          </motion.span>\n        )}\n\n        {/* Start icon */}\n        {startIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(startIcon)}</span>\n        )}\n\n        {/* Children — with optional truncation */}\n        {truncate || maxWidth ? (\n          <span\n            className=\"truncate\"\n            title={typeof children === 'string' ? children : undefined}\n          >\n            {children}\n          </span>\n        ) : (\n          children\n        )}\n\n        {/* End icon */}\n        {endIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(endIcon)}</span>\n        )}\n\n        {/* Dismiss button */}\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onDismiss()\n            }}\n            className={cn(\n              'shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9',\n              resolvedSize === 'xs'\n                ? 'p-0 -mr-0.5 min-w-ds-05 min-h-ds-05'\n                : 'p-px',\n            )}\n            aria-label={\n              `Remove ${typeof children === 'string' ? children : ''}`.trim() || 'Remove'\n            }\n          >\n            <Icon icon={IconX} size=\"xs\" />\n          </button>\n        )}\n      </Comp>\n    )\n  },\n)\nBadge.displayName = 'Badge'\n\nimport { BadgeGroup } from './badge-group'\nimport { BadgeIndicator } from './badge-indicator'\n\nconst BadgeCompound = Object.assign(Badge, {\n  Indicator: BadgeIndicator,\n  Group: BadgeGroup,\n})\n\nexport { BadgeCompound as Badge, type BadgeColor,type BadgeProps, badgeVariants }\n","'use client'\n\nimport * as React from 'react'\n\nimport { Badge, type BadgeProps } from './badge'\nimport { cn } from './lib/utils'\n\nconst GAP_CLASSES = {\n  tight: 'gap-1',\n  default: 'gap-1.5',\n  loose: 'gap-2',\n} as const\n\nexport interface BadgeGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  gap?: keyof typeof GAP_CLASSES\n  size?: BadgeProps['size']\n  onOverflowClick?: () => void\n  children: React.ReactNode\n}\n\nexport const BadgeGroup = React.forwardRef<HTMLDivElement, BadgeGroupProps>(function BadgeGroup(\n  { max, gap = 'default', size, onOverflowClick, className, children, ...rest },\n  ref,\n) {\n  const childArray = React.Children.toArray(children)\n  const total = childArray.length\n  const hasOverflow = max !== undefined && total > max\n  const visible = hasOverflow ? childArray.slice(0, max) : childArray\n  const overflowCount = hasOverflow ? total - max! : 0\n\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-wrap items-center', GAP_CLASSES[gap], className)}\n      {...rest}\n    >\n      {visible}\n      {hasOverflow && (\n        // With onClick, Badge renders a real, keyboard-reachable <button>; add a\n        // label since \"+N\" alone isn't descriptive to a screen reader.\n        <Badge\n          variant=\"outline\"\n          color=\"neutral\"\n          size={size ?? 'sm'}\n          onClick={onOverflowClick}\n          aria-label={onOverflowClick ? `Show ${overflowCount} more` : undefined}\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </div>\n  )\n})\n\nBadgeGroup.displayName = 'BadgeGroup'\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,IAAW;CACf,SAAS;EAAE,IAAI;EAA2B,IAAI;EAAyB,QAAQ;EAAgC,OAAO;EAAgB,SAAS;CAAkB;CACjK,QAAS;EAAE,IAAI;EAAgB,IAAI;EAAmB,QAAQ;EAAoB,OAAO;EAAgB,SAAS;CAAiB;CACnI,OAAS;EAAE,IAAI;EAAgB,IAAI;EAAmB,QAAQ;EAAoB,OAAO;EAAgB,SAAS;CAAgB;CAClI,SAAS;EAAE,IAAI;EAAgB,IAAI;EAAmB,QAAQ;EAAoB,OAAO;EAAgB,SAAS;CAAkB;CACpI,SAAS;EAAE,IAAI;EAAgB,IAAI;EAAmB,QAAQ;EAAoB,OAAO;EAAgB,SAAS;CAAkB;CACpI,MAAS;EAAE,IAAI;EAAgB,IAAI;EAAmB,QAAQ;EAAoB,OAAO;EAAgB,SAAS;CAAe;CACjI,SAAS;EAAE,IAAI;EAA2B,IAAI;EAAyB,QAAQ;EAAgC,OAAO;EAAgB,SAAS;CAAkB;CACjK,MAAS;EAAE,IAAI;EAAyB,IAAI;EAA4B,QAAQ;EAA6B,OAAO;EAAyB,SAAS;CAAa;CACnK,OAAS;EAAE,IAAI;EAAyB,IAAI;EAA4B,QAAQ;EAA6B,OAAO;EAAyB,SAAS;CAAa;CACnK,OAAS;EAAE,IAAI;EAAyB,IAAI;EAA4B,QAAQ;EAA6B,OAAO;EAAyB,SAAS;CAAa;CACnK,QAAS;EAAE,IAAI;EAAyB,IAAI;EAA4B,QAAQ;EAA6B,OAAO;EAAyB,SAAS;CAAa;CACnK,MAAS;EAAE,IAAI;EAAyB,IAAI;EAA4B,QAAQ;EAA6B,OAAO;EAAyB,SAAS;CAAa;CACnK,QAAS;EAAE,IAAI;EAAyB,IAAI;EAA4B,QAAQ;EAA6B,OAAO;EAAyB,SAAS;CAAa;CACnK,SAAS;EAAE,IAAI;EAAyB,IAAI;EAA4B,QAAQ;EAA6B,OAAO;EAAyB,SAAS;CAAa;AACrK;AAKA,SAAS,EAAgB,GAAkD,GAA2B;CACpG,IAAI,MAAU,UAAU,OAAO;CAC/B,IAAM,IAAI,EAAS;CACnB,QAAQ,GAAR;EACE,KAAK,UAAW,OAAO,EAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM;EAC9C,KAAK,SAAW,OAAO,EAAG,EAAE,OAAO,EAAE,SAAS,oBAAoB;EAClE,KAAK,WAAW,OAAO,EAAG,kBAAkB,EAAE,IAAI,EAAE,MAAM;EAC1D,KAAK,QAAW,OAAO,EAAG,EAAE,IAAI,EAAE,IAAI,oBAAoB;CAC5D;AACF;AAEA,IAAM,IAAgB,EACpB,oRACA;CACE,UAAU;EACR,SAAS;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACT,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF,GAGM,IAAsC;CAC1C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGM,IAA8C;CAClD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGM,IAAmD;CACvD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAiDM,IAAQ,EAAM,YAEhB,EACE,cACA,YACA,UACA,SACA,YACA,cACA,YACA,QACA,aACA,cACA,YACA,aACA,aACA,aACA,aACA,WACA,aACA,UACA,GAAG,KAEL,MACG;CACH,IAAM,IAAkB,KAAW,UAC7B,IAAgB,KAAS,WACzB,IAAe,KAAQ,MAGvB,IAAO,IACT,IACA,KAAW,IACT,QACA,IACE,WACA,QAGF,IACJ,MAAkB,WACd;EACE,GAAI,MAAoB,YAAY;GAClC,iBAAiB;GACjB,OAAO;GACP,aAAa;EACf;EACA,GAAI,MAAoB,WAAW;GACjC,iBAAiB;GACjB,OAAO;GACP,aAAa;EACf;EACA,GAAI,MAAoB,aAAa;GACnC,iBAAiB;GACjB,OAAO;GACP,aAAa;EACf;EACA,GAAI,MAAoB,UAAU;GAChC,iBAAiB;GACjB,OAAO;GACP,aAAa;EACf;CACF,IACA,KAAA,GAGA,IACJ,KAAW,KACN,MAAwC;EAKvC,CAJI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACZ,KAAU,EAAQ,CAA6C,IAEtE,EAAM,YAAY,CAAC;CACrB,IACA,EAAM,WAEN,IAAa,CAAC,EAAE,KAAO,KAAc,KAAW,KAAY,CAAC,KAAa,CAAC,IAC3E,IAAc,CAAC,EAAE,KAAa;CAEpC,OACE,kBAAC,GAAD;EACO;EACL,WAAW,EACT,EAAc;GAAE,SAAS;GAAiB,MAAM;EAAa,CAAC,GAC9D,EAAgB,GAAiB,CAAa,GAC9C,KAAc,EAAoB,IAClC,KAAe,EAAyB,IACxC,KACE,yXACF,KAAY,6DACZ,KAAY,8DACZ,KAAU,qCACV,CACF;EACA,OAAO;GAAE,GAAG;GAAO,GAAG;GAAc,GAAI,IAAW,EAAE,YAAS,IAAI,KAAA;EAAW;EAC7E,SAAS,IAAW,KAAA,IAAa;EACjC,WAAW;EACX,GAAK,MAAS,YAAY,EAAE,MAAM,SAAkB;EACpD,GAAK,MAAS,YAAY,IAAW,EAAE,UAAU,GAAK,IAAI,CAAC;EAC3D,GAAK,MAAS,SAAS,IAAU;GAAE,MAAM;GAAmB,UAAU;EAAE,IAAI,CAAC;EAC7E,GAAI;YApBN;GAuBE,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;IAEE,SAAS,EAAE,OAAO,EAAE;IACpB,SAAS,EAAE,OAAO,EAAE;IACpB,MAAM,EAAE,OAAO,EAAE;IACjB,YAAY,EAAQ;IACpB,WAAU;cAEV,kBAAC,GAAD;KAAK,OAAM;KAAU,MAAK;KAAK,OAAO;IAAW,CAAA;GACtC,GARP,KAQO,EAEA,CAAA;GAGhB,KAAW,CAAC,KAAa,CAAC,KACzB,kBAAC,EAAO,MAAR;IACE,SAAS;IACT,SAAS,IACL;KAAE,SAAS;KAAG,OAAO;KAAG,OAAO;KAAQ,aAAa;IAAE,IACtD;KAAE,SAAS;KAAG,OAAO;KAAK,OAAO;KAAG,aAAa;IAAG;IAExD,YAAY;KAAE,MAAM;KAAS,UAAU,EAAU;KAAY,MAAM;MAAC;MAAK;MAAG;MAAM;KAAG;IAAE;IACvF,WAAU;IACV,eAAa,CAAC;cAEd,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAK;IAAM,CAAA;GACvB,CAAA;GAId,KACC,kBAAC,QAAD;IAAM,WAAW,EAAG,YAAY,EAAY,EAAa;cAAI,EAAc,CAAS;GAAQ,CAAA;GAI7F,KAAY,IACX,kBAAC,QAAD;IACE,WAAU;IACV,OAAO,OAAO,KAAa,WAAW,IAAW,KAAA;IAEhD;GACG,CAAA,IAEN;GAID,KACC,kBAAC,QAAD;IAAM,WAAW,EAAG,YAAY,EAAY,EAAa;cAAI,EAAc,CAAO;GAAQ,CAAA;GAI3F,KACC,kBAAC,UAAD;IACE,MAAK;IACL,UAAU,MAAM;KAEd,AADA,EAAE,gBAAgB,GAClB,EAAU;IACZ;IACA,WAAW,EACT,gLACA,MAAiB,OACb,wCACA,MACN;IACA,cACE,UAAU,OAAO,KAAa,WAAW,IAAW,KAAK,KAAK,KAAK;cAGrE,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;IAAM,CAAA;GACxB,CAAA;EAEN;;AAEV,CACF;AACA,EAAM,cAAc;AAKpB,IAAM,IAAgB,OAAO,OAAO,GAAO;CACzC,WAAW;CACX,OAAO;AACT,CAAC,GCrUK,IAAc;CAClB,OAAO;CACP,SAAS;CACT,OAAO;AACT,GAUa,IAAa,EAAM,WAA4C,SAC1E,EAAE,QAAK,SAAM,WAAW,SAAM,oBAAiB,cAAW,aAAU,GAAG,KACvE,GACA;CACA,IAAM,IAAa,EAAM,SAAS,QAAQ,CAAQ,GAC5C,IAAQ,EAAW,QACnB,IAAc,MAAQ,KAAA,KAAa,IAAQ,GAC3C,IAAU,IAAc,EAAW,MAAM,GAAG,CAAG,IAAI,GACnD,IAAgB,IAAc,IAAQ,IAAO;CAEnD,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,+BAA+B,EAAY,IAAM,CAAS;EACxE,GAAI;YAHN,CAKG,GACA,KAGC,kBAAC,GAAD;GACE,SAAQ;GACR,OAAM;GACN,MAAM,KAAQ;GACd,SAAS;GACT,cAAY,IAAkB,QAAQ,EAAc,SAAS,KAAA;aAL/D,CAMC,KACG,CACG;IAEN;;AAET,CAAC;AAED,EAAW,cAAc"}
+{"version":3,"file":"badge-group.js","names":[],"sources":["../../src/ui/badge.tsx","../../src/ui/badge-group.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@primitives/react-slot'\nimport { IconCheck, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Dot } from './dot'\nimport { Icon } from './icon'\nimport type { IconInput } from './lib/icon-input'\nimport { durations,springs } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n// ── Color map — single source of truth for all badge color × variant combos ──\nconst colorMap = {\n  default: { bg: 'bg-surface-panel-hover', softBg: 'bg-surface-panel-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  accent:  { bg: 'bg-accent-2', softBg: 'bg-accent-3',  fg: 'text-accent-11',  border: 'border-accent-4',  solid: 'bg-accent-9',  solidFg: 'text-accent-fg' },\n  error:   { bg: 'bg-error-2', softBg: 'bg-error-3',   fg: 'text-error-11',   border: 'border-error-4',   solid: 'bg-error-9',   solidFg: 'text-error-fg' },\n  success: { bg: 'bg-success-2', softBg: 'bg-success-3', fg: 'text-success-11', border: 'border-success-4', solid: 'bg-success-9', solidFg: 'text-success-fg' },\n  warning: { bg: 'bg-warning-2', softBg: 'bg-warning-3', fg: 'text-warning-11', border: 'border-warning-4', solid: 'bg-warning-9', solidFg: 'text-warning-fg' },\n  info:    { bg: 'bg-info-2', softBg: 'bg-info-3',    fg: 'text-info-11',    border: 'border-info-4',    solid: 'bg-info-9',    solidFg: 'text-info-fg' },\n  neutral: { bg: 'bg-surface-panel-hover', softBg: 'bg-surface-panel-hover', fg: 'text-surface-fg-muted', border: 'border-surface-border-strong', solid: 'bg-neutral-5', solidFg: 'text-surface-fg' },\n  teal:    { bg: 'bg-category-teal-2', softBg: 'bg-category-teal-3',    fg: 'text-category-teal-11',    border: 'border-category-teal-4',    solid: 'bg-category-teal-9',    solidFg: 'text-category-fg' },\n  amber:   { bg: 'bg-category-amber-2', softBg: 'bg-category-amber-3',   fg: 'text-category-amber-11',   border: 'border-category-amber-4',   solid: 'bg-category-amber-9',   solidFg: 'text-category-fg' },\n  slate:   { bg: 'bg-category-slate-2', softBg: 'bg-category-slate-3',   fg: 'text-category-slate-11',   border: 'border-category-slate-4',   solid: 'bg-category-slate-9',   solidFg: 'text-category-fg' },\n  indigo:  { bg: 'bg-category-indigo-2', softBg: 'bg-category-indigo-3',  fg: 'text-category-indigo-11',  border: 'border-category-indigo-4',  solid: 'bg-category-indigo-9',  solidFg: 'text-category-fg' },\n  cyan:    { bg: 'bg-category-cyan-2', softBg: 'bg-category-cyan-3',    fg: 'text-category-cyan-11',    border: 'border-category-cyan-4',    solid: 'bg-category-cyan-9',    solidFg: 'text-category-fg' },\n  orange:  { bg: 'bg-category-orange-2', softBg: 'bg-category-orange-3',  fg: 'text-category-orange-11',  border: 'border-category-orange-4',  solid: 'bg-category-orange-9',  solidFg: 'text-category-fg' },\n  emerald: { bg: 'bg-category-emerald-2', softBg: 'bg-category-emerald-3', fg: 'text-category-emerald-11', border: 'border-category-emerald-4', solid: 'bg-category-emerald-9', solidFg: 'text-category-fg' },\n} as const\n\ntype BadgeColor = keyof typeof colorMap | 'custom'\n\n/** Derive color classes for a given variant + color pair */\nfunction getColorClasses(variant: 'subtle' | 'solid' | 'outline' | 'soft', color: BadgeColor): string {\n  if (color === 'custom') return ''\n  const c = colorMap[color]\n  switch (variant) {\n    case 'subtle':  return cn(c.bg, c.fg, c.border)\n    case 'solid':   return cn(c.solid, c.solidFg, 'border-transparent')\n    case 'outline': return cn('bg-transparent', c.fg, c.border)\n    // soft keeps the original step-3 fill. subtle moved to step 2; soft did not,\n    // so the two cannot share one key (design call, Yogin/Goutham 2026-08-24).\n    case 'soft':    return cn(c.softBg, c.fg, 'border-transparent')\n  }\n}\n\nconst badgeVariants = cva(\n  'relative inline-flex items-center rounded-pill font-sans font-medium overflow-hidden isolate transition-[color,background-color,border-color,padding] duration-fast-02 ease-productive-standard select-none [&>span:not([data-grain])]:relative [&>span:not([data-grain])]:z-[2]',\n  {\n    variants: {\n      variant: {\n        subtle: 'border',\n        solid: 'border border-transparent',\n        outline: 'border',\n        soft: 'border border-transparent',\n      },\n      size: {\n        xs: 'h-4 px-ds-02b text-body-xs gap-ds-02',\n        sm: 'h-5 px-ds-03 text-body-xs gap-ds-02',\n        md: 'h-6 px-2.5 text-body-xs gap-ds-02b', /* px-2.5=10px — no exact DS token */\n        lg: 'h-7 px-ds-04 text-body-sm gap-ds-02b',\n      },\n    },\n    defaultVariants: {\n      variant: 'subtle',\n      size: 'md',\n    },\n  },\n)\n\n/** Icon sizing per badge size */\nconst iconSizeMap: Record<string, string> = {\n  xs: '[&>svg]:h-2.5 [&>svg]:w-2.5',\n  sm: '[&>svg]:h-3 [&>svg]:w-3',\n  md: '[&>svg]:h-3 [&>svg]:w-3',\n  lg: '[&>svg]:h-3.5 [&>svg]:w-3.5',\n}\n\n/** Reduced left padding when leading content (icon/dot/selected) is present */\nconst paddingLeftWithIcon: Record<string, string> = {\n  xs: 'pl-ds-02',\n  sm: 'pl-ds-02b',\n  md: 'pl-ds-03',\n  lg: 'pl-2.5', /* 10px — no exact DS token */\n}\n\n/** Reduced right padding when trailing content (dismiss/endIcon) is present */\nconst paddingRightWithTrailing: Record<string, string> = {\n  xs: 'pr-ds-01',\n  sm: 'pr-ds-02',\n  md: 'pr-ds-02',\n  lg: 'pr-ds-02b',\n}\n\n/**\n * Badge — a compact inline label with a two-axis variant system.\n *\n * **Two axes:**\n * - `variant` controls **visual style**: `\"subtle\"` | `\"solid\"` | `\"outline\"` | `\"soft\"`\n * - `color` controls **semantic intent/category**: 16 built-in colors + `\"custom\"` (CSS variable)\n *\n * **Interactive:** Pass `onClick` to make it a button. Pass `selected` for toggle state.\n * **Dismissible:** Pass `onDismiss` to show a dismiss button.\n * **Custom colors:** Set `color=\"custom\"` and CSS variable `--badge-color` on a parent or via `style`.\n * For light custom colors on solid variant, set `--badge-fg-color` to a dark value.\n *\n * @example\n * <Badge color=\"success\">Active</Badge>\n *\n * @example\n * <Badge variant=\"solid\" size=\"sm\" dot>3 new</Badge>\n *\n * @example\n * <Badge color=\"custom\" style={{ '--badge-color': '#8b5cf6' } as React.CSSProperties}>\n *   Custom\n * </Badge>\n */\ninterface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>,\n    VariantProps<typeof badgeVariants> {\n  /** Semantic intent or category color. Use `\"custom\"` with `--badge-color` CSS variable. */\n  color?: BadgeColor\n  asChild?: boolean\n  startIcon?: IconInput\n  endIcon?: IconInput\n  dot?: boolean\n  /** Pulse the status dot (opt-in; static by default). @default false */\n  dotPulse?: boolean\n  onDismiss?: () => void\n  selected?: boolean\n  disabled?: boolean\n  maxWidth?: number\n  /**\n   * Truncate children with ellipsis when they overflow the badge width.\n   * Use with a fixed width (e.g. `className=\"w-20\"`) or `maxWidth` for\n   * constrained pill badges. Always adds a title tooltip on the full text.\n   */\n  truncate?: boolean\n  circle?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLElement, BadgeProps>(\n  (\n    {\n      className,\n      variant,\n      color,\n      size,\n      asChild,\n      startIcon,\n      endIcon,\n      dot,\n      dotPulse,\n      onDismiss,\n      onClick,\n      selected,\n      disabled,\n      maxWidth,\n      truncate,\n      circle,\n      children,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedVariant = variant ?? 'subtle'\n    const resolvedColor = color ?? 'default'\n    const resolvedSize = size ?? 'md'\n\n    // When both onClick + onDismiss, use div with role=\"button\" to avoid nested <button>\n    const Comp = asChild\n      ? Slot\n      : onClick && onDismiss\n        ? 'div'\n        : onClick\n          ? 'button'\n          : 'span'\n\n    // Custom color inline styles via CSS variable\n    const customStyles =\n      resolvedColor === 'custom'\n        ? {\n            ...(resolvedVariant === 'subtle' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 15%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 40%, transparent)',\n            }),\n            ...(resolvedVariant === 'solid' && {\n              backgroundColor: 'var(--badge-color)',\n              color: 'var(--badge-fg-color, white)',\n              borderColor: 'transparent',\n            }),\n            ...(resolvedVariant === 'outline' && {\n              backgroundColor: 'transparent',\n              color: 'var(--badge-color)',\n              borderColor: 'color-mix(in oklch, var(--badge-color) 50%, transparent)',\n            }),\n            ...(resolvedVariant === 'soft' && {\n              backgroundColor: 'color-mix(in oklch, var(--badge-color) 12%, transparent)',\n              color: 'var(--badge-color)',\n              borderColor: 'transparent',\n            }),\n          }\n        : undefined\n\n    // Keyboard handler for div[role=\"button\"] (onClick + onDismiss case)\n    const handleKeyDown =\n      onClick && onDismiss\n        ? (e: React.KeyboardEvent<HTMLElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              if (!disabled) onClick(e as unknown as React.MouseEvent<HTMLElement>)\n            }\n            props.onKeyDown?.(e)\n          }\n        : props.onKeyDown\n\n    const hasLeading = !!(dot || startIcon || (onClick && selected && !startIcon && !dot))\n    const hasTrailing = !!(onDismiss || endIcon)\n\n    return (\n      <Comp\n        ref={ref as React.Ref<never>}\n        className={cn(\n          badgeVariants({ variant: resolvedVariant, size: resolvedSize }),\n          getColorClasses(resolvedVariant, resolvedColor),\n          hasLeading && paddingLeftWithIcon[resolvedSize],\n          hasTrailing && paddingRightWithTrailing[resolvedSize],\n          onClick &&\n            'cursor-pointer hover:brightness-[0.97] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 transition-[color,background-color,border-color,transform,filter] duration-moderate-01 ease-productive-exit hover:duration-fast-02 hover:ease-productive-entrance active:scale-[0.95] active:brightness-[0.92] active:duration-[0ms]',\n          selected && 'ring-1 ring-current/20 transition-shadow duration-fast-02',\n          disabled && 'opacity-action-disabled pointer-events-none saturate-[0.3]',\n          circle && 'justify-center px-0 aspect-square',\n          className,\n        )}\n        style={{ ...style, ...customStyles, ...(maxWidth ? { maxWidth } : undefined) }}\n        onClick={disabled ? undefined : (onClick as React.MouseEventHandler<HTMLElement>)}\n        onKeyDown={handleKeyDown}\n        {...(Comp === 'button' && { type: 'button' as const })}\n        {...(Comp === 'button' && disabled ? { disabled: true } : {})}\n        {...(Comp === 'div' && onClick ? { role: 'button' as const, tabIndex: 0 } : {})}\n        {...props}\n      >\n        {/* Dot indicator — animated entrance, uses the shared <Dot> (current colour + pulse) */}\n        <AnimatePresence>\n          {dot && (\n            <motion.span\n              key=\"dot\"\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              exit={{ scale: 0 }}\n              transition={springs.snappy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Dot color=\"current\" size=\"sm\" pulse={dotPulse} />\n            </motion.span>\n          )}\n        </AnimatePresence>\n\n        {/* Selected check icon — always mounted for interactive badges */}\n        {onClick && !startIcon && !dot && (\n          <motion.span\n            initial={false}\n            animate={selected\n              ? { opacity: 1, scale: 1, width: 'auto', marginRight: 0 }\n              : { opacity: 0, scale: 0.5, width: 0, marginRight: -4 }\n            }\n            transition={{ type: 'tween', duration: durations.moderate01, ease: [0.2, 0, 0.38, 0.9] }}  /* ease-productive-standard */\n            className=\"inline-flex shrink-0 overflow-hidden\"\n            aria-hidden={!selected}\n          >\n            <Icon icon={IconCheck} size=\"xs\" />\n          </motion.span>\n        )}\n\n        {/* Start icon */}\n        {startIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(startIcon)}</span>\n        )}\n\n        {/* Children — with optional truncation */}\n        {truncate || maxWidth ? (\n          <span\n            className=\"truncate\"\n            title={typeof children === 'string' ? children : undefined}\n          >\n            {children}\n          </span>\n        ) : (\n          children\n        )}\n\n        {/* End icon */}\n        {endIcon && (\n          <span className={cn('shrink-0', iconSizeMap[resolvedSize])}>{normalizeIcon(endIcon)}</span>\n        )}\n\n        {/* Dismiss button */}\n        {onDismiss && (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onDismiss()\n            }}\n            className={cn(\n              'shrink-0 rounded-pill text-current/60 hover:text-current hover:bg-current/10 transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent-9',\n              resolvedSize === 'xs'\n                ? 'p-0 -mr-0.5 min-w-ds-05 min-h-ds-05'\n                : 'p-px',\n            )}\n            aria-label={\n              `Remove ${typeof children === 'string' ? children : ''}`.trim() || 'Remove'\n            }\n          >\n            <Icon icon={IconX} size=\"xs\" />\n          </button>\n        )}\n      </Comp>\n    )\n  },\n)\nBadge.displayName = 'Badge'\n\nimport { BadgeGroup } from './badge-group'\nimport { BadgeIndicator } from './badge-indicator'\n\nconst BadgeCompound = Object.assign(Badge, {\n  Indicator: BadgeIndicator,\n  Group: BadgeGroup,\n})\n\nexport { BadgeCompound as Badge, type BadgeColor,type BadgeProps, badgeVariants }\n","'use client'\n\nimport * as React from 'react'\n\nimport { Badge, type BadgeProps } from './badge'\nimport { cn } from './lib/utils'\n\nconst GAP_CLASSES = {\n  tight: 'gap-1',\n  default: 'gap-1.5',\n  loose: 'gap-2',\n} as const\n\nexport interface BadgeGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  gap?: keyof typeof GAP_CLASSES\n  size?: BadgeProps['size']\n  onOverflowClick?: () => void\n  children: React.ReactNode\n}\n\nexport const BadgeGroup = React.forwardRef<HTMLDivElement, BadgeGroupProps>(function BadgeGroup(\n  { max, gap = 'default', size, onOverflowClick, className, children, ...rest },\n  ref,\n) {\n  const childArray = React.Children.toArray(children)\n  const total = childArray.length\n  const hasOverflow = max !== undefined && total > max\n  const visible = hasOverflow ? childArray.slice(0, max) : childArray\n  const overflowCount = hasOverflow ? total - max! : 0\n\n  return (\n    <div\n      ref={ref}\n      className={cn('flex flex-wrap items-center', GAP_CLASSES[gap], className)}\n      {...rest}\n    >\n      {visible}\n      {hasOverflow && (\n        // With onClick, Badge renders a real, keyboard-reachable <button>; add a\n        // label since \"+N\" alone isn't descriptive to a screen reader.\n        <Badge\n          variant=\"outline\"\n          color=\"neutral\"\n          size={size ?? 'sm'}\n          onClick={onOverflowClick}\n          aria-label={onOverflowClick ? `Show ${overflowCount} more` : undefined}\n        >\n          +{overflowCount}\n        </Badge>\n      )}\n    </div>\n  )\n})\n\nBadgeGroup.displayName = 'BadgeGroup'\n"],"mappings":"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"}

package/dist/_chunks/chat.js

@@ -15,39 +15,55 @@ import { jsx as v, jsxs as y } from "react/jsx-runtime";
 import { IconAlertCircle as b, IconSend as x, IconSquare as S, IconTrash as C } from "@tabler/icons-react";
 import { AnimatePresence as w, motion as T } from "framer-motion";
 //#region src/ui/chat/date-separator.tsx
-function E(e) {
-	let t = /* @__PURE__ */ new Date(), n = new Date(t.getFullYear(), t.getMonth(), t.getDate()), r = new Date(e.getFullYear(), e.getMonth(), e.getDate()), i = n.getTime() - r.getTime(), a = Math.round(i / (1e3 * 60 * 60 * 24));
-	if (a === 0) return "Today";
-	if (a === 1) return "Yesterday";
-	let o = e.toLocaleString("en-US", { month: "short" }), s = e.getDate();
-	return e.getFullYear() === t.getFullYear() ? `${o} ${s}` : `${o} ${s}, ${e.getFullYear()}`;
+function E(e, t) {
+	let n = new Intl.DateTimeFormat("en-US", {
+		timeZone: t,
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}).formatToParts(e), r = (e) => Number(n.find((t) => t.type === e)?.value);
+	return {
+		year: r("year"),
+		month: r("month"),
+		day: r("day")
+	};
 }
-function D({ date: e, format: t, className: n }) {
-	let r = typeof e == "string" ? new Date(e) : e, a = t ? t(r) : E(r);
+function D(e, t, n) {
+	let r = E(/* @__PURE__ */ new Date(), n), i = E(e, n), a = Date.UTC(r.year, r.month - 1, r.day), o = Date.UTC(i.year, i.month - 1, i.day), s = Math.round((a - o) / (1e3 * 60 * 60 * 24));
+	if (s === 0) return "Today";
+	if (s === 1) return "Yesterday";
+	let c = e.toLocaleString(t, {
+		month: "short",
+		timeZone: n
+	});
+	return i.year === r.year ? `${c} ${i.day}` : `${c} ${i.day}, ${i.year}`;
+}
+function O({ date: e, format: t, className: n, locale: r = "en-US", timeZone: a }) {
+	let o = typeof e == "string" ? new Date(e) : e, s = t ? t(o) : D(o, r, a);
 	return /* @__PURE__ */ y("div", {
 		className: i("flex items-center gap-ds-03 py-ds-03", n),
 		children: [
 			/* @__PURE__ */ v("div", { className: "flex-1 border-t border-surface-border-subtle" }),
 			/* @__PURE__ */ v("span", {
-				className: "text-label-xs font-medium text-surface-fg-subtle/50 uppercase tracking-wider",
-				children: a
+				className: "text-label-xs font-medium text-surface-fg-subtle uppercase tracking-wider",
+				children: s
 			}),
 			/* @__PURE__ */ v("div", { className: "flex-1 border-t border-surface-border-subtle" })
 		]
 	});
 }
-D.displayName = "DateSeparator";
+O.displayName = "DateSeparator";
 //#endregion
 //#region src/ui/chat/message.tsx
-var O = _.createContext({
+var k = _.createContext({
 	variant: "flat",
 	placement: "start",
 	grouped: !1
 });
-function k() {
-	return _.useContext(O);
+function A() {
+	return _.useContext(k);
 }
-var A = _.forwardRef(({ children: e, variant: r = "flat", placement: a = "start", highlight: s, grouped: c = !1, deleted: l = !1, deletedText: u = "This message was deleted", className: d, ...f }, p) => {
+var j = _.forwardRef(({ children: e, variant: r = "flat", placement: a = "start", highlight: s, grouped: c = !1, deleted: l = !1, deletedText: u = "This message was deleted", className: d, ...f }, p) => {
 	let m = _.useMemo(() => ({
 		variant: r,
 		placement: a,
@@ -67,13 +83,13 @@ var A = _.forwardRef(({ children: e, variant: r = "flat", placement: a = "start"
 			y: 0
 		},
 		transition: n.snappy,
-		className: i("flex items-center gap-ds-02 py-ds-02 text-caption text-surface-fg-subtle/50 italic", d),
+		className: i("flex items-center gap-ds-02 py-ds-02 text-caption text-surface-fg-subtle italic", d),
 		...t(f),
 		children: [/* @__PURE__ */ v(o, {
 			icon: C,
 			size: "xs"
 		}), u]
-	}) : r === "bubble" ? /* @__PURE__ */ v(O.Provider, {
+	}) : r === "bubble" ? /* @__PURE__ */ v(k.Provider, {
 		value: m,
 		children: /* @__PURE__ */ v(T.div, {
 			ref: p,
@@ -87,11 +103,11 @@ var A = _.forwardRef(({ children: e, variant: r = "flat", placement: a = "start"
 			className: i("group/message relative flex", a === "end" ? "justify-end" : "justify-start", g, s === "internal" && "bg-warning-2/50 rounded-control-inner", d),
 			...t(f),
 			children: /* @__PURE__ */ v("div", {
-				className: i("max-w-[85%] rounded-bubble px-ds-04 py-ds-03", a === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-raised text-surface-fg"),
+				className: i("max-w-[85%] rounded-bubble px-ds-04 py-ds-03", a === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-panel text-surface-fg"),
 				children: e
 			})
 		})
-	}) : /* @__PURE__ */ v(O.Provider, {
+	}) : /* @__PURE__ */ v(k.Provider, {
 		value: m,
 		children: /* @__PURE__ */ v(T.div, {
 			ref: p,
@@ -108,14 +124,14 @@ var A = _.forwardRef(({ children: e, variant: r = "flat", placement: a = "start"
 		})
 	});
 });
-A.displayName = "Message";
-function j({ src: t, fallback: n, icon: r, size: a = "md", children: o }) {
-	let { grouped: d } = k(), f = a === "sm" ? "w-5" : "w-6";
+j.displayName = "Message";
+function M({ src: t, fallback: n, icon: r, size: a = "md", children: o }) {
+	let { grouped: d } = A(), f = a === "sm" ? "w-5" : "w-6";
 	return d ? /* @__PURE__ */ v("div", { className: i(f, a === "sm" ? "h-5" : "h-6", "shrink-0") }) : o ? /* @__PURE__ */ v("div", {
 		className: i(f, "shrink-0 flex items-start"),
 		children: o
 	}) : r ? /* @__PURE__ */ v("div", {
-		className: i(f, a === "sm" ? "h-5" : "h-6", "shrink-0 flex items-center justify-center rounded-pill bg-surface-raised-hover"),
+		className: i(f, a === "sm" ? "h-5" : "h-6", "shrink-0 flex items-center justify-center rounded-pill bg-surface-panel-hover"),
 		children: /* @__PURE__ */ v(e, {
 			size: a === "sm" ? "xs" : "sm",
 			children: u(r)
@@ -131,23 +147,23 @@ function j({ src: t, fallback: n, icon: r, size: a = "md", children: o }) {
 		})
 	});
 }
-j.displayName = "Message.Avatar";
-function M({ children: e, className: t, ...n }) {
+M.displayName = "Message.Avatar";
+function N({ children: e, className: t, ...n }) {
 	return /* @__PURE__ */ v("div", {
 		className: i("min-w-0 flex-1 flex flex-col gap-ds-02", t),
 		...n,
 		children: e
 	});
 }
-M.displayName = "Message.Content";
-function N(e) {
+N.displayName = "Message.Content";
+function P(e) {
 	return e.toLocaleTimeString("en-US", {
 		hour: "numeric",
 		minute: "2-digit"
 	});
 }
-function P({ name: e, badge: t, timestamp: n, formattedTimestamp: r, timestampFormat: i = N }) {
-	let { grouped: a } = k();
+function F({ name: e, badge: t, timestamp: n, formattedTimestamp: r, timestampFormat: i = P }) {
+	let { grouped: a } = A();
 	if (a) return null;
 	let o = r ?? (n ? i(n) : void 0);
 	return /* @__PURE__ */ y("div", {
@@ -159,22 +175,22 @@ function P({ name: e, badge: t, timestamp: n, formattedTimestamp: r, timestampFo
 			}),
 			t,
 			o && /* @__PURE__ */ v("span", {
-				className: "text-body-sm text-surface-fg-subtle/50",
+				className: "text-body-sm text-surface-fg-subtle",
 				children: o
 			})
 		]
 	});
 }
-P.displayName = "Message.Author";
-function F({ children: e, className: t, ...n }) {
+F.displayName = "Message.Author";
+function I({ children: e, className: t, ...n }) {
 	return /* @__PURE__ */ v("div", {
 		className: i("text-body-md leading-relaxed text-surface-fg whitespace-pre-wrap", t),
 		...n,
 		children: e
 	});
 }
-F.displayName = "Message.Body";
-function I({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent: a }) {
+I.displayName = "Message.Body";
+function L({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent: a }) {
 	let [o, s] = _.useState(!1), [c, l] = _.useState(e), u = _.useRef(null);
 	_.useEffect(() => {
 		o && u.current && (u.current.focus(), u.current.select());
@@ -201,14 +217,14 @@ function I({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent:
 			onChange: (e) => l(e.target.value),
 			onKeyDown: h,
 			onBlur: p,
-			className: "resize-none rounded-control-inner bg-surface-raised-hover px-ds-02 py-ds-01 text-body-md leading-relaxed",
+			className: "resize-none rounded-control-inner bg-surface-panel-hover px-ds-02 py-ds-01 text-body-md leading-relaxed",
 			rows: 2
 		}), /* @__PURE__ */ v("div", {
-			className: "mt-ds-01 text-caption text-surface-fg-subtle/50",
+			className: "mt-ds-01 text-caption text-surface-fg-subtle",
 			children: "Enter to save · Escape to cancel"
 		})]
 	}) : /* @__PURE__ */ v("div", {
-		className: i("text-body-md leading-relaxed text-surface-fg whitespace-pre-wrap", r && "cursor-pointer hover:bg-surface-raised-hover rounded-control-inner transition-colors"),
+		className: i("text-body-md leading-relaxed text-surface-fg whitespace-pre-wrap", r && "cursor-pointer hover:bg-surface-panel-hover rounded-control-inner transition-colors"),
 		onClick: d,
 		role: r ? "button" : void 0,
 		tabIndex: r ? 0 : void 0,
@@ -218,36 +234,36 @@ function I({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent:
 		children: a ? a(e) : e
 	});
 }
-I.displayName = "Message.EditableBody";
-function L({ reactions: e, onReact: t }) {
+L.displayName = "Message.EditableBody";
+function R({ reactions: e, onReact: t }) {
 	return e.length === 0 ? null : /* @__PURE__ */ v("div", {
 		className: "flex flex-wrap gap-ds-02 mt-ds-03",
 		children: e.map((e) => /* @__PURE__ */ y("button", {
 			type: "button",
 			onClick: () => t(e.emoji),
 			"aria-label": `${e.emoji} ${e.count} reaction${e.count === 1 ? "" : "s"}${e.reacted ? ", you reacted" : ""}`,
-			className: i("inline-flex items-center gap-ds-01 rounded-pill px-ds-02 py-ds-01 text-body-xs transition-colors", e.reacted ? "bg-accent-3 ring-1 ring-accent-6" : "bg-surface-raised-hover hover:bg-surface-raised-active"),
+			className: i("inline-flex items-center gap-ds-01 rounded-pill px-ds-02 py-ds-01 text-body-xs transition-colors", e.reacted ? "bg-accent-3 ring-1 ring-accent-6" : "bg-surface-panel-hover hover:bg-surface-panel-active"),
 			children: [/* @__PURE__ */ v("span", { children: e.emoji }), /* @__PURE__ */ v("span", { children: e.count })]
 		}, e.emoji))
 	});
 }
-L.displayName = "Message.Reactions";
-function R({ children: e, delay: t = 100 }) {
+R.displayName = "Message.Reactions";
+function z({ children: e, delay: t = 100 }) {
 	return /* @__PURE__ */ v("div", {
-		className: i("absolute -top-2 right-0 z-10", "flex items-center gap-ds-01 rounded-control bg-surface-raised px-ds-01 py-ds-01 shadow-raised", "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 transition-opacity duration-150"),
+		className: i("absolute -top-2 right-0 z-10", "flex items-center gap-ds-01 rounded-control bg-surface-panel px-ds-01 py-ds-01 shadow-raised", "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 transition-opacity duration-150"),
 		style: { transitionDelay: `${t}ms` },
 		children: e
 	});
 }
-R.displayName = "Message.Actions";
-function z({ icon: t, label: n, onClick: r, variant: a = "default" }) {
+z.displayName = "Message.Actions";
+function B({ icon: t, label: n, onClick: r, variant: a = "default" }) {
 	return /* @__PURE__ */ y(p, { children: [/* @__PURE__ */ v(h, {
 		asChild: !0,
 		children: /* @__PURE__ */ v("button", {
 			type: "button",
 			onClick: r,
 			"aria-label": n,
-			className: i("p-ds-02 rounded-control-inner transition-colors", a === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover", a === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover"),
+			className: i("p-ds-02 rounded-control-inner transition-colors", a === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-panel-hover", a === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-panel-hover"),
 			children: /* @__PURE__ */ v(e, {
 				size: "xs",
 				children: u(t)
@@ -255,17 +271,17 @@ function z({ icon: t, label: n, onClick: r, variant: a = "default" }) {
 		})
 	}), /* @__PURE__ */ v(m, { children: n })] });
 }
-z.displayName = "Message.Action";
-var B = Object.assign(A, {
-	Avatar: j,
-	Content: M,
-	Author: P,
-	Body: F,
-	EditableBody: I,
-	Reactions: L,
-	Actions: R,
-	Action: z
-}), V = _.forwardRef(({ onSubmit: e, placeholder: t = "Type a message...", disabled: n = !1, isStreaming: r = !1, onCancel: a, leadingSlot: s, trailingSlot: c, disclaimer: l, sendIcon: u, className: f, ...p }, m) => {
+B.displayName = "Message.Action";
+var V = Object.assign(j, {
+	Avatar: M,
+	Content: N,
+	Author: F,
+	Body: I,
+	EditableBody: L,
+	Reactions: R,
+	Actions: z,
+	Action: B
+}), H = _.forwardRef(({ onSubmit: e, placeholder: t = "Type a message...", disabled: n = !1, isStreaming: r = !1, onCancel: a, leadingSlot: s, trailingSlot: c, disclaimer: l, sendIcon: u, className: f, ...p }, m) => {
 	let [h, g] = _.useState(""), b = _.useRef(null), C = _.useCallback(() => {
 		let e = b.current;
 		e && (e.style.height = "auto", e.style.height = `${Math.min(e.scrollHeight, 160)}px`);
@@ -298,7 +314,7 @@ var B = Object.assign(A, {
 					"aria-label": t || "Type a message",
 					disabled: n,
 					rows: 1,
-					className: "flex-1 resize-none bg-transparent px-ds-02 py-ds-01 text-body-sm text-surface-fg placeholder:text-surface-fg-subtle/50 focus:outline-hidden disabled:opacity-50",
+					className: "flex-1 resize-none bg-transparent px-ds-02 py-ds-01 text-body-sm text-surface-fg placeholder:text-surface-fg-muted focus:outline-hidden disabled:opacity-50",
 					style: { maxHeight: 160 }
 				}),
 				r ? /* @__PURE__ */ v(d, {
@@ -325,15 +341,15 @@ var B = Object.assign(A, {
 				c
 			]
 		}), l && /* @__PURE__ */ v("p", {
-			className: "mt-ds-02 text-center text-caption text-surface-fg-subtle/50",
+			className: "mt-ds-02 text-center text-caption text-surface-fg-subtle",
 			children: l
 		})]
 	});
 });
-V.displayName = "MessageInput";
+H.displayName = "MessageInput";
 //#endregion
 //#region src/ui/chat/message-list.tsx
-var H = _.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: n = 0, onScrollToBottom: o, onLoadMore: s, loadingMore: c = !1, emptySlot: l, scrollToBottomSlot: u, headerSlot: d, className: f, ...p }, m) => {
+var U = _.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: n = 0, onScrollToBottom: o, onLoadMore: s, loadingMore: c = !1, emptySlot: l, scrollToBottomSlot: u, headerSlot: d, className: f, ...p }, m) => {
 	let h = _.useRef(null), g = _.useRef(!0), [b, x] = _.useState(!0), S = _.useRef(!1), C = _.useRef(0), E = _.Children.count(e) === 0 && !c, D = _.useCallback(() => {
 		let e = h.current;
 		if (!e) return;
@@ -411,16 +427,16 @@ var H = _.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: n = 0,
 		]
 	});
 });
-H.displayName = "MessageList";
+U.displayName = "MessageList";
 //#endregion
 //#region src/ui/chat/system-message.tsx
-function U(e) {
+function W(e) {
 	return new Date(e).toLocaleTimeString("en-US", {
 		hour: "numeric",
 		minute: "2-digit"
 	});
 }
-var W = _.forwardRef(({ icon: t, timestamp: n, variant: r = "event", children: a, className: s, ...c }, l) => r === "alert" ? /* @__PURE__ */ v("div", {
+var G = _.forwardRef(({ icon: t, timestamp: n, variant: r = "event", children: a, className: s, ...c }, l) => r === "alert" ? /* @__PURE__ */ v("div", {
 	ref: l,
 	role: "alert",
 	className: i("flex justify-center", s),
@@ -438,13 +454,13 @@ var W = _.forwardRef(({ icon: t, timestamp: n, variant: r = "event", children: a
 			}),
 			n && /* @__PURE__ */ v("span", {
 				className: "text-body-sm text-error-11/60",
-				children: U(n)
+				children: W(n)
 			})
 		]
 	})
 }) : /* @__PURE__ */ y("div", {
 	ref: l,
-	className: i("flex items-center gap-ds-02 rounded-control-inner bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-body-sm text-surface-fg-subtle/60", s),
+	className: i("flex items-center gap-ds-02 rounded-control-inner bg-surface-panel-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-body-sm text-surface-fg-subtle", s),
 	...c,
 	children: [
 		/* @__PURE__ */ v(e, {
@@ -455,16 +471,16 @@ var W = _.forwardRef(({ icon: t, timestamp: n, variant: r = "event", children: a
 			className: "flex-1",
 			children: a
 		}),
-		n && /* @__PURE__ */ v("span", { children: U(n) })
+		n && /* @__PURE__ */ v("span", { children: W(n) })
 	]
 }));
-W.displayName = "SystemMessage";
+G.displayName = "SystemMessage";
 //#endregion
 //#region src/ui/chat/typing-indicator.tsx
-function G(e) {
+function K(e) {
 	return e.length === 1 ? `${e[0].name} is typing...` : e.length === 2 ? `${e[0].name} and ${e[1].name} are typing...` : "Several people are typing...";
 }
-function K({ users: e, className: t }) {
+function q({ users: e, className: t }) {
 	return /* @__PURE__ */ v("div", {
 		className: i("min-h-ds-06 px-ds-05", t),
 		role: "status",
@@ -493,14 +509,14 @@ function K({ users: e, className: t }) {
 						delay: e * .15
 					}
 				}, e))
-			}), /* @__PURE__ */ v("span", { children: G(e) })]
+			}), /* @__PURE__ */ v("span", { children: K(e) })]
 		}) })
 	});
 }
-K.displayName = "TypingIndicator";
+q.displayName = "TypingIndicator";
 //#endregion
 //#region src/ui/chat/unread-separator.tsx
-function q({ label: e = "NEW", count: t, className: n }) {
+function J({ label: e = "NEW", count: t, className: n }) {
 	return /* @__PURE__ */ y("div", {
 		className: i("relative flex items-center py-ds-02", n),
 		children: [
@@ -513,6 +529,6 @@ function q({ label: e = "NEW", count: t, className: n }) {
 		]
 	});
 }
-q.displayName = "UnreadSeparator";
+J.displayName = "UnreadSeparator";
 //#endregion
-export { D as DateSeparator, B as Message, V as MessageInput, H as MessageList, W as SystemMessage, K as TypingIndicator, q as UnreadSeparator, k as useMessageContext };
+export { O as DateSeparator, V as Message, H as MessageInput, U as MessageList, G as SystemMessage, q as TypingIndicator, J as UnreadSeparator, A as useMessageContext };