{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "A command palette whose rows cascade in, with one highlight gliding between results and pages sliding sideways.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.2",
    "@ui-sdk/react@0.1.0-beta.2"
  ],
  "registryDependencies": [
    "@keyframery/motion"
  ],
  "files": [
    {
      "path": "registry/components/keyframery/primitives/command.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/command`: same parts, same props. Swap the import and keep your code.\n   This file adds motion only. Colours, radii, shadows and spacing stay yours.\n\n   - List: Glide, one highlight that springs from command to command (CSS anchor positioning).\n   - Items: arrive one after another (Cascade), 24px from the side with a 6px blur, whenever they\n     come into the page: when the palette mounts, when a page opens, and when a search lets them back. */\n\nimport {\n  CommandGroupLabel as CommandGroupLabelPart,\n  CommandItem as CommandItemPart,\n  CommandList as CommandListPart,\n} from \"@ui-sdk/react/command\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/command\"\n\n/* Only opacity, translate and filter transition here, so the delay never slows a hover. */\nconst arrive = cn(\n  \"transition-[opacity,translate,filter] duration-[calc(460ms*var(--kf-speed,1))] ease-spring [transition-delay:calc((min(sibling-index(),10)-1)*calc(32ms*var(--kf-speed,1)))]\",\n  \"starting:translate-x-6 starting:opacity-0 starting:blur-[6px]\",\n  \"motion-reduce:transition-none!\",\n)\n\n/* The list carries the highlight: a `::before` that follows the highlighted command. Its neutral\n   surface follows the text colour; give `before:bg-…` in className to change it. */\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandListPart>) {\n  return (\n    <CommandListPart\n      className={cn(\n        \"relative isolate [anchor-scope:--kf-hl]\",\n        \"before:pointer-events-none before:absolute before:-z-10 before:bg-[color-mix(in_oklch,currentColor_9%,transparent)] before:opacity-0\",\n        \"before:[position-anchor:--kf-hl] before:top-[anchor(top)] before:right-[anchor(right)] before:bottom-[anchor(bottom)] before:left-[anchor(left)]\",\n        \"before:transition-[top,right,bottom,left,opacity] before:duration-[calc(260ms*var(--kf-speed,1))] before:ease-spring\",\n        \"has-[[data-highlighted]]:before:opacity-100\",\n        \"motion-reduce:before:transition-none!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandItemPart>) {\n  return (\n    <CommandItemPart className={cn(arrive, \"data-highlighted:[anchor-name:--kf-hl]\", className)} {...props} />\n  )\n}\n\nfunction CommandGroupLabel({ className, ...props }: React.ComponentProps<typeof CommandGroupLabelPart>) {\n  return <CommandGroupLabelPart className={cn(arrive, className)} {...props} />\n}\n\nexport { CommandGroupLabel, CommandItem, CommandList }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/command.tsx"
    },
    {
      "path": "registry/components/keyframery/command.tsx",
      "content": "\"use client\"\n\n/* Styled command palette: the animated primitive plus the Keyframery look. */\n\nimport {\n  Command as CommandRoot,\n  CommandEmpty as CommandEmptyPart,\n  CommandGroup as CommandGroupPart,\n  CommandGroupLabel as CommandGroupLabelPart,\n  CommandInput as CommandInputPart,\n  CommandItem as CommandItemPart,\n  CommandItemIcon as CommandItemIconPart,\n  CommandItemText as CommandItemTextPart,\n  CommandList as CommandListPart,\n  CommandPage as CommandPagePart,\n  CommandSeparator as CommandSeparatorPart,\n  CommandShortcut as CommandShortcutPart,\n  CommandStatus as CommandStatusPart,\n  createCommandController,\n} from \"@/components/keyframery/primitives/command\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* The palette is a sheet: the search row on top, the commands below. */\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandRoot>) {\n  return (\n    <CommandRoot\n      className={cn(\n        \"group/command flex w-full flex-col overflow-hidden rounded-[14px] bg-popover text-popover-foreground\",\n        \"shadow-[0_0_0_1px_rgb(0_0_0/0.06),0_2px_6px_-2px_rgb(0_0_0/0.08),0_12px_32px_-8px_rgb(0_0_0/0.18)]\",\n        \"dark:shadow-[0_0_0_1px_rgb(255_255_255/0.08),0_12px_32px_-8px_rgb(0_0_0/0.7)]\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The search row: a leading svg, the input, and anything after it, over a hairline. */\nfunction CommandSearch({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-search\"\n      className={cn(\n        \"flex h-12 shrink-0 items-center gap-2.5 border-b border-border px-4 text-muted-foreground\",\n        \"[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:transition-colors [&>svg]:duration-[calc(150ms*var(--kf-speed,1))] has-[input:focus-visible]:[&>svg]:text-foreground motion-reduce:[&>svg]:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Bare text in the search row: the sheet is the field, so focus shows on the row's icon\n   and the caret, not as a ring around the whole palette. */\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandInputPart>) {\n  return (\n    <CommandInputPart\n      className={cn(\n        \"h-full min-w-0 flex-1 bg-transparent text-[14px] text-foreground outline-none placeholder:text-muted-foreground\",\n        \"[&::-webkit-search-cancel-button]:appearance-none\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandListPart>) {\n  return (\n    <CommandListPart\n      className={cn(\n        \"max-h-[320px] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 outline-none\",\n        \"group-has-[[data-slot=command-empty][data-empty]]/command:hidden\",\n        /* The gliding highlight, in the row's shape and colour. */\n        \"before:rounded-[8px] before:bg-accent\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Renders no element. Its commands arrive by the primitive's cascade. */\nfunction CommandPage(props: React.ComponentProps<typeof CommandPagePart>) {\n  return <CommandPagePart {...props} />\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandItemPart>) {\n  return (\n    <CommandItemPart\n      className={cn(\n        \"group/item relative flex h-9 cursor-default items-center gap-2.5 rounded-[8px] px-2.5 text-[13px] leading-none outline-none select-none\",\n        \"data-highlighted:text-accent-foreground\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-40\",\n        \"data-pending:cursor-progress data-pending:opacity-60\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItemIcon({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandItemIconPart>) {\n  return (\n    <CommandItemIconPart\n      className={cn(\n        \"grid size-4 shrink-0 place-items-center text-muted-foreground transition-colors duration-[calc(100ms*var(--kf-speed,1))] group-data-highlighted/item:text-foreground data-mirror:rtl:-scale-x-100 motion-reduce:transition-none! [&_svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The matched part reads stronger; the rest steps back. */\nfunction CommandItemText({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandItemTextPart>) {\n  return (\n    <CommandItemTextPart\n      className={cn(\n        \"min-w-0 flex-1 truncate leading-[1.3]\",\n        \"data-matched:text-foreground/70 [&_mark]:bg-transparent [&_mark]:font-semibold [&_mark]:text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandShortcutPart>) {\n  return (\n    <CommandShortcutPart\n      className={cn(\n        \"ml-auto shrink-0 pl-3 text-[12px] tracking-[0.08em] text-muted-foreground tabular-nums\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandGroupPart>) {\n  return <CommandGroupPart className={cn(\"flex flex-col\", className)} {...props} />\n}\n\nfunction CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandGroupLabelPart>) {\n  return (\n    <CommandGroupLabelPart\n      className={cn(\n        \"px-2.5 pt-2.5 pb-1.5 text-[11px] leading-none font-medium text-muted-foreground select-none\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandSeparatorPart>) {\n  return (\n    <CommandSeparatorPart\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandEmptyPart>) {\n  return (\n    <CommandEmptyPart\n      className={cn(\n        \"hidden px-4 py-10 text-center text-[13px] text-muted-foreground data-empty:block data-loading:block\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandStatus({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandStatusPart>) {\n  return (\n    <CommandStatusPart\n      className={cn(\n        \"px-4 pt-3 pb-1 text-[12px] text-muted-foreground tabular-nums empty:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* A quiet strip under the list for hints such as which keys do what. */\nfunction CommandFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-footer\"\n      className={cn(\n        \"flex h-10 shrink-0 items-center gap-4 border-t border-border bg-muted/40 px-4 text-[12px] text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandItemIcon,\n  CommandItemText,\n  CommandList,\n  CommandPage,\n  CommandSearch,\n  CommandSeparator,\n  CommandShortcut,\n  CommandStatus,\n  createCommandController,\n}\n",
      "type": "registry:component",
      "target": "components/keyframery/command.tsx"
    }
  ],
  "type": "registry:component"
}