@vosjs/studio-core 0.36.0 → 0.38.0

package/dist/index.js

@@ -1817,1777 +1817,2176 @@ function outputEnd(doc, footageEnd) {
   return Math.max(footageEnd, lastLayerEnd(doc));
 }
 
-// src/zoomStyle.ts
-var RETIRED_ZOOM_STYLES = {
-  keynote: { style: "glide", tilt: "medium" },
-  drift: { style: "cinema", tilt: "subtle" }
-};
-function liveZoomStyleName(name) {
-  if (!name) return null;
-  if (name in ZOOM_STYLES) return name;
-  return RETIRED_ZOOM_STYLES[name]?.style ?? null;
+// src/overlayText.ts
+import {
+  findFontFamily as findFontFamily2,
+  fontFaceUrl as fontFaceUrl2,
+  fontStack,
+  nearestFontWeight as nearestFontWeight2
+} from "@vosjs/shared";
+
+// src/htmlLayer.ts
+import { findFontFamily, fontFaceUrl, nearestFontWeight } from "@vosjs/shared";
+var DESIGN_FRAME_WIDTH = 1920;
+var HTML_LAYER_WARN_BYTES = 32e3;
+var HTML_LAYER_MAX_BYTES = 128e3;
+var HTML_LAYER_LIVE_HZ = 60;
+var HTML_LAYER_ASSET_HOST = "https://assets.vos.so/";
+function splitTopLevel(value) {
+  const out = [];
+  let depth = 0;
+  let cur = "";
+  for (const ch of value) {
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    if (ch === "," && depth === 0) {
+      out.push(cur);
+      cur = "";
+    } else cur += ch;
+  }
+  if (cur.trim()) out.push(cur);
+  return out;
 }
-var HOLD_DRIFT_MAX = 0.15;
-var PUMP_REST = 1;
-function pumpFreeChainGap(p) {
-  return p.rampOut + (p.rampIn - p.rampInOverlap) + PUMP_REST;
+var unquote = (s) => s.trim().replace(/^['"]/, "").replace(/['"]$/, "").trim();
+var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-sans-serif",
+  "ui-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "emoji",
+  "math",
+  "fangsong",
+  "inherit",
+  "initial",
+  "unset"
+]);
+function cssFamilies(css) {
+  if (!css) return [];
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const decl of css.match(/font-family\s*:[^;}]+/gi) ?? []) {
+    for (const item of splitTopLevel(decl.replace(/^[^:]*:/, ""))) {
+      const name = unquote(item.replace(/!important/i, ""));
+      if (!name) continue;
+      const lower = name.toLowerCase();
+      if (GENERIC_FAMILIES.has(lower) || lower.startsWith("-apple-")) continue;
+      if (seen.has(lower)) continue;
+      seen.add(lower);
+      out.push(name);
+    }
+  }
+  return out;
 }
