{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sf-command",
  "title": "SF Command",
  "description": "Industrial command palette with inverted selection, mono text",
  "registryDependencies": [
    "command"
  ],
  "files": [
    {
      "path": "components/sf/sf-command.tsx",
      "content": "\"use client\";\n\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/components/ui/command\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Command palette — FRAME layer search/navigation primitive.\n *\n * Radix Command wrapped with SF styling: sharp corners, 2px foreground\n * border, dark background. Compose with SFCommandInput, SFCommandList,\n * SFCommandGroup, and SFCommandItem for full palette functionality.\n *\n * @param className - Merged via cn() after base classes\n *\n * @example\n * <SFCommand>\n *   <SFCommandInput placeholder=\"Search...\" />\n *   <SFCommandList>\n *     <SFCommandGroup heading=\"Actions\">\n *       <SFCommandItem>Open file</SFCommandItem>\n *     </SFCommandGroup>\n *   </SFCommandList>\n * </SFCommand>\n */\nfunction SFCommand({\n  className,\n  ...props\n}: React.ComponentProps<typeof Command>) {\n  return (\n    <Command\n      className={cn(\n        \"rounded-none border-2 border-foreground bg-background\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFCommand — modal dialog wrapper for command palette overlay usage. */\nfunction SFCommandDialog({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandDialog>) {\n  return <CommandDialog className={cn(\"rounded-none\", className)} {...props} />;\n}\n\n/** Sub-component of SFCommand — search input rendered in font-mono uppercase. */\nfunction SFCommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandInput>) {\n  return (\n    <CommandInput\n      className={cn(\"font-mono uppercase tracking-wider text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFCommand — scrollable results list container in font-mono. */\nfunction SFCommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandList>) {\n  return (\n    <CommandList\n      className={cn(\"font-mono text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFCommand — empty state message shown when no results match the query. */\nfunction SFCommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandEmpty>) {\n  return (\n    <CommandEmpty\n      className={cn(\"font-mono uppercase tracking-wider text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFCommand — labeled group of related command items with mono uppercase heading. */\nfunction SFCommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandGroup>) {\n  return (\n    <CommandGroup\n      className={cn(\n        \"**:[[cmdk-group-heading]]:font-mono **:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-[0.15em] **:[[cmdk-group-heading]]:text-[var(--text-xs)]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFCommand — selectable command item; highlights with inverted colors on selection. */\nfunction SFCommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandItem>) {\n  return (\n    <CommandItem\n      className={cn(\n        \"rounded-none font-mono uppercase tracking-wider text-xs cursor-pointer data-selected:bg-foreground data-selected:text-background\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFCommand — keyboard shortcut label rendered in mono uppercase, right-aligned. */\nfunction SFCommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandShortcut>) {\n  return (\n    <CommandShortcut\n      className={cn(\"font-mono uppercase tracking-wider text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFCommand — full-width foreground-colored rule dividing command groups. */\nfunction SFCommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandSeparator>) {\n  return (\n    <CommandSeparator\n      className={cn(\"bg-foreground h-[var(--border-element)]\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  SFCommand,\n  SFCommandDialog,\n  SFCommandInput,\n  SFCommandList,\n  SFCommandEmpty,\n  SFCommandGroup,\n  SFCommandItem,\n  SFCommandSeparator,\n  SFCommandShortcut,\n};\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "layer": "frame",
    "pattern": "A"
  },
  "type": "registry:ui"
}