@vanillaskyai/video 0.1.0

package/registry/items/beforeAfter.json

@@ -0,0 +1,180 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "beforeAfter",
+  "type": "registry:block",
+  "title": "Before and after",
+  "description": "Two contrasting states trade places in a split transformation layout.",
+  "dependencies": [
+    "react"
+  ],
+  "registryDependencies": [
+    "@vanillasky/backgrounds",
+    "@vanillasky/motion",
+    "@vanillasky/theme",
+    "@vanillasky/typography",
+    "@vanillasky/template-context"
+  ],
+  "files": [
+    {
+      "path": "src/visual-system/scene-templates/infographic-before-after.tsx",
+      "type": "registry:component",
+      "target": "vanillasky/scene-templates/infographic-before-after.tsx",
+      "content": "/**\n * infographic-before-after — emoji-driven before/after contrast.\n *\n * Layout: a centered \"BEFORE\" / \"AFTER\" pill label sits above the\n * centered headline text; emojis distribute across the FULL frame\n * around the central text zone (top band, sides, bottom band). Pill\n * styling matches problemSolution — same shape, scale-pop entry, just\n * BEFORE/AFTER wording with a red→green color shift.\n *\n * Two phases on a brand-color gradient:\n *  1. Before phase: red BEFORE pill + problem headline + scattered\n *     problem emojis with chaos jitter.\n *  2. Transition: problem emojis fall off-screen with gravity (confetti-\n *     style drop) while the pill + headline crossfade.\n *  3. After phase: green AFTER pill + solution headline + solution\n *     emojis pop in with a happy bounce in the same slots.\n *\n * Pick this for symbolic before/after content where the emojis tell the\n * story; `problemSolution` for full-statement text contrast.\n *\n * Block structure (docs/blocks.md):\n *   background — brand gradient (gradientBackground)\n *   hero       — BeforeAfterSplit primitive (both phases: pills, headlines,\n *                emoji scatter/fall/pop — text integral, no caption slot)\n */\n\nimport React from \"react\";\nimport { parseList } from \"../parse-list\";\nimport type { SceneTemplateProps } from \"./types\";\nimport { resolveTokens } from \"../theme\";\nimport { gradientBackground } from \"../backgrounds\";\nimport { BeforeAfterSplit } from \"../primitives/infographic/BeforeAfterSplit\";\n\nexport const InfographicBeforeAfterTemplate: React.FC<SceneTemplateProps> = ({\n  variables,\n  style,\n  progress,\n  beatIntensity,\n  width,\n  height,\n  textArchetype,\n  safeZone,\n  sceneDuration,\n}) => {\n  const { background, foreground, font } = resolveTokens(style);\n  const textColor = foreground;\n\n  const problemHeadline = String(variables.problemHeadline || \"\");\n  const solutionHeadline = String(variables.solutionHeadline || \"\");\n  const problemTypes = parseList(variables.problemEmojis);\n  const solutionTypes = parseList(variables.solutionEmojis);\n  const showEmojis = variables.showEmojis !== false && String(variables.showEmojis ?? \"true\").toLowerCase() !== \"false\";\n\n  const gradSeed = (problemHeadline + solutionHeadline)\n    .split(\"\")\n    .reduce((acc, c) => acc + c.charCodeAt(0), 0);\n\n  // textArchetype is intentionally unused — this template uses the\n  // problemSolution-style direct text rendering instead of TemplateText.\n  void textArchetype;\n  void safeZone;\n\n  return (\n    <div\n      style={{\n        width,\n        height,\n        backgroundColor: \"#000\",\n        position: \"relative\",\n        overflow: \"hidden\",\n        fontFamily: font,\n      }}\n    >\n      {/* [slot: background] Brand-color gradient */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: gradientBackground({\n            colorA: background.type === \"solid\" ? background.color : background.colors[0],\n            colorB: background.type === \"solid\" ? background.color : background.colors[1],\n            solidBg: background.type === \"solid\" ? background.color : undefined,\n            progress,\n            sceneDuration,\n            seed: gradSeed,\n            family: resolveTokens(style).preset.background,\n          }),\n          pointerEvents: \"none\",\n        }}\n      />\n\n      {/* [slot: hero] Two-phase before/after reveal — shared primitive */}\n      <BeforeAfterSplit\n        progress={progress}\n        width={width}\n        height={height}\n        problemHeadline={problemHeadline}\n        solutionHeadline={solutionHeadline}\n        problemEmojis={problemTypes}\n        solutionEmojis={solutionTypes}\n        showEmojis={showEmojis}\n        beforeLabel={String(variables.problemLabel || \"\")}\n        afterLabel={String(variables.solutionLabel || \"\")}\n        textColor={textColor}\n        font={font}\n        beatIntensity={beatIntensity}\n      />\n    </div>\n  );\n};\n"
+    },
+    {
+      "path": "src/visual-system/primitives/infographic/BeforeAfterSplit.tsx",
+      "type": "registry:component",
+      "target": "vanillasky/primitives/infographic/BeforeAfterSplit.tsx",
+      "content": "/**\n * BeforeAfterSplit\n * The template composes this component (the\n * brand gradient stays in the template), so the two can no longer drift.\n *\n * Two-phase before/after reveal. Before phase: red BEFORE pill +\n * problem headline + scrambled emoji scatter with chaos jitter. Mid-\n * scene the emojis fall like confetti while pill+headline crossfade.\n * After phase: green AFTER pill + solution headline + solution emojis\n * pop in with a happy bounce.\n *\n * Gradient background is NOT included — paint that with SceneBackground\n * above this primitive. The optional `beforeUrl` / `afterUrl` props let\n * a consumer paint a media still behind the corresponding phase (e.g. a\n * before screenshot vs after screenshot); when omitted the emoji\n * scatter carries the contrast on its own.\n */\n\nimport * as React from \"react\";\nimport {\n  interpolate,\n  spring,\n  type SpringConfig,\n} from \"../../motion\";\nimport { smoothSize } from \"../../scene-templates/template-text\";\nimport { stripPipe } from \"../../typography\";\nimport { Emoji } from \"../../emoji\";\nimport { renderWithEmoji } from \"../../emoji/emoji-text\";\nimport { TOKEN_DEFAULTS } from \"../../theme\";\n\nconst SPRING_POP: SpringConfig = { damping: 6, stiffness: 250 };\nconst SPRING_HAPPY: SpringConfig = { damping: 9, stiffness: 220 };\nconst SPRING_TEXT: SpringConfig = { damping: 10, stiffness: 150 };\n\n// 16 deterministic scatter slots framing the central text zone.\nconst POSITIONS = [\n  { x: 0.06, y: 0.06 }, { x: 0.30, y: 0.10 }, { x: 0.62, y: 0.07 }, { x: 0.92, y: 0.09 },\n  { x: 0.08, y: 0.26 }, { x: 0.92, y: 0.24 }, { x: 0.04, y: 0.40 }, { x: 0.96, y: 0.42 },\n  { x: 0.04, y: 0.62 }, { x: 0.96, y: 0.60 },\n  { x: 0.10, y: 0.78 }, { x: 0.34, y: 0.82 }, { x: 0.66, y: 0.80 }, { x: 0.90, y: 0.78 },\n  { x: 0.22, y: 0.92 }, { x: 0.78, y: 0.94 },\n];\nconst ROTATIONS = [-12, 8, -5, 15, -8, 10, -15, 6, -10, 12, -6, 14, -9, 7, -13, 11];\nconst POP_ORDER = [7, 12, 3, 9, 0, 14, 5, 11, 2, 8, 15, 4, 10, 1, 13, 6];\nconst FALL_SWAY = [0.7, -1.0, 0.4, -0.6, 0.9, -0.3, 0.5, -0.8, 0.6, -0.5, 0.3, -0.9, 0.8, -0.4, 0.2, -0.7];\n\n// ─── Typed component (direct use from templates) ────────────────\n\n/**\n * Props for BeforeAfterSplit.\n *\n * - `progress` (required): scene progress 0→1 driving both phases.\n * - `width` / `height` (required): scene viewport. Drives the emoji-\n *   scatter zone and orientation-aware text scaling.\n * - `problemHeadline` (required): the BEFORE headline, 2-5 words.\n *   Centered beneath the BEFORE pill. Pipe suffixes stripped.\n * - `solutionHeadline` (required): the AFTER headline, 2-5 words.\n *   Centered beneath the AFTER pill. Pipe suffixes stripped.\n * - `problemEmojis` (optional): emoji glyphs cycled across 16 scatter\n *   slots during the before phase. Defaults to `[\"📅\", \"😰\"]` if empty.\n * - `solutionEmojis` (optional): emoji glyphs cycled across 16 scatter\n *   slots during the after phase. Defaults to `[\"✨\", \"✅\"]` if empty.\n * - `beforeLabel` (optional, default `\"BEFORE\"`): uppercase pill text\n *   shown during the before phase.\n * - `afterLabel` (optional, default `\"AFTER\"`): uppercase pill text\n *   shown during the after phase.\n * - `beforeUrl` (optional): when present, painted as a cover-fit\n *   image behind the before phase (replaces nothing — sits behind the\n *   emojis + pill + headline so the emojis still tell the story).\n * - `afterUrl` (optional): same but for the after phase.\n * - `textColor` (optional, default `#ffffff`): headline color.\n * - `font` (optional, default `Inter`).\n * - `beatIntensity` (optional, default `0`): drives a small per-emoji\n *   beat-pulse on both phases.\n */\nexport interface BeforeAfterSplitProps {\n  progress: number;\n  width: number;\n  height: number;\n  problemHeadline: string;\n  solutionHeadline: string;\n  problemEmojis?: string[];\n  solutionEmojis?: string[];\n  showEmojis?: boolean;\n  beforeLabel?: string;\n  afterLabel?: string;\n  beforeUrl?: string;\n  afterUrl?: string;\n  textColor?: string;\n  font?: string;\n  beatIntensity?: number;\n}\n\nexport const BeforeAfterSplit: React.FC<BeforeAfterSplitProps> = ({\n  progress,\n  width,\n  height,\n  problemHeadline: rawProblemHeadline,\n  solutionHeadline: rawSolutionHeadline,\n  problemEmojis: rawProblemEmojis = [],\n  solutionEmojis: rawSolutionEmojis = [],\n  showEmojis = true,\n  beforeLabel = \"BEFORE\",\n  afterLabel = \"AFTER\",\n  beforeUrl,\n  afterUrl,\n  textColor = \"#ffffff\",\n  font = TOKEN_DEFAULTS.font,\n  beatIntensity = 0,\n}) => {\n  const s = Math.min(width, height) / 1080;\n\n  const problemLabel = String(beforeLabel || \"BEFORE\").toUpperCase();\n  const solutionLabel = String(afterLabel || \"AFTER\").toUpperCase();\n  const problemHeadline = stripPipe(String(rawProblemHeadline || \"\"));\n  const solutionHeadline = stripPipe(String(rawSolutionHeadline || \"\"));\n  const problemTypes = showEmojis ? rawProblemEmojis.filter((e) => (e || \"\").length > 0) : [];\n  const solutionTypes = showEmojis ? rawSolutionEmojis.filter((e) => (e || \"\").length > 0) : [];\n  if (showEmojis && problemTypes.length === 0) problemTypes.push(\"📅\", \"😰\");\n  if (showEmojis && solutionTypes.length === 0) solutionTypes.push(\"✨\", \"✅\");\n\n  const beforeColor = \"#ef4444\";\n  const afterColor = \"#22c55e\";\n\n  const SLOT_COUNT = POSITIONS.length;\n  const problemEmojis = showEmojis\n    ? Array.from({ length: SLOT_COUNT }, (_, i) => problemTypes[POP_ORDER[i] % problemTypes.length])\n    : [];\n  const solutionEmojis = showEmojis\n    ? Array.from({ length: SLOT_COUNT }, (_, i) => solutionTypes[POP_ORDER[i] % solutionTypes.length])\n    : [];\n\n  // ── Phase windows ────────────────────────────────────────────\n  const PROBLEM_BASE = 0.05;\n  const PROBLEM_STAGGER = 0.010;\n  const FALL_START = 0.35;\n  const FALL_END = 0.50;\n  const HEADLINE_FADE = [0.40, 0.50] as const;\n  const SOLUTION_BASE = 0.50;\n  const SOLUTION_STAGGER = 0.008;\n\n  const problemHeadlineMask = 1 - interpolate(progress, [HEADLINE_FADE[0], HEADLINE_FADE[1]], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n  const solutionHeadlineMask = interpolate(progress, [HEADLINE_FADE[0] + 0.05, HEADLINE_FADE[1] + 0.05], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  // ── Layout ───────────────────────────────────────────────────\n  const emojiFontSize = Math.min(72 * s, width * 0.085);\n  const emojiHalf = emojiFontSize / 2;\n  const padX = emojiHalf + 8 * s;\n  const padY = emojiHalf + 8 * s;\n  const zoneTop = padY;\n  const zoneLeft = padX;\n  const zoneWidth = width - padX * 2;\n  const zoneHeight = height - padY * 2;\n\n  const labelFontSize = 32 * s;\n  const pillTop = height * 0.38;\n  const textTop = height * 0.46;\n  const longerChars = Math.max(problemHeadline.length, solutionHeadline.length, 1);\n  const mainSize = smoothSize(longerChars, 70, 88, 60) * s;\n\n  const problemTextP = spring(\n    interpolate(progress, [0.10, 0.25], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" }),\n    SPRING_TEXT,\n  );\n  const problemTextScale = interpolate(problemTextP, [0, 1], [1.4, 1]);\n  const problemTextOpacity = interpolate(progress, [0.10, 0.20], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" });\n\n  const solutionTextP = spring(\n    interpolate(progress, [0.55, 0.70], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" }),\n    SPRING_TEXT,\n  );\n  const solutionTextScale = interpolate(solutionTextP, [0, 1], [1.4, 1]);\n  const solutionTextOpacity = interpolate(progress, [0.55, 0.65], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" });\n\n  return (\n    <>\n      {/* Optional before media — painted behind the before phase scatter */}\n      {beforeUrl ? (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            opacity: problemHeadlineMask * 0.6,\n            backgroundImage: `url(${beforeUrl})`,\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            pointerEvents: \"none\",\n          }}\n        />\n      ) : null}\n\n      {/* Optional after media */}\n      {afterUrl ? (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            opacity: solutionHeadlineMask * 0.6,\n            backgroundImage: `url(${afterUrl})`,\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n            pointerEvents: \"none\",\n          }}\n        />\n      ) : null}\n\n      {/* Problem emojis — scrambled fast pop, jitter, then gravity-fall */}\n      {problemEmojis.map((emoji, i) => {\n        const pos = POSITIONS[i];\n        const rotation = ROTATIONS[i];\n        const popRank = POP_ORDER[i];\n        const sway = FALL_SWAY[i];\n        const cx = zoneLeft + pos.x * zoneWidth;\n        const cy = zoneTop + pos.y * zoneHeight;\n\n        const popDelay = PROBLEM_BASE + popRank * PROBLEM_STAGGER;\n        const popP = spring(\n          interpolate(progress, [popDelay, popDelay + 0.10], [0, 1], {\n            extrapolateLeft: \"clamp\",\n            extrapolateRight: \"clamp\",\n          }),\n          SPRING_POP,\n        );\n        const emojiScale = interpolate(popP, [0, 1], [0, 1]);\n\n        const settled = popP > 0.5;\n        const inFall = progress >= FALL_START;\n        const shakePhase = progress * 50;\n        const shakeX = settled && !inFall ? Math.sin(shakePhase + i * 1.7) * 7 * s : 0;\n        const shakeY = settled && !inFall ? Math.cos(shakePhase + i * 2.3) * 5 * s : 0;\n        const shakeRotate = settled && !inFall\n          ? rotation + Math.sin(shakePhase * 0.7 + i * 3.1) * 9\n          : rotation;\n\n        const fallProgress = interpolate(progress, [FALL_START, FALL_END], [0, 1], {\n          extrapolateLeft: \"clamp\",\n          extrapolateRight: \"clamp\",\n        });\n        const fallY = fallProgress * fallProgress * height * 1.3;\n        const fallSwayX = Math.sin(fallProgress * Math.PI * 2 + i * 0.7) * 30 * s * sway;\n        const fallRotate = fallProgress * (180 + (i % 5) * 60) * (i % 2 === 0 ? 1 : -1);\n\n        const fadeOut = interpolate(progress, [FALL_END - 0.02, FALL_END + 0.02], [1, 0], {\n          extrapolateLeft: \"clamp\",\n          extrapolateRight: \"clamp\",\n        });\n\n        const beatPulse = 1 + beatIntensity * 0.04 * ((i % 2 === 0) ? 1 : -0.5);\n\n        return (\n          <div\n            key={`problem-${i}`}\n            style={{\n              position: \"absolute\",\n              left: cx - emojiHalf,\n              top: cy - emojiHalf,\n              width: emojiFontSize,\n              height: emojiFontSize,\n              fontSize: emojiFontSize,\n              lineHeight: 1,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              opacity: fadeOut,\n              transform: `translate(${shakeX + fallSwayX}px, ${shakeY + fallY}px) rotate(${shakeRotate + fallRotate}deg) scale(${emojiScale * beatPulse})`,\n              transformOrigin: \"center center\",\n              pointerEvents: \"none\",\n            }}\n          >\n            <Emoji char={emoji} size={emojiFontSize} verticalAlign=\"baseline\" />\n          </div>\n        );\n      })}\n\n      {/* Solution emojis — scrambled happy bouncy pop in same slots */}\n      {solutionEmojis.map((emoji, i) => {\n        const pos = POSITIONS[i];\n        const popRank = POP_ORDER[i];\n        const cx = zoneLeft + pos.x * zoneWidth;\n        const cy = zoneTop + pos.y * zoneHeight;\n\n        const popDelay = SOLUTION_BASE + popRank * SOLUTION_STAGGER;\n        const popP = spring(\n          interpolate(progress, [popDelay, popDelay + 0.14], [0, 1], {\n            extrapolateLeft: \"clamp\",\n            extrapolateRight: \"clamp\",\n          }),\n          SPRING_HAPPY,\n        );\n        const emojiScale = interpolate(popP, [0, 1], [0, 1]);\n        const liftY = (1 - Math.min(1, popP)) * 14 * s;\n\n        const settled = popP > 0.95;\n        const breathe = settled\n          ? 1 + Math.sin(progress * Math.PI * 4 + i * 0.9) * 0.015\n          : 1;\n\n        const exitP = interpolate(progress, [0.90, 1.0], [0, 1], {\n          extrapolateLeft: \"clamp\",\n          extrapolateRight: \"clamp\",\n        });\n        const exitFade = 1 - exitP;\n        const exitLift = exitP * -20 * s;\n        const exitShrink = 1 - exitP * 0.06;\n\n        const beatPulse = 1 + beatIntensity * 0.03;\n        const opacity = interpolate(popP, [0, 0.3], [0, 1], {\n          extrapolateLeft: \"clamp\",\n          extrapolateRight: \"clamp\",\n        }) * exitFade;\n\n        return (\n          <div\n            key={`solution-${i}`}\n            style={{\n              position: \"absolute\",\n              left: cx - emojiHalf,\n              top: cy - emojiHalf,\n              width: emojiFontSize,\n              height: emojiFontSize,\n              fontSize: emojiFontSize,\n              lineHeight: 1,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              opacity,\n              transform: `translateY(${liftY + exitLift}px) scale(${emojiScale * breathe * beatPulse * exitShrink})`,\n              transformOrigin: \"center center\",\n              pointerEvents: \"none\",\n            }}\n          >\n            <Emoji char={emoji} size={emojiFontSize} verticalAlign=\"baseline\" />\n          </div>\n        );\n      })}\n\n      {/* BEFORE pill + headline */}\n      <div style={{ position: \"absolute\", inset: 0, opacity: problemHeadlineMask, pointerEvents: \"none\" }}>\n        <div\n          style={{\n            position: \"absolute\",\n            top: pillTop,\n            left: 0,\n            right: 0,\n            display: \"flex\",\n            justifyContent: \"center\",\n          }}\n        >\n          <div\n            style={{\n              fontSize: labelFontSize,\n              fontWeight: 700,\n              color: beforeColor,\n              letterSpacing: 3 * s,\n              textTransform: \"uppercase\" as const,\n              whiteSpace: \"nowrap\" as const,\n              transform: `scale(${interpolate(spring(interpolate(progress, [0.03, 0.18], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" }), { damping: 9, stiffness: 220 }), [0, 1], [0.55, 1])})`,\n              transformOrigin: \"center center\",\n              fontFamily: font,\n              backgroundColor: \"rgba(0,0,0,0.3)\",\n              border: \"1px solid rgba(255,255,255,0.15)\",\n              borderRadius: 100 * s,\n              padding: `${14 * s}px ${36 * s}px`,\n              textShadow: \"0 1px 6px rgba(0,0,0,0.1)\",\n            }}\n          >\n            {problemLabel}\n          </div>\n        </div>\n        <div\n          style={{\n            position: \"absolute\",\n            top: textTop,\n            left: 0,\n            right: 0,\n            fontSize: mainSize,\n            fontWeight: 800,\n            color: textColor,\n            textAlign: \"center\" as const,\n            padding: `0 ${60 * s}px`,\n            lineHeight: 1.2,\n            opacity: problemTextOpacity,\n            transform: `scale(${problemTextScale})`,\n            fontFamily: font,\n          }}\n        >\n          {renderWithEmoji(problemHeadline, mainSize)}\n        </div>\n      </div>\n\n      {/* AFTER pill + headline */}\n      <div style={{ position: \"absolute\", inset: 0, opacity: solutionHeadlineMask, pointerEvents: \"none\" }}>\n        <div\n          style={{\n            position: \"absolute\",\n            top: pillTop,\n            left: 0,\n            right: 0,\n            display: \"flex\",\n            justifyContent: \"center\",\n          }}\n        >\n          <div\n            style={{\n              fontSize: labelFontSize,\n              fontWeight: 700,\n              color: afterColor,\n              letterSpacing: 3 * s,\n              textTransform: \"uppercase\" as const,\n              whiteSpace: \"nowrap\" as const,\n              transform: `scale(${interpolate(spring(interpolate(progress, [0.50, 0.65], [0, 1], { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" }), { damping: 9, stiffness: 220 }), [0, 1], [0.55, 1])})`,\n              transformOrigin: \"center center\",\n              fontFamily: font,\n              backgroundColor: \"rgba(0,0,0,0.3)\",\n              border: \"1px solid rgba(255,255,255,0.15)\",\n              borderRadius: 100 * s,\n              padding: `${14 * s}px ${36 * s}px`,\n              textShadow: \"0 1px 6px rgba(0,0,0,0.1)\",\n            }}\n          >\n            {solutionLabel}\n          </div>\n        </div>\n        <div\n          style={{\n            position: \"absolute\",\n            top: textTop,\n            left: 0,\n            right: 0,\n            fontSize: mainSize,\n            fontWeight: 800,\n            color: textColor,\n            textAlign: \"center\" as const,\n            padding: `0 ${60 * s}px`,\n            lineHeight: 1.2,\n            opacity: solutionTextOpacity,\n            transform: `scale(${solutionTextScale})`,\n            fontFamily: font,\n          }}\n        >\n          {renderWithEmoji(solutionHeadline, mainSize)}\n        </div>\n      </div>\n    </>\n  );\n};\n"
+    },
+    {
+      "path": "src/visual-system/emoji/emoji-text.tsx",
+      "type": "registry:component",
+      "target": "vanillasky/emoji/emoji-text.tsx",
+      "content": "/**\n * EmojiText / renderWithEmoji — split a string into text runs + emoji runs,\n * rendering each emoji with the viewer's native emoji font while leaving\n * everything else as plain 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 span in sequence.\n */\n\nimport * as React from \"react\";\nimport { Emoji, isNativeEmoji } from \"./index\";\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. Modern browsers all have Segmenter.\n  return Array.from(text);\n}\n\nexport interface RenderWithEmojiOptions {\n  /** vertical-align passed to each <Emoji>. */\n  verticalAlign?: React.CSSProperties[\"verticalAlign\"];\n  /** Extra style merged onto each emoji span. */\n  emojiStyle?: React.CSSProperties;\n}\n\n/**\n * Split `text` into an array of React nodes — plain-text strings interleaved\n * with <Emoji> spans for every emoji cluster. Returns a single-element\n * `[text]` fast-path when there are no 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 (!isNativeEmoji(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    if (isNativeEmoji(cluster)) {\n      flushText();\n      nodes.push(\n        <Emoji\n          key={`e${key++}`}\n          char={cluster}\n          size={fontSizePx}\n          verticalAlign={opts?.verticalAlign}\n          style={opts?.emojiStyle}\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 the full emoji\n * and marks the cluster's CONTINUATION indices as covered (render nothing for\n * them — the start index's span already contains the whole cluster).\n *\n * Returns null when the text contains no 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<number, string>;\n  /** code-unit indices that are continuations of a cluster (render nothing). */\n  covered: Set<number>;\n}\n\nexport function planTypewriterEmoji(text: string): EmojiTypewriterPlan | null {\n  if (!text || !isNativeEmoji(text)) return null;\n  const starts = new Map<number, string>();\n  const covered = new Set<number>();\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 (isNativeEmoji(cluster)) {\n      found = true;\n      // Store the WHOLE cluster char (not just the start unit) so callers can\n      // pass it straight to <Emoji> without splitting a grapheme cluster.\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 with emoji in the native operating-system font. */\n  children: string;\n  /** Surrounding font size in px — sizes each emoji 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 spans. 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<EmojiTextProps> = ({\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/visual-system/emoji/index.tsx",
+      "type": "registry:component",
+      "target": "vanillasky/emoji/index.tsx",
+      "content": "import * as React from \"react\";\n\nconst NATIVE_EMOJI_FONT = \"Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif\";\nconst NATIVE_EMOJI = /\\p{Emoji_Presentation}|\\p{Regional_Indicator}|\\u{FE0F}|\\u{20E3}/u;\n\n/** True for emoji-presentation graphemes, not plain symbols such as ★ or ✓. */\nexport function isNativeEmoji(char: string): boolean {\n  return NATIVE_EMOJI.test(char);\n}\n\nexport interface EmojiProps {\n  /** The emoji character or grapheme cluster, e.g. \"🎉\" or \"👩‍💻\". */\n  char: string;\n  /** Font size in px. */\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 native emoji span. */\n  style?: React.CSSProperties;\n}\n\n/** Render emoji with the viewer's OS font while preserving text-style symbols. */\nexport const Emoji: React.FC<EmojiProps> = ({ char, size, verticalAlign = \"-0.15em\", style }) => {\n  const nativeEmoji = isNativeEmoji(char);\n  return (\n    <span\n      role={nativeEmoji ? \"img\" : undefined}\n      aria-label={nativeEmoji ? char : undefined}\n      style={{\n        ...(nativeEmoji ? { fontFamily: NATIVE_EMOJI_FONT } : {}),\n        fontSize: size,\n        lineHeight: 1,\n        display: \"inline-block\",\n        verticalAlign,\n        ...style,\n      }}\n    >\n      {char}\n    </span>\n  );\n};\n"
+    },
+    {
+      "path": "src/visual-system/scene-templates/template-text.tsx",
+      "type": "registry:component",
+      "target": "vanillasky/scene-templates/template-text.tsx",
+      "content": "/**\n * TemplateText — unified text component for scene templates.\n *\n * Replaces the per-template hand-rolled text rendering with a single component\n * that owns: archetype motion lifecycle (entrance + hold + exit), font sizing,\n * position, beat pulse, and safe zone.\n *\n * Each template declares its constraints (position + sizeRole) at the call site;\n * the user/AI picks the archetype. Templates that can only show text at the top\n * just always pass position=\"top\".\n *\n * Example — a data template (caption above a chart):\n *\n *   <TemplateText\n *     archetype={textArchetype}\n *     text={variables.title}\n *     progress={progress}\n *     sceneDuration={sceneDuration}\n *     width={width}\n *     height={height}\n *     position=\"top\"\n *     sizeRole=\"caption\"\n *   />\n *\n * Example — a media template (full-frame headline):\n *\n *   <TemplateText\n *     archetype={textArchetype}\n *     text={variables.headline}\n *     progress={progress}\n *     sceneDuration={sceneDuration}\n *     width={width}\n *     height={height}\n *     position=\"center\"\n *     sizeRole=\"headline\"\n *     beatIntensity={beatIntensity}\n *   />\n *\n * Note: `textArchetype` is destructured from props (a scene-level\n * field on `SceneTemplateProps`), NOT read from `variables`. Copying\n * the wrong pattern silently no-ops — the executor routes\n * `setSceneVariable(\"textArchetype\", ...)` to the scene-level field,\n * never into variables, so `variables.textArchetype` is always\n * undefined.\n */\n\nimport {\n  renderArchetype,\n  normalizeArchetype,\n  type TextArchetype,\n  type ArchetypeRender,\n} from \"../typography\";\nimport type { TypeTreatment } from \"../theme\";\nimport { renderWithEmoji, planTypewriterEmoji } from \"../emoji/emoji-text\";\nimport { Emoji } from \"../emoji\";\n\nexport type TextPosition = \"top\" | \"center\" | \"bottom\";\nexport type TextSizeRole = \"headline\" | \"caption\" | \"label\";\n\nexport interface SafeZone {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\nexport interface TemplateTextProps {\n  archetype: TextArchetype;\n  text: string;\n  /** Scene progress 0→1. */\n  progress: number;\n  /** Presentation clock; VideoFrame keeps it on the complete scene timeline. */\n  motionProgress?: number;\n  /** Scene duration in seconds — drives entrance/exit phase scaling. */\n  sceneDuration: number;\n  /** Frame width in pixels (1080 in production, smaller in previews). */\n  width: number;\n  /** Frame height in pixels (1920 in production). */\n  height: number;\n  /** Where the text box sits in the frame. Templates declare this. */\n  position?: TextPosition;\n  /** Size envelope. Templates declare this. */\n  sizeRole?: TextSizeRole;\n  /** Preset type treatment — weight/tracking/size/case shift from style.preset. */\n  typeTreatment?: TypeTreatment;\n  /** Padding from frame edges. Defaults to a 24px box. */\n  safeZone?: SafeZone;\n  /** Font family. */\n  font?: string;\n  /** Fill color. */\n  color?: string;\n  /** Beat intensity 0→1 (currently unused — kept for forward compat). */\n  beatIntensity?: number;\n}\n\nconst DEFAULT_SAFE_ZONE: SafeZone = { top: 24, right: 24, bottom: 24, left: 24 };\nconst DEFAULT_FONT =\n  \"ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\";\n\n// ─── Typography constants ───────────────────────────────────────\n// All em-based so they scale with font size and behave consistently across\n// font families. Values from print/motion-design conventions:\n//\n//  - Big text (display/headline) gets TIGHTER tracking and TIGHTER leading.\n//    -0.022em (≈ -2.2%) is the sweet spot for 48–88px headlines on most\n//    sans-serifs (Inter, Helvetica, SF Pro, Manrope, Geist).\n//  - Word-spacing kept subtle (≤0.08em). CSS word-spacing is ADDITIVE on\n//    top of the natural space char, so what looks like \"a touch of\n//    rhythm\" in print becomes a visible double-gap on 80px motion\n//    headlines (especially under wordStagger, where each word renders\n//    as an inline-block and the gap between them is preserved). Old\n//    values (0.16/0.18/0.22 em) added ~13–18px per gap on display\n//    type — the \"too much space between words\" symptom.\n//  - Line-height 1.1 for headlines, 1.5 for body — Bringhurst-aligned ratios.\n//  - kern + liga always on so any font's pair-kerning and ligatures fire\n//    consistently (works across Inter, Manrope, SF, IBM Plex, etc.).\nconst TYPO = {\n  headline: {\n    letterSpacing: \"-0.022em\",\n    wordSpacing: \"0.04em\",\n    lineHeight: 1.1,\n  },\n  caption: {\n    letterSpacing: \"-0.012em\",\n    wordSpacing: \"0.06em\",\n    lineHeight: 1.25,\n  },\n  label: {\n    letterSpacing: \"-0.005em\",\n    wordSpacing: \"0.10em\",\n    lineHeight: 1.4,\n  },\n};\nconst FONT_FEATURES = '\"kern\" 1, \"liga\" 1';\n\n// Drop shadow tuned to give crisp edges on retina without muddying text on\n// saturated gradients. Earlier two-layer shadow (1px tight + 16px wide) cast\n// dark halos that made gradient-backed text look smudged. A single barely-\n// there shadow is enough for edge definition; bg-media adds its own dark\n// scrim for legibility over photos, so we don't need to compensate here.\nfunction dropShadowFor(textColor: string): string {\n  const dark = isLikelyDark(textColor);\n  const tone = dark ? \"rgba(255,255,255,0.15)\" : \"rgba(0,0,0,0.2)\";\n  return `0 1px 2px ${tone}`;\n}\n\nfunction isLikelyDark(color: string): boolean {\n  // Crude luminance check — handles #rrggbb and #rgb. Anything we can't parse\n  // (named colors, rgb()) defaults to \"not dark\" so the heavier shadow shows.\n  const m = color.replace(\"#\", \"\");\n  if (m.length === 3) {\n    const r = parseInt(m[0] + m[0], 16);\n    const g = parseInt(m[1] + m[1], 16);\n    const b = parseInt(m[2] + m[2], 16);\n    return (r * 299 + g * 587 + b * 114) / 1000 < 128;\n  }\n  if (m.length === 6) {\n    const r = parseInt(m.slice(0, 2), 16);\n    const g = parseInt(m.slice(2, 4), 16);\n    const b = parseInt(m.slice(4, 6), 16);\n    return (r * 299 + g * 587 + b * 114) / 1000 < 128;\n  }\n  return false;\n}\n// ─── Font sizing matrix ─────────────────────────────────────────\n// Mirrors what production templates actually render today, ported from:\n//   - text-overlay.tsx (headline: 80/64/48 × s_min by char count)\n//   - infographic-steps.tsx (caption: ~44 × s_min capped by layout)\n\n/**\n * Compute heroWord font size for a single word. Each active word fills its\n * own moment — trailer convention. Center can go large (480ref cap); top\n * stays inside the top zone height so it doesn't crash into the animation\n * or data viz below.\n */\nfunction computeHeroFontSize(\n  wordChars: number,\n  position: TextPosition,\n  width: number,\n  height: number,\n  safeZone: SafeZone,\n): number {\n  const chars = Math.max(wordChars, 1);\n  const s_min = Math.min(width, height) / 1080;\n  const widthBudget = (width - safeZone.left - safeZone.right) * 0.92;\n  const pxPerChar = 0.58; // bold sans-serif approximation\n  const widthCap = widthBudget / (chars * pxPerChar);\n\n  if (position === \"center\") {\n    return Math.min(480 * s_min, widthCap);\n  }\n\n  // Top/bottom: keep the word inside its zone (~28% of frame height) with\n  // 80% headroom for entrance overshoot + breathe. Reference target 220ref\n  // so even short words stay big without overflowing the zone.\n  const heightCap = height * 0.28 * 0.8;\n  return Math.min(220 * s_min, widthCap, heightCap);\n}\n\n/**\n * Smooth interpolation between max and min font size based on character count.\n * Avoids the visible \"jump\" you get from bucket boundaries when copy length\n * crosses a threshold (e.g., 25→26 chars dropping headline from 80px to 64px).\n *\n * Exported so templates that lay out their own text can match the headline\n * curve instead of inventing their own bucketed scaling.\n *\n * Returns size at 1080-reference scale; caller multiplies by s_min.\n */\nexport function smoothSize(chars: number, maxChars: number, max: number, min: number): number {\n  const t = Math.max(0, Math.min(1, chars / maxChars));\n  // Slight curve so short text stays at maxSize longer before scaling down.\n  const eased = t * t;\n  return max - (max - min) * eased;\n}\n\nfunction computeFontSize(\n  archetype: TextArchetype,\n  text: string,\n  role: TextSizeRole,\n  position: TextPosition,\n  width: number,\n  height: number,\n  safeZone: SafeZone,\n): { fontSize: number; fontWeight: number } {\n  const s_min = Math.min(width, height) / 1080;\n\n  // heroWord container fontSize uses the longest word as a safe fallback. The\n  // ACTIVE-word size is recomputed per-render in the \"hero\" render branch\n  // (via computeHeroFontSize) so each word fills its own moment optimally —\n  // trailer convention.\n  if (archetype === \"heroWord\") {\n    const longestChars = text\n      .split(/\\s+/)\n      .filter(Boolean)\n      .reduce((m, w) => Math.max(m, w.length), 1);\n    return {\n      fontSize: computeHeroFontSize(longestChars, position, width, height, safeZone),\n      fontWeight: 800,\n    };\n  }\n\n  const chars = text.length;\n\n  // Smooth scaling, minimums set so even long copy stays readable in production\n  // (1080 reference). Numbers tuned to match — but improve on — the previous\n  // bucketed system.\n  if (role === \"headline\") {\n    // Floor 60 (was 48) — matches the typography guideline \"Titles/headlines\n    // 60-86px at 1080\" and lifts long-copy headlines off the body-text floor\n    // that left ProblemSolution-shaped statements feeling small. Max held at\n    // 88 so short, punchy headlines still fill the frame.\n    const refSize = smoothSize(chars, /* maxChars */ 70, /* max */ 88, /* min */ 60);\n    return { fontSize: refSize * s_min, fontWeight: 700 };\n  }\n\n  if (role === \"caption\") {\n    const refSize = smoothSize(chars, 80, 48, 32);\n    return { fontSize: refSize * s_min, fontWeight: 600 };\n  }\n\n  // label\n  const refSize = smoothSize(chars, 80, 34, 24);\n  return { fontSize: refSize * s_min, fontWeight: 500 };\n}\n\n// ─── Positioning ───────────────────────────────────────────────\n\nfunction positionStyle(\n  position: TextPosition,\n  height: number,\n  safeZone: SafeZone,\n): React.CSSProperties {\n  switch (position) {\n    case \"top\":\n      return {\n        top: safeZone.top + height * 0.06,\n        height: height * 0.28,\n        alignItems: \"flex-start\",\n      };\n    case \"bottom\":\n      return {\n        bottom: safeZone.bottom + height * 0.06,\n        height: height * 0.28,\n        alignItems: \"flex-end\",\n      };\n    case \"center\":\n    default:\n      return {\n        top: 0,\n        bottom: 0,\n        alignItems: \"center\",\n      };\n  }\n}\n\n// ─── Component ─────────────────────────────────────────────────\n\nexport const TemplateText: React.FC<TemplateTextProps> = ({\n  archetype: archetypeRaw,\n  text: textRaw,\n  progress,\n  motionProgress = progress,\n  sceneDuration,\n  width,\n  height,\n  position = \"center\",\n  sizeRole = \"headline\",\n  typeTreatment,\n  safeZone = DEFAULT_SAFE_ZONE,\n  font = DEFAULT_FONT,\n  color = \"#FFFFFF\",\n  beatIntensity = 0,\n}) => {\n  // Defensive coerce: TemplateText is downstream of ~16 templates that pass\n  // their own `variables.X` strings. If any one of them passes undefined\n  // (missing variable on a freshly added scene, stale saved config, custom\n  // template not setting a field), the unguarded `.split` / `.length` calls\n  // below crash the entire preview. Treat undefined/non-string as\n  // empty so a single bad scene doesn't take everything down. Warn in dev\n  // so the upstream gap still surfaces.\n  const textSafe = typeof textRaw === \"string\" ? textRaw : \"\";\n  const isDevelopment = (import.meta as ImportMeta & { env?: { DEV?: boolean } }).env?.DEV;\n  if (textRaw !== undefined && typeof textRaw !== \"string\" && isDevelopment) {\n    console.warn(\"[TemplateText] received non-string text:\", textRaw);\n  }\n  // `|` is the AI's explicit line-break convention for headline copy\n  // (\"Built for speed.|Designed for you.\"). Convert centrally so EVERY\n  // template that renders text through TemplateText honors it — bg-media\n  // used to convert locally while confetti/emojiBurst/etc. rendered the\n  // pipe literally. Whitespace around the pipe is trimmed so spaced and\n  // unspaced pipes produce identical output. The container's\n  // `white-space: pre-line` renders the resulting `\\n` as a hard break.\n  // Templates that legitimately render pipes (code, terminal commands)\n  // don't flow through TemplateText, so they're unaffected.\n  const text = textSafe.replace(/\\s*\\|\\s*/g, \"\\n\");\n  // Normalize the archetype prop so unknown names fall back safely.\n  const archetype = normalizeArchetype(archetypeRaw);\n  const scale = Math.min(width, height) / 1080;\n  // Motion pacing applies at every size role — a calm video should ease its\n  // captions in too, not just its headlines. (The rest of the treatment is\n  // headline-only; see `tt` below.)\n  const result: ArchetypeRender = renderArchetype(\n    archetype,\n    progress,\n    scale,\n    text,\n    sceneDuration,\n    typeTreatment?.phaseScale ?? 1,\n    motionProgress,\n  );\n  const { fontSize, fontWeight } = computeFontSize(\n    archetype,\n    text,\n    sizeRole,\n    position,\n    width,\n    height,\n    safeZone,\n  );\n\n  // beatIntensity reserved for future use; currently a no-op on text body.\n  void beatIntensity;\n\n  const baseTypo = TYPO[sizeRole];\n  // Preset type treatment. Absent (or the default preset's zero-deltas) leaves\n  // every value exactly as it was, so unpresetted configs are unaffected.\n  const tt = sizeRole === \"headline\" ? typeTreatment : undefined;\n  // Only rewrite a value the preset actually changes — reformatting\n  // letterSpacing with a zero delta would alter the emitted string (and every\n  // stability snapshot) without changing the render.\n  const typo = tt\n    ? {\n        ...baseTypo,\n        ...(tt.trackingDeltaEm !== 0\n          ? {\n              letterSpacing: `${Number(\n                (parseFloat(baseTypo.letterSpacing) + tt.trackingDeltaEm).toFixed(4),\n              )}em`,\n            }\n          : {}),\n        ...(tt.transform ? { textTransform: tt.transform } : {}),\n      }\n    : baseTypo;\n  const presetWeight = tt ? Math.min(900, Math.max(100, fontWeight + tt.weightDelta)) : fontWeight;\n  const presetSize = tt ? fontSize * tt.sizeScale : fontSize;\n  const textShadow = dropShadowFor(color);\n\n  const containerStyle: React.CSSProperties = {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    display: \"flex\",\n    justifyContent: \"center\",\n    padding: `0 ${safeZone.right}px 0 ${safeZone.left}px`,\n    color,\n    fontFamily: font,\n    fontWeight: presetWeight,\n    fontSize: presetSize,\n    textAlign: \"center\",\n    pointerEvents: \"none\",\n    fontFeatureSettings: FONT_FEATURES,\n    textRendering: \"optimizeLegibility\",\n    WebkitFontSmoothing: \"antialiased\",\n    MozOsxFontSmoothing: \"grayscale\",\n    // Respect explicit newlines — the centralized `|` → `\\n` conversion\n    // above (and callers passing real newlines) rely on this. Multiple\n    // spaces still collapse normally; only `\\n` and CRLF break.\n    whiteSpace: \"pre-line\",\n    ...(textShadow ? { textShadow } : {}),\n    ...typo,\n    ...positionStyle(position, height, safeZone),\n  };\n\n  if (result.kind === \"block\") {\n    return (\n      <div style={containerStyle}>\n        <div\n          style={{\n            opacity: result.block.opacity,\n            transform: `${result.block.transform}`,\n            // Inherit letter-spacing from the container's typography defaults\n            // unless the archetype explicitly overrides (e.g., for animated tracking).\n            ...(result.block.letterSpacing ? { letterSpacing: result.block.letterSpacing } : {}),\n            ...(result.block.willChange ? { willChange: result.block.willChange } : {}),\n            maxWidth: \"85%\",\n          }}\n        >\n          {renderWithEmoji(result.text, fontSize)}\n        </div>\n      </div>\n    );\n  }\n\n  if (result.kind === \"typewriter\") {\n    // Render every character as its own span so the FULL TEXT always sets the\n    // layout — wrapping is decided by the complete string, not the typed\n    // prefix. The cursor is overlaid with position:absolute from the last\n    // typed char so it doesn't break the word it's inside.\n    const chars = text.split(\"\");\n    // Map cluster-start code-unit indices → full emoji graphemes so emoji use\n    // the native font even in the per-char typewriter reveal. Indexing\n    // stays on text.length (UTF-16 units) so result.visibleChars / charExits\n    // line up exactly; continuation units of a cluster render nothing.\n    const emojiPlan = planTypewriterEmoji(text);\n    const cursorBar = {\n      position: \"absolute\" as const,\n      width: \"0.08em\",\n      height: \"0.88em\",\n      background: \"currentColor\",\n      borderRadius: \"0.01em\",\n      pointerEvents: \"none\" as const,\n    };\n    return (\n      <div style={containerStyle}>\n        <div\n          style={{\n            opacity: result.opacity,\n            maxWidth: \"85%\",\n            whiteSpace: \"pre-wrap\",\n            position: \"relative\",\n          }}\n        >\n          {chars.map((ch, i) => {\n            const isTyped = i < result.visibleChars;\n            const isLastTyped = i === result.visibleChars - 1;\n            const anchorCursor = isLastTyped && result.cursor;\n            const charExit = result.charExits?.[i];\n            const baseOpacity = isTyped ? 1 : 0;\n            const finalOpacity = baseOpacity * (charExit?.opacity ?? 1);\n            // During exit the per-char span needs inline-block so translateX\n            // takes effect; whiteSpace: pre keeps space chars from collapsing.\n            const exitStyle = charExit\n              ? {\n                  display: \"inline-block\" as const,\n                  transform: `translateX(${charExit.translateX}px)`,\n                  whiteSpace: \"pre\" as const,\n                }\n              : null;\n            // Emoji handling: a cluster-start unit renders the full grapheme;\n            // its continuation units render nothing.\n            const emojiChar = emojiPlan?.starts.get(i);\n            if (emojiPlan?.covered.has(i)) return null;\n            return (\n              <span\n                key={i}\n                style={{\n                  opacity: finalOpacity,\n                  position: anchorCursor ? \"relative\" : \"static\",\n                  ...(exitStyle ?? {}),\n                }}\n              >\n                {emojiChar ? <Emoji char={emojiChar} size={fontSize} /> : ch}\n                {anchorCursor && (\n                  <span\n                    aria-hidden\n                    style={{\n                      ...cursorBar,\n                      left: \"100%\",\n                      top: \"0.08em\",\n                      marginLeft: \"0.12em\",\n                    }}\n                  />\n                )}\n              </span>\n            );\n          })}\n          {result.visibleChars === 0 && result.cursor && (\n            <span\n              aria-hidden\n              style={{\n                ...cursorBar,\n                left: 0,\n                top: \"0.08em\",\n              }}\n            />\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  if (result.kind === \"words\") {\n    // Render words inline-block with REAL space chars between them — word\n    // spacing inherits from the container's typography defaults, matching\n    // every other archetype's wrap behavior.\n    return (\n      <div style={containerStyle}>\n        <div\n          style={{\n            opacity: result.blockOpacity,\n            transform: `${result.blockTransform} `,\n            maxWidth: \"85%\",\n          }}\n        >\n          {result.words.map((w, i) => (\n            <span key={i}>\n              <span\n                style={{\n                  display: \"inline-block\",\n                  opacity: w.style.opacity,\n                  transform: w.style.transform,\n                }}\n              >\n                {renderWithEmoji(w.text, fontSize)}\n              </span>\n              {i < result.words.length - 1 ? \" \" : \"\"}\n            </span>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  if (result.kind === \"hero\") {\n    // Per-word sizing: each active word fills its own moment optimally.\n    const perWordFontSize = computeHeroFontSize(\n      result.word.length,\n      position,\n      width,\n      height,\n      safeZone,\n    );\n    // Fixed-height slot so words of different sizes don't jump vertically.\n    // Slot is the max possible hero size for this position; lineHeight: 1 on\n    // the inner word locks the glyph box to the font height so flex-center\n    // lands the glyph at the same Y for every word.\n    const slotHeight =\n      position === \"center\" ? 480 * scale : Math.min(220 * scale, height * 0.28 * 0.8);\n    return (\n      <div style={{ ...containerStyle, fontSize: perWordFontSize }}>\n        <div\n          style={{\n            height: slotHeight,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n          }}\n        >\n          <div\n            style={{\n              opacity: result.opacity,\n              transform: `${result.transform} `,\n              lineHeight: 1,\n              ...(result.letterSpacing ? { letterSpacing: result.letterSpacing } : {}),\n            }}\n          >\n            {renderWithEmoji(result.word, perWordFontSize)}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return null;\n};\n"
+    },
+    {
+      "path": "src/visual-system/scene-templates/types.ts",
+      "type": "registry:lib",
+      "target": "vanillasky/scene-templates/types.ts",
+      "content": "/**\n * Scene template types.\n *\n * A template is a reusable React component that defines how a scene looks.\n * It declares the variables an editor or model may provide\n * and receives universal settings as props.\n *\n * Templates are searchable by AI via description, category, jobs, register,\n * and useWhen guidance.\n * The variable schema enables any LLM to fill in template variables via JSON.\n */\n\nimport type { ResolvedTokens } from \"../theme\";\nimport type { SafeZone, TemplateStyle } from \"../template-context\";\n\n/**\n * Props passed to every scene template component.\n *\n * All animation must be driven by `progress` (0→1). No CSS animations,\n * no Framer Motion, no requestAnimationFrame. Use interpolate/spring\n * from animation-utils.ts.\n *\n * Scale factor: use `Math.min(width, height) / 1080` — normalizes to\n * the short edge so visuals are consistent across portrait and landscape.\n */\nexport interface SceneTemplateProps {\n  variables: Record<string, unknown>;\n  style: TemplateStyle;\n  /** 0→1 through the scene's duration */\n  progress: number;\n  /** Presentation clock. Active templates receive the same complete 0→1 timeline as progress. */\n  motionProgress?: number;\n  /** 0→1 beat pulse intensity */\n  beatIntensity: number;\n  /** 1080 (portrait) or 1920 (landscape) */\n  width: number;\n  /** 1920 (portrait) or 1080 (landscape) */\n  height: number;\n  /** Video-level default text effect (for templates that opt in via usesGlobalTextEffect) */\n  textArchetype?: string;\n  /** How text leaves the scene (fade / shrink / pop / blur-scale). Falls back to a sensible default per textArchetype when undefined. */\n  /** Video-level default background effect (for templates that opt in via usesGlobalBackgroundEffect) */\n  backgroundEffect?: string;\n  /** Platform-aware safe zone insets in pixels — use for text placement */\n  safeZone: SafeZone;\n  /** Scene duration in seconds — use for time-based (not progress-based) animations */\n  sceneDuration?: number;\n  /**\n   * Brand tokens already resolved from `style`. Built-in templates import\n   * resolveTokens directly; an ejected `custom_*` scene can't import anything,\n   * so without this it has no way to reach the same values and ends up\n   * hardcoding white, black and shadows — the body then looks generic next to\n   * a frame that IS using the brand.\n   */\n  tokens?: ResolvedTokens;\n  /**\n   * True when the preview player is actively advancing progress; false when paused.\n   * Templates that play HTML5 <video> elements should pause them when this is false.\n   * Undefined (export capture path) is treated as true.\n   */\n  isPlaying?: boolean;\n}\n"
+    },
+    {
+      "path": "src/visual-system/parse-list.ts",
+      "type": "registry:lib",
+      "target": "vanillasky/parse-list.ts",
+      "content": "// ─── List variable parser ──────────────────────────────────────\n//\n// Single source of truth for parsing list-shaped template variables\n// (items, texts, words, steps, itemEmojis, oldItems, newItems, etc.)\n//\n// Accepts any of:\n//   - string[]                          → returned as-is (trimmed, filtered)\n//   - { label | name | text | title | value }[]  → text extracted\n//   - JSON-encoded array string         → parsed then normalized\n//   - comma-separated string            → split on commas\n//   - single string / number / boolean  → wrapped as single-item array\n//   - null / undefined                  → []\n//\n// Never splits on semicolons. A single item may contain any punctuation.\n// Use this everywhere instead of ad-hoc `.split(\",\")`.\n\nexport function parseList(value: unknown, max?: number): string[] {\n  if (value === null || value === undefined) return [];\n\n  let arr: unknown[];\n\n  if (Array.isArray(value)) {\n    arr = value;\n  } else if (typeof value === \"string\") {\n    const trimmed = value.trim();\n    if (!trimmed) return [];\n    // Try JSON array first — supports real array output from AI\n    if (trimmed.startsWith(\"[\") && trimmed.endsWith(\"]\")) {\n      try {\n        const parsed = JSON.parse(trimmed);\n        arr = Array.isArray(parsed) ? parsed : [trimmed];\n      } catch {\n        arr = trimmed.split(\",\");\n      }\n    } else {\n      // Accept a compact comma-separated list.\n      arr = trimmed.split(\",\");\n    }\n  } else if (typeof value === \"number\" || typeof value === \"boolean\") {\n    arr = [value];\n  } else if (typeof value === \"object\") {\n    arr = [value];\n  } else {\n    return [];\n  }\n\n  const out = arr\n    .map((item) => {\n      if (item === null || item === undefined) return \"\";\n      if (typeof item === \"string\") return item.trim();\n      if (typeof item === \"number\" || typeof item === \"boolean\") return String(item);\n      if (typeof item === \"object\") {\n        const o = item as Record<string, unknown>;\n        const picked =\n          o.label ?? o.name ?? o.text ?? o.title ?? o.description ?? o.value;\n        return picked !== undefined ? String(picked).trim() : \"\";\n      }\n      return String(item).trim();\n    })\n    .filter((s) => s.length > 0);\n\n  return typeof max === \"number\" ? out.slice(0, max) : out;\n}\n"
+    }
+  ],
+  "meta": {
+    "vanillasky": {
+      "layer": "template",
+      "tier": "free",
+      "register": "motion-led",
+      "jobs": [
+        "setup",
+        "proof"
+      ],
+      "useWhen": "A grounded transformation contrasts an old and new state, manual and automated, or chaos and order.",
+      "textCanvas": "open",
+      "minDuration": 3,
+      "preferredDuration": 4.5,
+      "schema": {
+        "type": "object",
+        "properties": {
+          "problemLabel": {
+            "type": "string",
+            "title": "Before label",
+            "description": "Short uppercase pill label shown above the before headline (12 characters maximum).",
+            "maxLength": 12,
+            "default": "BEFORE"
+          },
+          "problemHeadline": {
+            "type": "string",
+            "title": "Before headline",
+            "description": "Headline shown during the before phase. Use 2-5 words and at most 48 characters. Sits centered beneath the BEFORE pill.",
+            "minLength": 1,
+            "maxLength": 48,
+            "default": "Your calendar today."
+          },
+          "solutionLabel": {
+            "type": "string",
+            "title": "After label",
+            "description": "Short uppercase pill label shown above the after headline (12 characters maximum).",
+            "maxLength": 12,
+            "default": "AFTER"
+          },
+          "solutionHeadline": {
+            "type": "string",
+            "title": "After headline",
+            "description": "Headline shown during the after phase. Use 2-5 words and at most 48 characters. Sits centered beneath the AFTER pill.",
+            "minLength": 1,
+            "maxLength": 48,
+            "default": "Calmly organized."
+          },
+          "problemEmojis": {
+            "type": "array",
+            "title": "Before emojis",
+            "description": "JSON array of emojis for the chaos / before state (5-8 types, cycled to fill 16 slots distributed around the central text). Example: [\"📅\", \"😰\", \"💼\", \"📊\", \"⏰\", \"💬\", \"📞\", \"🔔\"]",
+            "items": {
+              "type": "string",
+              "format": "emoji",
+              "minLength": 1,
+              "maxLength": 16
+            },
+            "minItems": 5,
+            "maxItems": 8,
+            "default": [
+              "📅",
+              "😰",
+              "💼",
+              "📊",
+              "⏰",
+              "💬",
+              "📞",
+              "🔔"
+            ]
+          },
+          "solutionEmojis": {
+            "type": "array",
+            "title": "After emojis",
+            "description": "JSON array of emojis for the calm / after state (3-5 types, cycled to fill 16 slots distributed around the central text). Example: [\"✨\", \"📋\", \"✅\", \"🎯\"]",
+            "items": {
+              "type": "string",
+              "format": "emoji",
+              "minLength": 1,
+              "maxLength": 16
+            },
+            "minItems": 3,
+            "maxItems": 5,
+            "default": [
+              "✨",
+              "📋",
+              "✅",
+              "🎯"
+            ]
+          },
+          "showEmojis": {
+            "type": "boolean",
+            "title": "Show decorative emojis",
+            "description": "Show the animated emoji scatter. Disable for sober financial or editorial comparisons.",
+            "default": true
+          }
+        },
+        "required": [
+          "problemHeadline",
+          "solutionHeadline",
+          "problemEmojis",
+          "solutionEmojis"
+        ],
+        "additionalProperties": false
+      },
+      "label": "Before and after",
+      "description": "Two contrasting states trade places in a split transformation layout.",
+      "family": "Explainers",
+      "avoidWhen": "The source lacks two distinct states or the comparison depends on exact labeled quantities.",
+      "usesGlobalTextEffect": true,
+      "usesGlobalTransition": false,
+      "usesGlobalBackgroundEffect": false,
+      "timing": {
+        "contentFields": [
+          "problemHeadline",
+          "solutionHeadline"
+        ],
+        "contentUnit": "words"
+      }
+    }
+  }
+}