@windforge/ui 0.1.0

package/src/components/card.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import { Box, type BoxProps } from './layout'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+
+/**
+ * Card — a surface that groups related content. Pass `title`, `description`,
+ * an optional `headerAction` (e.g. a Badge opposite the title), `footer`
+ * actions, and the body as `children`; there are no sub-components to assemble.
+ * Under the hood it's a `Box` with the universal surface preset, so any Box prop
+ * (`boxShadow`, `borderRadius`, …) still applies.
+ *
+ *   <Card title="Deploy preview" description="Pushed 4 minutes ago"
+ *         footer={<Button>Visit preview</Button>}>
+ *     Vercel finished building your branch.
+ *   </Card>
+ */
+// Card owns its padding (the header/body/footer sections carry it) so it can
+// never double up against the outer surface Box. `padding` overrides the
+// section inset on the spacing scale; default `lg` keeps the original 24px look.
+type CardPadding = NonNullable<BoxProps['padding']>
+const SECTION_PADDING: Record<CardPadding, string> = {
+  none: 'p-none', xs: 'p-xs', sm: 'p-sm', md: 'p-md', lg: 'p-lg', xl: 'p-xl', '2xl': 'p-2xl',
+  nbsp: 'p-nbsp', card: 'p-card', gutter: 'p-gutter', section: 'p-section', page: 'p-page',
+}
+
+export interface CardProps extends Omit<NoStyle<BoxProps>, 'title' | 'paddingX' | 'paddingY'> {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  /** Trailing header content — sits opposite the title (e.g. a status Badge). */
+  headerAction?: React.ReactNode
+  /** Footer content — typically buttons. */
+  footer?: React.ReactNode
+  /** Inset for the header/body/footer sections. Overrides (never stacks on) the
+   *  default; defaults to the `card` spacing token. */
+  padding?: CardPadding
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ title, description, headerAction, footer, children, padding = 'card', ...props }, ref) => {
+    const hasHeader = title != null || description != null || headerAction != null
+    const pad = SECTION_PADDING[padding]
+    return (
+      <Box
+        ref={ref}
+        background="surface"
+        border="default"
+        borderRadius="2xl"
+        boxShadow="sm"
+        className={cn('text-primary')}
+        {...props}
+      >
+        {hasHeader && (
+          <div className={cn('flex flex-col gap-1.5', pad)}>
+            {(title != null || headerAction != null) && (
+              <div className={cn('flex items-center justify-between gap-3')}>
+                {title != null && <div className={cn('text-lg font-semibold leading-snug tracking-tight')}>{title}</div>}
+                {headerAction}
+              </div>
+            )}
+            {description != null && <div className={cn('text-sm text-primary')}>{description}</div>}
+          </div>
+        )}
+        {children != null && <div className={cn(pad, hasHeader && 'pt-0')}>{children}</div>}
+        {footer != null && (
+          <div className={cn('flex items-center gap-3', pad, (hasHeader || children != null) && 'pt-0')}>{footer}</div>
+        )}
+      </Box>
+    )
+  },
+)
+Card.displayName = 'Card'

