{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dk-bezeler", "title": "DKBezeler", "description": "Display components for DKBezeler's baked device frames: a framed still as a plain image, and the light and dark video versions swapped with CSS. Bake the assets with npx @diklein/dkbezeler.", "files": [ { "path": "registry/dk-bezeler/dk-bezeler.tsx", "content": "import type { ReactNode } from 'react'\n\n/* Display components for DKBezeler's baked outputs. Both are deliberately plain:\n * the bake did the hard part, so a framed still is just an image and a framed clip\n * is just a pair of videos. No dependencies, no client JS. */\n\nexport interface DKBezelImageProps {\n /** The baked -framed.png. */\n src: string\n alt?: string\n /** Intrinsic pixels of the baked PNG (dkbezeler prints them). Declaring them\n * reserves layout before the file arrives. */\n width: number\n height: number\n /** Display width cap. The bake is transparent outside the device, so it sits on\n * any background. */\n maxWidth?: number\n className?: string\n /** Render the image yourself (e.g. with next/image). */\n renderImage?: (src: string, ctx: { alt: string; className: string }) => ReactNode\n}\n\nexport function DKBezelImage({ src, alt, width, height, maxWidth = 460, className, renderImage }: DKBezelImageProps) {\n return (\n

\n )\n}\n\nexport interface DKBezelVideoProps {\n /** Base path of the baked pair: `${base}-light.mp4`, `${base}-dark.mp4` and the\n * matching .jpg posters, exactly as dkbezeler wrote them. */\n base: string\n /** Accessible label for the clip. */\n alt?: string\n /** Intrinsic pixels of the baked videos (dkbezeler prints them). Declares the\n * aspect ratio so the box holds its size before video metadata arrives (a bare\n *