{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tweet", "type": "registry:block", "title": "Tweet", "description": "X-style post card with optional 1-4 image grid (tweetImage1..4). Brand-voiced announcement that reads like a real public post, launch quote, founder update, or compact social claim. Avoid for generic product explainers.", "dependencies": [ "react" ], "registryDependencies": [ "@vanillasky/backgrounds", "@vanillasky/motion", "@vanillasky/theme", "@vanillasky/typography", "@vanillasky/video-config" ], "files": [ { "path": "src/lib/scene-templates/social-tweet.tsx", "type": "registry:component", "target": "vanillasky/scene-templates/social-tweet.tsx", "content": "/**\n * social-tweet β€” X-style post card on a media background.\n *\n * Card visuals + motion live in the TweetCard primitive\n * (src/lib/primitives/social/TweetCard.tsx). This template wires the\n * scene background + variable schema + primitive together.\n */\n\nimport * as React from \"react\";\nimport type { VariableField } from \"../video-config\";\nimport type { SceneTemplateProps } from \"./types\";\nimport { resolveTokens } from \"../theme\";\nimport { SceneBackground, getMediaBackgroundProps, mediaBackgroundSchemaFields, mediaBackgroundDefaults } from \"./scene-background\";\nimport { TweetCard, hashHue } from \"../primitives/social/TweetCard\";\n\nexport const socialTweetSchema: Record = {\n authorName: {\n type: \"string\",\n label: \"Author name\",\n default: \"Your brand\",\n required: true,\n description: \"Display name shown bold next to the verified checkmark.\",\n },\n authorHandle: {\n type: \"string\",\n label: \"Handle\",\n default: \"\",\n description: \"Username in @format. Leave empty to auto-derive from author name (e.g. 'Linear' β†’ '@linear').\",\n },\n authorVerified: {\n type: \"boolean\",\n label: \"Verified checkmark\",\n default: true,\n description: \"Show the blue verified checkmark next to the author name.\",\n },\n message: {\n type: \"string\",\n label: \"Tweet text\",\n default: \"Just shipped the new feature πŸš€\",\n required: true,\n description: \"The tweet/post content. Reads best at 1-3 lines (~80-180 chars). Emoji land naturally at the end of a phrase.\",\n },\n likes: {\n type: \"number\",\n label: \"Likes\",\n default: 602,\n description: \"Target like count (rolls up from 0).\",\n },\n replies: {\n type: \"number\",\n label: \"Replies\",\n default: 19,\n description: \"Target reply count (rolls up from 0).\",\n },\n ...mediaBackgroundSchemaFields,\n};\n\nexport const socialTweetDefaults: Record = {\n authorName: \"Your brand\",\n authorHandle: \"\",\n authorVerified: true,\n message: \"Just shipped the new feature πŸš€\",\n likes: 602,\n replies: 19,\n ...mediaBackgroundDefaults,\n};\n\nexport const SocialTweetTemplate: React.FC = ({\n variables,\n style,\n progress,\n beatIntensity,\n width,\n height,\n sceneDuration,\n isPlaying = true,\n backgroundEffect,\n}) => {\n const authorName = String(variables.authorName || \"Your brand\");\n const message = String(variables.message || \"\");\n // Per-author hashed hue is an intentional divergence from the canonical\n // accent fallback β€” routed through the resolver as accentFallback.\n const { accent } = resolveTokens(style, {\n accentFallback: `hsl(${hashHue(authorName)}, 60%, 55%)`,\n });\n const seed = (authorName + message).split(\"\").reduce((acc, c) => acc + c.charCodeAt(0), 0);\n\n /* Boolean field β€” but accept the legacy string \"false\" too in case a\n * saved scene wrote it as text before the type changed. */\n const verifiedRaw = variables.authorVerified;\n const isVerified =\n verifiedRaw === false || String(verifiedRaw ?? \"\").toLowerCase() === \"false\"\n ? false\n : true;\n\n return (\n \n {/* [slot: background] Gradient / media backdrop */}\n \n\n {/* [slot: hero] Tweet card β€” TweetCard primitive (post text is the\n content; no separate caption slot) */}\n \n \n );\n};\n" }, { "path": "src/lib/primitives/social/TweetCard.tsx", "type": "registry:component", "target": "vanillasky/primitives/social/TweetCard.tsx", "content": "/**\n * TweetCard\n *\n * X-style post card: avatar + name + verified + handle on the left, X logo\n * top-right, tweet text below, footer with comment + heart counter rolls.\n * Card scales in via spring; counters roll up from 0 over the back half.\n *\n * social-tweet.tsx is refactored to consume this primitive; both paths\n * render byte-identical DOM.\n */\n\nimport * as React from \"react\";\nimport { interpolate, spring, SPRING_SMOOTH } from \"../../motion\";\nimport { autoTextColor } from \"../../theme\";\nimport { stripPipe } from \"../../typography\";\nimport { renderWithEmoji } from \"../../emoji/emoji-text\";\n\nconst CLAMP = { extrapolateLeft: \"clamp\" as const, extrapolateRight: \"clamp\" as const };\n\nconst X = {\n cardBg: \"#16181c\",\n cardBorder: \"#2f3336\",\n text: \"rgb(230, 230, 230)\",\n muted: \"#71767b\",\n verified: \"#1d9bf0\",\n};\n\nexport function formatCount(n: number): string {\n // Boundary rule: never let the leading number reach 4 digits β€” promote\n // to the next unit. Without this, 999,999 likes rounded to \"1000K\"\n // (mathematically right but breaks the K-suffix convention). Each\n // branch double-checks the rounded value: if rounding would push it\n // β‰₯1000, fall through to the next unit so 999,500 ≀ n < 1,000,000\n // displays as \"1M\" not \"1000K\".\n const abs = Math.abs(n);\n const sign = n < 0 ? \"-\" : \"\";\n if (abs < 1_000) return n.toLocaleString();\n if (abs < 10_000) {\n const v = abs / 1_000;\n const rounded = Number(v.toFixed(1));\n if (rounded < 10) return `${sign}${rounded.toString().replace(/\\.0$/, \"\")}K`;\n // falls through to the integer-K branch\n }\n if (abs < 1_000_000) {\n const k = Math.round(abs / 1_000);\n if (k < 1_000) return `${sign}${k}K`;\n // falls through to M\n }\n if (abs < 10_000_000) {\n const v = abs / 1_000_000;\n const rounded = Number(v.toFixed(1));\n if (rounded < 10) return `${sign}${rounded.toString().replace(/\\.0$/, \"\")}M`;\n }\n if (abs < 1_000_000_000) {\n const m = Math.round(abs / 1_000_000);\n if (m < 1_000) return `${sign}${m}M`;\n }\n const v = abs / 1_000_000_000;\n return `${sign}${v.toFixed(1).replace(/\\.0$/, \"\")}B`;\n}\n\nexport function hashHue(str: string): number {\n let h = 0;\n for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) % 360;\n return h;\n}\n\nexport function deriveHandle(brandName: string): string {\n const slug = brandName.toLowerCase().replace(/[^a-z0-9]/g, \"\");\n return slug ? `@${slug}` : \"\";\n}\n\nconst XLogo: React.FC<{ size: number }> = ({ size }) => (\n \n \n \n);\n\nconst VerifiedBadge: React.FC<{ size: number }> = ({ size }) => (\n \n \n \n);\n\nconst CommentIcon: React.FC<{ size: number }> = ({ size }) => (\n \n \n \n);\n\nconst HeartIcon: React.FC<{ size: number }> = ({ size }) => (\n \n \n \n);\n\n// ─── Typed component (direct use from templates) ────────────────\n\nexport interface TweetCardProps {\n progress: number;\n authorName: string;\n authorHandle?: string;\n authorVerified?: boolean;\n message: string;\n /** Decorative engagement counter. Default 0 (counter just rolls to 0). */\n targetLikes?: number;\n /** Decorative engagement counter. Default 0. */\n targetReplies?: number;\n /** Avatar background tint (defaults to hashed hue of authorName) */\n accent?: string;\n width: number;\n height: number;\n beatIntensity?: number;\n}\n\nexport const TweetCard: React.FC = ({\n progress,\n authorName: rawName,\n authorHandle: rawHandle,\n authorVerified,\n message: rawMessage,\n targetLikes = 0,\n targetReplies = 0,\n accent,\n width,\n height,\n beatIntensity = 0,\n}) => {\n const dim = Math.min(width, height);\n const s = dim / 1080;\n const resolvedAccent = accent || `hsl(${hashHue(String(rawName))}, 60%, 55%)`;\n\n const authorName = stripPipe(rawName);\n const customHandle = stripPipe(rawHandle || \"\").trim();\n const authorHandle = customHandle || deriveHandle(authorName);\n const isVerified = authorVerified !== false;\n const message = stripPipe(rawMessage);\n\n const initialChar = authorName.charAt(0).toUpperCase() || \"β€’\";\n\n const cardScale = spring(interpolate(progress, [0, 0.24], [0, 1], CLAMP), SPRING_SMOOTH);\n const cardOpacity = interpolate(progress, [0, 0.18], [0, 1], CLAMP);\n const replyCount = Math.round(interpolate(progress, [0.30, 0.75], [0, targetReplies], CLAMP));\n const likeCount = Math.round(interpolate(progress, [0.35, 0.80], [0, targetLikes], CLAMP));\n const beatScale = 1 + beatIntensity * 0.01;\n\n const cardWidth = Math.min(width * 0.92, dim * 0.95);\n const cardPad = dim * 0.05;\n const cardRadius = dim * 0.026;\n const avatarSize = dim * 0.09;\n const xLogoSize = dim * 0.072;\n const verifiedSize = dim * 0.028;\n const nameFontSize = dim * 0.04;\n const handleFontSize = dim * 0.030;\n const messageFontSize = dim * 0.046;\n const footerIconSize = dim * 0.032;\n const footerFontSize = dim * 0.030;\n const headerToBodyGap = dim * 0.028;\n const bodyToFooterGap = dim * 0.032;\n\n return (\n \n \n
\n \n \n {initialChar}\n \n
\n\n
\n
\n \n {authorName}\n \n {isVerified && }\n
\n \n {authorHandle}\n \n
\n\n
\n \n
\n \n\n
\n {renderWithEmoji(message, messageFontSize)}\n
\n\n
\n
\n \n {formatCount(replyCount)}\n
\n
\n \n {formatCount(likeCount)}\n
\n
\n \n \n );\n};\n" }, { "path": "src/lib/emoji/emoji-text.tsx", "type": "registry:component", "target": "vanillasky/emoji/emoji-text.tsx", "content": "/**\n * EmojiText / renderWithEmoji β€” split a string into text runs + color-emoji\n * runs, rendering each color emoji as an inline emoji-PNG (via )\n * while leaving everything else as plain text.\n *\n * Why this exists: raw-unicode emoji fall through to the OS emoji font (Mac =\n * Apple, Linux = Noto), so the three render paths (preview / client SVG export\n * / server Puppeteer) disagree. Wrapping every template/AI-supplied string here\n * makes ALL color emoji render as the same mapped PNG in all three.\n *\n * What it does NOT touch: monochrome symbols (β˜… ✦ βœ“ β†’ ↑ …). Those render\n * identically as text across OSes, and imaging them would be wrong. The gate\n * is `emojiToDataUri()` β€” only clusters that resolve to a PNG in the\n * map become ; anything else (monochrome symbols, unmapped/custom\n * emoji, skin-tone variants not in the set) stays raw text.\n *\n * Segmentation: grapheme clusters via Intl.Segmenter so ZWJ sequences\n * (πŸ‘©β€πŸ’») and skin-tone modifiers (πŸ‘πŸ½) stay single units. Adjacent emoji\n * clusters each render as their own in sequence.\n *\n * Sizing: each emoji is sized to `fontSizePx` (the surrounding font\n * size) so the emoji box matches a glyph box β€” width/line-count stay\n * ~identical to the raw-text layout, which keeps fitTextSize / archetype\n * char-count measurement valid (all string-based, never DOM-measured).\n */\n\nimport * as React from \"react\";\nimport { Emoji, emojiToDataUri } from \"./index\";\n\n// Coarse \"is this cluster a color-emoji candidate?\" test. Deliberately broad:\n// the real decision is whether emojiToDataUri() resolves it to a mapped PNG.\n// This regex only needs to (a) catch the OS-divergent color ranges and (b)\n// avoid flagging plain text/whitespace so we don't merge text into emoji runs.\n//\n// - \\u{1F000}-\\u{1FAFF} β€” main emoji planes (most pictographs)\n// - \\u{2600}-\\u{27BF} β€” misc symbols + dingbats (color when + FE0F)\n// - \\u{2B00}-\\u{2BFF} β€” stars/arrows block (⭐ lives here)\n// - \\u{1F1E6}-\\u{1F1FF} β€” regional indicators (flags)\n// - \\u{1F3FB}-\\u{1F3FF} β€” skin-tone modifiers\n// - \\u{FE0F} | \\u{200D} | \\u{20E3} β€” VS16 / ZWJ / keycap combiners\n//\n// Combining/joiner codepoints (FE0F, ZWJ, keycap) are matched via alternation\n// rather than inside the character class β€” eslint's\n// no-misleading-character-class flags combining chars inside `[...]`, and\n// alternation is equivalent here (we only test, never capture).\nconst EMOJI_CANDIDATE =\n /[\\u{1F000}-\\u{1FAFF}\\u{2600}-\\u{27BF}\\u{2B00}-\\u{2BFF}\\u{1F1E6}-\\u{1F1FF}]|[\\u{1F3FB}-\\u{1F3FF}]|\\u{FE0F}|\\u{200D}|\\u{20E3}/u;\n\nfunction isEmojiCandidate(cluster: string): boolean {\n return EMOJI_CANDIDATE.test(cluster);\n}\n\n/** Split text into grapheme clusters (ZWJ + skin-tone safe). */\nfunction toGraphemes(text: string): string[] {\n const Seg = (Intl as unknown as { Segmenter?: typeof Intl.Segmenter }).Segmenter;\n if (Seg) {\n const seg = new Seg(undefined, { granularity: \"grapheme\" });\n const out: string[] = [];\n for (const { segment } of seg.segment(text)) out.push(segment);\n return out;\n }\n // Fallback: code-point spread. Won't keep ZWJ/skin-tone as single units, so\n // those land as separate clusters; emojiToDataUri's FE0F tolerance + the raw\n // fallback keep them from breaking. Modern browsers all have Segmenter.\n return Array.from(text);\n}\n\nexport interface RenderWithEmojiOptions {\n /** vertical-align passed to each . */\n verticalAlign?: React.CSSProperties[\"verticalAlign\"];\n /** Extra style merged onto each emoji . */\n emojiStyle?: React.CSSProperties;\n}\n\n/**\n * Split `text` into an array of React nodes β€” plain-text strings interleaved\n * with images for every mapped color emoji. Returns a single-element\n * `[text]` fast-path when there are no color emoji (the common case), so\n * non-emoji text pays ~one regex test.\n *\n * @param text the string to render\n * @param fontSizePx surrounding font size in px (emoji box = this size)\n */\nexport function renderWithEmoji(\n text: string,\n fontSizePx: number,\n opts?: RenderWithEmojiOptions,\n): React.ReactNode[] {\n if (!text) return [text];\n // Cheap bail-out: if the whole string has no emoji-range codepoint, return\n // it untouched (no segmentation, no array churn) β€” the hot path for the vast\n // majority of titles/bodies.\n if (!EMOJI_CANDIDATE.test(text)) return [text];\n\n const clusters = toGraphemes(text);\n const nodes: React.ReactNode[] = [];\n let textBuf = \"\";\n let key = 0;\n\n const flushText = () => {\n if (textBuf) {\n nodes.push(textBuf);\n textBuf = \"\";\n }\n };\n\n for (const cluster of clusters) {\n const uri = isEmojiCandidate(cluster) ? emojiToDataUri(cluster) : null;\n if (uri) {\n flushText();\n nodes.push(\n ,\n );\n } else {\n textBuf += cluster;\n }\n }\n flushText();\n return nodes;\n}\n\n/**\n * Per-code-unit emoji plan for the typewriter archetype, which reveals text\n * one UTF-16 code unit at a time and indexes by `text.length`. We can't just\n * call renderWithEmoji there (it would re-segment and desync the visibleChars\n * counter), so this maps each cluster's START code-unit index to its emoji-PNG\n * data URI and marks the cluster's CONTINUATION indices as covered (render\n * nothing for them β€” the start index's already spans the whole cluster).\n *\n * Returns null when the text contains no mapped color emoji (the common case),\n * so the typewriter render keeps its plain per-char path.\n */\nexport interface EmojiTypewriterPlan {\n /** code-unit index β†’ full emoji cluster char (cluster start). */\n starts: Map;\n /** code-unit indices that are continuations of a cluster (render nothing). */\n covered: Set;\n}\n\nexport function planTypewriterEmoji(text: string): EmojiTypewriterPlan | null {\n if (!text || !EMOJI_CANDIDATE.test(text)) return null;\n const starts = new Map();\n const covered = new Set();\n let idx = 0;\n let found = false;\n for (const cluster of toGraphemes(text)) {\n const len = cluster.length; // UTF-16 code units\n if (isEmojiCandidate(cluster) && emojiToDataUri(cluster)) {\n found = true;\n // Store the WHOLE cluster char (not just the start unit) so callers can\n // pass it straight to for a correct map lookup.\n starts.set(idx, cluster);\n for (let k = 1; k < len; k++) covered.add(idx + k);\n }\n idx += len;\n }\n return found ? { starts, covered } : null;\n}\n\nexport interface EmojiTextProps {\n /** The text to render, color emoji replaced with emoji-PNG . */\n children: string;\n /** Surrounding font size in px β€” sizes each emoji image to match a glyph. */\n fontSize: number;\n verticalAlign?: React.CSSProperties[\"verticalAlign\"];\n emojiStyle?: React.CSSProperties;\n}\n\n/**\n * Inline wrapper around renderWithEmoji. Renders a React.Fragment of text +\n * emoji runs. Use where a component currently renders a raw `{text}`\n * child and you have the surrounding font size in px.\n */\nexport const EmojiText: React.FC = ({\n children,\n fontSize,\n verticalAlign,\n emojiStyle,\n}) => {\n const text = typeof children === \"string\" ? children : \"\";\n return <>{renderWithEmoji(text, fontSize, { verticalAlign, emojiStyle })};\n};\n" }, { "path": "src/lib/emoji/index.tsx", "type": "registry:component", "target": "vanillasky/emoji/index.tsx", "content": "/**\n * Emoji β€” render emojis as inline PNG data-URI elements.\n *\n * Why images, not the system emoji font: VanillaSky renders the same scene\n * three ways β€” real-DOM preview, client SVG-as-image export, server Puppeteer.\n * Raw-unicode emojis fall through to whatever emoji font the OS has (Mac=Apple,\n * Linux=Noto), so preview and export disagree. Inlining each emoji as a\n * data-URI renders the SAME PNG in all three. Critically, the\n * client export rasterizes the frame via , which\n * can ONLY load inlined data-URI images (not @font-face, not external URLs) β€”\n * so data URIs are exactly what works there.\n *\n * Source artwork: emoji-datasource-google (Google Noto emoji set, Apache-2.0).\n * The map ships inside the publicly redistributed skill tarball, and Apple's\n * artwork is not licensed for redistribution β€” Noto's Apache-2.0 is. The set\n * is swappable via the generator's EMOJI_SET constant\n * (scripts/generate-emoji-map.mjs).\n *\n * Bundle: the generated charβ†’dataURI map is ~1.1MB of base64, so it is\n * LAZY-LOADED via dynamic import and never enters the initial app bundle. The\n * import is kicked off eagerly at module load (below) β€” long before any export\n * or screenshot β€” so by the time a frame is captured the map has resolved.\n * Until it resolves, renders the raw unicode char, then re-renders to\n * the image when the map lands. Any emoji not in the map also falls back to the\n * raw char, so nothing ever breaks for custom/unmapped emojis.\n */\n\nimport * as React from \"react\";\n\nlet EMOJI_MAP: Record | null = null;\nlet loadPromise: Promise> | null = null;\nconst subscribers = new Set<() => void>();\n\nfunction loadEmojiMap(): Promise> {\n if (loadPromise) return loadPromise;\n loadPromise = import(\"./emoji-map.generated\")\n .then((mod) => {\n EMOJI_MAP = mod.default;\n subscribers.forEach((fn) => fn());\n return EMOJI_MAP;\n })\n .catch((err) => {\n // Network/chunk failure: leave map null β†’ everything falls back to char.\n console.warn(\"[emoji] failed to load emoji map:\", err);\n EMOJI_MAP = {};\n return EMOJI_MAP;\n });\n return loadPromise;\n}\n\n// Kick off the load immediately when this module is first imported (app/registry\n// init), so the map is ready well before any export or server screenshot.\nloadEmojiMap();\n\n/**\n * Resolve once the emoji-PNG map has loaded (or definitively failed). Render\n * paths that capture frames MUST await this before their first capture so they\n * never screenshot a frame while emoji are still raw-unicode chars:\n * - server: Render.tsx awaits before setting window.__ready\n * - client export: export-video.ts awaits in the media-preload step\n * The preview path doesn't capture, so it can stay lazy (subscribers re-render\n * char β†’ image when the map lands). On chunk failure this resolves to {} so\n * the await never hangs β€” everything falls back to the raw char.\n */\nexport function ensureEmojiMap(): Promise> {\n return loadEmojiMap();\n}\n\n/**\n * Returns the emoji-PNG data URI for an emoji char, or null if the map hasn't\n * loaded yet or the char isn't in the set (caller should fall back to the char).\n */\nexport function emojiToDataUri(char: string): string | null {\n if (!EMOJI_MAP) return null;\n const key = (char || \"\").trim();\n if (EMOJI_MAP[key]) return EMOJI_MAP[key];\n // Tolerate a trailing variation selector mismatch (U+FE0F).\n const stripped = key.replace(/️/g, \"\");\n if (stripped !== key && EMOJI_MAP[stripped]) return EMOJI_MAP[stripped];\n return null;\n}\n\n/** Subscribe to map-loaded so a component re-renders char β†’ image when ready. */\nfunction useEmojiMapReady(): boolean {\n const [, force] = React.useReducer((n: number) => n + 1, 0);\n React.useEffect(() => {\n if (EMOJI_MAP) return;\n const fn = () => force();\n subscribers.add(fn);\n loadEmojiMap();\n return () => {\n subscribers.delete(fn);\n };\n }, []);\n return EMOJI_MAP != null;\n}\n\nexport interface EmojiProps {\n /** The emoji character(s), e.g. \"πŸŽ‰\". */\n char: string;\n /** Box size in px β€” matches the prior glyph's font-size so layout is identical. */\n size: number;\n /** vertical-align for inline flow. Defaults to a glyph-like baseline nudge. */\n verticalAlign?: React.CSSProperties[\"verticalAlign\"];\n /** Extra styles merged onto the (or fallback ). */\n style?: React.CSSProperties;\n}\n\n/**\n * Renders an emoji as an inline emoji-PNG when available, else the raw\n * unicode char in a same-size box (so scale/opacity/transform are unchanged).\n */\nexport const Emoji: React.FC = ({ char, size, verticalAlign = \"-0.15em\", style }) => {\n useEmojiMapReady();\n const uri = emojiToDataUri(char);\n\n if (!uri) {\n // Fallback: raw char sized to the same box so layout/scale are preserved.\n return (\n \n {char}\n \n );\n }\n\n return (\n \n );\n};\n" }, { "path": "src/lib/scene-templates/scene-background.tsx", "type": "registry:component", "target": "vanillasky/scene-templates/scene-background.tsx", "content": "/**\n * SceneBackground β€” shared backdrop component for any scene template that\n * wants to support both a brand-color gradient and stock media (Pexels\n * photo / video) as an alternate atmosphere.\n *\n * Usage:\n * \n * ... template's content layered on top\n *\n * Behavior:\n * - Brand gradient is the always-on backdrop (uses BrandGradientOverlay).\n * - When mediaUrl is set and mediaType isn't \"gradient\", the photo/video\n * covers the gradient. Vignette + bottom-half darken give the content\n * contrast against busy footage.\n * - mediaType=\"gradient\" deliberately ignores mediaUrl and renders only\n * the brand gradient. First-class atmospheric mode.\n * - When mediaUrl is empty / 404s / Pexels search returned nothing,\n * gradient shows through cleanly (matches every other gradient-backed\n * template).\n *\n * Extracted from bg-media.tsx so any template can compose it. bg-media\n * now uses this component too β€” its \"media is the scene\" identity comes\n * from how it positions the title (centered, full-frame), not from\n * duplicated render logic.\n */\n\nimport React, { useEffect, useRef } from \"react\";\nimport type { GlobalStyle, VariableField } from \"../video-config\";\nimport { BrandGradientOverlay } from \"../backgrounds\";\nimport { getBackgroundTransform } from \"../backgrounds\";\n\nconst VIDEO_EXTENSIONS = [\".mp4\", \".webm\", \".mov\", \".m4v\", \".avi\"];\n\nfunction isVideoUrl(url: string): boolean {\n try {\n const pathname = new URL(url).pathname.toLowerCase();\n return VIDEO_EXTENSIONS.some((ext) => pathname.endsWith(ext));\n } catch {\n const lower = url.toLowerCase();\n return VIDEO_EXTENSIONS.some((ext) => lower.endsWith(ext));\n }\n}\n\nexport type ResolvedMediaType = \"photo\" | \"video\" | \"gradient\";\n\nexport type MediaPosition = \"center\" | \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type MediaTreatment = \"subtle\" | \"cinematic\" | \"text-safe\";\n\nconst MEDIA_POSITIONS: Record = {\n center: \"center center\",\n top: \"center top\",\n bottom: \"center bottom\",\n left: \"left center\",\n right: \"right center\",\n};\n\nexport function resolveMediaPosition(value: string): string {\n return MEDIA_POSITIONS[value as MediaPosition] ?? MEDIA_POSITIONS.center;\n}\n\nexport function resolveMediaTreatment(value: string): MediaTreatment {\n return value === \"subtle\" || value === \"text-safe\" ? value : \"cinematic\";\n}\n\nexport interface MediaTreatmentLayer {\n id: \"vignette\" | \"full-wash\" | \"center-scrim\" | \"bottom-scrim\";\n background: string;\n style?: React.CSSProperties;\n}\n\n/** Export-safe contrast recipes. Overlays only: SVG capture cannot rely on CSS filters. */\nexport function getMediaTreatmentLayers(value: string): MediaTreatmentLayer[] {\n const treatment = resolveMediaTreatment(value);\n const vignette: MediaTreatmentLayer = {\n id: \"vignette\",\n background:\n treatment === \"subtle\"\n ? \"radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.28) 100%)\"\n : \"radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.75) 100%)\",\n };\n if (treatment === \"subtle\") return [vignette];\n\n const cinematic: MediaTreatmentLayer[] = [\n vignette,\n {\n id: \"center-scrim\",\n background:\n treatment === \"text-safe\"\n ? \"radial-gradient(ellipse 90% 56% at 50% 50%, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.18) 55%, transparent 84%)\"\n : \"radial-gradient(ellipse 85% 50% at 50% 50%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.10) 50%, transparent 80%)\",\n },\n {\n id: \"bottom-scrim\",\n background:\n treatment === \"text-safe\"\n ? \"linear-gradient(to top, rgba(0,0,0,0.68) 0%, transparent 100%)\"\n : \"linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%)\",\n style: { top: \"55%\" },\n },\n ];\n\n if (treatment === \"text-safe\") {\n cinematic.splice(1, 0, {\n id: \"full-wash\",\n background: \"rgba(0,0,0,0.30)\",\n });\n }\n return cinematic;\n}\n\nexport function resolveMediaType(\n mediaType: string,\n mediaUrl: string,\n): ResolvedMediaType {\n if (mediaType === \"gradient\") return \"gradient\";\n if (mediaType === \"video\") return \"video\";\n if (mediaType === \"photo\") return \"photo\";\n // \"auto\" β€” detect from URL extension\n return mediaUrl && isVideoUrl(mediaUrl) ? \"video\" : \"photo\";\n}\n\n/**\n * Standard schema fields any template can spread into its variableSchema\n * to enable media backgrounds. Keeps the field set + descriptions\n * consistent across templates.\n */\nexport const mediaBackgroundSchemaFields: Record = {\n mediaUrl: {\n type: \"media\",\n label: \"Background media\",\n description:\n \"Optional photo or video URL behind this scene. When set, replaces the brand gradient.\",\n },\n mediaKeyword: {\n type: \"string\",\n label: \"Background search keyword\",\n default: \"\",\n description:\n \"2-4 word English term for Pexels stock-footage search (auto-fills mediaUrl).\",\n },\n mediaType: {\n type: \"enum\",\n label: \"Background media type\",\n default: \"auto\",\n description:\n \"auto detects photo/video from URL. 'gradient' is a deliberate mode β€” atmospheric brand-color scene with no stock footage.\",\n options: [\"auto\", \"photo\", \"video\", \"gradient\"],\n },\n mediaPoster: {\n type: \"string\",\n label: \"Background poster image\",\n default: \"\",\n description:\n \"Still image URL shown while a video backdrop is decoding its first frame. Auto-filled from Pexels' thumbnail when fillPexelsUrls sets a video mediaUrl. Hides the gradient flash that would otherwise appear in the ~50–400ms gap between a