@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/components/Columns.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { useRef, useState, useCallback, useEffect } from 'react';
-import { B as Button } from '../Button-DS6O6fvU.js';
+import { B as Button } from '../Button-cWcBEd-G.js';
 
 function ColumnContent({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn(`grid content-start gap-4 overflow-y-auto`, className), children });
@@ -16,7 +16,7 @@ function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator
   ] });
 }
 function Separator() {
-  return /* @__PURE__ */ jsx("div", { className: cn("mx-3 w-[3px] shrink-0 bg-surface5") });
+  return /* @__PURE__ */ jsx("div", { className: cn("mx-3 w-[3px] shrink-0 bg-border") });
 }
 
 function ColumnToolbar({ children, className }) {
@@ -117,7 +117,7 @@ function ScrollArrow({ direction, onClick }) {
     "div",
     {
       className: cn(
-        "absolute inset-y-0 z-20 flex w-20 items-center justify-center bg-surface2 px-5",
+        "absolute inset-y-0 z-20 flex w-20 items-center justify-center bg-background px-5",
         isLeft ? "left-0" : "right-0"
       ),
       children: /* @__PURE__ */ jsx(Button, { onClick, className: "size-full px-0", "aria-label": `Scroll ${direction}`, children: /* @__PURE__ */ jsx(Icon, {}) })

package/dist/components/Columns.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Columns.es.js","sources":["../../src/ds/components/Columns/column-content.tsx","../../src/ds/components/Columns/column-root.tsx","../../src/ds/components/Columns/column-toolbar.tsx","../../src/ds/components/Columns/column.tsx","../../src/ds/components/Columns/columns.tsx","../../src/ds/components/Columns/multi-column.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type ColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnContent({ children, className }: ColumnProps) {\n  return <div className={cn(`grid content-start gap-4 overflow-y-auto`, className)}>{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type ColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n  withRightSeparator?: boolean;\n  withLeftSeparator?: boolean;\n};\n\nexport function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }: ColumnProps) {\n  return (\n    <div className=\"flex w-full overflow-y-auto\">\n      {withLeftSeparator && <Separator />}\n\n      <div className={cn(`grid w-full content-start gap-4 overflow-y-auto`, className)}>{children}</div>\n\n      {withRightSeparator && <Separator />}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return <div className={cn('mx-3 w-[3px] shrink-0 bg-surface5')}></div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type ColumnToolbarProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnToolbar({ children, className }: ColumnToolbarProps) {\n  return (\n    <div className={cn(`flex w-full flex-wrap items-center justify-between gap-3 gap-x-4`, className)}>{children}</div>\n  );\n}\n","import { ColumnContent } from './column-content';\nimport { ColumnRoot } from './column-root';\nimport { ColumnToolbar } from './column-toolbar';\n\nexport const Column = Object.assign(ColumnRoot, {\n  Content: ColumnContent,\n  Toolbar: ColumnToolbar,\n});\n","import { cn } from '@/lib/utils';\n\nexport type ColumnsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Columns({ children, className }: ColumnsProps) {\n  return <div className={cn(`grid size-full grid-cols-1 overflow-y-auto`, className)}>{children}</div>;\n}\n","'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { cn } from '@/lib/utils';\n\nexport type MultiColumnProps = {\n  children?: React.ReactNode;\n  numOfColumns?: number;\n  minColumnWidth?: string;\n};\n\nexport function MultiColumn({ children, numOfColumns = 1, minColumnWidth }: MultiColumnProps): React.JSX.Element {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const prevColumnsRef = useRef(numOfColumns);\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (numOfColumns > prevColumnsRef.current) {\n      // New column added — scroll to the right end so it's visible\n      requestAnimationFrame(() => {\n        el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });\n      });\n    }\n    prevColumnsRef.current = numOfColumns;\n  }, [numOfColumns]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        scrollToColumn(e.key === 'ArrowLeft' ? 'left' : 'right');\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, []);\n\n  const scrollToColumn = (direction: 'left' | 'right') => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const columns = Array.from(el.children) as HTMLElement[];\n    const containerLeft = el.scrollLeft;\n    const containerRight = containerLeft + el.clientWidth;\n\n    if (direction === 'right') {\n      // Find the first column whose right edge is past the container's right edge\n      const target = columns.find(col => col.offsetLeft + col.offsetWidth > containerRight + 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: 'smooth' });\n      }\n    } else {\n      // Find the last column whose left edge is before the container's left edge\n      const target = [...columns].reverse().find(col => col.offsetLeft < containerLeft - 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={cn('MULTI_COLUMN relative size-full overflow-hidden')}>\n      {canScrollLeft && <ScrollArrow direction=\"left\" onClick={() => scrollToColumn('left')} />}\n      {canScrollRight && <ScrollArrow direction=\"right\" onClick={() => scrollToColumn('right')} />}\n      <div\n        ref={scrollRef}\n        className=\"grid size-full overflow-auto\"\n        style={{\n          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? '0'}, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollArrow({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n  const isLeft = direction === 'left';\n\n  return (\n    <div\n      className={cn(\n        'absolute inset-y-0 z-20 flex w-20 items-center justify-center bg-surface2 px-5',\n        isLeft ? 'left-0' : 'right-0',\n      )}\n    >\n      <Button onClick={onClick} className=\"size-full px-0\" aria-label={`Scroll ${direction}`}>\n        <Icon />\n      </Button>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Columns.es.js","sources":["../../src/ds/components/Columns/column-content.tsx","../../src/ds/components/Columns/column-root.tsx","../../src/ds/components/Columns/column-toolbar.tsx","../../src/ds/components/Columns/column.tsx","../../src/ds/components/Columns/columns.tsx","../../src/ds/components/Columns/multi-column.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type ColumnProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnContent({ children, className }: ColumnProps) {\n  return <div className={cn(`grid content-start gap-4 overflow-y-auto`, className)}>{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type ColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n  withRightSeparator?: boolean;\n  withLeftSeparator?: boolean;\n};\n\nexport function ColumnRoot({ children, className, withLeftSeparator, withRightSeparator }: ColumnProps) {\n  return (\n    <div className=\"flex w-full overflow-y-auto\">\n      {withLeftSeparator && <Separator />}\n\n      <div className={cn(`grid w-full content-start gap-4 overflow-y-auto`, className)}>{children}</div>\n\n      {withRightSeparator && <Separator />}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return <div className={cn('mx-3 w-[3px] shrink-0 bg-border')}></div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type ColumnToolbarProps = {\n  children?: React.ReactNode;\n  className?: string;\n};\n\nexport function ColumnToolbar({ children, className }: ColumnToolbarProps) {\n  return (\n    <div className={cn(`flex w-full flex-wrap items-center justify-between gap-3 gap-x-4`, className)}>{children}</div>\n  );\n}\n","import { ColumnContent } from './column-content';\nimport { ColumnRoot } from './column-root';\nimport { ColumnToolbar } from './column-toolbar';\n\nexport const Column = Object.assign(ColumnRoot, {\n  Content: ColumnContent,\n  Toolbar: ColumnToolbar,\n});\n","import { cn } from '@/lib/utils';\n\nexport type ColumnsProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function Columns({ children, className }: ColumnsProps) {\n  return <div className={cn(`grid size-full grid-cols-1 overflow-y-auto`, className)}>{children}</div>;\n}\n","'use client';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Button } from '../Button';\nimport { cn } from '@/lib/utils';\n\nexport type MultiColumnProps = {\n  children?: React.ReactNode;\n  numOfColumns?: number;\n  minColumnWidth?: string;\n};\n\nexport function MultiColumn({ children, numOfColumns = 1, minColumnWidth }: MultiColumnProps): React.JSX.Element {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n  const updateScrollState = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  }, []);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    updateScrollState();\n\n    el.addEventListener('scroll', updateScrollState, { passive: true });\n\n    const observer = new ResizeObserver(updateScrollState);\n    observer.observe(el);\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollState);\n      observer.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const prevColumnsRef = useRef(numOfColumns);\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (numOfColumns > prevColumnsRef.current) {\n      // New column added — scroll to the right end so it's visible\n      requestAnimationFrame(() => {\n        el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });\n      });\n    }\n    prevColumnsRef.current = numOfColumns;\n  }, [numOfColumns]);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        e.preventDefault();\n        scrollToColumn(e.key === 'ArrowLeft' ? 'left' : 'right');\n      }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, []);\n\n  const scrollToColumn = (direction: 'left' | 'right') => {\n    const el = scrollRef.current;\n    if (!el) return;\n\n    const columns = Array.from(el.children) as HTMLElement[];\n    const containerLeft = el.scrollLeft;\n    const containerRight = containerLeft + el.clientWidth;\n\n    if (direction === 'right') {\n      // Find the first column whose right edge is past the container's right edge\n      const target = columns.find(col => col.offsetLeft + col.offsetWidth > containerRight + 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft + target.offsetWidth - el.clientWidth, behavior: 'smooth' });\n      }\n    } else {\n      // Find the last column whose left edge is before the container's left edge\n      const target = [...columns].reverse().find(col => col.offsetLeft < containerLeft - 1);\n      if (target) {\n        el.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={cn('MULTI_COLUMN relative size-full overflow-hidden')}>\n      {canScrollLeft && <ScrollArrow direction=\"left\" onClick={() => scrollToColumn('left')} />}\n      {canScrollRight && <ScrollArrow direction=\"right\" onClick={() => scrollToColumn('right')} />}\n      <div\n        ref={scrollRef}\n        className=\"grid size-full overflow-auto\"\n        style={{\n          gridTemplateColumns: `repeat(${numOfColumns}, minmax(${minColumnWidth ?? '0'}, 1fr))`,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction ScrollArrow({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {\n  const Icon = direction === 'left' ? ChevronLeftIcon : ChevronRightIcon;\n  const isLeft = direction === 'left';\n\n  return (\n    <div\n      className={cn(\n        'absolute inset-y-0 z-20 flex w-20 items-center justify-center bg-background px-5',\n        isLeft ? 'left-0' : 'right-0',\n      )}\n    >\n      <Button onClick={onClick} className=\"size-full px-0\" aria-label={`Scroll ${direction}`}>\n        <Icon />\n      </Button>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Combobox.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const combobox = require('../combobox-F3WprWVx.cjs');
-const comboboxStyles = require('../combobox-styles-1C3D0JLL.cjs');
+const combobox = require('../combobox-BWM3VH-n.cjs');
+const comboboxStyles = require('../combobox-styles-DYlNNjKC.cjs');
 const combobox$1 = require('@base-ui/react/combobox');
 
 

package/dist/components/Combobox.es.js

@@ -1,4 +1,4 @@
-export { C as Combobox } from '../combobox-CQ2Ri2LC.js';
-export { c as comboboxStyles } from '../combobox-styles-BMerfYPX.js';
+export { C as Combobox } from '../combobox-D7xJFZuO.js';
+export { c as comboboxStyles } from '../combobox-styles-CRebmeht.js';
 export { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
 //# sourceMappingURL=Combobox.es.js.map

package/dist/components/Command.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const command = require('../command-CuuMEoIB.cjs');
+const command = require('../command-DuT06mTw.cjs');
 
 
 

package/dist/components/Command.es.js

@@ -1,2 +1,2 @@
-export { C as Command, a as CommandDialog, b as CommandEmpty, c as CommandGroup, d as CommandInput, e as CommandItem, f as CommandList, g as CommandSeparator, h as CommandShortcut } from '../command-rJ4b4Z2h.js';
+export { C as Command, a as CommandDialog, b as CommandEmpty, c as CommandGroup, d as CommandInput, e as CommandItem, f as CommandList, g as CommandSeparator, h as CommandShortcut } from '../command-jRiL1vXM.js';
 //# sourceMappingURL=Command.es.js.map

package/dist/components/CommandPalette.cjs.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../CommandPalette.css');const jsxRuntime = require('react/jsx-runtime');
-const command = require('../command-CuuMEoIB.cjs');
-const kbd = require('../kbd-DjjBBIZN.cjs');
-const scrollArea = require('../scroll-area-l6Yx-88I.cjs');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const command = require('../command-DuT06mTw.cjs');
+const kbd = require('../kbd-B-Z2sNvK.cjs');
+const scrollArea = require('../scroll-area-Qjf7e0Ik.cjs');
+const primitives_formElement = require('../primitives/form-element.cjs.js');
+const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
+const primitives_transitions = require('../primitives/transitions.cjs.js');
+const primitives_typography = require('../primitives/typography.cjs.js');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function CommandPaletteDialog({
   children,
@@ -20,17 +24,16 @@ function CommandPaletteDialog({
     command.CommandDialog,
     {
       showOverlay,
-      overlayClassName: utils_cn.cn("bg-surface1/40 backdrop-blur-none", overlayClassName),
+      overlayClassName: utils_cn.cn("bg-sidebar/40 backdrop-blur-none", overlayClassName),
       contentClassName: utils_cn.cn(
         "command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]",
         contentClassName
       ),
       commandClassName: utils_cn.cn(
         // Height lives in `.command-palette-shell` — see command-palette.css.
-        "command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-neutral4 shadow-none backdrop-blur-none",
-        "[&_[data-slot=command-input-wrapper]]:h-11 [&_[data-slot=command-input-wrapper]]:shrink-0 [&_[data-slot=command-input-wrapper]]:rounded-xl [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:border-border1 [&_[data-slot=command-input-wrapper]]:bg-surface3 [&_[data-slot=command-input-wrapper]]:px-3 [&_[data-slot=command-input-wrapper]]:shadow-[0_6px_18px_-16px_rgb(0_0_0_/_0.55)]",
-        "[&_[data-slot=command-input-wrapper]]:pr-11 [&_[data-slot=command-input-wrapper]]:transition-[border-color,box-shadow] [&_[data-slot=command-input-wrapper]]:duration-150 [&_[data-slot=command-input-wrapper]]:ease-out [&_[data-slot=command-input-wrapper]_svg]:text-neutral4 [&_[data-slot=command-input-wrapper]:focus-within]:border-border1 [&_[data-slot=command-input-wrapper]:focus-within]:bg-surface3 [&_[data-slot=command-input-wrapper]:focus-within]:shadow-[0_8px_22px_-18px_rgb(0_0_0_/_0.6)]",
-        "**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-ui-md",
+        "command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-muted-foreground shadow-none backdrop-blur-none",
+        "[&_[data-slot=command-input-wrapper]_svg]:text-muted-foreground",
+        "**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-body",
         "**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group]]:p-0",
         "**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-1.5",
         commandClassName
@@ -44,13 +47,20 @@ function CommandPaletteInput({ wrapperClassName, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     command.CommandInput,
     {
-      wrapperClassName: utils_cn.cn("command-palette-surface command-palette-surface-input", wrapperClassName),
+      wrapperClassName: utils_cn.cn(
+        "command-palette-surface command-palette-surface-input",
+        primitives_formElement.inputSurfaceAndFocusWithinStyle,
+        // `border-0` because `CommandInput`'s own `border-b` is the separator of a single-panel
+        // Command; here the input is a detached pill and the material already carries its rim.
+        "h-11 shrink-0 rounded-xl border-0 px-3 pr-11",
+        wrapperClassName
+      ),
       ...props
     }
   );
 }
 function CommandPaletteBody({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 rounded-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: utils_cn.cn(
@@ -67,7 +77,8 @@ function CommandPaletteRail({ children, className, ...props }) {
     "aside",
     {
       className: utils_cn.cn(
-        "command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-2xl border border-border1 bg-surface2 p-2 shadow-[0_8px_24px_-20px_rgb(0_0_0_/_0.55)] md:h-full md:max-h-none",
+        "command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-xl p-2 md:h-full md:max-h-none",
+        primitives_raisedSurface.overlaySurfaceStyle,
         className
       ),
       ...props,
@@ -86,14 +97,19 @@ function CommandPaletteScope({
     "button",
     {
       type: "button",
-      className: "text-ui-smd leading-ui-sm text-neutral3 hover:border-border1 hover:bg-surface4 hover:text-neutral6 data-[active=true]:border-border1 data-[active=true]:bg-surface4 data-[active=true]:text-neutral6 flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.99]",
+      className: utils_cn.cn(
+        primitives_typography.quietTextHover,
+        "text-body-sm hover:border-border hover:bg-fill-subtle data-[active=true]:border-border data-[active=true]:bg-fill-hover data-[active=true]:text-foreground flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left",
+        // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`
+        "transition-[color,transform] duration-fast ease-out-custom motion-reduce:transition-none active:scale-[0.99]"
+      ),
       "data-active": active,
       "aria-pressed": active,
       onClick: onSelect,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4", children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border1 bg-surface4/70 text-ui-xs text-neutral3 rounded-md border px-1.5 py-0.5 leading-none", children: count })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border bg-muted/70 text-meta text-muted-foreground rounded-md border px-1.5 py-0.5 leading-none", children: count })
       ]
     }
   );
@@ -103,7 +119,10 @@ function CommandPaletteResults({ children, footer, ...props }) {
     "div",
     {
       role: "region",
-      className: "command-palette-surface command-palette-surface-results command-palette-results-panel border-border1 bg-surface2 relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border shadow-[0_10px_28px_-22px_rgb(0_0_0_/_0.6)]",
+      className: utils_cn.cn(
+        "command-palette-surface command-palette-surface-results command-palette-results-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl",
+        primitives_raisedSurface.overlaySurfaceStyle
+      ),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -113,7 +132,7 @@ function CommandPaletteResults({ children, footer, ...props }) {
             scrollAreaClassName: "min-h-0 flex-1 rounded-none",
             scrollAreaViewportClassName: "command-palette-scroll-viewport",
             className: "command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none",
-            highlightClassName: "rounded-xl",
+            highlightClassName: "rounded-lg",
             children
           }
         ),
@@ -136,21 +155,29 @@ function CommandPaletteItem({
     command.CommandItem,
     {
       className: utils_cn.cn(
-        "group h-auto items-start gap-3 rounded-xl border border-transparent px-3 py-2.5 data-[selected=true]:border-border1",
-        "transition-[background-color,border-color] duration-150 ease-out",
+        "group h-auto items-start gap-3 rounded-lg border border-transparent px-3 py-2.5 data-[selected=true]:border-border",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral3 group-data-[selected=true]:text-neutral6 mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center transition-colors duration-150 ease-out [&>svg]:!size-4 [&>svg]:shrink-0", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils_cn.cn(
+              "text-muted-foreground group-data-[selected=true]:text-foreground mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center [&>svg]:!size-4 [&>svg]:shrink-0",
+              primitives_transitions.controlStateColorTransition
+            ),
+            children: icon
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-smd leading-ui-sm text-neutral6 truncate font-medium", children: title }),
-            badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border1 bg-surface4/60 text-ui-xs text-neutral3 shrink-0 rounded-md border px-1.5 py-0.5 leading-none font-medium uppercase", children: badge })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label text-foreground truncate", children: title }),
+            badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border bg-muted/60 text-meta text-muted-foreground shrink-0 rounded-md border px-1.5 py-0.5 leading-none uppercase", children: badge })
           ] }),
-          (subtitle || path) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-xs leading-ui-xs text-neutral3 flex min-w-0 items-center gap-2", children: [
+          (subtitle || path) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-meta text-muted-foreground flex min-w-0 items-center gap-2", children: [
             subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: subtitle }),
-            path && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border1 bg-surface4/70 text-ui-xs text-neutral3 max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono leading-none", children: path })
+            path && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-border bg-muted/70 text-meta text-muted-foreground max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono leading-none", children: path })
           ] })
         ] }),
         shortcut && /* @__PURE__ */ jsxRuntime.jsx(command.CommandShortcut, { children: shortcut })
@@ -159,7 +186,7 @@ function CommandPaletteItem({
   );
 }
 function CommandPaletteFooter({ label }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "command-palette-footer text-ui-xs text-neutral3 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "command-palette-footer text-meta text-muted-foreground pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "sm", children: "↑" }),

package/dist/components/CommandPalette.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.cjs.js","sources":["../../src/ds/components/CommandPalette/command-palette.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from '@/ds/components/Command';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { cn } from '@/lib/utils';\n\nimport './command-palette.css';\n\ntype CommandPaletteDialogProps = ComponentPropsWithoutRef<typeof CommandDialog>;\n\nfunction CommandPaletteDialog({\n  children,\n  contentClassName,\n  commandClassName,\n  showOverlay = true,\n  overlayClassName,\n  ...props\n}: CommandPaletteDialogProps) {\n  return (\n    <CommandDialog\n      showOverlay={showOverlay}\n      overlayClassName={cn('bg-surface1/40 backdrop-blur-none', overlayClassName)}\n      contentClassName={cn(\n        'command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]',\n        contentClassName,\n      )}\n      commandClassName={cn(\n        // Height lives in `.command-palette-shell` — see command-palette.css.\n        'command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-neutral4 shadow-none backdrop-blur-none',\n        '[&_[data-slot=command-input-wrapper]]:h-11 [&_[data-slot=command-input-wrapper]]:shrink-0 [&_[data-slot=command-input-wrapper]]:rounded-xl [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:border-border1 [&_[data-slot=command-input-wrapper]]:bg-surface3 [&_[data-slot=command-input-wrapper]]:px-3 [&_[data-slot=command-input-wrapper]]:shadow-[0_6px_18px_-16px_rgb(0_0_0_/_0.55)]',\n        '[&_[data-slot=command-input-wrapper]]:pr-11 [&_[data-slot=command-input-wrapper]]:transition-[border-color,box-shadow] [&_[data-slot=command-input-wrapper]]:duration-150 [&_[data-slot=command-input-wrapper]]:ease-out [&_[data-slot=command-input-wrapper]_svg]:text-neutral4 [&_[data-slot=command-input-wrapper]:focus-within]:border-border1 [&_[data-slot=command-input-wrapper]:focus-within]:bg-surface3 [&_[data-slot=command-input-wrapper]:focus-within]:shadow-[0_8px_22px_-18px_rgb(0_0_0_/_0.6)]',\n        '**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-ui-md',\n        '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group]]:p-0',\n        '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-1.5',\n        commandClassName,\n      )}\n      {...props}\n    >\n      {children}\n    </CommandDialog>\n  );\n}\n\ntype CommandPaletteInputProps = ComponentPropsWithoutRef<typeof CommandInput>;\n\nfunction CommandPaletteInput({ wrapperClassName, ...props }: CommandPaletteInputProps) {\n  return (\n    <CommandInput\n      wrapperClassName={cn('command-palette-surface command-palette-surface-input', wrapperClassName)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandPaletteBody({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className=\"min-h-0 flex-1 rounded-2xl\">\n      <div\n        className={cn(\n          'grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\ntype CommandPaletteRailProps = ComponentPropsWithoutRef<'aside'> & {\n  'aria-label': string;\n};\n\nfunction CommandPaletteRail({ children, className, ...props }: CommandPaletteRailProps) {\n  return (\n    <aside\n      className={cn(\n        'command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-2xl border border-border1 bg-surface2 p-2 shadow-[0_8px_24px_-20px_rgb(0_0_0_/_0.55)] md:h-full md:max-h-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollArea className=\"-m-1 min-h-0 flex-1 p-1\" viewPortClassName=\"pr-1\">\n        <div className=\"flex flex-col gap-1\">{children}</div>\n      </ScrollArea>\n    </aside>\n  );\n}\n\nfunction CommandPaletteScope({\n  icon,\n  label,\n  count,\n  active,\n  onSelect,\n}: {\n  icon: ReactNode;\n  label: string;\n  count: number;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`\n      className=\"text-ui-smd leading-ui-sm text-neutral3 hover:border-border1 hover:bg-surface4 hover:text-neutral6 data-[active=true]:border-border1 data-[active=true]:bg-surface4 data-[active=true]:text-neutral6 flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.99]\"\n      data-active={active}\n      aria-pressed={active}\n      onClick={onSelect}\n    >\n      <span className=\"flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\">{icon}</span>\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      <span className=\"border-border1 bg-surface4/70 text-ui-xs text-neutral3 rounded-md border px-1.5 py-0.5 leading-none\">\n        {count}\n      </span>\n    </button>\n  );\n}\n\ntype CommandPaletteResultsProps = {\n  'aria-label': string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nfunction CommandPaletteResults({ children, footer, ...props }: CommandPaletteResultsProps) {\n  return (\n    <div\n      role=\"region\"\n      className=\"command-palette-surface command-palette-surface-results command-palette-results-panel border-border1 bg-surface2 relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border shadow-[0_10px_28px_-22px_rgb(0_0_0_/_0.6)]\"\n      {...props}\n    >\n      <CommandList\n        scrollArea\n        scrollAreaClassName=\"min-h-0 flex-1 rounded-none\"\n        scrollAreaViewportClassName=\"command-palette-scroll-viewport\"\n        className=\"command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none\"\n        highlightClassName=\"rounded-xl\"\n      >\n        {children}\n      </CommandList>\n      {footer}\n    </div>\n  );\n}\n\ntype CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, 'children'> & {\n  icon: ReactNode;\n  title: string;\n  subtitle?: string;\n  path?: string;\n  badge?: string;\n  shortcut?: ReactNode;\n};\n\nfunction CommandPaletteItem({\n  icon,\n  title,\n  subtitle,\n  path,\n  badge,\n  shortcut,\n  className,\n  ...props\n}: CommandPaletteItemProps) {\n  return (\n    <CommandItem\n      className={cn(\n        'group h-auto items-start gap-3 rounded-xl border border-transparent px-3 py-2.5 data-[selected=true]:border-border1',\n        'transition-[background-color,border-color] duration-150 ease-out',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-neutral3 group-data-[selected=true]:text-neutral6 mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center transition-colors duration-150 ease-out [&>svg]:!size-4 [&>svg]:shrink-0\">\n        {icon}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"text-ui-smd leading-ui-sm text-neutral6 truncate font-medium\">{title}</span>\n          {badge && (\n            <span className=\"border-border1 bg-surface4/60 text-ui-xs text-neutral3 shrink-0 rounded-md border px-1.5 py-0.5 leading-none font-medium uppercase\">\n              {badge}\n            </span>\n          )}\n        </span>\n        {(subtitle || path) && (\n          <span className=\"text-ui-xs leading-ui-xs text-neutral3 flex min-w-0 items-center gap-2\">\n            {subtitle && <span className=\"truncate\">{subtitle}</span>}\n            {path && (\n              <span className=\"border-border1 bg-surface4/70 text-ui-xs text-neutral3 max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono leading-none\">\n                {path}\n              </span>\n            )}\n          </span>\n        )}\n      </span>\n      {shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}\n    </CommandItem>\n  );\n}\n\nfunction CommandPaletteFooter({ label }: { label: string }) {\n  return (\n    <div className=\"command-palette-footer text-ui-xs text-neutral3 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2\">\n      <span className=\"truncate\">{label}</span>\n      <span className=\"flex shrink-0 items-center gap-1.5\">\n        <Kbd size=\"sm\">↑</Kbd>\n        <Kbd size=\"sm\">↓</Kbd>\n        <Kbd size=\"sm\">↵</Kbd>\n        <Kbd size=\"sm\">Esc</Kbd>\n      </span>\n    </div>\n  );\n}\n\nexport {\n  CommandPaletteBody,\n  CommandPaletteDialog,\n  CommandPaletteFooter,\n  CommandPaletteInput,\n  CommandPaletteItem,\n  CommandPaletteRail,\n  CommandPaletteResults,\n  CommandPaletteScope,\n};\n"],"names":["jsx","CommandDialog","cn","CommandInput","ScrollArea","jsxs","CommandList","CommandItem","CommandShortcut","Kbd"],"mappings":"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"}
+{"version":3,"file":"CommandPalette.cjs.js","sources":["../../src/ds/components/CommandPalette/command-palette.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from '@/ds/components/Command';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nimport './command-palette.css';\n\ntype CommandPaletteDialogProps = ComponentPropsWithoutRef<typeof CommandDialog>;\n\nfunction CommandPaletteDialog({\n  children,\n  contentClassName,\n  commandClassName,\n  showOverlay = true,\n  overlayClassName,\n  ...props\n}: CommandPaletteDialogProps) {\n  return (\n    <CommandDialog\n      showOverlay={showOverlay}\n      overlayClassName={cn('bg-sidebar/40 backdrop-blur-none', overlayClassName)}\n      contentClassName={cn(\n        'command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]',\n        contentClassName,\n      )}\n      commandClassName={cn(\n        // Height lives in `.command-palette-shell` — see command-palette.css.\n        'command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-muted-foreground shadow-none backdrop-blur-none',\n        '[&_[data-slot=command-input-wrapper]_svg]:text-muted-foreground',\n        '**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-body',\n        '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group]]:p-0',\n        '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-1.5',\n        commandClassName,\n      )}\n      {...props}\n    >\n      {children}\n    </CommandDialog>\n  );\n}\n\ntype CommandPaletteInputProps = ComponentPropsWithoutRef<typeof CommandInput>;\n\nfunction CommandPaletteInput({ wrapperClassName, ...props }: CommandPaletteInputProps) {\n  return (\n    <CommandInput\n      wrapperClassName={cn(\n        'command-palette-surface command-palette-surface-input',\n        inputSurfaceAndFocusWithinStyle,\n        // `border-0` because `CommandInput`'s own `border-b` is the separator of a single-panel\n        // Command; here the input is a detached pill and the material already carries its rim.\n        'h-11 shrink-0 rounded-xl border-0 px-3 pr-11',\n        wrapperClassName,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandPaletteBody({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className=\"min-h-0 flex-1\">\n      <div\n        className={cn(\n          'grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\ntype CommandPaletteRailProps = ComponentPropsWithoutRef<'aside'> & {\n  'aria-label': string;\n};\n\nfunction CommandPaletteRail({ children, className, ...props }: CommandPaletteRailProps) {\n  return (\n    <aside\n      className={cn(\n        'command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-xl p-2 md:h-full md:max-h-none',\n        overlaySurfaceStyle,\n        className,\n      )}\n      {...props}\n    >\n      <ScrollArea className=\"-m-1 min-h-0 flex-1 p-1\" viewPortClassName=\"pr-1\">\n        <div className=\"flex flex-col gap-1\">{children}</div>\n      </ScrollArea>\n    </aside>\n  );\n}\n\nfunction CommandPaletteScope({\n  icon,\n  label,\n  count,\n  active,\n  onSelect,\n}: {\n  icon: ReactNode;\n  label: string;\n  count: number;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        quietTextHover,\n        'text-body-sm hover:border-border hover:bg-fill-subtle data-[active=true]:border-border data-[active=true]:bg-fill-hover data-[active=true]:text-foreground flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left',\n        // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`\n        'transition-[color,transform] duration-fast ease-out-custom motion-reduce:transition-none active:scale-[0.99]',\n      )}\n      data-active={active}\n      aria-pressed={active}\n      onClick={onSelect}\n    >\n      <span className=\"flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\">{icon}</span>\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      <span className=\"border-border bg-muted/70 text-meta text-muted-foreground rounded-md border px-1.5 py-0.5 leading-none\">\n        {count}\n      </span>\n    </button>\n  );\n}\n\ntype CommandPaletteResultsProps = {\n  'aria-label': string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nfunction CommandPaletteResults({ children, footer, ...props }: CommandPaletteResultsProps) {\n  return (\n    <div\n      role=\"region\"\n      className={cn(\n        'command-palette-surface command-palette-surface-results command-palette-results-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl',\n        overlaySurfaceStyle,\n      )}\n      {...props}\n    >\n      <CommandList\n        scrollArea\n        scrollAreaClassName=\"min-h-0 flex-1 rounded-none\"\n        scrollAreaViewportClassName=\"command-palette-scroll-viewport\"\n        className=\"command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none\"\n        highlightClassName=\"rounded-lg\"\n      >\n        {children}\n      </CommandList>\n      {footer}\n    </div>\n  );\n}\n\ntype CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, 'children'> & {\n  icon: ReactNode;\n  title: string;\n  subtitle?: string;\n  path?: string;\n  badge?: string;\n  shortcut?: ReactNode;\n};\n\nfunction CommandPaletteItem({\n  icon,\n  title,\n  subtitle,\n  path,\n  badge,\n  shortcut,\n  className,\n  ...props\n}: CommandPaletteItemProps) {\n  return (\n    <CommandItem\n      className={cn(\n        'group h-auto items-start gap-3 rounded-lg border border-transparent px-3 py-2.5 data-[selected=true]:border-border',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className={cn(\n          'text-muted-foreground group-data-[selected=true]:text-foreground mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center [&>svg]:!size-4 [&>svg]:shrink-0',\n          controlStateColorTransition,\n        )}\n      >\n        {icon}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"text-label text-foreground truncate\">{title}</span>\n          {badge && (\n            <span className=\"border-border bg-muted/60 text-meta text-muted-foreground shrink-0 rounded-md border px-1.5 py-0.5 leading-none uppercase\">\n              {badge}\n            </span>\n          )}\n        </span>\n        {(subtitle || path) && (\n          <span className=\"text-meta text-muted-foreground flex min-w-0 items-center gap-2\">\n            {subtitle && <span className=\"truncate\">{subtitle}</span>}\n            {path && (\n              <span className=\"border-border bg-muted/70 text-meta text-muted-foreground max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono leading-none\">\n                {path}\n              </span>\n            )}\n          </span>\n        )}\n      </span>\n      {shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}\n    </CommandItem>\n  );\n}\n\nfunction CommandPaletteFooter({ label }: { label: string }) {\n  return (\n    <div className=\"command-palette-footer text-meta text-muted-foreground pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2\">\n      <span className=\"truncate\">{label}</span>\n      <span className=\"flex shrink-0 items-center gap-1.5\">\n        <Kbd size=\"sm\">↑</Kbd>\n        <Kbd size=\"sm\">↓</Kbd>\n        <Kbd size=\"sm\">↵</Kbd>\n        <Kbd size=\"sm\">Esc</Kbd>\n      </span>\n    </div>\n  );\n}\n\nexport {\n  CommandPaletteBody,\n  CommandPaletteDialog,\n  CommandPaletteFooter,\n  CommandPaletteInput,\n  CommandPaletteItem,\n  CommandPaletteRail,\n  CommandPaletteResults,\n  CommandPaletteScope,\n};\n"],"names":["jsx","CommandDialog","cn","CommandInput","inputSurfaceAndFocusWithinStyle","overlaySurfaceStyle","ScrollArea","jsxs","quietTextHover","CommandList","CommandItem","controlStateColorTransition","CommandShortcut","Kbd"],"mappings":"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"}

package/dist/components/CommandPalette.es.js

@@ -1,8 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { a as CommandDialog, d as CommandInput, e as CommandItem, h as CommandShortcut, f as CommandList } from '../command-rJ4b4Z2h.js';
-import { K as Kbd } from '../kbd-H5Qu573u.js';
-import { S as ScrollArea } from '../scroll-area-ByrWkkO_.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { a as CommandDialog, d as CommandInput, e as CommandItem, h as CommandShortcut, f as CommandList } from '../command-jRiL1vXM.js';
+import { K as Kbd } from '../kbd-CINtikLh.js';
+import { S as ScrollArea } from '../scroll-area-CdQ_5bLm.js';
+import { inputSurfaceAndFocusWithinStyle } from '../primitives/form-element.es.js';
+import { overlaySurfaceStyle } from '../primitives/raised-surface.es.js';
+import { controlStateColorTransition } from '../primitives/transitions.es.js';
+import { quietTextHover } from '../primitives/typography.es.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 import '../CommandPalette.css';function CommandPaletteDialog({
   children,
@@ -16,17 +20,16 @@ import '../CommandPalette.css';function CommandPaletteDialog({
     CommandDialog,
     {
       showOverlay,
-      overlayClassName: cn("bg-surface1/40 backdrop-blur-none", overlayClassName),
+      overlayClassName: cn("bg-sidebar/40 backdrop-blur-none", overlayClassName),
       contentClassName: cn(
         "command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]",
         contentClassName
       ),
       commandClassName: cn(
         // Height lives in `.command-palette-shell` — see command-palette.css.
-        "command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-neutral4 shadow-none backdrop-blur-none",
-        "[&_[data-slot=command-input-wrapper]]:h-11 [&_[data-slot=command-input-wrapper]]:shrink-0 [&_[data-slot=command-input-wrapper]]:rounded-xl [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:border-border1 [&_[data-slot=command-input-wrapper]]:bg-surface3 [&_[data-slot=command-input-wrapper]]:px-3 [&_[data-slot=command-input-wrapper]]:shadow-[0_6px_18px_-16px_rgb(0_0_0_/_0.55)]",
-        "[&_[data-slot=command-input-wrapper]]:pr-11 [&_[data-slot=command-input-wrapper]]:transition-[border-color,box-shadow] [&_[data-slot=command-input-wrapper]]:duration-150 [&_[data-slot=command-input-wrapper]]:ease-out [&_[data-slot=command-input-wrapper]_svg]:text-neutral4 [&_[data-slot=command-input-wrapper]:focus-within]:border-border1 [&_[data-slot=command-input-wrapper]:focus-within]:bg-surface3 [&_[data-slot=command-input-wrapper]:focus-within]:shadow-[0_8px_22px_-18px_rgb(0_0_0_/_0.6)]",
-        "**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-ui-md",
+        "command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-muted-foreground shadow-none backdrop-blur-none",
+        "[&_[data-slot=command-input-wrapper]_svg]:text-muted-foreground",
+        "**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-body",
         "**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group]]:p-0",
         "**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-1.5",
         commandClassName
@@ -40,13 +43,20 @@ function CommandPaletteInput({ wrapperClassName, ...props }) {
   return /* @__PURE__ */ jsx(
     CommandInput,
     {
-      wrapperClassName: cn("command-palette-surface command-palette-surface-input", wrapperClassName),
+      wrapperClassName: cn(
+        "command-palette-surface command-palette-surface-input",
+        inputSurfaceAndFocusWithinStyle,
+        // `border-0` because `CommandInput`'s own `border-b` is the separator of a single-panel
+        // Command; here the input is a detached pill and the material already carries its rim.
+        "h-11 shrink-0 rounded-xl border-0 px-3 pr-11",
+        wrapperClassName
+      ),
       ...props
     }
   );
 }
 function CommandPaletteBody({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 rounded-2xl", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
@@ -63,7 +73,8 @@ function CommandPaletteRail({ children, className, ...props }) {
     "aside",
     {
       className: cn(
-        "command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-2xl border border-border1 bg-surface2 p-2 shadow-[0_8px_24px_-20px_rgb(0_0_0_/_0.55)] md:h-full md:max-h-none",
+        "command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-xl p-2 md:h-full md:max-h-none",
+        overlaySurfaceStyle,
         className
       ),
       ...props,
@@ -82,14 +93,19 @@ function CommandPaletteScope({
     "button",
     {
       type: "button",
-      className: "text-ui-smd leading-ui-sm text-neutral3 hover:border-border1 hover:bg-surface4 hover:text-neutral6 data-[active=true]:border-border1 data-[active=true]:bg-surface4 data-[active=true]:text-neutral6 flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.99]",
+      className: cn(
+        quietTextHover,
+        "text-body-sm hover:border-border hover:bg-fill-subtle data-[active=true]:border-border data-[active=true]:bg-fill-hover data-[active=true]:text-foreground flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left",
+        // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`
+        "transition-[color,transform] duration-fast ease-out-custom motion-reduce:transition-none active:scale-[0.99]"
+      ),
       "data-active": active,
       "aria-pressed": active,
       onClick: onSelect,
       children: [
         /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4", children: icon }),
         /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "border-border1 bg-surface4/70 text-ui-xs text-neutral3 rounded-md border px-1.5 py-0.5 leading-none", children: count })
+        /* @__PURE__ */ jsx("span", { className: "border-border bg-muted/70 text-meta text-muted-foreground rounded-md border px-1.5 py-0.5 leading-none", children: count })
       ]
     }
   );
@@ -99,7 +115,10 @@ function CommandPaletteResults({ children, footer, ...props }) {
     "div",
     {
       role: "region",
-      className: "command-palette-surface command-palette-surface-results command-palette-results-panel border-border1 bg-surface2 relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border shadow-[0_10px_28px_-22px_rgb(0_0_0_/_0.6)]",
+      className: cn(
+        "command-palette-surface command-palette-surface-results command-palette-results-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl",
+        overlaySurfaceStyle
+      ),
       ...props,
       children: [
         /* @__PURE__ */ jsx(
@@ -109,7 +128,7 @@ function CommandPaletteResults({ children, footer, ...props }) {
             scrollAreaClassName: "min-h-0 flex-1 rounded-none",
             scrollAreaViewportClassName: "command-palette-scroll-viewport",
             className: "command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none",
-            highlightClassName: "rounded-xl",
+            highlightClassName: "rounded-lg",
             children
           }
         ),
@@ -132,21 +151,29 @@ function CommandPaletteItem({
     CommandItem,
     {
       className: cn(
-        "group h-auto items-start gap-3 rounded-xl border border-transparent px-3 py-2.5 data-[selected=true]:border-border1",
-        "transition-[background-color,border-color] duration-150 ease-out",
+        "group h-auto items-start gap-3 rounded-lg border border-transparent px-3 py-2.5 data-[selected=true]:border-border",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-neutral3 group-data-[selected=true]:text-neutral6 mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center transition-colors duration-150 ease-out [&>svg]:!size-4 [&>svg]:shrink-0", children: icon }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-muted-foreground group-data-[selected=true]:text-foreground mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center [&>svg]:!size-4 [&>svg]:shrink-0",
+              controlStateColorTransition
+            ),
+            children: icon
+          }
+        ),
         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
           /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-ui-smd leading-ui-sm text-neutral6 truncate font-medium", children: title }),
-            badge && /* @__PURE__ */ jsx("span", { className: "border-border1 bg-surface4/60 text-ui-xs text-neutral3 shrink-0 rounded-md border px-1.5 py-0.5 leading-none font-medium uppercase", children: badge })
+            /* @__PURE__ */ jsx("span", { className: "text-label text-foreground truncate", children: title }),
+            badge && /* @__PURE__ */ jsx("span", { className: "border-border bg-muted/60 text-meta text-muted-foreground shrink-0 rounded-md border px-1.5 py-0.5 leading-none uppercase", children: badge })
           ] }),
-          (subtitle || path) && /* @__PURE__ */ jsxs("span", { className: "text-ui-xs leading-ui-xs text-neutral3 flex min-w-0 items-center gap-2", children: [
+          (subtitle || path) && /* @__PURE__ */ jsxs("span", { className: "text-meta text-muted-foreground flex min-w-0 items-center gap-2", children: [
             subtitle && /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle }),
-            path && /* @__PURE__ */ jsx("span", { className: "border-border1 bg-surface4/70 text-ui-xs text-neutral3 max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono leading-none", children: path })
+            path && /* @__PURE__ */ jsx("span", { className: "border-border bg-muted/70 text-meta text-muted-foreground max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono leading-none", children: path })
           ] })
         ] }),
         shortcut && /* @__PURE__ */ jsx(CommandShortcut, { children: shortcut })
@@ -155,7 +182,7 @@ function CommandPaletteItem({
   );
 }
 function CommandPaletteFooter({ label }) {
-  return /* @__PURE__ */ jsxs("div", { className: "command-palette-footer text-ui-xs text-neutral3 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "command-palette-footer text-meta text-muted-foreground pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2", children: [
     /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
     /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5", children: [
       /* @__PURE__ */ jsx(Kbd, { size: "sm", children: "↑" }),

package/dist/components/CommandPalette.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.es.js","sources":["../../src/ds/components/CommandPalette/command-palette.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from '@/ds/components/Command';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { cn } from '@/lib/utils';\n\nimport './command-palette.css';\n\ntype CommandPaletteDialogProps = ComponentPropsWithoutRef<typeof CommandDialog>;\n\nfunction CommandPaletteDialog({\n  children,\n  contentClassName,\n  commandClassName,\n  showOverlay = true,\n  overlayClassName,\n  ...props\n}: CommandPaletteDialogProps) {\n  return (\n    <CommandDialog\n      showOverlay={showOverlay}\n      overlayClassName={cn('bg-surface1/40 backdrop-blur-none', overlayClassName)}\n      contentClassName={cn(\n        'command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]',\n        contentClassName,\n      )}\n      commandClassName={cn(\n        // Height lives in `.command-palette-shell` — see command-palette.css.\n        'command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-neutral4 shadow-none backdrop-blur-none',\n        '[&_[data-slot=command-input-wrapper]]:h-11 [&_[data-slot=command-input-wrapper]]:shrink-0 [&_[data-slot=command-input-wrapper]]:rounded-xl [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:border-border1 [&_[data-slot=command-input-wrapper]]:bg-surface3 [&_[data-slot=command-input-wrapper]]:px-3 [&_[data-slot=command-input-wrapper]]:shadow-[0_6px_18px_-16px_rgb(0_0_0_/_0.55)]',\n        '[&_[data-slot=command-input-wrapper]]:pr-11 [&_[data-slot=command-input-wrapper]]:transition-[border-color,box-shadow] [&_[data-slot=command-input-wrapper]]:duration-150 [&_[data-slot=command-input-wrapper]]:ease-out [&_[data-slot=command-input-wrapper]_svg]:text-neutral4 [&_[data-slot=command-input-wrapper]:focus-within]:border-border1 [&_[data-slot=command-input-wrapper]:focus-within]:bg-surface3 [&_[data-slot=command-input-wrapper]:focus-within]:shadow-[0_8px_22px_-18px_rgb(0_0_0_/_0.6)]',\n        '**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-ui-md',\n        '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group]]:p-0',\n        '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-1.5',\n        commandClassName,\n      )}\n      {...props}\n    >\n      {children}\n    </CommandDialog>\n  );\n}\n\ntype CommandPaletteInputProps = ComponentPropsWithoutRef<typeof CommandInput>;\n\nfunction CommandPaletteInput({ wrapperClassName, ...props }: CommandPaletteInputProps) {\n  return (\n    <CommandInput\n      wrapperClassName={cn('command-palette-surface command-palette-surface-input', wrapperClassName)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandPaletteBody({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className=\"min-h-0 flex-1 rounded-2xl\">\n      <div\n        className={cn(\n          'grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\ntype CommandPaletteRailProps = ComponentPropsWithoutRef<'aside'> & {\n  'aria-label': string;\n};\n\nfunction CommandPaletteRail({ children, className, ...props }: CommandPaletteRailProps) {\n  return (\n    <aside\n      className={cn(\n        'command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-2xl border border-border1 bg-surface2 p-2 shadow-[0_8px_24px_-20px_rgb(0_0_0_/_0.55)] md:h-full md:max-h-none',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollArea className=\"-m-1 min-h-0 flex-1 p-1\" viewPortClassName=\"pr-1\">\n        <div className=\"flex flex-col gap-1\">{children}</div>\n      </ScrollArea>\n    </aside>\n  );\n}\n\nfunction CommandPaletteScope({\n  icon,\n  label,\n  count,\n  active,\n  onSelect,\n}: {\n  icon: ReactNode;\n  label: string;\n  count: number;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`\n      className=\"text-ui-smd leading-ui-sm text-neutral3 hover:border-border1 hover:bg-surface4 hover:text-neutral6 data-[active=true]:border-border1 data-[active=true]:bg-surface4 data-[active=true]:text-neutral6 flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.99]\"\n      data-active={active}\n      aria-pressed={active}\n      onClick={onSelect}\n    >\n      <span className=\"flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\">{icon}</span>\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      <span className=\"border-border1 bg-surface4/70 text-ui-xs text-neutral3 rounded-md border px-1.5 py-0.5 leading-none\">\n        {count}\n      </span>\n    </button>\n  );\n}\n\ntype CommandPaletteResultsProps = {\n  'aria-label': string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nfunction CommandPaletteResults({ children, footer, ...props }: CommandPaletteResultsProps) {\n  return (\n    <div\n      role=\"region\"\n      className=\"command-palette-surface command-palette-surface-results command-palette-results-panel border-border1 bg-surface2 relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-2xl border shadow-[0_10px_28px_-22px_rgb(0_0_0_/_0.6)]\"\n      {...props}\n    >\n      <CommandList\n        scrollArea\n        scrollAreaClassName=\"min-h-0 flex-1 rounded-none\"\n        scrollAreaViewportClassName=\"command-palette-scroll-viewport\"\n        className=\"command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none\"\n        highlightClassName=\"rounded-xl\"\n      >\n        {children}\n      </CommandList>\n      {footer}\n    </div>\n  );\n}\n\ntype CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, 'children'> & {\n  icon: ReactNode;\n  title: string;\n  subtitle?: string;\n  path?: string;\n  badge?: string;\n  shortcut?: ReactNode;\n};\n\nfunction CommandPaletteItem({\n  icon,\n  title,\n  subtitle,\n  path,\n  badge,\n  shortcut,\n  className,\n  ...props\n}: CommandPaletteItemProps) {\n  return (\n    <CommandItem\n      className={cn(\n        'group h-auto items-start gap-3 rounded-xl border border-transparent px-3 py-2.5 data-[selected=true]:border-border1',\n        'transition-[background-color,border-color] duration-150 ease-out',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"text-neutral3 group-data-[selected=true]:text-neutral6 mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center transition-colors duration-150 ease-out [&>svg]:!size-4 [&>svg]:shrink-0\">\n        {icon}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"text-ui-smd leading-ui-sm text-neutral6 truncate font-medium\">{title}</span>\n          {badge && (\n            <span className=\"border-border1 bg-surface4/60 text-ui-xs text-neutral3 shrink-0 rounded-md border px-1.5 py-0.5 leading-none font-medium uppercase\">\n              {badge}\n            </span>\n          )}\n        </span>\n        {(subtitle || path) && (\n          <span className=\"text-ui-xs leading-ui-xs text-neutral3 flex min-w-0 items-center gap-2\">\n            {subtitle && <span className=\"truncate\">{subtitle}</span>}\n            {path && (\n              <span className=\"border-border1 bg-surface4/70 text-ui-xs text-neutral3 max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono leading-none\">\n                {path}\n              </span>\n            )}\n          </span>\n        )}\n      </span>\n      {shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}\n    </CommandItem>\n  );\n}\n\nfunction CommandPaletteFooter({ label }: { label: string }) {\n  return (\n    <div className=\"command-palette-footer text-ui-xs text-neutral3 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2\">\n      <span className=\"truncate\">{label}</span>\n      <span className=\"flex shrink-0 items-center gap-1.5\">\n        <Kbd size=\"sm\">↑</Kbd>\n        <Kbd size=\"sm\">↓</Kbd>\n        <Kbd size=\"sm\">↵</Kbd>\n        <Kbd size=\"sm\">Esc</Kbd>\n      </span>\n    </div>\n  );\n}\n\nexport {\n  CommandPaletteBody,\n  CommandPaletteDialog,\n  CommandPaletteFooter,\n  CommandPaletteInput,\n  CommandPaletteItem,\n  CommandPaletteRail,\n  CommandPaletteResults,\n  CommandPaletteScope,\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommandPalette.es.js","sources":["../../src/ds/components/CommandPalette/command-palette.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';\n\nimport { CommandDialog, CommandInput, CommandItem, CommandList, CommandShortcut } from '@/ds/components/Command';\nimport { Kbd } from '@/ds/components/Kbd';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { inputSurfaceAndFocusWithinStyle } from '@/ds/primitives/form-element';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nimport './command-palette.css';\n\ntype CommandPaletteDialogProps = ComponentPropsWithoutRef<typeof CommandDialog>;\n\nfunction CommandPaletteDialog({\n  children,\n  contentClassName,\n  commandClassName,\n  showOverlay = true,\n  overlayClassName,\n  ...props\n}: CommandPaletteDialogProps) {\n  return (\n    <CommandDialog\n      showOverlay={showOverlay}\n      overlayClassName={cn('bg-sidebar/40 backdrop-blur-none', overlayClassName)}\n      contentClassName={cn(\n        'command-palette-popup max-w-[min(56rem,calc(100vw-2rem))] overflow-visible border-none bg-transparent p-0 shadow-none backdrop-blur-none sm:max-w-[min(56rem,calc(100vw-2rem))]',\n        contentClassName,\n      )}\n      commandClassName={cn(\n        // Height lives in `.command-palette-shell` — see command-palette.css.\n        'command-palette-shell gap-2 overflow-visible rounded-none bg-transparent text-muted-foreground shadow-none backdrop-blur-none',\n        '[&_[data-slot=command-input-wrapper]_svg]:text-muted-foreground',\n        '**:[[cmdk-input]]:h-full **:[[cmdk-input]]:text-body',\n        '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group]]:p-0',\n        '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-1.5',\n        commandClassName,\n      )}\n      {...props}\n    >\n      {children}\n    </CommandDialog>\n  );\n}\n\ntype CommandPaletteInputProps = ComponentPropsWithoutRef<typeof CommandInput>;\n\nfunction CommandPaletteInput({ wrapperClassName, ...props }: CommandPaletteInputProps) {\n  return (\n    <CommandInput\n      wrapperClassName={cn(\n        'command-palette-surface command-palette-surface-input',\n        inputSurfaceAndFocusWithinStyle,\n        // `border-0` because `CommandInput`'s own `border-b` is the separator of a single-panel\n        // Command; here the input is a detached pill and the material already carries its rim.\n        'h-11 shrink-0 rounded-xl border-0 px-3 pr-11',\n        wrapperClassName,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandPaletteBody({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className=\"min-h-0 flex-1\">\n      <div\n        className={cn(\n          'grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-2 md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\ntype CommandPaletteRailProps = ComponentPropsWithoutRef<'aside'> & {\n  'aria-label': string;\n};\n\nfunction CommandPaletteRail({ children, className, ...props }: CommandPaletteRailProps) {\n  return (\n    <aside\n      className={cn(\n        'command-palette-surface command-palette-surface-rail flex max-h-[min(14rem,32dvh)] min-h-0 flex-col overflow-hidden rounded-xl p-2 md:h-full md:max-h-none',\n        overlaySurfaceStyle,\n        className,\n      )}\n      {...props}\n    >\n      <ScrollArea className=\"-m-1 min-h-0 flex-1 p-1\" viewPortClassName=\"pr-1\">\n        <div className=\"flex flex-col gap-1\">{children}</div>\n      </ScrollArea>\n    </aside>\n  );\n}\n\nfunction CommandPaletteScope({\n  icon,\n  label,\n  count,\n  active,\n  onSelect,\n}: {\n  icon: ReactNode;\n  label: string;\n  count: number;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        quietTextHover,\n        'text-body-sm hover:border-border hover:bg-fill-subtle data-[active=true]:border-border data-[active=true]:bg-fill-hover data-[active=true]:text-foreground flex h-9 w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2.5 text-left',\n        // eslint-disable-next-line tailwindcss/no-unnecessary-arbitrary-value -- v4 emits nothing for `scale-0.99`\n        'transition-[color,transform] duration-fast ease-out-custom motion-reduce:transition-none active:scale-[0.99]',\n      )}\n      data-active={active}\n      aria-pressed={active}\n      onClick={onSelect}\n    >\n      <span className=\"flex size-4 shrink-0 items-center justify-center [&>svg]:size-4\">{icon}</span>\n      <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n      <span className=\"border-border bg-muted/70 text-meta text-muted-foreground rounded-md border px-1.5 py-0.5 leading-none\">\n        {count}\n      </span>\n    </button>\n  );\n}\n\ntype CommandPaletteResultsProps = {\n  'aria-label': string;\n  children: ReactNode;\n  footer?: ReactNode;\n};\n\nfunction CommandPaletteResults({ children, footer, ...props }: CommandPaletteResultsProps) {\n  return (\n    <div\n      role=\"region\"\n      className={cn(\n        'command-palette-surface command-palette-surface-results command-palette-results-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl',\n        overlaySurfaceStyle,\n      )}\n      {...props}\n    >\n      <CommandList\n        scrollArea\n        scrollAreaClassName=\"min-h-0 flex-1 rounded-none\"\n        scrollAreaViewportClassName=\"command-palette-scroll-viewport\"\n        className=\"command-palette-list max-h-none rounded-none border-none bg-transparent shadow-none\"\n        highlightClassName=\"rounded-lg\"\n      >\n        {children}\n      </CommandList>\n      {footer}\n    </div>\n  );\n}\n\ntype CommandPaletteItemProps = Omit<ComponentPropsWithoutRef<typeof CommandItem>, 'children'> & {\n  icon: ReactNode;\n  title: string;\n  subtitle?: string;\n  path?: string;\n  badge?: string;\n  shortcut?: ReactNode;\n};\n\nfunction CommandPaletteItem({\n  icon,\n  title,\n  subtitle,\n  path,\n  badge,\n  shortcut,\n  className,\n  ...props\n}: CommandPaletteItemProps) {\n  return (\n    <CommandItem\n      className={cn(\n        'group h-auto items-start gap-3 rounded-lg border border-transparent px-3 py-2.5 data-[selected=true]:border-border',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className={cn(\n          'text-muted-foreground group-data-[selected=true]:text-foreground mt-0.5 flex size-4 max-w-4 min-w-4 shrink-0 basis-4 items-center justify-center [&>svg]:!size-4 [&>svg]:shrink-0',\n          controlStateColorTransition,\n        )}\n      >\n        {icon}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"text-label text-foreground truncate\">{title}</span>\n          {badge && (\n            <span className=\"border-border bg-muted/60 text-meta text-muted-foreground shrink-0 rounded-md border px-1.5 py-0.5 leading-none uppercase\">\n              {badge}\n            </span>\n          )}\n        </span>\n        {(subtitle || path) && (\n          <span className=\"text-meta text-muted-foreground flex min-w-0 items-center gap-2\">\n            {subtitle && <span className=\"truncate\">{subtitle}</span>}\n            {path && (\n              <span className=\"border-border bg-muted/70 text-meta text-muted-foreground max-w-52 truncate rounded-md border px-1.5 py-0.5 font-mono leading-none\">\n                {path}\n              </span>\n            )}\n          </span>\n        )}\n      </span>\n      {shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}\n    </CommandItem>\n  );\n}\n\nfunction CommandPaletteFooter({ label }: { label: string }) {\n  return (\n    <div className=\"command-palette-footer text-meta text-muted-foreground pointer-events-none absolute inset-x-0 bottom-0 z-20 flex items-end justify-between gap-3 px-3 pt-3 pb-2\">\n      <span className=\"truncate\">{label}</span>\n      <span className=\"flex shrink-0 items-center gap-1.5\">\n        <Kbd size=\"sm\">↑</Kbd>\n        <Kbd size=\"sm\">↓</Kbd>\n        <Kbd size=\"sm\">↵</Kbd>\n        <Kbd size=\"sm\">Esc</Kbd>\n      </span>\n    </div>\n  );\n}\n\nexport {\n  CommandPaletteBody,\n  CommandPaletteDialog,\n  CommandPaletteFooter,\n  CommandPaletteInput,\n  CommandPaletteItem,\n  CommandPaletteRail,\n  CommandPaletteResults,\n  CommandPaletteScope,\n};\n"],"names":[],"mappings":"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"}