package/src/components/chart.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react'
+import * as echarts from 'echarts/core'
+import type { EChartsCoreOption } from 'echarts/core'
+import { LineChart, BarChart, PieChart, ScatterChart } from 'echarts/charts'
+import {
+  TitleComponent, TooltipComponent, GridComponent, LegendComponent,
+  DataZoomComponent, MarkLineComponent, MarkAreaComponent,
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  LineChart, BarChart, PieChart, ScatterChart,
+  TitleComponent, TooltipComponent, GridComponent, LegendComponent,
+  DataZoomComponent, MarkLineComponent, MarkAreaComponent,
+  CanvasRenderer,
+])
+
+/**
+ * Chart — a token-driven ECharts surface. Pass a standard ECharts `option`; the
+ * series palette, axes, grid, tooltip, and fonts are themed from the live `--wf-*`
+ * tokens, so charts re-skin with the brand and flip with light/dark automatically
+ * (no ThemeProvider required — it watches the document root). Auto-resizes.
+ *
+ *   <Chart option={{ xAxis: { type: 'category', data: months },
+ *                    yAxis: { type: 'value' },
+ *                    series: [{ type: 'line', data: revenue }] }} />
+ *
+ * ECharts is the one canvas dependency; everything else stays DOM + tokens.
+ */
+export interface ChartProps {
+  /** A standard ECharts option object. */
+  option: EChartsCoreOption
+  /** Pixel or CSS height (width always fills the container). Default 320. */
+  height?: number | string
+  /** Replace the previous option wholesale instead of merging. Default true. */
+  notMerge?: boolean
+  /** ECharts events to bind, e.g. `{ click: (p) => … }`. */
+  onEvents?: Record<string, (params: unknown) => void>
+}
+
+const cssVar = (name: string) =>
+  getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+
+/** Build an ECharts theme object from the resolved Windforge tokens. */
+function buildTheme(): object {
+  const text = cssVar('--wf-color-text-primary')
+  const muted = cssVar('--wf-color-text-secondary')
+  const faint = cssVar('--wf-color-text-tertiary')
+  const line = cssVar('--wf-color-border-default')
+  const subtle = cssVar('--wf-color-border-subtle')
+  const surface = cssVar('--wf-color-background-paper')
+  const font = cssVar('--wf-font-sans')
+  const palette = [
+    cssVar('--wf-color-brand-primary'),
+    cssVar('--wf-color-status-info-default'),
+    cssVar('--wf-color-status-success-default'),
+    cssVar('--wf-color-status-warning-default'),
+    cssVar('--wf-color-status-error-default'),
+    cssVar('--wf-color-brand-secondary'),
+  ].filter(Boolean)
+
+  const axis = {
+    axisLine: { lineStyle: { color: line } },
+    axisTick: { lineStyle: { color: line } },
+    axisLabel: { color: muted },
+    splitLine: { lineStyle: { color: subtle } },
+  }
+  return {
+    color: palette,
+    backgroundColor: 'transparent',
+    textStyle: { color: text, fontFamily: font },
+    title: { textStyle: { color: text }, subtextStyle: { color: faint } },
+    legend: { textStyle: { color: muted } },
+    tooltip: {
+      backgroundColor: surface,
+      borderColor: line,
+      textStyle: { color: text, fontFamily: font },
+      axisPointer: { lineStyle: { color: muted }, crossStyle: { color: muted } },
+    },
+    categoryAxis: axis,
+    valueAxis: axis,
+    logAxis: axis,
+    timeAxis: axis,
+    // Series labels (notably pie's outside labels) don't inherit the global
+    // textStyle — pin them to the foreground token so they stay readable in both
+    // modes, and tint the connector lines with the border token.
+    pie: {
+      label: { color: text, fontFamily: font },
+      labelLine: { lineStyle: { color: line } },
+    },
+  }
+}
+
+export function Chart({ option, height = 320, notMerge = true, onEvents }: ChartProps) {
+  const elRef = React.useRef<HTMLDivElement>(null)
+  const chartRef = React.useRef<echarts.ECharts | null>(null)
+  // Bump on any document-root attribute change (mode class / runtime token style),
+  // so the chart re-inits with the new theme — provider-independent reactivity.
+  const [themeKey, bump] = React.useReducer((x: number) => x + 1, 0)
+
+  React.useEffect(() => {
+    const mo = new MutationObserver(() => bump())
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style'] })
+    return () => mo.disconnect()
+  }, [])
+
+  // (Re)create the instance when the theme changes; ECharts bakes the theme at init.
+  React.useEffect(() => {
+    if (!elRef.current) return
+    const chart = echarts.init(elRef.current, buildTheme())
+    chartRef.current = chart
+    chart.setOption(option, notMerge)
+    if (onEvents) for (const [name, handler] of Object.entries(onEvents)) chart.on(name, handler)
+    const ro = new ResizeObserver(() => chart.resize())
+    ro.observe(elRef.current)
+    return () => {
+      ro.disconnect()
+      chart.dispose()
+      chartRef.current = null
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [themeKey])
+
+  // Push option updates to the existing instance (no re-init needed).
+  React.useEffect(() => {
+    chartRef.current?.setOption(option, notMerge)
+  }, [option, notMerge])
+
+  return <div ref={elRef} role="img" style={{ height, width: '100%' }} />
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { focusRing } from '../lib/recipes'
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>>
+>(({ ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-5 w-5 shrink-0 rounded-sm border border-strong transition-colors',
+      focusRing,
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=checked]:border-transparent data-[state=checked]:bg-surface-inverse data-[state=checked]:text-inverse',
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className="h-3.5 w-3.5" strokeWidth={3} />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName

package/src/components/chip.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { X } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { focusRingInset } from '../lib/recipes'
+
+/**
+ * Chip — an interactive pill: clickable (filter/selection) and optionally
+ * deletable. Distinct from `Badge`, which is a static label. Set `selected` for
+ * the active state and pass `onDelete` to show a trailing ✕.
+ */
+const chip = cva(
+  'inline-flex items-center gap-1.5 rounded-full border text-sm font-medium transition-colors ' +
+    '[&_svg]:size-3.5 disabled:opacity-50 disabled:pointer-events-none',
+  {
+    variants: {
+      selected: {
+        true:  'border-transparent bg-surface-inverse text-inverse',
+        false: 'border-strong bg-surface text-primary hover:bg-surface-subtle',
+      },
+      clickable: { true: 'cursor-pointer ' + focusRingInset, false: '' },
+      size: {
+        sm: 'px-2 py-0.5',
+        md: 'px-3 py-1',
+      },
+    },
+    defaultVariants: { selected: false, clickable: false, size: 'md' },
+  },
+)
+
+export interface ChipProps
+  extends NoStyle<Omit<React.HTMLAttributes<HTMLElement>, 'onClick'>>,
+    VariantProps<typeof chip> {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  /** When provided, renders a trailing ✕ that calls this instead of selecting. */
+  onDelete?: () => void
+  disabled?: boolean
+  icon?: React.ReactNode
+}
+
+export const Chip = React.forwardRef<HTMLElement, ChipProps>(
+  ({ selected, size, onClick, onDelete, disabled, icon, children, ...props }, ref) => {
+    const clickable = !!onClick
+    const Comp: React.ElementType = clickable ? 'button' : 'span'
+    return (
+      <Comp
+        ref={ref as never}
+        className={cn(chip({ selected, clickable, size }))}
+        {...(clickable ? { type: 'button', onClick, disabled, 'aria-pressed': !!selected } : {})}
+        {...props}
+      >
+        {icon}
+        {children}
+        {onDelete && (
+          <button
+            type="button"
+            aria-label="Remove"
+            disabled={disabled}
+            onClick={(event) => {
+              event.stopPropagation()
+              onDelete()
+            }}
+            className={cn('-mr-1 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100', focusRingInset)}
+          >
+            <X />
+          </button>
+        )}
+      </Comp>
+    )
+  },
+)
+Chip.displayName = 'Chip'
+
+export { chip as chipVariants }

package/src/components/code-block.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react'
+import { Highlight, type PrismTheme } from 'prism-react-renderer'
+import { Check, Copy } from 'lucide-react'
+import { cn } from '../lib/utils'
+import { focusRingInset } from '../lib/recipes'
+
+/**
+ * CodeBlock — the on-system, syntax-highlighted code surface. One source of truth
+ * for every snippet in the system (docs, examples, anywhere). Highlighting runs
+ * locally via prism-react-renderer — no network, no API. The token theme below is
+ * built from `var(--wf-*)` references, so colors resolve live: the code re-skins
+ * with light/dark and with a brand swap automatically, no JS reactivity needed.
+ *
+ * Takes no className by design — its surface is fixed so every snippet in a product
+ * renders identically.
+ *
+ *   <CodeBlock code={src} language="tsx" filename="button.tsx" showLineNumbers />
+ */
+export interface CodeBlockProps {
+  code: string
+  /** Prism language id. Default 'tsx'. */
+  language?: string
+  /** Optional header filename; shown left of the language label. */
+  filename?: string
+  /** Render a left gutter with 1-based line numbers. */
+  showLineNumbers?: boolean
+  /** 1-based line numbers to emphasize. */
+  highlightLines?: number[]
+  /** Soft-wrap long lines instead of scrolling horizontally. */
+  wrap?: boolean
+  /** Max height before vertical scroll, e.g. '24rem'. */
+  maxHeight?: string
+  /** Show the copy button (default true). */
+  copyable?: boolean
+}
+
+// Token-driven Prism theme. Every color is a live CSS variable, so the panel
+// follows the active mode and brand with zero JS — keywords ride the brand, the
+// status ramp carries strings/numbers/props, neutrals carry text/comments.
+const prismTheme: PrismTheme = {
+  plain: { color: 'var(--wf-color-text-primary)', backgroundColor: 'transparent' },
+  styles: [
+    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: 'var(--wf-color-text-tertiary)', fontStyle: 'italic' } },
+    { types: ['punctuation'], style: { color: 'var(--wf-color-text-secondary)' } },
+    { types: ['tag', 'keyword', 'selector', 'operator', 'builtin'], style: { color: 'var(--wf-color-brand-primary)' } },
+    { types: ['function', 'class-name', 'function-variable'], style: { color: 'var(--wf-color-status-info-default)' } },
+    { types: ['attr-name', 'property', 'variable', 'entity'], style: { color: 'var(--wf-color-status-error-default)' } },
+    { types: ['string', 'char', 'attr-value', 'inserted', 'regex'], style: { color: 'var(--wf-color-status-success-default)' } },
+    { types: ['number', 'boolean', 'constant', 'symbol'], style: { color: 'var(--wf-color-status-warning-default)' } },
+  ],
+}
+
+export function CodeBlock({
+  code, language = 'tsx', filename, showLineNumbers, highlightLines, wrap, maxHeight, copyable = true,
+}: CodeBlockProps) {
+  const [copied, setCopied] = React.useState(false)
+  const text = code.replace(/\n+$/, '')
+  const highlightSet = React.useMemo(() => new Set(highlightLines ?? []), [highlightLines])
+
+  const copy = () => {
+    void navigator.clipboard?.writeText(text)
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1400)
+  }
+
+  const copyButton = (
+    <button
+      type="button"
+      onClick={copy}
+      aria-label={copied ? 'Copied' : 'Copy code'}
+      className={cn(
+        'inline-flex size-8 items-center justify-center rounded-md text-secondary opacity-70 transition-opacity',
+        'hover:bg-surface-subtle hover:opacity-100 [&_svg]:size-4',
+        focusRingInset,
+      )}
+    >
+      {copied ? <Check className="text-success" /> : <Copy />}
+    </button>
+  )
+
+  return (
+    <div className="relative overflow-hidden rounded-xl border border-border bg-surface-inset text-sm">
+      {filename != null && (
+        <div className="flex items-center justify-between gap-2 border-b border-border px-4 py-2">
+          <span className="truncate font-mono text-sm text-secondary">{filename}</span>
+          <div className="flex items-center gap-2">
+            <span className="select-none text-sm uppercase tracking-wide text-tertiary">{language}</span>
+            {copyable && copyButton}
+          </div>
+        </div>
+      )}
+
+      {filename == null && copyable && <div className="absolute right-2 top-2 z-10">{copyButton}</div>}
+
+      <Highlight code={text} language={language} theme={prismTheme}>
+        {({ style, tokens, getLineProps, getTokenProps }) => (
+          <pre
+            className={cn('m-0 overflow-auto py-3 font-mono text-sm leading-relaxed', filename == null && copyable && 'pr-12')}
+            style={{ ...style, background: 'transparent', maxHeight }}
+          >
+            {tokens.map((line, i) => {
+              const lineProps = getLineProps({ line })
+              const isHot = highlightSet.has(i + 1)
+              return (
+                <div
+                  key={i}
+                  {...lineProps}
+                  className={cn(lineProps.className, 'flex px-4', wrap && 'whitespace-pre-wrap', isHot && 'bg-brand-subtle')}
+                >
+                  {showLineNumbers && (
+                    <span className="mr-4 inline-block w-6 shrink-0 select-none text-right text-tertiary">{i + 1}</span>
+                  )}
+                  <span className={cn('flex-1', wrap && 'break-words')}>
+                    {line.map((token, key) => (
+                      <span key={key} {...getTokenProps({ token })} />
+                    ))}
+                  </span>
+                </div>
+              )
+            })}
+          </pre>
+        )}
+      </Highlight>
+    </div>
+  )
+}

package/src/components/command.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { menuItem, overlayBackdrop } from '../lib/recipes'
+
+/**
+ * Command — a fast, filterable command menu / palette (cmdk under the hood),
+ * token-styled to match the system. Compose `Command` > `CommandInput` +
+ * `CommandList` (`CommandEmpty`/`CommandGroup`/`CommandItem`/`CommandSeparator`),
+ * or drop the whole thing into `CommandDialog` for a ⌘K palette.
+ *
+ *   <CommandDialog open={open} onOpenChange={setOpen}>
+ *     <CommandInput placeholder="Type a command…" />
+ *     <CommandList>
+ *       <CommandEmpty>No results.</CommandEmpty>
+ *       <CommandGroup heading="Actions">
+ *         <CommandItem onSelect={…}>New file</CommandItem>
+ *       </CommandGroup>
+ *     </CommandList>
+ *   </CommandDialog>
+ */
+export const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof CommandPrimitive>>
+>(({ ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn('flex h-full w-full flex-col overflow-hidden rounded-xl bg-surface text-primary')}
+    {...props}
+  />
+))
+Command.displayName = 'Command'
+
+export const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>>
+>(({ ...props }, ref) => (
+  <div className="flex items-center gap-2 border-b border-border px-3">
+    <Search className="size-4 shrink-0 text-tertiary" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full bg-transparent py-3 text-sm text-primary outline-none placeholder:text-tertiary',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+      )}
+      {...props}
+    />
+  </div>
+))
+CommandInput.displayName = 'CommandInput'
+
+export const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>>
+>(({ ...props }, ref) => (
+  <CommandPrimitive.List ref={ref} className={cn('max-h-80 overflow-y-auto overflow-x-hidden p-1')} {...props} />
+))
+CommandList.displayName = 'CommandList'
+
+export const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>>
+>(({ ...props }, ref) => (
+  <CommandPrimitive.Empty ref={ref} className={cn('py-6 text-center text-sm text-tertiary')} {...props} />
+))
+CommandEmpty.displayName = 'CommandEmpty'
+
+export const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>>
+>(({ ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-primary',
+      '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-tertiary',
+    )}
+    {...props}
+  />
+))
+CommandGroup.displayName = 'CommandGroup'
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>>
+>(({ ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-border')} {...props} />
+))
+CommandSeparator.displayName = 'CommandSeparator'
+
+export const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>>
+>(({ ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      menuItem,
+      'gap-2 px-2 py-2 text-primary [&_svg]:size-4 [&_svg]:text-secondary',
+      'data-[selected=true]:bg-surface-inset data-[selected=true]:text-primary',
+    )}
+    {...props}
+  />
+))
+CommandItem.displayName = 'CommandItem'
+
+export function CommandShortcut({ ...props }: NoStyle<React.HTMLAttributes<HTMLSpanElement>>) {
+  return <span className={cn('ml-auto text-sm tracking-widest text-tertiary')} {...props} />
+}
+
+export interface CommandDialogProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  children: React.ReactNode
+  /** Accessible label for the palette dialog. */
+  label?: string
+}
+
+export function CommandDialog({ open, onOpenChange, children, label = 'Command palette' }: CommandDialogProps) {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className={cn(overlayBackdrop)} />
+        <DialogPrimitive.Content
+          className={cn(
+            'fixed left-1/2 top-[15%] z-50 w-full max-w-2xl -translate-x-1/2 overflow-hidden',
+            'rounded-2xl border border-border bg-surface shadow-xl animate-scale-in',
+          )}
+        >
+          <DialogPrimitive.Title className="sr-only">{label}</DialogPrimitive.Title>
+          <Command>{children}</Command>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}