@devalok/shilp-sutra 0.38.0 → 0.39.0

package/dist/ai/command-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-bar.js","names":[],"sources":["../../src/ai/command-bar.tsx"],"sourcesContent":["'use client'\n\n/**\n * CommandBar -- Unified AI command interface.\n *\n * Three variants:\n * - hero:     Full-featured inline bar with greeting, hints, placeholder rotation\n * - inline:   Compact inline bar for embedding in panels/toolbars\n * - floating:  Modal overlay (same pattern as CommandPalette) with global keybinding\n *\n * Supports both command-palette filtering (when `groups` provided) and\n * AI natural-language submission via `onSubmit`.\n */\nimport {\n  IconArrowDown,\n  IconArrowUp,\n  IconCornerDownLeft,\n  IconLoader2,\n  IconSearch,\n  IconX,\n} from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport type { CommandGroup, CommandItem } from '../composed/command-palette'\nimport { useMotion } from '../motion/motion-provider'\nimport {\n  Dialog,\n  DialogContentRaw,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n} from '../ui/dialog'\nimport { Icon } from '../ui/icon'\nimport { getIsMac, getModifierDisplay,matchesKeybinding } from '../ui/lib/keybinding'\nimport { springs,tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { VisuallyHidden } from '../ui/visually-hidden'\n\n// -----------------------------------------------------------------------\n// GradientBorderWrap — animated gradient border during processing\n// -----------------------------------------------------------------------\n\n/**\n * Wraps the input row with an animated gradient border during processing.\n * Uses the Devalok brand palette (pink → purple → magenta) flowing around\n * the border. When inactive, renders children directly with no wrapper overhead.\n *\n * Technique: outer div with gradient background + padding-[1.5px] creates\n * a visible gradient border. The inner content covers the center, leaving\n * only the edge visible as a \"border\".\n */\nfunction GradientBorderWrap({\n  active,\n  rounded,\n  reducedMotion,\n  children,\n}: {\n  active: boolean\n  rounded: string\n  reducedMotion: boolean\n  children: React.ReactNode\n}) {\n  if (!active) return <>{children}</>\n\n  if (reducedMotion) {\n    return (\n      <div className={cn('p-[1.5px] bg-accent-9', rounded)}>\n        {children}\n      </div>\n    )\n  }\n\n  return (\n    <motion.div\n      className={cn('relative p-[1.5px]', rounded)}\n      style={{\n        background: 'linear-gradient(var(--gradient-angle, 0deg), #D33163, #9B5DE5, #C850C0, #D33163)',\n        backgroundSize: '300% 300%',\n      }}\n      animate={{\n        // Rotate the gradient angle — creates the flowing border effect\n        // Using CSS custom property animation via backgroundPosition as proxy\n        backgroundPosition: ['0% 0%', '100% 100%', '0% 0%'],\n      }}\n      transition={{\n        backgroundPosition: {\n          duration: 4,\n          repeat: Infinity,\n          ease: 'linear',\n        },\n      }}\n    >\n      {/* Subtle outer glow */}\n      <motion.div\n        className={cn('absolute inset-0 -z-10', rounded)}\n        style={{\n          background: 'linear-gradient(var(--gradient-angle, 0deg), #D33163, #9B5DE5, #C850C0, #D33163)',\n          backgroundSize: '300% 300%',\n          filter: 'blur(8px)',\n        }}\n        animate={{\n          opacity: [0.3, 0.5, 0.3],\n          backgroundPosition: ['0% 0%', '100% 100%', '0% 0%'],\n        }}\n        transition={{\n          opacity: { duration: 3, repeat: Infinity, ease: 'easeInOut' },\n          backgroundPosition: { duration: 4, repeat: Infinity, ease: 'linear' },\n        }}\n      />\n      {children}\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\n/**\n * Unified AI command interface with three visual variants:\n * - `hero`: full-featured inline bar with greeting, animated placeholder rotation, and hints\n * - `inline`: compact bar for embedding in panels or toolbars\n * - `floating`: modal overlay with global keybinding (same pattern as CommandPalette)\n *\n * Supports both command-palette filtering (when `groups` provided) and\n * natural-language AI submission via `onSubmit`.\n */\nexport interface CommandBarProps\n  extends Omit<React.ComponentPropsWithRef<'div'>, 'onSubmit'> {\n  // -- AI submission --\n  /** Called when the user submits a query (Enter key). */\n  onSubmit?: (query: string) => void\n  /** Current interaction state. Controls visual feedback (gradient border, placeholder). */\n  state?: 'idle' | 'typing' | 'processing' | 'responded'\n\n  // -- Command palette mode (optional) --\n  /** When provided, enables command-palette filtering alongside AI submission. */\n  groups?: CommandGroup[]\n  onSearch?: (query: string) => void\n  emptyMessage?: string\n  emptyState?: React.ReactNode\n\n  // -- Visual --\n  /** Layout variant. @default 'hero' */\n  variant?: 'hero' | 'inline' | 'floating'\n  /** Placeholder text, or an array of strings that rotate on an interval. */\n  placeholder?: string | string[]\n  /** Rotation interval in ms when `placeholder` is an array. @default 4000 */\n  placeholderInterval?: number\n  /** Greeting text shown above the input in `hero` variant. */\n  greeting?: string\n  /** Hint strings shown below the input in `hero` variant. */\n  hints?: string[]\n  agentName?: string\n  agentIcon?: React.ReactNode\n\n  // -- Floating variant (modal) --\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Keybinding to toggle the floating bar. @default 'mod+k' */\n  keybinding?: string | string[] | false\n\n  // -- Interaction --\n  disabled?: boolean\n  maxHeight?: string | number\n\n  // -- Composition --\n  children?: React.ReactNode\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\nfunction getFilterValue(item: CommandItem): string {\n  if (item.filterValue) return item.filterValue\n  if (typeof item.label === 'string') return item.label\n  return ''\n}\n\nfunction getFilterDescription(item: CommandItem): string {\n  if (typeof item.description === 'string') return item.description\n  return ''\n}\n\n// -----------------------------------------------------------------------\n// Rotating Placeholder\n// -----------------------------------------------------------------------\n\nfunction RotatingPlaceholder({\n  placeholders,\n  interval,\n  paused,\n}: {\n  placeholders: string[]\n  interval: number\n  paused: boolean\n}) {\n  const [currentIndex, setCurrentIndex] = React.useState(0)\n  const { reducedMotion } = useMotion()\n\n  React.useEffect(() => {\n    if (paused || placeholders.length <= 1) return\n    const timer = setInterval(() => {\n      setCurrentIndex((prev) => (prev + 1) % placeholders.length)\n    }, interval)\n    return () => clearInterval(timer)\n  }, [paused, placeholders.length, interval])\n\n  if (reducedMotion) {\n    return (\n      <span className=\"pointer-events-none absolute text-surface-fg-subtle\">\n        {placeholders[currentIndex]}\n      </span>\n    )\n  }\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      <motion.span\n        key={placeholders[currentIndex]}\n        initial={{ opacity: 0, y: -4 }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: 4 }}\n        transition={tweens.fade}\n        className=\"pointer-events-none absolute text-surface-fg-subtle\"\n      >\n        {placeholders[currentIndex]}\n      </motion.span>\n    </AnimatePresence>\n  )\n}\n\n// -----------------------------------------------------------------------\n// CommandBar\n// -----------------------------------------------------------------------\n\nconst CommandBar = React.forwardRef<HTMLDivElement, CommandBarProps>(\n  function CommandBar(\n    {\n      onSubmit,\n      state = 'idle',\n      groups = [],\n      onSearch,\n      emptyMessage = 'No results found.',\n      emptyState,\n      variant = 'hero',\n      placeholder = 'Ask anything...',\n      placeholderInterval = 5000,\n      greeting,\n      hints,\n      agentName,\n      agentIcon,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      keybinding = 'mod+j',\n      disabled = false,\n      maxHeight = '320px',\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    // -- Controlled/uncontrolled open state (floating) --\n    const isControlled = openProp !== undefined\n    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n    const open = isControlled ? openProp : internalOpen\n\n    const openRef = React.useRef(open)\n    openRef.current = open\n\n    const setOpen = React.useCallback(\n      (nextOpen: boolean | ((prev: boolean) => boolean)) => {\n        const resolved =\n          typeof nextOpen === 'function' ? nextOpen(openRef.current) : nextOpen\n        if (!isControlled) {\n          setInternalOpen(resolved)\n        }\n        onOpenChange?.(resolved)\n      },\n      [isControlled, onOpenChange],\n    )\n\n    // -- Core state --\n    const [query, setQuery] = React.useState('')\n    const [activeIndex, setActiveIndex] = React.useState(-1)\n    const [lastQuery, setLastQuery] = React.useState('')\n    const [isFocused, setIsFocused] = React.useState(false)\n    const [shake, setShake] = React.useState(false)\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLDivElement>(null)\n    const instanceId = React.useId()\n    const listboxId = `command-bar-listbox-${instanceId}`\n\n    // -- Motion --\n    const { reducedMotion: isReduced } = useMotion()\n    const noMotionTransition = { duration: 0 }\n\n    // -- Platform detection --\n    const isMac = React.useMemo(() => getIsMac(), [])\n\n    // -- Placeholders --\n    const placeholders = React.useMemo(\n      () => (Array.isArray(placeholder) ? placeholder : [placeholder]),\n      [placeholder],\n    )\n\n    // -- Has groups --\n    const hasGroups = groups.length > 0\n\n    // -- Filter groups --\n    const filteredGroups = React.useMemo(() => {\n      if (!hasGroups) return []\n      if (!query.trim()) return groups\n      const q = query.toLowerCase()\n      return groups\n        .map((group) => ({\n          ...group,\n          items: group.items.filter(\n            (item) =>\n              getFilterValue(item).toLowerCase().includes(q) ||\n              getFilterDescription(item).toLowerCase().includes(q),\n          ),\n        }))\n        .filter((group) => group.items.length > 0)\n    }, [groups, query, hasGroups])\n\n    const filteredItems = React.useMemo(\n      () => filteredGroups.flatMap((g) => g.items),\n      [filteredGroups],\n    )\n\n    // Build item index map for keyboard navigation\n    const itemIndexMap = React.useMemo(() => {\n      const map = new Map<string, number>()\n      let idx = 0\n      for (const group of filteredGroups) {\n        for (const item of group.items) {\n          map.set(item.id, idx++)\n        }\n      }\n      return map\n    }, [filteredGroups])\n\n    // -- Max height CSS --\n    const maxHeightValue =\n      typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n\n    // -- Global keybinding (floating variant) --\n    React.useEffect(() => {\n      if (variant !== 'floating' || keybinding === false) return\n\n      const bindings = Array.isArray(keybinding) ? keybinding : [keybinding]\n\n      function handleKeyDown(e: KeyboardEvent) {\n        for (const binding of bindings) {\n          if (matchesKeybinding(e, binding)) {\n            e.preventDefault()\n            setOpen((prev) => !prev)\n            return\n          }\n        }\n      }\n      document.addEventListener('keydown', handleKeyDown)\n      return () => document.removeEventListener('keydown', handleKeyDown)\n    }, [variant, keybinding, setOpen])\n\n    // -- Reset on floating open --\n    React.useEffect(() => {\n      if (variant === 'floating' && open) {\n        setQuery('')\n        setActiveIndex(-1)\n        requestAnimationFrame(() => {\n          inputRef.current?.focus()\n        })\n      }\n    }, [variant, open])\n\n    // -- Scroll active item into view --\n    React.useEffect(() => {\n      if (activeIndex < 0) return\n      const activeEl = listRef.current?.querySelector(\n        `[data-command-index=\"${activeIndex}\"]`,\n      )\n      activeEl?.scrollIntoView({ block: 'nearest' })\n    }, [activeIndex])\n\n    // -- Query change handler --\n    const handleQueryChange = (value: string) => {\n      setQuery(value)\n      setActiveIndex(hasGroups && value.trim() ? 0 : -1)\n      onSearch?.(value)\n    }\n\n    // -- Submit handler --\n    const handleSubmit = React.useCallback(() => {\n      if (!query.trim() || disabled) return\n      setLastQuery(query)\n      onSubmit?.(query)\n    }, [query, disabled, onSubmit])\n\n    // -- Keyboard handler --\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      switch (e.key) {\n        case 'ArrowDown': {\n          if (!hasGroups || filteredItems.length === 0) return\n          e.preventDefault()\n          setActiveIndex((prev) =>\n            prev < filteredItems.length - 1 ? prev + 1 : 0,\n          )\n          break\n        }\n        case 'ArrowUp': {\n          if (hasGroups && filteredItems.length > 0) {\n            e.preventDefault()\n            setActiveIndex((prev) =>\n              prev > 0 ? prev - 1 : filteredItems.length - 1,\n            )\n          } else if (!hasGroups && !query && lastQuery) {\n            // Recall last query\n            e.preventDefault()\n            setQuery(lastQuery)\n          }\n          break\n        }\n        case 'Enter': {\n          e.preventDefault()\n          const isCmdEnter = e.metaKey || e.ctrlKey\n\n          if (isCmdEnter) {\n            // Cmd+Enter always submits\n            handleSubmit()\n          } else if (\n            hasGroups &&\n            activeIndex >= 0 &&\n            filteredItems[activeIndex]\n          ) {\n            // Enter selects active command item\n            filteredItems[activeIndex].onSelect()\n            if (variant === 'floating') setOpen(false)\n          } else {\n            // Enter submits query\n            handleSubmit()\n          }\n          break\n        }\n        case 'Escape': {\n          e.preventDefault()\n          if (state === 'responded') {\n            setQuery('')\n          } else if (variant === 'floating') {\n            setOpen(false)\n          } else {\n            inputRef.current?.blur()\n          }\n          break\n        }\n      }\n    }\n\n    // -- Clear handler --\n    const handleClear = () => {\n      setQuery('')\n      setActiveIndex(-1)\n      inputRef.current?.focus()\n    }\n\n    // -- Shake animation reset --\n    React.useEffect(() => {\n      if (shake) {\n        const timer = setTimeout(() => setShake(false), 500)\n        return () => clearTimeout(timer)\n      }\n    }, [shake])\n\n    // -- Shared spring/tween for reduced motion --\n    const springSnappy = isReduced ? noMotionTransition : springs.snappy\n    const tweenFade = isReduced ? noMotionTransition : tweens.fade\n    const noInit = isReduced ? { opacity: 1, scale: 1, y: 0 } : undefined\n\n    // =====================================================================\n    // Shared Input Row\n    // =====================================================================\n    const isCompact = variant === 'inline'\n    const isProcessing = state === 'processing'\n    const isResponded = state === 'responded'\n\n    const renderInputRow = () => (\n      <GradientBorderWrap\n        active={isProcessing}\n        rounded={isCompact ? 'rounded-ds-md' : 'rounded-ds-lg'}\n        reducedMotion={isReduced}\n      >\n        <div\n          className={cn(\n            'flex items-center gap-ds-04 border bg-surface-overlay transition-colors transition-shadow duration-fast-02 ease-productive-standard',\n            isCompact\n              ? 'rounded-ds-md px-ds-04'\n              : 'rounded-ds-lg px-ds-05',\n            isProcessing\n              ? 'border-transparent'\n              : 'border-surface-border-strong',\n            isFocused && !isProcessing && 'border-accent-7 shadow-ring',\n            shake && 'animate-shake',\n          )}\n        >\n        {/* Search icon */}\n        <Icon\n          icon={IconSearch}\n          size={isCompact ? 'xs' : 'sm'}\n          stroke=\"light\"\n          className={cn(\n            'shrink-0 transition-colors duration-fast-02 ease-productive-standard',\n            isFocused ? 'text-accent-9' : 'text-surface-fg-subtle',\n          )}\n        />\n\n        {/* Input wrapper */}\n        <div className=\"relative flex flex-1 items-center\">\n          {!query && !isFocused && placeholders.length > 1 && (\n            <RotatingPlaceholder\n              placeholders={placeholders}\n              interval={placeholderInterval}\n              paused={isFocused || !!query}\n            />\n          )}\n          <input\n            ref={inputRef}\n            value={query}\n            onChange={(e) => handleQueryChange(e.target.value)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            onKeyDown={handleKeyDown}\n            placeholder={\n              placeholders.length === 1 || isFocused ? placeholders[0] : ''\n            }\n            readOnly={isProcessing}\n            disabled={disabled}\n            role=\"combobox\"\n            aria-expanded={hasGroups && filteredItems.length > 0}\n            aria-controls={hasGroups ? listboxId : undefined}\n            aria-activedescendant={\n              hasGroups && activeIndex >= 0 && filteredItems[activeIndex]\n                ? `command-bar-item-${instanceId}-${filteredItems[activeIndex].id}`\n                : undefined\n            }\n            aria-autocomplete={hasGroups ? 'list' : undefined}\n            aria-label={agentName ? `Ask ${agentName}` : 'AI Command Bar'}\n            className={cn(\n              'flex-1 bg-transparent text-surface-fg outline-hidden',\n              'placeholder:text-surface-fg-subtle',\n              isCompact ? 'h-9 text-ds-sm' : 'h-12 text-ds-base',\n              isProcessing && 'cursor-wait',\n              disabled && 'cursor-not-allowed opacity-50',\n            )}\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            spellCheck={false}\n          />\n        </div>\n\n        {/* Right side: spinner / clear / shortcut badge */}\n        {isProcessing ? (\n          <span data-testid=\"command-bar-spinner\" className=\"shrink-0\">\n            <Icon\n              icon={IconLoader2}\n              size={isCompact ? 'xs' : 'sm'}\n              stroke=\"light\"\n              animate=\"spin\"\n              className=\"text-accent-9\"\n            />\n          </span>\n        ) : isResponded ? (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            className=\"shrink-0 rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-colors duration-fast-01 hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n            aria-label=\"Clear\"\n            title=\"Clear\"\n          >\n            <Icon\n              icon={IconX}\n              size={isCompact ? 'xs' : 'sm'}\n              stroke=\"light\"\n            />\n          </button>\n        ) : variant === 'hero' ? (\n          <AnimatePresence>\n            {!isFocused && (\n              <motion.kbd\n                initial={noInit ?? { opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={isReduced ? undefined : { opacity: 0 }}\n                transition={tweenFade}\n                className=\"hidden shrink-0 select-none rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex\"\n              >\n                {getModifierDisplay(isMac)}J\n              </motion.kbd>\n            )}\n          </AnimatePresence>\n        ) : null}\n        </div>\n      </GradientBorderWrap>\n    )\n\n    // =====================================================================\n    // Command Results (shared between variants)\n    // =====================================================================\n    const renderCommandResults = () => {\n      if (!hasGroups) return null\n\n      const showResults =\n        filteredItems.length > 0 || (query.trim() && filteredGroups.length === 0)\n\n      if (!showResults && !query.trim()) return null\n\n      return (\n        <div\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-label=\"Command results\"\n          className=\"overflow-y-auto px-ds-03 py-ds-03\"\n          style={{ maxHeight: maxHeightValue }}\n        >\n          {filteredGroups.length === 0 && query.trim() && (\n            <motion.div\n              initial={noInit ?? { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={tweenFade}\n              className=\"flex items-center justify-center py-ds-07\"\n            >\n              {emptyState ?? (\n                <p className=\"text-ds-md text-surface-fg-subtle\">\n                  {emptyMessage}\n                </p>\n              )}\n            </motion.div>\n          )}\n\n          {filteredGroups.map((group, groupIdx) => (\n            <motion.div\n              key={group.label}\n              initial={noInit ?? { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={\n                isReduced\n                  ? noMotionTransition\n                  : { ...tweens.fade, delay: groupIdx * 0.06 }\n              }\n              className=\"mb-ds-02\"\n            >\n              <div className=\"px-ds-03 pb-ds-02 pt-ds-03\">\n                <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                  {group.label}\n                </span>\n              </div>\n\n              {group.items.map((item) => {\n                const itemIndex = itemIndexMap.get(item.id) ?? 0\n                const isActive = itemIndex === activeIndex\n                return (\n                  <motion.button\n                    key={item.id}\n                    id={`command-bar-item-${instanceId}-${item.id}`}\n                    type=\"button\"\n                    role=\"option\"\n                    aria-selected={isActive}\n                    data-command-index={itemIndex}\n                    initial={noInit ?? { opacity: 0, y: 4 }}\n                    animate={{ opacity: 1, y: 0 }}\n                    transition={\n                      isReduced\n                        ? noMotionTransition\n                        : { ...springs.snappy, delay: itemIndex * 0.03 }\n                    }\n                    onClick={() => {\n                      item.onSelect()\n                      if (variant === 'floating') setOpen(false)\n                    }}\n                    onMouseEnter={() => setActiveIndex(itemIndex)}\n                    className={cn(\n                      'flex w-full items-center gap-ds-04 rounded-ds-lg px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard',\n                      isActive\n                        ? 'bg-surface-raised-hover text-surface-fg'\n                        : 'text-surface-fg-muted hover:bg-surface-raised',\n                    )}\n                  >\n                    {item.icon && (\n                      <span\n                        className={cn(\n                          '[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0 transition-colors duration-fast-02 ease-productive-standard',\n                          isActive\n                            ? 'text-accent-11'\n                            : 'text-surface-fg-subtle',\n                        )}\n                        aria-hidden=\"true\"\n                      >\n                        {item.icon}\n                      </span>\n                    )}\n                    <div className=\"flex flex-1 flex-col\">\n                      <span className=\"text-ds-md\">\n                        {item.renderLabel\n                          ? item.renderLabel(query)\n                          : item.label}\n                      </span>\n                      {item.description && (\n                        <span className=\"text-ds-sm text-surface-fg-subtle\">\n                          {item.description}\n                        </span>\n                      )}\n                    </div>\n                    <AnimatePresence>\n                      {isActive && (\n                        <motion.span\n                          initial={isReduced ? undefined : { opacity: 0 }}\n                          animate={{ opacity: 1 }}\n                          exit={isReduced ? undefined : { opacity: 0 }}\n                          transition={tweenFade}\n                          className=\"inline-flex shrink-0\"\n                        >\n                          <Icon\n                            icon={IconCornerDownLeft}\n                            size=\"sm\"\n                            stroke=\"light\"\n                            className=\"text-surface-fg-subtle\"\n                          />\n                        </motion.span>\n                      )}\n                    </AnimatePresence>\n                  </motion.button>\n                )\n              })}\n            </motion.div>\n          ))}\n        </div>\n      )\n    }\n\n    // =====================================================================\n    // Hero Variant\n    // =====================================================================\n    if (variant === 'hero') {\n      return (\n        <div\n          ref={ref}\n          role=\"search\"\n          className={cn(\n            'bg-surface-raised rounded-ds-xl shadow-raised p-ds-07',\n            className,\n          )}\n          {...props}\n        >\n          {greeting && (\n            <p className=\"text-ds-lg text-surface-fg-muted mb-ds-04\">\n              {greeting}\n            </p>\n          )}\n\n          {renderInputRow()}\n          {renderCommandResults()}\n\n          {/* Hints */}\n          {hints && hints.length > 0 && (\n            <div className=\"mt-ds-04 flex flex-wrap gap-ds-02b\">\n              {hints.map((hint) => (\n                <button\n                  key={hint}\n                  type=\"button\"\n                  onClick={() => {\n                    setQuery(hint)\n                    onSearch?.(hint)\n                    inputRef.current?.focus()\n                  }}\n                  className=\"rounded-ds-md border border-surface-border-strong bg-surface-overlay px-ds-03 py-ds-01 text-ds-sm text-surface-fg-subtle transition-colors duration-fast-02 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted\"\n                >\n                  {hint}\n                </button>\n              ))}\n            </div>\n          )}\n\n          {/* Response area (children) */}\n          {children && <div className=\"mt-ds-05\">{children}</div>}\n        </div>\n      )\n    }\n\n    // =====================================================================\n    // Inline Variant\n    // =====================================================================\n    if (variant === 'inline') {\n      return (\n        <div\n          ref={ref}\n          role=\"search\"\n          className={cn('w-full', className)}\n          {...props}\n        >\n          {renderInputRow()}\n          {renderCommandResults()}\n          {children && <div className=\"mt-ds-03\">{children}</div>}\n        </div>\n      )\n    }\n\n    // =====================================================================\n    // Floating Variant\n    // =====================================================================\n    const handleDialogOpenChange = (nextOpen: boolean) => {\n      setOpen(nextOpen)\n    }\n\n    return (\n      <Dialog open={open} onOpenChange={handleDialogOpenChange}>\n        <DialogPortal>\n          <DialogOverlay className=\"fixed inset-0 z-overlay bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\" />\n          <DialogContentRaw\n            ref={ref}\n            {...props}\n            className={cn(\n              'fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2',\n              'overflow-hidden rounded-ds-xl border border-surface-border-strong bg-surface-overlay shadow-overlay',\n              'duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n              'data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2',\n              'data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2',\n              className,\n            )}\n          >\n            <VisuallyHidden>\n              <DialogTitle>AI Command Bar</DialogTitle>\n              <DialogDescription>\n                Search commands or ask a question\n              </DialogDescription>\n            </VisuallyHidden>\n\n            <div className=\"p-ds-04\">{renderInputRow()}</div>\n\n            {renderCommandResults()}\n\n            {children && (\n              <div className=\"border-t border-surface-border-strong p-ds-04\">\n                {children}\n              </div>\n            )}\n\n            {/* Footer hints */}\n            <motion.div\n              initial={noInit ?? { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={tweenFade}\n              className=\"flex items-center gap-ds-05 border-t border-surface-border-strong px-ds-05 py-ds-03\"\n            >\n              {hasGroups && (\n                <div className=\"flex items-center gap-ds-02b\">\n                  <div className=\"flex items-center gap-ds-01\">\n                    <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                      <Icon icon={IconArrowUp} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                    </kbd>\n                    <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                      <Icon icon={IconArrowDown} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                    </kbd>\n                  </div>\n                  <span className=\"text-ds-xs text-surface-fg-subtle\">\n                    Navigate\n                  </span>\n                </div>\n              )}\n              <div className=\"flex items-center gap-ds-02b\">\n                <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b shadow-kbd\">\n                  <Icon icon={IconCornerDownLeft} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                </kbd>\n                <span className=\"text-ds-xs text-surface-fg-subtle\">\n                  Submit\n                </span>\n              </div>\n              <div className=\"flex items-center gap-ds-02b\">\n                <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-kbd\">\n                  Esc\n                </kbd>\n                <span className=\"text-ds-xs text-surface-fg-subtle\">\n                  Close\n                </span>\n              </div>\n            </motion.div>\n          </DialogContentRaw>\n        </DialogPortal>\n      </Dialog>\n    )\n  },\n)\n\nCommandBar.displayName = 'CommandBar'\n\nexport { CommandBar }\nexport type { CommandGroup, CommandItem }\n"],"mappings":";;;;;;;;;;;;;AAqDA,SAAS,GAAmB,EAC1B,WACA,YACA,kBACA,eAMC;AAWD,QAVK,IAED,IAEA,kBAAC,OAAD;EAAK,WAAW,EAAG,yBAAyB,EAAQ;EACjD;EACG,CAAA,GAKR,kBAAC,EAAO,KAAR;EACE,WAAW,EAAG,sBAAsB,EAAQ;EAC5C,OAAO;GACL,YAAY;GACZ,gBAAgB;GACjB;EACD,SAAS,EAGP,oBAAoB;GAAC;GAAS;GAAa;GAAQ,EACpD;EACD,YAAY,EACV,oBAAoB;GAClB,UAAU;GACV,QAAQ;GACR,MAAM;GACP,EACF;YAjBH,CAoBE,kBAAC,EAAO,KAAR;GACE,WAAW,EAAG,0BAA0B,EAAQ;GAChD,OAAO;IACL,YAAY;IACZ,gBAAgB;IAChB,QAAQ;IACT;GACD,SAAS;IACP,SAAS;KAAC;KAAK;KAAK;KAAI;IACxB,oBAAoB;KAAC;KAAS;KAAa;KAAQ;IACpD;GACD,YAAY;IACV,SAAS;KAAE,UAAU;KAAG,QAAQ;KAAU,MAAM;KAAa;IAC7D,oBAAoB;KAAE,UAAU;KAAG,QAAQ;KAAU,MAAM;KAAU;IACtE;GACD,CAAA,EACD,EACU;MAhDK,kBAAA,GAAA,EAAG,aAAY,CAAA;;AAiHrC,SAAS,GAAe,GAA2B;AAGjD,QAFI,EAAK,cAAoB,EAAK,cAC9B,OAAO,EAAK,SAAU,WAAiB,EAAK,QACzC;;AAGT,SAAS,GAAqB,GAA2B;AAEvD,QADI,OAAO,EAAK,eAAgB,WAAiB,EAAK,cAC/C;;AAOT,SAAS,GAAoB,EAC3B,iBACA,aACA,aAKC;CACD,IAAM,CAAC,GAAc,KAAmB,EAAM,SAAS,EAAE,EACnD,EAAE,qBAAkB,IAAW;AAkBrC,QAhBA,EAAM,gBAAgB;AACpB,MAAI,KAAU,EAAa,UAAU,EAAG;EACxC,IAAM,IAAQ,kBAAkB;AAC9B,MAAiB,OAAU,IAAO,KAAK,EAAa,OAAO;KAC1D,EAAS;AACZ,eAAa,cAAc,EAAM;IAChC;EAAC;EAAQ,EAAa;EAAQ;EAAS,CAAC,EAEvC,IAEA,kBAAC,QAAD;EAAM,WAAU;YACb,EAAa;EACT,CAAA,GAKT,kBAAC,GAAD;EAAiB,MAAK;YACpB,kBAAC,EAAO,MAAR;GAEE,SAAS;IAAE,SAAS;IAAG,GAAG;IAAI;GAC9B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAG;GAC1B,YAAY,EAAO;GACnB,WAAU;aAET,EAAa;GACF,EARP,EAAa,GAQN;EACE,CAAA;;AAQtB,IAAM,IAAa,EAAM,WACvB,SACE,EACE,aACA,WAAQ,QACR,YAAS,EAAE,EACX,cACA,mBAAe,qBACf,gBACA,aAAU,QACV,iBAAc,mBACd,0BAAsB,KACtB,aACA,UACA,cACA,eACA,MAAM,GACN,iBACA,iBACA,gBAAa,SACb,cAAW,IACX,eAAY,SACZ,aACA,cACA,GAAG,KAEL,GACA;CAEA,IAAM,IAAe,MAAa,KAAA,GAC5B,CAAC,IAAc,MAAmB,EAAM,SAAS,MAAe,GAAM,EACtE,IAAO,IAAe,IAAW,IAEjC,IAAU,EAAM,OAAO,EAAK;AAClC,GAAQ,UAAU;CAElB,IAAM,IAAU,EAAM,aACnB,MAAqD;EACpD,IAAM,IACJ,OAAO,KAAa,aAAa,EAAS,EAAQ,QAAQ,GAAG;AAI/D,EAHK,KACH,GAAgB,EAAS,EAE3B,IAAe,EAAS;IAE1B,CAAC,GAAc,EAAa,CAC7B,EAGK,CAAC,GAAO,KAAY,EAAM,SAAS,GAAG,EACtC,CAAC,GAAa,KAAkB,EAAM,SAAS,GAAG,EAClD,CAAC,IAAW,MAAgB,EAAM,SAAS,GAAG,EAC9C,CAAC,GAAW,MAAgB,EAAM,SAAS,GAAM,EACjD,CAAC,GAAO,MAAY,EAAM,SAAS,GAAM,EACzC,IAAW,EAAM,OAAyB,KAAK,EAC/C,KAAU,EAAM,OAAuB,KAAK,EAC5C,IAAa,EAAM,OAAO,EAC1B,KAAY,uBAAuB,KAGnC,EAAE,eAAe,MAAc,IAAW,EAC1C,IAAqB,EAAE,UAAU,GAAG,EAGpC,KAAQ,EAAM,cAAc,IAAU,EAAE,EAAE,CAAC,EAG3C,IAAe,EAAM,cAClB,MAAM,QAAQ,EAAY,GAAG,IAAc,CAAC,EAAY,EAC/D,CAAC,EAAY,CACd,EAGK,IAAY,EAAO,SAAS,GAG5B,IAAiB,EAAM,cAAc;AACzC,MAAI,CAAC,EAAW,QAAO,EAAE;AACzB,MAAI,CAAC,EAAM,MAAM,CAAE,QAAO;EAC1B,IAAM,IAAI,EAAM,aAAa;AAC7B,SAAO,EACJ,KAAK,OAAW;GACf,GAAG;GACH,OAAO,EAAM,MAAM,QAChB,MACC,GAAe,EAAK,CAAC,aAAa,CAAC,SAAS,EAAE,IAC9C,GAAqB,EAAK,CAAC,aAAa,CAAC,SAAS,EAAE,CACvD;GACF,EAAE,CACF,QAAQ,MAAU,EAAM,MAAM,SAAS,EAAE;IAC3C;EAAC;EAAQ;EAAO;EAAU,CAAC,EAExB,IAAgB,EAAM,cACpB,EAAe,SAAS,MAAM,EAAE,MAAM,EAC5C,CAAC,EAAe,CACjB,EAGK,KAAe,EAAM,cAAc;EACvC,IAAM,oBAAM,IAAI,KAAqB,EACjC,IAAM;AACV,OAAK,IAAM,KAAS,EAClB,MAAK,IAAM,KAAQ,EAAM,MACvB,GAAI,IAAI,EAAK,IAAI,IAAM;AAG3B,SAAO;IACN,CAAC,EAAe,CAAC,EAGd,KACJ,OAAO,KAAc,WAAW,GAAG,EAAU,MAAM;AAiCrD,CA9BA,EAAM,gBAAgB;AACpB,MAAI,MAAY,cAAc,MAAe,GAAO;EAEpD,IAAM,IAAW,MAAM,QAAQ,EAAW,GAAG,IAAa,CAAC,EAAW;EAEtE,SAAS,EAAc,GAAkB;AACvC,QAAK,IAAM,KAAW,EACpB,KAAI,GAAkB,GAAG,EAAQ,EAAE;AAEjC,IADA,EAAE,gBAAgB,EAClB,GAAS,MAAS,CAAC,EAAK;AACxB;;;AAKN,SADA,SAAS,iBAAiB,WAAW,EAAc,QACtC,SAAS,oBAAoB,WAAW,EAAc;IAClE;EAAC;EAAS;EAAY;EAAQ,CAAC,EAGlC,EAAM,gBAAgB;AACpB,EAAI,MAAY,cAAc,MAC5B,EAAS,GAAG,EACZ,EAAe,GAAG,EAClB,4BAA4B;AAC1B,KAAS,SAAS,OAAO;IACzB;IAEH,CAAC,GAAS,EAAK,CAAC,EAGnB,EAAM,gBAAgB;AAChB,MAAc,MACD,GAAQ,SAAS,cAChC,wBAAwB,EAAY,IACrC,GACS,eAAe,EAAE,OAAO,WAAW,CAAC;IAC7C,CAAC,EAAY,CAAC;CAGjB,IAAM,MAAqB,MAAkB;AAG3C,EAFA,EAAS,EAAM,EACf,EAAe,KAAa,EAAM,MAAM,GAAG,IAAI,GAAG,EAClD,KAAW,EAAM;IAIb,KAAe,EAAM,kBAAkB;AACvC,GAAC,EAAM,MAAM,IAAI,MACrB,GAAa,EAAM,EACnB,IAAW,EAAM;IAChB;EAAC;EAAO;EAAU;EAAS,CAAC,EAGzB,MAAiB,MAA2B;AAChD,UAAQ,EAAE,KAAV;GACE,KAAK;AACH,QAAI,CAAC,KAAa,EAAc,WAAW,EAAG;AAE9C,IADA,EAAE,gBAAgB,EAClB,GAAgB,MACd,IAAO,EAAc,SAAS,IAAI,IAAO,IAAI,EAC9C;AACD;GAEF,KAAK;AACH,IAAI,KAAa,EAAc,SAAS,KACtC,EAAE,gBAAgB,EAClB,GAAgB,MACd,IAAO,IAAI,IAAO,IAAI,EAAc,SAAS,EAC9C,IACQ,CAAC,KAAa,CAAC,KAAS,OAEjC,EAAE,gBAAgB,EAClB,EAAS,GAAU;AAErB;GAEF,KAAK;AAIH,IAHA,EAAE,gBAAgB,EACC,EAAE,WAAW,EAAE,UAIhC,IAAc,GAEd,KACA,KAAe,KACf,EAAc,MAGd,EAAc,GAAa,UAAU,EACjC,MAAY,cAAY,EAAQ,GAAM,IAG1C,IAAc;AAEhB;GAEF,KAAK;AAEH,IADA,EAAE,gBAAgB,EACd,MAAU,cACZ,EAAS,GAAG,GACH,MAAY,aACrB,EAAQ,GAAM,GAEd,EAAS,SAAS,MAAM;AAE1B;;IAMA,WAAoB;AAGxB,EAFA,EAAS,GAAG,EACZ,EAAe,GAAG,EAClB,EAAS,SAAS,OAAO;;AAYN,CARrB,EAAM,gBAAgB;AACpB,MAAI,GAAO;GACT,IAAM,IAAQ,iBAAiB,GAAS,GAAM,EAAE,IAAI;AACpD,gBAAa,aAAa,EAAM;;IAEjC,CAAC,EAAM,CAAC,EAGU,KAAiC,EAAQ;CAC9D,IAAM,IAAY,IAAY,IAAqB,EAAO,MACpD,IAAS,IAAY;EAAE,SAAS;EAAG,OAAO;EAAG,GAAG;EAAG,GAAG,KAAA,GAKtD,IAAY,MAAY,UACxB,IAAe,MAAU,cACzB,KAAc,MAAU,aAExB,UACJ,kBAAC,IAAD;EACE,QAAQ;EACR,SAAS,IAAY,kBAAkB;EACvC,eAAe;YAEf,kBAAC,OAAD;GACE,WAAW,EACT,uIACA,IACI,2BACA,0BACJ,IACI,uBACA,gCACJ,KAAa,CAAC,KAAgB,+BAC9B,KAAS,gBACV;aAXH;IAcA,kBAAC,GAAD;KACE,MAAM;KACN,MAAM,IAAY,OAAO;KACzB,QAAO;KACP,WAAW,EACT,wEACA,IAAY,kBAAkB,yBAC/B;KACD,CAAA;IAGF,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,CAAC,KAAS,CAAC,KAAa,EAAa,SAAS,KAC7C,kBAAC,IAAD;MACgB;MACd,UAAU;MACV,QAAQ,KAAa,CAAC,CAAC;MACvB,CAAA,EAEJ,kBAAC,SAAD;MACE,KAAK;MACL,OAAO;MACP,WAAW,MAAM,GAAkB,EAAE,OAAO,MAAM;MAClD,eAAe,GAAa,GAAK;MACjC,cAAc,GAAa,GAAM;MACjC,WAAW;MACX,aACE,EAAa,WAAW,KAAK,IAAY,EAAa,KAAK;MAE7D,UAAU;MACA;MACV,MAAK;MACL,iBAAe,KAAa,EAAc,SAAS;MACnD,iBAAe,IAAY,KAAY,KAAA;MACvC,yBACE,KAAa,KAAe,KAAK,EAAc,KAC3C,oBAAoB,EAAW,GAAG,EAAc,GAAa,OAC7D,KAAA;MAEN,qBAAmB,IAAY,SAAS,KAAA;MACxC,cAAY,IAAY,OAAO,MAAc;MAC7C,WAAW,EACT,wDACA,sCACA,IAAY,mBAAmB,qBAC/B,KAAgB,eAChB,KAAY,gCACb;MACD,cAAa;MACb,aAAY;MACZ,YAAY;MACZ,CAAA,CACE;;IAGL,IACC,kBAAC,QAAD;KAAM,eAAY;KAAsB,WAAU;eAChD,kBAAC,GAAD;MACE,MAAM;MACN,MAAM,IAAY,OAAO;MACzB,QAAO;MACP,SAAQ;MACR,WAAU;MACV,CAAA;KACG,CAAA,GACL,KACF,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAW;KACX,OAAM;eAEN,kBAAC,GAAD;MACE,MAAM;MACN,MAAM,IAAY,OAAO;MACzB,QAAO;MACP,CAAA;KACK,CAAA,GACP,MAAY,SACd,kBAAC,GAAD,EAAA,UACG,CAAC,KACA,kBAAC,EAAO,KAAR;KACE,SAAS,KAAU,EAAE,SAAS,GAAG;KACjC,SAAS,EAAE,SAAS,GAAG;KACvB,MAAM,IAAY,KAAA,IAAY,EAAE,SAAS,GAAG;KAC5C,YAAY;KACZ,WAAU;eALZ,CAOG,GAAmB,GAAM,EAAC,IAChB;QAEC,CAAA,GAChB;IACE;;EACa,CAAA,EAMjB,UACA,CAAC,KAKD,EAFF,EAAc,SAAS,KAAM,EAAM,MAAM,IAAI,EAAe,WAAW,MAErD,CAAC,EAAM,MAAM,GAAS,OAGxC,kBAAC,OAAD;EACE,KAAK;EACL,IAAI;EACJ,MAAK;EACL,cAAW;EACX,WAAU;EACV,OAAO,EAAE,WAAW,IAAgB;YANtC,CAQG,EAAe,WAAW,KAAK,EAAM,MAAM,IAC1C,kBAAC,EAAO,KAAR;GACE,SAAS,KAAU,EAAE,SAAS,GAAG;GACjC,SAAS,EAAE,SAAS,GAAG;GACvB,YAAY;GACZ,WAAU;aAET,MACC,kBAAC,KAAD;IAAG,WAAU;cACV;IACC,CAAA;GAEK,CAAA,EAGd,EAAe,KAAK,GAAO,MAC1B,kBAAC,EAAO,KAAR;GAEE,SAAS,KAAU,EAAE,SAAS,GAAG;GACjC,SAAS,EAAE,SAAS,GAAG;GACvB,YACE,IACI,IACA;IAAE,GAAG,EAAO;IAAM,OAAO,IAAW;IAAM;GAEhD,WAAU;aATZ,CAWE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,QAAD;KAAM,WAAU;eACb,EAAM;KACF,CAAA;IACH,CAAA,EAEL,EAAM,MAAM,KAAK,MAAS;IACzB,IAAM,IAAY,GAAa,IAAI,EAAK,GAAG,IAAI,GACzC,IAAW,MAAc;AAC/B,WACE,kBAAC,EAAO,QAAR;KAEE,IAAI,oBAAoB,EAAW,GAAG,EAAK;KAC3C,MAAK;KACL,MAAK;KACL,iBAAe;KACf,sBAAoB;KACpB,SAAS,KAAU;MAAE,SAAS;MAAG,GAAG;MAAG;KACvC,SAAS;MAAE,SAAS;MAAG,GAAG;MAAG;KAC7B,YACE,IACI,IACA;MAAE,GAAG,EAAQ;MAAQ,OAAO,IAAY;MAAM;KAEpD,eAAe;AAEb,MADA,EAAK,UAAU,EACX,MAAY,cAAY,EAAQ,GAAM;;KAE5C,oBAAoB,EAAe,EAAU;KAC7C,WAAW,EACT,8JACA,IACI,4CACA,gDACL;eAxBH;MA0BG,EAAK,QACJ,kBAAC,QAAD;OACE,WAAW,EACT,0GACA,IACI,mBACA,yBACL;OACD,eAAY;iBAEX,EAAK;OACD,CAAA;MAET,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAK,cACF,EAAK,YAAY,EAAM,GACvB,EAAK;QACJ,CAAA,EACN,EAAK,eACJ,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAK;QACD,CAAA,CAEL;;MACN,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;OACE,SAAS,IAAY,KAAA,IAAY,EAAE,SAAS,GAAG;OAC/C,SAAS,EAAE,SAAS,GAAG;OACvB,MAAM,IAAY,KAAA,IAAY,EAAE,SAAS,GAAG;OAC5C,YAAY;OACZ,WAAU;iBAEV,kBAAC,GAAD;QACE,MAAM;QACN,MAAK;QACL,QAAO;QACP,WAAU;QACV,CAAA;OACU,CAAA,EAEA,CAAA;MACJ;OApET,EAAK,GAoEI;KAElB,CACS;KA5FN,EAAM,MA4FA,CACb,CACE;;AA8EV,QAvEI,MAAY,SAEZ,kBAAC,OAAD;EACO;EACL,MAAK;EACL,WAAW,EACT,yDACA,EACD;EACD,GAAI;YAPN;GASG,KACC,kBAAC,KAAD;IAAG,WAAU;cACV;IACC,CAAA;GAGL,GAAgB;GAChB,GAAsB;GAGtB,KAAS,EAAM,SAAS,KACvB,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM,KAAK,MACV,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe;AAGb,MAFA,EAAS,EAAK,EACd,KAAW,EAAK,EAChB,EAAS,SAAS,OAAO;;KAE3B,WAAU;eAET;KACM,EAVF,EAUE,CACT;IACE,CAAA;GAIP,KAAY,kBAAC,OAAD;IAAK,WAAU;IAAY;IAAe,CAAA;GACnD;MAON,MAAY,WAEZ,kBAAC,OAAD;EACO;EACL,MAAK;EACL,WAAW,EAAG,UAAU,EAAU;EAClC,GAAI;YAJN;GAMG,GAAgB;GAChB,GAAsB;GACtB,KAAY,kBAAC,OAAD;IAAK,WAAU;IAAY;IAAe,CAAA;GACnD;MAYR,kBAAC,GAAD;EAAc;EAAM,eALU,MAAsB;AACpD,KAAQ,EAAS;;YAKf,kBAAC,IAAD,EAAA,UAAA,CACE,kBAAC,IAAD,EAAe,WAAU,8JAA+J,CAAA,EACxL,kBAAC,GAAD;GACO;GACL,GAAI;GACJ,WAAW,EACT,0EACA,uGACA,qFACA,8DACA,gEACA,sFACA,gFACA,EACD;aAZH;IAcE,kBAAC,IAAD,EAAA,UAAA,CACE,kBAAC,IAAD,EAAA,UAAa,kBAA4B,CAAA,EACzC,kBAAC,GAAD,EAAA,UAAmB,qCAEC,CAAA,CACL,EAAA,CAAA;IAEjB,kBAAC,OAAD;KAAK,WAAU;eAAW,GAAgB;KAAO,CAAA;IAEhD,GAAsB;IAEtB,KACC,kBAAC,OAAD;KAAK,WAAU;KACZ;KACG,CAAA;IAIR,kBAAC,EAAO,KAAR;KACE,SAAS,KAAU,EAAE,SAAS,GAAG;KACjC,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;KACZ,WAAU;eAJZ;MAMG,KACC,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,GAAD;UAAM,MAAM;UAAa,MAAK;UAAK,WAAU;UAA2B,CAAA;SACpE,CAAA,EACN,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,GAAD;UAAM,MAAM;UAAe,MAAK;UAAK,WAAU;UAA2B,CAAA;SACtE,CAAA,CACF;WACN,kBAAC,QAAD;QAAM,WAAU;kBAAoC;QAE7C,CAAA,CACH;;MAER,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD;SAAM,MAAM;SAAoB,MAAK;SAAK,WAAU;SAA2B,CAAA;QAC3E,CAAA,EACN,kBAAC,QAAD;QAAM,WAAU;kBAAoC;QAE7C,CAAA,CACH;;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAA0L;QAEnM,CAAA,EACN,kBAAC,QAAD;QAAM,WAAU;kBAAoC;QAE7C,CAAA,CACH;;MACK;;IACI;KACN,EAAA,CAAA;EACR,CAAA;EAGd;AAED,EAAW,cAAc"}
+{"version":3,"file":"command-bar.js","names":[],"sources":["../../src/ai/command-bar.tsx"],"sourcesContent":["'use client'\n\n/**\n * CommandBar -- Unified AI command interface.\n *\n * Three variants:\n * - hero:     Full-featured inline bar with greeting, hints, placeholder rotation\n * - inline:   Compact inline bar for embedding in panels/toolbars\n * - floating:  Modal overlay (same pattern as CommandPalette) with global keybinding\n *\n * Supports both command-palette filtering (when `groups` provided) and\n * AI natural-language submission via `onSubmit`.\n */\nimport {\n  IconArrowDown,\n  IconArrowUp,\n  IconCornerDownLeft,\n  IconLoader2,\n  IconSearch,\n  IconX,\n} from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport type { CommandGroup, CommandItem } from '../composed/command-palette'\nimport { useMotion } from '../motion/motion-provider'\nimport {\n  Dialog,\n  DialogContentRaw,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n} from '../ui/dialog'\nimport { Icon } from '../ui/icon'\nimport { getIsMac, getModifierDisplay,matchesKeybinding } from '../ui/lib/keybinding'\nimport { springs,tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { VisuallyHidden } from '../ui/visually-hidden'\n\n// -----------------------------------------------------------------------\n// GradientBorderWrap — animated gradient border during processing\n// -----------------------------------------------------------------------\n\n/**\n * Wraps the input row with an animated gradient border during processing.\n * Uses the Devalok brand palette (pink → purple → magenta) flowing around\n * the border. When inactive, renders children directly with no wrapper overhead.\n *\n * Technique: outer div with gradient background + padding-[1.5px] creates\n * a visible gradient border. The inner content covers the center, leaving\n * only the edge visible as a \"border\".\n */\nfunction GradientBorderWrap({\n  active,\n  rounded,\n  reducedMotion,\n  children,\n}: {\n  active: boolean\n  rounded: string\n  reducedMotion: boolean\n  children: React.ReactNode\n}) {\n  if (!active) return <>{children}</>\n\n  if (reducedMotion) {\n    return (\n      <div className={cn('p-[1.5px] bg-accent-9', rounded)}>\n        {children}\n      </div>\n    )\n  }\n\n  return (\n    <motion.div\n      className={cn('relative p-[1.5px]', rounded)}\n      style={{\n        background: 'linear-gradient(var(--gradient-angle, 0deg), #D33163, #9B5DE5, #C850C0, #D33163)',\n        backgroundSize: '300% 300%',\n      }}\n      animate={{\n        // Rotate the gradient angle — creates the flowing border effect\n        // Using CSS custom property animation via backgroundPosition as proxy\n        backgroundPosition: ['0% 0%', '100% 100%', '0% 0%'],\n      }}\n      transition={{\n        backgroundPosition: {\n          duration: 4,\n          repeat: Infinity,\n          ease: 'linear',\n        },\n      }}\n    >\n      {/* Subtle outer glow */}\n      <motion.div\n        className={cn('absolute inset-0 -z-10', rounded)}\n        style={{\n          background: 'linear-gradient(var(--gradient-angle, 0deg), #D33163, #9B5DE5, #C850C0, #D33163)',\n          backgroundSize: '300% 300%',\n          filter: 'blur(8px)',\n        }}\n        animate={{\n          opacity: [0.3, 0.5, 0.3],\n          backgroundPosition: ['0% 0%', '100% 100%', '0% 0%'],\n        }}\n        transition={{\n          opacity: { duration: 3, repeat: Infinity, ease: 'easeInOut' },\n          backgroundPosition: { duration: 4, repeat: Infinity, ease: 'linear' },\n        }}\n      />\n      {children}\n    </motion.div>\n  )\n}\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\n/**\n * Unified AI command interface with three visual variants:\n * - `hero`: full-featured inline bar with greeting, animated placeholder rotation, and hints\n * - `inline`: compact bar for embedding in panels or toolbars\n * - `floating`: modal overlay with global keybinding (same pattern as CommandPalette)\n *\n * Supports both command-palette filtering (when `groups` provided) and\n * natural-language AI submission via `onSubmit`.\n */\nexport interface CommandBarProps\n  extends Omit<React.ComponentPropsWithRef<'div'>, 'onSubmit'> {\n  // -- AI submission --\n  /** Called when the user submits a query (Enter key). */\n  onSubmit?: (query: string) => void\n  /** Current interaction state. Controls visual feedback (gradient border, placeholder). */\n  state?: 'idle' | 'typing' | 'processing' | 'responded'\n\n  // -- Command palette mode (optional) --\n  /** When provided, enables command-palette filtering alongside AI submission. */\n  groups?: CommandGroup[]\n  onSearch?: (query: string) => void\n  emptyMessage?: string\n  emptyState?: React.ReactNode\n\n  // -- Visual --\n  /** Layout variant. @default 'hero' */\n  variant?: 'hero' | 'inline' | 'floating'\n  /** Placeholder text, or an array of strings that rotate on an interval. */\n  placeholder?: string | string[]\n  /** Rotation interval in ms when `placeholder` is an array. @default 4000 */\n  placeholderInterval?: number\n  /** Greeting text shown above the input in `hero` variant. */\n  greeting?: string\n  /** Hint strings shown below the input in `hero` variant. */\n  hints?: string[]\n  agentName?: string\n  agentIcon?: React.ReactNode\n\n  // -- Floating variant (modal) --\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Keybinding to toggle the floating bar. @default 'mod+k' */\n  keybinding?: string | string[] | false\n\n  // -- Interaction --\n  disabled?: boolean\n  maxHeight?: string | number\n\n  // -- Composition --\n  children?: React.ReactNode\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\nfunction getFilterValue(item: CommandItem): string {\n  if (item.filterValue) return item.filterValue\n  if (typeof item.label === 'string') return item.label\n  return ''\n}\n\nfunction getFilterDescription(item: CommandItem): string {\n  if (typeof item.description === 'string') return item.description\n  return ''\n}\n\n// -----------------------------------------------------------------------\n// Rotating Placeholder\n// -----------------------------------------------------------------------\n\nfunction RotatingPlaceholder({\n  placeholders,\n  interval,\n  paused,\n}: {\n  placeholders: string[]\n  interval: number\n  paused: boolean\n}) {\n  const [currentIndex, setCurrentIndex] = React.useState(0)\n  const { reducedMotion } = useMotion()\n\n  React.useEffect(() => {\n    if (paused || placeholders.length <= 1) return\n    const timer = setInterval(() => {\n      setCurrentIndex((prev) => (prev + 1) % placeholders.length)\n    }, interval)\n    return () => clearInterval(timer)\n  }, [paused, placeholders.length, interval])\n\n  if (reducedMotion) {\n    return (\n      <span className=\"pointer-events-none absolute text-surface-fg-subtle\">\n        {placeholders[currentIndex]}\n      </span>\n    )\n  }\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      <motion.span\n        key={placeholders[currentIndex]}\n        initial={{ opacity: 0, y: -4 }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: 4 }}\n        transition={tweens.fade}\n        className=\"pointer-events-none absolute text-surface-fg-subtle\"\n      >\n        {placeholders[currentIndex]}\n      </motion.span>\n    </AnimatePresence>\n  )\n}\n\n// -----------------------------------------------------------------------\n// CommandBar\n// -----------------------------------------------------------------------\n\nconst CommandBar = React.forwardRef<HTMLDivElement, CommandBarProps>(\n  function CommandBar(\n    {\n      onSubmit,\n      state = 'idle',\n      groups = [],\n      onSearch,\n      emptyMessage = 'No results found.',\n      emptyState,\n      variant = 'hero',\n      placeholder = 'Ask anything...',\n      placeholderInterval = 5000,\n      greeting,\n      hints,\n      agentName,\n      agentIcon,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      keybinding = 'mod+j',\n      disabled = false,\n      maxHeight = '320px',\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    // -- Controlled/uncontrolled open state (floating) --\n    const isControlled = openProp !== undefined\n    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n    const open = isControlled ? openProp : internalOpen\n\n    const openRef = React.useRef(open)\n    openRef.current = open\n\n    const setOpen = React.useCallback(\n      (nextOpen: boolean | ((prev: boolean) => boolean)) => {\n        const resolved =\n          typeof nextOpen === 'function' ? nextOpen(openRef.current) : nextOpen\n        if (!isControlled) {\n          setInternalOpen(resolved)\n        }\n        onOpenChange?.(resolved)\n      },\n      [isControlled, onOpenChange],\n    )\n\n    // -- Core state --\n    const [query, setQuery] = React.useState('')\n    const [activeIndex, setActiveIndex] = React.useState(-1)\n    const [lastQuery, setLastQuery] = React.useState('')\n    const [isFocused, setIsFocused] = React.useState(false)\n    const [shake, setShake] = React.useState(false)\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLDivElement>(null)\n    const instanceId = React.useId()\n    const listboxId = `command-bar-listbox-${instanceId}`\n\n    // -- Motion --\n    const { reducedMotion: isReduced } = useMotion()\n    const noMotionTransition = { duration: 0 }\n\n    // -- Platform detection --\n    const isMac = React.useMemo(() => getIsMac(), [])\n\n    // -- Placeholders --\n    const placeholders = React.useMemo(\n      () => (Array.isArray(placeholder) ? placeholder : [placeholder]),\n      [placeholder],\n    )\n\n    // -- Has groups --\n    const hasGroups = groups.length > 0\n\n    // -- Filter groups --\n    const filteredGroups = React.useMemo(() => {\n      if (!hasGroups) return []\n      if (!query.trim()) return groups\n      const q = query.toLowerCase()\n      return groups\n        .map((group) => ({\n          ...group,\n          items: group.items.filter(\n            (item) =>\n              getFilterValue(item).toLowerCase().includes(q) ||\n              getFilterDescription(item).toLowerCase().includes(q),\n          ),\n        }))\n        .filter((group) => group.items.length > 0)\n    }, [groups, query, hasGroups])\n\n    const filteredItems = React.useMemo(\n      () => filteredGroups.flatMap((g) => g.items),\n      [filteredGroups],\n    )\n\n    // Build item index map for keyboard navigation\n    const itemIndexMap = React.useMemo(() => {\n      const map = new Map<string, number>()\n      let idx = 0\n      for (const group of filteredGroups) {\n        for (const item of group.items) {\n          map.set(item.id, idx++)\n        }\n      }\n      return map\n    }, [filteredGroups])\n\n    // -- Max height CSS --\n    const maxHeightValue =\n      typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n\n    // -- Global keybinding (floating variant) --\n    React.useEffect(() => {\n      if (variant !== 'floating' || keybinding === false) return\n\n      const bindings = Array.isArray(keybinding) ? keybinding : [keybinding]\n\n      function handleKeyDown(e: KeyboardEvent) {\n        for (const binding of bindings) {\n          if (matchesKeybinding(e, binding)) {\n            e.preventDefault()\n            setOpen((prev) => !prev)\n            return\n          }\n        }\n      }\n      document.addEventListener('keydown', handleKeyDown)\n      return () => document.removeEventListener('keydown', handleKeyDown)\n    }, [variant, keybinding, setOpen])\n\n    // -- Reset on floating open --\n    React.useEffect(() => {\n      if (variant === 'floating' && open) {\n        setQuery('')\n        setActiveIndex(-1)\n        requestAnimationFrame(() => {\n          inputRef.current?.focus()\n        })\n      }\n    }, [variant, open])\n\n    // -- Scroll active item into view --\n    React.useEffect(() => {\n      if (activeIndex < 0) return\n      const activeEl = listRef.current?.querySelector(\n        `[data-command-index=\"${activeIndex}\"]`,\n      )\n      activeEl?.scrollIntoView({ block: 'nearest' })\n    }, [activeIndex])\n\n    // -- Query change handler --\n    const handleQueryChange = (value: string) => {\n      setQuery(value)\n      setActiveIndex(hasGroups && value.trim() ? 0 : -1)\n      onSearch?.(value)\n    }\n\n    // -- Submit handler --\n    const handleSubmit = React.useCallback(() => {\n      if (!query.trim() || disabled) return\n      setLastQuery(query)\n      onSubmit?.(query)\n    }, [query, disabled, onSubmit])\n\n    // -- Keyboard handler --\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      switch (e.key) {\n        case 'ArrowDown': {\n          if (!hasGroups || filteredItems.length === 0) return\n          e.preventDefault()\n          setActiveIndex((prev) =>\n            prev < filteredItems.length - 1 ? prev + 1 : 0,\n          )\n          break\n        }\n        case 'ArrowUp': {\n          if (hasGroups && filteredItems.length > 0) {\n            e.preventDefault()\n            setActiveIndex((prev) =>\n              prev > 0 ? prev - 1 : filteredItems.length - 1,\n            )\n          } else if (!hasGroups && !query && lastQuery) {\n            // Recall last query\n            e.preventDefault()\n            setQuery(lastQuery)\n          }\n          break\n        }\n        case 'Enter': {\n          e.preventDefault()\n          const isCmdEnter = e.metaKey || e.ctrlKey\n\n          if (isCmdEnter) {\n            // Cmd+Enter always submits\n            handleSubmit()\n          } else if (\n            hasGroups &&\n            activeIndex >= 0 &&\n            filteredItems[activeIndex]\n          ) {\n            // Enter selects active command item\n            filteredItems[activeIndex].onSelect()\n            if (variant === 'floating') setOpen(false)\n          } else {\n            // Enter submits query\n            handleSubmit()\n          }\n          break\n        }\n        case 'Escape': {\n          e.preventDefault()\n          if (state === 'responded') {\n            setQuery('')\n          } else if (variant === 'floating') {\n            setOpen(false)\n          } else {\n            inputRef.current?.blur()\n          }\n          break\n        }\n      }\n    }\n\n    // -- Clear handler --\n    const handleClear = () => {\n      setQuery('')\n      setActiveIndex(-1)\n      inputRef.current?.focus()\n    }\n\n    // -- Shake animation reset --\n    React.useEffect(() => {\n      if (shake) {\n        const timer = setTimeout(() => setShake(false), 500)\n        return () => clearTimeout(timer)\n      }\n    }, [shake])\n\n    // -- Shared spring/tween for reduced motion --\n    const springSnappy = isReduced ? noMotionTransition : springs.snappy\n    const tweenFade = isReduced ? noMotionTransition : tweens.fade\n    const noInit = isReduced ? { opacity: 1, scale: 1, y: 0 } : undefined\n\n    // =====================================================================\n    // Shared Input Row\n    // =====================================================================\n    const isCompact = variant === 'inline'\n    const isProcessing = state === 'processing'\n    const isResponded = state === 'responded'\n\n    const renderInputRow = () => (\n      <GradientBorderWrap\n        active={isProcessing}\n        rounded={isCompact ? 'rounded-control' : 'rounded-surface'}\n        reducedMotion={isReduced}\n      >\n        <div\n          className={cn(\n            'flex items-center gap-ds-04 border bg-surface-overlay transition-colors transition-shadow duration-fast-02 ease-productive-standard',\n            isCompact\n              ? 'rounded-control px-ds-04'\n              : 'rounded-surface px-ds-05',\n            isProcessing\n              ? 'border-transparent'\n              : 'border-surface-border-strong',\n            isFocused && !isProcessing && 'border-accent-7 shadow-ring',\n            shake && 'animate-shake',\n          )}\n        >\n        {/* Search icon */}\n        <Icon\n          icon={IconSearch}\n          size={isCompact ? 'xs' : 'sm'}\n          stroke=\"light\"\n          className={cn(\n            'shrink-0 transition-colors duration-fast-02 ease-productive-standard',\n            isFocused ? 'text-accent-9' : 'text-surface-fg-subtle',\n          )}\n        />\n\n        {/* Input wrapper */}\n        <div className=\"relative flex flex-1 items-center\">\n          {!query && !isFocused && placeholders.length > 1 && (\n            <RotatingPlaceholder\n              placeholders={placeholders}\n              interval={placeholderInterval}\n              paused={isFocused || !!query}\n            />\n          )}\n          <input\n            ref={inputRef}\n            value={query}\n            onChange={(e) => handleQueryChange(e.target.value)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            onKeyDown={handleKeyDown}\n            placeholder={\n              placeholders.length === 1 || isFocused ? placeholders[0] : ''\n            }\n            readOnly={isProcessing}\n            disabled={disabled}\n            role=\"combobox\"\n            aria-expanded={hasGroups && filteredItems.length > 0}\n            aria-controls={hasGroups ? listboxId : undefined}\n            aria-activedescendant={\n              hasGroups && activeIndex >= 0 && filteredItems[activeIndex]\n                ? `command-bar-item-${instanceId}-${filteredItems[activeIndex].id}`\n                : undefined\n            }\n            aria-autocomplete={hasGroups ? 'list' : undefined}\n            aria-label={agentName ? `Ask ${agentName}` : 'AI Command Bar'}\n            className={cn(\n              'flex-1 bg-transparent text-surface-fg outline-hidden',\n              'placeholder:text-surface-fg-subtle',\n              isCompact ? 'h-9 text-ds-sm' : 'h-12 text-ds-base',\n              isProcessing && 'cursor-wait',\n              disabled && 'cursor-not-allowed opacity-50',\n            )}\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            spellCheck={false}\n          />\n        </div>\n\n        {/* Right side: spinner / clear / shortcut badge */}\n        {isProcessing ? (\n          <span data-testid=\"command-bar-spinner\" className=\"shrink-0\">\n            <Icon\n              icon={IconLoader2}\n              size={isCompact ? 'xs' : 'sm'}\n              stroke=\"light\"\n              animate=\"spin\"\n              className=\"text-accent-9\"\n            />\n          </span>\n        ) : isResponded ? (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            className=\"shrink-0 rounded-control-inner p-ds-01 text-surface-fg-subtle transition-colors duration-fast-01 hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n            aria-label=\"Clear\"\n            title=\"Clear\"\n          >\n            <Icon\n              icon={IconX}\n              size={isCompact ? 'xs' : 'sm'}\n              stroke=\"light\"\n            />\n          </button>\n        ) : variant === 'hero' ? (\n          <AnimatePresence>\n            {!isFocused && (\n              <motion.kbd\n                initial={noInit ?? { opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={isReduced ? undefined : { opacity: 0 }}\n                transition={tweenFade}\n                className=\"hidden shrink-0 select-none rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex\"\n              >\n                {getModifierDisplay(isMac)}J\n              </motion.kbd>\n            )}\n          </AnimatePresence>\n        ) : null}\n        </div>\n      </GradientBorderWrap>\n    )\n\n    // =====================================================================\n    // Command Results (shared between variants)\n    // =====================================================================\n    const renderCommandResults = () => {\n      if (!hasGroups) return null\n\n      const showResults =\n        filteredItems.length > 0 || (query.trim() && filteredGroups.length === 0)\n\n      if (!showResults && !query.trim()) return null\n\n      return (\n        <div\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-label=\"Command results\"\n          className=\"overflow-y-auto px-ds-03 py-ds-03\"\n          style={{ maxHeight: maxHeightValue }}\n        >\n          {filteredGroups.length === 0 && query.trim() && (\n            <motion.div\n              initial={noInit ?? { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={tweenFade}\n              className=\"flex items-center justify-center py-ds-07\"\n            >\n              {emptyState ?? (\n                <p className=\"text-ds-md text-surface-fg-subtle\">\n                  {emptyMessage}\n                </p>\n              )}\n            </motion.div>\n          )}\n\n          {filteredGroups.map((group, groupIdx) => (\n            <motion.div\n              key={group.label}\n              initial={noInit ?? { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={\n                isReduced\n                  ? noMotionTransition\n                  : { ...tweens.fade, delay: groupIdx * 0.06 }\n              }\n              className=\"mb-ds-02\"\n            >\n              <div className=\"px-ds-03 pb-ds-02 pt-ds-03\">\n                <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                  {group.label}\n                </span>\n              </div>\n\n              {group.items.map((item) => {\n                const itemIndex = itemIndexMap.get(item.id) ?? 0\n                const isActive = itemIndex === activeIndex\n                return (\n                  <motion.button\n                    key={item.id}\n                    id={`command-bar-item-${instanceId}-${item.id}`}\n                    type=\"button\"\n                    role=\"option\"\n                    aria-selected={isActive}\n                    data-command-index={itemIndex}\n                    initial={noInit ?? { opacity: 0, y: 4 }}\n                    animate={{ opacity: 1, y: 0 }}\n                    transition={\n                      isReduced\n                        ? noMotionTransition\n                        : { ...springs.snappy, delay: itemIndex * 0.03 }\n                    }\n                    onClick={() => {\n                      item.onSelect()\n                      if (variant === 'floating') setOpen(false)\n                    }}\n                    onMouseEnter={() => setActiveIndex(itemIndex)}\n                    className={cn(\n                      'flex w-full items-center gap-ds-04 rounded-surface px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard',\n                      isActive\n                        ? 'bg-surface-raised-hover text-surface-fg'\n                        : 'text-surface-fg-muted hover:bg-surface-raised',\n                    )}\n                  >\n                    {item.icon && (\n                      <span\n                        className={cn(\n                          '[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0 transition-colors duration-fast-02 ease-productive-standard',\n                          isActive\n                            ? 'text-accent-11'\n                            : 'text-surface-fg-subtle',\n                        )}\n                        aria-hidden=\"true\"\n                      >\n                        {item.icon}\n                      </span>\n                    )}\n                    <div className=\"flex flex-1 flex-col\">\n                      <span className=\"text-ds-md\">\n                        {item.renderLabel\n                          ? item.renderLabel(query)\n                          : item.label}\n                      </span>\n                      {item.description && (\n                        <span className=\"text-ds-sm text-surface-fg-subtle\">\n                          {item.description}\n                        </span>\n                      )}\n                    </div>\n                    <AnimatePresence>\n                      {isActive && (\n                        <motion.span\n                          initial={isReduced ? undefined : { opacity: 0 }}\n                          animate={{ opacity: 1 }}\n                          exit={isReduced ? undefined : { opacity: 0 }}\n                          transition={tweenFade}\n                          className=\"inline-flex shrink-0\"\n                        >\n                          <Icon\n                            icon={IconCornerDownLeft}\n                            size=\"sm\"\n                            stroke=\"light\"\n                            className=\"text-surface-fg-subtle\"\n                          />\n                        </motion.span>\n                      )}\n                    </AnimatePresence>\n                  </motion.button>\n                )\n              })}\n            </motion.div>\n          ))}\n        </div>\n      )\n    }\n\n    // =====================================================================\n    // Hero Variant\n    // =====================================================================\n    if (variant === 'hero') {\n      return (\n        <div\n          ref={ref}\n          role=\"search\"\n          className={cn(\n            'bg-surface-raised rounded-overlay-lg shadow-raised p-ds-07',\n            className,\n          )}\n          {...props}\n        >\n          {greeting && (\n            <p className=\"text-ds-lg text-surface-fg-muted mb-ds-04\">\n              {greeting}\n            </p>\n          )}\n\n          {renderInputRow()}\n          {renderCommandResults()}\n\n          {/* Hints */}\n          {hints && hints.length > 0 && (\n            <div className=\"mt-ds-04 flex flex-wrap gap-ds-02b\">\n              {hints.map((hint) => (\n                <button\n                  key={hint}\n                  type=\"button\"\n                  onClick={() => {\n                    setQuery(hint)\n                    onSearch?.(hint)\n                    inputRef.current?.focus()\n                  }}\n                  className=\"rounded-control border border-surface-border-strong bg-surface-overlay px-ds-03 py-ds-01 text-ds-sm text-surface-fg-subtle transition-colors duration-fast-02 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted\"\n                >\n                  {hint}\n                </button>\n              ))}\n            </div>\n          )}\n\n          {/* Response area (children) */}\n          {children && <div className=\"mt-ds-05\">{children}</div>}\n        </div>\n      )\n    }\n\n    // =====================================================================\n    // Inline Variant\n    // =====================================================================\n    if (variant === 'inline') {\n      return (\n        <div\n          ref={ref}\n          role=\"search\"\n          className={cn('w-full', className)}\n          {...props}\n        >\n          {renderInputRow()}\n          {renderCommandResults()}\n          {children && <div className=\"mt-ds-03\">{children}</div>}\n        </div>\n      )\n    }\n\n    // =====================================================================\n    // Floating Variant\n    // =====================================================================\n    const handleDialogOpenChange = (nextOpen: boolean) => {\n      setOpen(nextOpen)\n    }\n\n    return (\n      <Dialog open={open} onOpenChange={handleDialogOpenChange}>\n        <DialogPortal>\n          <DialogOverlay className=\"fixed inset-0 z-overlay bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\" />\n          <DialogContentRaw\n            ref={ref}\n            {...props}\n            className={cn(\n              'fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2',\n              'overflow-hidden rounded-overlay-lg border border-surface-border-strong bg-surface-overlay shadow-overlay',\n              'duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n              'data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2',\n              'data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2',\n              className,\n            )}\n          >\n            <VisuallyHidden>\n              <DialogTitle>AI Command Bar</DialogTitle>\n              <DialogDescription>\n                Search commands or ask a question\n              </DialogDescription>\n            </VisuallyHidden>\n\n            <div className=\"p-ds-04\">{renderInputRow()}</div>\n\n            {renderCommandResults()}\n\n            {children && (\n              <div className=\"border-t border-surface-border-strong p-ds-04\">\n                {children}\n              </div>\n            )}\n\n            {/* Footer hints */}\n            <motion.div\n              initial={noInit ?? { opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={tweenFade}\n              className=\"flex items-center gap-ds-05 border-t border-surface-border-strong px-ds-05 py-ds-03\"\n            >\n              {hasGroups && (\n                <div className=\"flex items-center gap-ds-02b\">\n                  <div className=\"flex items-center gap-ds-01\">\n                    <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                      <Icon icon={IconArrowUp} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                    </kbd>\n                    <kbd className=\"inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd\">\n                      <Icon icon={IconArrowDown} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                    </kbd>\n                  </div>\n                  <span className=\"text-ds-xs text-surface-fg-subtle\">\n                    Navigate\n                  </span>\n                </div>\n              )}\n              <div className=\"flex items-center gap-ds-02b\">\n                <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b shadow-kbd\">\n                  <Icon icon={IconCornerDownLeft} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                </kbd>\n                <span className=\"text-ds-xs text-surface-fg-subtle\">\n                  Submit\n                </span>\n              </div>\n              <div className=\"flex items-center gap-ds-02b\">\n                <kbd className=\"inline-flex h-[20px] items-center justify-center rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-kbd\">\n                  Esc\n                </kbd>\n                <span className=\"text-ds-xs text-surface-fg-subtle\">\n                  Close\n                </span>\n              </div>\n            </motion.div>\n          </DialogContentRaw>\n        </DialogPortal>\n      </Dialog>\n    )\n  },\n)\n\nCommandBar.displayName = 'CommandBar'\n\nexport { CommandBar }\nexport type { CommandGroup, CommandItem }\n"],"mappings":"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"}

package/dist/ai/conversation.js

@@ -57,13 +57,13 @@ function _({ name: e, icon: t }) {
 }
 function v({ message: e, reducedMotion: n }) {
 	return n ? /* @__PURE__ */ c("div", {
-		className: "bg-surface-raised rounded-ds-lg px-ds-05 py-ds-04",
+		className: "bg-surface-raised rounded-surface px-ds-05 py-ds-04",
 		children: /* @__PURE__ */ c("p", {
 			className: "text-ds-sm text-surface-fg",
 			children: e.content
 		})
 	}) : /* @__PURE__ */ c(h.div, {
-		className: "bg-surface-raised rounded-ds-lg px-ds-05 py-ds-04",
+		className: "bg-surface-raised rounded-surface px-ds-05 py-ds-04",
 		initial: {
 			opacity: 0,
 			y: 8
@@ -133,7 +133,7 @@ function b({ steps: t, agent: r, reducedMotion: i }) {
 				1,
 				2
 			].map((e) => /* @__PURE__ */ c(h.span, {
-				className: "h-1.5 w-1.5 rounded-full bg-accent-9",
+				className: "h-1.5 w-1.5 rounded-pill bg-accent-9",
 				animate: {
 					scale: [
 						1,
@@ -163,7 +163,7 @@ function x({ onClick: e }) {
 	return /* @__PURE__ */ l(h.button, {
 		role: "button",
 		"aria-label": "Scroll to latest response",
-		className: "absolute bottom-ds-04 left-1/2 -translate-x-1/2 z-10 flex items-center gap-ds-02 bg-accent-9 text-accent-fg text-ds-xs font-medium rounded-full px-ds-04 py-ds-02 shadow-floating",
+		className: "absolute bottom-ds-04 left-1/2 -translate-x-1/2 z-10 flex items-center gap-ds-02 bg-accent-9 text-accent-fg text-ds-xs font-medium rounded-pill px-ds-04 py-ds-02 shadow-floating",
 		initial: {
 			opacity: 0,
 			y: 8

package/dist/ai/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","names":[],"sources":["../../src/ai/conversation.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconCircle,\n  IconCircleCheck,\n  IconCircleX,\n  IconLoader2,\n} from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useMotion } from '../motion/motion-provider'\nimport { Icon } from '../ui/icon'\nimport { durations,springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { useAICommand } from './ai-command-provider'\nimport { BlockRenderer } from './block-renderer'\nimport type {\n  BlockComponentProps,\n  ConversationMessage,\n  ProcessingStep,\n} from './types'\n\n// ── Props ────────────────────────────────────────────────────────────────────\n\n/**\n * Renders a scrollable AI conversation thread with support for streaming\n * processing steps, custom content blocks, and action confirmations.\n */\nexport interface AIConversationProps {\n  /** Ordered conversation messages (user + assistant turns). */\n  messages: ConversationMessage[]\n  /** When true, shows a live processing indicator below the last message. */\n  isProcessing?: boolean\n  /** Granular processing steps shown during the processing state. */\n  processingSteps?: ProcessingStep[]\n  /** Agent identity displayed as a header on assistant messages. */\n  agent?: { name: string; icon?: React.ReactNode }\n  /** Called when user interacts with an action block (confirm/cancel/undo). */\n  onAction?: (actionId: string, type: 'confirm' | 'cancel' | 'undo') => void\n  /** Map of custom block type names to React components for extensible rendering. */\n  customBlocks?: Record<string, React.ComponentType<BlockComponentProps<any>>>\n  /** Max height of the conversation container (CSS value). Enables scrolling. */\n  maxHeight?: string | number\n  /** Auto-scroll to bottom on new messages. @default true */\n  autoScroll?: boolean\n  className?: string\n}\n\n// ── Step status icon ─────────────────────────────────────────────────────────\n\nfunction StepStatusIcon({ status }: { status: ProcessingStep['status'] }) {\n  switch (status) {\n    case 'done':\n      return (\n        <Icon icon={IconCircleCheck} size=\"sm\" className=\"text-success-11\" />\n      )\n    case 'active':\n      return (\n        <motion.span\n          className=\"inline-flex items-center justify-center text-accent-9\"\n          animate={{ rotate: 360 }}\n          transition={{ repeat: Infinity, duration: 1, ease: 'linear' }}\n          aria-hidden=\"true\"\n        >\n          <Icon icon={IconLoader2} size=\"sm\" />\n        </motion.span>\n      )\n    case 'error':\n      return (\n        <Icon icon={IconCircleX} size=\"sm\" className=\"text-error-11\" />\n      )\n    case 'pending':\n    default:\n      return (\n        <Icon icon={IconCircle} size=\"sm\" className=\"text-surface-fg-subtle opacity-50\" />\n      )\n  }\n}\n\n// ── Agent header ─────────────────────────────────────────────────────────────\n\nfunction AgentHeader({\n  name,\n  icon,\n}: {\n  name: string\n  icon?: React.ReactNode\n}) {\n  return (\n    <div className=\"flex items-center gap-ds-02b mb-ds-03\">\n      {icon && <span className=\"h-4 w-4 flex items-center justify-center\">{icon}</span>}\n      <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n        {name}\n      </span>\n    </div>\n  )\n}\n\n// ── User message ─────────────────────────────────────────────────────────────\n\nfunction UserMessage({\n  message,\n  reducedMotion,\n}: {\n  message: ConversationMessage\n  reducedMotion: boolean\n}) {\n  if (reducedMotion) {\n    return (\n      <div className=\"bg-surface-raised rounded-ds-lg px-ds-05 py-ds-04\">\n        <p className=\"text-ds-sm text-surface-fg\">{message.content}</p>\n      </div>\n    )\n  }\n\n  return (\n    <motion.div\n      className=\"bg-surface-raised rounded-ds-lg px-ds-05 py-ds-04\"\n      initial={{ opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={springs.snappy}\n    >\n      <p className=\"text-ds-sm text-surface-fg\">{message.content}</p>\n    </motion.div>\n  )\n}\n\n// ── Assistant message ────────────────────────────────────────────────────────\n\nfunction AssistantMessage({\n  message,\n  agent,\n  onAction,\n  customBlocks,\n}: {\n  message: ConversationMessage\n  agent: { name: string; icon?: React.ReactNode }\n  onAction?: (actionId: string, type: 'confirm' | 'cancel' | 'undo') => void\n  customBlocks?: Record<string, React.ComponentType<BlockComponentProps<any>>>\n}) {\n  return (\n    <div>\n      <AgentHeader name={agent.name} icon={agent.icon} />\n      {message.blocks && (\n        <BlockRenderer\n          blocks={message.blocks}\n          onAction={onAction}\n          customBlocks={customBlocks}\n        />\n      )}\n    </div>\n  )\n}\n\n// ── Processing indicator ─────────────────────────────────────────────────────\n\nfunction ProcessingIndicator({\n  steps,\n  agent,\n  reducedMotion,\n}: {\n  steps?: ProcessingStep[]\n  agent: { name: string; icon?: React.ReactNode }\n  reducedMotion: boolean\n}) {\n  // Step visualization\n  if (steps && steps.length > 0) {\n    return (\n      <div role=\"status\" aria-busy=\"true\" aria-label=\"Processing\">\n        <AgentHeader name={agent.name} icon={agent.icon} />\n        <div className=\"flex flex-col gap-ds-02b\">\n          {steps.map((step, i) => (\n            <motion.div\n              key={step.id}\n              className=\"flex items-center gap-ds-02b\"\n              initial={reducedMotion ? undefined : { opacity: 0, x: -8 }}\n              animate={{ opacity: 1, x: 0 }}\n              transition={\n                reducedMotion\n                  ? { duration: 0 }\n                  : { duration: durations.moderate01b, delay: i * 0.05 }\n              }\n            >\n              <StepStatusIcon status={step.status} />\n              <span\n                className={cn(\n                  'text-ds-sm',\n                  step.status === 'pending'\n                    ? 'text-surface-fg-subtle'\n                    : 'text-surface-fg',\n                )}\n              >\n                {step.label}\n              </span>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  // Breathing dots\n  return (\n    <div\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={`${agent.name} is processing`}\n    >\n      <AgentHeader name={agent.name} icon={agent.icon} />\n      <div className=\"flex items-center gap-ds-02\">\n        {!reducedMotion &&\n          [0, 1, 2].map((i) => (\n            <motion.span\n              key={i}\n              className=\"h-1.5 w-1.5 rounded-full bg-accent-9\"\n              animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}\n              transition={{\n                duration: 1.4,\n                repeat: Infinity,\n                ease: 'easeInOut',\n                delay: i * 0.16,\n              }}\n            />\n          ))}\n        <span className=\"ml-ds-02b text-ds-sm text-surface-fg-subtle\">\n          {agent.name} is thinking...\n        </span>\n      </div>\n    </div>\n  )\n}\n\n// ── Scroll-to-bottom pill ────────────────────────────────────────────────────\n\nfunction ScrollToBottomPill({ onClick }: { onClick: () => void }) {\n  return (\n    <motion.button\n      role=\"button\"\n      aria-label=\"Scroll to latest response\"\n      className=\"absolute bottom-ds-04 left-1/2 -translate-x-1/2 z-10 flex items-center gap-ds-02 bg-accent-9 text-accent-fg text-ds-xs font-medium rounded-full px-ds-04 py-ds-02 shadow-floating\"\n      initial={{ opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      exit={{ opacity: 0, y: 8 }}\n      transition={springs.snappy}\n      onClick={onClick}\n    >\n      {'\\u2193'} New response\n    </motion.button>\n  )\n}\n\n// ── Default agent ────────────────────────────────────────────────────────────\n\nconst DEFAULT_AGENT = { name: 'Assistant' }\n\n// ── AIConversation ───────────────────────────────────────────────────────────\n\nconst AIConversation = React.forwardRef<HTMLDivElement, AIConversationProps>(({\n  messages,\n  isProcessing = false,\n  processingSteps,\n  agent: agentProp,\n  onAction,\n  customBlocks,\n  maxHeight,\n  autoScroll = true,\n  className,\n}, ref) => {\n  const ctx = useAICommand()\n  const { reducedMotion } = useMotion()\n\n  // Resolve agent: prop > context > default\n  const agent = agentProp ?? ctx?.agent ?? DEFAULT_AGENT\n\n  // Resolve onAction: prop > context\n  const resolvedOnAction = onAction ?? ctx?.onAction\n\n  // Resolve customBlocks: prop wins over context\n  const resolvedCustomBlocks = React.useMemo(() => {\n    const contextBlocks = ctx?.customBlocks ?? {}\n    return { ...contextBlocks, ...customBlocks }\n  }, [ctx?.customBlocks, customBlocks])\n\n  // ── Auto-scroll ──────────────────────────────────────────────────────────\n\n  const scrollRef = React.useRef<HTMLDivElement>(null)\n  const sentinelRef = React.useRef<HTMLDivElement>(null)\n  const [isAtBottom, setIsAtBottom] = React.useState(true)\n  const [hasNewContent, setHasNewContent] = React.useState(false)\n  const prevMessageCount = React.useRef(messages.length)\n  const prevProcessing = React.useRef(isProcessing)\n\n  // Track if user is scrolled to bottom via IntersectionObserver\n  React.useEffect(() => {\n    if (!autoScroll || !sentinelRef.current) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setIsAtBottom(entry.isIntersecting)\n        if (entry.isIntersecting) {\n          setHasNewContent(false)\n        }\n      },\n      {\n        root: scrollRef.current,\n        threshold: 0.1,\n      },\n    )\n\n    observer.observe(sentinelRef.current)\n    return () => observer.disconnect()\n  }, [autoScroll])\n\n  // Auto-scroll or show pill on new content\n  React.useEffect(() => {\n    const contentChanged =\n      messages.length !== prevMessageCount.current ||\n      isProcessing !== prevProcessing.current\n\n    prevMessageCount.current = messages.length\n    prevProcessing.current = isProcessing\n\n    if (!contentChanged || !autoScroll) return\n\n    if (isAtBottom) {\n      sentinelRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })\n    } else {\n      setHasNewContent(true)\n    }\n  }, [messages, isProcessing, isAtBottom, autoScroll])\n\n  const scrollToBottom = React.useCallback(() => {\n    sentinelRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })\n    setIsAtBottom(true)\n    setHasNewContent(false)\n  }, [])\n\n  // ── Render ───────────────────────────────────────────────────────────────\n\n  return (\n    <div ref={ref} className={cn('relative', className)}>\n      <div\n        ref={scrollRef}\n        className=\"flex flex-col gap-ds-05 overflow-y-auto\"\n        aria-live=\"polite\"\n        style={\n          maxHeight\n            ? {\n                maxHeight:\n                  typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\n              }\n            : undefined\n        }\n      >\n        {messages.map((msg) =>\n          msg.role === 'user' ? (\n            <UserMessage\n              key={msg.id}\n              message={msg}\n              reducedMotion={reducedMotion}\n            />\n          ) : (\n            <AssistantMessage\n              key={msg.id}\n              message={msg}\n              agent={agent}\n              onAction={resolvedOnAction}\n              customBlocks={resolvedCustomBlocks}\n            />\n          ),\n        )}\n        {isProcessing && (\n          <ProcessingIndicator\n            steps={processingSteps}\n            agent={agent}\n            reducedMotion={reducedMotion}\n          />\n        )}\n        <div ref={sentinelRef} className=\"h-px\" />\n      </div>\n      <AnimatePresence>\n        {!isAtBottom && hasNewContent && (\n          <ScrollToBottomPill onClick={scrollToBottom} />\n        )}\n      </AnimatePresence>\n    </div>\n  )\n})\nAIConversation.displayName = 'AIConversation'\n\nexport { AIConversation }\n"],"mappings":"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"}
+{"version":3,"file":"conversation.js","names":[],"sources":["../../src/ai/conversation.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconCircle,\n  IconCircleCheck,\n  IconCircleX,\n  IconLoader2,\n} from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useMotion } from '../motion/motion-provider'\nimport { Icon } from '../ui/icon'\nimport { durations,springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { useAICommand } from './ai-command-provider'\nimport { BlockRenderer } from './block-renderer'\nimport type {\n  BlockComponentProps,\n  ConversationMessage,\n  ProcessingStep,\n} from './types'\n\n// ── Props ────────────────────────────────────────────────────────────────────\n\n/**\n * Renders a scrollable AI conversation thread with support for streaming\n * processing steps, custom content blocks, and action confirmations.\n */\nexport interface AIConversationProps {\n  /** Ordered conversation messages (user + assistant turns). */\n  messages: ConversationMessage[]\n  /** When true, shows a live processing indicator below the last message. */\n  isProcessing?: boolean\n  /** Granular processing steps shown during the processing state. */\n  processingSteps?: ProcessingStep[]\n  /** Agent identity displayed as a header on assistant messages. */\n  agent?: { name: string; icon?: React.ReactNode }\n  /** Called when user interacts with an action block (confirm/cancel/undo). */\n  onAction?: (actionId: string, type: 'confirm' | 'cancel' | 'undo') => void\n  /** Map of custom block type names to React components for extensible rendering. */\n  customBlocks?: Record<string, React.ComponentType<BlockComponentProps<any>>>\n  /** Max height of the conversation container (CSS value). Enables scrolling. */\n  maxHeight?: string | number\n  /** Auto-scroll to bottom on new messages. @default true */\n  autoScroll?: boolean\n  className?: string\n}\n\n// ── Step status icon ─────────────────────────────────────────────────────────\n\nfunction StepStatusIcon({ status }: { status: ProcessingStep['status'] }) {\n  switch (status) {\n    case 'done':\n      return (\n        <Icon icon={IconCircleCheck} size=\"sm\" className=\"text-success-11\" />\n      )\n    case 'active':\n      return (\n        <motion.span\n          className=\"inline-flex items-center justify-center text-accent-9\"\n          animate={{ rotate: 360 }}\n          transition={{ repeat: Infinity, duration: 1, ease: 'linear' }}\n          aria-hidden=\"true\"\n        >\n          <Icon icon={IconLoader2} size=\"sm\" />\n        </motion.span>\n      )\n    case 'error':\n      return (\n        <Icon icon={IconCircleX} size=\"sm\" className=\"text-error-11\" />\n      )\n    case 'pending':\n    default:\n      return (\n        <Icon icon={IconCircle} size=\"sm\" className=\"text-surface-fg-subtle opacity-50\" />\n      )\n  }\n}\n\n// ── Agent header ─────────────────────────────────────────────────────────────\n\nfunction AgentHeader({\n  name,\n  icon,\n}: {\n  name: string\n  icon?: React.ReactNode\n}) {\n  return (\n    <div className=\"flex items-center gap-ds-02b mb-ds-03\">\n      {icon && <span className=\"h-4 w-4 flex items-center justify-center\">{icon}</span>}\n      <span className=\"text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n        {name}\n      </span>\n    </div>\n  )\n}\n\n// ── User message ─────────────────────────────────────────────────────────────\n\nfunction UserMessage({\n  message,\n  reducedMotion,\n}: {\n  message: ConversationMessage\n  reducedMotion: boolean\n}) {\n  if (reducedMotion) {\n    return (\n      <div className=\"bg-surface-raised rounded-surface px-ds-05 py-ds-04\">\n        <p className=\"text-ds-sm text-surface-fg\">{message.content}</p>\n      </div>\n    )\n  }\n\n  return (\n    <motion.div\n      className=\"bg-surface-raised rounded-surface px-ds-05 py-ds-04\"\n      initial={{ opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={springs.snappy}\n    >\n      <p className=\"text-ds-sm text-surface-fg\">{message.content}</p>\n    </motion.div>\n  )\n}\n\n// ── Assistant message ────────────────────────────────────────────────────────\n\nfunction AssistantMessage({\n  message,\n  agent,\n  onAction,\n  customBlocks,\n}: {\n  message: ConversationMessage\n  agent: { name: string; icon?: React.ReactNode }\n  onAction?: (actionId: string, type: 'confirm' | 'cancel' | 'undo') => void\n  customBlocks?: Record<string, React.ComponentType<BlockComponentProps<any>>>\n}) {\n  return (\n    <div>\n      <AgentHeader name={agent.name} icon={agent.icon} />\n      {message.blocks && (\n        <BlockRenderer\n          blocks={message.blocks}\n          onAction={onAction}\n          customBlocks={customBlocks}\n        />\n      )}\n    </div>\n  )\n}\n\n// ── Processing indicator ─────────────────────────────────────────────────────\n\nfunction ProcessingIndicator({\n  steps,\n  agent,\n  reducedMotion,\n}: {\n  steps?: ProcessingStep[]\n  agent: { name: string; icon?: React.ReactNode }\n  reducedMotion: boolean\n}) {\n  // Step visualization\n  if (steps && steps.length > 0) {\n    return (\n      <div role=\"status\" aria-busy=\"true\" aria-label=\"Processing\">\n        <AgentHeader name={agent.name} icon={agent.icon} />\n        <div className=\"flex flex-col gap-ds-02b\">\n          {steps.map((step, i) => (\n            <motion.div\n              key={step.id}\n              className=\"flex items-center gap-ds-02b\"\n              initial={reducedMotion ? undefined : { opacity: 0, x: -8 }}\n              animate={{ opacity: 1, x: 0 }}\n              transition={\n                reducedMotion\n                  ? { duration: 0 }\n                  : { duration: durations.moderate01b, delay: i * 0.05 }\n              }\n            >\n              <StepStatusIcon status={step.status} />\n              <span\n                className={cn(\n                  'text-ds-sm',\n                  step.status === 'pending'\n                    ? 'text-surface-fg-subtle'\n                    : 'text-surface-fg',\n                )}\n              >\n                {step.label}\n              </span>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  // Breathing dots\n  return (\n    <div\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={`${agent.name} is processing`}\n    >\n      <AgentHeader name={agent.name} icon={agent.icon} />\n      <div className=\"flex items-center gap-ds-02\">\n        {!reducedMotion &&\n          [0, 1, 2].map((i) => (\n            <motion.span\n              key={i}\n              className=\"h-1.5 w-1.5 rounded-pill bg-accent-9\"\n              animate={{ scale: [1, 1.4, 1], opacity: [0.4, 1, 0.4] }}\n              transition={{\n                duration: 1.4,\n                repeat: Infinity,\n                ease: 'easeInOut',\n                delay: i * 0.16,\n              }}\n            />\n          ))}\n        <span className=\"ml-ds-02b text-ds-sm text-surface-fg-subtle\">\n          {agent.name} is thinking...\n        </span>\n      </div>\n    </div>\n  )\n}\n\n// ── Scroll-to-bottom pill ────────────────────────────────────────────────────\n\nfunction ScrollToBottomPill({ onClick }: { onClick: () => void }) {\n  return (\n    <motion.button\n      role=\"button\"\n      aria-label=\"Scroll to latest response\"\n      className=\"absolute bottom-ds-04 left-1/2 -translate-x-1/2 z-10 flex items-center gap-ds-02 bg-accent-9 text-accent-fg text-ds-xs font-medium rounded-pill px-ds-04 py-ds-02 shadow-floating\"\n      initial={{ opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      exit={{ opacity: 0, y: 8 }}\n      transition={springs.snappy}\n      onClick={onClick}\n    >\n      {'\\u2193'} New response\n    </motion.button>\n  )\n}\n\n// ── Default agent ────────────────────────────────────────────────────────────\n\nconst DEFAULT_AGENT = { name: 'Assistant' }\n\n// ── AIConversation ───────────────────────────────────────────────────────────\n\nconst AIConversation = React.forwardRef<HTMLDivElement, AIConversationProps>(({\n  messages,\n  isProcessing = false,\n  processingSteps,\n  agent: agentProp,\n  onAction,\n  customBlocks,\n  maxHeight,\n  autoScroll = true,\n  className,\n}, ref) => {\n  const ctx = useAICommand()\n  const { reducedMotion } = useMotion()\n\n  // Resolve agent: prop > context > default\n  const agent = agentProp ?? ctx?.agent ?? DEFAULT_AGENT\n\n  // Resolve onAction: prop > context\n  const resolvedOnAction = onAction ?? ctx?.onAction\n\n  // Resolve customBlocks: prop wins over context\n  const resolvedCustomBlocks = React.useMemo(() => {\n    const contextBlocks = ctx?.customBlocks ?? {}\n    return { ...contextBlocks, ...customBlocks }\n  }, [ctx?.customBlocks, customBlocks])\n\n  // ── Auto-scroll ──────────────────────────────────────────────────────────\n\n  const scrollRef = React.useRef<HTMLDivElement>(null)\n  const sentinelRef = React.useRef<HTMLDivElement>(null)\n  const [isAtBottom, setIsAtBottom] = React.useState(true)\n  const [hasNewContent, setHasNewContent] = React.useState(false)\n  const prevMessageCount = React.useRef(messages.length)\n  const prevProcessing = React.useRef(isProcessing)\n\n  // Track if user is scrolled to bottom via IntersectionObserver\n  React.useEffect(() => {\n    if (!autoScroll || !sentinelRef.current) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setIsAtBottom(entry.isIntersecting)\n        if (entry.isIntersecting) {\n          setHasNewContent(false)\n        }\n      },\n      {\n        root: scrollRef.current,\n        threshold: 0.1,\n      },\n    )\n\n    observer.observe(sentinelRef.current)\n    return () => observer.disconnect()\n  }, [autoScroll])\n\n  // Auto-scroll or show pill on new content\n  React.useEffect(() => {\n    const contentChanged =\n      messages.length !== prevMessageCount.current ||\n      isProcessing !== prevProcessing.current\n\n    prevMessageCount.current = messages.length\n    prevProcessing.current = isProcessing\n\n    if (!contentChanged || !autoScroll) return\n\n    if (isAtBottom) {\n      sentinelRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })\n    } else {\n      setHasNewContent(true)\n    }\n  }, [messages, isProcessing, isAtBottom, autoScroll])\n\n  const scrollToBottom = React.useCallback(() => {\n    sentinelRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })\n    setIsAtBottom(true)\n    setHasNewContent(false)\n  }, [])\n\n  // ── Render ───────────────────────────────────────────────────────────────\n\n  return (\n    <div ref={ref} className={cn('relative', className)}>\n      <div\n        ref={scrollRef}\n        className=\"flex flex-col gap-ds-05 overflow-y-auto\"\n        aria-live=\"polite\"\n        style={\n          maxHeight\n            ? {\n                maxHeight:\n                  typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\n              }\n            : undefined\n        }\n      >\n        {messages.map((msg) =>\n          msg.role === 'user' ? (\n            <UserMessage\n              key={msg.id}\n              message={msg}\n              reducedMotion={reducedMotion}\n            />\n          ) : (\n            <AssistantMessage\n              key={msg.id}\n              message={msg}\n              agent={agent}\n              onAction={resolvedOnAction}\n              customBlocks={resolvedCustomBlocks}\n            />\n          ),\n        )}\n        {isProcessing && (\n          <ProcessingIndicator\n            steps={processingSteps}\n            agent={agent}\n            reducedMotion={reducedMotion}\n          />\n        )}\n        <div ref={sentinelRef} className=\"h-px\" />\n      </div>\n      <AnimatePresence>\n        {!isAtBottom && hasNewContent && (\n          <ScrollToBottomPill onClick={scrollToBottom} />\n        )}\n      </AnimatePresence>\n    </div>\n  )\n})\nAIConversation.displayName = 'AIConversation'\n\nexport { AIConversation }\n"],"mappings":"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"}

package/dist/composed/activity-feed.js

@@ -58,8 +58,8 @@ function v({ compact: e }) {
 		].map((n) => /* @__PURE__ */ f("div", {
 			className: "flex items-center gap-ds-03",
 			children: [
-				/* @__PURE__ */ d(s, { className: "h-2 w-2 shrink-0 rounded-ds-full" }),
-				!e && /* @__PURE__ */ d(s, { className: "h-4 w-4 shrink-0 rounded-ds-full" }),
+				/* @__PURE__ */ d(s, { className: "h-2 w-2 shrink-0 rounded-pill" }),
+				!e && /* @__PURE__ */ d(s, { className: "h-4 w-4 shrink-0 rounded-pill" }),
 				/* @__PURE__ */ d(s, { className: t("flex-1", e ? "h-3" : "h-4") }),
 				/* @__PURE__ */ d(s, { className: "h-3 w-12" })
 			]
@@ -73,7 +73,7 @@ function y({ item: e, compact: o }) {
 	return /* @__PURE__ */ f("div", {
 		className: t("relative flex items-start", o ? "gap-ds-02" : "gap-ds-03"),
 		children: [
-			/* @__PURE__ */ d("div", { className: t("relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base", h[g]) }),
+			/* @__PURE__ */ d("div", { className: t("relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-pill ring-2 ring-surface-base", h[g]) }),
 			!o && e.actor && /* @__PURE__ */ f(r, {
 				className: "h-5 w-5 shrink-0 text-[9px]",
 				children: [e.actor.image && /* @__PURE__ */ d(a, {
@@ -101,7 +101,7 @@ function y({ item: e, compact: o }) {
 								className: t("shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard", s && "rotate-90")
 							}),
 							/* @__PURE__ */ d("span", {
-								className: t("text-surface-fg-muted", e.detail && "cursor-pointer hover:underline hover:bg-surface-raised rounded-ds-md"),
+								className: t("text-surface-fg-muted", e.detail && "cursor-pointer hover:underline hover:bg-surface-raised rounded-control"),
 								onClick: _,
 								role: e.detail ? "button" : void 0,
 								tabIndex: e.detail ? 0 : void 0,
@@ -128,7 +128,7 @@ function b({ item: e, compact: n, children: r }) {
 	let i = e.color ?? "default";
 	return /* @__PURE__ */ f("div", {
 		className: t("relative flex items-start", n ? "gap-ds-02" : "gap-ds-03"),
-		children: [/* @__PURE__ */ d("div", { className: t("relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base", h[i]) }), /* @__PURE__ */ d("div", {
+		children: [/* @__PURE__ */ d("div", { className: t("relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-pill ring-2 ring-surface-base", h[i]) }), /* @__PURE__ */ d("div", {
 			className: "min-w-0 flex-1",
 			children: r
 		})]

package/dist/composed/activity-feed.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-feed.js","names":[],"sources":["../../src/composed/activity-feed.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { formatRelativeTime } from '../ui/lib/date-utils'\nimport { tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\nimport { getInitials } from './lib/string-utils'\n\nexport interface ActivityItem {\n  id: string\n  actor?: { name: string; image?: string }\n  action: string | React.ReactNode\n  timestamp: Date | string\n  icon?: React.ReactNode\n  color?: 'default' | 'success' | 'warning' | 'error' | 'info'\n  detail?: React.ReactNode\n}\n\nexport interface GroupLabels {\n  today?: string\n  yesterday?: string\n  thisWeek?: string\n  older?: string\n}\n\nexport interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ActivityItem[]\n  onLoadMore?: () => void\n  loading?: boolean\n  hasMore?: boolean\n  emptyState?: React.ReactNode\n  compact?: boolean\n  maxInitialItems?: number\n  groupBy?: 'time' | 'none'\n  groupLabels?: GroupLabels\n  /** Custom renderer per item. Return ReactNode for custom rendering, undefined to use default ActivityEntry. */\n  renderItem?: (item: ActivityItem, index: number) => React.ReactNode | undefined\n}\n\nconst dotColorMap = {\n  default: 'bg-surface-fg-subtle',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n} as const\n\nconst DEFAULT_GROUP_LABELS: Required<GroupLabels> = {\n  today: 'Today',\n  yesterday: 'Yesterday',\n  thisWeek: 'This Week',\n  older: 'Older',\n}\n\n/**\n * Buckets items into time-based groups: today, yesterday, earlier this week (since Monday), older.\n * Skips empty groups.\n */\nexport function groupItemsByTime(\n  items: ActivityItem[],\n  labels?: GroupLabels,\n): { label: string; items: ActivityItem[] }[] {\n  const l = { ...DEFAULT_GROUP_LABELS, ...labels }\n  const now = new Date()\n\n  // Start of today (midnight local)\n  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n  // Start of yesterday\n  const startOfYesterday = new Date(startOfToday.getTime() - 24 * 60 * 60 * 1000)\n  // Start of this week (Monday)\n  const dayOfWeek = now.getDay() // 0=Sun, 1=Mon, ...\n  const daysSinceMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1\n  const startOfWeek = new Date(\n    startOfToday.getTime() - daysSinceMonday * 24 * 60 * 60 * 1000,\n  )\n\n  const today: ActivityItem[] = []\n  const yesterday: ActivityItem[] = []\n  const thisWeek: ActivityItem[] = []\n  const older: ActivityItem[] = []\n\n  for (const item of items) {\n    const ts =\n      typeof item.timestamp === 'string'\n        ? new Date(item.timestamp)\n        : item.timestamp\n    const t = ts.getTime()\n\n    if (t >= startOfToday.getTime()) {\n      today.push(item)\n    } else if (t >= startOfYesterday.getTime()) {\n      yesterday.push(item)\n    } else if (t >= startOfWeek.getTime()) {\n      thisWeek.push(item)\n    } else {\n      older.push(item)\n    }\n  }\n\n  const groups: { label: string; items: ActivityItem[] }[] = []\n  if (today.length > 0) groups.push({ label: l.today, items: today })\n  if (yesterday.length > 0) groups.push({ label: l.yesterday, items: yesterday })\n  if (thisWeek.length > 0) groups.push({ label: l.thisWeek, items: thisWeek })\n  if (older.length > 0) groups.push({ label: l.older, items: older })\n\n  return groups\n}\n\nfunction LoadingSkeleton({ compact }: { compact: boolean }) {\n  return (\n    <div className={cn('flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n      {[0, 1, 2].map((i) => (\n        <div key={i} className=\"flex items-center gap-ds-03\">\n          <Skeleton className=\"h-2 w-2 shrink-0 rounded-ds-full\" />\n          {!compact && <Skeleton className=\"h-4 w-4 shrink-0 rounded-ds-full\" />}\n          <Skeleton className={cn('flex-1', compact ? 'h-3' : 'h-4')} />\n          <Skeleton className=\"h-3 w-12\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction ActivityEntry({\n  item,\n  compact,\n}: {\n  item: ActivityItem\n  compact: boolean\n}) {\n  const [expandedDetail, setExpandedDetail] = React.useState(false)\n  const color = item.color ?? 'default'\n\n  const handleActionClick = () => {\n    if (item.detail) {\n      setExpandedDetail((prev) => !prev)\n    }\n  }\n\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n\n      {/* Avatar (non-compact only) */}\n      {!compact && item.actor && (\n        <Avatar className=\"h-5 w-5 shrink-0 text-[9px]\">\n          {item.actor.image && (\n            <AvatarImage src={item.actor.image} alt={item.actor.name} />\n          )}\n          <AvatarFallback className=\"text-[9px]\">\n            {getInitials(item.actor.name)}\n          </AvatarFallback>\n        </Avatar>\n      )}\n\n      {/* Content */}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"flex items-center justify-between gap-ds-02\">\n          <div className={cn('min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap', compact ? 'text-ds-xs' : 'text-ds-sm')}>\n            {item.actor && (\n              <span className=\"font-medium text-surface-fg\">{item.actor.name} </span>\n            )}\n            {item.detail && (\n              <Icon icon={IconChevronRight} size=\"xs\" className={cn('shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard', expandedDetail && 'rotate-90')} />\n            )}\n            <span\n              className={cn(\n                'text-surface-fg-muted',\n                item.detail && 'cursor-pointer hover:underline hover:bg-surface-raised rounded-ds-md',\n              )}\n              onClick={handleActionClick}\n              role={item.detail ? 'button' : undefined}\n              tabIndex={item.detail ? 0 : undefined}\n              onKeyDown={\n                item.detail\n                  ? (e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault()\n                        handleActionClick()\n                      }\n                    }\n                  : undefined\n              }\n            >\n              {item.action}\n            </span>\n          </div>\n\n          <time\n            className={cn(\n              'shrink-0 whitespace-nowrap text-surface-fg-subtle',\n              compact ? 'text-ds-xs' : 'text-ds-sm',\n            )}\n            dateTime={\n              (typeof item.timestamp === 'string'\n                ? new Date(item.timestamp)\n                : item.timestamp\n              ).toISOString()\n            }\n          >\n            {formatRelativeTime(item.timestamp)}\n          </time>\n        </div>\n\n        {/* Expandable detail */}\n        {expandedDetail && item.detail && (\n          <div className=\"mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted\">\n            {item.detail}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Wraps custom renderItem content with the same dot + layout container\n * that ActivityEntry uses, keeping vertical rhythm consistent.\n */\nfunction CustomEntry({\n  item,\n  compact,\n  children,\n}: {\n  item: ActivityItem\n  compact: boolean\n  children: React.ReactNode\n}) {\n  const color = item.color ?? 'default'\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot — same as ActivityEntry */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n      {/* Custom content in the same flex slot as ActivityEntry's content area */}\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </div>\n  )\n}\n\nfunction GroupHeader({\n  label,\n  isFirst,\n}: {\n  label: string\n  isFirst: boolean\n}) {\n  return (\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n      className={cn(\n        'flex items-center gap-ds-03',\n        !isFirst ? 'mt-ds-06' : '',\n        'mb-ds-03',\n      )}\n    >\n      <hr className=\"flex-1 border-surface-border\" />\n      <span className=\"bg-surface-base px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle\">\n        {label}\n      </span>\n      <hr className=\"flex-1 border-surface-border\" />\n    </motion.div>\n  )\n}\n\nconst ActivityFeed = React.forwardRef<HTMLDivElement, ActivityFeedProps>(\n  (\n    {\n      items,\n      onLoadMore,\n      loading = false,\n      hasMore = false,\n      emptyState,\n      compact = false,\n      maxInitialItems,\n      groupBy = 'none',\n      groupLabels,\n      renderItem,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [showAll, setShowAll] = React.useState(false)\n\n    if (loading) {\n      return (\n        <div ref={ref} className={cn('relative', className)} {...props}>\n          <LoadingSkeleton compact={compact} />\n        </div>\n      )\n    }\n\n    if (items.length === 0) {\n      if (emptyState) {\n        return (\n          <div ref={ref} className={className} {...props}>\n            {emptyState}\n          </div>\n        )\n      }\n      return null\n    }\n\n    // maxInitialItems applies to the flat list BEFORE grouping\n    const truncated =\n      maxInitialItems != null && !showAll && items.length > maxInitialItems\n    const visibleItems = truncated ? items.slice(0, maxInitialItems) : items\n\n    const useGrouping = groupBy === 'time'\n\n    /** Resolve what to render for a single item, respecting renderItem. */\n    const resolveEntry = (item: ActivityItem, index: number) => {\n      if (renderItem) {\n        const custom = renderItem(item, index)\n        if (custom !== undefined) {\n          return <CustomEntry item={item} compact={compact}>{custom}</CustomEntry>\n        }\n      }\n      return <ActivityEntry item={item} compact={compact} />\n    }\n\n    return (\n      <div ref={ref} className={cn('relative', className)} {...props}>\n        {/* Items */}\n        {useGrouping ? (\n          <div>\n            {groupItemsByTime(visibleItems, groupLabels).map((group, gi) => (\n              <div key={group.label}>\n                <GroupHeader label={group.label} isFirst={gi === 0} />\n                {/* Timeline line scoped to this group */}\n                <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n                  <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n                  {group.items.map((item, index) => (\n                    <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                      {resolveEntry(item, index)}\n                    </motion.div>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        ) : (\n          <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n            {/* Timeline line */}\n            <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n            {visibleItems.map((item, index) => (\n              <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                {resolveEntry(item, index)}\n              </motion.div>\n            ))}\n          </div>\n        )}\n\n        {/* Show all button */}\n        {truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowAll(true)}\n            >\n              Show all ({items.length})\n            </Button>\n          </div>\n        )}\n\n        {/* Load more button */}\n        {hasMore && onLoadMore && !truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={onLoadMore}>\n              Load more\n            </Button>\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nActivityFeed.displayName = 'ActivityFeed'\n\nexport { ActivityFeed }\n"],"mappings":"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"}
+{"version":3,"file":"activity-feed.js","names":[],"sources":["../../src/composed/activity-feed.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { formatRelativeTime } from '../ui/lib/date-utils'\nimport { tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\nimport { getInitials } from './lib/string-utils'\n\nexport interface ActivityItem {\n  id: string\n  actor?: { name: string; image?: string }\n  action: string | React.ReactNode\n  timestamp: Date | string\n  icon?: React.ReactNode\n  color?: 'default' | 'success' | 'warning' | 'error' | 'info'\n  detail?: React.ReactNode\n}\n\nexport interface GroupLabels {\n  today?: string\n  yesterday?: string\n  thisWeek?: string\n  older?: string\n}\n\nexport interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ActivityItem[]\n  onLoadMore?: () => void\n  loading?: boolean\n  hasMore?: boolean\n  emptyState?: React.ReactNode\n  compact?: boolean\n  maxInitialItems?: number\n  groupBy?: 'time' | 'none'\n  groupLabels?: GroupLabels\n  /** Custom renderer per item. Return ReactNode for custom rendering, undefined to use default ActivityEntry. */\n  renderItem?: (item: ActivityItem, index: number) => React.ReactNode | undefined\n}\n\nconst dotColorMap = {\n  default: 'bg-surface-fg-subtle',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n} as const\n\nconst DEFAULT_GROUP_LABELS: Required<GroupLabels> = {\n  today: 'Today',\n  yesterday: 'Yesterday',\n  thisWeek: 'This Week',\n  older: 'Older',\n}\n\n/**\n * Buckets items into time-based groups: today, yesterday, earlier this week (since Monday), older.\n * Skips empty groups.\n */\nexport function groupItemsByTime(\n  items: ActivityItem[],\n  labels?: GroupLabels,\n): { label: string; items: ActivityItem[] }[] {\n  const l = { ...DEFAULT_GROUP_LABELS, ...labels }\n  const now = new Date()\n\n  // Start of today (midnight local)\n  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n  // Start of yesterday\n  const startOfYesterday = new Date(startOfToday.getTime() - 24 * 60 * 60 * 1000)\n  // Start of this week (Monday)\n  const dayOfWeek = now.getDay() // 0=Sun, 1=Mon, ...\n  const daysSinceMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1\n  const startOfWeek = new Date(\n    startOfToday.getTime() - daysSinceMonday * 24 * 60 * 60 * 1000,\n  )\n\n  const today: ActivityItem[] = []\n  const yesterday: ActivityItem[] = []\n  const thisWeek: ActivityItem[] = []\n  const older: ActivityItem[] = []\n\n  for (const item of items) {\n    const ts =\n      typeof item.timestamp === 'string'\n        ? new Date(item.timestamp)\n        : item.timestamp\n    const t = ts.getTime()\n\n    if (t >= startOfToday.getTime()) {\n      today.push(item)\n    } else if (t >= startOfYesterday.getTime()) {\n      yesterday.push(item)\n    } else if (t >= startOfWeek.getTime()) {\n      thisWeek.push(item)\n    } else {\n      older.push(item)\n    }\n  }\n\n  const groups: { label: string; items: ActivityItem[] }[] = []\n  if (today.length > 0) groups.push({ label: l.today, items: today })\n  if (yesterday.length > 0) groups.push({ label: l.yesterday, items: yesterday })\n  if (thisWeek.length > 0) groups.push({ label: l.thisWeek, items: thisWeek })\n  if (older.length > 0) groups.push({ label: l.older, items: older })\n\n  return groups\n}\n\nfunction LoadingSkeleton({ compact }: { compact: boolean }) {\n  return (\n    <div className={cn('flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n      {[0, 1, 2].map((i) => (\n        <div key={i} className=\"flex items-center gap-ds-03\">\n          <Skeleton className=\"h-2 w-2 shrink-0 rounded-pill\" />\n          {!compact && <Skeleton className=\"h-4 w-4 shrink-0 rounded-pill\" />}\n          <Skeleton className={cn('flex-1', compact ? 'h-3' : 'h-4')} />\n          <Skeleton className=\"h-3 w-12\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction ActivityEntry({\n  item,\n  compact,\n}: {\n  item: ActivityItem\n  compact: boolean\n}) {\n  const [expandedDetail, setExpandedDetail] = React.useState(false)\n  const color = item.color ?? 'default'\n\n  const handleActionClick = () => {\n    if (item.detail) {\n      setExpandedDetail((prev) => !prev)\n    }\n  }\n\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-pill ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n\n      {/* Avatar (non-compact only) */}\n      {!compact && item.actor && (\n        <Avatar className=\"h-5 w-5 shrink-0 text-[9px]\">\n          {item.actor.image && (\n            <AvatarImage src={item.actor.image} alt={item.actor.name} />\n          )}\n          <AvatarFallback className=\"text-[9px]\">\n            {getInitials(item.actor.name)}\n          </AvatarFallback>\n        </Avatar>\n      )}\n\n      {/* Content */}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"flex items-center justify-between gap-ds-02\">\n          <div className={cn('min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap', compact ? 'text-ds-xs' : 'text-ds-sm')}>\n            {item.actor && (\n              <span className=\"font-medium text-surface-fg\">{item.actor.name} </span>\n            )}\n            {item.detail && (\n              <Icon icon={IconChevronRight} size=\"xs\" className={cn('shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard', expandedDetail && 'rotate-90')} />\n            )}\n            <span\n              className={cn(\n                'text-surface-fg-muted',\n                item.detail && 'cursor-pointer hover:underline hover:bg-surface-raised rounded-control',\n              )}\n              onClick={handleActionClick}\n              role={item.detail ? 'button' : undefined}\n              tabIndex={item.detail ? 0 : undefined}\n              onKeyDown={\n                item.detail\n                  ? (e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault()\n                        handleActionClick()\n                      }\n                    }\n                  : undefined\n              }\n            >\n              {item.action}\n            </span>\n          </div>\n\n          <time\n            className={cn(\n              'shrink-0 whitespace-nowrap text-surface-fg-subtle',\n              compact ? 'text-ds-xs' : 'text-ds-sm',\n            )}\n            dateTime={\n              (typeof item.timestamp === 'string'\n                ? new Date(item.timestamp)\n                : item.timestamp\n              ).toISOString()\n            }\n          >\n            {formatRelativeTime(item.timestamp)}\n          </time>\n        </div>\n\n        {/* Expandable detail */}\n        {expandedDetail && item.detail && (\n          <div className=\"mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted\">\n            {item.detail}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Wraps custom renderItem content with the same dot + layout container\n * that ActivityEntry uses, keeping vertical rhythm consistent.\n */\nfunction CustomEntry({\n  item,\n  compact,\n  children,\n}: {\n  item: ActivityItem\n  compact: boolean\n  children: React.ReactNode\n}) {\n  const color = item.color ?? 'default'\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot — same as ActivityEntry */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-pill ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n      {/* Custom content in the same flex slot as ActivityEntry's content area */}\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </div>\n  )\n}\n\nfunction GroupHeader({\n  label,\n  isFirst,\n}: {\n  label: string\n  isFirst: boolean\n}) {\n  return (\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n      className={cn(\n        'flex items-center gap-ds-03',\n        !isFirst ? 'mt-ds-06' : '',\n        'mb-ds-03',\n      )}\n    >\n      <hr className=\"flex-1 border-surface-border\" />\n      <span className=\"bg-surface-base px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle\">\n        {label}\n      </span>\n      <hr className=\"flex-1 border-surface-border\" />\n    </motion.div>\n  )\n}\n\nconst ActivityFeed = React.forwardRef<HTMLDivElement, ActivityFeedProps>(\n  (\n    {\n      items,\n      onLoadMore,\n      loading = false,\n      hasMore = false,\n      emptyState,\n      compact = false,\n      maxInitialItems,\n      groupBy = 'none',\n      groupLabels,\n      renderItem,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [showAll, setShowAll] = React.useState(false)\n\n    if (loading) {\n      return (\n        <div ref={ref} className={cn('relative', className)} {...props}>\n          <LoadingSkeleton compact={compact} />\n        </div>\n      )\n    }\n\n    if (items.length === 0) {\n      if (emptyState) {\n        return (\n          <div ref={ref} className={className} {...props}>\n            {emptyState}\n          </div>\n        )\n      }\n      return null\n    }\n\n    // maxInitialItems applies to the flat list BEFORE grouping\n    const truncated =\n      maxInitialItems != null && !showAll && items.length > maxInitialItems\n    const visibleItems = truncated ? items.slice(0, maxInitialItems) : items\n\n    const useGrouping = groupBy === 'time'\n\n    /** Resolve what to render for a single item, respecting renderItem. */\n    const resolveEntry = (item: ActivityItem, index: number) => {\n      if (renderItem) {\n        const custom = renderItem(item, index)\n        if (custom !== undefined) {\n          return <CustomEntry item={item} compact={compact}>{custom}</CustomEntry>\n        }\n      }\n      return <ActivityEntry item={item} compact={compact} />\n    }\n\n    return (\n      <div ref={ref} className={cn('relative', className)} {...props}>\n        {/* Items */}\n        {useGrouping ? (\n          <div>\n            {groupItemsByTime(visibleItems, groupLabels).map((group, gi) => (\n              <div key={group.label}>\n                <GroupHeader label={group.label} isFirst={gi === 0} />\n                {/* Timeline line scoped to this group */}\n                <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n                  <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n                  {group.items.map((item, index) => (\n                    <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                      {resolveEntry(item, index)}\n                    </motion.div>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        ) : (\n          <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n            {/* Timeline line */}\n            <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n            {visibleItems.map((item, index) => (\n              <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                {resolveEntry(item, index)}\n              </motion.div>\n            ))}\n          </div>\n        )}\n\n        {/* Show all button */}\n        {truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowAll(true)}\n            >\n              Show all ({items.length})\n            </Button>\n          </div>\n        )}\n\n        {/* Load more button */}\n        {hasMore && onLoadMore && !truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={onLoadMore}>\n              Load more\n            </Button>\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nActivityFeed.displayName = 'ActivityFeed'\n\nexport { ActivityFeed }\n"],"mappings":";;;;;;;;;;;;;;AA8CA,IAAM,IAAc;CAClB,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACP,EAEK,IAA8C;CAClD,OAAO;CACP,WAAW;CACX,UAAU;CACV,OAAO;CACR;AAMD,SAAgB,EACd,GACA,GAC4C;CAC5C,IAAM,IAAI;EAAE,GAAG;EAAsB,GAAG;EAAQ,EAC1C,oBAAM,IAAI,MAAM,EAGhB,IAAe,IAAI,KAAK,EAAI,aAAa,EAAE,EAAI,UAAU,EAAE,EAAI,SAAS,CAAC,EAEzE,oBAAmB,IAAI,KAAK,EAAa,SAAS,GAAG,OAAU,KAAK,IAAK,EAEzE,IAAY,EAAI,QAAQ,EACxB,IAAkB,MAAc,IAAI,IAAI,IAAY,GACpD,oBAAc,IAAI,KACtB,EAAa,SAAS,GAAG,IAAkB,KAAK,KAAK,KAAK,IAC3D,EAEK,IAAwB,EAAE,EAC1B,IAA4B,EAAE,EAC9B,IAA2B,EAAE,EAC7B,IAAwB,EAAE;AAEhC,MAAK,IAAM,KAAQ,GAAO;EAKxB,IAAM,KAHJ,OAAO,EAAK,aAAc,WACtB,IAAI,KAAK,EAAK,UAAU,GACxB,EAAK,WACE,SAAS;AAEtB,EAAI,KAAK,EAAa,SAAS,GAC7B,EAAM,KAAK,EAAK,GACP,KAAK,EAAiB,SAAS,GACxC,EAAU,KAAK,EAAK,GACX,KAAK,EAAY,SAAS,GACnC,EAAS,KAAK,EAAK,GAEnB,EAAM,KAAK,EAAK;;CAIpB,IAAM,IAAqD,EAAE;AAM7D,QALI,EAAM,SAAS,KAAG,EAAO,KAAK;EAAE,OAAO,EAAE;EAAO,OAAO;EAAO,CAAC,EAC/D,EAAU,SAAS,KAAG,EAAO,KAAK;EAAE,OAAO,EAAE;EAAW,OAAO;EAAW,CAAC,EAC3E,EAAS,SAAS,KAAG,EAAO,KAAK;EAAE,OAAO,EAAE;EAAU,OAAO;EAAU,CAAC,EACxE,EAAM,SAAS,KAAG,EAAO,KAAK;EAAE,OAAO,EAAE;EAAO,OAAO;EAAO,CAAC,EAE5D;;AAGT,SAAS,EAAgB,EAAE,cAAiC;AAC1D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,iBAAiB,IAAU,UAAU,QAAQ;YAC7D;GAAC;GAAG;GAAG;GAAE,CAAC,KAAK,MACd,kBAAC,OAAD;GAAa,WAAU;aAAvB;IACE,kBAAC,GAAD,EAAU,WAAU,iCAAkC,CAAA;IACrD,CAAC,KAAW,kBAAC,GAAD,EAAU,WAAU,iCAAkC,CAAA;IACnE,kBAAC,GAAD,EAAU,WAAW,EAAG,UAAU,IAAU,QAAQ,MAAM,EAAI,CAAA;IAC9D,kBAAC,GAAD,EAAU,WAAU,YAAa,CAAA;IAC7B;KALI,EAKJ,CACN;EACE,CAAA;;AAIV,SAAS,EAAc,EACrB,SACA,cAIC;CACD,IAAM,CAAC,GAAgB,KAAqB,EAAM,SAAS,GAAM,EAC3D,IAAQ,EAAK,SAAS,WAEtB,UAA0B;AAC9B,EAAI,EAAK,UACP,GAAmB,MAAS,CAAC,EAAK;;AAItC,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,6BAA6B,IAAU,cAAc,YAAY;YAApF;GAEE,kBAAC,OAAD,EACE,WAAW,EACT,+EACA,EAAY,GACb,EACD,CAAA;GAGD,CAAC,KAAW,EAAK,SAChB,kBAAC,GAAD;IAAQ,WAAU;cAAlB,CACG,EAAK,MAAM,SACV,kBAAC,GAAD;KAAa,KAAK,EAAK,MAAM;KAAO,KAAK,EAAK,MAAM;KAAQ,CAAA,EAE9D,kBAAC,GAAD;KAAgB,WAAU;eACvB,EAAY,EAAK,MAAM,KAAK;KACd,CAAA,CACV;;GAIX,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAW,EAAG,wDAAwD,IAAU,eAAe,aAAa;gBAAjH;OACG,EAAK,SACJ,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAA+C,EAAK,MAAM,MAAK,IAAQ;;OAExE,EAAK,UACJ,kBAAC,GAAD;QAAM,MAAM;QAAkB,MAAK;QAAK,WAAW,EAAG,kGAAkG,KAAkB,YAAY;QAAI,CAAA;OAE5L,kBAAC,QAAD;QACE,WAAW,EACT,yBACA,EAAK,UAAU,yEAChB;QACD,SAAS;QACT,MAAM,EAAK,SAAS,WAAW,KAAA;QAC/B,UAAU,EAAK,SAAS,IAAI,KAAA;QAC5B,WACE,EAAK,UACA,MAAM;AACL,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,gBAAgB,EAClB,GAAmB;YAGvB,KAAA;kBAGL,EAAK;QACD,CAAA;OACH;SAEN,kBAAC,QAAD;MACE,WAAW,EACT,qDACA,IAAU,eAAe,aAC1B;MACD,WACG,OAAO,EAAK,aAAc,WACvB,IAAI,KAAK,EAAK,UAAU,GACxB,EAAK,WACP,aAAa;gBAGhB,EAAmB,EAAK,UAAU;MAC9B,CAAA,CACH;QAGL,KAAkB,EAAK,UACtB,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAK;KACF,CAAA,CAEJ;;GACF;;;AAQV,SAAS,EAAY,EACnB,SACA,YACA,eAKC;CACD,IAAM,IAAQ,EAAK,SAAS;AAC5B,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,6BAA6B,IAAU,cAAc,YAAY;YAApF,CAEE,kBAAC,OAAD,EACE,WAAW,EACT,+EACA,EAAY,GACb,EACD,CAAA,EAEF,kBAAC,OAAD;GAAK,WAAU;GAAkB;GAAe,CAAA,CAC5C;;;AAIV,SAAS,EAAY,EACnB,UACA,cAIC;AACD,QACE,kBAAC,EAAO,KAAR;EACE,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,GAAG;EACvB,YAAY,EAAO;EACnB,WAAW,EACT,+BACC,IAAuB,KAAb,YACX,WACD;YARH;GAUE,kBAAC,MAAD,EAAI,WAAU,gCAAiC,CAAA;GAC/C,kBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA;GACP,kBAAC,MAAD,EAAI,WAAU,gCAAiC,CAAA;GACpC;;;AAIjB,IAAM,IAAe,EAAM,YAEvB,EACE,UACA,eACA,aAAU,IACV,aAAU,IACV,eACA,aAAU,IACV,oBACA,aAAU,QACV,gBACA,eACA,cACA,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAS,KAAc,EAAM,SAAS,GAAM;AAEnD,KAAI,EACF,QACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,YAAY,EAAU;EAAE,GAAI;YACvD,kBAAC,GAAD,EAA0B,YAAW,CAAA;EACjC,CAAA;AAIV,KAAI,EAAM,WAAW,EAQnB,QAPI,IAEA,kBAAC,OAAD;EAAU;EAAgB;EAAW,GAAI;YACtC;EACG,CAAA,GAGH;CAIT,IAAM,IACJ,KAAmB,QAAQ,CAAC,KAAW,EAAM,SAAS,GAClD,IAAe,IAAY,EAAM,MAAM,GAAG,EAAgB,GAAG,GAE7D,IAAc,MAAY,QAG1B,KAAgB,GAAoB,MAAkB;AAC1D,MAAI,GAAY;GACd,IAAM,IAAS,EAAW,GAAM,EAAM;AACtC,OAAI,MAAW,KAAA,EACb,QAAO,kBAAC,GAAD;IAAmB;IAAe;cAAU;IAAqB,CAAA;;AAG5E,SAAO,kBAAC,GAAD;GAAqB;GAAe;GAAW,CAAA;;AAGxD,QACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,YAAY,EAAU;EAAE,GAAI;YAAzD;GAEG,IACC,kBAAC,OAAD,EAAA,UACG,EAAiB,GAAc,EAAY,CAAC,KAAK,GAAO,MACvD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAa,OAAO,EAAM;IAAO,SAAS,MAAO;IAAK,CAAA,EAEtD,kBAAC,OAAD;IAAK,WAAW,EAAG,0BAA0B,IAAU,UAAU,QAAQ;cAAzE,CACE,kBAAC,OAAD,EAAK,WAAU,6DAA8D,CAAA,EAC5E,EAAM,MAAM,KAAK,GAAM,MACtB,kBAAC,EAAO,KAAR;KAA0B,SAAS,EAAE,SAAS,GAAG;KAAE,SAAS,EAAE,SAAS,GAAG;KAAE,YAAY;MAAE,GAAG,EAAO;MAAM,OAAO,IAAQ;MAAM;eAC5H,EAAa,GAAM,EAAM;KACf,EAFI,EAAK,GAET,CACb,CACE;MACF,EAAA,EAXI,EAAM,MAWV,CACN,EACE,CAAA,GAEN,kBAAC,OAAD;IAAK,WAAW,EAAG,0BAA0B,IAAU,UAAU,QAAQ;cAAzE,CAEE,kBAAC,OAAD,EAAK,WAAU,6DAA8D,CAAA,EAC5E,EAAa,KAAK,GAAM,MACvB,kBAAC,EAAO,KAAR;KAA0B,SAAS,EAAE,SAAS,GAAG;KAAE,SAAS,EAAE,SAAS,GAAG;KAAE,YAAY;MAAE,GAAG,EAAO;MAAM,OAAO,IAAQ;MAAM;eAC5H,EAAa,GAAM,EAAM;KACf,EAFI,EAAK,GAET,CACb,CACE;;GAIP,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe,EAAW,GAAK;eAHjC;MAIC;MACY,EAAM;MAAO;MACjB;;IACL,CAAA;GAIP,KAAW,KAAc,CAAC,KACzB,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,SAAS;eAAY;KAE9C,CAAA;IACL,CAAA;GAEJ;;EAGX;AACD,EAAa,cAAc"}

package/dist/composed/avatar-group.js

@@ -13,7 +13,7 @@ var g = {
 	lead: "ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised",
 	admin: "ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised",
 	client: "ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised"
-}, _ = t("shrink-0 overflow-hidden rounded-ds-full border-2", {
+}, _ = t("shrink-0 overflow-hidden rounded-pill border-2", {
 	variants: { size: {
 		xs: "h-ds-xs w-ds-xs",
 		sm: "h-ds-sm w-ds-sm",
@@ -74,7 +74,7 @@ var g = {
 		children: [k.map((t, c) => {
 			let d = u(t.name), _ = `${t.name}-${c}`;
 			if (C) return /* @__PURE__ */ f("div", {
-				className: n("shrink-0 rounded-ds-full", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
+				className: n("shrink-0 rounded-pill", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
 				style: {
 					zIndex: k.length - c,
 					transform: B(c)
@@ -82,7 +82,7 @@ var g = {
 				children: C(t, c)
 			}, _);
 			let v = /* @__PURE__ */ p("div", {
-				className: n("relative shrink-0 rounded-ds-full", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
+				className: n("relative shrink-0 rounded-pill", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
 				style: {
 					zIndex: k.length - c,
 					transform: B(c)
@@ -111,7 +111,7 @@ var g = {
 						opacity: 0
 					},
 					transition: e.snappy,
-					className: n("absolute top-0 right-0 rounded-ds-full ring-1 ring-surface-raised", N, t.indicator === "lead" || t.indicator === "admin" ? "bg-accent-9" : ""),
+					className: n("absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised", N, t.indicator === "lead" || t.indicator === "admin" ? "bg-accent-9" : ""),
 					children: typeof t.indicator != "string" && t.indicator
 				}) })]
 			}, _);

package/dist/composed/avatar-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/composed/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport type { AvatarRing } from '../ui/avatar'\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '../ui/avatar'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { getInitials } from './lib/string-utils'\n\n// Ring classes applied at group level (not via Avatar's ring prop, which adds ring-offset-2 that gets clipped by overflow-hidden)\nconst groupRingMap: Record<string, string> = {\n  lead: 'ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised',\n  admin: 'ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised',\n  client: 'ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised',\n}\n\nconst avatarSizeVariants = cva(\n  'shrink-0 overflow-hidden rounded-ds-full border-2',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarSizeVariants> {\n  users: AvatarUser[]\n  max?: number\n  showTooltip?: boolean\n  /** Border color for the group avatars. @default 'surface-raised' */\n  borderColor?: 'surface-base' | 'surface-raised'\n  /** Callback when the \"+N\" overflow badge is clicked */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How much avatars spread apart on hover. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size,\n      showTooltip = true,\n      borderColor = 'surface-raised',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const displayed = users.slice(0, max)\n    const overflow = users.length - max\n\n    const overlapMap = {\n      xs: '-ml-ds-02',\n      sm: '-ml-ds-02b',\n      md: '-ml-ds-03',\n      lg: '-ml-ds-04',\n      xl: '-ml-ds-05',\n    }\n    const overlapClass = overlapMap[size ?? 'md']\n\n    // Match Avatar fallback font sizes so the \"+N\" badge text is consistent\n    const textSizeMap: Record<string, string> = {\n      xs: 'text-[9px]',\n      sm: 'text-ds-xs',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n      xl: 'text-ds-lg',\n    }\n    const textSizeClass = textSizeMap[size ?? 'md']\n\n    // Indicator dot scales with avatar size (matches Avatar's statusDotSizeMap)\n    const indicatorDotSizeMap: Record<string, string> = {\n      xs: 'h-1 w-1',\n      sm: 'h-1.5 w-1.5',\n      md: 'h-2 w-2',\n      lg: 'h-2.5 w-2.5',\n      xl: 'h-3 w-3',\n    }\n    const indicatorDotClass = indicatorDotSizeMap[size ?? 'md']\n\n    const borderClass =\n      borderColor === 'surface-base'\n        ? 'border-surface-base'\n        : 'border-surface-raised'\n\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const overlapPxMap: Record<string, number> = {\n      xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n    }\n    const resolvedSize = size ?? 'md'\n    const overlapPx = overlapPxMap[resolvedSize]\n    const expandMultiplier = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    function getExpandTransform(index: number): string {\n      if (!isHovered) return 'translateX(0)'\n      const shift = overlapPx * expandMultiplier\n      if (expandDirection === 'left') {\n        return `translateX(-${(totalVisible - 1 - index) * shift}px)`\n      }\n      return `translateX(${index * shift}px)`\n    }\n\n    const spotlightClasses =\n      'transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85'\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={`${users.length} team members`}\n          tabIndex={0}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsHovered(true)}\n          onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setIsHovered(false) }}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const initials = getInitials(user.name)\n\n            const key = `${user.name}-${index}`\n\n            if (renderAvatar) {\n              // When renderAvatar is provided, the consumer owns the Avatar entirely.\n              // Wrapper is positioning-only (overlap, z-index, spotlight) — no size/border/clip\n              // so the consumer's Avatar renders at its natural size without being clipped.\n              return (\n                <div\n                  key={key}\n                  className={cn(\n                    'shrink-0 rounded-ds-full',\n                    index > 0 && overlapClass,\n                    spotlightClasses,\n                    user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                  )}\n                  style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n                >\n                  {renderAvatar(user, index)}\n                </div>\n              )\n            }\n\n            const avatarNode = (\n              <div\n                key={key}\n                className={cn(\n                  'relative shrink-0 rounded-ds-full',\n                  index > 0 && overlapClass,\n                  spotlightClasses,\n                  user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                )}\n                style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n              >\n                <Avatar\n                  size={size}\n                  className={borderClass}\n                >\n                  {user.image && (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  )}\n                  <AvatarFallback\n                    colorSeed={user.name}\n                  >\n                    {initials}\n                  </AvatarFallback>\n                </Avatar>\n                <AnimatePresence>\n                  {user.indicator && (\n                    <motion.span\n                      initial={{ scale: 0, opacity: 0 }}\n                      animate={{ scale: 1, opacity: 1 }}\n                      exit={{ scale: 0, opacity: 0 }}\n                      transition={springs.snappy}\n                      className={cn(\n                        'absolute top-0 right-0 rounded-ds-full ring-1 ring-surface-raised',\n                        indicatorDotClass,\n                        user.indicator === 'lead' ? 'bg-accent-9' :\n                        user.indicator === 'admin' ? 'bg-accent-9' : '',\n                      )}\n                    >\n                      {typeof user.indicator !== 'string' && user.indicator}\n                    </motion.span>\n                  )}\n                </AnimatePresence>\n              </div>\n            )\n\n            if (!showTooltip) return avatarNode\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{avatarNode}</TooltipTrigger>\n                <TooltipContent\n                  className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                  sideOffset={6}\n                >\n                  <p className=\"text-ds-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                {onOverflowClick ? (\n                  <button\n                    type=\"button\"\n                    onClick={onOverflowClick}\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'hover:scale-105 hover:bg-accent-3 transition-[transform,background-color] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </button>\n                ) : (\n                  <div\n                    role=\"img\"\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-default items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'transition-[transform,opacity] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </div>\n                )}\n              </TooltipTrigger>\n              <TooltipContent\n                className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                sideOffset={6}\n              >\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(max).map((user, i) => (\n                    <p key={i} className=\"text-ds-sm\">{user.name}</p>\n                  ))}\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </TooltipProvider>\n    )\n  },\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { AvatarGroup }\n"],"mappings":"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"}
+{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/composed/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport type { AvatarRing } from '../ui/avatar'\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '../ui/avatar'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { getInitials } from './lib/string-utils'\n\n// Ring classes applied at group level (not via Avatar's ring prop, which adds ring-offset-2 that gets clipped by overflow-hidden)\nconst groupRingMap: Record<string, string> = {\n  lead: 'ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised',\n  admin: 'ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised',\n  client: 'ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised',\n}\n\nconst avatarSizeVariants = cva(\n  'shrink-0 overflow-hidden rounded-pill border-2',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarSizeVariants> {\n  users: AvatarUser[]\n  max?: number\n  showTooltip?: boolean\n  /** Border color for the group avatars. @default 'surface-raised' */\n  borderColor?: 'surface-base' | 'surface-raised'\n  /** Callback when the \"+N\" overflow badge is clicked */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How much avatars spread apart on hover. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size,\n      showTooltip = true,\n      borderColor = 'surface-raised',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const displayed = users.slice(0, max)\n    const overflow = users.length - max\n\n    const overlapMap = {\n      xs: '-ml-ds-02',\n      sm: '-ml-ds-02b',\n      md: '-ml-ds-03',\n      lg: '-ml-ds-04',\n      xl: '-ml-ds-05',\n    }\n    const overlapClass = overlapMap[size ?? 'md']\n\n    // Match Avatar fallback font sizes so the \"+N\" badge text is consistent\n    const textSizeMap: Record<string, string> = {\n      xs: 'text-[9px]',\n      sm: 'text-ds-xs',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n      xl: 'text-ds-lg',\n    }\n    const textSizeClass = textSizeMap[size ?? 'md']\n\n    // Indicator dot scales with avatar size (matches Avatar's statusDotSizeMap)\n    const indicatorDotSizeMap: Record<string, string> = {\n      xs: 'h-1 w-1',\n      sm: 'h-1.5 w-1.5',\n      md: 'h-2 w-2',\n      lg: 'h-2.5 w-2.5',\n      xl: 'h-3 w-3',\n    }\n    const indicatorDotClass = indicatorDotSizeMap[size ?? 'md']\n\n    const borderClass =\n      borderColor === 'surface-base'\n        ? 'border-surface-base'\n        : 'border-surface-raised'\n\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const overlapPxMap: Record<string, number> = {\n      xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n    }\n    const resolvedSize = size ?? 'md'\n    const overlapPx = overlapPxMap[resolvedSize]\n    const expandMultiplier = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    function getExpandTransform(index: number): string {\n      if (!isHovered) return 'translateX(0)'\n      const shift = overlapPx * expandMultiplier\n      if (expandDirection === 'left') {\n        return `translateX(-${(totalVisible - 1 - index) * shift}px)`\n      }\n      return `translateX(${index * shift}px)`\n    }\n\n    const spotlightClasses =\n      'transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85'\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={`${users.length} team members`}\n          tabIndex={0}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsHovered(true)}\n          onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setIsHovered(false) }}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const initials = getInitials(user.name)\n\n            const key = `${user.name}-${index}`\n\n            if (renderAvatar) {\n              // When renderAvatar is provided, the consumer owns the Avatar entirely.\n              // Wrapper is positioning-only (overlap, z-index, spotlight) — no size/border/clip\n              // so the consumer's Avatar renders at its natural size without being clipped.\n              return (\n                <div\n                  key={key}\n                  className={cn(\n                    'shrink-0 rounded-pill',\n                    index > 0 && overlapClass,\n                    spotlightClasses,\n                    user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                  )}\n                  style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n                >\n                  {renderAvatar(user, index)}\n                </div>\n              )\n            }\n\n            const avatarNode = (\n              <div\n                key={key}\n                className={cn(\n                  'relative shrink-0 rounded-pill',\n                  index > 0 && overlapClass,\n                  spotlightClasses,\n                  user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                )}\n                style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n              >\n                <Avatar\n                  size={size}\n                  className={borderClass}\n                >\n                  {user.image && (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  )}\n                  <AvatarFallback\n                    colorSeed={user.name}\n                  >\n                    {initials}\n                  </AvatarFallback>\n                </Avatar>\n                <AnimatePresence>\n                  {user.indicator && (\n                    <motion.span\n                      initial={{ scale: 0, opacity: 0 }}\n                      animate={{ scale: 1, opacity: 1 }}\n                      exit={{ scale: 0, opacity: 0 }}\n                      transition={springs.snappy}\n                      className={cn(\n                        'absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised',\n                        indicatorDotClass,\n                        user.indicator === 'lead' ? 'bg-accent-9' :\n                        user.indicator === 'admin' ? 'bg-accent-9' : '',\n                      )}\n                    >\n                      {typeof user.indicator !== 'string' && user.indicator}\n                    </motion.span>\n                  )}\n                </AnimatePresence>\n              </div>\n            )\n\n            if (!showTooltip) return avatarNode\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{avatarNode}</TooltipTrigger>\n                <TooltipContent\n                  className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                  sideOffset={6}\n                >\n                  <p className=\"text-ds-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                {onOverflowClick ? (\n                  <button\n                    type=\"button\"\n                    onClick={onOverflowClick}\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'hover:scale-105 hover:bg-accent-3 transition-[transform,background-color] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </button>\n                ) : (\n                  <div\n                    role=\"img\"\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-default items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'transition-[transform,opacity] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </div>\n                )}\n              </TooltipTrigger>\n              <TooltipContent\n                className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                sideOffset={6}\n              >\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(max).map((user, i) => (\n                    <p key={i} className=\"text-ds-sm\">{user.name}</p>\n                  ))}\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </TooltipProvider>\n    )\n  },\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { AvatarGroup }\n"],"mappings":"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"}

package/dist/composed/bulk-action-bar.js

@@ -122,7 +122,7 @@ function p({ show: p, count: m, onClearSelection: h, actions: g, totalCount: _,
 			opacity: 0
 		},
 		transition: e.snappy,
-		className: t("fixed bottom-ds-06 left-1/2 z-sticky -translate-x-1/2", "flex items-center gap-ds-04 rounded-ds-lg border border-surface-border bg-surface-overlay px-ds-05 py-ds-03 shadow-floating", y),
+		className: t("fixed bottom-ds-06 left-1/2 z-sticky -translate-x-1/2", "flex items-center gap-ds-04 rounded-surface border border-surface-border bg-surface-overlay px-ds-05 py-ds-03 shadow-floating", y),
 		role: "toolbar",
 		"aria-label": `${m} items selected`,
 		onKeyDown: T,