-var glide = {
-  autoZoom: true,
-  clusterGap: 3,
-  minClusterClicks: 1,
-  targetFill: 0.42,
-  minLevel: 1.3,
-  maxLevel: 1.8,
-  dragLevel: 1.5,
-  lead: 0.35,
-  hold: 1.2,
-  followByDefault: true,
-  typingZoom: true,
-  typingGap: 2.5,
-  typingHold: 1.1,
-  typingMinLevel: 1.4,
-  rampIn: 0.6,
-  rampInOverlap: 0.2,
-  rampOut: 0.5,
-  chainGap: 3,
-  pan: 0.55,
-  // The reference's corner trace at 60 fps: a quarter of the move by a
-  // fifth of the time, two thirds by half, nine tenths by three
-  // quarters, over ~0.6 s. Fitted against those three points,
-  // (0.36, 0, 0.4, 1) is the closest cubic (15 / 64 / 93 %; half the
-  // move at ~245 ms and 90 % at ~425 ms at 0.6 s): a gentle start and a
-  // long settle. CSS ease (0.25, 0.1, 0.25, 1) reached the midpoint
-  // 70 ms earlier and read a touch fast; (0.16, 1, 0.3, 1) put half the
-  // move in the first sixty milliseconds and read as a twitch.
-  ease: "css-bezier(0.36, 0, 0.4, 1)",
-  panEase: "css-bezier(0.36, 0, 0.4, 1)",
-  followSafeRatio: 0.45,
-  followRecenter: 0.55,
-  followLookahead: 0.4,
-  tilt: {
-    intensity: "off",
-    rampIn: 0.6,
-    rampOut: 0.5,
-    chainGap: 3,
-    pan: 0.55
+function cssWeights(css, html = "") {
+  const out = /* @__PURE__ */ new Set([400]);
+  for (const decl of css?.match(/font-weight\s*:[^;}]+/gi) ?? []) {
+    const value = decl.replace(/^[^:]*:/, "").toLowerCase();
+    for (const n of value.match(/\b[1-9]00\b/g) ?? []) out.add(Number(n));
+    if (/\bbold(er)?\b/.test(value)) out.add(700);
   }
-};
-var ZOOM_STYLES = {
-  glide,
-  // Screen Studio "Focused" / Recordly — a block per click, framed and
-  // released, no travel. The spring-settled family ease (near-linear onset,
-  // long settle) at the default's tempo: 0.8 s in, 0.65 s out, and a beat
-  // of 1.5 s after the click so the block is read before it goes. At its
-  // 2026-07 timing (1.4 s in, 1.0 s out around a 1.35 s span) a lone click
-  // spent 74% of its beat moving and every dwell or sped-up click was
-  // shorter than the ramp, which the lowering compressed into a cut.
-  focus: {
-    autoZoom: true,
-    clusterGap: 1.5,
-    minClusterClicks: 1,
-    targetFill: 0.5,
-    minLevel: 1.4,
-    maxLevel: 2,
-    dragLevel: 1.6,
-    lead: 0.35,
-    hold: 1.5,
-    followByDefault: false,
-    typingZoom: true,
-    typingGap: 2,
-    typingHold: 1.3,
-    typingMinLevel: 1.5,
-    rampIn: 0.8,
-    rampInOverlap: 0.25,
-    rampOut: 0.65,
-    chainGap: 2.4,
-    pan: 0.7,
-    ease: "css-bezier(0.28, 0.03, 0.09, 1)",
-    panEase: "css-bezier(0.26, 0.08, 0.2, 1)",
-    followSafeRatio: 0.5,
-    followRecenter: 0.55,
-    followLookahead: 0,
-    tilt: {
-      intensity: "off",
-      rampIn: 0.8,
-      rampOut: 0.65,
-      chainGap: 2.4,
-      pan: 0.7
-    }
-  },
-  // Screen Studio "Smooth" — the long-HOLD style: 1.2 s in, 1.0 s out,
-  // two-second holds, chains across 3.5 s so a slow clip travels rather
-  // than pumps, and the default's level range, because a watched clip
-  // wants the frame, not the magnifier. Its ramps still exceed a dwell or
-  // a sped-up click; the lowering fits them to the room.
-  cinema: {
-    autoZoom: true,
-    clusterGap: 2.4,
-    minClusterClicks: 1,
-    targetFill: 0.42,
-    minLevel: 1.3,
-    maxLevel: 1.8,
-    dragLevel: 1.5,
-    lead: 0.6,
-    hold: 2,
-    followByDefault: true,
-    typingZoom: true,
-    typingGap: 3,
-    typingHold: 1.8,
-    typingMinLevel: 1.4,
-    rampIn: 1.2,
-    rampInOverlap: 0.4,
-    rampOut: 1,
-    chainGap: 3.5,
-    pan: 1.1,
-    ease: "css-bezier(0.33, 0, 0.15, 1)",
-    panEase: "css-bezier(0.33, 0, 0.22, 1)",
-    followSafeRatio: 0.6,
-    followRecenter: 0.9,
-    followLookahead: 0.5,
-    tilt: {
-      intensity: "off",
-      rampIn: 1.2,
-      rampOut: 1,
-      chainGap: 3.5,
-      pan: 1.1
-    }
-  },
-  // The studio's original pace with the instant-velocity onset defect fixed:
-  // 0.4 s cycles on the onset-capped ease, the 2.5× ceiling of the 2026-07
-  // comparison's defect two brought to 2.2, a chain gap past its pump band.
-  snappy: {
-    autoZoom: true,
-    clusterGap: 1.2,
-    minClusterClicks: 1,
-    targetFill: 0.5,
-    minLevel: 1.4,
-    maxLevel: 2.2,
-    dragLevel: 1.6,
-    lead: 0.25,
-    hold: 1.2,
-    followByDefault: false,
-    typingZoom: true,
-    typingGap: 1.6,
-    typingHold: 0.9,
-    typingMinLevel: 1.5,
-    rampIn: 0.4,
-    rampInOverlap: 0.15,
-    rampOut: 0.4,
-    chainGap: 2,
-    pan: 0.5,
-    ease: "css-bezier(0.3, 0.55, 0.2, 1)",
-    panEase: "css-bezier(0.25, 0.1, 0.25, 1)",
-    followSafeRatio: 0.5,
-    followRecenter: 0.45,
-    followLookahead: 0,
-    tilt: {
-      intensity: "off",
-      rampIn: 0.4,
-      rampOut: 0.4,
-      chainGap: 2,
-      pan: 0.5
-    }
-  },
-  // Screen Studio's "instant zoom" — a cut-in (eight frames at 60 fps),
-  // tutorial tempo. Untouched in motion (the one style that never pumped
-  // and never left a ramp unsettled); the ceiling comes down with the
-  // others and the hold gains the beat a cut-in needs to be read.
-  cut: {
-    autoZoom: true,
-    clusterGap: 1.2,
-    minClusterClicks: 1,
-    targetFill: 0.5,
-    minLevel: 1.4,
-    maxLevel: 2,
-    dragLevel: 1.6,
-    lead: 0.2,
-    hold: 1.2,
-    followByDefault: false,
-    typingZoom: true,
-    typingGap: 1.2,
-    typingHold: 0.6,
-    typingMinLevel: 1.5,
-    rampIn: 0.14,
-    rampInOverlap: 0.07,
-    rampOut: 0.14,
-    chainGap: 1.3,
-    pan: 0.35,
-    ease: "css-bezier(0.2, 0, 0.4, 1)",
-    panEase: "css-bezier(0.2, 0, 0.4, 1)",
-    followSafeRatio: 0.5,
-    followRecenter: 0.35,
-    followLookahead: 0,
-    tilt: {
-      intensity: "off",
-      rampIn: 0.3,
-      rampOut: 0.3,
-      chainGap: 1.3,
-      pan: 0.35
+  if (/<(b|strong|h[1-6])[\s>]/i.test(html)) out.add(700);
+  return [...out].sort((a, b) => a - b);
+}
+function htmlLayerFaces(clip) {
+  const faces = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (f) => {
+    const key = `${f.family.toLowerCase()}|${f.weight}|${f.style}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    faces.push(f);
+  };
+  const weights = cssWeights(clip.css, clip.html);
+  for (const family of cssFamilies(clip.css)) {
+    const entry = findFontFamily(family);
+    if (!entry) continue;
+    for (const w of weights)
+      add({
+        family: entry.family,
+        url: fontFaceUrl(entry.slug, nearestFontWeight(entry, w)),
+        weight: nearestFontWeight(entry, w),
+        style: "normal"
+      });
+  }
+  for (const f of clip.fonts ?? [])
+    add({
+      family: f.family,
+      url: f.url,
+      weight: f.weight ?? 400,
+      style: f.style ?? "normal"
+    });
+  return faces;
+}
+function htmlLayerUnhostedFamilies(clip) {
+  const explicit = new Set(
+    (clip.fonts ?? []).map((f) => f.family.toLowerCase())
+  );
+  return cssFamilies(clip.css).filter(
+    (f) => !findFontFamily(f) && !explicit.has(f.toLowerCase())
+  );
+}
+function htmlLayerAssetUrls(clip) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (u) => {
+    if (!seen.has(u)) {
+      seen.add(u);
+      out.push(u);
     }
-  },
-  // Auto-zoom off (every competitor ships this switch). Camera params still
-  // apply to MANUAL spans — they move the way the default camera moves
-  // TODAY (spelled as a spread, never a copy that fossilises).
-  none: { ...glide, autoZoom: false }
+  };
+  for (const m of clip.html.matchAll(
+    /\bsrc\s*=\s*["']((?:https?:)?\/\/[^"']+)["']/gi
+  ))
+    add(m[1]);
+  for (const text of [clip.html, clip.css ?? ""])
+    for (const m of text.matchAll(
+      /url\(\s*["']?((?:https?:)?\/\/[^"')\s]+)["']?\s*\)/gi
+    ))
+      add(m[1]);
+  return out;
+}
+function htmlLayerAssets(clip) {
+  const inlinable = [];
+  const foreign = [];
+  for (const u of htmlLayerAssetUrls(clip))
+    (u.replace(/^\/\//, "https://").startsWith(HTML_LAYER_ASSET_HOST) ? inlinable : foreign).push(u);
+  return { inlinable, foreign };
+}
+function htmlLayerBleedFor(css) {
+  if (!css) return 0;
+  let worst = 0;
+  const consider = (layer) => {
+    if (/\binset\b/i.test(layer)) return;
+    const lengths = layer.replace(/[a-z-]+\([^)]*\)/gi, " ").replace(/#[0-9a-f]{3,8}/gi, " ").match(/-?\d*\.?\d+/g);
+    if (!lengths) return;
+    const [x = 0, y = 0, blur = 0, spread = 0] = lengths.map(Number);
+    worst = Math.max(
+      worst,
+      Math.abs(x) + blur + spread,
+      Math.abs(y) + blur + spread
+    );
+  };
+  for (const decl of css.match(/box-shadow\s*:[^;}]+/gi) ?? [])
+    for (const layer of splitTopLevel(decl.replace(/^[^:]*:/, "")))
+      consider(layer);
+  for (const fn of css.match(/drop-shadow\(([^)]*)\)/gi) ?? [])
+    consider(fn.replace(/^drop-shadow\(/i, "").replace(/\)$/, ""));
+  return worst ? Math.ceil(worst * 1.15) : 0;
+}
+function htmlLayerBleed(clip) {
+  return Math.max(0, Math.round(clip.bleed ?? htmlLayerBleedFor(clip.css)));
+}
+function htmlLayerPictureBox(clip) {
+  const bleed = htmlLayerBleed(clip);
+  return {
+    width: clip.box.width + bleed * 2,
+    height: clip.box.height + bleed * 2,
+    bleed
+  };
+}
+function htmlLayerWidth(clip) {
+  if (clip.width != null) return clip.width;
+  return Math.min(1, htmlLayerPictureBox(clip).width / DESIGN_FRAME_WIDTH);
+}
+var ENTITIES = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " "
 };
-var DEFAULT_ZOOM_STYLE = "glide";
-function resolveZoomStyle(name, overrides) {
-  const live = liveZoomStyleName(name) ?? DEFAULT_ZOOM_STYLE;
-  const params = { ...ZOOM_STYLES[live], ...overrides };
-  const floor = pumpFreeChainGap(params);
-  if (params.chainGap < floor) params.chainGap = floor;
-  return params;
+function htmlLayerText(html) {
+  return html.replace(/<style[\s\S]*?<\/style>/gi, " ").replace(/<[^>]*>/g, " ").replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (m, ref) => {
+    if (ref[0] === "#")
+      return String.fromCodePoint(
+        ref[1] === "x" ? parseInt(ref.slice(2), 16) : parseInt(ref.slice(1))
+      );
+    return ENTITIES[ref.toLowerCase()] ?? m;
+  }).replace(/\s+/g, " ").trim();
 }
-var ZOOM_STYLE_OPTIONS = [
-  {
-    name: "glide",
-    label: "Glide",
-    hint: "One steady zoom that travels between clicks"
-  },
-  {
-    name: "focus",
-    label: "Focus",
-    hint: "A zoom per click, framed and released"
-  },
-  {
-    name: "cinema",
-    label: "Cinema",
-    hint: "Slow moves and long holds, for content that is watched"
-  },
-  { name: "snappy", label: "Snappy", hint: "Quick, energetic zoom cycles" },
-  { name: "cut", label: "Cut", hint: "Instant zooms, no glide" },
-  {
-    name: "none",
-    label: "None",
-    hint: "No automatic zooms, add your own on the timeline"
-  }
+function htmlLayerLabel(clip) {
+  const words = htmlLayerText(clip.html);
+  return words ? words.slice(0, 24) : "HTML";
+}
+var HTML_LAYER_PLACEHOLDER = /\{\{\s*(t|data\.[A-Za-z0-9_.-]+)\s*\}\}/;
+var VOID_TAGS = [
+  "br",
+  "img",
+  "hr",
+  "input",
+  "source",
+  "col",
+  "area",
+  "base",
+  "wbr",
+  "meta",
+  "link"
 ];
-
-// src/docVersion.ts
-var DOC_SCHEMA_VERSION = 5;
-function migrateHostedDoc(raw) {
-  const version = typeof raw.docSchemaVersion === "number" ? raw.docSchemaVersion : 0;
-  if (version >= DOC_SCHEMA_VERSION) return raw;
-  let doc = raw;
-  if (version < 4 && doc.source && typeof doc.source === "object") {
-    doc = migrateMotion(doc);
+var HTML_LAYER_FOREIGN_FIELDS = [
+  "key",
+  "radius",
+  "shadow",
+  "border",
+  "loop",
+  "frame",
+  "fx",
+  "text",
+  "preset"
+];
+function htmlLayerProblems(clip) {
+  const html = clip.html ?? "";
+  const css = clip.css;
+  const raw = clip;
+  const problems = [];
+  const push2 = (code, level, message) => problems.push({ code, level, message });
+  if (!html.trim()) push2("empty", "problem", "The layer has no markup.");
+  for (const tag of VOID_TAGS) {
+    const open = new RegExp(`<${tag}(\\s[^>]*?)?>`, "gi");
+    let m;
+    let said = false;
+    while (m = open.exec(html)) {
+      if (!m[0].trimEnd().endsWith("/>") && !said) {
+        said = true;
+        push2(
+          "unclosed-void",
+          "problem",
+          `<${tag}> must close itself as <${tag} /> inside a foreignObject.`
+        );
+      }
+    }
   }
-  if (version < 5) doc = migrateZoomStyle(doc);
-  return { ...doc, docSchemaVersion: DOC_SCHEMA_VERSION };
+  const bare = html.match(/&(?!(#\d+|#x[0-9a-fA-F]+|[a-zA-Z][a-zA-Z0-9]*);)/g);
+  if (bare)
+    push2(
+      "bare-ampersand",
+      "problem",
+      `A bare "&" is a parse error; write &amp;. Found ${bare.length}.`
+    );
+  if (/<[a-zA-Z][^>]*?\s[a-zA-Z-]+=(?!["'])[^\s>]+/.test(html))
+    push2(
+      "unquoted-attr",
+      "problem",
+      "Attribute values must be quoted inside a foreignObject."
+    );
+  const bytes = html.length + (css?.length ?? 0);
+  if (bytes > HTML_LAYER_MAX_BYTES)
+    push2(
+      "too-large",
+      "problem",
+      `The layer's source is ${Math.round(bytes / 1e3)} KB; the ceiling is ${HTML_LAYER_MAX_BYTES / 1e3} KB. Inline less, or split the layer.`
+    );
+  else if (bytes > HTML_LAYER_WARN_BYTES)
+    push2(
+      "too-large",
+      "warning",
+      `The layer's source is ${Math.round(bytes / 1e3)} KB. A document carries it twice (the doc and the composed config); keep a layer under ${HTML_LAYER_WARN_BYTES / 1e3} KB.`
+    );
+  for (const field of HTML_LAYER_FOREIGN_FIELDS)
+    if (raw[field] !== void 0)
+      push2(
+        "foreign-field",
+        "problem",
+        `An HTML layer has no "${field}": its CSS is its chrome (shadow, radius, border) and its markup its content.`
+      );
+  const needed = htmlLayerBleedFor(css);
+  if (clip.bleed != null && needed > clip.bleed)
+    push2(
+      "shadow-clipped",
+      "warning",
+      `The CSS paints up to ${needed}px outside the component and bleed is ${clip.bleed}, so the shadow is clipped square at the layer's edge. Set bleed to ${needed}, or leave it out to derive it.`
+    );
+  for (const u of htmlLayerAssets({ html, css }).foreign)
+    push2(
+      "external-resource",
+      "warning",
+      `The source names ${u} by URL. The page inlines only ${HTML_LAYER_ASSET_HOST}\u2026 (the host it may fetch, and the one the fleet reaches), so this will paint blank. Upload it (vos asset upload) or inline it as a data: URI.`
+    );
+  if (/\bhref\s*=\s*["']\s*(https?:)?\/\//i.test(html))
+    push2(
+      "external-resource",
+      "warning",
+      "The source names a stylesheet or a link by URL. An SVG image fetches no href; inline the styles in the CSS."
+    );
+  const animated = /\b(animation|transition)(-[a-z-]+)?\s*:/i.test(css ?? "");
+  if (animated && !clip.live)
+    push2(
+      "wall-clock",
+      "warning",
+      "CSS animations inside a layer run on the wall clock, not the timeline: the export will not match the preview. Set live: true to scrub them to the clip's time, or animate the layer with motion and anim."
+    );
+  if (clip.live && /\banimation-delay\s*:/i.test(css ?? ""))
+    push2(
+      "live-delay",
+      "warning",
+      "A live layer scrubs its keyframes by setting animation-delay to -t, so the authored animation-delay is overridden. Fold the delay into the keyframes instead."
+    );
+  if (!clip.live && (HTML_LAYER_PLACEHOLDER.test(html) || HTML_LAYER_PLACEHOLDER.test(css ?? "")))
+    push2(
+      "placeholder-still",
+      "warning",
+      "The source carries {{t}} or {{data.\u2026}} placeholders, which fill only on a live layer (live: true); a still layer shows them as written."
+    );
+  for (const family of htmlLayerUnhostedFamilies(clip))
+    push2(
+      "unhosted-family",
+      "warning",
+      `The CSS names "${family}", which is not a hosted family (GET https://vos.so/api/fonts); the system stack stands in.`
+    );
+  return problems;
 }
-function migrateZoomStyle(doc) {
-  const name = doc.zoomStyle;
-  if (typeof name !== "string") return doc;
-  const retired = RETIRED_ZOOM_STYLES[name];
-  if (!retired) return doc;
-  return {
-    ...doc,
-    zoomStyle: retired.style,
-    tiltStyle: doc.tiltStyle ?? retired.tilt
+function wellFormedXml(svg, parseXml) {
+  const doc = parseXml(svg);
+  const errors = doc.getElementsByTagName("parsererror");
+  if (!errors.length) return { ok: true };
+  const text = (errors[0].textContent ?? "").replace(/\s+/g, " ").trim();
+  return { ok: false, error: text || "The markup is not well-formed XML." };
+}
+function fontFaceCss(faces) {
+  let out = "";
+  for (const f of faces)
+    out += `@font-face{font-family:'${f.family}';src:url(${f.dataUri}) format('woff2');font-weight:${f.weight};font-style:${f.style};font-display:block}`;
+  return out;
+}
+var fmtT = (t) => String(Math.round(t * 1e3) / 1e3);
+var escapeXml = (v) => String(v).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+function htmlLayerSvg(src, faces = [], assets = []) {
+  const bleed = Math.max(0, Math.round(src.bleed ?? 0));
+  const boxW = src.box.width + bleed * 2;
+  const boxH = src.box.height + bleed * 2;
+  const t = src.t ?? 0;
+  const fill = (text) => {
+    let out = text;
+    for (const a of assets) out = out.split(a.url).join(a.dataUri);
+    if (src.live) {
+      out = out.replace(/\{\{\s*t\s*\}\}/g, fmtT(t));
+      out = out.replace(
+        /\{\{\s*data\.([A-Za-z0-9_.-]+)\s*\}\}/g,
+        (_m, name) => {
+          const v = src.data ? src.data[name] : void 0;
+          return v == null ? "" : escapeXml(v);
+        }
+      );
+    }
+    return out;
   };
+  const scrub = src.live ? `.vos-html-layer{--vos-t:${fmtT(t)}}.vos-html-layer,.vos-html-layer *{animation-play-state:paused!important;animation-delay:calc(var(--vos-t) * -1s)!important}` : "";
+  const wrapper = `.vos-html-layer{width:${boxW}px;height:${boxH}px;box-sizing:border-box;margin:0;padding:${bleed}px;font-family:-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${boxW}" height="${boxH}" viewBox="0 0 ${boxW} ${boxH}"><foreignObject x="0" y="0" width="${boxW}" height="${boxH}"><div xmlns="http://www.w3.org/1999/xhtml" class="vos-html-layer"><style>${fontFaceCss(faces)}${wrapper}${fill(src.css ?? "")}${scrub}</style>` + fill(src.html) + `</div></foreignObject></svg>`;
 }
-
-// src/doc/studioDoc.ts
-var anchorKindOf = (doc) => "source" in doc ? "recording" : "program";
-var isRecordingDoc = (doc) => "source" in doc;
-var isProgramDoc = (doc) => !("source" in doc);
-function programDuration(doc) {
-  const own = doc.program.duration;
-  if (typeof own === "number" && own > 0) return own;
-  const cfg = doc.program.config.duration;
-  return typeof cfg === "number" && cfg > 0 ? cfg : 0;
+function fnv1a(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return h.toString(36);
 }
-function anchorSourceDuration(doc) {
-  return isRecordingDoc(doc) ? doc.source.meta.durationMs / 1e3 : programDuration(doc);
+function htmlLayerKey(clip, faces, bleed, assets = []) {
+  const src = clip.html + "\0" + (clip.css ?? "") + "\0" + clip.box.width + "x" + clip.box.height + "\0" + bleed + "\0" + faces.map((f) => `${f.family}:${f.url}:${f.weight}:${f.style}`).join("|") + " " + assets.join("|") + // A live layer's picture is also a function of t: ON_FRAME appends the
+  // moment to this key per frame. The data rides here, the moment there.
+  (clip.live ? " live " + JSON.stringify(clip.data ?? null) : "");
+  return `html:${clip.id}:${fnv1a(src)}`;
 }
-
-// src/planner/smoothing.ts
-var SNAP_BEFORE = 0.12;
-var SNAP_AFTER = 0.18;
-var SNAP_GAIN = 0.5;
-function sampleAt(points, t) {
-  if (points.length === 0) return { x: 0, y: 0 };
-  if (t <= points[0].t) return { x: points[0].x, y: points[0].y };
-  const last = points[points.length - 1];
-  if (t >= last.t) return { x: last.x, y: last.y };
-  for (let i = 1; i < points.length; i++) {
-    if (points[i].t >= t) {
-      const a = points[i - 1];
-      const b = points[i];
-      const f = (t - a.t) / (b.t - a.t || 1);
-      return { x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f };
+function htmlLayerPayload(clip) {
+  const faces = htmlLayerFaces(clip);
+  const bleed = htmlLayerBleed(clip);
+  const assets = htmlLayerAssets(clip).inlinable;
+  return {
+    key: htmlLayerKey(clip, faces, bleed, assets),
+    width: htmlLayerWidth(clip),
+    html: {
+      markup: clip.html,
+      css: clip.css ?? "",
+      box: { width: clip.box.width, height: clip.box.height },
+      bleed,
+      faces,
+      assets,
+      ...clip.live ? { live: true, ...clip.data ? { data: clip.data } : {} } : {}
     }
-  }
-  return { x: last.x, y: last.y };
+  };
 }
-function smoothCursor(track, options = {}) {
-  const factor = clamp2(options.factor ?? 0.15, 0.01, 1);
-  const fps = options.fps ?? 60;
-  const raw = track.filter((e) => e.type === "move" || e.type === "down" || e.type === "up").map((e) => ({ t: e.t / 1e3, x: e.x, y: e.y }));
-  if (raw.length === 0) return [];
-  const clicks = options.clickSnap ? track.filter((e) => e.type === "down").map((e) => ({ t: e.t / 1e3, x: e.x, y: e.y })) : [];
-  const start = raw[0].t;
-  const end = raw[raw.length - 1].t;
-  const step = 1 / fps;
-  const out = [];
-  let cx = raw[0].x;
-  let cy = raw[0].y;
-  let ci = 0;
-  for (let t = start; t <= end + 1e-9; t += step) {
-    const target = sampleAt(raw, t);
-    cx += (target.x - cx) * factor;
-    cy += (target.y - cy) * factor;
-    if (clicks.length) {
-      while (ci < clicks.length - 1 && t > clicks[ci].t + SNAP_AFTER) ci++;
-      const ck = clicks[ci];
-      const u = clamp2(
-        (t - (ck.t - SNAP_BEFORE)) / SNAP_BEFORE,
-        0,
-        t <= ck.t + SNAP_AFTER ? 1 : 0
-      );
-      const w = u * u * (3 - 2 * u) * SNAP_GAIN;
-      if (w > 0) {
-        cx += (ck.x - cx) * w;
-        cy += (ck.y - cy) * w;
+
+// src/richText/layout.ts
+var sameStyle = (a, b) => (a.f || 0) === (b.f || 0) && a.c === b.c && a.u === b.u && a.s === b.s && a.h === b.h;
+function graphemesOf(text) {
+  if (typeof Intl !== "undefined" && typeof Intl.Segmenter === "function") {
+    const seg = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+    const out = [];
+    for (const s of seg.segment(text)) out.push(s.segment);
+    return out;
+  }
+  return Array.from(text);
+}
+function tokenRanges(line) {
+  const out = [];
+  const re = /\S+\s*/g;
+  let m;
+  while ((m = re.exec(line)) !== null) {
+    out.push([m.index, m.index + m[0].length]);
+  }
+  return out.length ? out : [[0, line.length]];
+}
+function layoutText(input, measure) {
+  const memo = {};
+  const adv = (t, f) => {
+    if (!t) return 0;
+    const key = f + "\0" + t;
+    let w = memo[key];
+    if (w === void 0) {
+      w = measure(t, f);
+      memo[key] = w;
+    }
+    return w;
+  };
+  const slice = (runs, a, b) => {
+    const out = [];
+    let at = 0;
+    for (let i = 0; i < runs.length; i++) {
+      const r = runs[i];
+      const from = Math.max(a, at);
+      const to = Math.min(b, at + r.t.length);
+      if (to > from) {
+        const t = r.t.slice(from - at, to - at);
+        const last = out[out.length - 1];
+        if (last && sameStyle(last, r)) last.t += t;
+        else out.push({ ...r, t });
       }
+      at += r.t.length;
+      if (at >= b) break;
     }
-    out.push({ t, x: cx, y: cy });
-  }
+    return out;
+  };
+  const widthOf = (runs) => {
+    let w = 0;
+    for (let i = 0; i < runs.length; i++) w += adv(runs[i].t, runs[i].f || 0);
+    return w;
+  };
+  const partsIn = (frags, a, b) => {
+    const out = [];
+    for (let i = 0; i < frags.length; i++) {
+      const fr = frags[i];
+      const from = Math.max(a, fr.o);
+      const to = Math.min(b, fr.o + fr.t.length);
+      if (to <= from) continue;
+      const f = fr.f || 0;
+      const before = adv(fr.t.slice(0, from - fr.o), f);
+      out.push({
+        ...fr,
+        t: fr.t.slice(from - fr.o, to - fr.o),
+        x: fr.x + before,
+        w: adv(fr.t.slice(0, to - fr.o), f) - before,
+        o: from
+      });
+    }
+    return out;
+  };
+  const unitOf = (frags, a, b) => {
+    const parts = partsIn(frags, a, b);
+    if (!parts.length) return { x: 0, w: 0, parts };
+    const last = parts[parts.length - 1];
+    return { x: parts[0].x, w: last.x + last.w - parts[0].x, parts };
+  };
+  const lines = [];
+  const max = input.maxWidth && input.maxWidth > 0 ? input.maxWidth : 0;
+  let width = 0;
+  let base = 0;
+  const push2 = (runs, a, b) => {
+    const cut = slice(runs, a, b);
+    const frags = [];
+    let x = 0;
+    let o = 0;
+    for (let i = 0; i < cut.length; i++) {
+      const w = adv(cut[i].t, cut[i].f || 0);
+      frags.push({ ...cut[i], x, w, o });
+      x += w;
+      o += cut[i].t.length;
+    }
+    const line = { w: x, frags, a: base + a, n: b - a };
+    if (input.unit) {
+      const text = cut.map((r) => r.t).join("");
+      const units = [];
+      if (input.unit === "line") units.push(unitOf(frags, 0, text.length));
+      else if (input.unit === "word") {
+        const toks = tokenRanges(text);
+        for (let i = 0; i < toks.length; i++) {
+          units.push(unitOf(frags, toks[i][0], toks[i][1]));
+        }
+      } else {
+        let at = 0;
+        const gs = graphemesOf(text);
+        for (let i = 0; i < gs.length; i++) {
+          units.push(unitOf(frags, at, at + gs[i].length));
+          at += gs[i].length;
+        }
+      }
+      line.units = units;
+    }
+    if (x > width) width = x;
+    lines.push(line);
+  };
+  for (let li = 0; li < input.lines.length; li++) {
+    const runs = input.lines[li];
+    let len = 0;
+    for (let i = 0; i < runs.length; i++) len += runs[i].t.length;
+    if (!max || !len || widthOf(slice(runs, 0, len)) <= max) {
+      push2(runs, 0, len);
+    } else {
+      const text = runs.map((r) => r.t).join("");
+      const toks = tokenRanges(text);
+      let a = 0;
+      let b = toks[0][1];
+      for (let i = 1; i < toks.length; i++) {
+        if (widthOf(slice(runs, a, toks[i][1])) <= max) b = toks[i][1];
+        else {
+          push2(runs, a, b);
+          a = toks[i][0];
+          b = toks[i][1];
+        }
+      }
+      push2(runs, a, b);
+    }
+    base += len + 1;
+  }
+  if (!lines.length) lines.push({ w: 0, frags: [], a: 0, n: 0 });
+  return { lines, width };
+}
+var UNDERLINE_OFFSET_EM = 0.42;
+var DECORATION_THICKNESS_EM = 0.065;
+var STRIKE_OFFSET_EM = 0.02;
+var HIGHLIGHT_HALF_EM = 0.58;
+function decorationRect(kind, x, w, y, px) {
+  const x0 = Math.round(x);
+  const x1 = Math.round(x + w);
+  if (kind === "h") {
+    const top2 = Math.round(y - HIGHLIGHT_HALF_EM * px);
+    const bottom = Math.round(y + HIGHLIGHT_HALF_EM * px);
+    return { x: x0, y: top2, w: x1 - x0, h: bottom - top2 };
+  }
+  const t = Math.max(1, Math.round(DECORATION_THICKNESS_EM * px));
+  const top = Math.round(
+    y + (kind === "u" ? UNDERLINE_OFFSET_EM : STRIKE_OFFSET_EM) * px
+  );
+  return { x: x0, y: top, w: x1 - x0, h: t };
+}
+
+// src/richText/runs.ts
+var RUN_STYLE_KEYS = [
+  "weight",
+  "italic",
+  "color",
+  "underline",
+  "strike",
+  "highlight"
+];
+var MIXED = "mixed";
+function plainText(text) {
+  if (typeof text === "string") return text;
+  let out = "";
+  for (const r of text) out += r.text;
   return out;
 }
-function clamp2(v, lo, hi) {
-  return Math.max(lo, Math.min(hi, v));
+function runsOf(text) {
+  return typeof text === "string" ? text ? [{ text }] : [] : text;
 }
-
-// src/planner/autoZoom.ts
-var DWELL_MOVE_FRAC = 0.02;
-var DWELL_MIN = 0.45;
-var DWELL_MAX = 2.6;
-var DWELL_SPACING = 1.8;
-var CLUSTER_FILL = 0.85;
-var DRAG_FIT_LEVEL = 1.15;
-var PRESS_ECHO_MS = 4;
-var PRESS_ECHO_PX = 2;
-var DRAG_MIN_TRAVEL_FRAC = 0.015;
-var DRAG_MIN_S = 0.2;
-function dragsFromTrack(track, width, height) {
-  if (!(width > 0) || !(height > 0)) return [];
-  const downs = dedupePresses(track.filter((e) => e.type === "down"));
+function styleOf(run) {
+  const out = {};
+  if (typeof run.weight === "number") out.weight = run.weight;
+  if (typeof run.italic === "boolean") out.italic = run.italic;
+  if (run.color) out.color = run.color;
+  if (run.underline) out.underline = true;
+  if (run.strike) out.strike = true;
+  if (run.highlight) out.highlight = run.highlight;
+  return out;
+}
+var sameStyle2 = (a, b) => RUN_STYLE_KEYS.every((k) => a[k] === b[k]);
+var isStyled = (s) => RUN_STYLE_KEYS.some((k) => s[k] !== void 0);
+function normalizeRuns(text) {
+  if (typeof text === "string") return text;
   const out = [];
-  for (const d of downs) {
-    const up = track.find((e) => e.type === "up" && e.t > d.t);
-    if (!up) continue;
-    const t0 = d.t / 1e3;
-    const t1 = up.t / 1e3;
-    if (t1 - t0 < DRAG_MIN_S) continue;
-    let travel = 0;
-    for (const e of track) {
-      if (e.t < d.t) continue;
-      if (e.t > up.t) break;
-      if (e.type !== "move" && e.type !== "up") continue;
-      const dist = Math.hypot(e.x - d.x, e.y - d.y) / width;
-      if (dist > travel) travel = dist;
-    }
-    if (travel < DRAG_MIN_TRAVEL_FRAC) continue;
-    out.push({
-      t0,
-      t1,
-      nx: clamp012(d.x / width),
-      ny: clamp012(d.y / height),
-      travel
-    });
-  }
+  for (const r of text) {
+    if (typeof r.text !== "string" || !r.text) continue;
+    const style = styleOf(r);
+    const last = out[out.length - 1];
+    if (last && sameStyle2(last, style)) last.text += r.text;
+    else out.push({ text: r.text, ...style });
+  }
+  if (!out.length) return "";
+  if (out.length === 1 && !isStyled(out[0])) return out[0].text;
   return out;
 }
-var TYPING_MIN_PINGS = 2;
-var TYPING_MIN_DUR = 0.5;
-var TYPING_CLICK_ABSORB = 1.5;
-var TYPING_REFOCUS_FRAC = 0.08;
-function groupTrack(track, opts) {
-  const { width, height, clusterGap, typingGap, typingZoom, targetFill } = opts;
-  const minLevel = opts.minLevel ?? resolveZoomStyle().minLevel;
-  const clicks = dedupePresses(
-    track.filter((e) => e.type === "down")
-  ).map((e) => ({ t: e.t / 1e3, rect: e.rect, x: e.x, y: e.y }));
-  const sessions = typingZoom ? typingSessions(track, width, height, typingGap) : [];
-  const absorbed = /* @__PURE__ */ new Set();
-  for (const s of sessions) {
-    let best = null;
-    for (const c of clicks) {
-      if (absorbed.has(c)) continue;
-      if (c.t >= s.first || s.first - c.t > TYPING_CLICK_ABSORB) continue;
-      const [nx, ny] = fieldCenter(c, width, height);
-      if (Math.hypot(nx - s.cx, ny - s.cy) > TYPING_REFOCUS_FRAC) continue;
-      if (!best || c.t > best.t) best = c;
-    }
-    if (best) {
-      absorbed.add(best);
-      s.start = best.t;
-      s.events = [best, ...s.events];
-    }
+function snapOffset(plain, offset, dir) {
+  const o = Math.max(0, Math.min(plain.length, offset));
+  let at = 0;
+  for (const g of graphemesOf(plain)) {
+    const next = at + g.length;
+    if (o === at) return at;
+    if (o < next) return dir < 0 ? at : next;
+    at = next;
   }
-  const targets = [];
-  const surfaces = [];
-  for (const c of clicks) {
-    if (absorbed.has(c)) continue;
-    if (isSurfacePress(c, width, height, targetFill)) surfaces.push(c);
-    else targets.push(c);
+  return plain.length;
+}
+function sliceRuns(text, start, end) {
+  const out = [];
+  let at = 0;
+  for (const r of runsOf(text)) {
+    const from = Math.max(start, at);
+    const to = Math.min(end, at + r.text.length);
+    if (to > from) out.push({ ...r, text: r.text.slice(from - at, to - at) });
+    at += r.text.length;
+    if (at >= end) break;
   }
-  const chain = (list, spatial) => {
-    const clusters = [];
-    for (const c of list) {
-      const last = clusters.at(-1);
-      const prev = last?.at(-1);
-      const joins = last && prev && c.t - prev.t <= clusterGap && (!spatial || unionFitLevel(unionRect([...last, c]), width, height) >= minLevel);
-      if (joins) last.push(c);
-      else clusters.push([c]);
+  return out;
+}
+function styleOfChar(text, offset) {
+  let at = 0;
+  for (const r of runsOf(text)) {
+    if (offset < at + r.text.length) return styleOf(r);
+    at += r.text.length;
+  }
+  return {};
+}
+function styleAt(text, offset) {
+  const len = plainText(text).length;
+  if (!len) return {};
+  return styleOfChar(text, offset > 0 ? Math.min(offset, len) - 1 : 0);
+}
+function replaceRange(text, start, end, insert, style) {
+  const len = plainText(text).length;
+  const a = Math.max(0, Math.min(start, end, len));
+  const b = Math.min(len, Math.max(start, end));
+  const set = style ?? (b > a ? styleOfChar(text, a) : styleAt(text, a));
+  return normalizeRuns([
+    ...sliceRuns(text, 0, a),
+    ...insert ? [{ text: insert, ...styleOf(set) }] : [],
+    ...sliceRuns(text, b, len)
+  ]);
+}
+function rangeOf(text, start, end) {
+  const plain = plainText(text);
+  const a = snapOffset(plain, Math.min(start, end), -1);
+  const b = snapOffset(plain, Math.max(start, end), 1);
+  return b > a ? { plain, a, b } : null;
+}
+function setStyle(text, start, end, patch) {
+  const r = rangeOf(text, start, end);
+  if (!r) return normalizeRuns(text);
+  const restyle = (run) => {
+    const next = { ...run };
+    for (const k of RUN_STYLE_KEYS) {
+      if (!(k in patch)) continue;
+      if (patch[k] === void 0) delete next[k];
+      else Object.assign(next, { [k]: patch[k] });
     }
-    return clusters;
-  };
-  return {
-    sessions,
-    clusters: chain(targets, true),
-    surfaces: chain(surfaces, false)
+    return next;
   };
+  return normalizeRuns([
+    ...sliceRuns(text, 0, r.a),
+    ...sliceRuns(text, r.a, r.b).map(restyle),
+    ...sliceRuns(text, r.b, r.plain.length)
+  ]);
 }
-function dedupePresses(downs) {
-  const kept = [];
-  for (const e of downs) {
-    const prev = kept.at(-1);
-    if (prev && e.t - prev.t <= PRESS_ECHO_MS && Math.abs(e.x - prev.x) <= PRESS_ECHO_PX && Math.abs(e.y - prev.y) <= PRESS_ECHO_PX) {
-      continue;
-    }
-    kept.push(e);
-  }
-  return kept;
+function clearStyle(text, start, end) {
+  const patch = {};
+  for (const k of RUN_STYLE_KEYS) patch[k] = void 0;
+  return setStyle(text, start, end, patch);
 }
-function unionRect(clicks) {
-  let x0 = Infinity;
-  let y0 = Infinity;
-  let x1 = -Infinity;
-  let y1 = -Infinity;
-  for (const c of clicks) {
-    const r = c.rect ?? { x: c.x, y: c.y, w: 0, h: 0 };
-    x0 = Math.min(x0, r.x);
-    y0 = Math.min(y0, r.y);
-    x1 = Math.max(x1, r.x + r.w);
-    y1 = Math.max(y1, r.y + r.h);
+function commonStyle(text, start, end) {
+  const r = rangeOf(text, start, end);
+  const runs = r ? sliceRuns(text, r.a, r.b) : [];
+  const out = {};
+  if (!runs.length) return styleAt(text, start);
+  for (const k of RUN_STYLE_KEYS) {
+    const first = styleOf(runs[0])[k];
+    const agree = runs.every((run) => styleOf(run)[k] === first);
+    if (!agree) out[k] = MIXED;
+    else if (first !== void 0) out[k] = first;
   }
-  return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
-}
-function unionFitLevel(rect, width, height) {
-  const fx = rect.w > 0 ? width * CLUSTER_FILL / rect.w : Infinity;
-  const fy = rect.h > 0 ? height * CLUSTER_FILL / rect.h : Infinity;
-  return Math.min(fx, fy);
+  return out;
 }
-function fitLevel(rect, width, height, targetFill) {
-  if (!rect || rect.w <= 0 || rect.h <= 0) return null;
-  return Math.min(width * targetFill / rect.w, height * targetFill / rect.h);
+function toggleStyle(text, start, end, key, value) {
+  const on = commonStyle(text, start, end)[key] === value;
+  return setStyle(text, start, end, { [key]: on ? void 0 : value });
+}
+function diffInput(prev, next, caretAfter) {
+  const caret = Math.max(0, Math.min(next.length, caretAfter));
+  const maxTail = Math.min(prev.length, next.length - caret);
+  let tail = 0;
+  while (tail < maxTail && prev[prev.length - 1 - tail] === next[next.length - 1 - tail])
+    tail++;
+  const maxHead = Math.min(prev.length - tail, next.length - tail);
+  let head = 0;
+  while (head < maxHead && prev[head] === next[head]) head++;
+  return {
+    start: head,
+    end: prev.length - tail,
+    insert: next.slice(head, next.length - tail)
+  };
 }
-function isSurfacePress(c, width, height, targetFill) {
-  const fit = fitLevel(c.rect, width, height, targetFill);
-  return fit !== null && fit < DRAG_FIT_LEVEL;
+
+// src/overlayText.ts
+var OVERLAY_BOX_PAD_X = 0.6;
+var OVERLAY_BOX_PAD_Y = 0.35;
+var OVERLAY_BOX_RADIUS = 0.25;
+function resolveOverlayBox(clip) {
+  if (!clip.box) return null;
+  const size = resolveOverlayStyle(clip).size;
+  return {
+    color: clip.box.color,
+    opacity: clip.box.opacity ?? 1,
+    padX: (clip.box.paddingX ?? OVERLAY_BOX_PAD_X) * size,
+    padY: (clip.box.paddingY ?? OVERLAY_BOX_PAD_Y) * size,
+    radius: (clip.box.radius ?? OVERLAY_BOX_RADIUS) * size
+  };
 }
-function planAutoZoom(track, options) {
-  const style = resolveZoomStyle(options.style, options.params);
-  if (!style.autoZoom) return [];
-  const {
-    width,
-    height,
-    targetFill = style.targetFill,
-    minLevel = style.minLevel,
-    maxLevel = style.maxLevel,
-    clusterGap = style.clusterGap,
-    lead = style.lead,
-    hold = style.hold,
-    minClusterClicks = style.minClusterClicks,
-    dragLevel = style.dragLevel,
-    followByDefault = style.followByDefault,
-    typingZoom = style.typingZoom,
-    typingGap = style.typingGap,
-    typingHold = style.typingHold,
-    typingMinLevel = style.typingMinLevel,
-    duration
-  } = options;
-  const within = (spans2) => duration === void 0 ? spans2 : spans2.map((z) => ({ ...z, out: Math.min(z.out, round2(duration)) })).filter((z) => z.out - z.in >= 0.3);
-  const grouped = groupTrack(track, {
-    width,
-    height,
-    clusterGap,
-    typingGap,
-    typingZoom,
-    targetFill,
-    minLevel
-  });
-  const { sessions } = grouped;
-  const drags = dragsFromTrack(track, width, height);
-  const dragPress = new Set(drags.map((d) => round2(d.t0)));
-  const withoutDrags = (list) => list.map((cl) => cl.filter((c) => !dragPress.has(round2(c.t)))).filter((cl) => cl.length > 0);
-  const clusters = withoutDrags(grouped.clusters);
-  const surfaces = withoutDrags(grouped.surfaces);
-  const dragSpans = drags.map((d, i) => ({
-    id: `g${i}`,
-    in: round2(Math.max(0, d.t0 - lead)),
-    out: round2(d.t1 + hold),
-    level: clampZoomLevel(Math.min(Math.max(dragLevel, 1.1), maxLevel)),
-    cx: round2(d.nx),
-    cy: round2(d.ny),
-    focusMode: "auto",
-    source: "auto"
-  }));
-  const eligible = clusters.filter((c) => c.length >= minClusterClicks);
-  const clickSpans = [];
-  const dragReserved = surfaces.map((cluster, i) => {
-    const f = clusterFocus(cluster, width, height);
-    return {
-      id: `drag${i}`,
-      in: Math.max(0, cluster[0].t - lead),
-      out: cluster[cluster.length - 1].t + hold,
-      level: 1,
-      cx: f.cx,
-      cy: f.cy
-    };
-  });
-  for (const cluster of eligible) {
-    const first = cluster[0];
-    const last = cluster[cluster.length - 1];
-    const f = focusFor(cluster, width, height, targetFill, minLevel, maxLevel);
-    clickSpans.push({
-      in: Math.max(0, first.t - lead),
-      out: last.t + hold,
-      cx: f.cx,
-      cy: f.cy,
-      level: f.level
-    });
+var PRESET_FAMILY = {
+  title: "Lexend",
+  caption: "Lexend",
+  label: "JetBrains Mono"
+};
+var TEXT_PRESETS = {
+  title: {
+    stack: "Lexend, -apple-system, system-ui, sans-serif",
+    weight: 600,
+    size: 64,
+    color: "#fafafa",
+    shadow: 0.45
+  },
+  caption: {
+    stack: "Lexend, -apple-system, system-ui, sans-serif",
+    weight: 400,
+    size: 32,
+    color: "#f4f4f5",
+    shadow: 0.4
+  },
+  label: {
+    stack: "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace",
+    weight: 400,
+    size: 22,
+    color: "#e4e4e7",
+    shadow: 0.35
   }
-  clickSpans.sort((a, b) => a.in - b.in);
-  for (let i = 0; i + 1 < clickSpans.length; i++) {
-    if (clickSpans[i].out > clickSpans[i + 1].in)
-      clickSpans[i].out = clickSpans[i + 1].in;
+};
+var OVERLAY_SIZE_MIN = 12;
+var OVERLAY_SIZE_MAX = 200;
+var OVERLAY_FONT_FACES = [
+  { family: "Lexend", weight: 400, url: fontFaceUrl2("lexend", 400) },
+  { family: "Lexend", weight: 600, url: fontFaceUrl2("lexend", 600) },
+  {
+    family: "JetBrains Mono",
+    weight: 400,
+    url: fontFaceUrl2("jetbrains-mono", 400)
   }
-  for (const z of clickSpans) if (z.out - z.in < 0.3) z.dead = true;
-  const typingFloor = Math.min(Math.max(minLevel, typingMinLevel), maxLevel);
-  let typing = sessions.map((s) => {
-    const f = focusFor(
-      s.events,
-      width,
-      height,
-      targetFill,
-      typingFloor,
-      maxLevel
-    );
-    return {
-      in: Math.max(0, s.start - lead),
-      out: s.last + typingHold,
-      cx: f.cx,
-      cy: f.cy,
-      level: f.level
-    };
-  });
-  for (const t of typing) {
-    for (const z of clickSpans) {
-      if (z.dead || t.dead) continue;
-      if (t.in >= z.out || t.out <= z.in) continue;
-      if (Math.hypot(t.cx - z.cx, t.cy - z.cy) <= TYPING_REFOCUS_FRAC) {
-        t.in = Math.min(t.in, z.in);
-        t.out = Math.max(t.out, z.out);
-        z.dead = true;
-      } else if (z.in <= t.in && z.out >= t.out) {
-        t.dead = true;
-      } else if (z.in > t.in) {
-        t.out = z.in;
-      } else {
-        t.in = z.out;
-      }
-    }
+];
+function resolveOverlayStyle(clip) {
+  const presetName = clip.preset in TEXT_PRESETS ? clip.preset : "title";
+  const base = TEXT_PRESETS[presetName];
+  let stack = base.stack;
+  let weight = base.weight;
+  const familyEntry = findFontFamily2(clip.family ?? PRESET_FAMILY[presetName]);
+  if (clip.family) {
+    const quoted = clip.family.includes(" ") ? `'${clip.family}'` : clip.family;
+    stack = familyEntry ? fontStack(familyEntry) : `${quoted}, ${base.stack}`;
   }
-  typing = typing.filter((t) => !t.dead).sort((a, b) => a.in - b.in);
-  for (let i = 0; i + 1 < typing.length; i++) {
-    if (typing[i].out > typing[i + 1].in) typing[i].out = typing[i + 1].in;
+  if (clip.weight !== void 0 || clip.family) {
+    const wanted = clip.weight ?? base.weight;
+    weight = familyEntry ? nearestFontWeight2(familyEntry, wanted) : wanted;
   }
-  typing = typing.filter((t) => t.out - t.in >= 0.3);
-  const zSpans = clickSpans.filter((s) => !s.dead).sort((a, b) => a.in - b.in).map((s, i) => ({
-    id: `z${i}`,
-    in: round2(s.in),
-    out: round2(s.out),
-    level: clampZoomLevel(s.level),
-    cx: round2(s.cx),
-    cy: round2(s.cy),
-    // Follow styles ride the cursor through the span (entry + dead-zone
-    // recenters baked at lowering); typing/dwell spans stay fixed-focus.
-    ...followByDefault ? { focusMode: "auto" } : {},
-    source: "auto"
-  }));
-  const kSpans = typing.map((s, i) => ({
-    id: `k${i}`,
-    in: round2(s.in),
-    out: round2(s.out),
-    level: clampZoomLevel(s.level),
-    cx: round2(s.cx),
-    cy: round2(s.cy),
-    // Never focusMode:'auto': the dot is parked (and fading) while typing —
-    // the FIELD is the anchor, and a follow would be a no-op at best.
-    source: "auto"
-  }));
-  const spans = within([...zSpans, ...kSpans, ...dragSpans]).sort(
-    (a, b) => a.in - b.in
+  return {
+    ...base,
+    stack,
+    weight,
+    ...clip.size !== void 0 ? {
+      size: Math.min(
+        OVERLAY_SIZE_MAX,
+        Math.max(OVERLAY_SIZE_MIN, clip.size)
+      )
+    } : {},
+    ...clip.color ? { color: clip.color } : {},
+    ...clip.shadow !== void 0 ? { shadow: Math.min(1, Math.max(0, clip.shadow)) } : {},
+    fontStyle: clip.italic ? "italic" : "normal",
+    align: clip.align ?? "center",
+    letterSpacing: clip.letterSpacing ?? 0,
+    lineHeight: clip.lineHeight ?? OVERLAY_LINE_HEIGHT,
+    stroke: clip.stroke ?? null
+  };
+}
+function overlayFaceFor(clip) {
+  const entry = findFontFamily2(
+    clip.family ?? PRESET_FAMILY[clip.preset in TEXT_PRESETS ? clip.preset : "title"]
   );
-  const dwells = dwellSpans(track, width, height, maxLevel, [
-    ...spans,
-    ...dragReserved
-  ]);
-  return within([...spans, ...dwells]).sort((a, b) => a.in - b.in);
+  if (!entry) return null;
+  const weight = resolveOverlayStyle(clip).weight;
+  const inBase = OVERLAY_FONT_FACES.some(
+    (f) => f.family === entry.family && f.weight === weight
+  );
+  if (inBase) return null;
+  return {
+    family: entry.family,
+    weight,
+    url: fontFaceUrl2(entry.slug, weight)
+  };
 }
-function typingSessions(track, width, height, typingGap) {
-  const pings = track.filter((e) => e.type === "key").map((e) => ({ t: e.t / 1e3, rect: e.rect, x: e.x, y: e.y }));
-  const all = [];
-  let cur = null;
-  for (const p of pings) {
-    const [nx, ny] = fieldCenter(p, width, height);
-    if (cur && p.t - cur.last <= typingGap && Math.hypot(nx - cur.cx, ny - cur.cy) <= TYPING_REFOCUS_FRAC) {
-      cur.events.push(p);
-      cur.last = p.t;
-    } else {
-      cur = { events: [p], first: p.t, last: p.t, start: p.t, cx: nx, cy: ny };
-      all.push(cur);
+function overlayFontFaces(doc) {
+  const faces = [...OVERLAY_FONT_FACES];
+  const seen = new Set(faces.map((f) => `${f.family}|${f.weight}`));
+  const add = (face) => {
+    if (!face) return;
+    const key = `${face.family}|${face.weight}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    faces.push(face);
+  };
+  for (const o of doc.overlays ?? []) {
+    if (o.kind !== "text") continue;
+    add(overlayFaceFor(o));
+    for (const f of styledTextOf(o)?.faces ?? []) {
+      add({ family: f.f, weight: f.w, url: f.u });
     }
   }
-  return all.filter(
-    (s) => s.events.length >= TYPING_MIN_PINGS && s.last - s.first >= TYPING_MIN_DUR
-  );
+  return faces;
 }
-function fieldCenter(c, width, height) {
-  const px = c.rect ? c.rect.x + c.rect.w / 2 : c.x;
-  const py = c.rect ? c.rect.y + c.rect.h / 2 : c.y;
-  return [clamp012(px / width), clamp012(py / height)];
+function overlayLines(text) {
+  const lines = text.split("\n");
+  return lines.length ? lines : [""];
 }
-function dwellSpans(track, width, height, maxLevel, reserved) {
-  const moves = track.filter((e) => e.type === "move").map((e) => ({ t: e.t / 1e3, nx: e.x / width, ny: e.y / height }));
-  if (moves.length < 2) return [];
-  const trackEnd = track[track.length - 1].t / 1e3;
-  const candidates = [];
-  let start = 0;
-  for (let i = 1; i <= moves.length; i++) {
-    const breaks = i === moves.length || Math.hypot(moves[i].nx - moves[i - 1].nx, moves[i].ny - moves[i - 1].ny) > DWELL_MOVE_FRAC;
-    if (!breaks) continue;
-    const endT = i < moves.length ? moves[i].t : trackEnd;
-    const dur = endT - moves[start].t;
-    const opening = start === 0;
-    if (!opening && dur >= DWELL_MIN && dur <= DWELL_MAX) {
-      const run = moves.slice(start, i);
-      candidates.push({
-        center: (moves[start].t + endT) / 2,
-        cx: run.reduce((s, p) => s + p.nx, 0) / run.length,
-        cy: run.reduce((s, p) => s + p.ny, 0) / run.length,
-        strength: dur
-      });
-    }
-    start = i;
-  }
-  const sorted = [...candidates].sort((a, b) => b.strength - a.strength);
-  const sourceDuration = trackEnd;
-  const len = Math.max(1, sourceDuration * 0.05);
-  const taken = [...reserved];
-  const accepted = [];
-  const centers = [];
-  for (const c of sorted) {
-    if (centers.some((t) => Math.abs(t - c.center) < DWELL_SPACING)) continue;
-    const spanIn = Math.max(
-      0,
-      Math.min(c.center - len / 2, sourceDuration - len)
-    );
-    const spanOut = Math.min(sourceDuration, spanIn + len);
-    if (spanOut - spanIn < 0.3) continue;
-    if (taken.some((z) => spanIn < z.out && spanOut > z.in)) continue;
-    const span = {
-      id: `d${accepted.length}`,
-      in: round2(spanIn),
-      out: round2(spanOut),
-      // No element rect on moves → point zoom at the planner ceiling.
-      level: clampZoomLevel(maxLevel),
-      cx: round2(clamp012(c.cx)),
-      cy: round2(clamp012(c.cy)),
-      source: "auto"
-    };
-    accepted.push(span);
-    taken.push(span);
-    centers.push(c.center);
+function overlayPlainText(clip) {
+  return plainText(clip.text);
+}
+function familyEntryOf(clip) {
+  return findFontFamily2(
+    clip.family ?? PRESET_FAMILY[clip.preset in TEXT_PRESETS ? clip.preset : "title"]
+  ) ?? null;
+}
+function snapRunWeight(clip, weight) {
+  const entry = familyEntryOf(clip);
+  return entry ? nearestFontWeight2(entry, weight) : weight;
+}
+var BOLD_WEIGHT = 700;
+function boldWeightFor(clip) {
+  return snapRunWeight(
+    clip,
+    Math.max(BOLD_WEIGHT, resolveOverlayStyle(clip).weight)
+  );
+}
+function hashOf(text) {
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619);
   }
-  return accepted.sort((a, b) => a.in - b.in).map((z, i) => ({ ...z, id: `d${i}` }));
+  return (h >>> 0).toString(36);
 }
-function focusFor(cluster, width, height, targetFill, minLevel, maxLevel) {
-  let sx = 0;
-  let sy = 0;
-  let maxW = 0;
-  let maxH = 0;
-  for (const c of cluster) {
-    if (c.rect) {
-      sx += c.rect.x + c.rect.w / 2;
-      sy += c.rect.y + c.rect.h / 2;
-      maxW = Math.max(maxW, c.rect.w);
-      maxH = Math.max(maxH, c.rect.h);
-    } else {
-      sx += c.x;
-      sy += c.y;
+function styledTextOf(clip) {
+  const runs = normalizeRuns(clip.text);
+  if (typeof runs === "string") return null;
+  const style = resolveOverlayStyle(clip);
+  const italic = style.fontStyle === "italic";
+  const fs = [
+    { w: style.weight, ...italic ? { i: 1 } : {} }
+  ];
+  const fontOf = (w, i) => {
+    let at = fs.findIndex((f) => f.w === w && !!f.i === i);
+    if (at < 0) {
+      fs.push({ w, ...i ? { i: 1 } : {} });
+      at = fs.length - 1;
     }
+    return at;
+  };
+  const l = [[]];
+  for (const run of runs) {
+    const f = fontOf(
+      run.weight !== void 0 ? snapRunWeight(clip, run.weight) : style.weight,
+      run.italic ?? italic
+    );
+    const set = {
+      ...f ? { f } : {},
+      ...run.color ? { c: run.color } : {},
+      ...run.underline ? { u: 1 } : {},
+      ...run.strike ? { s: 1 } : {},
+      ...run.highlight ? { h: run.highlight } : {}
+    };
+    run.text.split("\n").forEach((part, i) => {
+      if (i > 0) l.push([]);
+      if (part) l[l.length - 1].push({ t: part, ...set });
+    });
   }
-  const n = cluster.length;
-  const cx = clamp012(sx / n / width);
-  const cy = clamp012(sy / n / height);
-  const own = fitLevel({ x: 0, y: 0, w: maxW, h: maxH }, width, height, targetFill) ?? maxLevel;
-  const together = unionFitLevel(unionRect(cluster), width, height);
-  return { cx, cy, level: clamp3(Math.min(own, together), minLevel, maxLevel) };
+  const entry = familyEntryOf(clip);
+  const faces = [];
+  for (const font of fs.slice(1)) {
+    if (!entry || font.w === style.weight) continue;
+    if (faces.some((x) => x.w === font.w)) continue;
+    const inBase = OVERLAY_FONT_FACES.some(
+      (b) => b.family === entry.family && b.weight === font.w
+    );
+    if (!inBase) {
+      faces.push({
+        f: entry.family,
+        w: font.w,
+        u: fontFaceUrl2(entry.slug, font.w)
+      });
+    }
+  }
+  return {
+    l,
+    fs,
+    ...faces.length ? { faces } : {},
+    h: hashOf(JSON.stringify([l, fs]))
+  };
 }
-function clusterFocus(events, width, height) {
-  let sx = 0;
-  let sy = 0;
-  let x0 = Infinity;
-  let y0 = Infinity;
-  let x1 = -Infinity;
-  let y1 = -Infinity;
-  let rects = 0;
-  for (const c of events) {
-    if (c.rect) {
-      sx += c.rect.x + c.rect.w / 2;
-      sy += c.rect.y + c.rect.h / 2;
-      x0 = Math.min(x0, c.rect.x);
-      y0 = Math.min(y0, c.rect.y);
-      x1 = Math.max(x1, c.rect.x + c.rect.w);
-      y1 = Math.max(y1, c.rect.y + c.rect.h);
-      rects++;
-    } else {
-      sx += c.x;
-      sy += c.y;
+function overlayTokens(line) {
+  return line.match(/\S+\s*/g) ?? [line];
+}
+function wrapOverlayLines(lines, measure, maxPx) {
+  if (!(maxPx > 0)) return lines;
+  const out = [];
+  for (const line of lines) {
+    if (!line || measure(line) <= maxPx) {
+      out.push(line);
+      continue;
+    }
+    let current = "";
+    for (const token of overlayTokens(line)) {
+      if (!current) {
+        current = token;
+        continue;
+      }
+      if (measure(current + token) <= maxPx) {
+        current += token;
+      } else {
+        out.push(current);
+        current = token;
+      }
     }
+    if (current) out.push(current);
   }
-  const n = Math.max(1, events.length);
-  const rect = rects > 0 ? {
-    x: clamp012(x0 / width),
-    y: clamp012(y0 / height),
-    w: clamp012((x1 - x0) / width),
-    h: clamp012((y1 - y0) / height)
-  } : null;
-  return { cx: clamp012(sx / n / width), cy: clamp012(sy / n / height), rect };
+  return out.length ? out : [""];
 }
-function clamp3(v, lo, hi) {
-  return Math.max(lo, Math.min(hi, v));
+function graphemesOf2(line) {
+  if (typeof Intl !== "undefined" && typeof Intl.Segmenter === "function") {
+    return [
+      ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
+        line
+      )
+    ].map((s) => s.segment);
+  }
+  return [...line];
 }
-function clamp012(v) {
-  return clamp3(v, 0, 1);
+function overlaySegments(text, unit) {
+  const lines = overlayLines(text);
+  if (unit === "block") return [];
+  if (unit === "line") return lines.map((l) => [l]);
+  if (unit === "word") return lines.map(overlayTokens);
+  return lines.map(graphemesOf2);
 }
-function round2(v) {
-  return Math.round(v * 1e3) / 1e3;
+var FX_DIR = { forward: 0, reverse: 1, center: 2 };
+function resolveOverlayFx(clip, clipDuration) {
+  const spec = overlayFxSpec(clip) ?? clip.fx ?? null;
+  if (!spec) return null;
+  const unit = spec.unit ?? "block";
+  const text = overlayPlainText(clip);
+  const units = overlaySegments(text, unit);
+  const n = unit === "block" ? 1 : units.reduce((sum, line) => sum + line.length, 0);
+  const upperN = unit === "line" && clip.maxWidth ? overlayLines(text).reduce(
+    (sum, line) => sum + overlayTokens(line).length,
+    0
+  ) : n;
+  const typewriter = spec.fx === "typewriter";
+  const dur = typewriter ? 1e-3 : Math.min(2, Math.max(0.05, spec.duration ?? OVERLAY_TRANSITION_DUR));
+  const defaultStagger = typewriter ? 0.05 : unit === "block" ? 0 : 0.06;
+  let st = Math.min(2, Math.max(0, spec.stagger ?? defaultStagger));
+  if (upperN > 1) {
+    const maxTotal = Math.max(dur, clipDuration * 0.9);
+    st = Math.min(st, Math.max(0, (maxTotal - dur) / (upperN - 1)));
+  }
+  const round14 = (v) => Math.round(v * 1e4) / 1e4;
+  return {
+    k: spec.fx,
+    u: unit,
+    d: FX_DIR[spec.direction ?? "forward"] ?? 0,
+    st: round14(st),
+    dur: round14(dur),
+    tt: round14(st * (upperN - 1) + dur),
+    units,
+    n
+  };
 }
-
-// src/lower/lowerToComposition.ts
-import {
-  EASINGS,
-  lerpArray as lerpArray2,
-  sample as sample2,
-  segmentRate as segmentRate2,
-  sortKeyframes as sortKeyframes2,
-  sourceToTimeline,
-  splitBySpeed as splitBySpeed3,
-  totalDuration as totalDuration3
-} from "@vosjs/timeline";
-import { timelineRuntimeCode as timelineRuntimeCode2 } from "@vosjs/timeline/bundle";
-
-// src/layout.ts
-function computeCardLayout(frame, video, W, H, zoomFocus) {
-  const s = H / 1080;
-  const pad = (frame.padding || 0) * s;
-  const ins = frame.inset ?? {};
-  const padL = ins.left == null ? pad : ins.left * W;
-  const padR = ins.right == null ? pad : ins.right * W;
-  const padT = ins.top == null ? pad : ins.top * H;
-  const padB = ins.bottom == null ? pad : ins.bottom * H;
-  const bar = frame.browserBar;
-  const vw = video.width || 16;
-  const vh = video.height || 9;
-  const fitCover = frame.fit === "cover";
-  const cf = fitCover ? 1 : Math.min(1, W / H / (vw / vh));
-  const barH = bar.kind !== "none" ? (bar.height || 44) * s * cf : 0;
-  const availW = Math.max(1, W - padL - padR);
-  const availH = Math.max(1, H - padT - padB - barH);
-  if (fitCover) {
-    const sc2 = Math.max(availW / vw, availH / vh);
-    const dw2 = vw * sc2;
-    const dh2 = vh * sc2;
-    const follow = frame.focusFollow === "camera" && zoomFocus ? zoomFocus : null;
-    const fcx = clamp013(follow ? follow.cx : frame.focus?.cx ?? 0.5);
-    const fcy = clamp013(follow ? follow.cy : frame.focus?.cy ?? 0.5);
-    const vTop = padT + barH;
-    const dx2 = Math.min(
-      padL,
-      Math.max(padL + availW - dw2, padL + availW / 2 - fcx * dw2)
+function overlayFontString(style, scale, s) {
+  const italic = style.fontStyle === "italic" ? "italic " : "";
+  return `${italic}${style.weight} ${style.size * scale * s}px ${style.stack}`;
+}
+function overlayRect(clip, measure, frameW, frameH = 1080, mediaAspect) {
+  const scale = clip.transform.scale || 1;
+  const base = {
+    cx: clip.transform.x * frameW,
+    cy: clip.transform.y * frameH,
+    rotation: clip.transform.rotation || 0
+  };
+  if (clip.kind === "html") {
+    const pb = htmlLayerPictureBox(clip);
+    const w2 = htmlLayerWidth(clip) * frameW * scale;
+    return { ...base, w: w2, h: w2 * (pb.height / pb.width) };
+  }
+  if (clip.kind !== "text") {
+    const w2 = (clip.width ?? OVERLAY_MEDIA_DEFAULT_WIDTH) * frameW * scale;
+    return { ...base, w: w2, h: w2 / (mediaAspect || 16 / 9) };
+  }
+  const style = resolveOverlayStyle(clip);
+  const font = overlayFontString(style, scale, 1);
+  const ls = style.letterSpacing * scale;
+  const styled = styledTextOf(clip);
+  let w = 0;
+  let lineCount = 0;
+  if (styled) {
+    const fonts = styled.fs.map(
+      (f) => overlayFontString(
+        { ...style, weight: f.w, fontStyle: f.i ? "italic" : "normal" },
+        scale,
+        1
+      )
     );
-    const dy2 = Math.min(
-      vTop,
-      Math.max(vTop + availH - dh2, vTop + availH / 2 - fcy * dh2)
+    const laid = layoutText(
+      { lines: styled.l, maxWidth: clip.maxWidth ? clip.maxWidth * frameW : 0 },
+      (t, f) => measure(t, fonts[f], ls)
     );
-    return {
-      W,
-      H,
-      dx: dx2,
-      dy: dy2,
-      dw: dw2,
-      dh: dh2,
-      cardX: padL,
-      cardY: padT,
-      cardW: availW,
-      cardH: availH + barH
-    };
+    w = laid.width;
+    lineCount = laid.lines.length;
+  } else {
+    const width = (t) => measure(t, font, ls);
+    const lines = clip.maxWidth ? wrapOverlayLines(
+      overlayLines(overlayPlainText(clip)),
+      width,
+      clip.maxWidth * frameW
+    ) : overlayLines(overlayPlainText(clip));
+    for (const line of lines) w = Math.max(w, width(line));
+    lineCount = lines.length;
   }
-  const sc = Math.min(availW / vw, availH / vh);
-  const dw = vw * sc;
-  const dh = vh * sc;
-  const dx = padL + (availW - dw) / 2;
-  const dy = padT + barH + (availH - dh) / 2;
+  const lineH = style.size * scale * style.lineHeight;
+  const box = resolveOverlayBox(clip);
+  const padX = box ? box.padX * scale : 0;
+  const padY = box ? box.padY * scale : 0;
   return {
-    W,
-    H,
-    dx,
-    dy,
-    dw,
-    dh,
-    cardX: dx,
-    cardY: dy - barH,
-    cardW: dw,
-    cardH: dh + barH
+    ...base,
+    w: Math.max(w, style.size * scale * 0.6) + padX * 2,
+    // empty text still selectable
+    h: lineCount * lineH + padY * 2
   };
 }
-function docCardLayout(doc, media) {
-  const meta = doc.source.meta;
-  const H = 1080;
-  const W = Math.max(
-    2,
-    Math.round(H * aspectRatioValue(doc.frame.aspectRatio, meta))
-  );
-  const src = mediaSource(doc, media) ?? doc.source;
-  const sm = src.meta;
-  return computeCardLayout(
-    mediaFrame(doc, media),
-    {
-      width: sm.captureWidth ?? sm.width,
-      height: sm.captureHeight ?? sm.height
-    },
-    W,
-    H
-  );
+function overlayHit(rect, px, py, padPx = 8) {
+  let dx = px - rect.cx;
+  let dy = py - rect.cy;
+  if (rect.rotation) {
+    const a = -rect.rotation * Math.PI / 180;
+    const rx = dx * Math.cos(a) - dy * Math.sin(a);
+    const ry = dx * Math.sin(a) + dy * Math.cos(a);
+    dx = rx;
+    dy = ry;
+  }
+  return Math.abs(dx) <= rect.w / 2 + padPx && Math.abs(dy) <= rect.h / 2 + padPx;
 }
-function recommendedExportResolution(doc) {
-  const meta = doc.source.meta;
-  const capW = meta.captureWidth ?? meta.width;
-  const video = { width: capW, height: meta.captureHeight ?? meta.height };
-  let best = EXPORT_RESOLUTION_OPTIONS[0];
-  for (const r of EXPORT_RESOLUTION_OPTIONS) {
-    const { width, height } = resolveExportSize(doc, r);
-    if (computeCardLayout(doc.frame, video, width, height).dw > capW) break;
-    best = r;
+
+// src/richText/migrateEmphasis.ts
+function parseLine(line) {
+  const chars = [];
+  const marker = [];
+  for (let i = 0; i < line.length; i++) {
+    if (line[i] === "\\" && line[i + 1] === "*") {
+      chars.push("*");
+      marker.push(false);
+      i++;
+    } else {
+      chars.push(line[i]);
+      marker.push(line[i] === "*");
+    }
+  }
+  const keep = chars.map(() => true);
+  const bold = [];
+  for (let i = 0; i < chars.length; i++) {
+    if (!marker[i]) continue;
+    let j = i + 1;
+    while (j < chars.length && !marker[j]) j++;
+    if (j >= chars.length) break;
+    if (!chars.slice(i + 1, j).join("").trim()) {
+      i = j - 1;
+      continue;
+    }
+    keep[i] = false;
+    keep[j] = false;
+    for (let k = i + 1; k < j; k++) bold[k] = true;
+    i = j;
   }
-  return best;
+  const out = [];
+  for (let i = 0; i < chars.length; i++) {
+    if (keep[i]) out.push({ c: chars[i], b: !!bold[i] && !/\s/.test(chars[i]) });
+  }
+  return out;
 }
-function camBubbleRect(cam, W, H = 1080) {
-  const s = H / 1080;
-  const size = Math.max(40, (cam.size || 0.25) * H);
-  const mg = 24 * s;
-  const x = cam.x != null ? cam.x * W - size / 2 : cam.position.includes("right") ? W - mg - size : mg;
-  const y = cam.y != null ? cam.y * H - size / 2 : cam.position.includes("top") ? mg : H - mg - size;
+function marksEmphasis(text) {
+  return text.split("\n").some((line) => parseLine(line).some((x) => x.b));
+}
+function migrateTextClip(clip) {
+  const legacy = clip;
+  if (!("emphasis" in legacy)) return clip;
+  const { emphasis, ...rest } = legacy;
+  const next = rest;
+  if (!emphasis || typeof legacy.text !== "string") return next;
+  const weight = emphasis.weight !== void 0 ? snapRunWeight(next, emphasis.weight) : boldWeightFor(next);
+  const runs = [];
+  legacy.text.split("\n").forEach((line, li) => {
+    if (li > 0) runs.push({ text: "\n" });
+    for (const { c, b } of parseLine(line)) {
+      runs.push(
+        b ? {
+          text: c,
+          weight,
+          ...emphasis.color ? { color: emphasis.color } : {}
+        } : { text: c }
+      );
+    }
+  });
+  return { ...next, text: normalizeRuns(runs) };
+}
+function migrateText(doc) {
+  const overlays = Array.isArray(doc.overlays) ? doc.overlays : [];
+  const legacy = overlays.some((o) => o.kind === "text" && "emphasis" in o);
+  if (!legacy) return doc;
   return {
-    x,
-    y,
-    size,
-    radius: cam.shape === "rounded" ? (cam.radius ?? 18) * s : size / 2
+    ...doc,
+    overlays: overlays.map((o) => o.kind === "text" ? migrateTextClip(o) : o)
   };
 }
-function focusBounds(level, layout, camera = "card", screen) {
-  if (camera === "stage" && screen && level > 1.001) {
-    return { minX: 0, maxX: 1, minY: 0, maxY: 1 };
-  }
-  if (level <= 1.001) {
-    return { minX: 0.5, maxX: 0.5, minY: 0.5, maxY: 0.5 };
-  }
-  if (camera === "stage") {
-    const x2 = stageAxisBounds(
-      layout.dx,
-      layout.dw,
-      layout.cardX,
-      layout.cardW,
-      layout.W,
-      level
-    );
-    const y2 = stageAxisBounds(
-      layout.dy,
-      layout.dh,
-      layout.cardY,
-      layout.cardH,
-      layout.H,
-      level
-    );
-    return { minX: x2.min, maxX: x2.max, minY: y2.min, maxY: y2.max };
+
+// src/zoomStyle.ts
+var RETIRED_ZOOM_STYLES = {
+  keynote: { style: "glide", tilt: "medium" },
+  drift: { style: "cinema", tilt: "subtle" }
+};
+function liveZoomStyleName(name) {
+  if (!name) return null;
+  if (name in ZOOM_STYLES) return name;
+  return RETIRED_ZOOM_STYLES[name]?.style ?? null;
+}
+var HOLD_DRIFT_MAX = 0.15;
+var PUMP_REST = 1;
+function pumpFreeChainGap(p) {
+  return p.rampOut + (p.rampIn - p.rampInOverlap) + PUMP_REST;
+}
+var glide = {
+  autoZoom: true,
+  clusterGap: 3,
+  minClusterClicks: 1,
+  targetFill: 0.42,
+  minLevel: 1.3,
+  maxLevel: 1.8,
+  dragLevel: 1.5,
+  lead: 0.35,
+  hold: 1.2,
+  followByDefault: true,
+  typingZoom: true,
+  typingGap: 2.5,
+  typingHold: 1.1,
+  typingMinLevel: 1.4,
+  rampIn: 0.6,
+  rampInOverlap: 0.2,
+  rampOut: 0.5,
+  chainGap: 3,
+  pan: 0.55,
+  // The reference's corner trace at 60 fps: a quarter of the move by a
+  // fifth of the time, two thirds by half, nine tenths by three
+  // quarters, over ~0.6 s. Fitted against those three points,
+  // (0.36, 0, 0.4, 1) is the closest cubic (15 / 64 / 93 %; half the
+  // move at ~245 ms and 90 % at ~425 ms at 0.6 s): a gentle start and a
+  // long settle. CSS ease (0.25, 0.1, 0.25, 1) reached the midpoint
+  // 70 ms earlier and read a touch fast; (0.16, 1, 0.3, 1) put half the
+  // move in the first sixty milliseconds and read as a twitch.
+  ease: "css-bezier(0.36, 0, 0.4, 1)",
+  panEase: "css-bezier(0.36, 0, 0.4, 1)",
+  followSafeRatio: 0.45,
+  followRecenter: 0.55,
+  followLookahead: 0.4,
+  tilt: {
+    intensity: "off",
+    rampIn: 0.6,
+    rampOut: 0.5,
+    chainGap: 3,
+    pan: 0.55
   }
-  const x = axisBounds(
-    layout.dx,
-    layout.dw,
-    layout.cardX,
-    layout.cardW,
-    layout.W,
-    level
-  );
-  const y = axisBounds(
-    layout.dy,
-    layout.dh,
-    layout.cardY,
-    layout.cardH,
-    layout.H,
-    level
-  );
-  return { minX: x.min, maxX: x.max, minY: y.min, maxY: y.max };
+};
+var ZOOM_STYLES = {
+  glide,
+  // Screen Studio "Focused" / Recordly — a block per click, framed and
+  // released, no travel. The spring-settled family ease (near-linear onset,
+  // long settle) at the default's tempo: 0.8 s in, 0.65 s out, and a beat
+  // of 1.5 s after the click so the block is read before it goes. At its
+  // 2026-07 timing (1.4 s in, 1.0 s out around a 1.35 s span) a lone click
+  // spent 74% of its beat moving and every dwell or sped-up click was
+  // shorter than the ramp, which the lowering compressed into a cut.
+  focus: {
+    autoZoom: true,
+    clusterGap: 1.5,
+    minClusterClicks: 1,
+    targetFill: 0.5,
+    minLevel: 1.4,
+    maxLevel: 2,
+    dragLevel: 1.6,
+    lead: 0.35,
+    hold: 1.5,
+    followByDefault: false,
+    typingZoom: true,
+    typingGap: 2,
+    typingHold: 1.3,
+    typingMinLevel: 1.5,
+    rampIn: 0.8,
+    rampInOverlap: 0.25,
+    rampOut: 0.65,
+    chainGap: 2.4,
+    pan: 0.7,
+    ease: "css-bezier(0.28, 0.03, 0.09, 1)",
+    panEase: "css-bezier(0.26, 0.08, 0.2, 1)",
+    followSafeRatio: 0.5,
+    followRecenter: 0.55,
+    followLookahead: 0,
+    tilt: {
+      intensity: "off",
+      rampIn: 0.8,
+      rampOut: 0.65,
+      chainGap: 2.4,
+      pan: 0.7
+    }
+  },
+  // Screen Studio "Smooth" — the long-HOLD style: 1.2 s in, 1.0 s out,
+  // two-second holds, chains across 3.5 s so a slow clip travels rather
+  // than pumps, and the default's level range, because a watched clip
+  // wants the frame, not the magnifier. Its ramps still exceed a dwell or
+  // a sped-up click; the lowering fits them to the room.
+  cinema: {
+    autoZoom: true,
+    clusterGap: 2.4,
+    minClusterClicks: 1,
+    targetFill: 0.42,
+    minLevel: 1.3,
+    maxLevel: 1.8,
+    dragLevel: 1.5,
+    lead: 0.6,
+    hold: 2,
+    followByDefault: true,
+    typingZoom: true,
+    typingGap: 3,
+    typingHold: 1.8,
+    typingMinLevel: 1.4,
+    rampIn: 1.2,
+    rampInOverlap: 0.4,
+    rampOut: 1,
+    chainGap: 3.5,
+    pan: 1.1,
+    ease: "css-bezier(0.33, 0, 0.15, 1)",
+    panEase: "css-bezier(0.33, 0, 0.22, 1)",
+    followSafeRatio: 0.6,
+    followRecenter: 0.9,
+    followLookahead: 0.5,
+    tilt: {
+      intensity: "off",
+      rampIn: 1.2,
+      rampOut: 1,
+      chainGap: 3.5,
+      pan: 1.1
+    }
+  },
+  // The studio's original pace with the instant-velocity onset defect fixed:
+  // 0.4 s cycles on the onset-capped ease, the 2.5× ceiling of the 2026-07
+  // comparison's defect two brought to 2.2, a chain gap past its pump band.
+  snappy: {
+    autoZoom: true,
+    clusterGap: 1.2,
+    minClusterClicks: 1,
+    targetFill: 0.5,
+    minLevel: 1.4,
+    maxLevel: 2.2,
+    dragLevel: 1.6,
+    lead: 0.25,
+    hold: 1.2,
+    followByDefault: false,
+    typingZoom: true,
+    typingGap: 1.6,
+    typingHold: 0.9,
+    typingMinLevel: 1.5,
+    rampIn: 0.4,
+    rampInOverlap: 0.15,
+    rampOut: 0.4,
+    chainGap: 2,
+    pan: 0.5,
+    ease: "css-bezier(0.3, 0.55, 0.2, 1)",
+    panEase: "css-bezier(0.25, 0.1, 0.25, 1)",
+    followSafeRatio: 0.5,
+    followRecenter: 0.45,
+    followLookahead: 0,
+    tilt: {
+      intensity: "off",
+      rampIn: 0.4,
+      rampOut: 0.4,
+      chainGap: 2,
+      pan: 0.5
+    }
+  },
+  // Screen Studio's "instant zoom" — a cut-in (eight frames at 60 fps),
+  // tutorial tempo. Untouched in motion (the one style that never pumped
+  // and never left a ramp unsettled); the ceiling comes down with the
+  // others and the hold gains the beat a cut-in needs to be read.
+  cut: {
+    autoZoom: true,
+    clusterGap: 1.2,
+    minClusterClicks: 1,
+    targetFill: 0.5,
+    minLevel: 1.4,
+    maxLevel: 2,
+    dragLevel: 1.6,
+    lead: 0.2,
+    hold: 1.2,
+    followByDefault: false,
+    typingZoom: true,
+    typingGap: 1.2,
+    typingHold: 0.6,
+    typingMinLevel: 1.5,
+    rampIn: 0.14,
+    rampInOverlap: 0.07,
+    rampOut: 0.14,
+    chainGap: 1.3,
+    pan: 0.35,
+    ease: "css-bezier(0.2, 0, 0.4, 1)",
+    panEase: "css-bezier(0.2, 0, 0.4, 1)",
+    followSafeRatio: 0.5,
+    followRecenter: 0.35,
+    followLookahead: 0,
+    tilt: {
+      intensity: "off",
+      rampIn: 0.3,
+      rampOut: 0.3,
+      chainGap: 1.3,
+      pan: 0.35
+    }
+  },
+  // Auto-zoom off (every competitor ships this switch). Camera params still
+  // apply to MANUAL spans — they move the way the default camera moves
+  // TODAY (spelled as a spread, never a copy that fossilises).
+  none: { ...glide, autoZoom: false }
+};
+var DEFAULT_ZOOM_STYLE = "glide";
+function resolveZoomStyle(name, overrides) {
+  const live = liveZoomStyleName(name) ?? DEFAULT_ZOOM_STYLE;
+  const params = { ...ZOOM_STYLES[live], ...overrides };
+  const floor = pumpFreeChainGap(params);
+  if (params.chainGap < floor) params.chainGap = floor;
+  return params;
 }
-function axisBounds(anchorOff, anchorSize, coverOff, coverSize, viewport, level) {
-  const k = 1 - 1 / level;
-  let lo = (coverOff / k - anchorOff) / anchorSize;
-  let hi = ((coverOff + coverSize - viewport / level) / k - anchorOff) / anchorSize;
-  if (lo > hi) {
-    const mid = (lo + hi) / 2;
-    lo = mid;
-    hi = mid;
+var ZOOM_STYLE_OPTIONS = [
+  {
+    name: "glide",
+    label: "Glide",
+    hint: "One steady zoom that travels between clicks"
+  },
+  {
+    name: "focus",
+    label: "Focus",
+    hint: "A zoom per click, framed and released"
+  },
+  {
+    name: "cinema",
+    label: "Cinema",
+    hint: "Slow moves and long holds, for content that is watched"
+  },
+  { name: "snappy", label: "Snappy", hint: "Quick, energetic zoom cycles" },
+  { name: "cut", label: "Cut", hint: "Instant zooms, no glide" },
+  {
+    name: "none",
+    label: "None",
+    hint: "No automatic zooms, add your own on the timeline"
   }
-  return { min: clamp013(lo), max: clamp013(hi) };
-}
-function stageAxisBounds(anchorOff, anchorSize, coverOff, coverSize, viewport, level) {
-  const b = CAMERA_COVER_MIN / 2 * viewport;
-  let lo = (coverOff + b / level - anchorOff) / anchorSize;
-  let hi = (coverOff + coverSize - b / level - anchorOff) / anchorSize;
-  if (lo > hi) {
-    const mid = (lo + hi) / 2;
-    lo = mid;
-    hi = mid;
+];
+
+// src/docVersion.ts
+var DOC_SCHEMA_VERSION = 6;
+function migrateHostedDoc(raw) {
+  const version = typeof raw.docSchemaVersion === "number" ? raw.docSchemaVersion : 0;
+  const read = migrateText(raw);
+  if (version >= DOC_SCHEMA_VERSION) return read;
+  let doc = read;
+  if (version < 4 && doc.source && typeof doc.source === "object") {
+    doc = migrateMotion(doc);
   }
-  return { min: clamp013(lo), max: clamp013(hi) };
+  if (version < 5) doc = migrateZoomStyle(doc);
+  return { ...doc, docSchemaVersion: DOC_SCHEMA_VERSION };
 }
-function clampFocus(cx, cy, level, layout, camera = "card", screen) {
-  const b = focusBounds(level, layout, camera, screen);
+function migrateZoomStyle(doc) {
+  const name = doc.zoomStyle;
+  if (typeof name !== "string") return doc;
+  const retired = RETIRED_ZOOM_STYLES[name];
+  if (!retired) return doc;
   return {
-    cx: Math.min(b.maxX, Math.max(b.minX, cx)),
-    cy: Math.min(b.maxY, Math.max(b.minY, cy))
+    ...doc,
+    zoomStyle: retired.style,
+    tiltStyle: doc.tiltStyle ?? retired.tilt
   };
 }
-function clamp013(v) {
-  return Math.max(0, Math.min(1, v));
+
+// src/doc/studioDoc.ts
+var anchorKindOf = (doc) => "source" in doc ? "recording" : "program";
+var isRecordingDoc = (doc) => "source" in doc;
+var isProgramDoc = (doc) => !("source" in doc);
+function programDuration(doc) {
+  const own = doc.program.duration;
+  if (typeof own === "number" && own > 0) return own;
+  const cfg = doc.program.config.duration;
+  return typeof cfg === "number" && cfg > 0 ? cfg : 0;
 }
-function screenPoint(layout, camera, screen) {
-  return camera === "stage" && screen ? { ox: screen.x * layout.W, oy: screen.y * layout.H } : { ox: layout.W / 2, oy: layout.H / 2 };
+function anchorSourceDuration(doc) {
+  return isRecordingDoc(doc) ? doc.source.meta.durationMs / 1e3 : programDuration(doc);
 }
-function cameraModel(frame) {
-  return frame?.camera === "stage" ? "stage" : "card";
+
+// src/planner/smoothing.ts
+var SNAP_BEFORE = 0.12;
+var SNAP_AFTER = 0.18;
+var SNAP_GAIN = 0.5;
+function sampleAt(points, t) {
+  if (points.length === 0) return { x: 0, y: 0 };
+  if (t <= points[0].t) return { x: points[0].x, y: points[0].y };
+  const last = points[points.length - 1];
+  if (t >= last.t) return { x: last.x, y: last.y };
+  for (let i = 1; i < points.length; i++) {
+    if (points[i].t >= t) {
+      const a = points[i - 1];
+      const b = points[i];
+      const f = (t - a.t) / (b.t - a.t || 1);
+      return { x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f };
+    }
+  }
+  return { x: last.x, y: last.y };
 }
-var CAMERA_CENTRE_RAMP = 0.3;
-var CAMERA_COVER_MIN = 0.8;
-function cameraCentring(level) {
-  const u = clamp013((level - 1) / CAMERA_CENTRE_RAMP);
-  return u * u * (3 - 2 * u);
+function smoothCursor(track, options = {}) {
+  const factor = clamp2(options.factor ?? 0.15, 0.01, 1);
+  const fps = options.fps ?? 60;
+  const raw = track.filter((e) => e.type === "move" || e.type === "down" || e.type === "up").map((e) => ({ t: e.t / 1e3, x: e.x, y: e.y }));
+  if (raw.length === 0) return [];
+  const clicks = options.clickSnap ? track.filter((e) => e.type === "down").map((e) => ({ t: e.t / 1e3, x: e.x, y: e.y })) : [];
+  const start = raw[0].t;
+  const end = raw[raw.length - 1].t;
+  const step = 1 / fps;
+  const out = [];
+  let cx = raw[0].x;
+  let cy = raw[0].y;
+  let ci = 0;
+  for (let t = start; t <= end + 1e-9; t += step) {
+    const target = sampleAt(raw, t);
+    cx += (target.x - cx) * factor;
+    cy += (target.y - cy) * factor;
+    if (clicks.length) {
+      while (ci < clicks.length - 1 && t > clicks[ci].t + SNAP_AFTER) ci++;
+      const ck = clicks[ci];
+      const u = clamp2(
+        (t - (ck.t - SNAP_BEFORE)) / SNAP_BEFORE,
+        0,
+        t <= ck.t + SNAP_AFTER ? 1 : 0
+      );
+      const w = u * u * (3 - 2 * u) * SNAP_GAIN;
+      if (w > 0) {
+        cx += (ck.x - cx) * w;
+        cy += (ck.y - cy) * w;
+      }
+    }
+    out.push({ t, x: cx, y: cy });
+  }
+  return out;
 }
-function zoomView(level, cx, cy, layout, camera = "card", centring, screen) {
-  const L = Math.max(1, level);
-  const fx = layout.dx + cx * layout.dw;
-  const fy = layout.dy + cy * layout.dh;
-  const { ox, oy } = screenPoint(layout, camera, screen);
-  const t = camera === "stage" ? clamp013(centring ?? 1) : 0;
-  const wcx = fx + (ox - fx) / L * (1 - t);
-  const wcy = fy + (oy - fy) / L * (1 - t);
-  return { level: L, fx, fy, wcx, wcy, ox, oy };
+function clamp2(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, v));
 }
-function zoomViewport(level, cx, cy, layout, camera = "card", centring, screen) {
-  const v = zoomView(level, cx, cy, layout, camera, centring, screen);
-  const size = 1 / v.level;
-  const mx = v.wcx + (layout.W / 2 - v.ox) / v.level;
-  const my = v.wcy + (layout.H / 2 - v.oy) / v.level;
+
+// src/planner/autoZoom.ts
+var DWELL_MOVE_FRAC = 0.02;
+var DWELL_MIN = 0.45;
+var DWELL_MAX = 2.6;
+var DWELL_SPACING = 1.8;
+var CLUSTER_FILL = 0.85;
+var DRAG_FIT_LEVEL = 1.15;
+var PRESS_ECHO_MS = 4;
+var PRESS_ECHO_PX = 2;
+var DRAG_MIN_TRAVEL_FRAC = 0.015;
+var DRAG_MIN_S = 0.2;
+function dragsFromTrack(track, width, height) {
+  if (!(width > 0) || !(height > 0)) return [];
+  const downs = dedupePresses(track.filter((e) => e.type === "down"));
+  const out = [];
+  for (const d of downs) {
+    const up = track.find((e) => e.type === "up" && e.t > d.t);
+    if (!up) continue;
+    const t0 = d.t / 1e3;
+    const t1 = up.t / 1e3;
+    if (t1 - t0 < DRAG_MIN_S) continue;
+    let travel = 0;
+    for (const e of track) {
+      if (e.t < d.t) continue;
+      if (e.t > up.t) break;
+      if (e.type !== "move" && e.type !== "up") continue;
+      const dist = Math.hypot(e.x - d.x, e.y - d.y) / width;
+      if (dist > travel) travel = dist;
+    }
+    if (travel < DRAG_MIN_TRAVEL_FRAC) continue;
+    out.push({
+      t0,
+      t1,
+      nx: clamp012(d.x / width),
+      ny: clamp012(d.y / height),
+      travel
+    });
+  }
+  return out;
+}
+var TYPING_MIN_PINGS = 2;
+var TYPING_MIN_DUR = 0.5;
+var TYPING_CLICK_ABSORB = 1.5;
+var TYPING_REFOCUS_FRAC = 0.08;
+function groupTrack(track, opts) {
+  const { width, height, clusterGap, typingGap, typingZoom, targetFill } = opts;
+  const minLevel = opts.minLevel ?? resolveZoomStyle().minLevel;
+  const clicks = dedupePresses(
+    track.filter((e) => e.type === "down")
+  ).map((e) => ({ t: e.t / 1e3, rect: e.rect, x: e.x, y: e.y }));
+  const sessions = typingZoom ? typingSessions(track, width, height, typingGap) : [];
+  const absorbed = /* @__PURE__ */ new Set();
+  for (const s of sessions) {
+    let best = null;
+    for (const c of clicks) {
+      if (absorbed.has(c)) continue;
+      if (c.t >= s.first || s.first - c.t > TYPING_CLICK_ABSORB) continue;
+      const [nx, ny] = fieldCenter(c, width, height);
+      if (Math.hypot(nx - s.cx, ny - s.cy) > TYPING_REFOCUS_FRAC) continue;
+      if (!best || c.t > best.t) best = c;
+    }
+    if (best) {
+      absorbed.add(best);
+      s.start = best.t;
+      s.events = [best, ...s.events];
+    }
+  }
+  const targets = [];
+  const surfaces = [];
+  for (const c of clicks) {
+    if (absorbed.has(c)) continue;
+    if (isSurfacePress(c, width, height, targetFill)) surfaces.push(c);
+    else targets.push(c);
+  }
+  const chain = (list, spatial) => {
+    const clusters = [];
+    for (const c of list) {
+      const last = clusters.at(-1);
+      const prev = last?.at(-1);
+      const joins = last && prev && c.t - prev.t <= clusterGap && (!spatial || unionFitLevel(unionRect([...last, c]), width, height) >= minLevel);
+      if (joins) last.push(c);
+      else clusters.push([c]);
+    }
+    return clusters;
+  };
   return {
-    x: (mx - layout.W / (2 * v.level)) / layout.W,
-    y: (my - layout.H / (2 * v.level)) / layout.H,
-    w: size,
-    h: size
+    sessions,
+    clusters: chain(targets, true),
+    surfaces: chain(surfaces, false)
   };
 }
-function focusForViewportCentre(cX, cY, level, layout, camera = "card", centring, screen) {
-  const L = Math.max(1, level);
-  const t = camera === "stage" ? clamp013(centring ?? 1) : 0;
-  const a = 1 - (1 - t) / L;
-  if (a <= 1e-6) return { cx: 0.5, cy: 0.5 };
-  const { ox, oy } = screenPoint(layout, camera, screen);
-  const fx = (cX * layout.W - ox * (1 - t) / L - (layout.W / 2 - ox) / L) / a;
-  const fy = (cY * layout.H - oy * (1 - t) / L - (layout.H / 2 - oy) / L) / a;
-  return { cx: (fx - layout.dx) / layout.dw, cy: (fy - layout.dy) / layout.dh };
+function dedupePresses(downs) {
+  const kept = [];
+  for (const e of downs) {
+    const prev = kept.at(-1);
+    if (prev && e.t - prev.t <= PRESS_ECHO_MS && Math.abs(e.x - prev.x) <= PRESS_ECHO_PX && Math.abs(e.y - prev.y) <= PRESS_ECHO_PX) {
+      continue;
+    }
+    kept.push(e);
+  }
+  return kept;
 }
-function levelForFocusFraction(frac) {
-  if (!(frac > 0)) return clampZoomLevel(Number.POSITIVE_INFINITY);
-  return clampZoomLevel(Math.max(1.1, 1 / frac));
+function unionRect(clicks) {
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -Infinity;
+  let y1 = -Infinity;
+  for (const c of clicks) {
+    const r = c.rect ?? { x: c.x, y: c.y, w: 0, h: 0 };
+    x0 = Math.min(x0, r.x);
+    y0 = Math.min(y0, r.y);
+    x1 = Math.max(x1, r.x + r.w);
+    y1 = Math.max(y1, r.y + r.h);
+  }
+  return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
 }
-
-// src/stage.ts
-var CARD_FOV = 30;
-var OVERLAY_Z = -2;
-var CARD_Z = -4;
-var BACKGROUND_Z = -6;
-var CARD_OVERSCAN_STEP = 0.05;
-var CARD_OVERSCAN_MAX = 4;
-var CAMERA_NEAR = 0.1;
-var CAMERA_FAR = 100;
-function planeSizeAtDepth(distance, fovDeg, aspect) {
-  const height = 2 * Math.abs(distance) * Math.tan(fovDeg * Math.PI / 180 / 2);
-  return { width: height * aspect, height };
+function unionFitLevel(rect, width, height) {
+  const fx = rect.w > 0 ? width * CLUSTER_FILL / rect.w : Infinity;
+  const fy = rect.h > 0 ? height * CLUSTER_FILL / rect.h : Infinity;
+  return Math.min(fx, fy);
 }
-function cardPointToScreen(u, v) {
-  return { sx: u, sy: v };
+function fitLevel(rect, width, height, targetFill) {
+  if (!rect || rect.w <= 0 || rect.h <= 0) return null;
+  return Math.min(width * targetFill / rect.w, height * targetFill / rect.h);
 }
-
-// src/overlayText.ts
-import {
-  findFontFamily as findFontFamily2,
-  fontFaceUrl as fontFaceUrl2,
-  fontStack,
-  nearestFontWeight as nearestFontWeight2
-} from "@vosjs/shared";
-
-// src/htmlLayer.ts
-import { findFontFamily, fontFaceUrl, nearestFontWeight } from "@vosjs/shared";
-var DESIGN_FRAME_WIDTH = 1920;
-var HTML_LAYER_WARN_BYTES = 32e3;
-var HTML_LAYER_MAX_BYTES = 128e3;
-var HTML_LAYER_LIVE_HZ = 60;
-var HTML_LAYER_ASSET_HOST = "https://assets.vos.so/";
-function splitTopLevel(value) {
-  const out = [];
-  let depth = 0;
-  let cur = "";
-  for (const ch of value) {
-    if (ch === "(") depth++;
-    else if (ch === ")") depth--;
-    if (ch === "," && depth === 0) {
-      out.push(cur);
-      cur = "";
-    } else cur += ch;
-  }
-  if (cur.trim()) out.push(cur);
-  return out;
+function isSurfacePress(c, width, height, targetFill) {
+  const fit = fitLevel(c.rect, width, height, targetFill);
+  return fit !== null && fit < DRAG_FIT_LEVEL;
 }
-var unquote = (s) => s.trim().replace(/^['"]/, "").replace(/['"]$/, "").trim();
-var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
-  "serif",
-  "sans-serif",
-  "monospace",
-  "cursive",
-  "fantasy",
-  "system-ui",
-  "ui-sans-serif",
-  "ui-serif",
-  "ui-monospace",
-  "ui-rounded",
-  "emoji",
-  "math",
-  "fangsong",
-  "inherit",
-  "initial",
-  "unset"
-]);
-function cssFamilies(css) {
-  if (!css) return [];
-  const out = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (const decl of css.match(/font-family\s*:[^;}]+/gi) ?? []) {
-    for (const item of splitTopLevel(decl.replace(/^[^:]*:/, ""))) {
-      const name = unquote(item.replace(/!important/i, ""));
-      if (!name) continue;
-      const lower = name.toLowerCase();
-      if (GENERIC_FAMILIES.has(lower) || lower.startsWith("-apple-")) continue;
-      if (seen.has(lower)) continue;
-      seen.add(lower);
-      out.push(name);
+function planAutoZoom(track, options) {
+  const style = resolveZoomStyle(options.style, options.params);
+  if (!style.autoZoom) return [];
+  const {
+    width,
+    height,
+    targetFill = style.targetFill,
+    minLevel = style.minLevel,
+    maxLevel = style.maxLevel,
+    clusterGap = style.clusterGap,
+    lead = style.lead,
+    hold = style.hold,
+    minClusterClicks = style.minClusterClicks,
+    dragLevel = style.dragLevel,
+    followByDefault = style.followByDefault,
+    typingZoom = style.typingZoom,
+    typingGap = style.typingGap,
+    typingHold = style.typingHold,
+    typingMinLevel = style.typingMinLevel,
+    duration
+  } = options;
+  const within = (spans2) => duration === void 0 ? spans2 : spans2.map((z) => ({ ...z, out: Math.min(z.out, round2(duration)) })).filter((z) => z.out - z.in >= 0.3);
+  const grouped = groupTrack(track, {
+    width,
+    height,
+    clusterGap,
+    typingGap,
+    typingZoom,
+    targetFill,
+    minLevel
+  });
+  const { sessions } = grouped;
+  const drags = dragsFromTrack(track, width, height);
+  const dragPress = new Set(drags.map((d) => round2(d.t0)));
+  const withoutDrags = (list) => list.map((cl) => cl.filter((c) => !dragPress.has(round2(c.t)))).filter((cl) => cl.length > 0);
+  const clusters = withoutDrags(grouped.clusters);
+  const surfaces = withoutDrags(grouped.surfaces);
+  const dragSpans = drags.map((d, i) => ({
+    id: `g${i}`,
+    in: round2(Math.max(0, d.t0 - lead)),
+    out: round2(d.t1 + hold),
+    level: clampZoomLevel(Math.min(Math.max(dragLevel, 1.1), maxLevel)),
+    cx: round2(d.nx),
+    cy: round2(d.ny),
+    focusMode: "auto",
+    source: "auto"
+  }));
+  const eligible = clusters.filter((c) => c.length >= minClusterClicks);
+  const clickSpans = [];
+  const dragReserved = surfaces.map((cluster, i) => {
+    const f = clusterFocus(cluster, width, height);
+    return {
+      id: `drag${i}`,
+      in: Math.max(0, cluster[0].t - lead),
+      out: cluster[cluster.length - 1].t + hold,
+      level: 1,
+      cx: f.cx,
+      cy: f.cy
+    };
+  });
+  for (const cluster of eligible) {
+    const first = cluster[0];
+    const last = cluster[cluster.length - 1];
+    const f = focusFor(cluster, width, height, targetFill, minLevel, maxLevel);
+    clickSpans.push({
+      in: Math.max(0, first.t - lead),
+      out: last.t + hold,
+      cx: f.cx,
+      cy: f.cy,
+      level: f.level
+    });
+  }
+  clickSpans.sort((a, b) => a.in - b.in);
+  for (let i = 0; i + 1 < clickSpans.length; i++) {
+    if (clickSpans[i].out > clickSpans[i + 1].in)
+      clickSpans[i].out = clickSpans[i + 1].in;
+  }
+  for (const z of clickSpans) if (z.out - z.in < 0.3) z.dead = true;
+  const typingFloor = Math.min(Math.max(minLevel, typingMinLevel), maxLevel);
+  let typing = sessions.map((s) => {
+    const f = focusFor(
+      s.events,
+      width,
+      height,
+      targetFill,
+      typingFloor,
+      maxLevel
+    );
+    return {
+      in: Math.max(0, s.start - lead),
+      out: s.last + typingHold,
+      cx: f.cx,
+      cy: f.cy,
+      level: f.level
+    };
+  });
+  for (const t of typing) {
+    for (const z of clickSpans) {
+      if (z.dead || t.dead) continue;
+      if (t.in >= z.out || t.out <= z.in) continue;
+      if (Math.hypot(t.cx - z.cx, t.cy - z.cy) <= TYPING_REFOCUS_FRAC) {
+        t.in = Math.min(t.in, z.in);
+        t.out = Math.max(t.out, z.out);
+        z.dead = true;
+      } else if (z.in <= t.in && z.out >= t.out) {
+        t.dead = true;
+      } else if (z.in > t.in) {
+        t.out = z.in;
+      } else {
+        t.in = z.out;
+      }
     }
   }
-  return out;
-}
-function cssWeights(css, html = "") {
-  const out = /* @__PURE__ */ new Set([400]);
-  for (const decl of css?.match(/font-weight\s*:[^;}]+/gi) ?? []) {
-    const value = decl.replace(/^[^:]*:/, "").toLowerCase();
-    for (const n of value.match(/\b[1-9]00\b/g) ?? []) out.add(Number(n));
-    if (/\bbold(er)?\b/.test(value)) out.add(700);
-  }
-  if (/<(b|strong|h[1-6])[\s>]/i.test(html)) out.add(700);
-  return [...out].sort((a, b) => a - b);
-}
-function htmlLayerFaces(clip) {
-  const faces = [];
-  const seen = /* @__PURE__ */ new Set();
-  const add = (f) => {
-    const key = `${f.family.toLowerCase()}|${f.weight}|${f.style}`;
-    if (seen.has(key)) return;
-    seen.add(key);
-    faces.push(f);
-  };
-  const weights = cssWeights(clip.css, clip.html);
-  for (const family of cssFamilies(clip.css)) {
-    const entry = findFontFamily(family);
-    if (!entry) continue;
-    for (const w of weights)
-      add({
-        family: entry.family,
-        url: fontFaceUrl(entry.slug, nearestFontWeight(entry, w)),
-        weight: nearestFontWeight(entry, w),
-        style: "normal"
-      });
+  typing = typing.filter((t) => !t.dead).sort((a, b) => a.in - b.in);
+  for (let i = 0; i + 1 < typing.length; i++) {
+    if (typing[i].out > typing[i + 1].in) typing[i].out = typing[i + 1].in;
   }
-  for (const f of clip.fonts ?? [])
-    add({
-      family: f.family,
-      url: f.url,
-      weight: f.weight ?? 400,
-      style: f.style ?? "normal"
-    });
-  return faces;
-}
-function htmlLayerUnhostedFamilies(clip) {
-  const explicit = new Set(
-    (clip.fonts ?? []).map((f) => f.family.toLowerCase())
-  );
-  return cssFamilies(clip.css).filter(
-    (f) => !findFontFamily(f) && !explicit.has(f.toLowerCase())
+  typing = typing.filter((t) => t.out - t.in >= 0.3);
+  const zSpans = clickSpans.filter((s) => !s.dead).sort((a, b) => a.in - b.in).map((s, i) => ({
+    id: `z${i}`,
+    in: round2(s.in),
+    out: round2(s.out),
+    level: clampZoomLevel(s.level),
+    cx: round2(s.cx),
+    cy: round2(s.cy),
+    // Follow styles ride the cursor through the span (entry + dead-zone
+    // recenters baked at lowering); typing/dwell spans stay fixed-focus.
+    ...followByDefault ? { focusMode: "auto" } : {},
+    source: "auto"
+  }));
+  const kSpans = typing.map((s, i) => ({
+    id: `k${i}`,
+    in: round2(s.in),
+    out: round2(s.out),
+    level: clampZoomLevel(s.level),
+    cx: round2(s.cx),
+    cy: round2(s.cy),
+    // Never focusMode:'auto': the dot is parked (and fading) while typing —
+    // the FIELD is the anchor, and a follow would be a no-op at best.
+    source: "auto"
+  }));
+  const spans = within([...zSpans, ...kSpans, ...dragSpans]).sort(
+    (a, b) => a.in - b.in
   );
+  const dwells = dwellSpans(track, width, height, maxLevel, [
+    ...spans,
+    ...dragReserved
+  ]);
+  return within([...spans, ...dwells]).sort((a, b) => a.in - b.in);
 }
-function htmlLayerAssetUrls(clip) {
-  const out = [];
-  const seen = /* @__PURE__ */ new Set();
-  const add = (u) => {
-    if (!seen.has(u)) {
-      seen.add(u);
-      out.push(u);
+function typingSessions(track, width, height, typingGap) {
+  const pings = track.filter((e) => e.type === "key").map((e) => ({ t: e.t / 1e3, rect: e.rect, x: e.x, y: e.y }));
+  const all = [];
+  let cur = null;
+  for (const p of pings) {
+    const [nx, ny] = fieldCenter(p, width, height);
+    if (cur && p.t - cur.last <= typingGap && Math.hypot(nx - cur.cx, ny - cur.cy) <= TYPING_REFOCUS_FRAC) {
+      cur.events.push(p);
+      cur.last = p.t;
+    } else {
+      cur = { events: [p], first: p.t, last: p.t, start: p.t, cx: nx, cy: ny };
+      all.push(cur);
     }
-  };
-  for (const m of clip.html.matchAll(
-    /\bsrc\s*=\s*["']((?:https?:)?\/\/[^"']+)["']/gi
-  ))
-    add(m[1]);
-  for (const text of [clip.html, clip.css ?? ""])
-    for (const m of text.matchAll(
-      /url\(\s*["']?((?:https?:)?\/\/[^"')\s]+)["']?\s*\)/gi
-    ))
-      add(m[1]);
-  return out;
-}
-function htmlLayerAssets(clip) {
-  const inlinable = [];
-  const foreign = [];
-  for (const u of htmlLayerAssetUrls(clip))
-    (u.replace(/^\/\//, "https://").startsWith(HTML_LAYER_ASSET_HOST) ? inlinable : foreign).push(u);
-  return { inlinable, foreign };
-}
-function htmlLayerBleedFor(css) {
-  if (!css) return 0;
-  let worst = 0;
-  const consider = (layer) => {
-    if (/\binset\b/i.test(layer)) return;
-    const lengths = layer.replace(/[a-z-]+\([^)]*\)/gi, " ").replace(/#[0-9a-f]{3,8}/gi, " ").match(/-?\d*\.?\d+/g);
-    if (!lengths) return;
-    const [x = 0, y = 0, blur = 0, spread = 0] = lengths.map(Number);
-    worst = Math.max(
-      worst,
-      Math.abs(x) + blur + spread,
-      Math.abs(y) + blur + spread
-    );
-  };
-  for (const decl of css.match(/box-shadow\s*:[^;}]+/gi) ?? [])
-    for (const layer of splitTopLevel(decl.replace(/^[^:]*:/, "")))
-      consider(layer);
-  for (const fn of css.match(/drop-shadow\(([^)]*)\)/gi) ?? [])
-    consider(fn.replace(/^drop-shadow\(/i, "").replace(/\)$/, ""));
-  return worst ? Math.ceil(worst * 1.15) : 0;
-}
-function htmlLayerBleed(clip) {
-  return Math.max(0, Math.round(clip.bleed ?? htmlLayerBleedFor(clip.css)));
-}
-function htmlLayerPictureBox(clip) {
-  const bleed = htmlLayerBleed(clip);
-  return {
-    width: clip.box.width + bleed * 2,
-    height: clip.box.height + bleed * 2,
-    bleed
-  };
-}
-function htmlLayerWidth(clip) {
-  if (clip.width != null) return clip.width;
-  return Math.min(1, htmlLayerPictureBox(clip).width / DESIGN_FRAME_WIDTH);
-}
-var ENTITIES = {
-  amp: "&",
-  lt: "<",
-  gt: ">",
-  quot: '"',
-  apos: "'",
-  nbsp: " "
-};
-function htmlLayerText(html) {
-  return html.replace(/<style[\s\S]*?<\/style>/gi, " ").replace(/<[^>]*>/g, " ").replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (m, ref) => {
-    if (ref[0] === "#")
-      return String.fromCodePoint(
-        ref[1] === "x" ? parseInt(ref.slice(2), 16) : parseInt(ref.slice(1))
-      );
-    return ENTITIES[ref.toLowerCase()] ?? m;
-  }).replace(/\s+/g, " ").trim();
+  }
+  return all.filter(
+    (s) => s.events.length >= TYPING_MIN_PINGS && s.last - s.first >= TYPING_MIN_DUR
+  );
 }
-function htmlLayerLabel(clip) {
-  const words = htmlLayerText(clip.html);
-  return words ? words.slice(0, 24) : "HTML";
+function fieldCenter(c, width, height) {
+  const px = c.rect ? c.rect.x + c.rect.w / 2 : c.x;
+  const py = c.rect ? c.rect.y + c.rect.h / 2 : c.y;
+  return [clamp012(px / width), clamp012(py / height)];
 }
-var HTML_LAYER_PLACEHOLDER = /\{\{\s*(t|data\.[A-Za-z0-9_.-]+)\s*\}\}/;
-var VOID_TAGS = [
-  "br",
-  "img",
-  "hr",
-  "input",
-  "source",
-  "col",
-  "area",
-  "base",
-  "wbr",
-  "meta",
-  "link"
-];
-var HTML_LAYER_FOREIGN_FIELDS = [
-  "key",
-  "radius",
-  "shadow",
-  "border",
-  "loop",
-  "frame",
-  "fx",
-  "text",
-  "preset"
-];
-function htmlLayerProblems(clip) {
-  const html = clip.html ?? "";
-  const css = clip.css;
-  const raw = clip;
-  const problems = [];
-  const push2 = (code, level, message) => problems.push({ code, level, message });
-  if (!html.trim()) push2("empty", "problem", "The layer has no markup.");
-  for (const tag of VOID_TAGS) {
-    const open = new RegExp(`<${tag}(\\s[^>]*?)?>`, "gi");
-    let m;
-    let said = false;
-    while (m = open.exec(html)) {
-      if (!m[0].trimEnd().endsWith("/>") && !said) {
-        said = true;
-        push2(
-          "unclosed-void",
-          "problem",
-          `<${tag}> must close itself as <${tag} /> inside a foreignObject.`
-        );
-      }
+function dwellSpans(track, width, height, maxLevel, reserved) {
+  const moves = track.filter((e) => e.type === "move").map((e) => ({ t: e.t / 1e3, nx: e.x / width, ny: e.y / height }));
+  if (moves.length < 2) return [];
+  const trackEnd = track[track.length - 1].t / 1e3;
+  const candidates = [];
+  let start = 0;
+  for (let i = 1; i <= moves.length; i++) {
+    const breaks = i === moves.length || Math.hypot(moves[i].nx - moves[i - 1].nx, moves[i].ny - moves[i - 1].ny) > DWELL_MOVE_FRAC;
+    if (!breaks) continue;
+    const endT = i < moves.length ? moves[i].t : trackEnd;
+    const dur = endT - moves[start].t;
+    const opening = start === 0;
+    if (!opening && dur >= DWELL_MIN && dur <= DWELL_MAX) {
+      const run = moves.slice(start, i);
+      candidates.push({
+        center: (moves[start].t + endT) / 2,
+        cx: run.reduce((s, p) => s + p.nx, 0) / run.length,
+        cy: run.reduce((s, p) => s + p.ny, 0) / run.length,
+        strength: dur
+      });
     }
+    start = i;
   }
-  const bare = html.match(/&(?!(#\d+|#x[0-9a-fA-F]+|[a-zA-Z][a-zA-Z0-9]*);)/g);
-  if (bare)
-    push2(
-      "bare-ampersand",
-      "problem",
-      `A bare "&" is a parse error; write &amp;. Found ${bare.length}.`
-    );
-  if (/<[a-zA-Z][^>]*?\s[a-zA-Z-]+=(?!["'])[^\s>]+/.test(html))
-    push2(
-      "unquoted-attr",
-      "problem",
-      "Attribute values must be quoted inside a foreignObject."
-    );
-  const bytes = html.length + (css?.length ?? 0);
-  if (bytes > HTML_LAYER_MAX_BYTES)
-    push2(
-      "too-large",
-      "problem",
-      `The layer's source is ${Math.round(bytes / 1e3)} KB; the ceiling is ${HTML_LAYER_MAX_BYTES / 1e3} KB. Inline less, or split the layer.`
-    );
-  else if (bytes > HTML_LAYER_WARN_BYTES)
-    push2(
-      "too-large",
-      "warning",
-      `The layer's source is ${Math.round(bytes / 1e3)} KB. A document carries it twice (the doc and the composed config); keep a layer under ${HTML_LAYER_WARN_BYTES / 1e3} KB.`
-    );
-  for (const field of HTML_LAYER_FOREIGN_FIELDS)
-    if (raw[field] !== void 0)
-      push2(
-        "foreign-field",
-        "problem",
-        `An HTML layer has no "${field}": its CSS is its chrome (shadow, radius, border) and its markup its content.`
-      );
-  const needed = htmlLayerBleedFor(css);
-  if (clip.bleed != null && needed > clip.bleed)
-    push2(
-      "shadow-clipped",
-      "warning",
-      `The CSS paints up to ${needed}px outside the component and bleed is ${clip.bleed}, so the shadow is clipped square at the layer's edge. Set bleed to ${needed}, or leave it out to derive it.`
-    );
-  for (const u of htmlLayerAssets({ html, css }).foreign)
-    push2(
-      "external-resource",
-      "warning",
-      `The source names ${u} by URL. The page inlines only ${HTML_LAYER_ASSET_HOST}\u2026 (the host it may fetch, and the one the fleet reaches), so this will paint blank. Upload it (vos asset upload) or inline it as a data: URI.`
-    );
-  if (/\bhref\s*=\s*["']\s*(https?:)?\/\//i.test(html))
-    push2(
-      "external-resource",
-      "warning",
-      "The source names a stylesheet or a link by URL. An SVG image fetches no href; inline the styles in the CSS."
-    );
-  const animated = /\b(animation|transition)(-[a-z-]+)?\s*:/i.test(css ?? "");
-  if (animated && !clip.live)
-    push2(
-      "wall-clock",
-      "warning",
-      "CSS animations inside a layer run on the wall clock, not the timeline: the export will not match the preview. Set live: true to scrub them to the clip's time, or animate the layer with motion and anim."
-    );
-  if (clip.live && /\banimation-delay\s*:/i.test(css ?? ""))
-    push2(
-      "live-delay",
-      "warning",
-      "A live layer scrubs its keyframes by setting animation-delay to -t, so the authored animation-delay is overridden. Fold the delay into the keyframes instead."
-    );
-  if (!clip.live && (HTML_LAYER_PLACEHOLDER.test(html) || HTML_LAYER_PLACEHOLDER.test(css ?? "")))
-    push2(
-      "placeholder-still",
-      "warning",
-      "The source carries {{t}} or {{data.\u2026}} placeholders, which fill only on a live layer (live: true); a still layer shows them as written."
-    );
-  for (const family of htmlLayerUnhostedFamilies(clip))
-    push2(
-      "unhosted-family",
-      "warning",
-      `The CSS names "${family}", which is not a hosted family (GET https://vos.so/api/fonts); the system stack stands in.`
+  const sorted = [...candidates].sort((a, b) => b.strength - a.strength);
+  const sourceDuration = trackEnd;
+  const len = Math.max(1, sourceDuration * 0.05);
+  const taken = [...reserved];
+  const accepted = [];
+  const centers = [];
+  for (const c of sorted) {
+    if (centers.some((t) => Math.abs(t - c.center) < DWELL_SPACING)) continue;
+    const spanIn = Math.max(
+      0,
+      Math.min(c.center - len / 2, sourceDuration - len)
     );
-  return problems;
-}
-function wellFormedXml(svg, parseXml) {
-  const doc = parseXml(svg);
-  const errors = doc.getElementsByTagName("parsererror");
-  if (!errors.length) return { ok: true };
-  const text = (errors[0].textContent ?? "").replace(/\s+/g, " ").trim();
-  return { ok: false, error: text || "The markup is not well-formed XML." };
+    const spanOut = Math.min(sourceDuration, spanIn + len);
+    if (spanOut - spanIn < 0.3) continue;
+    if (taken.some((z) => spanIn < z.out && spanOut > z.in)) continue;
+    const span = {
+      id: `d${accepted.length}`,
+      in: round2(spanIn),
+      out: round2(spanOut),
+      // No element rect on moves → point zoom at the planner ceiling.
+      level: clampZoomLevel(maxLevel),
+      cx: round2(clamp012(c.cx)),
+      cy: round2(clamp012(c.cy)),
+      source: "auto"
+    };
+    accepted.push(span);
+    taken.push(span);
+    centers.push(c.center);
+  }
+  return accepted.sort((a, b) => a.in - b.in).map((z, i) => ({ ...z, id: `d${i}` }));
 }
-function fontFaceCss(faces) {
-  let out = "";
-  for (const f of faces)
-    out += `@font-face{font-family:'${f.family}';src:url(${f.dataUri}) format('woff2');font-weight:${f.weight};font-style:${f.style};font-display:block}`;
-  return out;
+function focusFor(cluster, width, height, targetFill, minLevel, maxLevel) {
+  let sx = 0;
+  let sy = 0;
+  let maxW = 0;
+  let maxH = 0;
+  for (const c of cluster) {
+    if (c.rect) {
+      sx += c.rect.x + c.rect.w / 2;
+      sy += c.rect.y + c.rect.h / 2;
+      maxW = Math.max(maxW, c.rect.w);
+      maxH = Math.max(maxH, c.rect.h);
+    } else {
+      sx += c.x;
+      sy += c.y;
+    }
+  }
+  const n = cluster.length;
+  const cx = clamp012(sx / n / width);
+  const cy = clamp012(sy / n / height);
+  const own = fitLevel({ x: 0, y: 0, w: maxW, h: maxH }, width, height, targetFill) ?? maxLevel;
+  const together = unionFitLevel(unionRect(cluster), width, height);
+  return { cx, cy, level: clamp3(Math.min(own, together), minLevel, maxLevel) };
 }
-var fmtT = (t) => String(Math.round(t * 1e3) / 1e3);
-var escapeXml = (v) => String(v).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-function htmlLayerSvg(src, faces = [], assets = []) {
-  const bleed = Math.max(0, Math.round(src.bleed ?? 0));
-  const boxW = src.box.width + bleed * 2;
-  const boxH = src.box.height + bleed * 2;
-  const t = src.t ?? 0;
-  const fill = (text) => {
-    let out = text;
-    for (const a of assets) out = out.split(a.url).join(a.dataUri);
-    if (src.live) {
-      out = out.replace(/\{\{\s*t\s*\}\}/g, fmtT(t));
-      out = out.replace(
-        /\{\{\s*data\.([A-Za-z0-9_.-]+)\s*\}\}/g,
-        (_m, name) => {
-          const v = src.data ? src.data[name] : void 0;
-          return v == null ? "" : escapeXml(v);
-        }
-      );
+function clusterFocus(events, width, height) {
+  let sx = 0;
+  let sy = 0;
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -Infinity;
+  let y1 = -Infinity;
+  let rects = 0;
+  for (const c of events) {
+    if (c.rect) {
+      sx += c.rect.x + c.rect.w / 2;
+      sy += c.rect.y + c.rect.h / 2;
+      x0 = Math.min(x0, c.rect.x);
+      y0 = Math.min(y0, c.rect.y);
+      x1 = Math.max(x1, c.rect.x + c.rect.w);
+      y1 = Math.max(y1, c.rect.y + c.rect.h);
+      rects++;
+    } else {
+      sx += c.x;
+      sy += c.y;
     }
-    return out;
-  };
-  const scrub = src.live ? `.vos-html-layer{--vos-t:${fmtT(t)}}.vos-html-layer,.vos-html-layer *{animation-play-state:paused!important;animation-delay:calc(var(--vos-t) * -1s)!important}` : "";
-  const wrapper = `.vos-html-layer{width:${boxW}px;height:${boxH}px;box-sizing:border-box;margin:0;padding:${bleed}px;font-family:-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}`;
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${boxW}" height="${boxH}" viewBox="0 0 ${boxW} ${boxH}"><foreignObject x="0" y="0" width="${boxW}" height="${boxH}"><div xmlns="http://www.w3.org/1999/xhtml" class="vos-html-layer"><style>${fontFaceCss(faces)}${wrapper}${fill(src.css ?? "")}${scrub}</style>` + fill(src.html) + `</div></foreignObject></svg>`;
+  }
+  const n = Math.max(1, events.length);
+  const rect = rects > 0 ? {
+    x: clamp012(x0 / width),
+    y: clamp012(y0 / height),
+    w: clamp012((x1 - x0) / width),
+    h: clamp012((y1 - y0) / height)
+  } : null;
+  return { cx: clamp012(sx / n / width), cy: clamp012(sy / n / height), rect };
 }
-function fnv1a(s) {
-  let h = 2166136261;
-  for (let i = 0; i < s.length; i++) {
-    h ^= s.charCodeAt(i);
-    h = Math.imul(h, 16777619) >>> 0;
+function clamp3(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, v));
+}
+function clamp012(v) {
+  return clamp3(v, 0, 1);
+}
+function round2(v) {
+  return Math.round(v * 1e3) / 1e3;
+}
+
+// src/lower/lowerToComposition.ts
+import {
+  EASINGS,
+  lerpArray as lerpArray2,
+  sample as sample2,
+  segmentRate as segmentRate2,
+  sortKeyframes as sortKeyframes2,
+  sourceToTimeline,
+  splitBySpeed as splitBySpeed3,
+  totalDuration as totalDuration3
+} from "@vosjs/timeline";
+import { timelineRuntimeCode as timelineRuntimeCode2 } from "@vosjs/timeline/bundle";
+
+// src/layout.ts
+function computeCardLayout(frame, video, W, H, zoomFocus) {
+  const s = H / 1080;
+  const pad = (frame.padding || 0) * s;
+  const ins = frame.inset ?? {};
+  const padL = ins.left == null ? pad : ins.left * W;
+  const padR = ins.right == null ? pad : ins.right * W;
+  const padT = ins.top == null ? pad : ins.top * H;
+  const padB = ins.bottom == null ? pad : ins.bottom * H;
+  const bar = frame.browserBar;
+  const vw = video.width || 16;
+  const vh = video.height || 9;
+  const fitCover = frame.fit === "cover";
+  const cf = fitCover ? 1 : Math.min(1, W / H / (vw / vh));
+  const barH = bar.kind !== "none" ? (bar.height || 44) * s * cf : 0;
+  const availW = Math.max(1, W - padL - padR);
+  const availH = Math.max(1, H - padT - padB - barH);
+  if (fitCover) {
+    const sc2 = Math.max(availW / vw, availH / vh);
+    const dw2 = vw * sc2;
+    const dh2 = vh * sc2;
+    const follow = frame.focusFollow === "camera" && zoomFocus ? zoomFocus : null;
+    const fcx = clamp013(follow ? follow.cx : frame.focus?.cx ?? 0.5);
+    const fcy = clamp013(follow ? follow.cy : frame.focus?.cy ?? 0.5);
+    const vTop = padT + barH;
+    const dx2 = Math.min(
+      padL,
+      Math.max(padL + availW - dw2, padL + availW / 2 - fcx * dw2)
+    );
+    const dy2 = Math.min(
+      vTop,
+      Math.max(vTop + availH - dh2, vTop + availH / 2 - fcy * dh2)
+    );
+    return {
+      W,
+      H,
+      dx: dx2,
+      dy: dy2,
+      dw: dw2,
+      dh: dh2,
+      cardX: padL,
+      cardY: padT,
+      cardW: availW,
+      cardH: availH + barH
+    };
   }
-  return h.toString(36);
-}
-function htmlLayerKey(clip, faces, bleed, assets = []) {
-  const src = clip.html + "\0" + (clip.css ?? "") + "\0" + clip.box.width + "x" + clip.box.height + "\0" + bleed + "\0" + faces.map((f) => `${f.family}:${f.url}:${f.weight}:${f.style}`).join("|") + " " + assets.join("|") + // A live layer's picture is also a function of t: ON_FRAME appends the
-  // moment to this key per frame. The data rides here, the moment there.
-  (clip.live ? " live " + JSON.stringify(clip.data ?? null) : "");
-  return `html:${clip.id}:${fnv1a(src)}`;
-}
-function htmlLayerPayload(clip) {
-  const faces = htmlLayerFaces(clip);
-  const bleed = htmlLayerBleed(clip);
-  const assets = htmlLayerAssets(clip).inlinable;
+  const sc = Math.min(availW / vw, availH / vh);
+  const dw = vw * sc;
+  const dh = vh * sc;
+  const dx = padL + (availW - dw) / 2;
+  const dy = padT + barH + (availH - dh) / 2;
   return {
-    key: htmlLayerKey(clip, faces, bleed, assets),
-    width: htmlLayerWidth(clip),
-    html: {
-      markup: clip.html,
-      css: clip.css ?? "",
-      box: { width: clip.box.width, height: clip.box.height },
-      bleed,
-      faces,
-      assets,
-      ...clip.live ? { live: true, ...clip.data ? { data: clip.data } : {} } : {}
-    }
+    W,
+    H,
+    dx,
+    dy,
+    dw,
+    dh,
+    cardX: dx,
+    cardY: dy - barH,
+    cardW: dw,
+    cardH: dh + barH
   };
 }
-
-// src/overlayText.ts
-var OVERLAY_BOX_PAD_X = 0.6;
-var OVERLAY_BOX_PAD_Y = 0.35;
-var OVERLAY_BOX_RADIUS = 0.25;
-function resolveOverlayBox(clip) {
-  if (!clip.box) return null;
-  const size = resolveOverlayStyle(clip).size;
+function docCardLayout(doc, media) {
+  const meta = doc.source.meta;
+  const H = 1080;
+  const W = Math.max(
+    2,
+    Math.round(H * aspectRatioValue(doc.frame.aspectRatio, meta))
+  );
+  const src = mediaSource(doc, media) ?? doc.source;
+  const sm = src.meta;
+  return computeCardLayout(
+    mediaFrame(doc, media),
+    {
+      width: sm.captureWidth ?? sm.width,
+      height: sm.captureHeight ?? sm.height
+    },
+    W,
+    H
+  );
+}
+function recommendedExportResolution(doc) {
+  const meta = doc.source.meta;
+  const capW = meta.captureWidth ?? meta.width;
+  const video = { width: capW, height: meta.captureHeight ?? meta.height };
+  let best = EXPORT_RESOLUTION_OPTIONS[0];
+  for (const r of EXPORT_RESOLUTION_OPTIONS) {
+    const { width, height } = resolveExportSize(doc, r);
+    if (computeCardLayout(doc.frame, video, width, height).dw > capW) break;
+    best = r;
+  }
+  return best;
+}
+function camBubbleRect(cam, W, H = 1080) {
+  const s = H / 1080;
+  const size = Math.max(40, (cam.size || 0.25) * H);
+  const mg = 24 * s;
+  const x = cam.x != null ? cam.x * W - size / 2 : cam.position.includes("right") ? W - mg - size : mg;
+  const y = cam.y != null ? cam.y * H - size / 2 : cam.position.includes("top") ? mg : H - mg - size;
   return {
-    color: clip.box.color,
-    opacity: clip.box.opacity ?? 1,
-    padX: (clip.box.paddingX ?? OVERLAY_BOX_PAD_X) * size,
-    padY: (clip.box.paddingY ?? OVERLAY_BOX_PAD_Y) * size,
-    radius: (clip.box.radius ?? OVERLAY_BOX_RADIUS) * size
+    x,
+    y,
+    size,
+    radius: cam.shape === "rounded" ? (cam.radius ?? 18) * s : size / 2
   };
 }
-var PRESET_FAMILY = {
-  title: "Lexend",
-  caption: "Lexend",
-  label: "JetBrains Mono"
-};
-var TEXT_PRESETS = {
-  title: {
-    stack: "Lexend, -apple-system, system-ui, sans-serif",
-    weight: 600,
-    size: 64,
-    color: "#fafafa",
-    shadow: 0.45
-  },
-  caption: {
-    stack: "Lexend, -apple-system, system-ui, sans-serif",
-    weight: 400,
-    size: 32,
-    color: "#f4f4f5",
-    shadow: 0.4
-  },
-  label: {
-    stack: "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace",
-    weight: 400,
-    size: 22,
-    color: "#e4e4e7",
-    shadow: 0.35
-  }
-};
-var OVERLAY_SIZE_MIN = 12;
-var OVERLAY_SIZE_MAX = 200;
-var OVERLAY_FONT_FACES = [
-  { family: "Lexend", weight: 400, url: fontFaceUrl2("lexend", 400) },
-  { family: "Lexend", weight: 600, url: fontFaceUrl2("lexend", 600) },
-  {
-    family: "JetBrains Mono",
-    weight: 400,
-    url: fontFaceUrl2("jetbrains-mono", 400)
+function focusBounds(level, layout, camera = "card", screen) {
+  if (camera === "stage" && screen && level > 1.001) {
+    return { minX: 0, maxX: 1, minY: 0, maxY: 1 };
   }
-];
-function resolveOverlayStyle(clip) {
-  const presetName = clip.preset in TEXT_PRESETS ? clip.preset : "title";
-  const base = TEXT_PRESETS[presetName];
-  let stack = base.stack;
-  let weight = base.weight;
-  const familyEntry = findFontFamily2(clip.family ?? PRESET_FAMILY[presetName]);
-  if (clip.family) {
-    const quoted = clip.family.includes(" ") ? `'${clip.family}'` : clip.family;
-    stack = familyEntry ? fontStack(familyEntry) : `${quoted}, ${base.stack}`;
+  if (level <= 1.001) {
+    return { minX: 0.5, maxX: 0.5, minY: 0.5, maxY: 0.5 };
   }
-  if (clip.weight !== void 0 || clip.family) {
-    const wanted = clip.weight ?? base.weight;
-    weight = familyEntry ? nearestFontWeight2(familyEntry, wanted) : wanted;
+  if (camera === "stage") {
+    const x2 = stageAxisBounds(
+      layout.dx,
+      layout.dw,
+      layout.cardX,
+      layout.cardW,
+      layout.W,
+      level
+    );
+    const y2 = stageAxisBounds(
+      layout.dy,
+      layout.dh,
+      layout.cardY,
+      layout.cardH,
+      layout.H,
+      level
+    );
+    return { minX: x2.min, maxX: x2.max, minY: y2.min, maxY: y2.max };
   }
-  return {
-    ...base,
-    stack,
-    weight,
-    ...clip.size !== void 0 ? {
-      size: Math.min(
-        OVERLAY_SIZE_MAX,
-        Math.max(OVERLAY_SIZE_MIN, clip.size)
-      )
-    } : {},
-    ...clip.color ? { color: clip.color } : {},
-    ...clip.shadow !== void 0 ? { shadow: Math.min(1, Math.max(0, clip.shadow)) } : {},
-    fontStyle: clip.italic ? "italic" : "normal",
-    align: clip.align ?? "center",
-    letterSpacing: clip.letterSpacing ?? 0,
-    lineHeight: clip.lineHeight ?? OVERLAY_LINE_HEIGHT,
-    stroke: clip.stroke ?? null
-  };
-}
-function overlayFaceFor(clip) {
-  const entry = findFontFamily2(
-    clip.family ?? PRESET_FAMILY[clip.preset in TEXT_PRESETS ? clip.preset : "title"]
+  const x = axisBounds(
+    layout.dx,
+    layout.dw,
+    layout.cardX,
+    layout.cardW,
+    layout.W,
+    level
   );
-  if (!entry) return null;
-  const weight = resolveOverlayStyle(clip).weight;
-  const inBase = OVERLAY_FONT_FACES.some(
-    (f) => f.family === entry.family && f.weight === weight
+  const y = axisBounds(
+    layout.dy,
+    layout.dh,
+    layout.cardY,
+    layout.cardH,
+    layout.H,
+    level
   );
-  if (inBase) return null;
-  return {
-    family: entry.family,
-    weight,
-    url: fontFaceUrl2(entry.slug, weight)
-  };
-}
-function overlayFontFaces(doc) {
-  const faces = [...OVERLAY_FONT_FACES];
-  const seen = new Set(faces.map((f) => `${f.family}|${f.weight}`));
-  const add = (face) => {
-    if (!face) return;
-    const key = `${face.family}|${face.weight}`;
-    if (seen.has(key)) return;
-    seen.add(key);
-    faces.push(face);
-  };
-  for (const o of doc.overlays ?? []) {
-    if (o.kind !== "text") continue;
-    add(overlayFaceFor(o));
-    add(resolveEmphasis(o)?.face);
-  }
-  return faces;
-}
-function overlayLines(text) {
-  const lines = text.split("\n");
-  return lines.length ? lines : [""];
-}
-var EM_OPEN = "
";
-var EM_CLOSE = "";
-function parseEmphasis(text) {
-  let any = false;
-  const lines = text.split("\n").map((line) => {
-    const chars = [];
-    const bold = [];
-    const marker = [];
-    for (let i = 0; i < line.length; i++) {
-      if (line[i] === "\\" && line[i + 1] === "*") {
-        chars.push("*");
-        marker.push(false);
-        i++;
-      } else {
-        chars.push(line[i]);
-        marker.push(line[i] === "*");
-      }
-    }
-    const keep = chars.map(() => true);
-    for (let i = 0; i < chars.length; i++) {
-      if (!marker[i]) continue;
-      let j = i + 1;
-      while (j < chars.length && !marker[j]) j++;
-      if (j >= chars.length) break;
-      const inner = chars.slice(i + 1, j).join("");
-      if (!inner.trim()) {
-        i = j - 1;
-        continue;
-      }
-      keep[i] = false;
-      keep[j] = false;
-      for (let k = i + 1; k < j; k++) bold[k] = true;
-      any = true;
-      i = j;
-    }
-    const kept = [];
-    for (let i = 0; i < chars.length; i++) {
-      if (keep[i])
-        kept.push({ c: chars[i], b: !!bold[i] && !/\s/.test(chars[i]) });
-    }
-    let out = "";
-    for (let i = 0; i < kept.length; i++) {
-      const { c, b } = kept[i];
-      if (b && !(i > 0 && kept[i - 1].b)) out += EM_OPEN;
-      out += c;
-      if (b && !(i + 1 < kept.length && kept[i + 1].b)) out += EM_CLOSE;
-    }
-    return out;
-  });
-  return any ? lines.join("\n") : null;
+  return { minX: x.min, maxX: x.max, minY: y.min, maxY: y.max };
 }
-function overlayDisplayText(clip) {
-  if (!clip.emphasis) return clip.text;
-  return parseEmphasis(clip.text) ?? clip.text;
+function axisBounds(anchorOff, anchorSize, coverOff, coverSize, viewport, level) {
+  const k = 1 - 1 / level;
+  let lo = (coverOff / k - anchorOff) / anchorSize;
+  let hi = ((coverOff + coverSize - viewport / level) / k - anchorOff) / anchorSize;
+  if (lo > hi) {
+    const mid = (lo + hi) / 2;
+    lo = mid;
+    hi = mid;
+  }
+  return { min: clamp013(lo), max: clamp013(hi) };
 }
-function stripEmphasis(text) {
-  return text.split(EM_OPEN).join("").split(EM_CLOSE).join("");
+function stageAxisBounds(anchorOff, anchorSize, coverOff, coverSize, viewport, level) {
+  const b = CAMERA_COVER_MIN / 2 * viewport;
+  let lo = (coverOff + b / level - anchorOff) / anchorSize;
+  let hi = (coverOff + coverSize - b / level - anchorOff) / anchorSize;
+  if (lo > hi) {
+    const mid = (lo + hi) / 2;
+    lo = mid;
+    hi = mid;
+  }
+  return { min: clamp013(lo), max: clamp013(hi) };
 }
-var EMPHASIS_WEIGHT = 700;
-function resolveEmphasis(clip) {
-  if (!clip.emphasis || parseEmphasis(clip.text) === null) return null;
-  const style = resolveOverlayStyle(clip);
-  const entry = findFontFamily2(
-    clip.family ?? PRESET_FAMILY[clip.preset in TEXT_PRESETS ? clip.preset : "title"]
-  );
-  const wanted = clip.emphasis?.weight ?? Math.max(EMPHASIS_WEIGHT, style.weight);
-  const weight = entry ? nearestFontWeight2(entry, wanted) : wanted;
-  const inBase = OVERLAY_FONT_FACES.some(
-    (f) => entry && f.family === entry.family && f.weight === weight
-  );
+function clampFocus(cx, cy, level, layout, camera = "card", screen) {
+  const b = focusBounds(level, layout, camera, screen);
   return {
-    weight,
-    ...clip.emphasis?.color ? { color: clip.emphasis.color } : {},
-    ...entry && !inBase ? {
-      face: {
-        family: entry.family,
-        weight,
-        url: fontFaceUrl2(entry.slug, weight)
-      }
-    } : {}
+    cx: Math.min(b.maxX, Math.max(b.minX, cx)),
+    cy: Math.min(b.maxY, Math.max(b.minY, cy))
   };
 }
-function measureEmphasized(text, measure, font, emFont, bold = false) {
-  let w = 0;
-  let run = "";
-  let b = bold;
-  for (const c of text) {
-    if (c === EM_OPEN || c === EM_CLOSE) {
-      if (run) w += measure(run, b ? emFont : font);
-      run = "";
-      b = c === EM_OPEN;
-    } else run += c;
-  }
-  if (run) w += measure(run, b ? emFont : font);
-  return w;
+function clamp013(v) {
+  return Math.max(0, Math.min(1, v));
 }
-function overlayTokens(line) {
-  return line.match(/\S+\s*/g) ?? [line];
+function screenPoint(layout, camera, screen) {
+  return camera === "stage" && screen ? { ox: screen.x * layout.W, oy: screen.y * layout.H } : { ox: layout.W / 2, oy: layout.H / 2 };
 }
-function wrapOverlayLines(lines, measure, maxPx) {
-  if (!(maxPx > 0)) return lines;
-  const out = [];
-  for (const line of lines) {
-    if (!line || measure(line) <= maxPx) {
-      out.push(line);
-      continue;
-    }
-    let current = "";
-    for (const token of overlayTokens(line)) {
-      if (!current) {
-        current = token;
-        continue;
-      }
-      if (measure(current + token) <= maxPx) {
-        current += token;
-      } else {
-        out.push(current);
-        current = token;
-      }
-    }
-    if (current) out.push(current);
-  }
-  return out.length ? out : [""];
+function cameraModel(frame) {
+  return frame?.camera === "stage" ? "stage" : "card";
 }
-function graphemesOf(line) {
-  if (typeof Intl !== "undefined" && typeof Intl.Segmenter === "function") {
-    return [
-      ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
-        line
-      )
-    ].map((s) => s.segment);
-  }
-  return [...line];
+var CAMERA_CENTRE_RAMP = 0.3;
+var CAMERA_COVER_MIN = 0.8;
+function cameraCentring(level) {
+  const u = clamp013((level - 1) / CAMERA_CENTRE_RAMP);
+  return u * u * (3 - 2 * u);
 }
-function overlaySegments(text, unit) {
-  const lines = overlayLines(text);
-  if (unit === "block") return [];
-  if (unit === "line") return lines.map((l) => [l]);
-  if (unit === "word") return lines.map(overlayTokens);
-  return lines.map(graphemesOf);
+function zoomView(level, cx, cy, layout, camera = "card", centring, screen) {
+  const L = Math.max(1, level);
+  const fx = layout.dx + cx * layout.dw;
+  const fy = layout.dy + cy * layout.dh;
+  const { ox, oy } = screenPoint(layout, camera, screen);
+  const t = camera === "stage" ? clamp013(centring ?? 1) : 0;
+  const wcx = fx + (ox - fx) / L * (1 - t);
+  const wcy = fy + (oy - fy) / L * (1 - t);
+  return { level: L, fx, fy, wcx, wcy, ox, oy };
 }
-var FX_DIR = { forward: 0, reverse: 1, center: 2 };
-function resolveOverlayFx(clip, clipDuration) {
-  const spec = overlayFxSpec(clip) ?? clip.fx ?? null;
-  if (!spec) return null;
-  const unit = spec.unit ?? "block";
-  const text = overlayDisplayText(clip);
-  const units = overlaySegments(text, unit);
-  const n = unit === "block" ? 1 : units.reduce((sum, line) => sum + line.length, 0);
-  const upperN = unit === "line" && clip.maxWidth ? overlayLines(text).reduce(
-    (sum, line) => sum + overlayTokens(line).length,
-    0
-  ) : n;
-  const typewriter = spec.fx === "typewriter";
-  const dur = typewriter ? 1e-3 : Math.min(2, Math.max(0.05, spec.duration ?? OVERLAY_TRANSITION_DUR));
-  const defaultStagger = typewriter ? 0.05 : unit === "block" ? 0 : 0.06;
-  let st = Math.min(2, Math.max(0, spec.stagger ?? defaultStagger));
-  if (upperN > 1) {
-    const maxTotal = Math.max(dur, clipDuration * 0.9);
-    st = Math.min(st, Math.max(0, (maxTotal - dur) / (upperN - 1)));
-  }
-  const round14 = (v) => Math.round(v * 1e4) / 1e4;
+function zoomViewport(level, cx, cy, layout, camera = "card", centring, screen) {
+  const v = zoomView(level, cx, cy, layout, camera, centring, screen);
+  const size = 1 / v.level;
+  const mx = v.wcx + (layout.W / 2 - v.ox) / v.level;
+  const my = v.wcy + (layout.H / 2 - v.oy) / v.level;
   return {
-    k: spec.fx,
-    u: unit,
-    d: FX_DIR[spec.direction ?? "forward"] ?? 0,
-    st: round14(st),
-    dur: round14(dur),
-    tt: round14(st * (upperN - 1) + dur),
-    units,
-    n
+    x: (mx - layout.W / (2 * v.level)) / layout.W,
+    y: (my - layout.H / (2 * v.level)) / layout.H,
+    w: size,
+    h: size
   };
 }
-function overlayFontString(style, scale, s) {
-  const italic = style.fontStyle === "italic" ? "italic " : "";
-  return `${italic}${style.weight} ${style.size * scale * s}px ${style.stack}`;
+function focusForViewportCentre(cX, cY, level, layout, camera = "card", centring, screen) {
+  const L = Math.max(1, level);
+  const t = camera === "stage" ? clamp013(centring ?? 1) : 0;
+  const a = 1 - (1 - t) / L;
+  if (a <= 1e-6) return { cx: 0.5, cy: 0.5 };
+  const { ox, oy } = screenPoint(layout, camera, screen);
+  const fx = (cX * layout.W - ox * (1 - t) / L - (layout.W / 2 - ox) / L) / a;
+  const fy = (cY * layout.H - oy * (1 - t) / L - (layout.H / 2 - oy) / L) / a;
+  return { cx: (fx - layout.dx) / layout.dw, cy: (fy - layout.dy) / layout.dh };
 }
-function overlayRect(clip, measure, frameW, frameH = 1080, mediaAspect) {
-  const scale = clip.transform.scale || 1;
-  const base = {
-    cx: clip.transform.x * frameW,
-    cy: clip.transform.y * frameH,
-    rotation: clip.transform.rotation || 0
-  };
-  if (clip.kind === "html") {
-    const pb = htmlLayerPictureBox(clip);
-    const w2 = htmlLayerWidth(clip) * frameW * scale;
-    return { ...base, w: w2, h: w2 * (pb.height / pb.width) };
-  }
-  if (clip.kind !== "text") {
-    const w2 = (clip.width ?? OVERLAY_MEDIA_DEFAULT_WIDTH) * frameW * scale;
-    return { ...base, w: w2, h: w2 / (mediaAspect || 16 / 9) };
-  }
-  const style = resolveOverlayStyle(clip);
-  const font = overlayFontString(style, scale, 1);
-  const ls = style.letterSpacing * scale;
-  const em = resolveEmphasis(clip);
-  const emFont = em ? overlayFontString({ ...style, weight: em.weight }, scale, 1) : "";
-  const width = (t) => em ? measureEmphasized(t, (run, f) => measure(run, f, ls), font, emFont) : measure(t, font, ls);
-  const text = overlayDisplayText(clip);
-  const lines = clip.maxWidth ? wrapOverlayLines(overlayLines(text), width, clip.maxWidth * frameW) : overlayLines(text);
-  let w = 0;
-  for (const line of lines) w = Math.max(w, width(line));
-  const lineH = style.size * scale * style.lineHeight;
-  const box = resolveOverlayBox(clip);
-  const padX = box ? box.padX * scale : 0;
-  const padY = box ? box.padY * scale : 0;
-  return {
-    ...base,
-    w: Math.max(w, style.size * scale * 0.6) + padX * 2,
-    // empty text still selectable
-    h: lines.length * lineH + padY * 2
-  };
+function levelForFocusFraction(frac) {
+  if (!(frac > 0)) return clampZoomLevel(Number.POSITIVE_INFINITY);
+  return clampZoomLevel(Math.max(1.1, 1 / frac));
 }
-function overlayHit(rect, px, py, padPx = 8) {
-  let dx = px - rect.cx;
-  let dy = py - rect.cy;
-  if (rect.rotation) {
-    const a = -rect.rotation * Math.PI / 180;
-    const rx = dx * Math.cos(a) - dy * Math.sin(a);
-    const ry = dx * Math.sin(a) + dy * Math.cos(a);
-    dx = rx;
-    dy = ry;
-  }
-  return Math.abs(dx) <= rect.w / 2 + padPx && Math.abs(dy) <= rect.h / 2 + padPx;
+
+// src/stage.ts
+var CARD_FOV = 30;
+var OVERLAY_Z = -2;
+var CARD_Z = -4;
+var BACKGROUND_Z = -6;
+var CARD_OVERSCAN_STEP = 0.05;
+var CARD_OVERSCAN_MAX = 4;
+var CAMERA_NEAR = 0.1;
+var CAMERA_FAR = 100;
+function planeSizeAtDepth(distance, fovDeg, aspect) {
+  const height = 2 * Math.abs(distance) * Math.tan(fovDeg * Math.PI / 180 / 2);
+  return { width: height * aspect, height };
+}
+function cardPointToScreen(u, v) {
+  return { sx: u, sy: v };
 }
 
 // src/text3d.ts
@@ -4317,6 +4716,11 @@ function push(keys, t, a) {
 
 // src/lower/studioEntry.ts
 import { timelineRuntimeCode } from "@vosjs/timeline/bundle";
+
+// src/richText/layoutCode.ts
+var textLayoutCode = '"use strict";var __vosTextLayout=(()=>{var E=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var W=(n,r)=>{for(var h in r)E(n,h,{get:r[h],enumerable:!0})},j=(n,r,h,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let f of A(r))!N.call(n,f)&&f!==h&&E(n,f,{get:()=>r[f],enumerable:!(l=k(r,f))||l.enumerable});return n};var C=n=>j(E({},"__esModule",{value:!0}),n);var v={};W(v,{DECORATION_THICKNESS_EM:()=>U,HIGHLIGHT_HALF_EM:()=>I,STRIKE_OFFSET_EM:()=>H,UNDERLINE_OFFSET_EM:()=>O,decorationRect:()=>K,graphemesOf:()=>_,layoutText:()=>G,tokenRanges:()=>F});var D=(n,r)=>(n.f||0)===(r.f||0)&&n.c===r.c&&n.u===r.u&&n.s===r.s&&n.h===r.h;function _(n){if(typeof Intl<"u"&&typeof Intl.Segmenter=="function"){let r=new Intl.Segmenter(void 0,{granularity:"grapheme"}),h=[];for(let l of r.segment(n))h.push(l.segment);return h}return Array.from(n)}function F(n){let r=[],h=/\\S+\\s*/g,l;for(;(l=h.exec(n))!==null;)r.push([l.index,l.index+l[0].length]);return r.length?r:[[0,n.length]]}function G(n,r){let h={},l=(i,u)=>{if(!i)return 0;let s=u+"\\0"+i,t=h[s];return t===void 0&&(t=r(i,u),h[s]=t),t},f=(i,u,s)=>{let t=[],o=0;for(let e=0;e<i.length;e++){let c=i[e],a=Math.max(u,o),m=Math.min(s,o+c.t.length);if(m>a){let g=c.t.slice(a-o,m-o),x=t[t.length-1];x&&D(x,c)?x.t+=g:t.push({...c,t:g})}if(o+=c.t.length,o>=s)break}return t},p=i=>{let u=0;for(let s=0;s<i.length;s++)u+=l(i[s].t,i[s].f||0);return u},R=(i,u,s)=>{let t=[];for(let o=0;o<i.length;o++){let e=i[o],c=Math.max(u,e.o),a=Math.min(s,e.o+e.t.length);if(a<=c)continue;let m=e.f||0,g=l(e.t.slice(0,c-e.o),m);t.push({...e,t:e.t.slice(c-e.o,a-e.o),x:e.x+g,w:l(e.t.slice(0,a-e.o),m)-g,o:c})}return t},L=(i,u,s)=>{let t=R(i,u,s);if(!t.length)return{x:0,w:0,parts:t};let o=t[t.length-1];return{x:t[0].x,w:o.x+o.w-t[0].x,parts:t}},y=[],d=n.maxWidth&&n.maxWidth>0?n.maxWidth:0,w=0,T=0,S=(i,u,s)=>{let t=f(i,u,s),o=[],e=0,c=0;for(let m=0;m<t.length;m++){let g=l(t[m].t,t[m].f||0);o.push({...t[m],x:e,w:g,o:c}),e+=g,c+=t[m].t.length}let a={w:e,frags:o,a:T+u,n:s-u};if(n.unit){let m=t.map(x=>x.t).join(""),g=[];if(n.unit==="line")g.push(L(o,0,m.length));else if(n.unit==="word"){let x=F(m);for(let b=0;b<x.length;b++)g.push(L(o,x[b][0],x[b][1]))}else{let x=0,b=_(m);for(let M=0;M<b.length;M++)g.push(L(o,x,x+b[M].length)),x+=b[M].length}a.units=g}e>w&&(w=e),y.push(a)};for(let i=0;i<n.lines.length;i++){let u=n.lines[i],s=0;for(let t=0;t<u.length;t++)s+=u[t].t.length;if(!d||!s||p(f(u,0,s))<=d)S(u,0,s);else{let t=u.map(a=>a.t).join(""),o=F(t),e=0,c=o[0][1];for(let a=1;a<o.length;a++)p(f(u,e,o[a][1]))<=d||(S(u,e,c),e=o[a][0]),c=o[a][1];S(u,e,c)}T+=s+1}return y.length||y.push({w:0,frags:[],a:0,n:0}),{lines:y,width:w}}var O=.42,U=.065,H=.02,I=.58;function K(n,r,h,l,f){let p=Math.round(r),R=Math.round(r+h);if(n==="h"){let d=Math.round(l-I*f),w=Math.round(l+I*f);return{x:p,y:d,w:R-p,h:w-d}}let L=Math.max(1,Math.round(U*f)),y=Math.round(l+(n==="u"?O:H)*f);return{x:p,y,w:R-p,h:L}}return C(v);})();';
+
+// src/lower/studioEntry.ts
 var STUDIO_ENTRY_ID = "vosso.studio";
 function studioEntry(data) {
   return {
@@ -4713,6 +5117,18 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
   var s = H / 1080 // scale design-px controls to comp px
   var ns = window.__vos__ || {}
   var playing = ns.isPaused === false
+  // The styled-text layout (richText/layout.ts, generated), installed once:
+  // the page lays a text layer out with the code the host picks with.
+  if (!ns.textLayout) { ${textLayoutCode}; ns.textLayout = __vosTextLayout }
+  var TXL = ns.textLayout
+  // The font epoch counts faces landing. A face changes what text measures
+  // and what it paints, so the epoch is part of every layout's key and of
+  // the layer's signature: a late face repaints a held layer once.
+  var ofBump = function () { ns.fontEpoch = (ns.fontEpoch || 0) + 1 }
+  if (!ns.fontWatch && typeof document !== 'undefined' && document.fonts && document.fonts.addEventListener) {
+    ns.fontWatch = 1
+    document.fonts.addEventListener('loadingdone', ofBump)
+  }
 
   // --- audio clips (music/SFX): Web Audio scheduler against the transport ---
   // Buffer sources are one-shot: (re)schedule everything on play / clip-data change
@@ -4840,7 +5256,19 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     if (t < ol0.start || t > ol0.start + ol0.dur) continue
     // A page that taints on foreignObject draws no HTML layer (setup's probe).
     if (ol0.html && ns.htmlSafe === false) continue
-    olVisSig += ol0.id + ':' + (ol0.text || ol0.key) + ':' + ol0.x + ',' + ol0.y + ',' + ol0.scale + ',' + ol0.rot + ',' + (ol0.fs || ol0.w) + ',' + (ol0.color || ol0.radius) + ',' + (ol0.opacity == null ? 1 : ol0.opacity) + (ol0.fx ? ',' + ol0.fx.k + ol0.fx.u + ol0.fx.d + ol0.fx.st : '') + (ol0.mw ? ',w' + ol0.mw : '') + ';'
+    olVisSig += ol0.id + ':' + (ol0.text || ol0.key) + ':' + ol0.x + ',' + ol0.y + ',' + ol0.scale + ',' + ol0.rot + ',' + (ol0.fs || ol0.w) + ',' + (ol0.color || ol0.radius) + ',' + (ol0.opacity == null ? 1 : ol0.opacity) + (ol0.fx ? ',' + ol0.fx.k + ol0.fx.u + ol0.fx.d + ol0.fx.st : '') + (ol0.mw ? ',w' + ol0.mw : '')
+    // Everything else a held layer's pixels depend on. The signature is the
+    // ONLY thing that repaints a hold, so a field missing here is an edit
+    // that does not show until something else moves.
+    if (ol0.lines) {
+      olVisSig += '|' + ol0.lines.join('\\n') + '|' + ol0.weight + '|' + ol0.stack + '|' + (ol0.sty || '') + '|' + (ol0.ls || 0) + '|' + (ol0.lh || 0) + '|' + (ol0.align || '') + '|' + ol0.shadow
+        + (ol0.stroke ? '|s' + ol0.stroke.c + ol0.stroke.w : '')
+        + (ol0.box ? '|b' + ol0.box.c + ol0.box.o + ',' + ol0.box.px + ',' + ol0.box.py + ',' + ol0.box.r : '')
+        + (ol0.rt ? '|r' + ol0.rt.h : '')
+    } else {
+      olVisSig += '|' + (ol0.shadow || '') + (ol0.border ? '|' + ol0.border.width + ol0.border.color : '') + (ol0.crop ? '|c' + ol0.crop.x + ',' + ol0.crop.y + ',' + ol0.crop.w + ',' + ol0.crop.h : '')
+    }
+    olVisSig += ';'
     // fx widens the entrance window to the whole staggered span (tt);
     // without fx it is the legacy enter transition window.
     var olEW = ol0.fx ? ol0.fx.tt : olTD
@@ -4878,8 +5306,20 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       if (ns.htmlErrors) delete ns.htmlErrors[hlK]
     }
   }
-  var ovSig = W + 'x' + H + '|' + olVisSig
-  var ovDirty = ov.sig !== ovSig || ov.active || olAnim
+  // A styled layer's cached layout leaves with its clip.
+  if (ns.textLayouts) {
+    for (var tlK in ns.textLayouts) {
+      var tlSeen = false
+      for (var tlI = 0; tlI < ols.length; tlI++) if (ols[tlI].id === tlK) { tlSeen = true; break }
+      if (!tlSeen) delete ns.textLayouts[tlK]
+    }
+  }
+  var ovSig = W + 'x' + H + '|' + (ns.fontEpoch || 0) + '|' + (ns.htmlSafe === false ? 0 : 1) + '|' + olVisSig
+  // The layer repaints when what it shows changed (the signature), while
+  // something on it animates, and ONCE more after an animation's last frame:
+  // that frame was drawn a moment short of settled, and a picture that
+  // landed between two frames is drawn by it too. A hold costs nothing.
+  var ovDirty = ov.sig !== ovSig || olAnim || ov.wasAnim
   // The layer cards visible this frame, with their pose, for the card
   // planes below (the overlay loop collects them instead of painting).
   var lcList = []
@@ -5108,7 +5548,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
         try {
           var ofBF = new FontFace(ofB.family, 'url(' + ofB.url + ')', { weight: String(ofB.weight) })
           document.fonts.add(ofBF)
-          ofBF.load().catch(function () {})
+          ofBF.load().then(ofBump, function () {})
         } catch (e) {}
       }
       if (ol.face) {
@@ -5118,20 +5558,22 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
           try {
             var ofFace = new FontFace(ol.face.f, 'url(' + ol.face.u + ')', { weight: String(ol.face.w) })
             document.fonts.add(ofFace)
-            ofFace.load().catch(function () {})
+            ofFace.load().then(ofBump, function () {})
           } catch (e) {}
         }
       }
-      // The emphasis weight's face, the same way (a live edit that adds the
-      // first *marked* word paints without a LOAD).
-      if (ol.em && ol.em.face) {
-        var oeKey = ol.em.face.f + '|' + ol.em.face.w
-        if (!ofSet[oeKey]) {
-          ofSet[oeKey] = 1
+      // A styled layer's other faces, the same way (a live edit that styles
+      // its first run paints without a LOAD).
+      if (ol.rt && ol.rt.faces) {
+        for (var rfj = 0; rfj < ol.rt.faces.length; rfj++) {
+          var rtF = ol.rt.faces[rfj]
+          var rtFK = rtF.f + '|' + rtF.w
+          if (ofSet[rtFK]) continue
+          ofSet[rtFK] = 1
           try {
-            var oeFace = new FontFace(ol.em.face.f, 'url(' + ol.em.face.u + ')', { weight: String(ol.em.face.w) })
-            document.fonts.add(oeFace)
-            oeFace.load().catch(function () {})
+            var rtFace = new FontFace(rtF.f, 'url(' + rtF.u + ')', { weight: String(rtF.w) })
+            document.fonts.add(rtFace)
+            rtFace.load().then(ofBump, function () {})
           } catch (e) {}
         }
       }
@@ -5150,68 +5592,153 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     ovC.textAlign = 'center'
     ovC.textBaseline = 'middle'
     ovC.letterSpacing = ((ol.ls || 0) * olMS * s) + 'px'
-    // Emphasis (ol.em, baked only when the text marks a word): the lines
-    // carry \\u0001/\\u0002 around every emphasized word, and the normal and
-    // emphasis fonts alternate at them, run by run. MIRRORS measureEmphasized
-    // in overlayText.ts \u2014 change together. A clip without ol.em never reaches
-    // these helpers: it keeps its plain measureText/fillText calls.
-    var olEm = ol.em || null
-    var olFN = ovC.font
-    var olFB = olEm ? (ol.sty ? ol.sty + ' ' : '') + olEm.w + ' ' + olPx + 'px ' + ol.stack : ''
-    var olMeasure = function (t, b0) {
-      if (!olEm) return ovC.measureText(t).width
-      var mw = 0, mrun = '', mb = !!b0
-      for (var mi = 0; mi < t.length; mi++) {
-        var mc = t.charAt(mi)
-        if (mc === '\\u0001' || mc === '\\u0002') {
-          if (mrun) { ovC.font = mb ? olFB : olFN; mw += ovC.measureText(mrun).width }
-          mrun = ''
-          mb = mc === '\\u0001'
-        } else mrun += mc
-      }
-      if (mrun) { ovC.font = mb ? olFB : olFN; mw += ovC.measureText(mrun).width }
-      ovC.font = olFN
-      return mw
-    }
-    // The emphasis state after a run of text (a char unit starts in it).
-    var olStateAfter = function (t, b0) {
-      var sb = !!b0
-      for (var si = 0; si < t.length; si++) {
-        var sc = t.charAt(si)
-        if (sc === '\\u0001') sb = true
-        else if (sc === '\\u0002') sb = false
-      }
-      return sb
-    }
-    // Draw t LEFT-aligned from x, run by run: the font switches at the
-    // marks, an emphasized run takes ol.em.c when set, stroke under fill.
-    var olDraw = function (t, x, y, b0) {
-      var drun = '', db = !!b0, dx = x
-      var dflush = function () {
-        if (!drun) return
-        ovC.font = db ? olFB : olFN
-        var dfs = ovC.fillStyle
-        if (db && olEm.c) ovC.fillStyle = olEm.c
+    // A STYLED layer (ol.rt: lines of runs, each set its own way) is laid
+    // out by the layout module, ONCE: the layout is kept per clip under a
+    // key of everything it was measured with, so a frame that only moves,
+    // fades or reveals the layer measures nothing. Fragments draw left to
+    // right from each line's left edge; a per-unit entrance animates the
+    // layout's units, each a few parts of fragments.
+    if (ol.rt) {
+      var rtFonts = [ovC.font]
+      for (var rfi = 1; rfi < ol.rt.fs.length; rfi++) {
+        rtFonts.push((ol.rt.fs[rfi].i ? 'italic ' : '') + ol.rt.fs[rfi].w + ' ' + olPx + 'px ' + ol.stack)
+      }
+      var rtFx = ol.fx && ol.fx.units.length ? ol.fx : null
+      var rtMax = ol.mw ? ol.mw * W : 0
+      var rtKey = ol.rt.h + '|' + rtFonts[0] + '|' + ((ol.ls || 0) * olMS * s) + '|' + rtMax + '|' + (rtFx ? rtFx.u : '') + '|' + (ns.fontEpoch || 0)
+      var rtAll = ns.textLayouts || (ns.textLayouts = {})
+      var rtHit = rtAll[ol.id]
+      if (!rtHit || rtHit.k !== rtKey) {
+        rtHit = rtAll[ol.id] = {
+          k: rtKey,
+          L: TXL.layoutText(
+            { lines: ol.rt.l, maxWidth: rtMax, unit: rtFx ? rtFx.u : undefined },
+            function (mt, mf) { ovC.font = rtFonts[mf]; return ovC.measureText(mt).width }
+          )
+        }
+        ovC.font = rtFonts[0]
+      }
+      var rtL = rtHit.L
+      var rtN = rtL.lines.length
+      var rtLH = olPx * (ol.lh || ${OVERLAY_LINE_HEIGHT})
+      var rtY0 = -((rtN - 1) * rtLH) / 2
+      // A line's left edge: lines sit centred on the anchor and align
+      // against the widest, as the plain layer's do.
+      var rtLeft = function (lw) {
+        var xo = ol.align === 'left' ? (lw - rtL.width) / 2 : ol.align === 'right' ? (rtL.width - lw) / 2 : 0
+        return xo - lw / 2
+      }
+      if (ol.box) {
+        var rbPX = ol.box.px * olMS * s
+        var rbPY = ol.box.py * olMS * s
+        var rbW = rtL.width + rbPX * 2
+        var rbH = rtN * rtLH + rbPY * 2
+        ovC.save()
+        ovC.globalAlpha = olA * ol.box.o
+        ovC.fillStyle = ol.box.c
+        rr(-rbW / 2, -rbH / 2, rbW, rbH, Math.min(ol.box.r * olMS * s, rbH / 2), ovC)
+        ovC.fill()
+        ovC.restore()
+      }
+      // Highlights sit behind the words and take no legibility shadow. Under
+      // a per-unit entrance each is drawn with its unit instead (below), so
+      // it arrives with its word.
+      for (var rhi = 0; !rtFx && rhi < rtN; rhi++) {
+        var rhLine = rtL.lines[rhi]
+        for (var rhj = 0; rhj < rhLine.frags.length; rhj++) {
+          var rhF = rhLine.frags[rhj]
+          if (!rhF.h) continue
+          var rhR = TXL.decorationRect('h', rtLeft(rhLine.w) + rhF.x, rhF.w, rtY0 + rhi * rtLH, olPx)
+          ovC.fillStyle = rhF.h
+          ovC.fillRect(rhR.x, rhR.y, rhR.w, rhR.h)
+        }
+      }
+      if (ol.shadow > 0) {
+        ovC.shadowColor = 'rgba(0,0,0,' + ol.shadow + ')'
+        ovC.shadowBlur = olPx * 0.25
+        ovC.shadowOffsetY = olPx * 0.04
+      }
+      ovC.textAlign = 'left'
+      // One fragment (or the part of one a unit holds): the underline under
+      // the glyphs, stroke under fill, the strikethrough over them.
+      var rtPart = function (p, bx, y, withH) {
+        if (withH && p.h) {
+          var rhU = TXL.decorationRect('h', bx + p.x, p.w, y, olPx)
+          var rhS = ovC.shadowColor
+          ovC.shadowColor = 'rgba(0,0,0,0)'
+          ovC.fillStyle = p.h
+          ovC.fillRect(rhU.x, rhU.y, rhU.w, rhU.h)
+          ovC.shadowColor = rhS
+        }
+        ovC.font = rtFonts[p.f || 0]
+        ovC.fillStyle = p.c || ol.color
+        if (p.u) {
+          var ru = TXL.decorationRect('u', bx + p.x, p.w, y, olPx)
+          ovC.fillRect(ru.x, ru.y, ru.w, ru.h)
+        }
         if (ol.stroke) {
           ovC.strokeStyle = ol.stroke.c
           ovC.lineWidth = ol.stroke.w * olMS * s
           ovC.lineJoin = 'round'
-          ovC.strokeText(drun, dx, y)
+          ovC.strokeText(p.t, bx + p.x, y)
+        }
+        ovC.fillText(p.t, bx + p.x, y)
+        if (p.s) {
+          var rs = TXL.decorationRect('s', bx + p.x, p.w, y, olPx)
+          ovC.fillRect(rs.x, rs.y, rs.w, rs.h)
         }
-        ovC.fillText(drun, dx, y)
-        dx += ovC.measureText(drun).width
-        ovC.fillStyle = dfs
-        drun = ''
       }
-      for (var di = 0; di < t.length; di++) {
-        var dc = t.charAt(di)
-        if (dc === '\\u0001' || dc === '\\u0002') {
-          dflush()
-          db = dc === '\\u0001'
-        } else drun += dc
+      if (!rtFx) {
+        for (var rli = 0; rli < rtN; rli++) {
+          var rLine = rtL.lines[rli]
+          var rBX = rtLeft(rLine.w)
+          for (var rfk = 0; rfk < rLine.frags.length; rfk++) rtPart(rLine.frags[rfk], rBX, rtY0 + rli * rtLH)
+        }
+      } else {
+        // Per-unit entrance, the plain layer's own arithmetic over the
+        // layout's units: delay = order(index) x st, eased over dur.
+        var rtCount = 0
+        for (var rci = 0; rci < rtN; rci++) rtCount += rtL.lines[rci].units.length
+        var rtIdx = 0
+        for (var rui = 0; rui < rtN; rui++) {
+          var rULine = rtL.lines[rui]
+          var rUBX = rtLeft(rULine.w)
+          var rUY = rtY0 + rui * rtLH
+          for (var ruj = 0; ruj < rULine.units.length; ruj++, rtIdx++) {
+            var rU = rULine.units[ruj]
+            var rOrd = rtFx.d === 1 ? (rtCount - 1 - rtIdx) : rtFx.d === 2 ? Math.abs(rtIdx - (rtCount - 1) / 2) : rtIdx
+            var rT2 = olT - rOrd * rtFx.st
+            var rUA = 1, rUu = 1
+            if (rtFx.k === 'typewriter') {
+              rUA = rT2 >= 0 ? 1 : 0
+            } else {
+              rUu = Math.max(0, Math.min(1, rT2 / rtFx.dur))
+              var rUE = 1 - Math.pow(1 - rUu, 3)
+              rUA = rtFx.k === 'pop' ? Math.min(1, rUu * 2) : rUE
+            }
+            if (rUA <= 0.004) continue
+            ovC.save()
+            ovC.globalAlpha = olA * rUA
+            if (rUu < 1) {
+              if (rtFx.k === 'rise') {
+                ovC.translate(0, (1 - (1 - Math.pow(1 - rUu, 3))) * 24 * s)
+              } else if (rtFx.k === 'pop') {
+                var rPS = 1 + 2.70158 * Math.pow(rUu - 1, 3) + 1.70158 * Math.pow(rUu - 1, 2)
+                var rCX = rUBX + rU.x + rU.w / 2
+                ovC.translate(rCX, rUY)
+                ovC.scale(rPS, rPS)
+                ovC.translate(-rCX, -rUY)
+              } else if (rtFx.k === 'blur') {
+                ovC.filter = 'blur(' + ((1 - rUu) * olPx * 0.12).toFixed(2) + 'px)'
+              }
+            }
+            for (var rpk = 0; rpk < rU.parts.length; rpk++) rtPart(rU.parts[rpk], rUBX, rUY, true)
+            ovC.restore()
+          }
+        }
       }
-      dflush()
-      ovC.font = olFN
+      ovC.restore()
+      continue
     }
     var olLines = ol.lines || ['']
     // maxWidth wrap (ol.mw = frame-width fraction): greedy over word tokens
@@ -5224,7 +5751,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       var olWrapped = []
       for (var olwl = 0; olwl < olLines.length; olwl++) {
         var olWLine = olLines[olwl]
-        if (!olWLine || olMeasure(olWLine) <= olWMax) {
+        if (!olWLine || ovC.measureText(olWLine).width <= olWMax) {
           olWrapped.push(olWLine)
           continue
         }
@@ -5232,7 +5759,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
         var olCur = ''
         for (var olti = 0; olti < olToks.length; olti++) {
           if (!olCur) { olCur = olToks[olti]; continue }
-          if (olMeasure(olCur + olToks[olti]) <= olWMax) {
+          if (ovC.measureText(olCur + olToks[olti]).width <= olWMax) {
             olCur += olToks[olti]
           } else {
             olWrapped.push(olCur)
@@ -5282,10 +5809,10 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
       olFx = { k: olFx.k, u: olFx.u, d: olFx.d, st: olFx.st, dur: olFx.dur, tt: olFx.tt, units: olRe, n: olReN }
     }
     var olLWs = null, olMaxW = 0
-    if (ol.box || ol.align || olFx || olEm) {
+    if (ol.box || ol.align || olFx) {
       olLWs = []
       for (var olwi = 0; olwi < olLines.length; olwi++) {
-        var olw = olMeasure(olLines[olwi])
+        var olw = ovC.measureText(olLines[olwi]).width
         olLWs.push(olw)
         if (olw > olMaxW) olMaxW = olw
       }
@@ -5321,12 +5848,6 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
             : (olMaxW - olLWs[ok]) / 2
         }
         var olLY = olY0 + ok * olLH
-        if (olEm) {
-          // Runs draw LEFT-aligned from the centred line's left edge.
-          ovC.textAlign = 'left'
-          olDraw(olLines[ok], olXof - olLWs[ok] / 2, olLY, false)
-          continue
-        }
         if (ol.stroke) {
           ovC.strokeStyle = ol.stroke.c
           ovC.lineWidth = ol.stroke.w * olMS * s
@@ -5363,10 +5884,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
               : olIdx
           var olT2 = olT - olOrd * olFx.st
           var olNext = olPref + olUs[ou]
-          var olNW = olMeasure(olNext)
-          // The emphasis state this unit starts in (a char unit inside a
-          // marked word carries no mark of its own).
-          var olUB = olEm ? olStateAfter(olPref) : false
+          var olNW = ovC.measureText(olNext).width
           var olUW = olNW - olPW
           var olUX = olXb + olPW
           var olUA = 1, olUu = 1
@@ -5395,11 +5913,6 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
               ovC.filter = 'blur(' + ((1 - olUu) * olPx * 0.12).toFixed(2) + 'px)'
             }
           }
-          if (olEm) {
-            olDraw(olUnit, olUX, olLY2, olUB)
-            ovC.restore()
-            continue
-          }
           if (ol.stroke) {
             ovC.strokeStyle = ol.stroke.c
             ovC.lineWidth = ol.stroke.w * olMS * s
@@ -5414,7 +5927,7 @@ var STUDIO_FRAME = `(ctx, content, dt) => {
     ovC.restore()
   }
   ov.sig = ovSig
-  ov.active = olVisSig !== ''
+  ov.wasAnim = olAnim
   if (ov.texture) ov.texture.needsUpdate = true
   }
 
@@ -8191,7 +8704,8 @@ var ON_FRAME = `(ctx, content, dt) => {
     window.__voilaDebug = { cv: cv, bgCv: bg.canvas, ovCv: ov.canvas, W: W, H: H, glW: gl && gl.width, glH: gl && gl.height, t: t, canvases: document.querySelectorAll('canvas').length }
   }
 }`;
-function studioLayerData(layers, duration, pins) {
+function studioLayerData(input, duration, pins) {
+  const layers = migrateText(input);
   const rec = "source" in layers ? layers : null;
   return {
     // Music/SFX clips with their gain envelopes baked (shared truth for the
@@ -8367,27 +8881,16 @@ function studioLayerData(layers, duration, pins) {
         }
         const st = resolveOverlayStyle(o);
         const bx = resolveOverlayBox(o);
-        const em = resolveEmphasis(o);
+        const rt = styledTextOf(o);
         return {
           ...base,
-          text: o.text,
-          // The DISPLAYED lines: emphasis marks inline, else the source.
-          lines: overlayLines(overlayDisplayText(o)),
-          // Emphasis set (weight, colour, face to lazy-load), only when
-          // the text marks a word: an unmarked clip's data is unchanged.
-          ...em ? {
-            em: {
-              w: em.weight,
-              ...em.color ? { c: em.color } : {},
-              ...em.face ? {
-                face: {
-                  f: em.face.family,
-                  w: em.face.weight,
-                  u: em.face.url
-                }
-              } : {}
-            }
-          } : {},
+          text: overlayPlainText(o),
+          // The lines a person reads. A styled layer (rt) is painted from
+          // its runs; these are then its words, for the signature.
+          lines: overlayLines(overlayPlainText(o)),
+          // The styled payload, only when the layer is set in more than
+          // one style: a plain clip's data is unchanged.
+          ...rt ? { rt } : {},
           fs: st.size,
           weight: st.weight,
           stack: st.stack,
@@ -8435,7 +8938,7 @@ function studioLayerData(layers, duration, pins) {
   };
 }
 function lowerToComposition(input) {
-  const doc = migrateMotion(input);
+  const doc = migrateText(migrateMotion(input));
   const rated = ratedSegments(doc);
   const transitions = docTransitions(doc);
   const footageEnd = durationSec(doc, rated);
@@ -8644,7 +9147,7 @@ function loweredZoomSpans(doc, rated, transitions, layout, camera, zoomStyle) {
   });
 }
 function docZoomTrack(input) {
-  const doc = migrateMotion(input);
+  const doc = migrateText(migrateMotion(input));
   const rated = ratedSegments(doc);
   const transitions = docTransitions(doc);
   const layout = docCardLayout(doc);
@@ -10520,6 +11023,68 @@ function applyLook(frame, look, size, video, placement) {
   return out;
 }
 
+// src/richText/caret.ts
+function caretStops(line, measure) {
+  const stops = [{ o: line.a, x: 0 }];
+  for (const fr of line.frags) {
+    let at = 0;
+    for (const g of graphemesOf(fr.t)) {
+      at += g.length;
+      stops.push({
+        o: line.a + fr.o + at,
+        x: fr.x + measure(fr.t.slice(0, at), fr.f || 0)
+      });
+    }
+  }
+  return stops;
+}
+function lineOfOffset(layout, offset) {
+  const lines = layout.lines;
+  for (let i = lines.length - 1; i >= 0; i--) {
+    if (offset >= lines[i].a) return i;
+  }
+  return 0;
+}
+function caretAt(layout, offset, measure) {
+  const li = lineOfOffset(layout, offset);
+  const stops = caretStops(layout.lines[li], measure);
+  let x = stops[stops.length - 1].x;
+  for (const s of stops) {
+    if (s.o >= offset) {
+      x = s.x;
+      break;
+    }
+  }
+  return { line: li, x };
+}
+function offsetAtX(line, x, measure) {
+  const stops = caretStops(line, measure);
+  let best = stops[0];
+  for (const s of stops) {
+    if (Math.abs(s.x - x) < Math.abs(best.x - x)) best = s;
+  }
+  return best.o;
+}
+function rangeRects(layout, start, end, measure, breakTail = 0) {
+  const out = [];
+  if (end <= start) return out;
+  layout.lines.forEach((line, i) => {
+    const lineEnd = line.a + line.n;
+    if (end <= line.a || start > lineEnd) return;
+    const stops = caretStops(line, measure);
+    const xOf = (o) => {
+      for (const s of stops) if (s.o >= o) return s.x;
+      return stops[stops.length - 1].x;
+    };
+    const x0 = xOf(Math.max(start, line.a));
+    const x1 = xOf(Math.min(end, lineEnd));
+    const next = layout.lines[i + 1];
+    const tail = next && next.a > lineEnd && end > lineEnd ? breakTail : 0;
+    if (x1 + tail > x0) out.push({ line: i, x: x0, w: x1 - x0 + tail });
+  });
+  return out;
+}
+
 // src/timeline/lanes.ts
 import {
   mapTime as mapTime3,
@@ -11508,7 +12073,7 @@ var overlaysLane = {
         kind: "clip",
         t: round13(o.start),
         duration: round13(o.duration),
-        label: o.kind === "text" ? o.text.split("\n")[0].slice(0, 24) || "Text" : o.kind === "html" ? htmlLayerLabel(o) : o.kind === "image" ? "Image" : "Video"
+        label: o.kind === "text" ? plainText(o.text).split("\n")[0].slice(0, 24) || "Text" : o.kind === "html" ? htmlLayerLabel(o) : o.kind === "image" ? "Image" : "Video"
       },
       // Pose diamonds render after the clips, so they sit on top.
       ...poseItems(o.id, o.start, o.duration, o.motion)
@@ -11900,6 +12465,7 @@ export {
   CURSOR_IDLE_FADE_OUT,
   CURSOR_IDLE_HOLD,
   DARK_GROUND,
+  DECORATION_THICKNESS_EM,
   DEFAULT_BROWSER_BAR,
   DEFAULT_CAM_POSE,
   DEFAULT_CAM_STYLE,
@@ -11920,8 +12486,6 @@ export {
   DRAG_FIT_LEVEL,
   DRAG_MIN_S,
   DRAG_MIN_TRAVEL_FRAC,
-  EM_CLOSE,
-  EM_OPEN,
   END_CARD_FROM,
   END_CARD_RECEDE,
   END_CARD_SECONDS,
@@ -11937,6 +12501,7 @@ export {
   FREEZE_DEFAULT_SECONDS,
   FREEZE_SECONDS_MAX,
   FREEZE_SECONDS_MIN,
+  HIGHLIGHT_HALF_EM,
   HOLD_DRIFT_MAX,
   HOUSE_GRADIENT,
   HOUSE_REGISTER,
@@ -11954,6 +12519,7 @@ export {
   MEDIA_FRAME_KEYS,
   MEDIA_KEY_PREFIX,
   MINIMAL_BAR_THEMES,
+  MIXED,
   MOTION_DELTA,
   MOTION_EASE,
   OBJECT_DEFAULT_SCALE,
@@ -11977,6 +12543,7 @@ export {
   REJECT_OVERLAP,
   REST_TILT_ID,
   RETIRED_ZOOM_STYLES,
+  RUN_STYLE_KEYS,
   SCENE_MOTION,
   SCENE_QUIET,
   SEGMENT_ENTER_KINDS,
@@ -11986,6 +12553,7 @@ export {
   SPEED_SPAN_MIN,
   STAGE_CLIP_PREFIX,
   STILL_DEFAULT,
+  STRIKE_OFFSET_EM,
   STUDIO_ENTRY_ID,
   STYLE_FIELDS,
   TEXT3D_DEPTH_DEFAULT,
@@ -12010,6 +12578,7 @@ export {
   TRANSITION_SECONDS_MAX,
   TRANSITION_SECONDS_MIN,
   TRANSITION_SPEED_MULT,
+  UNDERLINE_OFFSET_EM,
   WINDOW_FOCUS_MIN,
   ZOOM_CHAIN_GAP,
   ZOOM_EASE,
@@ -12032,6 +12601,7 @@ export {
   aspectRatioValue,
   audioLane,
   backdropMedia,
+  boldWeightFor,
   buildDigest,
   calloutBox,
   calloutClip,
@@ -12053,6 +12623,8 @@ export {
   cardInset,
   cardPointToScreen,
   cardPoseTrack,
+  caretAt,
+  caretStops,
   clampCamFrac,
   clampCamSize,
   clampFocus,
@@ -12060,9 +12632,11 @@ export {
   clampSpeedRate,
   clampTiltDeg,
   clampZoomLevel,
+  clearStyle,
   clipEnvelope,
   clipLength,
   clipsFrom,
+  commonStyle,
   computeCardLayout,
   computeMicRms,
   computePeaks,
@@ -12076,10 +12650,12 @@ export {
   cursorFromRecords,
   cursorFromTrace,
   cursorIdleFade,
+  decorationRect,
   deltaE,
   deriveViewportCrop,
   destinationById,
   destinationsForChannel,
+  diffInput,
   docCardLayout,
   docFreezes,
   docMediaList,
@@ -12146,14 +12722,16 @@ export {
   lastLayerEnd,
   layerMedia,
   layoutOf,
+  layoutText,
   levelForFocusFraction,
+  lineOfOffset,
   liveZoomStyleName,
   lookFromBrand,
   lookKindForGround,
   lowerProgramDoc,
   lowerStudioDoc,
   lowerToComposition,
-  measureEmphasized,
+  marksEmphasis,
   mediaAtOutput,
   mediaDuration,
   mediaFrame,
@@ -12164,20 +12742,23 @@ export {
   micLane,
   migrateHostedDoc,
   migrateMotion,
+  migrateText,
+  migrateTextClip,
   migrateZoomStyle,
   momentsFromDoc,
   motionTrack,
   musicBedClip,
   nextMediaId,
   normalizeCaptureSpace,
+  normalizeRuns,
   objectMotionBase,
   objectMotionPoseAt,
   objectsLane,
+  offsetAtX,
   outputDurationOf,
   outputEnd,
   outputRangeToSource,
   overlapFraction,
-  overlayDisplayText,
   overlayFaceFor,
   overlayFontFaces,
   overlayFontString,
@@ -12187,12 +12768,12 @@ export {
   overlayMotionBase,
   overlayMotionPoseAt,
   overlayPinPoseAt,
+  overlayPlainText,
   overlayRect,
   overlaysLane,
   ownFreezes,
   pageDisplayUrl,
   parseCssColour,
-  parseEmphasis,
   parsePoseId,
   pickStyle,
   pinBox,
@@ -12202,6 +12783,7 @@ export {
   pinReferent,
   pinReferentAt,
   placeFreezes,
+  plainText,
   planAutoSpeed,
   planAutoTilt,
   planAutoZoom,
@@ -12213,6 +12795,7 @@ export {
   programStillTime,
   projectFromArtifact,
   pumpFreeChainGap,
+  rangeRects,
   ratedSegments,
   recommendedExportResolution,
   refillAudioBeds,
@@ -12220,7 +12803,7 @@ export {
   relativeLuminance,
   removeSourceRange,
   removeSpeedInRange,
-  resolveEmphasis,
+  replaceRange,
   resolveExportSize,
   resolveOverlayBox,
   resolveOverlayStyle,
@@ -12230,6 +12813,7 @@ export {
   restLeanOf,
   restSpansThroughTransitions,
   rgbToHex,
+  runsOf,
   sameMedia,
   sceneChanges,
   scrollRuns,
@@ -12237,16 +12821,24 @@ export {
   outputLen as segmentOutputLen,
   segmentStarts,
   setSpeedInRange,
+  setStyle,
+  sliceRuns,
   slideSide,
   smoothCursor,
+  snapOffset,
+  snapRunWeight,
   spanOutputExtent,
   speedLane,
-  stripEmphasis,
   studioAudioPlan,
   studioEntry,
   studioLayerData,
+  styleAt,
+  styleOf,
+  styledTextOf,
   tiltLane,
   tiltTrackFromDoc,
+  toggleStyle,
+  tokenRanges,
   traceKindOf,
   transitionMult,
   transitionSeconds,