{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-desktop",
  "title": "RetroDesktop",
  "description": "A Mac OS 9 styled full-viewport desktop layout with pinned menu bar (Apple logo + live clock), desktop area with optional dot-pattern wallpaper, and selectable desktop shortcut icons with 32x32 icon area and Geneva 9px labels.",
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-desktop.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroDesktop (root)                                                */\n/* ------------------------------------------------------------------ */\n\nconst RetroDesktop = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex h-screen w-screen flex-col overflow-hidden\",\n        \"bg-os9-gray-200\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nRetroDesktop.displayName = \"RetroDesktop\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroDesktopMenuBar                                                */\n/* ------------------------------------------------------------------ */\n\ninterface RetroDesktopMenuBarProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Show a live clock on the far right. Defaults to true. */\n  showClock?: boolean\n}\n\nconst RetroDesktopMenuBar = React.forwardRef<\n  HTMLDivElement,\n  RetroDesktopMenuBarProps\n>(({ className, showClock = true, children, ...props }, ref) => {\n  const [time, setTime] = React.useState<string>(\"\")\n\n  React.useEffect(() => {\n    if (!showClock) return\n\n    const formatTime = () => {\n      const now = new Date()\n      const hours = now.getHours()\n      const minutes = now.getMinutes()\n      const ampm = hours >= 12 ? \"PM\" : \"AM\"\n      const h = hours % 12 || 12\n      const m = minutes.toString().padStart(2, \"0\")\n      return `${h}:${m} ${ampm}`\n    }\n\n    setTime(formatTime())\n\n    const interval = setInterval(() => {\n      setTime(formatTime())\n    }, 60_000)\n\n    return () => clearInterval(interval)\n  }, [showClock])\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex h-[20px] shrink-0 items-center px-[8px]\",\n        \"bg-os9-gray-300\",\n        \"border-b border-os9-black\",\n        /* Inner bevel: white highlight top, dark shadow bottom */\n        \"shadow-[inset_0_1px_0_var(--os9-white),inset_0_-1px_0_var(--os9-gray-700)]\",\n        className\n      )}\n      {...props}\n    >\n      {/* Apple logo */}\n      <span\n        className=\"flex shrink-0 items-center pr-[8px]\"\n        aria-label=\"Apple menu\"\n      >\n        <svg\n          width=\"12\"\n          height=\"14\"\n          viewBox=\"0 0 12 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M9.5 4.8C9.5 4.8 8.2 3.6 6.8 3.6C5.9 3.6 5.3 4.0 4.8 4.0C4.3 4.0 3.6 3.6 2.8 3.6C1.4 3.6 0 4.9 0 7.1C0 8.4 0.5 9.8 1.1 10.7C1.7 11.5 2.2 12.1 2.9 12.1C3.5 12.1 3.9 11.7 4.7 11.7C5.6 11.7 5.8 12.1 6.5 12.1C7.2 12.1 7.7 11.4 8.2 10.7C8.7 10.0 8.9 9.3 8.9 9.2C8.9 9.2 7.3 8.5 7.3 6.7C7.3 5.2 8.5 4.5 8.6 4.4L9.5 4.8ZM6.3 3.0C6.7 2.5 7.0 1.8 7.0 1.1C7.0 1.0 7.0 0.8 7.0 0.7C6.3 0.8 5.5 1.2 5.1 1.7C4.7 2.2 4.4 2.8 4.4 3.5C4.4 3.6 4.4 3.8 4.4 3.8C4.5 3.8 4.5 3.8 4.6 3.8C5.2 3.8 5.9 3.4 6.3 3.0Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n\n      {/* Menu items (children) */}\n      <div\n        className={cn(\n          \"flex flex-1 items-center gap-[6px]\",\n          \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n          \"text-os9-black\"\n        )}\n      >\n        {children}\n      </div>\n\n      {/* Clock */}\n      {showClock && time && (\n        <span\n          className={cn(\n            \"shrink-0 pl-[8px]\",\n            \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98]\",\n            \"text-os9-black\"\n          )}\n        >\n          {time}\n        </span>\n      )}\n    </div>\n  )\n})\nRetroDesktopMenuBar.displayName = \"RetroDesktopMenuBar\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroDesktopArea                                                   */\n/* ------------------------------------------------------------------ */\n\ninterface RetroDesktopAreaProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Wallpaper variant.\n   * - \"default\" — plain os9-gray-200\n   * - \"pattern\" — subtle repeating dot pattern\n   */\n  wallpaper?: \"default\" | \"pattern\"\n}\n\nconst RetroDesktopArea = React.forwardRef<\n  HTMLDivElement,\n  RetroDesktopAreaProps\n>(({ className, wallpaper = \"default\", style, ...props }, ref) => {\n  const patternStyle: React.CSSProperties | undefined =\n    wallpaper === \"pattern\"\n      ? {\n          backgroundImage:\n            \"radial-gradient(circle, var(--os9-gray-400) 1px, transparent 1px)\",\n          backgroundSize: \"8px 8px\",\n          ...style,\n        }\n      : style\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex-1 overflow-hidden\",\n        \"bg-os9-gray-200\",\n        className\n      )}\n      style={patternStyle}\n      {...props}\n    />\n  )\n})\nRetroDesktopArea.displayName = \"RetroDesktopArea\"\n\n/* ------------------------------------------------------------------ */\n/*  RetroDesktopIcon                                                   */\n/* ------------------------------------------------------------------ */\n\ninterface RetroDesktopIconProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** The icon content — a ReactNode rendered in the 32x32 icon area. */\n  icon: React.ReactNode\n  /** The label displayed below the icon. */\n  label: string\n  /** Whether the icon is currently selected. */\n  selected?: boolean\n  /** Called when the icon is clicked / selected. */\n  onSelect?: () => void\n  /** Called when the icon is double-clicked. */\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>\n}\n\nconst RetroDesktopIcon = React.forwardRef<HTMLDivElement, RetroDesktopIconProps>(\n  (\n    {\n      icon,\n      label,\n      selected = false,\n      onSelect,\n      onDoubleClick,\n      onClick,\n      onKeyDown,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"button\"\n        tabIndex={0}\n        aria-pressed={selected}\n        className={cn(\n          \"flex w-[72px] cursor-default flex-col items-center gap-[2px] p-[4px]\",\n          \"outline-none\",\n          /* Focus ring */\n          \"focus-visible:ring-2 focus-visible:ring-os9-focus focus-visible:ring-offset-1\",\n          className\n        )}\n        {...props}\n        onClick={(e) => {\n          onClick?.(e)\n          if (!e.defaultPrevented) onSelect?.()\n        }}\n        onDoubleClick={onDoubleClick}\n        onKeyDown={(e) => {\n          onKeyDown?.(e)\n          if (e.defaultPrevented) return\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault()\n            onSelect?.()\n          }\n        }}\n      >\n        {/* Icon area */}\n        <div\n          className={cn(\n            \"flex h-[32px] w-[32px] items-center justify-center\",\n            selected && \"border border-os9-azul bg-os9-azul/20\"\n          )}\n        >\n          {icon}\n        </div>\n\n        {/* Label */}\n        <span\n          className={cn(\n            \"max-w-full px-[2px] text-center\",\n            \"font-[family-name:var(--os9-font-sans)] text-[9px] leading-[1.3]\",\n            \"line-clamp-2\",\n            selected\n              ? \"bg-os9-azul text-os9-white\"\n              : \"text-os9-black hover:bg-os9-lavender\"\n          )}\n        >\n          {label}\n        </span>\n      </div>\n    )\n  }\n)\nRetroDesktopIcon.displayName = \"RetroDesktopIcon\"\n\n/* ------------------------------------------------------------------ */\n/*  Exports                                                            */\n/* ------------------------------------------------------------------ */\n\nexport {\n  RetroDesktop,\n  RetroDesktopMenuBar,\n  RetroDesktopArea,\n  RetroDesktopIcon,\n}\n\nexport type { RetroDesktopMenuBarProps, RetroDesktopAreaProps, RetroDesktopIconProps }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}