@devalok/shilp-sutra 0.39.0 → 0.40.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/AGENTS.md +151 -0
- package/MIGRATION.md +137 -0
- package/README.md +3 -0
- package/dist/_chunks/badge-group.js +75 -74
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/chart-container.js +50 -0
- package/dist/_chunks/chart-container.js.map +1 -0
- package/dist/_chunks/chat.js +231 -223
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/colors.js +30 -0
- package/dist/_chunks/colors.js.map +1 -0
- package/dist/_chunks/emoji-data.js +45 -0
- package/dist/_chunks/emoji-data.js.map +1 -0
- package/dist/_chunks/grid-lines.js +72 -0
- package/dist/_chunks/grid-lines.js.map +1 -0
- package/dist/_chunks/mention-suggestion.js +31 -259
- package/dist/_chunks/mention-suggestion.js.map +1 -1
- package/dist/_chunks/normalize-icon.js +18 -0
- package/dist/_chunks/normalize-icon.js.map +1 -0
- package/dist/_chunks/oauth-button.js +227 -0
- package/dist/_chunks/oauth-button.js.map +1 -0
- package/dist/_chunks/primitives.js +107 -107
- package/dist/_chunks/primitives.js.map +1 -1
- package/dist/_chunks/{text.js → success.js} +24 -61
- package/dist/_chunks/success.js.map +1 -0
- package/dist/_chunks/tiptap.js +1952 -1949
- package/dist/_chunks/tiptap.js.map +1 -1
- package/dist/_chunks/tooltip.js +58 -0
- package/dist/_chunks/tooltip.js.map +1 -0
- package/dist/_chunks/tree-view.js +101 -96
- package/dist/_chunks/tree-view.js.map +1 -1
- package/dist/ai/ai-command-provider.d.ts +3 -2
- package/dist/ai/ai-command-provider.d.ts.map +1 -1
- package/dist/ai/ai-command-provider.js.map +1 -1
- package/dist/ai/block-renderer.js +11 -9
- package/dist/ai/block-renderer.js.map +1 -1
- package/dist/ai/blocks/error.js +31 -0
- package/dist/ai/blocks/error.js.map +1 -0
- package/dist/ai/blocks/index.d.ts +0 -2
- package/dist/ai/blocks/index.d.ts.map +1 -1
- package/dist/ai/blocks/index.js +2 -2
- package/dist/ai/blocks/text.js +19 -0
- package/dist/ai/blocks/text.js.map +1 -0
- package/dist/ai/command-bar.d.ts.map +1 -1
- package/dist/ai/command-bar.js +192 -187
- package/dist/ai/command-bar.js.map +1 -1
- package/dist/ai/conversation.d.ts +2 -1
- package/dist/ai/conversation.d.ts.map +1 -1
- package/dist/ai/conversation.js +88 -83
- package/dist/ai/conversation.js.map +1 -1
- package/dist/ai/index.d.ts +0 -4
- package/dist/ai/index.d.ts.map +1 -1
- package/dist/ai/index.js +45 -46
- package/dist/ai/index.js.map +1 -1
- package/dist/composed/activity-feed.d.ts +2 -1
- package/dist/composed/activity-feed.d.ts.map +1 -1
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/bulk-action-bar.d.ts +2 -2
- package/dist/composed/bulk-action-bar.d.ts.map +1 -1
- package/dist/composed/bulk-action-bar.js +11 -11
- package/dist/composed/bulk-action-bar.js.map +1 -1
- package/dist/composed/command-palette.d.ts +2 -1
- package/dist/composed/command-palette.d.ts.map +1 -1
- package/dist/composed/command-palette.js +103 -98
- package/dist/composed/command-palette.js.map +1 -1
- package/dist/composed/date-picker/index.js +747 -3
- package/dist/composed/date-picker/index.js.map +1 -0
- package/dist/composed/empty-state.d.ts +3 -3
- package/dist/composed/empty-state.d.ts.map +1 -1
- package/dist/composed/empty-state.js +40 -31
- package/dist/composed/empty-state.js.map +1 -1
- package/dist/composed/extensions/emoji-node.js +81 -0
- package/dist/composed/extensions/emoji-node.js.map +1 -0
- package/dist/composed/extensions/emoji-suggestion.js +117 -0
- package/dist/composed/extensions/emoji-suggestion.js.map +1 -0
- package/dist/composed/file-preview.js +498 -2
- package/dist/{_chunks → composed}/file-preview.js.map +1 -1
- package/dist/composed/index.d.ts +0 -15
- package/dist/composed/index.d.ts.map +1 -1
- package/dist/composed/index.js +16 -24
- package/dist/composed/rich-chat-input.js +2073 -2
- package/dist/{_chunks → composed}/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.js +64 -61
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/status-badge.d.ts +3 -2
- package/dist/composed/status-badge.d.ts.map +1 -1
- package/dist/composed/status-badge.js +58 -53
- package/dist/composed/status-badge.js.map +1 -1
- package/dist/shell/app-command-palette.d.ts +2 -1
- package/dist/shell/app-command-palette.d.ts.map +1 -1
- package/dist/shell/app-command-palette.js.map +1 -1
- package/dist/shell/bottom-navbar.d.ts +3 -1
- package/dist/shell/bottom-navbar.d.ts.map +1 -1
- package/dist/shell/bottom-navbar.js +90 -82
- package/dist/shell/bottom-navbar.js.map +1 -1
- package/dist/shell/command-registry.d.ts +2 -1
- package/dist/shell/command-registry.d.ts.map +1 -1
- package/dist/shell/command-registry.js.map +1 -1
- package/dist/shell/sidebar.d.ts +7 -4
- package/dist/shell/sidebar.d.ts.map +1 -1
- package/dist/shell/sidebar.js +143 -129
- package/dist/shell/sidebar.js.map +1 -1
- package/dist/shell/top-bar.d.ts +4 -3
- package/dist/shell/top-bar.d.ts.map +1 -1
- package/dist/shell/top-bar.js +114 -106
- package/dist/shell/top-bar.js.map +1 -1
- package/dist/ui/badge.d.ts +3 -2
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/button.d.ts +3 -2
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +54 -53
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/charts/area-chart.js +177 -0
- package/dist/ui/charts/area-chart.js.map +1 -0
- package/dist/ui/charts/bar-chart.js +127 -0
- package/dist/ui/charts/bar-chart.js.map +1 -0
- package/dist/ui/charts/chart-container.js +3 -0
- package/dist/ui/charts/gauge-chart.js +72 -0
- package/dist/ui/charts/gauge-chart.js.map +1 -0
- package/dist/ui/charts/index.js +10 -1035
- package/dist/ui/charts/line-chart.js +135 -0
- package/dist/ui/charts/line-chart.js.map +1 -0
- package/dist/ui/charts/pie-chart.js +111 -0
- package/dist/ui/charts/pie-chart.js.map +1 -0
- package/dist/ui/charts/radar-chart.js +170 -0
- package/dist/ui/charts/radar-chart.js.map +1 -0
- package/dist/ui/charts/sparkline.js +119 -0
- package/dist/ui/charts/sparkline.js.map +1 -0
- package/dist/ui/chat/message.d.ts +3 -3
- package/dist/ui/chat/message.d.ts.map +1 -1
- package/dist/ui/chat/system-message.d.ts +2 -1
- package/dist/ui/chat/system-message.d.ts.map +1 -1
- package/dist/ui/combobox.d.ts +2 -1
- package/dist/ui/combobox.d.ts.map +1 -1
- package/dist/ui/combobox.js +97 -92
- package/dist/ui/combobox.js.map +1 -1
- package/dist/ui/container.d.ts +6 -1
- package/dist/ui/container.d.ts.map +1 -1
- package/dist/ui/container.js +2 -1
- package/dist/ui/container.js.map +1 -1
- package/dist/ui/icon-button.d.ts +9 -2
- package/dist/ui/icon-button.d.ts.map +1 -1
- package/dist/ui/icon-button.js +14 -13
- package/dist/ui/icon-button.js.map +1 -1
- package/dist/ui/index.d.ts +1 -3
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +31 -33
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/lib/icon-input.d.ts +42 -0
- package/dist/ui/lib/icon-input.d.ts.map +1 -0
- package/dist/ui/lib/normalize-icon.d.ts +39 -0
- package/dist/ui/lib/normalize-icon.d.ts.map +1 -0
- package/dist/ui/oauth-button/index.d.ts +3 -0
- package/dist/ui/oauth-button/index.d.ts.map +1 -0
- package/dist/ui/oauth-button/index.js +3 -0
- package/dist/ui/oauth-button/oauth-button.d.ts +208 -0
- package/dist/ui/oauth-button/oauth-button.d.ts.map +1 -0
- package/dist/ui/progress.js +1 -1
- package/dist/ui/segmented-control.d.ts +3 -4
- package/dist/ui/segmented-control.d.ts.map +1 -1
- package/dist/ui/segmented-control.js +53 -45
- package/dist/ui/segmented-control.js.map +1 -1
- package/dist/ui/stack.d.ts +6 -1
- package/dist/ui/stack.d.ts.map +1 -1
- package/dist/ui/stack.js +2 -1
- package/dist/ui/stack.js.map +1 -1
- package/dist/ui/stat-card.d.ts +2 -3
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +117 -115
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/stepper.d.ts +2 -1
- package/dist/ui/stepper.d.ts.map +1 -1
- package/dist/ui/stepper.js +74 -69
- package/dist/ui/stepper.js.map +1 -1
- package/dist/ui/text.d.ts +7 -2
- package/dist/ui/text.d.ts.map +1 -1
- package/dist/ui/text.js +2 -1
- package/dist/ui/text.js.map +1 -1
- package/dist/ui/toaster.d.ts +11 -2
- package/dist/ui/toaster.d.ts.map +1 -1
- package/dist/ui/toaster.js.map +1 -1
- package/dist/ui/tooltip.js +12 -12
- package/dist/ui/tree-view/tree-item.d.ts +3 -2
- package/dist/ui/tree-view/tree-item.d.ts.map +1 -1
- package/dist/ui/tree-view/use-tree.d.ts +2 -1
- package/dist/ui/tree-view/use-tree.d.ts.map +1 -1
- package/docs/components/ui/oauth-button.md +86 -0
- package/docs/recipes/customize-brand.md +15 -0
- package/docs/recipes/index.md +5 -1
- package/docs/recipes/install-astro.md +15 -0
- package/docs/recipes/install-next-app-router.md +21 -5
- package/docs/recipes/install-next-pages.md +2 -0
- package/docs/recipes/install-remix.md +15 -0
- package/docs/recipes/install-tanstack-start.md +15 -0
- package/docs/recipes/install-vite.md +15 -0
- package/docs/recipes/troubleshoot.md +22 -0
- package/llms-full.txt +87 -1
- package/llms-quick.txt +247 -0
- package/llms.txt +107 -2
- package/package.json +79 -2
- package/scripts/welcome.mjs +219 -0
- package/skill/SKILL.md +22 -3
- package/skill/references/components-full.md +87 -1
- package/skill/references/components.md +107 -2
- package/skill/references/customize-brand.md +15 -0
- package/skill/references/setup-astro.md +15 -0
- package/skill/references/setup-next-app-router.md +21 -5
- package/skill/references/setup-next-pages.md +2 -0
- package/skill/references/setup-remix.md +15 -0
- package/skill/references/setup-tanstack-start.md +15 -0
- package/skill/references/setup-vite.md +15 -0
- package/skill/references/troubleshoot.md +22 -0
- package/dist/_chunks/date-picker.js +0 -748
- package/dist/_chunks/date-picker.js.map +0 -1
- package/dist/_chunks/file-preview.js +0 -499
- package/dist/_chunks/rich-chat-input.js +0 -2071
- package/dist/_chunks/text.js.map +0 -1
- package/dist/ui/charts/index.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bulk-action-bar.js","names":[],"sources":["../../src/composed/bulk-action-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon
|
|
1
|
+
{"version":3,"file":"bulk-action-bar.js","names":[],"sources":["../../src/composed/bulk-action-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface BulkActionBarAction {\n label: string\n icon?: IconInput\n onClick: () => void\n color?: 'accent' | 'error'\n disabled?: boolean\n /** Show inline confirmation before executing the action */\n requiresConfirmation?: boolean\n /** Custom confirmation message @default 'Are you sure?' */\n confirmMessage?: string\n}\n\nexport interface BulkActionBarProps {\n show: boolean\n count: number\n onClearSelection: () => void\n actions: BulkActionBarAction[]\n /** Total number of items available for selection */\n totalCount?: number\n /** Called when user clicks \"Select all\" */\n onSelectAll?: () => void\n className?: string\n}\n\n// ============================================================\n// ActionButton — handles inline confirmation\n// ============================================================\n\nconst ActionButton = React.forwardRef<HTMLDivElement, { action: BulkActionBarAction; tabIndex?: number }>(function ActionButton({ action, tabIndex }, ref) {\n const [confirming, setConfirming] = React.useState(false)\n\n if (confirming) {\n return (\n <motion.div\n ref={ref}\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n transition={springs.snappy}\n className=\"flex items-center gap-ds-02\"\n tabIndex={tabIndex}\n >\n <span className=\"text-ds-sm text-surface-fg-muted whitespace-nowrap\">\n {action.confirmMessage ?? 'Are you sure?'}\n </span>\n <Button\n variant=\"solid\"\n size=\"sm\"\n color=\"error\"\n onClick={() => {\n setConfirming(false)\n action.onClick()\n }}\n >\n Confirm\n </Button>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setConfirming(false)}\n >\n Cancel\n </Button>\n </motion.div>\n )\n }\n\n return (\n <motion.div\n ref={ref}\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n transition={springs.snappy}\n tabIndex={tabIndex}\n >\n <Button\n variant=\"ghost\"\n size=\"sm\"\n color={action.color === 'error' ? 'error' : 'accent'}\n disabled={action.disabled}\n onClick={action.requiresConfirmation ? () => setConfirming(true) : action.onClick}\n startIcon={action.icon ?? undefined}\n tabIndex={-1}\n >\n {action.label}\n </Button>\n </motion.div>\n )\n})\n\n// ============================================================\n// BulkActionBar\n// ============================================================\n\nfunction BulkActionBar({\n show,\n count,\n onClearSelection,\n actions,\n totalCount,\n onSelectAll,\n className,\n}: BulkActionBarProps) {\n const [mounted, setMounted] = React.useState(false)\n const [focusedIndex, setFocusedIndex] = React.useState(0)\n const actionRefs = React.useRef<(HTMLDivElement | null)[]>([])\n\n // Reset focused index when actions change\n React.useEffect(() => {\n setFocusedIndex(0)\n }, [actions.length])\n\n React.useEffect(() => {\n setMounted(true)\n }, [])\n\n function handleKeyDown(e: React.KeyboardEvent) {\n if (e.key === 'Escape') {\n e.preventDefault()\n onClearSelection()\n return\n }\n\n const count = actions.length\n if (count === 0) return\n\n if (e.key === 'ArrowRight') {\n e.preventDefault()\n const next = (focusedIndex + 1) % count\n setFocusedIndex(next)\n actionRefs.current[next]?.focus()\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault()\n const prev = (focusedIndex - 1 + count) % count\n setFocusedIndex(prev)\n actionRefs.current[prev]?.focus()\n } else if (e.key === 'Home') {\n e.preventDefault()\n setFocusedIndex(0)\n actionRefs.current[0]?.focus()\n } else if (e.key === 'End') {\n e.preventDefault()\n const last = count - 1\n setFocusedIndex(last)\n actionRefs.current[last]?.focus()\n }\n }\n\n if (!mounted) return null\n\n return createPortal(\n <AnimatePresence>\n {show && (\n <motion.div\n initial={{ y: 100, opacity: 0 }}\n animate={{ y: 0, opacity: 1 }}\n exit={{ y: 100, opacity: 0 }}\n transition={springs.snappy}\n className={cn(\n 'fixed bottom-ds-06 left-1/2 z-sticky -translate-x-1/2',\n 'flex items-center gap-ds-04 rounded-surface border border-surface-border bg-surface-overlay px-ds-05 py-ds-03 shadow-floating',\n className,\n )}\n role=\"toolbar\"\n aria-label={`${count} items selected`}\n onKeyDown={handleKeyDown}\n >\n <Badge variant=\"solid\" size=\"sm\">\n {count} selected\n </Badge>\n\n {totalCount != null && totalCount > count && onSelectAll && (\n <Button variant=\"link\" size=\"xs\" onClick={onSelectAll}>\n Select all {totalCount}\n </Button>\n )}\n\n <div className=\"flex items-center gap-ds-02\">\n <AnimatePresence mode=\"popLayout\">\n {actions.map((action, i) => (\n <ActionButton\n key={action.label}\n ref={(el: HTMLDivElement | null) => { actionRefs.current[i] = el }}\n action={action}\n tabIndex={i === focusedIndex ? 0 : -1}\n />\n ))}\n </AnimatePresence>\n </div>\n\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n onClick={onClearSelection}\n aria-label=\"Clear selection\"\n >\n <Icon icon={IconX} size=\"sm\" />\n </Button>\n </motion.div>\n )}\n </AnimatePresence>,\n document.body,\n )\n}\n\nBulkActionBar.displayName = 'BulkActionBar'\n\nexport { BulkActionBar }\n"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { IconInput } from '../ui/lib/icon-input';
|
|
2
3
|
import * as React from 'react';
|
|
3
4
|
export interface CommandItem {
|
|
4
5
|
id: string;
|
|
@@ -6,7 +7,7 @@ export interface CommandItem {
|
|
|
6
7
|
label: string | React.ReactNode;
|
|
7
8
|
/** Optional description — string or ReactNode. */
|
|
8
9
|
description?: string | React.ReactNode;
|
|
9
|
-
icon?:
|
|
10
|
+
icon?: IconInput;
|
|
10
11
|
/** Keyboard shortcut hint displayed as keycap badges (e.g., "G D", "Ctrl+N"). */
|
|
11
12
|
shortcut?: string;
|
|
12
13
|
/** Custom render override for the label. Receives the current search query for match highlighting. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/composed/command-palette.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../src/composed/command-palette.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAUrD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,uGAAuG;IACvG,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAC/B,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IACtC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sGAAsG;IACtG,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IAChD,+GAA+G;IAC/G,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,WAAW,EAAE,CAAA;CACrB;AAED,kDAAkD;AAClD,MAAM,WAAW,UAAU;IACzB,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAA;IACZ,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAChF,iGAAiG;IACjG,MAAM,CAAC,EAAE,YAAY,EAAE,CAAA;IACvB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kFAAkF;IAClF,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE5B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAEtC;;uDAEmD;IACnD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,KAAK,CAAA;IAEtC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAE3B,8EAA8E;IAC9E,WAAW,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;CACnC;AAmCD,QAAA,MAAM,cAAc,4FA6ZnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -1,55 +1,57 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
12
|
-
import {
|
|
2
|
+
import { IconProvider as e } from "../ui/icon-context.js";
|
|
3
|
+
import { springs as t, tweens as n } from "../ui/lib/motion.js";
|
|
4
|
+
import { cn as r } from "../ui/lib/utils.js";
|
|
5
|
+
import { Icon as i } from "../ui/icon.js";
|
|
6
|
+
import { t as a } from "../_chunks/normalize-icon.js";
|
|
7
|
+
import { Dialog as o, DialogContentRaw as s, DialogDescription as c, DialogOverlay as l, DialogPortal as ee, DialogTitle as u } from "../ui/dialog.js";
|
|
8
|
+
import { VisuallyHidden as te } from "../ui/visually-hidden.js";
|
|
9
|
+
import { n as ne } from "../_chunks/motion-provider.js";
|
|
10
|
+
import { n as d, r as f, t as p } from "../_chunks/keybinding.js";
|
|
11
|
+
import * as m from "react";
|
|
12
|
+
import { jsx as h, jsxs as g } from "react/jsx-runtime";
|
|
13
|
+
import { IconArrowDown as re, IconArrowUp as ie, IconCornerDownLeft as _, IconSearch as ae } from "@tabler/icons-react";
|
|
14
|
+
import { AnimatePresence as oe, motion as v } from "framer-motion";
|
|
13
15
|
//#region src/composed/command-palette.tsx
|
|
14
|
-
function
|
|
16
|
+
function se(e) {
|
|
15
17
|
return e.filterValue ? e.filterValue : typeof e.label == "string" ? e.label : "";
|
|
16
18
|
}
|
|
17
|
-
function
|
|
19
|
+
function ce(e) {
|
|
18
20
|
return typeof e.description == "string" ? e.description : "";
|
|
19
21
|
}
|
|
20
|
-
function
|
|
22
|
+
function y(e) {
|
|
21
23
|
return e.includes("+") ? e.split("+").map((e) => e.trim()).filter(Boolean) : e.split(/\s+/).filter(Boolean);
|
|
22
24
|
}
|
|
23
|
-
var b =
|
|
24
|
-
let N = w !== void 0, [P, F] =
|
|
25
|
+
var b = m.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump to...", onSearch: le, emptyMessage: S = "No results found.", emptyState: C, open: w, defaultOpen: T, onOpenChange: E, keybinding: D = "mod+k", maxHeight: O = "320px", footerHints: k, className: A, ...j }, M) {
|
|
26
|
+
let N = w !== void 0, [P, F] = m.useState(T ?? !1), I = N ? w : P, L = m.useRef(I);
|
|
25
27
|
L.current = I;
|
|
26
|
-
let R =
|
|
28
|
+
let R = m.useCallback((e) => {
|
|
27
29
|
let t = typeof e == "function" ? e(L.current) : e;
|
|
28
30
|
N || F(t), E?.(t);
|
|
29
|
-
}, [N, E]), [z, B] =
|
|
31
|
+
}, [N, E]), [z, B] = m.useState(""), [V, H] = m.useState(0), U = m.useRef(null), W = m.useRef(null), G = m.useId(), K = `command-palette-listbox-${G}`, { reducedMotion: q } = ne(), J = { duration: 0 }, ue = m.useMemo(() => p(), []), Y = m.useMemo(() => {
|
|
30
32
|
if (!z.trim()) return b;
|
|
31
33
|
let e = z.toLowerCase();
|
|
32
34
|
return b.map((t) => ({
|
|
33
35
|
...t,
|
|
34
|
-
items: t.items.filter((t) =>
|
|
36
|
+
items: t.items.filter((t) => se(t).toLowerCase().includes(e) || ce(t).toLowerCase().includes(e))
|
|
35
37
|
})).filter((e) => e.items.length > 0);
|
|
36
|
-
}, [b, z]), X =
|
|
37
|
-
|
|
38
|
+
}, [b, z]), X = m.useMemo(() => Y.flatMap((e) => e.items), [Y]);
|
|
39
|
+
m.useEffect(() => {
|
|
38
40
|
if (D === !1) return;
|
|
39
41
|
let e = Array.isArray(D) ? D : [D];
|
|
40
42
|
function t(t) {
|
|
41
|
-
for (let n of e) if (
|
|
43
|
+
for (let n of e) if (f(t, n)) {
|
|
42
44
|
t.preventDefault(), R((e) => !e);
|
|
43
45
|
return;
|
|
44
46
|
}
|
|
45
47
|
}
|
|
46
48
|
return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
|
|
47
|
-
}, [D, R]),
|
|
49
|
+
}, [D, R]), m.useEffect(() => {
|
|
48
50
|
I && (B(""), H(0), requestAnimationFrame(() => {
|
|
49
51
|
U.current?.focus();
|
|
50
52
|
}));
|
|
51
53
|
}, [I]);
|
|
52
|
-
let
|
|
54
|
+
let de = (e) => {
|
|
53
55
|
switch (e.key) {
|
|
54
56
|
case "ArrowDown":
|
|
55
57
|
e.preventDefault(), H((e) => e < X.length - 1 ? e + 1 : 0);
|
|
@@ -68,20 +70,20 @@ var b = p.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
|
|
|
68
70
|
break;
|
|
69
71
|
}
|
|
70
72
|
};
|
|
71
|
-
|
|
73
|
+
m.useEffect(() => {
|
|
72
74
|
(W.current?.querySelector(`[data-command-index="${V}"]`))?.scrollIntoView({ block: "nearest" });
|
|
73
75
|
}, [V]);
|
|
74
|
-
let
|
|
75
|
-
B(e), H(0),
|
|
76
|
-
},
|
|
76
|
+
let fe = (e) => {
|
|
77
|
+
B(e), H(0), le?.(e);
|
|
78
|
+
}, pe = m.useMemo(() => {
|
|
77
79
|
let e = /* @__PURE__ */ new Map(), t = 0;
|
|
78
80
|
for (let n of Y) for (let r of n.items) e.set(r.id, t++);
|
|
79
81
|
return e;
|
|
80
|
-
}, [Y]),
|
|
82
|
+
}, [Y]), me = q ? J : t.snappy, Z = q ? J : n.fade, Q = q ? {
|
|
81
83
|
opacity: 1,
|
|
82
84
|
scale: 1,
|
|
83
85
|
y: 0
|
|
84
|
-
} : void 0,
|
|
86
|
+
} : void 0, he = typeof O == "number" ? `${O}px` : O, $ = k === !1 ? !1 : k ?? [
|
|
85
87
|
{
|
|
86
88
|
keys: "↑↓",
|
|
87
89
|
label: "Navigate"
|
|
@@ -95,22 +97,22 @@ var b = p.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
|
|
|
95
97
|
label: "Close"
|
|
96
98
|
}
|
|
97
99
|
];
|
|
98
|
-
return /* @__PURE__ */
|
|
100
|
+
return /* @__PURE__ */ h(o, {
|
|
99
101
|
open: I,
|
|
100
|
-
onOpenChange:
|
|
102
|
+
onOpenChange: m.useCallback((e) => {
|
|
101
103
|
R(e);
|
|
102
104
|
}, [R]),
|
|
103
|
-
children: /* @__PURE__ */
|
|
105
|
+
children: /* @__PURE__ */ g(ee, { children: [/* @__PURE__ */ h(l, { 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" }), /* @__PURE__ */ g(s, {
|
|
104
106
|
ref: M,
|
|
105
107
|
...j,
|
|
106
|
-
className:
|
|
107
|
-
onKeyDown:
|
|
108
|
+
className: r("fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2", "overflow-hidden rounded-overlay-lg border border-surface-border-strong bg-surface-overlay shadow-overlay", "duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2", "data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2", A),
|
|
109
|
+
onKeyDown: de,
|
|
108
110
|
children: [
|
|
109
|
-
/* @__PURE__ */
|
|
110
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ g(te, { children: [/* @__PURE__ */ h(u, { children: "Command Palette" }), /* @__PURE__ */ h(c, { children: "Search or jump to pages, projects, tasks, and actions" })] }),
|
|
112
|
+
/* @__PURE__ */ g("div", {
|
|
111
113
|
className: "flex items-center gap-ds-04 border-b border-surface-border-strong px-ds-05 py-ds-04",
|
|
112
114
|
children: [
|
|
113
|
-
/* @__PURE__ */
|
|
115
|
+
/* @__PURE__ */ h(v.span, {
|
|
114
116
|
initial: Q ?? {
|
|
115
117
|
opacity: 0,
|
|
116
118
|
scale: .96
|
|
@@ -119,74 +121,74 @@ var b = p.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
|
|
|
119
121
|
opacity: 1,
|
|
120
122
|
scale: 1
|
|
121
123
|
},
|
|
122
|
-
transition:
|
|
124
|
+
transition: me,
|
|
123
125
|
className: "inline-flex shrink-0",
|
|
124
|
-
children: /* @__PURE__ */
|
|
125
|
-
icon:
|
|
126
|
+
children: /* @__PURE__ */ h(i, {
|
|
127
|
+
icon: ae,
|
|
126
128
|
size: "sm",
|
|
127
129
|
stroke: "light",
|
|
128
130
|
className: "text-surface-fg-subtle"
|
|
129
131
|
})
|
|
130
132
|
}),
|
|
131
|
-
/* @__PURE__ */
|
|
133
|
+
/* @__PURE__ */ h("input", {
|
|
132
134
|
ref: U,
|
|
133
135
|
value: z,
|
|
134
|
-
onChange: (e) =>
|
|
136
|
+
onChange: (e) => fe(e.target.value),
|
|
135
137
|
placeholder: x,
|
|
136
138
|
role: "combobox",
|
|
137
139
|
"aria-expanded": !0,
|
|
138
140
|
"aria-controls": K,
|
|
139
141
|
"aria-activedescendant": X[V] ? `command-item-${G}-${X[V].id}` : void 0,
|
|
140
142
|
"aria-autocomplete": "list",
|
|
141
|
-
className:
|
|
143
|
+
className: r("flex-1 bg-transparent text-ds-base text-surface-fg outline-hidden", "placeholder:text-surface-fg-subtle"),
|
|
142
144
|
autoComplete: "off",
|
|
143
145
|
autoCorrect: "off",
|
|
144
146
|
spellCheck: !1
|
|
145
147
|
}),
|
|
146
|
-
/* @__PURE__ */
|
|
148
|
+
/* @__PURE__ */ h("kbd", {
|
|
147
149
|
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",
|
|
148
150
|
children: "Esc"
|
|
149
151
|
})
|
|
150
152
|
]
|
|
151
153
|
}),
|
|
152
|
-
/* @__PURE__ */
|
|
154
|
+
/* @__PURE__ */ g("div", {
|
|
153
155
|
ref: W,
|
|
154
156
|
id: K,
|
|
155
157
|
role: "listbox",
|
|
156
158
|
"aria-label": "Command results",
|
|
157
159
|
className: "overflow-y-auto px-ds-03 py-ds-03",
|
|
158
|
-
style: { maxHeight:
|
|
159
|
-
children: [Y.length === 0 && /* @__PURE__ */
|
|
160
|
+
style: { maxHeight: he },
|
|
161
|
+
children: [Y.length === 0 && /* @__PURE__ */ h(v.div, {
|
|
160
162
|
initial: Q ?? { opacity: 0 },
|
|
161
163
|
animate: { opacity: 1 },
|
|
162
164
|
transition: Z,
|
|
163
165
|
className: "flex items-center justify-center py-ds-07",
|
|
164
|
-
children: C ?? /* @__PURE__ */
|
|
166
|
+
children: C ?? /* @__PURE__ */ h("p", {
|
|
165
167
|
className: "text-ds-md text-surface-fg-subtle",
|
|
166
|
-
children:
|
|
168
|
+
children: S
|
|
167
169
|
})
|
|
168
|
-
}), Y.map((
|
|
170
|
+
}), Y.map((o, s) => /* @__PURE__ */ g(v.div, {
|
|
169
171
|
initial: Q ?? { opacity: 0 },
|
|
170
172
|
animate: { opacity: 1 },
|
|
171
173
|
transition: q ? J : {
|
|
172
|
-
...
|
|
173
|
-
delay:
|
|
174
|
+
...n.fade,
|
|
175
|
+
delay: s * .06
|
|
174
176
|
},
|
|
175
177
|
className: "mb-ds-02",
|
|
176
|
-
children: [/* @__PURE__ */
|
|
178
|
+
children: [/* @__PURE__ */ h("div", {
|
|
177
179
|
className: "px-ds-03 pb-ds-02 pt-ds-03",
|
|
178
|
-
children: /* @__PURE__ */
|
|
180
|
+
children: /* @__PURE__ */ h("span", {
|
|
179
181
|
className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle",
|
|
180
|
-
children:
|
|
182
|
+
children: o.label
|
|
181
183
|
})
|
|
182
|
-
}),
|
|
183
|
-
let
|
|
184
|
-
return /* @__PURE__ */
|
|
185
|
-
id: `command-item-${G}-${
|
|
184
|
+
}), o.items.map((n) => {
|
|
185
|
+
let o = pe.get(n.id) ?? 0, s = o === V;
|
|
186
|
+
return /* @__PURE__ */ g(v.button, {
|
|
187
|
+
id: `command-item-${G}-${n.id}`,
|
|
186
188
|
type: "button",
|
|
187
189
|
role: "option",
|
|
188
|
-
"aria-selected":
|
|
189
|
-
"data-command-index":
|
|
190
|
+
"aria-selected": s,
|
|
191
|
+
"data-command-index": o,
|
|
190
192
|
initial: Q ?? {
|
|
191
193
|
opacity: 0,
|
|
192
194
|
y: 4
|
|
@@ -196,90 +198,93 @@ var b = p.forwardRef(function({ groups: b = [], placeholder: x = "Search or jump
|
|
|
196
198
|
y: 0
|
|
197
199
|
},
|
|
198
200
|
transition: q ? J : {
|
|
199
|
-
...
|
|
200
|
-
delay:
|
|
201
|
+
...t.snappy,
|
|
202
|
+
delay: o * .03
|
|
201
203
|
},
|
|
202
204
|
onClick: () => {
|
|
203
|
-
|
|
205
|
+
n.onSelect(), R(!1);
|
|
204
206
|
},
|
|
205
|
-
onMouseEnter: () => H(
|
|
206
|
-
className:
|
|
207
|
+
onMouseEnter: () => H(o),
|
|
208
|
+
className: r("flex w-full items-center gap-ds-04 rounded-surface px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard", s ? "bg-surface-raised-hover text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"),
|
|
207
209
|
children: [
|
|
208
|
-
|
|
209
|
-
className:
|
|
210
|
+
n.icon && /* @__PURE__ */ h("span", {
|
|
211
|
+
className: r("[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0 transition-colors duration-fast-02 ease-productive-standard", s ? "text-accent-11" : "text-surface-fg-subtle"),
|
|
210
212
|
"aria-hidden": "true",
|
|
211
|
-
children:
|
|
213
|
+
children: /* @__PURE__ */ h(e, {
|
|
214
|
+
size: "sm",
|
|
215
|
+
children: a(n.icon)
|
|
216
|
+
})
|
|
212
217
|
}),
|
|
213
|
-
/* @__PURE__ */
|
|
218
|
+
/* @__PURE__ */ g("div", {
|
|
214
219
|
className: "flex flex-1 flex-col",
|
|
215
|
-
children: [/* @__PURE__ */
|
|
220
|
+
children: [/* @__PURE__ */ h("span", {
|
|
216
221
|
className: "text-ds-md",
|
|
217
|
-
children:
|
|
218
|
-
}),
|
|
222
|
+
children: n.renderLabel ? n.renderLabel(z) : n.label
|
|
223
|
+
}), n.description && /* @__PURE__ */ h("span", {
|
|
219
224
|
className: "text-ds-sm text-surface-fg-subtle",
|
|
220
|
-
children:
|
|
225
|
+
children: n.description
|
|
221
226
|
})]
|
|
222
227
|
}),
|
|
223
|
-
|
|
228
|
+
n.shortcut && /* @__PURE__ */ h("span", {
|
|
224
229
|
className: "flex shrink-0 items-center gap-ds-01",
|
|
225
|
-
children:
|
|
226
|
-
className:
|
|
227
|
-
children: e === "Ctrl" || e === "ctrl" ? d(
|
|
230
|
+
children: y(n.shortcut).map((e, t) => /* @__PURE__ */ h("kbd", {
|
|
231
|
+
className: r("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", s ? "bg-accent-2 text-accent-11 border-accent-6" : "bg-surface-raised text-surface-fg-subtle border-surface-border-strong"),
|
|
232
|
+
children: e === "Ctrl" || e === "ctrl" ? d(ue) : e
|
|
228
233
|
}, t))
|
|
229
234
|
}),
|
|
230
|
-
/* @__PURE__ */
|
|
235
|
+
/* @__PURE__ */ h(oe, { children: s && /* @__PURE__ */ h(v.span, {
|
|
231
236
|
initial: q ? void 0 : { opacity: 0 },
|
|
232
237
|
animate: { opacity: 1 },
|
|
233
238
|
exit: q ? void 0 : { opacity: 0 },
|
|
234
239
|
transition: Z,
|
|
235
240
|
className: "inline-flex shrink-0",
|
|
236
|
-
children: /* @__PURE__ */
|
|
237
|
-
icon:
|
|
241
|
+
children: /* @__PURE__ */ h(i, {
|
|
242
|
+
icon: _,
|
|
238
243
|
size: "sm",
|
|
239
244
|
stroke: "light",
|
|
240
245
|
className: "text-surface-fg-subtle"
|
|
241
246
|
})
|
|
242
247
|
}) })
|
|
243
248
|
]
|
|
244
|
-
},
|
|
249
|
+
}, n.id);
|
|
245
250
|
})]
|
|
246
|
-
},
|
|
251
|
+
}, o.label))]
|
|
247
252
|
}),
|
|
248
|
-
$ !== !1 && /* @__PURE__ */
|
|
253
|
+
$ !== !1 && /* @__PURE__ */ h(v.div, {
|
|
249
254
|
initial: Q ?? { opacity: 0 },
|
|
250
255
|
animate: { opacity: 1 },
|
|
251
256
|
transition: Z,
|
|
252
257
|
className: "flex items-center gap-ds-05 border-t border-surface-border-strong px-ds-05 py-ds-03",
|
|
253
|
-
children: $.map((e, t) => /* @__PURE__ */
|
|
258
|
+
children: $.map((e, t) => /* @__PURE__ */ g("div", {
|
|
254
259
|
className: "flex items-center gap-ds-02b",
|
|
255
|
-
children: [e.keys === "↑↓" ? /* @__PURE__ */
|
|
260
|
+
children: [e.keys === "↑↓" ? /* @__PURE__ */ g("div", {
|
|
256
261
|
className: "flex items-center gap-ds-01",
|
|
257
|
-
children: [/* @__PURE__ */
|
|
262
|
+
children: [/* @__PURE__ */ h("kbd", {
|
|
258
263
|
className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd",
|
|
259
|
-
children: /* @__PURE__ */
|
|
260
|
-
icon:
|
|
264
|
+
children: /* @__PURE__ */ h(i, {
|
|
265
|
+
icon: ie,
|
|
261
266
|
size: "xs",
|
|
262
267
|
className: "text-surface-fg-subtle"
|
|
263
268
|
})
|
|
264
|
-
}), /* @__PURE__ */
|
|
269
|
+
}), /* @__PURE__ */ h("kbd", {
|
|
265
270
|
className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-kbd",
|
|
266
|
-
children: /* @__PURE__ */
|
|
267
|
-
icon:
|
|
271
|
+
children: /* @__PURE__ */ h(i, {
|
|
272
|
+
icon: re,
|
|
268
273
|
size: "xs",
|
|
269
274
|
className: "text-surface-fg-subtle"
|
|
270
275
|
})
|
|
271
276
|
})]
|
|
272
|
-
}) : e.keys === "↵" ? /* @__PURE__ */
|
|
277
|
+
}) : e.keys === "↵" ? /* @__PURE__ */ h("kbd", {
|
|
273
278
|
className: "inline-flex h-[20px] items-center justify-center rounded-control border border-surface-border-strong bg-surface-raised px-ds-02b shadow-kbd",
|
|
274
|
-
children: /* @__PURE__ */
|
|
275
|
-
icon:
|
|
279
|
+
children: /* @__PURE__ */ h(i, {
|
|
280
|
+
icon: _,
|
|
276
281
|
size: "xs",
|
|
277
282
|
className: "text-surface-fg-subtle"
|
|
278
283
|
})
|
|
279
|
-
}) : /* @__PURE__ */
|
|
284
|
+
}) : /* @__PURE__ */ h("kbd", {
|
|
280
285
|
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",
|
|
281
286
|
children: e.keys
|
|
282
|
-
}), /* @__PURE__ */
|
|
287
|
+
}), /* @__PURE__ */ h("span", {
|
|
283
288
|
className: "text-ds-xs text-surface-fg-subtle",
|
|
284
289
|
children: e.label
|
|
285
290
|
})]
|
|
@@ -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 { springs,tweens } from '../ui/lib/motion'\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?: React.ReactNode\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 border border-surface-border-strong bg-surface-overlay shadow-overlay',\n 'duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n 'data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2',\n 'data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2',\n className,\n )}\n 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 {item.icon}\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 border border-surface-border-strong bg-surface-overlay shadow-overlay',\n 'duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n 'data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2',\n 'data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2',\n className,\n )}\n 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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"}
|