@vanillaskyai/video 0.8.7 → 0.9.0

package/dist/chunk-YJJC4N4D.js

@@ -1,761 +0,0 @@
-import {
-  Emoji,
-  planTypewriterEmoji,
-  renderWithEmoji
-} from "./chunk-L5BTTCZV.js";
-import {
-  Easing,
-  SPRING_CRISP,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import {
-  MEDIA_TEXT_SHADOW
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/scene-templates/text-archetypes.ts
-var TEXT_ARCHETYPES = [
-  "subtle",
-  "typewriter",
-  "wordStagger",
-  "slam",
-  "cinematic",
-  "heroWord"
-];
-function normalizeArchetype(input) {
-  if (typeof input !== "string" || input.length === 0) return "subtle";
-  if (TEXT_ARCHETYPES.includes(input)) return input;
-  return "subtle";
-}
-var ARCHETYPE_SPECS = {
-  subtle: {
-    name: "subtle",
-    description: "Quiet caption. Visual is the star, text supports.",
-    entrance: 0.5,
-    exit: 0.7,
-    allowedCanvas: ["tight", "open"],
-    roles: ["body", "closer"],
-    sizeRange: [0.7, 1],
-    minDuration: 1.5,
-    maxDuration: 5
-  },
-  typewriter: {
-    name: "typewriter",
-    description: "Char-by-char reveal with blinking cursor. Slide-left cascade exit, top line first.",
-    entrance: 1.2,
-    exit: 0.85,
-    allowedCanvas: ["tight", "open"],
-    roles: ["body", "hook"],
-    sizeRange: [0.8, 1],
-    minDuration: 1.8,
-    maxDuration: 6
-  },
-  wordStagger: {
-    name: "wordStagger",
-    description: "Sequential word build with active-word focus. Slide-left cascade exit, top line first.",
-    entrance: 1.4,
-    exit: 0.7,
-    allowedCanvas: ["tight", "open"],
-    roles: ["body"],
-    sizeRange: [0.8, 1],
-    minDuration: 1.8,
-    maxDuration: 6
-  },
-  slam: {
-    name: "slam",
-    description: "In-place impact with violent squash-and-stretch, frame shake, and letter crunch.",
-    entrance: 0.5,
-    exit: 0.5,
-    allowedCanvas: ["tight", "open"],
-    roles: ["hook", "body"],
-    sizeRange: [0.9, 1.2],
-    minDuration: 1.2,
-    maxDuration: 4
-  },
-  cinematic: {
-    name: "cinematic",
-    description: "Trailer FlyIn from depth \u2192 recedes back into background.",
-    entrance: 0.7,
-    exit: 0.8,
-    allowedCanvas: ["open"],
-    roles: ["hook", "body", "closer"],
-    sizeRange: [0.9, 1.1],
-    minDuration: 1.8,
-    maxDuration: 6
-  },
-  heroWord: {
-    name: "heroWord",
-    description: "Single word fills frame. Simple fast exit so words get the most time.",
-    entrance: 0.35,
-    exit: 0.25,
-    allowedCanvas: ["open"],
-    roles: ["hook", "body", "closer"],
-    sizeRange: [2, 3],
-    minDuration: 1,
-    maxDuration: 5
-  }
-};
-var ENTRANCE_START = 0.02;
-var ENTRANCE_PHASE_CAP = 0.4;
-var EXIT_PHASE_CAP = 0.4;
-function computePhases(spec, sceneDuration, progress, phaseScale = 1) {
-  const entrancePhase = Math.min(ENTRANCE_PHASE_CAP, spec.entrance * phaseScale / sceneDuration);
-  const exitPhase = Math.min(EXIT_PHASE_CAP, spec.exit * phaseScale / sceneDuration);
-  const exitStart = 1 - exitPhase;
-  return { entrancePhase, exitPhase, exitStart, inExit: progress >= exitStart };
-}
-function rawEntrance(progress, entrancePhase, startAt = ENTRANCE_START) {
-  return interpolate(progress, [startAt, startAt + entrancePhase], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-}
-function rawExit(progress, exitStart) {
-  if (progress < exitStart) return 0;
-  return interpolate(progress, [exitStart, 1], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-}
-function holdT(progress, entrancePhase, exitStart, startAt = ENTRANCE_START) {
-  const holdStart = startAt + entrancePhase;
-  if (progress < holdStart || progress > exitStart || exitStart <= holdStart) return 0;
-  return (progress - holdStart) / (exitStart - holdStart);
-}
-function breathe(t, magnitude, cycles = 1) {
-  return Math.sin(t * Math.PI * 2 * cycles) * magnitude / 2;
-}
-function renderArchetype(archetypeRaw, progress, scale, text, sceneDuration, phaseScale = 1, motionProgress = progress) {
-  const archetype = normalizeArchetype(archetypeRaw);
-  const spec = ARCHETYPE_SPECS[archetype];
-  const phases = computePhases(spec, sceneDuration, motionProgress, phaseScale);
-  const presentationProgress = Math.max(progress, motionProgress);
-  switch (archetype) {
-    case "subtle":
-      return renderSubtle(motionProgress, scale, text, phases);
-    case "typewriter":
-      return renderTypewriter(presentationProgress, motionProgress, scale, text, phases, sceneDuration);
-    case "wordStagger":
-      return renderWordStagger(presentationProgress, motionProgress, scale, text, sceneDuration);
-    case "slam":
-      return renderSlam(motionProgress, scale, text, phases);
-    case "cinematic":
-      return renderCinematic(motionProgress, scale, text, phases);
-    case "heroWord":
-      return renderHeroWord(presentationProgress, motionProgress, text, phases);
-  }
-}
-function renderSubtle(progress, _scale, text, phases) {
-  const raw = rawEntrance(progress, phases.entrancePhase);
-  const ex = rawExit(progress, phases.exitStart);
-  const opacityIn = Easing.out(Easing.cubic)(raw);
-  const opacityOut = 1 - Easing.in(Easing.cubic)(ex);
-  const opacity = opacityIn * (phases.inExit ? opacityOut : 1);
-  return {
-    kind: "block",
-    block: {
-      opacity,
-      transform: "none"
-    },
-    text
-  };
-}
-function renderTypewriter(progress, motionProgress, scale, text, phases, sceneDuration) {
-  const raw = rawEntrance(progress, phases.entrancePhase);
-  const visibleChars = Math.max(0, Math.floor(raw * text.length));
-  const seconds = progress * sceneDuration;
-  const cursorOn = Math.sin(seconds * Math.PI * 3) > 0;
-  const stillTyping = visibleChars < text.length;
-  const opacityIn = Math.min(1, raw * 8);
-  const cursor = cursorOn && (stillTyping || !phases.inExit && opacityIn > 0.5);
-  let charExits;
-  if (phases.inExit && text.length > 0) {
-    const STAGGER_OUT = 0.025;
-    const PER_CHAR_OUT = 0.3;
-    const SLIDE_LEFT_DISTANCE = 350 * scale;
-    const actualExitSec = phases.exitPhase * sceneDuration;
-    const idealExitSec = (text.length - 1) * STAGGER_OUT + PER_CHAR_OUT;
-    const outScale = Math.min(1, actualExitSec / idealExitSec);
-    const stagOutNorm = STAGGER_OUT * outScale / sceneDuration;
-    const perCharOutNorm = PER_CHAR_OUT * outScale / sceneDuration;
-    charExits = Array.from({ length: text.length }, (_, i) => {
-      const charExitStart = phases.exitStart + i * stagOutNorm;
-      const charExitEnd = charExitStart + perCharOutNorm;
-      const charExitRaw = interpolate(motionProgress, [charExitStart, charExitEnd], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      const charExitEased = Easing.in(Easing.cubic)(charExitRaw);
-      return {
-        opacity: 1 - charExitEased,
-        translateX: -charExitEased * SLIDE_LEFT_DISTANCE
-      };
-    });
-  }
-  return {
-    kind: "typewriter",
-    visibleChars,
-    cursor,
-    opacity: opacityIn,
-    transform: "none",
-    charExits
-  };
-}
-function renderWordStagger(progress, motionProgress, scale, text, sceneDuration) {
-  const words = text.split(/\s+/).filter(Boolean);
-  const wordCount = Math.max(words.length, 1);
-  const STAGGER_MIN = 0.28;
-  const STAGGER_MAX = 0.45;
-  const PER_WORD_ANIM = 0.5;
-  const minEntrance = (wordCount - 1) * STAGGER_MIN + PER_WORD_ANIM;
-  const TARGET_ENTRANCE_FRACTION = 0.55;
-  const targetEntrance = sceneDuration * TARGET_ENTRANCE_FRACTION;
-  const exitSec = ARCHETYPE_SPECS.wordStagger.exit;
-  const minHold = 0.5;
-  const maxEntrance = Math.max(0.6, sceneDuration - exitSec - minHold);
-  let entranceSec = Math.min(maxEntrance, Math.max(minEntrance, targetEntrance));
-  if (wordCount > 1) {
-    const impliedStagger = (entranceSec - PER_WORD_ANIM) / (wordCount - 1);
-    if (impliedStagger > STAGGER_MAX) {
-      entranceSec = (wordCount - 1) * STAGGER_MAX + PER_WORD_ANIM;
-    }
-  }
-  const entrancePhase = entranceSec / sceneDuration;
-  const exitPhase = Math.min(0.4, exitSec / sceneDuration);
-  const exitStart = 1 - exitPhase;
-  const staggerIn = wordCount > 1 ? (entranceSec - PER_WORD_ANIM) / (wordCount - 1) / sceneDuration : 0;
-  const wordEntranceDur = PER_WORD_ANIM / sceneDuration;
-  const STAGGER_OUT = 0.06;
-  const PER_WORD_OUT = 0.32;
-  const SLIDE_LEFT_DISTANCE = 350 * scale;
-  const actualExitSec = exitPhase * sceneDuration;
-  const idealExitSec = (wordCount - 1) * STAGGER_OUT + PER_WORD_OUT;
-  const outScale = Math.min(1, actualExitSec / idealExitSec);
-  const stagOutNorm = STAGGER_OUT * outScale / sceneDuration;
-  const perWordOutNorm = PER_WORD_OUT * outScale / sceneDuration;
-  const ht = holdT(motionProgress, entrancePhase, exitStart);
-  const ACTIVE_DIM = 0.85;
-  const perWord = words.map((w, i) => {
-    const wordStart = ENTRANCE_START + i * staggerIn;
-    const wordEnd = wordStart + wordEntranceDur;
-    const wordRaw = interpolate(progress, [wordStart, wordEnd], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const sp = spring(wordRaw, SPRING_CRISP);
-    const yIn = interpolate(sp, [0, 1], [55 * scale, 0]);
-    const rotIn = interpolate(sp, [0, 1], [-3, 0]);
-    const opacityIn = Math.min(1, wordRaw * 7);
-    const yBreathe = breathe(ht, 1 * scale, 1) * Math.cos(i / wordCount * Math.PI);
-    let dimProgress = 0;
-    if (i < words.length - 1) {
-      const nextStart = ENTRANCE_START + (i + 1) * staggerIn;
-      const SNAP_RAMP = 0.02;
-      dimProgress = interpolate(progress, [nextStart, nextStart + SNAP_RAMP], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-    }
-    const focusOpacity = 1 - dimProgress * (1 - ACTIVE_DIM);
-    const wordExitStart = exitStart + i * stagOutNorm;
-    const wordExitEnd = wordExitStart + perWordOutNorm;
-    const wordExitRaw = interpolate(motionProgress, [wordExitStart, wordExitEnd], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const wordExitEased = Easing.in(Easing.cubic)(wordExitRaw);
-    const exitX = -wordExitEased * SLIDE_LEFT_DISTANCE;
-    const isExiting = wordExitRaw > 0;
-    const opacity = opacityIn * focusOpacity * (1 - wordExitEased);
-    const y = yIn + (isExiting ? 0 : yBreathe);
-    const rot = isExiting ? 0 : rotIn;
-    return {
-      text: w,
-      style: {
-        opacity,
-        transform: `translate(${exitX}px, ${y}px) rotate(${rot}deg)`
-      }
-    };
-  });
-  return {
-    kind: "words",
-    words: perWord,
-    blockOpacity: 1,
-    blockTransform: "none"
-  };
-}
-function renderSlam(progress, scale, text, phases) {
-  const raw = rawEntrance(progress, phases.entrancePhase);
-  const ex = rawExit(progress, phases.exitStart);
-  const ht = holdT(progress, phases.entrancePhase, phases.exitStart);
-  const sxIn = interpolate(raw, [0, 0.3, 0.45, 0.6, 1], [0.92, 1.22, 0.94, 1.02, 1]);
-  const syIn = interpolate(raw, [0, 0.3, 0.45, 0.6, 1], [1.18, 0.74, 1.12, 0.99, 1]);
-  const rotIn = interpolate(raw, [0, 0.3, 0.45, 1], [-1.5, 0, 0.8, 0]);
-  const lsInEm = interpolate(raw, [0, 0.2, 0.3, 0.45, 1], [0, -0.04, -0.06, 0, 0]);
-  const shakeWindow = Math.max(0, 1 - Math.max(0, raw - 0.3) / 0.2);
-  const shakeX = Math.sin(raw * 70) * 14 * scale * shakeWindow;
-  const shakeY = Math.cos(raw * 80) * 10 * scale * shakeWindow;
-  const opacityIn = Math.min(1, raw * 8);
-  const sBreathe = 1 + breathe(ht, 8e-3, 1);
-  const easedExit = Easing.in(Easing.exp)(ex);
-  const sOut = interpolate(easedExit, [0, 1], [1, 0.85]);
-  const opacityOut = interpolate(ex, [0, 0.55, 1], [1, 0.8, 0], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const sx = phases.inExit ? sOut : sxIn * sBreathe;
-  const sy = phases.inExit ? sOut : syIn * sBreathe;
-  const tx = phases.inExit ? 0 : shakeX;
-  const ty = phases.inExit ? 0 : shakeY;
-  const rot = phases.inExit ? 0 : rotIn;
-  const ls = phases.inExit ? 0 : lsInEm;
-  const opacity = opacityIn * (phases.inExit ? opacityOut : 1);
-  return {
-    kind: "block",
-    block: {
-      opacity,
-      transform: `translate(${tx}px, ${ty}px) rotate(${rot}deg) scale(${sx}, ${sy})`,
-      letterSpacing: `${ls}em`
-    },
-    text
-  };
-}
-function renderCinematic(progress, scale, text, phases) {
-  const raw = rawEntrance(progress, phases.entrancePhase);
-  const ex = rawExit(progress, phases.exitStart);
-  const easedIn = Easing.out(Easing.circle)(raw);
-  const sIn = interpolate(easedIn, [0, 1], [3, 1]);
-  const yIn = interpolate(easedIn, [0, 1], [18 * scale, 0]);
-  const opacityIn = interpolate(raw, [0, 0.4], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const easedExit = Easing.in(Easing.exp)(ex);
-  const sOut = interpolate(easedExit, [0, 1], [1, 0.4]);
-  const yOut = interpolate(easedExit, [0, 1], [0, -10 * scale]);
-  const opacityOut = interpolate(ex, [0, 0.5, 1], [1, 0.85, 0], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const s = phases.inExit ? sOut : sIn;
-  const y = phases.inExit ? yOut : yIn;
-  const opacity = opacityIn * (phases.inExit ? opacityOut : 1);
-  return {
-    kind: "block",
-    block: {
-      opacity,
-      transform: `translateY(${y}px) scale(${s})`,
-      willChange: "transform, opacity"
-    },
-    text
-  };
-}
-function renderHeroWord(progress, motionProgress, text, phases) {
-  const words = text.split(/\s+/).filter(Boolean);
-  if (words.length === 0) {
-    return { kind: "hero", word: "", index: 0, total: 0, opacity: 0, transform: "scale(1)" };
-  }
-  const sequenceStart = ENTRANCE_START + phases.entrancePhase * 0.2;
-  const sequenceEnd = phases.exitStart;
-  const sequenceDur = Math.max(0.01, sequenceEnd - sequenceStart);
-  const localProgress = Math.max(0, Math.min(0.999, (progress - sequenceStart) / sequenceDur));
-  const idx = Math.min(words.length - 1, Math.floor(localProgress / (1 / words.length)));
-  const local = localProgress * words.length - idx;
-  const isLast = idx === words.length - 1;
-  const ENTER_FRAC = 0.28;
-  const HOLD_FRAC = 0.55;
-  const HANDOFF_FRAC = 0.85;
-  let scale;
-  let opacity;
-  if (local < ENTER_FRAC) {
-    const entRaw = local / ENTER_FRAC;
-    const sp = spring(entRaw, SPRING_CRISP);
-    scale = sp < 0.7 ? interpolate(sp, [0, 0.7], [0.5, 1.06]) : interpolate(sp, [0.7, 1], [1.06, 1]);
-    opacity = Math.min(1, entRaw * 6);
-  } else if (local < HOLD_FRAC) {
-    const ht = (local - ENTER_FRAC) / (HOLD_FRAC - ENTER_FRAC);
-    scale = 1 + breathe(ht, 0.01, 1);
-    opacity = 1;
-  } else if (local < HANDOFF_FRAC && !isLast) {
-    const handoffRaw = (local - HOLD_FRAC) / (HANDOFF_FRAC - HOLD_FRAC);
-    scale = interpolate(handoffRaw, [0, 1], [1, 1.04]);
-    opacity = handoffRaw < 0.3 ? 1 : interpolate(handoffRaw, [0.3, 1], [1, 0]);
-  } else if (!isLast) {
-    scale = 1.04;
-    opacity = 0;
-  } else {
-    scale = 1;
-    opacity = 1;
-  }
-  if (isLast && phases.inExit) {
-    const ex = rawExit(motionProgress, phases.exitStart);
-    const easedExit = Easing.in(Easing.cubic)(ex);
-    scale = interpolate(easedExit, [0, 1], [1, 1.08]);
-    opacity = 1 - easedExit;
-  }
-  return {
-    kind: "hero",
-    word: words[idx],
-    index: idx,
-    total: words.length,
-    opacity,
-    transform: `scale(${scale})`
-  };
-}
-
-// src/visual-system/scene-templates/template-text.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_SAFE_ZONE = { top: 24, right: 24, bottom: 24, left: 24 };
-var DEFAULT_FONT = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
-var TYPO = {
-  headline: {
-    letterSpacing: "-0.022em",
-    wordSpacing: "0.04em",
-    lineHeight: 1.1
-  },
-  caption: {
-    letterSpacing: "-0.012em",
-    wordSpacing: "0.06em",
-    lineHeight: 1.25
-  },
-  label: {
-    letterSpacing: "-0.005em",
-    wordSpacing: "0.10em",
-    lineHeight: 1.4
-  }
-};
-var FONT_FEATURES = '"kern" 1, "liga" 1';
-function dropShadowFor(textColor) {
-  const dark = isLikelyDark(textColor);
-  const tone = dark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.2)";
-  return `0 1px 2px ${tone}`;
-}
-function isLikelyDark(color) {
-  const m = color.replace("#", "");
-  if (m.length === 3) {
-    const r = parseInt(m[0] + m[0], 16);
-    const g = parseInt(m[1] + m[1], 16);
-    const b = parseInt(m[2] + m[2], 16);
-    return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
-  }
-  if (m.length === 6) {
-    const r = parseInt(m.slice(0, 2), 16);
-    const g = parseInt(m.slice(2, 4), 16);
-    const b = parseInt(m.slice(4, 6), 16);
-    return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
-  }
-  return false;
-}
-function computeHeroFontSize(wordChars, position, width, height, safeZone) {
-  const chars = Math.max(wordChars, 1);
-  const s_min = Math.min(width, height) / 1080;
-  const widthBudget = (width - safeZone.left - safeZone.right) * 0.92;
-  const pxPerChar = 0.58;
-  const widthCap = widthBudget / (chars * pxPerChar);
-  if (position === "center") {
-    return Math.min(480 * s_min, widthCap);
-  }
-  const heightCap = height * 0.28 * 0.8;
-  return Math.min(220 * s_min, widthCap, heightCap);
-}
-function smoothSize(chars, maxChars, max, min) {
-  const t = Math.max(0, Math.min(1, chars / maxChars));
-  const eased = t * t;
-  return max - (max - min) * eased;
-}
-function computeFontSize(archetype, text, role, position, width, height, safeZone) {
-  const s_min = Math.min(width, height) / 1080;
-  if (archetype === "heroWord") {
-    const longestChars = text.split(/\s+/).filter(Boolean).reduce((m, w) => Math.max(m, w.length), 1);
-    return {
-      fontSize: computeHeroFontSize(longestChars, position, width, height, safeZone),
-      fontWeight: 800
-    };
-  }
-  const chars = text.length;
-  if (role === "headline") {
-    const refSize2 = smoothSize(
-      chars,
-      /* maxChars */
-      70,
-      /* max */
-      88,
-      /* min */
-      60
-    );
-    return { fontSize: refSize2 * s_min, fontWeight: 700 };
-  }
-  if (role === "caption") {
-    const refSize2 = smoothSize(chars, 80, 48, 32);
-    return { fontSize: refSize2 * s_min, fontWeight: 600 };
-  }
-  const refSize = smoothSize(chars, 80, 34, 24);
-  return { fontSize: refSize * s_min, fontWeight: 500 };
-}
-function positionStyle(position, height, safeZone) {
-  switch (position) {
-    case "top":
-      return {
-        top: safeZone.top + height * 0.06,
-        height: height * 0.28,
-        alignItems: "flex-start"
-      };
-    case "bottom":
-      return {
-        bottom: safeZone.bottom + height * 0.06,
-        height: height * 0.28,
-        alignItems: "flex-end"
-      };
-    case "center":
-    default:
-      return {
-        top: 0,
-        bottom: 0,
-        alignItems: "center"
-      };
-  }
-}
-var TemplateText = ({
-  archetype: archetypeRaw,
-  text: textRaw,
-  progress,
-  motionProgress = progress,
-  sceneDuration,
-  width,
-  height,
-  position = "center",
-  sizeRole = "headline",
-  typeTreatment,
-  safeZone = DEFAULT_SAFE_ZONE,
-  font = DEFAULT_FONT,
-  color = "#FFFFFF",
-  beatIntensity = 0,
-  overMedia = false
-}) => {
-  const textSafe = typeof textRaw === "string" ? textRaw : "";
-  const isDevelopment = import.meta.env?.DEV;
-  if (textRaw !== void 0 && typeof textRaw !== "string" && isDevelopment) {
-    console.warn("[TemplateText] received non-string text:", textRaw);
-  }
-  const text = textSafe.replace(/\s*\|\s*/g, "\n");
-  const archetype = normalizeArchetype(archetypeRaw);
-  const scale = Math.min(width, height) / 1080;
-  const result = renderArchetype(
-    archetype,
-    progress,
-    scale,
-    text,
-    sceneDuration,
-    typeTreatment?.phaseScale ?? 1,
-    motionProgress
-  );
-  const { fontSize, fontWeight } = computeFontSize(
-    archetype,
-    text,
-    sizeRole,
-    position,
-    width,
-    height,
-    safeZone
-  );
-  void beatIntensity;
-  const baseTypo = TYPO[sizeRole];
-  const tt = sizeRole === "headline" ? typeTreatment : void 0;
-  const typo = tt ? {
-    ...baseTypo,
-    ...tt.trackingDeltaEm !== 0 ? {
-      letterSpacing: `${Number(
-        (parseFloat(baseTypo.letterSpacing) + tt.trackingDeltaEm).toFixed(4)
-      )}em`
-    } : {},
-    ...tt.transform ? { textTransform: tt.transform } : {}
-  } : baseTypo;
-  const presetWeight = tt ? Math.min(900, Math.max(100, fontWeight + tt.weightDelta)) : fontWeight;
-  const presetSize = tt ? fontSize * tt.sizeScale : fontSize;
-  const overMediaColor = overMedia && isLikelyDark(color) ? "#FFFFFF" : color;
-  const textShadow = overMedia ? MEDIA_TEXT_SHADOW : dropShadowFor(color);
-  const containerStyle = {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    display: "flex",
-    justifyContent: "center",
-    padding: `0 ${safeZone.right}px 0 ${safeZone.left}px`,
-    color: overMediaColor,
-    fontFamily: font,
-    fontWeight: presetWeight,
-    fontSize: presetSize,
-    textAlign: "center",
-    pointerEvents: "none",
-    fontFeatureSettings: FONT_FEATURES,
-    textRendering: "optimizeLegibility",
-    WebkitFontSmoothing: "antialiased",
-    MozOsxFontSmoothing: "grayscale",
-    // Respect explicit newlines — the centralized `|` → `\n` conversion
-    // above (and callers passing real newlines) rely on this. Multiple
-    // spaces still collapse normally; only `\n` and CRLF break.
-    whiteSpace: "pre-line",
-    ...textShadow ? { textShadow } : {},
-    ...typo,
-    ...positionStyle(position, height, safeZone)
-  };
-  if (result.kind === "block") {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          opacity: result.block.opacity,
-          transform: `${result.block.transform}`,
-          // Inherit letter-spacing from the container's typography defaults
-          // unless the archetype explicitly overrides (e.g., for animated tracking).
-          ...result.block.letterSpacing ? { letterSpacing: result.block.letterSpacing } : {},
-          ...result.block.willChange ? { willChange: result.block.willChange } : {},
-          maxWidth: "85%"
-        },
-        children: renderWithEmoji(result.text, fontSize)
-      }
-    ) });
-  }
-  if (result.kind === "typewriter") {
-    const chars = text.split("");
-    const emojiPlan = planTypewriterEmoji(text);
-    const cursorBar = {
-      position: "absolute",
-      width: "0.08em",
-      height: "0.88em",
-      background: "currentColor",
-      borderRadius: "0.01em",
-      pointerEvents: "none"
-    };
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          opacity: result.opacity,
-          maxWidth: "85%",
-          whiteSpace: "pre-wrap",
-          position: "relative"
-        },
-        children: [
-          chars.map((ch, i) => {
-            const isTyped = i < result.visibleChars;
-            const isLastTyped = i === result.visibleChars - 1;
-            const anchorCursor = isLastTyped && result.cursor;
-            const charExit = result.charExits?.[i];
-            const baseOpacity = isTyped ? 1 : 0;
-            const finalOpacity = baseOpacity * (charExit?.opacity ?? 1);
-            const exitStyle = charExit ? {
-              display: "inline-block",
-              transform: `translateX(${charExit.translateX}px)`,
-              whiteSpace: "pre"
-            } : null;
-            const emojiChar = emojiPlan?.starts.get(i);
-            if (emojiPlan?.covered.has(i)) return null;
-            return /* @__PURE__ */ jsxs(
-              "span",
-              {
-                style: {
-                  opacity: finalOpacity,
-                  position: anchorCursor ? "relative" : "static",
-                  ...exitStyle ?? {}
-                },
-                children: [
-                  emojiChar ? /* @__PURE__ */ jsx(Emoji, { char: emojiChar, size: fontSize }) : ch,
-                  anchorCursor && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      "aria-hidden": true,
-                      style: {
-                        ...cursorBar,
-                        left: "100%",
-                        top: "0.08em",
-                        marginLeft: "0.12em"
-                      }
-                    }
-                  )
-                ]
-              },
-              i
-            );
-          }),
-          result.visibleChars === 0 && result.cursor && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              style: {
-                ...cursorBar,
-                left: 0,
-                top: "0.08em"
-              }
-            }
-          )
-        ]
-      }
-    ) });
-  }
-  if (result.kind === "words") {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          opacity: result.blockOpacity,
-          transform: `${result.blockTransform} `,
-          maxWidth: "85%"
-        },
-        children: result.words.map((w, i) => /* @__PURE__ */ jsxs("span", { children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                display: "inline-block",
-                opacity: w.style.opacity,
-                transform: w.style.transform
-              },
-              children: renderWithEmoji(w.text, fontSize)
-            }
-          ),
-          i < result.words.length - 1 ? " " : ""
-        ] }, i))
-      }
-    ) });
-  }
-  if (result.kind === "hero") {
-    const perWordFontSize = computeHeroFontSize(
-      result.word.length,
-      position,
-      width,
-      height,
-      safeZone
-    );
-    const slotHeight = position === "center" ? 480 * scale : Math.min(220 * scale, height * 0.28 * 0.8);
-    return /* @__PURE__ */ jsx("div", { style: { ...containerStyle, fontSize: perWordFontSize }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          height: slotHeight,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              opacity: result.opacity,
-              transform: `${result.transform} `,
-              lineHeight: 1,
-              ...result.letterSpacing ? { letterSpacing: result.letterSpacing } : {}
-            },
-            children: renderWithEmoji(result.word, perWordFontSize)
-          }
-        )
-      }
-    ) });
-  }
-  return null;
-};
-
-export {
-  smoothSize,
-  TemplateText
-};