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