{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-command",
  "title": "RetroCommand",
  "description": "A Mac OS 9 styled command palette with inset search input, gliding azul highlight, selection blink, keyboard shortcut labels, and modal dialog variant, built on UI SDK Command and Dialog.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.1",
    "@ui-sdk/react@0.1.0-beta.1"
  ],
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json",
    "https://nostalgia-ui.com/r/retro-motion.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-command.tsx",
      "content": "\"use client\"\n\n/*\n * RetroCommand: a Mac OS 9 styled command palette on UI SDK's Command.\n *\n * Crafted moments:\n *  - Gliding azul highlight (modern flair): one highlight layer slides\n *    between commands as you arrow, type or point, and the row's ink flips to\n *    white as it arrives, exactly like the menus. Classic flair snaps.\n *  - Menu blink (both flairs): the chosen command flashes three times, then\n *    runs, as a chosen menu item always did.\n */\n\nimport * as React from \"react\"\nimport {\n  Command as CommandPrimitive,\n  CommandEmpty as CommandEmptyPrimitive,\n  CommandGroup as CommandGroupPrimitive,\n  CommandGroupLabel as CommandGroupLabelPrimitive,\n  CommandInput as CommandInputPrimitive,\n  CommandItem as CommandItemPrimitive,\n  CommandList as CommandListPrimitive,\n  CommandSeparator as CommandSeparatorPrimitive,\n  CommandShortcut as CommandShortcutPrimitive,\n} from \"@ui-sdk/react/command\"\nimport {\n  Dialog as DialogPrimitive,\n  DialogBackdrop as DialogBackdropPrimitive,\n  DialogContent as DialogContentPrimitive,\n  DialogDescription as DialogDescriptionPrimitive,\n  DialogTitle as DialogTitlePrimitive,\n} from \"@ui-sdk/react/dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  BLINK_COUNT,\n  BLINK_CYCLE_MS,\n  blinkThen,\n  useGlide,\n  useMergedRef,\n} from \"@/registry/new-york/lib/retro-motion\"\n\n/* string class names and plain children, as shadcn-style parts take */\ntype WithClassName<P> = Omit<P, \"className\" | \"children\"> & {\n  className?: string\n  children?: React.ReactNode\n}\n\n/* ------------------------------------------------------------------ */\n/*  Glide + blink CSS                                                  */\n/* ------------------------------------------------------------------ */\n\n/* Unlayered, so it beats the row utilities without !important; the blink\n * animation in turn beats both. React hoists it and dedupes it by href. */\nconst COMMAND_CSS = `\n.os9-command:not([data-glide-off]) [role=\"option\"][data-highlighted] {\n  background-color: transparent;\n}\n.os9-command[data-glide-off] > [data-glide-layer],\n.os9-command:has([data-pending]) > [data-glide-layer] {\n  opacity: 0 !important;\n  transition: none !important;\n}\n.os9-command [role=\"option\"] { transition: color 0s linear 60ms; }\n.os9-command[data-glide-off] [role=\"option\"] { transition: none; }\n@keyframes os9-command-blink {\n  0%, 49.9% { background-color: transparent; color: var(--os9-black); }\n  50%, 100% { background-color: var(--os9-azul); color: var(--os9-white); }\n}\n.os9-command [data-pending] {\n  animation: os9-command-blink ${BLINK_CYCLE_MS}ms steps(1, end) ${BLINK_COUNT};\n}\n.os9-command [data-pending] * { color: inherit !important; }\n`\n\n/* ------------------------------------------------------------------ */\n/*  RetroCommand (root)                                                */\n/* ------------------------------------------------------------------ */\n\nfunction RetroCommand({\n  className,\n  style,\n  ...props\n}: WithClassName<React.ComponentProps<typeof CommandPrimitive>> & { style?: React.CSSProperties }) {\n  return (\n    <CommandPrimitive\n      className={cn(\"flex flex-col overflow-hidden\", \"bg-os9-gray-200\", \"border border-os9-black\", className)}\n      style={{\n        boxShadow:\n          \"2px 2px 0 var(--os9-black), inset 2px 2px 0 rgba(255,255,255,0.6), inset -2px -2px 0 rgba(38,38,38,0.4)\",\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  RetroCommandDialog                                                 */\n/* ------------------------------------------------------------------ */\n\ntype RetroCommandDialogProps = Omit<React.ComponentProps<typeof DialogPrimitive>, \"children\"> & {\n  children?: React.ReactNode\n  /** Accessible (visually hidden) dialog title. Defaults to \"Command Palette\". */\n  title?: string\n  /** Accessible (visually hidden) dialog description. */\n  description?: string\n  /** Props for the RetroCommand inside, like `onAction` or `filter`. */\n  commandProps?: React.ComponentProps<typeof RetroCommand>\n}\n\n/* The palette pops in from 95% with a 120ms fade (modern flair); classic\n * flair shows it at once. Box properties carry `!` against the popup reset. */\nfunction RetroCommandDialog({\n  children,\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  commandProps,\n  ...props\n}: RetroCommandDialogProps) {\n  return (\n    <DialogPrimitive {...props}>\n      <DialogBackdropPrimitive\n        className={cn(\n          \"fixed! inset-0! z-50 bg-black/40!\",\n          \"transition-opacity duration-150 ease-out data-starting-style:opacity-0 data-ending-style:opacity-0\",\n          \"in-data-[flair=classic]:transition-none motion-reduce:transition-none\"\n        )}\n      />\n      <DialogContentPrimitive\n        className={cn(\n          \"fixed! inset-auto! left-1/2! top-1/2! z-50 m-0! p-0! h-auto! w-[calc(100%-2rem)]! max-w-[450px]!\",\n          \"border-0! bg-transparent! overflow-visible! text-os9-black!\",\n          \"-translate-x-1/2 -translate-y-1/2 outline-none\",\n          \"transition-[opacity,scale] duration-[120ms] ease-out\",\n          \"data-starting-style:scale-95 data-starting-style:opacity-0\",\n          \"data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:duration-75\",\n          \"in-data-[flair=classic]:transition-none motion-reduce:transition-none\"\n        )}\n      >\n        <DialogTitlePrimitive className=\"sr-only\">{title}</DialogTitlePrimitive>\n        <DialogDescriptionPrimitive className=\"sr-only\">{description}</DialogDescriptionPrimitive>\n        <RetroCommand {...commandProps}>{children}</RetroCommand>\n      </DialogContentPrimitive>\n    </DialogPrimitive>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  RetroCommandInput                                                  */\n/* ------------------------------------------------------------------ */\n\nfunction RetroCommandInput({\n  className,\n  placeholder,\n  ...props\n}: WithClassName<React.ComponentProps<typeof CommandInputPrimitive>>) {\n  return (\n    <div className=\"flex items-center gap-2 px-2 pt-2 pb-1\">\n      {/* magnifying glass */}\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" className=\"shrink-0\" aria-hidden>\n        <circle cx=\"6.5\" cy=\"6.5\" r=\"5\" stroke=\"var(--os9-gray-700)\" strokeWidth=\"2\" />\n        <line\n          x1=\"10.5\"\n          y1=\"10.5\"\n          x2=\"15\"\n          y2=\"15\"\n          stroke=\"var(--os9-gray-700)\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"square\"\n        />\n      </svg>\n      <CommandInputPrimitive\n        aria-label={placeholder ?? \"Search commands\"}\n        placeholder={placeholder}\n        className={cn(\n          \"min-w-0 flex-1 bg-os9-white text-os9-black\",\n          \"font-[family-name:var(--os9-font-sans)] text-[10px] leading-normal\",\n          \"placeholder:text-os9-gray-600\",\n          \"border border-os9-black\",\n          \"px-[5px] py-[3px]\",\n          \"outline-none\",\n          \"shadow-[inset_1px_1px_0_var(--os9-gray-700),inset_-1px_-1px_0_var(--os9-white)]\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  RetroCommandList                                                   */\n/* ------------------------------------------------------------------ */\n\nfunction RetroCommandList({\n  className,\n  children,\n  ref,\n  ...props\n}: WithClassName<React.ComponentProps<typeof CommandListPrimitive>>) {\n  const glideRef = useGlide(ref)\n  return (\n    <CommandListPrimitive\n      ref={glideRef}\n      className={cn(\n        \"os9-command relative max-h-[300px] overflow-y-auto overflow-x-hidden p-1\",\n        className\n      )}\n      {...props}\n    >\n      <style href=\"os9-command\" precedence=\"default\">\n        {COMMAND_CSS}\n      </style>\n      <span\n        aria-hidden\n        data-glide-layer\n        className=\"pointer-events-none absolute top-0 left-0 bg-os9-azul opacity-0\"\n      />\n      {children}\n    </CommandListPrimitive>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  RetroCommandEmpty                                                  */\n/* ------------------------------------------------------------------ */\n\n/* Place it next to RetroCommandList, not inside it. */\nfunction RetroCommandEmpty({\n  className,\n  ...props\n}: WithClassName<React.ComponentProps<typeof CommandEmptyPrimitive>>) {\n  return (\n    <CommandEmptyPrimitive\n      className={cn(\n        /* stays mounted as a live region; only takes room while empty */\n        \"text-center data-empty:py-6 data-loading:py-6\",\n        \"font-[family-name:var(--os9-font-sans)] text-[10px] leading-normal\",\n        \"text-os9-gray-700\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  RetroCommandGroup                                                  */\n/* ------------------------------------------------------------------ */\n\nconst groupLabelClass = cn(\n  \"px-2 py-1.5 select-none\",\n  \"font-[family-name:var(--os9-font-heading)] text-[10px] tracking-[0.42px] leading-[0.98]\",\n  \"text-os9-gray-700\"\n)\n\nfunction RetroCommandGroup({\n  className,\n  heading,\n  children,\n  ...props\n}: WithClassName<React.ComponentProps<typeof CommandGroupPrimitive>> & {\n  /** The group's label. Or put a RetroCommandGroupLabel inside. */\n  heading?: React.ReactNode\n}) {\n  return (\n    <CommandGroupPrimitive className={cn(\"overflow-hidden\", className)} {...props}>\n      {heading != null && (\n        <CommandGroupLabelPrimitive className={groupLabelClass}>{heading}</CommandGroupLabelPrimitive>\n      )}\n      {children}\n    </CommandGroupPrimitive>\n  )\n}\n\nfunction RetroCommandGroupLabel({\n  className,\n  ...props\n}: WithClassName<React.ComponentProps<typeof CommandGroupLabelPrimitive>>) {\n  return <CommandGroupLabelPrimitive className={cn(groupLabelClass, className)} {...props} />\n}\n\n/* ------------------------------------------------------------------ */\n/*  RetroCommandItem                                                   */\n/* ------------------------------------------------------------------ */\n\ntype RetroCommandItemProps = WithClassName<\n  Omit<React.ComponentProps<typeof CommandItemPrimitive>, \"onSelect\">\n> & {\n  /** Runs the command, with its `value` (or its text when it has none), after the blink. */\n  onSelect?: (value: string) => unknown\n  /** Skip the selection blink for this command. */\n  noBlink?: boolean\n}\n\nfunction RetroCommandItem({\n  className,\n  value,\n  onSelect,\n  noBlink,\n  ref,\n  ...props\n}: RetroCommandItemProps) {\n  const node = React.useRef<HTMLDivElement | null>(null)\n  const run = () => onSelect?.(value ?? node.current?.textContent?.trim() ?? \"\")\n  return (\n    <CommandItemPrimitive\n      ref={useMergedRef(ref, node)}\n      value={value}\n      /* blink, then run; UI SDK marks the row pending until this resolves */\n      onSelect={() => (noBlink ? run() : blinkThen(run))}\n      className={cn(\n        \"group relative z-[1] flex items-center gap-2 cursor-pointer select-none\",\n        \"h-[18px] px-2\",\n        \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n        \"text-os9-black\",\n        \"outline-none\",\n        \"data-highlighted:bg-os9-azul data-highlighted:text-os9-white\",\n        \"data-disabled:text-os9-gray-600 data-disabled:pointer-events-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  RetroCommandSeparator                                              */\n/* ------------------------------------------------------------------ */\n\nfunction RetroCommandSeparator({\n  className,\n  ...props\n}: WithClassName<React.ComponentProps<typeof CommandSeparatorPrimitive>>) {\n  return (\n    <CommandSeparatorPrimitive\n      className={cn(\"h-[2px] mx-1 my-1\", \"border-t border-os9-gray-700\", \"border-b border-b-os9-white\", className)}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  RetroCommandShortcut                                               */\n/* ------------------------------------------------------------------ */\n\n/* With children, shows them as given. Without, shows the item's `shortcut`\n * formatted for the platform (⌘P on a Mac, Ctrl+P elsewhere). */\nfunction RetroCommandShortcut({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  const classes = cn(\n    \"ml-auto\",\n    \"font-[family-name:var(--os9-font-sans)] text-[9px] leading-normal\",\n    \"text-os9-gray-700\",\n    \"group-data-highlighted:text-os9-white\",\n    className\n  )\n  if (children != null) {\n    return (\n      <span className={classes} {...props}>\n        {children}\n      </span>\n    )\n  }\n  return <CommandShortcutPrimitive className={classes} {...props} />\n}\n\n/* ------------------------------------------------------------------ */\n/*  Exports                                                            */\n/* ------------------------------------------------------------------ */\n\nexport type { RetroCommandDialogProps, RetroCommandItemProps }\n\nexport {\n  RetroCommand,\n  RetroCommandDialog,\n  RetroCommandInput,\n  RetroCommandList,\n  RetroCommandEmpty,\n  RetroCommandGroup,\n  RetroCommandGroupLabel,\n  RetroCommandItem,\n  RetroCommandSeparator,\n  RetroCommandShortcut,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}