{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mac-studio-display",
  "title": "Mac Studio Display",
  "description": "Front-facing Apple Studio Display device frame with slim black bezel, aluminum stand, and foot - empty transparent screen by default; optional children slot.",
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/new-york/blocks/mac-studio-display/page.tsx",
      "content": "import MacStudioDisplay from \"./components/mac-studio-display\"\n\nexport default function Page() {\n  return (\n    <div className=\"px-4 py-4 md:px-6 md:py-6\">\n      <MacStudioDisplay />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/mac-studio-display/page.tsx"
    },
    {
      "path": "registry/new-york/blocks/mac-studio-display/components/mac-studio-display.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\nimport MacStudioDisplayStand from \"./mac-studio-display-stand\"\nimport StudioDisplayScreen, {\n  type StudioDisplayScreenProps,\n} from \"./studio-display-screen\"\n\nimport \"../styles/mac-studio-display.css\"\n\ntype MacStudioDisplayProps = {\n  className?: string\n} & Omit<StudioDisplayScreenProps, \"className\">\n\nexport default function MacStudioDisplay({\n  className,\n  minHeight,\n  aspectRatio = \"16 / 9\",\n  children,\n}: MacStudioDisplayProps) {\n  return (\n    <div\n      className={cn(\n        \"msd-root mx-auto flex w-full max-w-3xl min-w-0 flex-col items-center drop-shadow-(--msd-shell-shadow)\",\n        className\n      )}\n      role=\"img\"\n      aria-label=\"Mac Studio Display device frame mockup\"\n    >\n      <div className=\"relative z-1 w-full\">\n        <div className=\"msd-frame rounded-xl p-1 pb-0.5\">\n          <div className=\"relative overflow-hidden rounded-[0.625rem] bg-transparent\">\n            <span\n              className=\"msd-camera absolute top-0.5 left-1/2 z-2 block size-1.5 -translate-x-1/2 rounded-full\"\n              aria-hidden\n            />\n            <StudioDisplayScreen minHeight={minHeight} aspectRatio={aspectRatio}>\n              {children}\n            </StudioDisplayScreen>\n          </div>\n        </div>\n      </div>\n\n      <MacStudioDisplayStand />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/mac-studio-display/components/mac-studio-display.tsx"
    },
    {
      "path": "registry/new-york/blocks/mac-studio-display/components/studio-display-screen.tsx",
      "content": "import type { CSSProperties, ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type StudioDisplayScreenProps = {\n  className?: string\n  minHeight?: string | number\n  aspectRatio?: string\n  children?: ReactNode\n}\n\nexport default function StudioDisplayScreen({\n  className,\n  minHeight = \"15rem\",\n  aspectRatio,\n  children,\n}: StudioDisplayScreenProps) {\n  const style = {\n    ...(aspectRatio ? { aspectRatio } : {}),\n    minHeight: typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n  } satisfies CSSProperties\n\n  return (\n    <div\n      className={cn(\n        \"relative z-1 box-border w-full overflow-hidden rounded-md border-10 border-(--msd-bezel) bg-(--msd-screen)\",\n        className\n      )}\n      style={style}\n    >\n      {children ? (\n        <div className=\"msd-screen-slot absolute inset-0 flex size-full overflow-hidden\">\n          {children}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/mac-studio-display/components/studio-display-screen.tsx"
    },
    {
      "path": "registry/new-york/blocks/mac-studio-display/components/mac-studio-display-stand.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\ntype MacStudioDisplayStandProps = {\n  className?: string\n}\n\nexport default function MacStudioDisplayStand({\n  className,\n}: MacStudioDisplayStandProps) {\n  const clipId = \"msd-stand-clip\"\n\n  return (\n    <div\n      className={cn(\n        \"msd-stand relative z-0 -mt-px flex w-[24%] max-w-52 min-w-28 flex-col items-stretch\",\n        className\n      )}\n      aria-hidden\n    >\n      <svg className=\"absolute size-0 overflow-hidden\" aria-hidden>\n        <defs>\n          <clipPath\n            id={clipId}\n            clipPathUnits=\"objectBoundingBox\"\n          >\n            <path d=\"M 0 0 L 0.32 0 A 0.18 0.24 0 0 0 0.68 0 L 1 0 L 1 1 L 0 1 Z\" />\n          </clipPath>\n        </defs>\n      </svg>\n\n      <div\n        className=\"msd-stand-arm relative h-24 w-full\"\n        style={{ clipPath: `url(#${clipId})` }}\n      >\n        <span className=\"msd-stand-arm-bezel\" aria-hidden />\n      </div>\n\n      <div className=\"msd-stand-foot relative h-3 w-full rounded-b-sm\" />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/mac-studio-display/components/mac-studio-display-stand.tsx"
    },
    {
      "path": "registry/new-york/blocks/mac-studio-display/styles/mac-studio-display.css",
      "content": "/* mac-studio-display — silver aluminum theme tokens, frame/stand gradients, camera pseudo-elements */\n\n.msd-root {\n  --msd-silver-light: #e9e9eb;\n  --msd-silver-mid: #d4d4d7;\n  --msd-silver-dark: #b9b9be;\n  --msd-silver-deep: #97979d;\n  --msd-bezel: #060608;\n  --msd-screen: #141416;\n  --msd-frame-highlight: rgb(255 255 255 / 0.7);\n  --msd-frame-shadow: rgb(0 0 0 / 0.18);\n  --msd-shell-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.28);\n  --msd-shell-ring: rgb(0 0 0 / 0.14);\n}\n\n.dark .msd-root {\n  --msd-shell-shadow: 0 28px 56px -16px rgb(0 0 0 / 0.55);\n  --msd-shell-ring: rgb(255 255 255 / 0.1);\n}\n\n.msd-frame {\n  background: linear-gradient(\n    180deg,\n    var(--msd-silver-light) 0%,\n    var(--msd-silver-mid) 55%,\n    var(--msd-silver-dark) 100%\n  );\n  box-shadow:\n    inset 0 1px 0 var(--msd-frame-highlight),\n    inset 0 -1px 0 var(--msd-frame-shadow),\n    0 0 0 1px var(--msd-shell-ring);\n}\n\n.msd-camera {\n  background: radial-gradient(\n    circle at 38% 32%,\n    #2e2e38 0%,\n    #17171e 42%,\n    #0a0a0e 78%,\n    #050507 100%\n  );\n  box-shadow:\n    0 0 0 1px rgb(0 0 0 / 0.7),\n    inset 0 1px 1.5px rgb(0 0 0 / 0.6),\n    inset 0 -0.5px 0 rgb(255 255 255 / 0.05);\n}\n\n.msd-camera::before {\n  content: \"\";\n  position: absolute;\n  inset: 22%;\n  border-radius: 50%;\n  background: radial-gradient(circle at 40% 35%, #181820 0%, #08080c 100%);\n  box-shadow: inset 0 0 1px rgb(0 0 0 / 0.8);\n}\n\n.msd-camera::after {\n  content: \"\";\n  position: absolute;\n  top: 22%;\n  left: 30%;\n  width: 28%;\n  height: 28%;\n  border-radius: 50%;\n  background: radial-gradient(\n    circle at 50% 50%,\n    rgb(255 255 255 / 0.35) 0%,\n    rgb(255 255 255 / 0.08) 55%,\n    transparent 100%\n  );\n}\n\n.msd-stand-arm {\n  background:\n    linear-gradient(180deg, rgb(0 0 0 / 0.08) 0%, rgb(0 0 0 / 0) 35%),\n    linear-gradient(\n      90deg,\n      var(--msd-silver-deep) 0%,\n      var(--msd-silver-mid) 4%,\n      var(--msd-silver-light) 16%,\n      var(--msd-silver-light) 84%,\n      var(--msd-silver-mid) 96%,\n      var(--msd-silver-deep) 100%\n    );\n  box-shadow: inset 0 10px 10px -6px rgb(0 0 0 / 0.32);\n}\n\n/* Bottom bezel depth — front face of the arm's thickness */\n.msd-stand-arm-bezel {\n  position: absolute;\n  right: -2%;\n  bottom: 0;\n  left: -2%;\n  z-index: 1;\n  height: 14%;\n  background: linear-gradient(\n    180deg,\n    rgb(0 0 0 / 0.28) 0%,\n    rgb(0 0 0 / 0.14) 1px,\n    var(--msd-silver-light) 2px,\n    var(--msd-silver-mid) 50%,\n    var(--msd-silver-dark) 100%\n  );\n  box-shadow:\n    inset 0 1.5px 0 rgb(255 255 255 / 0.55),\n    inset 0 -1.5px 2px rgb(0 0 0 / 0.14);\n  pointer-events: none;\n}\n\n.msd-stand-foot {\n  margin-top: -1px;\n  border-radius: 0 0 3px 3px;\n  background:\n    linear-gradient(\n      90deg,\n      rgb(0 0 0 / 0.16) 0%,\n      rgb(0 0 0 / 0) 5%,\n      rgb(0 0 0 / 0) 95%,\n      rgb(0 0 0 / 0.16) 100%\n    ),\n    linear-gradient(\n      180deg,\n      var(--msd-silver-light) 0%,\n      var(--msd-silver-mid) 55%,\n      var(--msd-silver-deep) 100%\n    );\n  box-shadow:\n    inset 0 1px 0 rgb(255 255 255 / 0.35),\n    inset 0 -1.5px 1px rgb(0 0 0 / 0.24),\n    0 1px 2px rgb(0 0 0 / 0.18);\n}\n\n.msd-screen-slot > * {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n",
      "type": "registry:file",
      "target": "app/mac-studio-display/styles/mac-studio-display.css"
    }
  ],
  "type": "registry:block"
}