{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-palette-4",
  "title": "Palette With Preview Pane",
  "description": "Inline two-column command palette with a searchable grouped result list beside a live preview pane for the highlighted item and its primary action.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "command",
    "kbd"
  ],
  "files": [
    {
      "path": "registry/blocks/command-palette/4/command-palette-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\"\nimport { Kbd, KbdGroup } from \"@/components/ui/kbd\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\n/** Props a call site may pass through to an icon. */\ntype IconProps = { className?: string; size?: number | string }\n\n/** An icon held in data and rendered later, e.g. `<item.icon className=\"size-4\" />`. */\ntype IconRenderer = (props: IconProps) => React.ReactNode\n\ntype Entry = {\n  id: string\n  icon: IconRenderer\n  title: string\n  group: string\n  category: string\n  description: string\n  meta: { label: string; value: string }[]\n}\n\nconst entries: Entry[] = [\n  {\n    id: \"roadmap\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"FileText\"\n        tabler=\"IconFileText\"\n        hugeicons=\"File01Icon\"\n        phosphor=\"FileText\"\n        remixicon=\"RiFileTextLine\"\n        {...p}\n      />\n    ),\n    title: \"Q3 Product Roadmap\",\n    group: \"Documents\",\n    category: \"Document\",\n    description:\n      \"The planning doc for the next quarter, covering themes, bets, and the sequencing across teams.\",\n    meta: [\n      { label: \"Owner\", value: \"Mara Lin\" },\n      { label: \"Updated\", value: \"Jul 9, 2026\" },\n    ],\n  },\n  {\n    id: \"assets\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Folder\"\n        tabler=\"IconFolder\"\n        hugeicons=\"FolderIcon\"\n        phosphor=\"Folder\"\n        remixicon=\"RiFolderLine\"\n        {...p}\n      />\n    ),\n    title: \"Brand Assets\",\n    group: \"Documents\",\n    category: \"Folder\",\n    description:\n      \"Logos, color tokens, and export-ready templates for the marketing and product teams.\",\n    meta: [\n      { label: \"Items\", value: \"148 files\" },\n      { label: \"Updated\", value: \"Jul 2, 2026\" },\n    ],\n  },\n  {\n    id: \"analytics\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"BarChart\"\n        tabler=\"IconChartBar\"\n        hugeicons=\"BarChartIcon\"\n        phosphor=\"ChartBar\"\n        remixicon=\"RiBarChartLine\"\n        {...p}\n      />\n    ),\n    title: \"View Analytics\",\n    group: \"Navigation\",\n    category: \"Page\",\n    description:\n      \"Traffic, conversion, and retention dashboards for the current billing period.\",\n    meta: [\n      { label: \"Section\", value: \"Insights\" },\n      { label: \"Access\", value: \"Admins\" },\n    ],\n  },\n  {\n    id: \"members\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Users\"\n        tabler=\"IconUsersGroup\"\n        hugeicons=\"UserGroupIcon\"\n        phosphor=\"UsersThree\"\n        remixicon=\"RiTeamLine\"\n        {...p}\n      />\n    ),\n    title: \"Browse Members\",\n    group: \"Navigation\",\n    category: \"Page\",\n    description:\n      \"The full team directory with roles, status, and their most recent activity.\",\n    meta: [\n      { label: \"Section\", value: \"People\" },\n      { label: \"Count\", value: \"42 members\" },\n    ],\n  },\n  {\n    id: \"profile\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"User\"\n        tabler=\"IconUser\"\n        hugeicons=\"UserIcon\"\n        phosphor=\"User\"\n        remixicon=\"RiUserLine\"\n        {...p}\n      />\n    ),\n    title: \"Edit Profile\",\n    group: \"Actions\",\n    category: \"Action\",\n    description:\n      \"Update your display name, avatar, and the notifications you receive.\",\n    meta: [{ label: \"Shortcut\", value: \"Cmd E\" }],\n  },\n  {\n    id: \"settings\",\n    icon: (p: IconProps) => (\n      <IconPlaceholder\n        lucide=\"Settings\"\n        tabler=\"IconSettings\"\n        hugeicons=\"SettingsIcon\"\n        phosphor=\"GearSix\"\n        remixicon=\"RiSettings3Line\"\n        {...p}\n      />\n    ),\n    title: \"Open Settings\",\n    group: \"Actions\",\n    category: \"Action\",\n    description:\n      \"Workspace preferences, billing, integrations, and security controls.\",\n    meta: [{ label: \"Shortcut\", value: \"Cmd ,\" }],\n  },\n]\n\nconst groups = [\"Navigation\", \"Documents\", \"Actions\"]\n\nconst byId = Object.fromEntries(entries.map((e) => [e.id, e]))\n\nconst COMMAND_GROUP_CLASS =\n  \"p-1.5 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:tracking-wide\"\n\nfunction PreviewPane({ entry }: { entry: Entry | undefined }) {\n  if (!entry) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground\">\n        Select a result to preview it.\n      </div>\n    )\n  }\n  return (\n    <div className=\"flex h-full flex-col p-5\">\n      <div className=\"flex size-11 items-center justify-center rounded-lg border border-border bg-muted text-foreground\">\n        <entry.icon className=\"size-5\" aria-hidden=\"true\" />\n      </div>\n      <div className=\"mt-4 flex items-center gap-2\">\n        <h3 className=\"font-heading text-sm font-semibold\">{entry.title}</h3>\n        <Badge variant=\"secondary\">{entry.category}</Badge>\n      </div>\n      <p className=\"mt-2 text-sm text-pretty text-muted-foreground\">\n        {entry.description}\n      </p>\n      <dl className=\"mt-5 flex flex-col gap-2 border-t border-border pt-4\">\n        {entry.meta.map((row) => (\n          <div key={row.label} className=\"flex items-center justify-between\">\n            <dt className=\"text-xs text-muted-foreground\">{row.label}</dt>\n            <dd className=\"text-xs font-medium tabular-nums\">{row.value}</dd>\n          </div>\n        ))}\n      </dl>\n      <Button className=\"mt-auto w-full\">\n        Open\n        <KbdGroup>\n          <Kbd>\n            <IconPlaceholder\n              lucide=\"CornerDownLeft\"\n              tabler=\"IconCornerDownLeft\"\n              hugeicons=\"CornerDownLeftIcon\"\n              phosphor=\"ArrowElbowDownLeft\"\n              remixicon=\"RiCornerDownLeftLine\"\n              className=\"size-3\"\n              aria-hidden=\"true\"\n            />\n          </Kbd>\n        </KbdGroup>\n      </Button>\n    </div>\n  )\n}\n\nexport default function CommandPaletteBlock() {\n  const [value, setValue] = React.useState(entries[0].id)\n  const selected = byId[value]\n\n  return (\n    <section className=\"flex min-h-svh w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"grid h-[420px] w-full max-w-2xl grid-cols-1 overflow-hidden rounded-lg border border-border bg-popover sm:grid-cols-[1fr_260px]\">\n        <Command\n          value={value}\n          onValueChange={setValue}\n          className=\"bg-transparent\"\n        >\n          <CommandInput\n            aria-label=\"Search everything\"\n            placeholder=\"Search everything…\"\n            className=\"text-sm\"\n          />\n          <CommandList className=\"max-h-none flex-1\">\n            <CommandEmpty className=\"text-sm\">No results found.</CommandEmpty>\n            {groups.map((group) => (\n              <CommandGroup\n                key={group}\n                heading={group}\n                className={COMMAND_GROUP_CLASS}\n              >\n                {entries\n                  .filter((entry) => entry.group === group)\n                  .map((entry) => (\n                    <CommandItem\n                      key={entry.id}\n                      value={entry.id}\n                      onSelect={() => setValue(entry.id)}\n                      className=\"gap-2.5 px-3 py-2.5 text-sm\"\n                    >\n                      <entry.icon aria-hidden=\"true\" />\n                      <span className=\"flex-1 truncate\">{entry.title}</span>\n                    </CommandItem>\n                  ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n\n        <div className=\"hidden border-l border-border bg-background sm:block\">\n          <PreviewPane entry={selected} />\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/command-palette-4.tsx"
    }
  ],
  "meta": {
    "height": "556px",
    "tier": "free"
  },
  "categories": [
    "command-palette"
  ],
  "type": "registry:block"
}