@devalok/shilp-sutra 0.56.0 → 0.57.0

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 { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { durations,springs } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\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?: IconInput }\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?: IconInput\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\"><IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider></span>}\n      <span className=\"text-label-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-body-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={{ y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={springs.snappy}\n    >\n      <p className=\"text-body-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?: IconInput }\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?: IconInput }\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-body-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-body-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-body-xs font-medium rounded-pill px-ds-04 py-ds-02 shadow-floating\"\n      initial={{ 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 { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { durations,springs } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\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?: IconInput }\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?: IconInput\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\"><IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider></span>}\n      <span className=\"text-label-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-panel rounded-surface px-ds-05 py-ds-04\">\n        <p className=\"text-body-sm text-surface-fg\">{message.content}</p>\n      </div>\n    )\n  }\n\n  return (\n    <motion.div\n      className=\"bg-surface-panel rounded-surface px-ds-05 py-ds-04\"\n      initial={{ y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={springs.snappy}\n    >\n      <p className=\"text-body-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?: IconInput }\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?: IconInput }\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-body-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-body-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-body-xs font-medium rounded-pill px-ds-04 py-ds-02 shadow-floating\"\n      initial={{ 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

@@ -100,7 +100,7 @@ function y({ item: e, compact: r }) {
 							}),
 							e.detail ? /* @__PURE__ */ d("button", {
 								type: "button",
-								className: "rounded-control text-surface-fg-muted hover:underline hover:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
+								className: "rounded-control text-surface-fg-muted hover:underline hover:bg-surface-panel-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
 								onClick: () => {
 									e.detail && m((e) => !e);
 								},

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 type { IconInput } from '../ui/lib/icon-input'\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?: IconInput\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 detailId = React.useId()\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-body-xs' : 'text-body-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            {item.detail ? (\n              <button\n                type=\"button\"\n                className=\"rounded-control text-surface-fg-muted hover:underline hover:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                onClick={handleActionClick}\n                aria-expanded={expandedDetail}\n                aria-controls={detailId}\n              >\n                {item.action}\n              </button>\n            ) : (\n              <span className=\"text-surface-fg-muted\">{item.action}</span>\n            )}\n          </div>\n\n          <time\n            className={cn(\n              'shrink-0 whitespace-nowrap text-surface-fg-subtle',\n              compact ? 'text-body-xs' : 'text-body-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 id={detailId} className=\"mt-ds-02 animate-in fade-in slide-in-from-top-1 text-body-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={false}\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-label-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={false} 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={false} 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 type { IconInput } from '../ui/lib/icon-input'\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?: IconInput\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 detailId = React.useId()\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-body-xs' : 'text-body-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            {item.detail ? (\n              <button\n                type=\"button\"\n                className=\"rounded-control text-surface-fg-muted hover:underline hover:bg-surface-panel-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                onClick={handleActionClick}\n                aria-expanded={expandedDetail}\n                aria-controls={detailId}\n              >\n                {item.action}\n              </button>\n            ) : (\n              <span className=\"text-surface-fg-muted\">{item.action}</span>\n            )}\n          </div>\n\n          <time\n            className={cn(\n              'shrink-0 whitespace-nowrap text-surface-fg-subtle',\n              compact ? 'text-body-xs' : 'text-body-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 id={detailId} className=\"mt-ds-02 animate-in fade-in slide-in-from-top-1 text-body-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={false}\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-label-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={false} 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={false} 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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"}

package/dist/composed/avatar-group.d.ts

@@ -14,8 +14,13 @@ export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     max?: number;
     size?: Size;
     showTooltip?: boolean;
-    /** Border color for the group avatars. @default 'surface-raised' */
-    borderColor?: 'surface-base' | 'surface-raised';
+    /**
+     * Border color for the group avatars. @default 'surface-panel'
+     *
+     * `'surface-raised'` is the pre-0.57 name for `'surface-panel'` and still
+     * works — a widening, so nothing breaks. It is removed next major.
+     */
+    borderColor?: 'surface-base' | 'surface-panel' | 'surface-raised';
     /** Callback when the "+N" overflow badge is clicked (renders it as a button). */
     onOverflowClick?: () => void;
     /** Custom render function for each avatar (consumer owns the Avatar). */

package/dist/composed/avatar-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAIL,cAAc,EACd,KAAK,UAAU,EAChB,MAAM,cAAc,CAAA;AAWrB,KAAK,IAAI,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAWpE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAA;CAC/C;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAA;IAC/C,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,yEAAyE;IACzE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnE,gEAAgE;IAChE,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,gEAAgE;IAChE,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;IAC7C,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAiBD,QAAA,MAAM,WAAW,yFA4KhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAIL,cAAc,EACd,KAAK,UAAU,EAChB,MAAM,cAAc,CAAA;AAWrB,KAAK,IAAI,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAWpE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAA;CAC/C;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,cAAc,GAAG,eAAe,GAAG,gBAAgB,CAAA;IACjE,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,yEAAyE;IACzE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnE,gEAAgE;IAChE,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,gEAAgE;IAChE,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;IAC7C,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAiBD,QAAA,MAAM,WAAW,yFA4KhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/composed/avatar-group.js

@@ -30,10 +30,10 @@ var h = {
 	md: "size-2",
 	lg: "size-2.5",
 	xl: "size-3"
-}, y = u.forwardRef(({ users: y, max: b = 4, size: x = "md", showTooltip: S = !0, borderColor: C = "surface-raised", onOverflowClick: w, renderAvatar: T, expandDirection: E = "right", expandAmount: D = "default", label: O, className: k, onMouseEnter: A, onMouseLeave: j, onFocus: M, onBlur: N, ...P }, F) => {
+}, y = u.forwardRef(({ users: y, max: b = 4, size: x = "md", showTooltip: S = !0, borderColor: C = "surface-panel", onOverflowClick: w, renderAvatar: T, expandDirection: E = "right", expandAmount: D = "default", label: O, className: k, onMouseEnter: A, onMouseLeave: j, onFocus: M, onBlur: N, ...P }, F) => {
 	let I = m(), [L, R] = u.useState(!1);
 	if (y.length === 0) return null;
-	let z = Math.max(1, b), B = y.slice(0, z), V = y.length - z, H = g[x], U = C === "surface-base" ? "border-surface-base" : "border-surface-raised", W = C === "surface-base" ? "ring-offset-1 ring-offset-surface-base" : "ring-offset-1 ring-offset-surface-raised", G = _[x], K = {
+	let z = Math.max(1, b), B = y.slice(0, z), V = y.length - z, H = g[x], U = C === "surface-base" ? "border-surface-base" : "border-surface-panel", W = C === "surface-base" ? "ring-offset-1 ring-offset-surface-base" : "ring-offset-1 ring-offset-surface-panel", G = _[x], K = {
 		compact: .5,
 		default: 1,
 		wide: 1.5
@@ -75,7 +75,7 @@ var h = {
 					}),
 					e.indicator && /* @__PURE__ */ d("span", {
 						"aria-hidden": "true",
-						className: t("absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised", v[x], e.indicator === "lead" ? "bg-accent-9" : e.indicator === "admin" ? "bg-warning-9" : ""),
+						className: t("absolute top-0 right-0 rounded-pill ring-1 ring-surface-panel", v[x], e.indicator === "lead" ? "bg-accent-9" : e.indicator === "admin" ? "bg-warning-9" : ""),
 						children: typeof e.indicator != "string" && e.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 { type VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  avatarVariants,\n  type AvatarRing,\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\ntype Size = NonNullable<VariantProps<typeof avatarVariants>['size']>\n\n// Group-level ring. Applied here (not via Avatar's `ring` prop) because that adds\n// a ring-offset that gets clipped by the group's overflow; the offset surface is\n// derived from `borderColor` so it never seams against a surface-base blend.\nconst groupRingMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-2 ring-accent-7',\n  admin: 'ring-2 ring-warning-7',\n  client: 'ring-2 ring-info-7',\n}\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  /** Small top-right marker. `lead` = accent dot, `admin` = warning dot, or any node. */\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  users: AvatarUser[]\n  max?: number\n  size?: Size\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 (renders it as a button). */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar (consumer owns the Avatar). */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover/focus. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How far avatars spread on hover/focus. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n  /** Accessible label for the group. @default `${count} team members` */\n  label?: string\n}\n\n// Overlap (negative margin) + spread distance, keyed off the same per-size scale.\nconst overlapMap: Record<Size, string> = {\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}\nconst spreadPxMap: Record<Size, number> = {\n  xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n}\nconst indicatorDotMap: Record<Size, string> = {\n  xs: 'size-1', sm: 'size-1.5', md: 'size-2', lg: 'size-2.5', xl: 'size-3',\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size = 'md',\n      showTooltip = true,\n      borderColor = 'surface-raised',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      label,\n      className,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref,\n  ) => {\n    const reduced = useReducedMotion()\n    const [active, setActive] = React.useState(false)\n\n    // Empty group is not a focusable \"0 members\" target — render nothing.\n    if (users.length === 0) return null\n\n    const cap = Math.max(1, max)\n    const displayed = users.slice(0, cap)\n    const overflow = users.length - cap\n    const overlapClass = overlapMap[size]\n    const borderClass = borderColor === 'surface-base' ? 'border-surface-base' : 'border-surface-raised'\n    const ringOffsetClass = borderColor === 'surface-base'\n      ? 'ring-offset-1 ring-offset-surface-base'\n      : 'ring-offset-1 ring-offset-surface-raised'\n\n    const spreadPx = spreadPxMap[size]\n    const spreadMult = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    // Spread offset per index. Zero under reduced-motion (no positional animation).\n    const xFor = (index: number): number => {\n      if (!active || reduced) return 0\n      const shift = spreadPx * spreadMult\n      return expandDirection === 'left' ? -(totalVisible - 1 - index) * shift : index * shift\n    }\n\n    // framer governs the transition; reduced-motion collapses it to instant.\n    const spreadTransition = reduced ? { duration: 0 } : springs.snappy\n    // Gentle dim of non-focused peers; instant under reduced-motion.\n    const spotlight =\n      'transition-opacity duration-fast-02 ease-productive-standard motion-reduce:transition-none hover:z-30 focus-visible:z-30 group-hover:[&:not(:hover)]:opacity-80'\n\n    const onEnter = (e: React.MouseEvent<HTMLDivElement>) => { setActive(true); onMouseEnter?.(e) }\n    const onLeave = (e: React.MouseEvent<HTMLDivElement>) => { setActive(false); onMouseLeave?.(e) }\n    const onGroupFocus = (e: React.FocusEvent<HTMLDivElement>) => { setActive(true); onFocus?.(e) }\n    const onGroupBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget)) setActive(false)\n      onBlur?.(e)\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={label ?? `${users.length} team members`}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={onEnter}\n          onMouseLeave={onLeave}\n          onFocus={onGroupFocus}\n          onBlur={onGroupBlur}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const key = `${user.name}-${index}`\n            const extraRing = user.ring && user.ring !== 'none'\n              ? cn(groupRingMap[user.ring], ringOffsetClass)\n              : undefined\n\n            const inner = renderAvatar ? (\n              renderAvatar(user, index)\n            ) : (\n              <Avatar size={size} className={borderClass}>\n                {user.image && <AvatarImage src={user.image} alt=\"\" />}\n                <AvatarFallback colorSeed={user.name}>{getInitials(user.name)}</AvatarFallback>\n                {user.indicator && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised',\n                      indicatorDotMap[size],\n                      user.indicator === 'lead' ? 'bg-accent-9'\n                        : user.indicator === 'admin' ? 'bg-warning-9' : '',\n                    )}\n                  >\n                    {typeof user.indicator !== 'string' && user.indicator}\n                  </span>\n                )}\n              </Avatar>\n            )\n\n            // Each avatar is a focusable, labelled trigger so keyboard/AT users reach\n            // the member name (via the tooltip) and get a visible focus ring.\n            const node = (\n              <motion.button\n                type=\"button\"\n                aria-label={user.name}\n                animate={{ x: xFor(index) }}\n                transition={spreadTransition}\n                style={{ zIndex: displayed.length - index }}\n                className={cn(\n                  'relative shrink-0 rounded-pill focus-ring',\n                  index > 0 && overlapClass,\n                  spotlight,\n                  extraRing,\n                )}\n              >\n                {inner}\n              </motion.button>\n            )\n\n            if (!showTooltip) return <React.Fragment key={key}>{node}</React.Fragment>\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{node}</TooltipTrigger>\n                <TooltipContent sideOffset={6}>\n                  <p className=\"text-body-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <motion.button\n                  type=\"button\"\n                  onClick={onOverflowClick}\n                  aria-label={`${overflow} more ${overflow === 1 ? 'member' : 'members'}`}\n                  animate={{ x: xFor(displayed.length) }}\n                  transition={spreadTransition}\n                  style={{ zIndex: 0 }}\n                  className={cn(\n                    'relative shrink-0 rounded-pill focus-ring',\n                    overlapClass,\n                    spotlight,\n                    !onOverflowClick && 'cursor-default',\n                  )}\n                >\n                  <Avatar size={size} className={borderClass}>\n                    <AvatarFallback className=\"bg-accent-2 font-semibold text-accent-11\">\n                      +{overflow}\n                    </AvatarFallback>\n                  </Avatar>\n                </motion.button>\n              </TooltipTrigger>\n              <TooltipContent sideOffset={6}>\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(cap).map((user, i) => (\n                    <p key={i} className=\"text-body-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 { type VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  avatarVariants,\n  type AvatarRing,\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\ntype Size = NonNullable<VariantProps<typeof avatarVariants>['size']>\n\n// Group-level ring. Applied here (not via Avatar's `ring` prop) because that adds\n// a ring-offset that gets clipped by the group's overflow; the offset surface is\n// derived from `borderColor` so it never seams against a surface-base blend.\nconst groupRingMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-2 ring-accent-7',\n  admin: 'ring-2 ring-warning-7',\n  client: 'ring-2 ring-info-7',\n}\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  /** Small top-right marker. `lead` = accent dot, `admin` = warning dot, or any node. */\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  users: AvatarUser[]\n  max?: number\n  size?: Size\n  showTooltip?: boolean\n  /**\n   * Border color for the group avatars. @default 'surface-panel'\n   *\n   * `'surface-raised'` is the pre-0.57 name for `'surface-panel'` and still\n   * works — a widening, so nothing breaks. It is removed next major.\n   */\n  borderColor?: 'surface-base' | 'surface-panel' | 'surface-raised'\n  /** Callback when the \"+N\" overflow badge is clicked (renders it as a button). */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar (consumer owns the Avatar). */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover/focus. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How far avatars spread on hover/focus. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n  /** Accessible label for the group. @default `${count} team members` */\n  label?: string\n}\n\n// Overlap (negative margin) + spread distance, keyed off the same per-size scale.\nconst overlapMap: Record<Size, string> = {\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}\nconst spreadPxMap: Record<Size, number> = {\n  xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n}\nconst indicatorDotMap: Record<Size, string> = {\n  xs: 'size-1', sm: 'size-1.5', md: 'size-2', lg: 'size-2.5', xl: 'size-3',\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size = 'md',\n      showTooltip = true,\n      borderColor = 'surface-panel',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      label,\n      className,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref,\n  ) => {\n    const reduced = useReducedMotion()\n    const [active, setActive] = React.useState(false)\n\n    // Empty group is not a focusable \"0 members\" target — render nothing.\n    if (users.length === 0) return null\n\n    const cap = Math.max(1, max)\n    const displayed = users.slice(0, cap)\n    const overflow = users.length - cap\n    const overlapClass = overlapMap[size]\n    const borderClass = borderColor === 'surface-base' ? 'border-surface-base' : 'border-surface-panel'\n    const ringOffsetClass = borderColor === 'surface-base'\n      ? 'ring-offset-1 ring-offset-surface-base'\n      : 'ring-offset-1 ring-offset-surface-panel'\n\n    const spreadPx = spreadPxMap[size]\n    const spreadMult = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    // Spread offset per index. Zero under reduced-motion (no positional animation).\n    const xFor = (index: number): number => {\n      if (!active || reduced) return 0\n      const shift = spreadPx * spreadMult\n      return expandDirection === 'left' ? -(totalVisible - 1 - index) * shift : index * shift\n    }\n\n    // framer governs the transition; reduced-motion collapses it to instant.\n    const spreadTransition = reduced ? { duration: 0 } : springs.snappy\n    // Gentle dim of non-focused peers; instant under reduced-motion.\n    const spotlight =\n      'transition-opacity duration-fast-02 ease-productive-standard motion-reduce:transition-none hover:z-30 focus-visible:z-30 group-hover:[&:not(:hover)]:opacity-80'\n\n    const onEnter = (e: React.MouseEvent<HTMLDivElement>) => { setActive(true); onMouseEnter?.(e) }\n    const onLeave = (e: React.MouseEvent<HTMLDivElement>) => { setActive(false); onMouseLeave?.(e) }\n    const onGroupFocus = (e: React.FocusEvent<HTMLDivElement>) => { setActive(true); onFocus?.(e) }\n    const onGroupBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget)) setActive(false)\n      onBlur?.(e)\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={label ?? `${users.length} team members`}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={onEnter}\n          onMouseLeave={onLeave}\n          onFocus={onGroupFocus}\n          onBlur={onGroupBlur}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const key = `${user.name}-${index}`\n            const extraRing = user.ring && user.ring !== 'none'\n              ? cn(groupRingMap[user.ring], ringOffsetClass)\n              : undefined\n\n            const inner = renderAvatar ? (\n              renderAvatar(user, index)\n            ) : (\n              <Avatar size={size} className={borderClass}>\n                {user.image && <AvatarImage src={user.image} alt=\"\" />}\n                <AvatarFallback colorSeed={user.name}>{getInitials(user.name)}</AvatarFallback>\n                {user.indicator && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'absolute top-0 right-0 rounded-pill ring-1 ring-surface-panel',\n                      indicatorDotMap[size],\n                      user.indicator === 'lead' ? 'bg-accent-9'\n                        : user.indicator === 'admin' ? 'bg-warning-9' : '',\n                    )}\n                  >\n                    {typeof user.indicator !== 'string' && user.indicator}\n                  </span>\n                )}\n              </Avatar>\n            )\n\n            // Each avatar is a focusable, labelled trigger so keyboard/AT users reach\n            // the member name (via the tooltip) and get a visible focus ring.\n            const node = (\n              <motion.button\n                type=\"button\"\n                aria-label={user.name}\n                animate={{ x: xFor(index) }}\n                transition={spreadTransition}\n                style={{ zIndex: displayed.length - index }}\n                className={cn(\n                  'relative shrink-0 rounded-pill focus-ring',\n                  index > 0 && overlapClass,\n                  spotlight,\n                  extraRing,\n                )}\n              >\n                {inner}\n              </motion.button>\n            )\n\n            if (!showTooltip) return <React.Fragment key={key}>{node}</React.Fragment>\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{node}</TooltipTrigger>\n                <TooltipContent sideOffset={6}>\n                  <p className=\"text-body-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <motion.button\n                  type=\"button\"\n                  onClick={onOverflowClick}\n                  aria-label={`${overflow} more ${overflow === 1 ? 'member' : 'members'}`}\n                  animate={{ x: xFor(displayed.length) }}\n                  transition={spreadTransition}\n                  style={{ zIndex: 0 }}\n                  className={cn(\n                    'relative shrink-0 rounded-pill focus-ring',\n                    overlapClass,\n                    spotlight,\n                    !onOverflowClick && 'cursor-default',\n                  )}\n                >\n                  <Avatar size={size} className={borderClass}>\n                    <AvatarFallback className=\"bg-accent-2 font-semibold text-accent-11\">\n                      +{overflow}\n                    </AvatarFallback>\n                  </Avatar>\n                </motion.button>\n              </TooltipTrigger>\n              <TooltipContent sideOffset={6}>\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(cap).map((user, i) => (\n                    <p key={i} className=\"text-body-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/command-palette.js

@@ -146,7 +146,7 @@ var b = m.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
 							spellCheck: !1
 						}),
 						/* @__PURE__ */ h("kbd", {
-							className: "hidden shrink-0 select-none rounded-control border border-card-strong bg-surface-raised px-ds-02b py-ds-01 text-body-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex",
+							className: "hidden shrink-0 select-none rounded-control border border-card-strong bg-surface-panel px-ds-02b py-ds-01 text-body-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex",
 							children: "Esc"
 						})
 					]
@@ -205,7 +205,7 @@ var b = m.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
 									n.onSelect(), R(!1);
 								},
 								onMouseEnter: () => H(a),
-								className: r("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", s ? "bg-surface-raised-hover text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"),
+								className: r("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", s ? "bg-surface-panel-hover text-surface-fg" : "text-surface-fg-muted hover:bg-surface-panel-hover"),
 								children: [
 									n.icon && /* @__PURE__ */ h("span", {
 										className: r("[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0 transition-colors duration-fast-02 ease-productive-standard", s ? "text-accent-11" : "text-surface-fg-subtle"),
@@ -228,7 +228,7 @@ var b = m.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
 									n.shortcut && /* @__PURE__ */ h("span", {
 										className: "flex shrink-0 items-center gap-ds-01",
 										children: y(n.shortcut).map((e, t) => /* @__PURE__ */ h("kbd", {
-											className: r("inline-flex min-w-ds-05b items-center justify-center rounded border px-ds-02b py-ds-01 text-body-xs font-medium shadow-kbd transition-colors duration-fast-02 ease-productive-standard", s ? "bg-accent-2 text-accent-11 border-accent-6" : "bg-surface-raised text-surface-fg-subtle border-surface-border-strong"),
+											className: r("inline-flex min-w-ds-05b items-center justify-center rounded border px-ds-02b py-ds-01 text-body-xs font-medium shadow-kbd transition-colors duration-fast-02 ease-productive-standard", s ? "bg-accent-2 text-accent-11 border-accent-6" : "bg-surface-panel text-surface-fg-subtle border-surface-border-strong"),
 											children: e === "Ctrl" || e === "ctrl" ? f(ue) : e
 										}, t))
 									}),
@@ -260,14 +260,14 @@ var b = m.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
 						children: [e.keys === "↑↓" ? /* @__PURE__ */ g("div", {
 							className: "flex items-center gap-ds-01",
 							children: [/* @__PURE__ */ h("kbd", {
-								className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-card-strong bg-surface-raised shadow-kbd",
+								className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-card-strong bg-surface-panel shadow-kbd",
 								children: /* @__PURE__ */ h(i, {
 									icon: ie,
 									size: "xs",
 									className: "text-surface-fg-subtle"
 								})
 							}), /* @__PURE__ */ h("kbd", {
-								className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-card-strong bg-surface-raised shadow-kbd",
+								className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-card-strong bg-surface-panel shadow-kbd",
 								children: /* @__PURE__ */ h(i, {
 									icon: re,
 									size: "xs",
@@ -275,14 +275,14 @@ var b = m.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
 								})
 							})]
 						}) : e.keys === "↵" ? /* @__PURE__ */ h("kbd", {
-							className: "inline-flex h-ds-05b items-center justify-center rounded-control border border-card-strong bg-surface-raised px-ds-02b shadow-kbd",
+							className: "inline-flex h-ds-05b items-center justify-center rounded-control border border-card-strong bg-surface-panel px-ds-02b shadow-kbd",
 							children: /* @__PURE__ */ h(i, {
 								icon: _,
 								size: "xs",
 								className: "text-surface-fg-subtle"
 							})
 						}) : /* @__PURE__ */ h("kbd", {
-							className: "inline-flex h-ds-05b items-center justify-center rounded-control border border-card-strong bg-surface-raised px-ds-02b text-caption font-medium text-surface-fg-subtle shadow-kbd",
+							className: "inline-flex h-ds-05b items-center justify-center rounded-control border border-card-strong bg-surface-panel px-ds-02b text-caption font-medium text-surface-fg-subtle shadow-kbd",
 							children: e.keys
 						}), /* @__PURE__ */ h("span", {
 							className: "text-caption text-surface-fg-subtle",

package/dist/composed/command-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.js","names":[],"sources":["../../src/composed/command-palette.tsx"],"sourcesContent":["'use client'\n\n/**\n * CommandPalette -- Keyboard-driven command palette (Ctrl+K / Cmd+K).\n *\n * Adapted from Karm V2. Uses ui/Dialog as the overlay.\n * All V1 color tokens replaced with semantic design-system tokens.\n */\nimport { IconArrowDown,IconArrowUp, IconCornerDownLeft, IconSearch } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\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 { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs,tweens } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport { VisuallyHidden } from '../ui/visually-hidden'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface CommandItem {\n  id: string\n  /** Display label — string or ReactNode. When ReactNode, provide `filterValue` for search filtering. */\n  label: string | React.ReactNode\n  /** Optional description — string or ReactNode. */\n  description?: string | React.ReactNode\n  icon?: IconInput\n  /** Keyboard shortcut hint displayed as keycap badges (e.g., \"G D\", \"Ctrl+N\"). */\n  shortcut?: string\n  /** Custom render override for the label. Receives the current search query for match highlighting. */\n  renderLabel?: (query: string) => React.ReactNode\n  /** Plain-text value used for search filtering when `label` is a ReactNode. Falls back to `label` if string. */\n  filterValue?: string\n  onSelect: () => void\n}\n\nexport interface CommandGroup {\n  label: string\n  items: CommandItem[]\n}\n\n/** A single keyboard hint shown in the footer. */\nexport interface FooterHint {\n  /** Key(s) to display — rendered as text inside `<kbd>` or as an icon. */\n  keys: string\n  /** Human-readable label for the hint (e.g., \"Navigate\", \"Select\"). */\n  label: string\n}\n\n/**\n * A searchable command palette with keyboard navigation (Ctrl+K / Cmd+K).\n * Supports grouped items, custom keybindings, controlled/uncontrolled open state,\n * and custom empty states.\n */\nexport interface CommandPaletteProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Item groups displayed in the palette. Each group has a label and an array of CommandItems. */\n  groups?: CommandGroup[]\n  /** Placeholder text for the search input. */\n  placeholder?: string\n  /** Called on every search input change with the current query string. */\n  onSearch?: (query: string) => void\n  /** Simple text shown when no results match. Overridden by `emptyState` if provided. */\n  emptyMessage?: string\n  /** Full custom empty state ReactNode — overrides `emptyMessage` when provided. */\n  emptyState?: React.ReactNode\n  // -- Controlled/uncontrolled open state (P1 #4) --\n  /** Controlled open state. */\n  open?: boolean\n  /** Default open state for uncontrolled usage. */\n  defaultOpen?: boolean\n  /** Called when the open state changes. */\n  onOpenChange?: (open: boolean) => void\n  // -- Keyboard shortcut customization (P1 #6) --\n  /** Keybinding(s) to toggle the palette. Pass `false` to disable.\n   *  String format: modifier+key, e.g., 'mod+k', 'ctrl+shift+p'.\n   *  'mod' maps to Meta on macOS, Ctrl otherwise. */\n  keybinding?: string | string[] | false\n  // -- Configurable max-height (P2 #8) --\n  /** Max height of the results container. CSS value. Default '320px'. */\n  maxHeight?: string | number\n  // -- Custom footer hints (P2 #11) --\n  /** Custom footer keyboard hints. Pass `false` to hide the footer entirely. */\n  footerHints?: FooterHint[] | false\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\nimport { getIsMac, getModifierDisplay,matchesKeybinding } from '../ui/lib/keybinding'\n\n/** Get the text-searchable value from a CommandItem. */\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\n/** Get the text-searchable description from a CommandItem. */\nfunction getFilterDescription(item: CommandItem): string {\n  if (typeof item.description === 'string') return item.description\n  return ''\n}\n\n/** Parse a shortcut string like \"G D\" or \"Ctrl+N\" into individual keycap segments. */\nfunction parseShortcutKeys(shortcut: string): string[] {\n  // If it has \"+\" separator (Ctrl+Shift+N style), split on +\n  if (shortcut.includes('+')) {\n    return shortcut.split('+').map(s => s.trim()).filter(Boolean)\n  }\n  // Otherwise split on spaces (G D style)\n  return shortcut.split(/\\s+/).filter(Boolean)\n}\n\n// -----------------------------------------------------------------------\n// CommandPalette\n// -----------------------------------------------------------------------\n\nconst CommandPalette = React.forwardRef<HTMLDivElement, CommandPaletteProps>(\n  function CommandPalette(\n    {\n      groups = [],\n      placeholder = 'Search or jump to...',\n      onSearch,\n      emptyMessage = 'No results found.',\n      emptyState,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      keybinding = 'mod+k',\n      maxHeight = '320px',\n      footerHints,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  // -- Controlled/uncontrolled open state --\n  const isControlled = openProp !== undefined\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const open = isControlled ? openProp : internalOpen\n\n  // Use a ref for the current open value to avoid stale closures in setOpen\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 = typeof nextOpen === 'function' ? nextOpen(openRef.current) : nextOpen\n      if (!isControlled) {\n        setInternalOpen(resolved)\n      }\n      onOpenChange?.(resolved)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const [query, setQuery] = React.useState('')\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const listRef = React.useRef<HTMLDivElement>(null)\n  const instanceId = React.useId()\n  const listboxId = `command-palette-listbox-${instanceId}`\n\n  // -- Reduced motion (P2 #12) --\n  const { reducedMotion: isReduced } = useMotion()\n  const noMotionTransition = { duration: 0 }\n\n  // -- Platform detection (P2 #13) --\n  const isMac = React.useMemo(() => getIsMac(), [])\n\n  // Filter groups based on query\n  const filteredGroups = React.useMemo(() => {\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])\n\n  const filteredItems = React.useMemo(\n    () => filteredGroups.flatMap((g) => g.items),\n    [filteredGroups],\n  )\n\n  // Global keyboard shortcut\n  React.useEffect(() => {\n    if (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  }, [keybinding, setOpen])\n\n  // Reset state when opening\n  React.useEffect(() => {\n    if (open) {\n      setQuery('')\n      setActiveIndex(0)\n      requestAnimationFrame(() => {\n        inputRef.current?.focus()\n      })\n    }\n  }, [open])\n\n  // Keyboard navigation inside the palette\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev < filteredItems.length - 1 ? prev + 1 : 0,\n        )\n        break\n      }\n      case 'ArrowUp': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev > 0 ? prev - 1 : filteredItems.length - 1,\n        )\n        break\n      }\n      case 'Enter': {\n        e.preventDefault()\n        const item = filteredItems[activeIndex]\n        if (item) {\n          item.onSelect()\n          setOpen(false)\n        }\n        break\n      }\n      case 'Escape': {\n        e.preventDefault()\n        setOpen(false)\n        break\n      }\n    }\n  }\n\n  // Scroll active item into view\n  React.useEffect(() => {\n    const activeEl = listRef.current?.querySelector(\n      `[data-command-index=\"${activeIndex}\"]`,\n    )\n    activeEl?.scrollIntoView({ block: 'nearest' })\n  }, [activeIndex])\n\n  const handleQueryChange = (value: string) => {\n    setQuery(value)\n    setActiveIndex(0)\n    onSearch?.(value)\n  }\n\n  // Build a map of item id -> flat index 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  // -- Resolve motion transitions --\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  // -- Resolve max height CSS value --\n  const maxHeightValue = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n\n  // -- Resolve footer hints --\n  const resolvedFooterHints: FooterHint[] | false =\n    footerHints === false\n      ? false\n      : footerHints ?? [\n          { keys: '↑↓', label: 'Navigate' },\n          { keys: '↵', label: 'Select' },\n          { keys: 'Esc', label: 'Close' },\n        ]\n\n  // Handle dialog open change (from Dialog's own close mechanisms)\n  const handleDialogOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      setOpen(nextOpen)\n    },\n    [setOpen],\n  )\n\n  return (\n    <Dialog open={open} onOpenChange={handleDialogOpenChange}>\n      <DialogPortal>\n        <DialogOverlay\n          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        />\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 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          onKeyDown={handleKeyDown}\n        >\n          <VisuallyHidden>\n            <DialogTitle>Command Palette</DialogTitle>\n            <DialogDescription>\n              Search or jump to pages, projects, tasks, and actions\n            </DialogDescription>\n          </VisuallyHidden>\n\n          {/* Search input */}\n          <div className=\"flex items-center gap-ds-04 border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <motion.span\n              initial={noInit ?? { opacity: 0, scale: 0.96 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={springSnappy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n            </motion.span>\n            <input\n              ref={inputRef}\n              value={query}\n              onChange={(e) => handleQueryChange(e.target.value)}\n              placeholder={placeholder}\n              role=\"combobox\"\n              aria-expanded={true}\n              aria-controls={listboxId}\n              aria-activedescendant={filteredItems[activeIndex] ? `command-item-${instanceId}-${filteredItems[activeIndex].id}` : undefined}\n              aria-autocomplete=\"list\"\n              className={cn(\n                'flex-1 bg-transparent text-body-lg text-surface-fg outline-hidden',\n                'placeholder:text-surface-fg-subtle',\n              )}\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck={false}\n            />\n            <kbd className=\"hidden shrink-0 select-none rounded-control border border-card-strong bg-surface-raised px-ds-02b py-ds-01 text-body-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex\">\n              Esc\n            </kbd>\n          </div>\n\n          {/* Results */}\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 && (\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-body-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={isReduced ? noMotionTransition : { ...tweens.fade, delay: groupIdx * 0.06 }}\n                className=\"mb-ds-02\"\n              >\n                <div className=\"px-ds-03 pb-ds-02 pt-ds-03\">\n                  <span className=\"text-label-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-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={isReduced ? noMotionTransition : { ...springs.snappy, delay: itemIndex * 0.03 }}\n                      onClick={() => {\n                        item.onSelect()\n                        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 ? 'text-accent-11' : 'text-surface-fg-subtle',\n                          )}\n                          aria-hidden=\"true\"\n                        >\n                          <IconProvider size=\"sm\">{normalizeIcon(item.icon)}</IconProvider>\n                        </span>\n                      )}\n                      <div className=\"flex min-w-0 flex-1 flex-col\">\n                        <span className=\"truncate text-body-md\">\n                          {item.renderLabel ? item.renderLabel(query) : item.label}\n                        </span>\n                        {item.description && (\n                          <span className=\"line-clamp-1 text-body-sm text-surface-fg-subtle\">\n                            {item.description}\n                          </span>\n                        )}\n                      </div>\n                      {item.shortcut && (\n                        <span className=\"flex shrink-0 items-center gap-ds-01\">\n                          {parseShortcutKeys(item.shortcut).map((key, i) => (\n                            <kbd\n                              key={i}\n                              className={cn(\n                                'inline-flex min-w-ds-05b items-center justify-center rounded border px-ds-02b py-ds-01 text-body-xs font-medium shadow-kbd transition-colors duration-fast-02 ease-productive-standard',\n                                isActive\n                                  ? 'bg-accent-2 text-accent-11 border-accent-6'\n                                  : 'bg-surface-raised text-surface-fg-subtle border-surface-border-strong',\n                              )}\n                            >\n                              {key === 'Ctrl' || key === 'ctrl' ? getModifierDisplay(isMac) : key}\n                            </kbd>\n                          ))}\n                        </span>\n                      )}\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 icon={IconCornerDownLeft} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n                          </motion.span>\n                        )}\n                      </AnimatePresence>\n                    </motion.button>\n                  )\n                })}\n              </motion.div>\n            ))}\n          </div>\n\n          {/* Footer with keyboard hints */}\n          {resolvedFooterHints !== false && (\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              {resolvedFooterHints.map((hint, i) => (\n                <div key={i} className=\"flex items-center gap-ds-02b\">\n                  {hint.keys === '↑↓' ? (\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-card-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-card-strong bg-surface-raised shadow-kbd\">\n                        <Icon icon={IconArrowDown} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                      </kbd>\n                    </div>\n                  ) : hint.keys === '↵' ? (\n                    <kbd className=\"inline-flex h-ds-05b items-center justify-center rounded-control border border-card-strong bg-surface-raised px-ds-02b shadow-kbd\">\n                      <Icon icon={IconCornerDownLeft} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                    </kbd>\n                  ) : (\n                    <kbd className=\"inline-flex h-ds-05b items-center justify-center rounded-control border border-card-strong bg-surface-raised px-ds-02b text-caption font-medium text-surface-fg-subtle shadow-kbd\">\n                      {hint.keys}\n                    </kbd>\n                  )}\n                  <span className=\"text-caption text-surface-fg-subtle\">\n                    {hint.label}\n                  </span>\n                </div>\n              ))}\n            </motion.div>\n          )}\n        </DialogContentRaw>\n      </DialogPortal>\n    </Dialog>\n  )\n  },\n)\n\nCommandPalette.displayName = 'CommandPalette'\n\nexport { CommandPalette }\n"],"mappings":";;;;;;;;;;;;;;;AAyGA,SAAS,GAAe,GAA2B;CAGjD,OAFI,EAAK,cAAoB,EAAK,cAC9B,OAAO,EAAK,SAAU,WAAiB,EAAK,QACzC;AACT;AAGA,SAAS,GAAqB,GAA2B;CAEvD,OADI,OAAO,EAAK,eAAgB,WAAiB,EAAK,cAC/C;AACT;AAGA,SAAS,EAAkB,GAA4B;CAMrD,OAJI,EAAS,SAAS,GAAG,IAChB,EAAS,MAAM,GAAG,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,OAAO,IAGvD,EAAS,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;AAC7C;AAMA,IAAM,IAAiB,EAAM,WAC3B,SACE,EACE,YAAS,CAAC,GACV,iBAAc,wBACd,cACA,kBAAe,qBACf,eACA,MAAM,GACN,gBACA,iBACA,gBAAa,SACb,eAAY,SACZ,gBACA,cACA,GAAG,KAEL,GACA;CAEF,IAAM,IAAe,MAAa,KAAA,GAC5B,CAAC,GAAc,KAAmB,EAAM,SAAS,KAAe,EAAK,GACrE,IAAO,IAAe,IAAW,GAGjC,IAAU,EAAM,OAAO,CAAI;CACjC,EAAQ,UAAU;CAElB,IAAM,IAAU,EAAM,aACnB,MAAqD;EACpD,IAAM,IAAW,OAAO,KAAa,aAAa,EAAS,EAAQ,OAAO,IAAI;EAI9E,AAHK,KACH,EAAgB,CAAQ,GAE1B,IAAe,CAAQ;CACzB,GACA,CAAC,GAAc,CAAY,CAC7B,GAEM,CAAC,GAAO,KAAY,EAAM,SAAS,EAAE,GACrC,CAAC,GAAa,KAAkB,EAAM,SAAS,CAAC,GAChD,IAAW,EAAM,OAAyB,IAAI,GAC9C,IAAU,EAAM,OAAuB,IAAI,GAC3C,IAAa,EAAM,MAAM,GACzB,IAAY,2BAA2B,KAGvC,EAAE,eAAe,MAAc,EAAU,GACzC,IAAqB,EAAE,UAAU,EAAE,GAGnC,KAAQ,EAAM,cAAc,EAAS,GAAG,CAAC,CAAC,GAG1C,IAAiB,EAAM,cAAc;EACzC,IAAI,CAAC,EAAM,KAAK,GAAG,OAAO;EAC1B,IAAM,IAAI,EAAM,YAAY;EAC5B,OAAO,EACJ,KAAK,OAAW;GACf,GAAG;GACH,OAAO,EAAM,MAAM,QAChB,MACC,GAAe,CAAI,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,KAC7C,GAAqB,CAAI,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CACvD;EACF,EAAE,CAAC,CACF,QAAQ,MAAU,EAAM,MAAM,SAAS,CAAC;CAC7C,GAAG,CAAC,GAAQ,CAAK,CAAC,GAEZ,IAAgB,EAAM,cACpB,EAAe,SAAS,MAAM,EAAE,KAAK,GAC3C,CAAC,CAAc,CACjB;CAsBA,AAnBA,EAAM,gBAAgB;EACpB,IAAI,MAAe,IAAO;EAE1B,IAAM,IAAW,MAAM,QAAQ,CAAU,IAAI,IAAa,CAAC,CAAU;EAErE,SAAS,EAAc,GAAkB;GACvC,KAAK,IAAM,KAAW,GACpB,IAAI,EAAkB,GAAG,CAAO,GAAG;IAEjC,AADA,EAAE,eAAe,GACjB,GAAS,MAAS,CAAC,CAAI;IACvB;GACF;EAEJ;EAEA,OADA,SAAS,iBAAiB,WAAW,CAAa,SACrC,SAAS,oBAAoB,WAAW,CAAa;CACpE,GAAG,CAAC,GAAY,CAAO,CAAC,GAGxB,EAAM,gBAAgB;EACpB,AAAI,MACF,EAAS,EAAE,GACX,EAAe,CAAC,GAChB,4BAA4B;GAC1B,EAAS,SAAS,MAAM;EAC1B,CAAC;CAEL,GAAG,CAAC,CAAI,CAAC;CAGT,IAAM,MAAiB,MAA2B;EAChD,QAAQ,EAAE,KAAV;GACE,KAAK;IAEH,AADA,EAAE,eAAe,GACjB,GAAgB,MACd,IAAO,EAAc,SAAS,IAAI,IAAO,IAAI,CAC/C;IACA;GAEF,KAAK;IAEH,AADA,EAAE,eAAe,GACjB,GAAgB,MACd,IAAO,IAAI,IAAO,IAAI,EAAc,SAAS,CAC/C;IACA;GAEF,KAAK,SAAS;IACZ,EAAE,eAAe;IACjB,IAAM,IAAO,EAAc;IAC3B,AAAI,MACF,EAAK,SAAS,GACd,EAAQ,EAAK;IAEf;GACF;GACA,KAAK;IAEH,AADA,EAAE,eAAe,GACjB,EAAQ,EAAK;IACb;EAEJ;CACF;CAGA,EAAM,gBAAgB;EAIpB,CAHiB,EAAQ,SAAS,cAChC,wBAAwB,EAAY,GACtC,EAAA,EACU,eAAe,EAAE,OAAO,UAAU,CAAC;CAC/C,GAAG,CAAC,CAAW,CAAC;CAEhB,IAAM,MAAqB,MAAkB;EAG3C,AAFA,EAAS,CAAK,GACd,EAAe,CAAC,GAChB,KAAW,CAAK;CAClB,GAGM,KAAe,EAAM,cAAc;EACvC,IAAM,oBAAM,IAAI,IAAoB,GAChC,IAAM;EACV,KAAK,IAAM,KAAS,GAClB,KAAK,IAAM,KAAQ,EAAM,OACvB,EAAI,IAAI,EAAK,IAAI,GAAK;EAG1B,OAAO;CACT,GAAG,CAAC,CAAc,CAAC,GAGb,KAAe,IAAY,IAAqB,EAAQ,QACxD,IAAY,IAAY,IAAqB,EAAO,MACpD,IAAS,IAAY;EAAE,SAAS;EAAG,OAAO;EAAG,GAAG;CAAE,IAAI,KAAA,GAGtD,KAAiB,OAAO,KAAc,WAAW,GAAG,EAAU,MAAM,GAGpE,IACJ,MAAgB,KACZ,KACA,KAAe;EACb;GAAE,MAAM;GAAM,OAAO;EAAW;EAChC;GAAE,MAAM;GAAK,OAAO;EAAS;EAC7B;GAAE,MAAM;GAAO,OAAO;EAAQ;CAChC;CAUN,OACE,kBAAC,GAAD;EAAc;EAAM,cARS,EAAM,aAClC,MAAsB;GACrB,EAAQ,CAAQ;EAClB,GACA,CAAC,CAAO,CAI0B;YAChC,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,IAAD,EACE,WAAU,6JACX,CAAA,GACD,kBAAC,GAAD;GACO;GACL,GAAI;GACJ,WAAW,EACT,0EACA,wEACA,qFACA,8DACA,gEACA,sFACA,gFACA,CACF;GACA,WAAW;aAbb;IAeE,kBAAC,IAAD,EAAA,UAAA,CACE,kBAAC,IAAD,EAAA,UAAa,kBAA4B,CAAA,GACzC,kBAAC,GAAD,EAAA,UAAmB,wDAEA,CAAA,CACL,EAAA,CAAA;IAGhB,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,EAAO,MAAR;OACE,SAAS,KAAU;QAAE,SAAS;QAAG,OAAO;OAAK;OAC7C,SAAS;QAAE,SAAS;QAAG,OAAO;OAAE;OAChC,YAAY;OACZ,WAAU;iBAEV,kBAAC,GAAD;QAAM,MAAM;QAAY,MAAK;QAAK,QAAO;QAAQ,WAAU;OAA0B,CAAA;MAC1E,CAAA;MACb,kBAAC,SAAD;OACE,KAAK;OACL,OAAO;OACP,WAAW,MAAM,GAAkB,EAAE,OAAO,KAAK;OACpC;OACb,MAAK;OACL,iBAAe;OACf,iBAAe;OACf,yBAAuB,EAAc,KAAe,gBAAgB,EAAW,GAAG,EAAc,EAAY,CAAC,OAAO,KAAA;OACpH,qBAAkB;OAClB,WAAW,EACT,qEACA,oCACF;OACA,cAAa;OACb,aAAY;OACZ,YAAY;MACb,CAAA;MACD,kBAAC,OAAD;OAAK,WAAU;iBAAuL;MAEjM,CAAA;KACF;;IAGL,kBAAC,OAAD;KACE,KAAK;KACL,IAAI;KACJ,MAAK;KACL,cAAW;KACX,WAAU;KACV,OAAO,EAAE,WAAW,GAAe;eANrC,CAQG,EAAe,WAAW,KACzB,kBAAC,EAAO,KAAR;MACE,SAAS,KAAU,EAAE,SAAS,EAAE;MAChC,SAAS,EAAE,SAAS,EAAE;MACtB,YAAY;MACZ,WAAU;gBAET,KACC,kBAAC,KAAD;OAAG,WAAU;iBACV;MACA,CAAA;KAEK,CAAA,GAGb,EAAe,KAAK,GAAO,MAC1B,kBAAC,EAAO,KAAR;MAEE,SAAS,KAAU,EAAE,SAAS,EAAE;MAChC,SAAS,EAAE,SAAS,EAAE;MACtB,YAAY,IAAY,IAAqB;OAAE,GAAG,EAAO;OAAM,OAAO,IAAW;MAAK;MACtF,WAAU;gBALZ,CAOE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAM;OACH,CAAA;MACH,CAAA,GAEJ,EAAM,MAAM,KAAK,MAAS;OACzB,IAAM,IAAY,GAAa,IAAI,EAAK,EAAE,KAAK,GACzC,IAAW,MAAc;OAC/B,OACE,kBAAC,EAAO,QAAR;QAEE,IAAI,gBAAgB,EAAW,GAAG,EAAK;QACvC,MAAK;QACL,MAAK;QACL,iBAAe;QACf,sBAAoB;QACpB,SAAS,KAAU;SAAE,SAAS;SAAG,GAAG;QAAE;QACtC,SAAS;SAAE,SAAS;SAAG,GAAG;QAAE;QAC5B,YAAY,IAAY,IAAqB;SAAE,GAAG,EAAQ;SAAQ,OAAO,IAAY;QAAK;QAC1F,eAAe;SAEb,AADA,EAAK,SAAS,GACd,EAAQ,EAAK;QACf;QACA,oBAAoB,EAAe,CAAS;QAC5C,WAAW,EACT,gKACA,IACI,4CACA,+CACN;kBApBF;SAsBG,EAAK,QACJ,kBAAC,QAAD;UACE,WAAW,EACT,0GACA,IAAW,mBAAmB,wBAChC;UACA,eAAY;oBAEZ,kBAAC,GAAD;WAAc,MAAK;qBAAM,EAAc,EAAK,IAAI;UAAgB,CAAA;SAC5D,CAAA;SAER,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAK,cAAc,EAAK,YAAY,CAAK,IAAI,EAAK;UAC/C,CAAA,GACL,EAAK,eACJ,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAK;UACF,CAAA,CAEL;;SACJ,EAAK,YACJ,kBAAC,QAAD;UAAM,WAAU;oBACb,EAAkB,EAAK,QAAQ,CAAC,CAAC,KAAK,GAAK,MAC1C,kBAAC,OAAD;WAEE,WAAW,EACT,0LACA,IACI,+CACA,uEACN;qBAEC,MAAQ,UAAU,MAAQ,SAAS,EAAmB,EAAK,IAAI;UAC7D,GATE,CASF,CACN;SACG,CAAA;SAER,kBAAC,IAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;UACE,SAAS,IAAY,KAAA,IAAY,EAAE,SAAS,EAAE;UAC9C,SAAS,EAAE,SAAS,EAAE;UACtB,MAAM,IAAY,KAAA,IAAY,EAAE,SAAS,EAAE;UAC3C,YAAY;UACZ,WAAU;oBAEV,kBAAC,GAAD;WAAM,MAAM;WAAoB,MAAK;WAAK,QAAO;WAAQ,WAAU;UAA0B,CAAA;SAClF,CAAA,EAEA,CAAA;QACJ;UAxER,EAAK,EAwEG;MAEnB,CAAC,CACS;QA5FL,EAAM,KA4FD,CACb,CACE;;IAGJ,MAAwB,MACvB,kBAAC,EAAO,KAAR;KACE,SAAS,KAAU,EAAE,SAAS,EAAE;KAChC,SAAS,EAAE,SAAS,EAAE;KACtB,YAAY;KACZ,WAAU;eAET,EAAoB,KAAK,GAAM,MAC9B,kBAAC,OAAD;MAAa,WAAU;gBAAvB,CACG,EAAK,SAAS,OACb,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD;SAAM,MAAM;SAAa,MAAK;SAAK,WAAU;QAA0B,CAAA;OACpE,CAAA,GACL,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD;SAAM,MAAM;SAAe,MAAK;SAAK,WAAU;QAA0B,CAAA;OACtE,CAAA,CACF;WACH,EAAK,SAAS,MAChB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD;QAAM,MAAM;QAAoB,MAAK;QAAK,WAAU;OAA0B,CAAA;MAC3E,CAAA,IAEL,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAK;MACH,CAAA,GAEP,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAK;MACF,CAAA,CACH;QAtBK,CAsBL,CACN;IACS,CAAA;GAEE;IACN,EAAA,CAAA;CACR,CAAA;AAEV,CACF;AAEA,EAAe,cAAc"}
+{"version":3,"file":"command-palette.js","names":[],"sources":["../../src/composed/command-palette.tsx"],"sourcesContent":["'use client'\n\n/**\n * CommandPalette -- Keyboard-driven command palette (Ctrl+K / Cmd+K).\n *\n * Adapted from Karm V2. Uses ui/Dialog as the overlay.\n * All V1 color tokens replaced with semantic design-system tokens.\n */\nimport { IconArrowDown,IconArrowUp, IconCornerDownLeft, IconSearch } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\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 { IconProvider } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs,tweens } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\nimport { VisuallyHidden } from '../ui/visually-hidden'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface CommandItem {\n  id: string\n  /** Display label — string or ReactNode. When ReactNode, provide `filterValue` for search filtering. */\n  label: string | React.ReactNode\n  /** Optional description — string or ReactNode. */\n  description?: string | React.ReactNode\n  icon?: IconInput\n  /** Keyboard shortcut hint displayed as keycap badges (e.g., \"G D\", \"Ctrl+N\"). */\n  shortcut?: string\n  /** Custom render override for the label. Receives the current search query for match highlighting. */\n  renderLabel?: (query: string) => React.ReactNode\n  /** Plain-text value used for search filtering when `label` is a ReactNode. Falls back to `label` if string. */\n  filterValue?: string\n  onSelect: () => void\n}\n\nexport interface CommandGroup {\n  label: string\n  items: CommandItem[]\n}\n\n/** A single keyboard hint shown in the footer. */\nexport interface FooterHint {\n  /** Key(s) to display — rendered as text inside `<kbd>` or as an icon. */\n  keys: string\n  /** Human-readable label for the hint (e.g., \"Navigate\", \"Select\"). */\n  label: string\n}\n\n/**\n * A searchable command palette with keyboard navigation (Ctrl+K / Cmd+K).\n * Supports grouped items, custom keybindings, controlled/uncontrolled open state,\n * and custom empty states.\n */\nexport interface CommandPaletteProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Item groups displayed in the palette. Each group has a label and an array of CommandItems. */\n  groups?: CommandGroup[]\n  /** Placeholder text for the search input. */\n  placeholder?: string\n  /** Called on every search input change with the current query string. */\n  onSearch?: (query: string) => void\n  /** Simple text shown when no results match. Overridden by `emptyState` if provided. */\n  emptyMessage?: string\n  /** Full custom empty state ReactNode — overrides `emptyMessage` when provided. */\n  emptyState?: React.ReactNode\n  // -- Controlled/uncontrolled open state (P1 #4) --\n  /** Controlled open state. */\n  open?: boolean\n  /** Default open state for uncontrolled usage. */\n  defaultOpen?: boolean\n  /** Called when the open state changes. */\n  onOpenChange?: (open: boolean) => void\n  // -- Keyboard shortcut customization (P1 #6) --\n  /** Keybinding(s) to toggle the palette. Pass `false` to disable.\n   *  String format: modifier+key, e.g., 'mod+k', 'ctrl+shift+p'.\n   *  'mod' maps to Meta on macOS, Ctrl otherwise. */\n  keybinding?: string | string[] | false\n  // -- Configurable max-height (P2 #8) --\n  /** Max height of the results container. CSS value. Default '320px'. */\n  maxHeight?: string | number\n  // -- Custom footer hints (P2 #11) --\n  /** Custom footer keyboard hints. Pass `false` to hide the footer entirely. */\n  footerHints?: FooterHint[] | false\n}\n\n// -----------------------------------------------------------------------\n// Helpers\n// -----------------------------------------------------------------------\n\nimport { getIsMac, getModifierDisplay,matchesKeybinding } from '../ui/lib/keybinding'\n\n/** Get the text-searchable value from a CommandItem. */\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\n/** Get the text-searchable description from a CommandItem. */\nfunction getFilterDescription(item: CommandItem): string {\n  if (typeof item.description === 'string') return item.description\n  return ''\n}\n\n/** Parse a shortcut string like \"G D\" or \"Ctrl+N\" into individual keycap segments. */\nfunction parseShortcutKeys(shortcut: string): string[] {\n  // If it has \"+\" separator (Ctrl+Shift+N style), split on +\n  if (shortcut.includes('+')) {\n    return shortcut.split('+').map(s => s.trim()).filter(Boolean)\n  }\n  // Otherwise split on spaces (G D style)\n  return shortcut.split(/\\s+/).filter(Boolean)\n}\n\n// -----------------------------------------------------------------------\n// CommandPalette\n// -----------------------------------------------------------------------\n\nconst CommandPalette = React.forwardRef<HTMLDivElement, CommandPaletteProps>(\n  function CommandPalette(\n    {\n      groups = [],\n      placeholder = 'Search or jump to...',\n      onSearch,\n      emptyMessage = 'No results found.',\n      emptyState,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      keybinding = 'mod+k',\n      maxHeight = '320px',\n      footerHints,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n  // -- Controlled/uncontrolled open state --\n  const isControlled = openProp !== undefined\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const open = isControlled ? openProp : internalOpen\n\n  // Use a ref for the current open value to avoid stale closures in setOpen\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 = typeof nextOpen === 'function' ? nextOpen(openRef.current) : nextOpen\n      if (!isControlled) {\n        setInternalOpen(resolved)\n      }\n      onOpenChange?.(resolved)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const [query, setQuery] = React.useState('')\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const listRef = React.useRef<HTMLDivElement>(null)\n  const instanceId = React.useId()\n  const listboxId = `command-palette-listbox-${instanceId}`\n\n  // -- Reduced motion (P2 #12) --\n  const { reducedMotion: isReduced } = useMotion()\n  const noMotionTransition = { duration: 0 }\n\n  // -- Platform detection (P2 #13) --\n  const isMac = React.useMemo(() => getIsMac(), [])\n\n  // Filter groups based on query\n  const filteredGroups = React.useMemo(() => {\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])\n\n  const filteredItems = React.useMemo(\n    () => filteredGroups.flatMap((g) => g.items),\n    [filteredGroups],\n  )\n\n  // Global keyboard shortcut\n  React.useEffect(() => {\n    if (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  }, [keybinding, setOpen])\n\n  // Reset state when opening\n  React.useEffect(() => {\n    if (open) {\n      setQuery('')\n      setActiveIndex(0)\n      requestAnimationFrame(() => {\n        inputRef.current?.focus()\n      })\n    }\n  }, [open])\n\n  // Keyboard navigation inside the palette\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev < filteredItems.length - 1 ? prev + 1 : 0,\n        )\n        break\n      }\n      case 'ArrowUp': {\n        e.preventDefault()\n        setActiveIndex((prev) =>\n          prev > 0 ? prev - 1 : filteredItems.length - 1,\n        )\n        break\n      }\n      case 'Enter': {\n        e.preventDefault()\n        const item = filteredItems[activeIndex]\n        if (item) {\n          item.onSelect()\n          setOpen(false)\n        }\n        break\n      }\n      case 'Escape': {\n        e.preventDefault()\n        setOpen(false)\n        break\n      }\n    }\n  }\n\n  // Scroll active item into view\n  React.useEffect(() => {\n    const activeEl = listRef.current?.querySelector(\n      `[data-command-index=\"${activeIndex}\"]`,\n    )\n    activeEl?.scrollIntoView({ block: 'nearest' })\n  }, [activeIndex])\n\n  const handleQueryChange = (value: string) => {\n    setQuery(value)\n    setActiveIndex(0)\n    onSearch?.(value)\n  }\n\n  // Build a map of item id -> flat index 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  // -- Resolve motion transitions --\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  // -- Resolve max height CSS value --\n  const maxHeightValue = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n\n  // -- Resolve footer hints --\n  const resolvedFooterHints: FooterHint[] | false =\n    footerHints === false\n      ? false\n      : footerHints ?? [\n          { keys: '↑↓', label: 'Navigate' },\n          { keys: '↵', label: 'Select' },\n          { keys: 'Esc', label: 'Close' },\n        ]\n\n  // Handle dialog open change (from Dialog's own close mechanisms)\n  const handleDialogOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      setOpen(nextOpen)\n    },\n    [setOpen],\n  )\n\n  return (\n    <Dialog open={open} onOpenChange={handleDialogOpenChange}>\n      <DialogPortal>\n        <DialogOverlay\n          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        />\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 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          onKeyDown={handleKeyDown}\n        >\n          <VisuallyHidden>\n            <DialogTitle>Command Palette</DialogTitle>\n            <DialogDescription>\n              Search or jump to pages, projects, tasks, and actions\n            </DialogDescription>\n          </VisuallyHidden>\n\n          {/* Search input */}\n          <div className=\"flex items-center gap-ds-04 border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <motion.span\n              initial={noInit ?? { opacity: 0, scale: 0.96 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={springSnappy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n            </motion.span>\n            <input\n              ref={inputRef}\n              value={query}\n              onChange={(e) => handleQueryChange(e.target.value)}\n              placeholder={placeholder}\n              role=\"combobox\"\n              aria-expanded={true}\n              aria-controls={listboxId}\n              aria-activedescendant={filteredItems[activeIndex] ? `command-item-${instanceId}-${filteredItems[activeIndex].id}` : undefined}\n              aria-autocomplete=\"list\"\n              className={cn(\n                'flex-1 bg-transparent text-body-lg text-surface-fg outline-hidden',\n                'placeholder:text-surface-fg-subtle',\n              )}\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              spellCheck={false}\n            />\n            <kbd className=\"hidden shrink-0 select-none rounded-control border border-card-strong bg-surface-panel px-ds-02b py-ds-01 text-body-sm font-medium text-surface-fg-subtle shadow-kbd sm:inline-flex\">\n              Esc\n            </kbd>\n          </div>\n\n          {/* Results */}\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 && (\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-body-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={isReduced ? noMotionTransition : { ...tweens.fade, delay: groupIdx * 0.06 }}\n                className=\"mb-ds-02\"\n              >\n                <div className=\"px-ds-03 pb-ds-02 pt-ds-03\">\n                  <span className=\"text-label-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-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={isReduced ? noMotionTransition : { ...springs.snappy, delay: itemIndex * 0.03 }}\n                      onClick={() => {\n                        item.onSelect()\n                        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-panel-hover text-surface-fg'\n                          : 'text-surface-fg-muted hover:bg-surface-panel-hover',\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 ? 'text-accent-11' : 'text-surface-fg-subtle',\n                          )}\n                          aria-hidden=\"true\"\n                        >\n                          <IconProvider size=\"sm\">{normalizeIcon(item.icon)}</IconProvider>\n                        </span>\n                      )}\n                      <div className=\"flex min-w-0 flex-1 flex-col\">\n                        <span className=\"truncate text-body-md\">\n                          {item.renderLabel ? item.renderLabel(query) : item.label}\n                        </span>\n                        {item.description && (\n                          <span className=\"line-clamp-1 text-body-sm text-surface-fg-subtle\">\n                            {item.description}\n                          </span>\n                        )}\n                      </div>\n                      {item.shortcut && (\n                        <span className=\"flex shrink-0 items-center gap-ds-01\">\n                          {parseShortcutKeys(item.shortcut).map((key, i) => (\n                            <kbd\n                              key={i}\n                              className={cn(\n                                'inline-flex min-w-ds-05b items-center justify-center rounded border px-ds-02b py-ds-01 text-body-xs font-medium shadow-kbd transition-colors duration-fast-02 ease-productive-standard',\n                                isActive\n                                  ? 'bg-accent-2 text-accent-11 border-accent-6'\n                                  : 'bg-surface-panel text-surface-fg-subtle border-surface-border-strong',\n                              )}\n                            >\n                              {key === 'Ctrl' || key === 'ctrl' ? getModifierDisplay(isMac) : key}\n                            </kbd>\n                          ))}\n                        </span>\n                      )}\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 icon={IconCornerDownLeft} size=\"sm\" stroke=\"light\" className=\"text-surface-fg-subtle\" />\n                          </motion.span>\n                        )}\n                      </AnimatePresence>\n                    </motion.button>\n                  )\n                })}\n              </motion.div>\n            ))}\n          </div>\n\n          {/* Footer with keyboard hints */}\n          {resolvedFooterHints !== false && (\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              {resolvedFooterHints.map((hint, i) => (\n                <div key={i} className=\"flex items-center gap-ds-02b\">\n                  {hint.keys === '↑↓' ? (\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-card-strong bg-surface-panel 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-card-strong bg-surface-panel shadow-kbd\">\n                        <Icon icon={IconArrowDown} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                      </kbd>\n                    </div>\n                  ) : hint.keys === '↵' ? (\n                    <kbd className=\"inline-flex h-ds-05b items-center justify-center rounded-control border border-card-strong bg-surface-panel px-ds-02b shadow-kbd\">\n                      <Icon icon={IconCornerDownLeft} size=\"xs\" className=\"text-surface-fg-subtle\" />\n                    </kbd>\n                  ) : (\n                    <kbd className=\"inline-flex h-ds-05b items-center justify-center rounded-control border border-card-strong bg-surface-panel px-ds-02b text-caption font-medium text-surface-fg-subtle shadow-kbd\">\n                      {hint.keys}\n                    </kbd>\n                  )}\n                  <span className=\"text-caption text-surface-fg-subtle\">\n                    {hint.label}\n                  </span>\n                </div>\n              ))}\n            </motion.div>\n          )}\n        </DialogContentRaw>\n      </DialogPortal>\n    </Dialog>\n  )\n  },\n)\n\nCommandPalette.displayName = 'CommandPalette'\n\nexport { CommandPalette }\n"],"mappings":"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"}

package/dist/composed/content-card.js

@@ -6,9 +6,9 @@ import { cva as a } from "class-variance-authority";
 var o = a("rounded-surface will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard", {
 	variants: {
 		variant: {
-			default: "bg-surface-raised shadow-raised hover:shadow-raised-hover",
+			default: "bg-surface-panel hover:bg-surface-panel-hover",
 			outline: "border border-surface-border bg-transparent hover:border-surface-border-strong",
-			ghost: "border border-transparent bg-transparent hover:bg-surface-raised"
+			ghost: "border border-transparent bg-transparent hover:bg-surface-panel-hover"
 		},
 		padding: {
 			default: "p-ds-05b",

package/dist/composed/content-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-card.js","names":[],"sources":["../../src/composed/content-card.tsx"],"sourcesContent":["// @server-safe\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\nconst contentCardVariants = cva(\n  'rounded-surface will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-surface-raised shadow-raised hover:shadow-raised-hover',\n        outline:\n          'border border-surface-border bg-transparent hover:border-surface-border-strong',\n        ghost:\n          'border border-transparent bg-transparent hover:bg-surface-raised',\n      },\n      padding: {\n        default: 'p-ds-05b',\n        compact: 'p-ds-04',\n        spacious: 'p-ds-06',\n        none: 'p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      padding: 'default',\n    },\n  },\n)\n\nconst getPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'px-ds-04 py-ds-03'\n    case 'spacious': return 'px-ds-06 py-ds-05'\n    default: return 'px-ds-05b py-ds-04'\n  }\n}\n\nconst getContentPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'p-ds-04'\n    case 'spacious': return 'p-ds-06'\n    default: return 'p-ds-05b'\n  }\n}\n\nexport interface ContentCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof contentCardVariants> {\n  header?: React.ReactNode\n  headerTitle?: string\n  headerActions?: React.ReactNode\n  footer?: React.ReactNode\n}\n\n/**\n * @deprecated Use `Card` with `CardHeader` / `CardContent` / `CardFooter` instead.\n * `ContentCard` duplicated `Card` on the legacy per-slot-padding model; `Card` now covers\n * every feature (variants, slots, gap-model padding). `ContentCard` will be removed in the\n * next major — see MIGRATION.md.\n */\nconst ContentCard = React.forwardRef<HTMLDivElement, ContentCardProps>(\n  (\n    {\n      variant,\n      padding,\n      header,\n      headerTitle,\n      headerActions,\n      footer,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasHeader = header || headerTitle || headerActions\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          contentCardVariants({ variant, padding: hasHeader || footer ? 'none' : padding }),\n          className,\n        )}\n        {...props}\n      >\n        {hasHeader && (\n          <div\n            className={cn(\n              'flex items-center justify-between border-b border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {header ?? (\n              <>\n                {headerTitle && (\n                  <h3 className=\"text-body-lg font-semibold text-surface-fg\">\n                    {headerTitle}\n                  </h3>\n                )}\n                {headerActions && (\n                  <div className=\"flex items-center gap-ds-03\">{headerActions}</div>\n                )}\n              </>\n            )}\n          </div>\n        )}\n\n        <div\n          className={cn(\n            (hasHeader || footer) && getContentPadding(padding),\n          )}\n        >\n          {children}\n        </div>\n\n        {footer && (\n          <div\n            className={cn(\n              'border-t border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nContentCard.displayName = 'ContentCard'\n\nexport { ContentCard, contentCardVariants }\n"],"mappings":";;;;;AAMA,IAAM,IAAsB,EAC1B,kJACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,OACE;EACJ;EACA,SAAS;GACP,SAAS;GACT,SAAS;GACT,UAAU;GACV,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,SAAS;CACX;AACF,CACF,GAEM,KAAc,MAAuC;CACzD,QAAQ,GAAR;EACE,KAAK,WAAW,OAAO;EACvB,KAAK,YAAY,OAAO;EACxB,SAAS,OAAO;CAClB;AACF,GAEM,KAAqB,MAAuC;CAChE,QAAQ,GAAR;EACE,KAAK,WAAW,OAAO;EACvB,KAAK,YAAY,OAAO;EACxB,SAAS,OAAO;CAClB;AACF,GAiBM,IAAc,EAAM,YAEtB,EACE,YACA,YACA,WACA,gBACA,kBACA,WACA,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAY,KAAU,KAAe;CAE3C,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAoB;GAAE;GAAS,SAAS,KAAa,IAAS,SAAS;EAAQ,CAAC,GAChF,CACF;EACA,GAAI;YANN;GAQG,KACC,kBAAC,OAAD;IACE,WAAW,EACT,2EACA,EAAW,CAAO,CACpB;cAEC,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,MAAD;KAAI,WAAU;eACX;IACC,CAAA,GAEL,KACC,kBAAC,OAAD;KAAK,WAAU;eAA+B;IAAmB,CAAA,CAEnE,EAAA,CAAA;GAED,CAAA;GAGP,kBAAC,OAAD;IACE,WAAW,GACR,KAAa,MAAW,EAAkB,CAAO,CACpD;IAEC;GACE,CAAA;GAEJ,KACC,kBAAC,OAAD;IACE,WAAW,EACT,yCACA,EAAW,CAAO,CACpB;cAEC;GACE,CAAA;EAEJ;;AAET,CACF;AACA,EAAY,cAAc"}
+{"version":3,"file":"content-card.js","names":[],"sources":["../../src/composed/content-card.tsx"],"sourcesContent":["// @server-safe\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\nconst contentCardVariants = cva(\n  'rounded-surface will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-surface-panel hover:bg-surface-panel-hover',\n        outline:\n          'border border-surface-border bg-transparent hover:border-surface-border-strong',\n        ghost:\n          'border border-transparent bg-transparent hover:bg-surface-panel-hover',\n      },\n      padding: {\n        default: 'p-ds-05b',\n        compact: 'p-ds-04',\n        spacious: 'p-ds-06',\n        none: 'p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      padding: 'default',\n    },\n  },\n)\n\nconst getPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'px-ds-04 py-ds-03'\n    case 'spacious': return 'px-ds-06 py-ds-05'\n    default: return 'px-ds-05b py-ds-04'\n  }\n}\n\nconst getContentPadding = (padding: string | null | undefined) => {\n  switch (padding) {\n    case 'compact': return 'p-ds-04'\n    case 'spacious': return 'p-ds-06'\n    default: return 'p-ds-05b'\n  }\n}\n\nexport interface ContentCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof contentCardVariants> {\n  header?: React.ReactNode\n  headerTitle?: string\n  headerActions?: React.ReactNode\n  footer?: React.ReactNode\n}\n\n/**\n * @deprecated Use `Card` with `CardHeader` / `CardContent` / `CardFooter` instead.\n * `ContentCard` duplicated `Card` on the legacy per-slot-padding model; `Card` now covers\n * every feature (variants, slots, gap-model padding). `ContentCard` will be removed in the\n * next major — see MIGRATION.md.\n */\nconst ContentCard = React.forwardRef<HTMLDivElement, ContentCardProps>(\n  (\n    {\n      variant,\n      padding,\n      header,\n      headerTitle,\n      headerActions,\n      footer,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasHeader = header || headerTitle || headerActions\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          contentCardVariants({ variant, padding: hasHeader || footer ? 'none' : padding }),\n          className,\n        )}\n        {...props}\n      >\n        {hasHeader && (\n          <div\n            className={cn(\n              'flex items-center justify-between border-b border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {header ?? (\n              <>\n                {headerTitle && (\n                  <h3 className=\"text-body-lg font-semibold text-surface-fg\">\n                    {headerTitle}\n                  </h3>\n                )}\n                {headerActions && (\n                  <div className=\"flex items-center gap-ds-03\">{headerActions}</div>\n                )}\n              </>\n            )}\n          </div>\n        )}\n\n        <div\n          className={cn(\n            (hasHeader || footer) && getContentPadding(padding),\n          )}\n        >\n          {children}\n        </div>\n\n        {footer && (\n          <div\n            className={cn(\n              'border-t border-surface-border-strong',\n              getPadding(padding),\n            )}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nContentCard.displayName = 'ContentCard'\n\nexport { ContentCard, contentCardVariants }\n"],"mappings":";;;;;AAMA,IAAM,IAAsB,EAC1B,kJACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,OACE;EACJ;EACA,SAAS;GACP,SAAS;GACT,SAAS;GACT,UAAU;GACV,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,SAAS;CACX;AACF,CACF,GAEM,KAAc,MAAuC;CACzD,QAAQ,GAAR;EACE,KAAK,WAAW,OAAO;EACvB,KAAK,YAAY,OAAO;EACxB,SAAS,OAAO;CAClB;AACF,GAEM,KAAqB,MAAuC;CAChE,QAAQ,GAAR;EACE,KAAK,WAAW,OAAO;EACvB,KAAK,YAAY,OAAO;EACxB,SAAS,OAAO;CAClB;AACF,GAiBM,IAAc,EAAM,YAEtB,EACE,YACA,YACA,WACA,gBACA,kBACA,WACA,cACA,aACA,GAAG,KAEL,MACG;CACH,IAAM,IAAY,KAAU,KAAe;CAE3C,OACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,EAAoB;GAAE;GAAS,SAAS,KAAa,IAAS,SAAS;EAAQ,CAAC,GAChF,CACF;EACA,GAAI;YANN;GAQG,KACC,kBAAC,OAAD;IACE,WAAW,EACT,2EACA,EAAW,CAAO,CACpB;cAEC,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,MAAD;KAAI,WAAU;eACX;IACC,CAAA,GAEL,KACC,kBAAC,OAAD;KAAK,WAAU;eAA+B;IAAmB,CAAA,CAEnE,EAAA,CAAA;GAED,CAAA;GAGP,kBAAC,OAAD;IACE,WAAW,GACR,KAAa,MAAW,EAAkB,CAAO,CACpD;IAEC;GACE,CAAA;GAEJ,KACC,kBAAC,OAAD;IACE,WAAW,EACT,yCACA,EAAW,CAAO,CACpB;cAEC;GACE,CAAA;EAEJ;;AAET,CACF;AACA,EAAY,cAAc"}