{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "og-live-preview",
  "title": "OG Live Preview",
  "description": "CSS OG card preview with editable CONTENT presets.",
  "files": [
    {
      "path": "registry/default/blocks/og-live-preview.tsx",
      "content": "/**\n * CSS-only OG card preview. Edit CONTENT.presets or pass props.\n */\n\n/** Edit CONTENT for default title/subtitle/style. */\nconst CONTENT = {\n  title: \"Ship the product this week\",\n  subtitle: \"Fixed scope. Fixed price.\",\n  styleKey: \"paperQuote\" as const,\n  presets: {\n    paperQuote: {\n      previewGradient:\n        \"linear-gradient(145deg, #0a0a0a 0%, #111827 45%, #0b7bff22 100%)\",\n      safeZone: \"lowerThird\" as const,\n      palette: { title: \"#fafafa\", subtitle: \"#a3a3a3\" },\n      typography: { titleSizeMax: 72, subtitleSizeMax: 28, titleWeight: 700 },\n    },\n    boldSplit: {\n      previewGradient:\n        \"linear-gradient(90deg, #0b7bff 0%, #0b7bff 42%, #0a0a0a 42%)\",\n      safeZone: \"center\" as const,\n      palette: { title: \"#fafafa\", subtitle: \"#e5e5e5\" },\n      typography: { titleSizeMax: 64, subtitleSizeMax: 24, titleWeight: 700 },\n    },\n  },\n}\n\nexport type OgStyleKey = keyof typeof CONTENT.presets\n\nexport function OgLivePreview({\n  title = CONTENT.title,\n  subtitle = CONTENT.subtitle,\n  styleKey = CONTENT.styleKey,\n}: {\n  title?: string\n  subtitle?: string\n  styleKey?: OgStyleKey\n}) {\n  const preset = CONTENT.presets[styleKey] ?? CONTENT.presets.paperQuote\n  const zone = preset.safeZone\n\n  const alignItems = zone === \"center\" ? \"center\" : \"flex-start\"\n  const justifyContent = zone === \"lowerThird\" ? \"flex-end\" : \"center\"\n  const textAlign = zone === \"center\" ? \"center\" : \"left\"\n\n  const titleVW = `${Math.round((preset.typography.titleSizeMax / 1200) * 100)}cqi`\n  const subVW = `${Math.round((preset.typography.subtitleSizeMax / 1200) * 100)}cqi`\n\n  return (\n    <div\n      aria-hidden\n      className=\"@container absolute inset-0 flex\"\n      style={{ background: preset.previewGradient }}\n    >\n      <div\n        className=\"flex w-full flex-col\"\n        style={{\n          padding: `${(60 / 630) * 100}% ${(80 / 1200) * 100}%`,\n          alignItems,\n          justifyContent,\n          textAlign,\n        }}\n      >\n        <div\n          className=\"flex w-full flex-col\"\n          style={{\n            alignItems: zone === \"center\" ? \"center\" : \"flex-start\",\n            maxWidth: zone === \"center\" ? \"80%\" : \"73%\",\n          }}\n        >\n          <div\n            style={{\n              color: preset.palette.title,\n              fontFamily:\n                \"var(--font-outfit), var(--font-fraunces), system-ui, sans-serif\",\n              fontWeight: preset.typography.titleWeight,\n              fontSize: titleVW,\n              lineHeight: 1.04,\n              letterSpacing: \"-0.02em\",\n              whiteSpace: \"pre-wrap\",\n              textAlign,\n            }}\n          >\n            {title || \"Your title lands here.\"}\n          </div>\n          {(subtitle || !title) && (\n            <div\n              style={{\n                color: preset.palette.subtitle,\n                fontFamily: \"var(--font-outfit), system-ui, sans-serif\",\n                fontWeight: 500,\n                fontSize: subVW,\n                lineHeight: 1.35,\n                letterSpacing: \"-0.005em\",\n                whiteSpace: \"pre-wrap\",\n                textAlign,\n                marginTop: \"2.5%\",\n              }}\n            >\n              {subtitle || \"Optional subtitle for context.\"}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/og-live-preview.tsx"
    }
  ],
  "type": "registry:block"
}