volito 0.1.1 → 0.3.1

package/dist/browser.js

@@ -3894,6 +3894,36 @@ function motion($, t) {
     return [x, y];
   }
 
+  /** Moves that read as a spring (a pop in the sound design) rather than travel across the frame. */
+  var MM_SPRINGY = { pop: 1, zoom: 1, push: 1, grow: 1, spin: 1, swing: 1, elastic: 1, bounce: 1, squash: 1, stretch: 1, flip: 1, turn: 1, unfold: 1, "grow-x": 1, "grow-y": 1 };
+  /**
+   * Tells the sound trace what a part does, through the runtime's timing helpers (they leave the marks a
+   * sound design reads): a slam shakes, a spring pops, a move across the frame enters from a distance, a
+   * fade fades, a typewriter types, a glitch flashes, and every emphasis hit bumps. One cheap call a frame;
+   * nothing is drawn.
+   */
+  function note(s, tm, c, text) {
+    if (tm.mv.always || typeof $.enter !== "function") return;
+    var mv = s["in"];
+    if (mv === "slam") $.shake(t, tm.at + tm.dur * 0.55, 24);
+    else if (mv === "typewriter") $.typed(t, tm.at, text || "", speed / (s.stagger > 0 ? Number(s.stagger) : 0.055));
+    else if (mv === "scramble") $.typed(t, tm.at, text || "", (text ? Array.from(text).length : 8) / Math.max(0.1, tm.dur));
+    else if (mv === "glitch" || mv === "flicker") $.flash(t, tm.at, { a: 0 });
+    else if (mv === "fade" || mv === "blur" || mv === "appear" || mv === "float") $.fadeIn(t, tm.at);
+    else if (MM_SPRINGY[mv]) $.pop(t, tm.at);
+    else {
+      var p0 = tm.mv.pose(0, 0, c) || {};
+      var dx = p0.x || 0, dy = p0.y || 0;
+      if (!dx && !dy && tm.mv.box && c.box) dx = c.box.w * 0.5;
+      if (dx || dy) $.enter(t, tm.at, { dx: dx, dy: dy }); else $.pop(t, tm.at);
+    }
+    hits(s).forEach(function (h) {
+      var at = hitTime(h.at, tm.at);
+      if (!isFinite(at)) return;
+      if (h.fx === "shake") $.shake(t, at, 16); else if (h.fx === "flash") $.flash(t, at, { a: 0 }); else $.bump(t, at);
+    });
+  }
+
   var api = {};
   api.mood = mood;
   api.seed = seed;
@@ -3908,6 +3938,7 @@ function motion($, t) {
     var tm = timing(s);
     var pv = pivot(o.box, s.origin, o, tm.mv.origin);
     var c = context(s, tm, o.box, pv[0], pv[1], salt(name) % 97);
+    note(s, tm, c);
     return render(kids, poseAt(s, tm, c, t), c);
   };
 
@@ -3974,6 +4005,7 @@ function motion($, t) {
     if (!lay.units.length || lay.mode === "none") {
       var pv = pivot(lay.box, s.origin, o, tm.mv.origin);
       var c = context(s, tm, lay.box, pv[0], pv[1], salt(name) % 97);
+      note(s, tm, c, lay.text);
       return render($.text(lay.text, font), poseAt(s, tm, c, t), c);
     }
     var n = lay.units.length;
@@ -3998,6 +4030,9 @@ function motion($, t) {
         shown = pool.charAt(Math.floor(mmHash(i * 7.7 + Math.floor(t * 18) * 1.9 + vseed) * pool.length));
       }
       if (t >= ut.at) lastShown = u;
+      // The sound trace: typing and scrambles once for the whole text, else the first unit with its move and every other one a tick.
+      if (behave === "type" || behave === "scramble") { if (i === 0) note(s, tm, c2, lay.text); }
+      else if (rk === 0) note(s, ut, c2, u.text); else if (typeof $.bump === "function") $.bump(t, ut.at);
       out += render(draw(shown, u.x, u), poseAt(s, ut, c2, t), c2);
     });
     var typed = tm.at + n * (s.stagger > 0 ? Number(s.stagger) : 0.055) / speed;
@@ -4167,6 +4202,72 @@ function parseMotionArgs(args) {
   return out;
 }
 
+// src/player/states.ts
+var STATE_PLAYS = ["once", "loop", "hold"];
+var NAME = /^[A-Za-z][\w-]{0,40}$/;
+function parseStates(value, where = "states") {
+  if (value == null || value === "") return void 0;
+  let v = value;
+  if (typeof v === "string") {
+    try {
+      v = JSON.parse(v);
+    } catch {
+      throw new Error(`${where} must be a JSON object, like {"idle":{"from":0,"to":1,"play":"loop"}}`);
+    }
+  }
+  if (!v || typeof v !== "object" || Array.isArray(v)) throw new Error(`${where} must be a JSON object of states`);
+  const out = {};
+  for (const [name, raw] of Object.entries(v)) {
+    if (!NAME.test(name)) throw new Error(`${where}: "${name}" is not a state name (letters, digits, - and _)`);
+    if (!raw || typeof raw !== "object" || Array.isArray(raw)) throw new Error(`${where}.${name} must be an object like {"from":"hover","to":"press","play":"once"}`);
+    const d = raw;
+    const play = d.play ?? "once";
+    if (!STATE_PLAYS.includes(play)) throw new Error(`${where}.${name}.play is one of ${STATE_PLAYS.join(", ")}`);
+    for (const k of ["from", "to"]) if (d[k] !== void 0 && typeof d[k] !== "number" && typeof d[k] !== "string") throw new Error(`${where}.${name}.${k} is seconds or a beat name`);
+    out[name] = { ...d.from !== void 0 ? { from: d.from } : {}, ...d.to !== void 0 ? { to: d.to } : {}, play, ...typeof d.next === "string" ? { next: d.next } : {} };
+  }
+  for (const [name, d] of Object.entries(out)) if (d.next && !(d.next in out)) throw new Error(`${where}.${name}.next is "${d.next}", which is not a state (${Object.keys(out).join(", ")})`);
+  return Object.keys(out).length ? out : void 0;
+}
+function parseTriggers(value, states) {
+  if (value == null || value === "") return [];
+  if (typeof value !== "string") throw new Error('on takes "event: state" pairs, like "pointerenter: hover; click: press"');
+  const out = [];
+  for (const raw of value.split(/[;\n]+/)) {
+    const s = raw.trim();
+    if (!s) continue;
+    const m = /^([a-z][a-z-]*)\s*(?:\(([^)]*)\))?\s*:\s*([A-Za-z][\w-]*)$/i.exec(s);
+    if (!m) throw new Error(`on: "${s}" is not "event: state" (or "event(fromState): state")`);
+    const from = (m[2] ?? "").split(/[\s|,]+/).filter(Boolean);
+    const t = { event: m[1].toLowerCase(), from, to: m[3] };
+    if (states) {
+      for (const n of [t.to, ...t.from]) if (!(n in states)) throw new Error(`on: "${n}" is not a state (${Object.keys(states).join(", ")})`);
+    }
+    out.push(t);
+  }
+  return out;
+}
+function resolveTime(v, fallback, duration, beats) {
+  let t;
+  if (v === void 0) t = fallback;
+  else if (typeof v === "number") t = v;
+  else if (v === "start") t = 0;
+  else if (v === "end") t = duration;
+  else if (v in beats) t = beats[v];
+  else if (Number.isFinite(Number(v))) t = Number(v);
+  else throw new Error(`"${v}" is not a beat (${Object.keys(beats).join(", ") || "none"}), seconds, start or end`);
+  if (t < 0) t = duration + t;
+  return Math.max(0, Math.min(duration, t));
+}
+function resolveState(name, states, duration, beats = {}) {
+  const d = states[name];
+  if (!d) throw new Error(`no state "${name}" (states: ${Object.keys(states).join(", ")})`);
+  const start = resolveTime(d.from, 0, duration, beats);
+  const end = resolveTime(d.to, duration, duration, beats);
+  if (end < start) throw new Error(`state "${name}" ends (${end.toFixed(2)} s) before it starts (${start.toFixed(2)} s)`);
+  return { name, start, end, play: d.play ?? "once", ...d.next ? { next: d.next } : {} };
+}
+
 // src/three.ts
 var MOTION_3D = String.raw`
 // ———————— Volito 3D ————————
@@ -4517,6 +4618,19 @@ function manifestProblems(m) {
     if (p?.type === "choice" && !p.options?.length) out.push(`prop "${name}" is a choice with no options`);
     if (p?.when && !(p.when.prop in (m.props ?? {}))) out.push(`prop "${name}" depends on an unknown prop "${p.when.prop}"`);
   }
+  if (m.states !== void 0 || m.on !== void 0) {
+    try {
+      const states = parseStates(m.states, "states");
+      if (!states) out.push("on needs states");
+      else {
+        parseTriggers(m.on, states);
+        const dur = m.duration?.default ?? 0;
+        for (const name of Object.keys(states)) resolveState(name, states, dur, m.beats ?? {});
+      }
+    } catch (e) {
+      out.push(e.message);
+    }
+  }
   return out;
 }
 function makeItem(pack, manifest, frameCode, shared = "") {
@@ -4827,9 +4941,127 @@ ${parts.join("\n")}` : ""
   ].filter(Boolean).join("\n");
 }
 
+// src/browser/fonts.ts
+function covers(range, cp) {
+  if (!range) return true;
+  return range.split(",").some((part) => {
+    const m = /U\+([0-9A-F?]+)(?:-([0-9A-F]+))?/i.exec(part.trim());
+    if (!m) return false;
+    const lo = Number.parseInt(m[1].replace(/\?/g, "0"), 16);
+    const hi = m[2] ? Number.parseInt(m[2], 16) : Number.parseInt(m[1].replace(/\?/g, "F"), 16);
+    return cp >= lo && cp <= hi;
+  });
+}
+function wideCodepoints(s, into = /* @__PURE__ */ new Set()) {
+  for (let i = 0; i < s.length; i++) {
+    const c = s.charCodeAt(i);
+    if (c >= 256) {
+      const cp = s.codePointAt(i);
+      into.add(cp);
+      if (cp > 65535) i++;
+    } else if (c === 38 && s.charCodeAt(i + 1) === 35) {
+      const m = /^&#(x[0-9a-f]+|\d+);/i.exec(s.slice(i, i + 12));
+      if (m) {
+        const cp = m[1][0] === "x" || m[1][0] === "X" ? Number.parseInt(m[1].slice(1), 16) : Number.parseInt(m[1], 10);
+        if (cp >= 256) into.add(cp);
+      }
+    }
+  }
+  return into;
+}
+function matchWeight(available, want) {
+  const ws = [...new Set(available)].sort((a, b) => a - b);
+  if (!ws.length || ws.includes(want)) return want;
+  const below = ws.filter((w) => w < want).reverse();
+  const above = ws.filter((w) => w > want);
+  if (want >= 400 && want <= 500) {
+    const upTo500 = above.filter((w) => w <= 500);
+    return upTo500[0] ?? below[0] ?? above[0];
+  }
+  return want < 400 ? below[0] ?? above[0] : above[0] ?? below[0];
+}
+var WEIGHT_WORDS = { normal: 400, bold: 700, bolder: 700, lighter: 300 };
+var weightOf = (v) => /^\d{3}$/.test(v) ? Number(v) : WEIGHT_WORDS[v.toLowerCase()];
+var familiesOf = (v) => v.split(",").map((f) => f.trim().replace(/^['"]|['"]$/g, "").trim()).filter(Boolean);
+function fontWants(svg) {
+  if (!/font/i.test(svg)) return [];
+  const exact = [];
+  const famLoose = /* @__PURE__ */ new Set();
+  const weightLoose = /* @__PURE__ */ new Set();
+  let italicLoose = false;
+  let loose = false;
+  const read = (decl) => {
+    const fams2 = [];
+    let weight;
+    let italic;
+    for (const m of decl.matchAll(/font-family\s*(?:=\s*"([^"]*)"|=\s*'([^']*)'|:\s*([^;"}]+))/gi)) fams2.push(...familiesOf(m[1] ?? m[2] ?? m[3] ?? ""));
+    for (const m of decl.matchAll(/font-weight\s*(?:=\s*["']?|:\s*)([a-z]+|\d{3})/gi)) weight = weightOf(m[1]) ?? weight;
+    for (const m of decl.matchAll(/font-style\s*(?:=\s*["']?|:\s*)([a-z]+)/gi)) italic = /^(italic|oblique)$/i.test(m[1]);
+    for (const m of decl.matchAll(/(?:^|[;"\s{])font\s*:\s*([^;"}]+)/gi)) {
+      const tokens = m[1].trim();
+      const size = /(?:^|\s)[\d.]+(?:px|em|rem|pt|%)(?:\/\S+)?\s+(.+)$/i.exec(tokens);
+      if (size) fams2.push(...familiesOf(size[1]));
+      const pre = size ? tokens.slice(0, tokens.length - size[0].length) : tokens;
+      for (const t of pre.split(/\s+/)) {
+        if (/^(italic|oblique)$/i.test(t)) italic = true;
+        const w = weightOf(t);
+        if (w) weight = w;
+      }
+    }
+    return { fams: fams2, weight, italic };
+  };
+  for (const m of svg.matchAll(/<(?!style\b)[a-z][^>]*font[^>]*>/gi)) {
+    const { fams: fams2, weight, italic } = read(m[0]);
+    if (!fams2.length && weight === void 0 && italic === void 0) continue;
+    if (fams2.length && weight !== void 0) for (const family of fams2) exact.push({ family, weight, italic: !!italic });
+    else {
+      loose = true;
+      fams2.forEach((f) => famLoose.add(f));
+      if (weight !== void 0) weightLoose.add(weight);
+      if (italic) italicLoose = true;
+    }
+  }
+  for (const m of svg.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)) {
+    const css = m[1].replace(/@font-face\s*{[^}]*}/gi, "");
+    for (const rule of css.matchAll(/{([^}]*)}/g)) {
+      const { fams: fams2, weight, italic } = read(rule[1]);
+      if (!fams2.length && weight === void 0 && italic === void 0) continue;
+      loose = true;
+      fams2.forEach((f) => famLoose.add(f));
+      if (weight !== void 0) weightLoose.add(weight);
+      if (italic) italicLoose = true;
+    }
+  }
+  if (!loose) return exact;
+  const fams = /* @__PURE__ */ new Set([...famLoose, ...exact.map((w) => w.family)]);
+  const weights = /* @__PURE__ */ new Set([...weightLoose, ...exact.map((w) => w.weight)]);
+  if (!weights.size) weights.add(400);
+  const out = [...exact];
+  for (const family of fams) for (const weight of weights) for (const italic of italicLoose ? [false, true] : [false]) out.push({ family, weight, italic });
+  return out;
+}
+function facesFor(all, wants, cps) {
+  const out = /* @__PURE__ */ new Map();
+  for (const want of wants) {
+    const fam = all.filter((f) => f.family.toLowerCase() === want.family.toLowerCase());
+    if (!fam.length) continue;
+    const slant = fam.filter((f) => f.italic === want.italic);
+    const pool = slant.length ? slant : fam;
+    const weight = matchWeight(
+      pool.map((f) => f.weight),
+      want.weight
+    );
+    for (const f of pool) {
+      if (f.weight !== weight) continue;
+      if (f.subset === "latin" || [...cps].some((cp) => covers(f.range, cp))) out.set(f.file, f);
+    }
+  }
+  return [...out.values()];
+}
+
 // src/browser/index.ts
-var VERSION = "0.1.1";
-var CDN_BASE = `https://cdn.jsdelivr.net/npm/${"volito"}@${"0.1.1"}/`;
+var VERSION = "0.3.1";
+var CDN_BASE = `https://cdn.jsdelivr.net/npm/${"volito"}@${"0.3.1"}/`;
 var registries = /* @__PURE__ */ new Map();
 function loadRegistry(base = CDN_BASE) {
   const url = new URL("dist/registry.json", base).href;
@@ -4863,7 +5095,7 @@ async function preloadGlyphs(item, opts, base) {
       if (glyphTables.has(key)) return Promise.resolve();
       const pending = glyphLoads.get(key);
       if (pending) return pending;
-      const p = fetch(new URL(`fonts/${file}`, base).href).then((r) => r.ok ? r.arrayBuffer() : Promise.reject(new Error(`HTTP ${r.status}`))).then((buf) => {
+      const p = fontBlob(new URL(`fonts/${file}`, base).href).then((b) => b.arrayBuffer()).then((buf) => {
         glyphTables.set(key, glyphTable(new TrueTypeFace(new Uint8Array(buf)), key));
       }).catch(() => {
         glyphLoads.delete(key);
@@ -4874,7 +5106,9 @@ async function preloadGlyphs(item, opts, base) {
   );
 }
 var faceLists = /* @__PURE__ */ new Map();
-var faceData = /* @__PURE__ */ new Map();
+var fontBlobs = /* @__PURE__ */ new Map();
+var fontObjectUrls = /* @__PURE__ */ new Map();
+var fontDataUrls = /* @__PURE__ */ new Map();
 function facesAt(base) {
   const url = new URL("fonts/faces.json", base).href;
   let p = faceLists.get(url);
@@ -4888,44 +5122,46 @@ function facesAt(base) {
   }
   return p;
 }
-function dataUrl(url) {
-  let p = faceData.get(url);
+function fontBlob(url) {
+  let p = fontBlobs.get(url);
   if (!p) {
     p = fetch(url).then((r) => {
       if (!r.ok) throw new MotionError(`${url}: HTTP ${r.status}`);
       return r.blob();
-    }).then((b) => new Promise((res, rej) => {
-      const fr = new FileReader();
-      fr.onload = () => res(String(fr.result));
-      fr.onerror = () => rej(fr.error);
-      fr.readAsDataURL(b);
-    }));
-    faceData.set(url, p);
-    p.catch(() => faceData.delete(url));
+    });
+    fontBlobs.set(url, p);
+    p.catch(() => fontBlobs.delete(url));
   }
   return p;
 }
-function covers(range, cp) {
-  if (!range) return true;
-  return range.split(",").some((part) => {
-    const m = /U\+([0-9A-F?]+)(?:-([0-9A-F]+))?/i.exec(part.trim());
-    if (!m) return false;
-    const lo = Number.parseInt(m[1].replace(/\?/g, "0"), 16);
-    const hi = m[2] ? Number.parseInt(m[2], 16) : Number.parseInt(m[1].replace(/\?/g, "F"), 16);
-    return cp >= lo && cp <= hi;
-  });
+function fontObjectUrl(url) {
+  let p = fontObjectUrls.get(url);
+  if (!p) {
+    p = fontBlob(url).then((b) => URL.createObjectURL(b));
+    fontObjectUrls.set(url, p);
+    p.catch(() => fontObjectUrls.delete(url));
+  }
+  return p;
 }
-async function fontsFor(program, text, base) {
-  const faces = await facesAt(base);
-  const fams = /* @__PURE__ */ new Set(["Inter", ...program.fonts.map((f) => f.split(":")[0])]);
-  const subsets = /* @__PURE__ */ new Set(["latin", "latin-ext"]);
-  for (const ch of text) {
-    const cp = ch.codePointAt(0);
-    if (cp < 592) continue;
-    for (const f of faces) if (covers(f.range, cp)) subsets.add(f.subset);
+function fontDataUrl(url) {
+  let p = fontDataUrls.get(url);
+  if (!p) {
+    p = fontBlob(url).then(
+      (b) => new Promise((res, rej) => {
+        const fr = new FileReader();
+        fr.onload = () => res(String(fr.result));
+        fr.onerror = () => rej(fr.error);
+        fr.readAsDataURL(b);
+      })
+    );
+    fontDataUrls.set(url, p);
+    p.catch(() => fontDataUrls.delete(url));
   }
-  const chosen = faces.filter((f) => fams.has(f.family) && subsets.has(f.subset));
-  return Promise.all(chosen.map(async (f) => ({ family: f.family, weight: f.weight, italic: f.italic, range: f.range, url: await dataUrl(new URL(`fonts/${f.file}`, base).href) })));
+  return p;
+}
+var faceUrl = (base, f) => new URL(`fonts/${f.file}`, base).href;
+async function payloadFor(faces, base, url) {
+  return Promise.all(faces.map(async (f) => ({ family: f.family, weight: f.weight, italic: f.italic, range: f.range, url: await url(faceUrl(base, f)) })));
 }
 var fontCss = (fonts) => fonts.map((f) => `@font-face{font-family:'${f.family}';font-weight:${f.weight};font-style:${f.italic ? "italic" : "normal"};${f.range ? `unicode-range:${f.range};` : ""}src:url(${f.url});}`).join("");
 var ProgramWorker = class {
@@ -5022,7 +5258,14 @@ var MotionPlayer = class _MotionPlayer {
   opts;
   built;
   worker = null;
-  css = "";
+  env;
+  /** Every face the package has (fonts/faces.json), and the files the worker has loaded. */
+  all = [];
+  loaded = /* @__PURE__ */ new Set();
+  css = /* @__PURE__ */ new Map();
+  widening = null;
+  gone = false;
+  lastT = 0;
   raf = 0;
   started = 0;
   offset = 0;
@@ -5053,20 +5296,82 @@ var MotionPlayer = class _MotionPlayer {
   get program() {
     return this.built.program;
   }
+  get base() {
+    return this.opts.base ?? CDN_BASE;
+  }
   async load() {
-    this.worker?.stop();
-    await preloadGlyphs(this.item, this.opts, this.opts.base ?? CDN_BASE);
+    const old = this.worker;
+    this.worker = null;
+    old?.stop();
+    await preloadGlyphs(this.item, this.opts, this.base);
     this.built = buildProgram(this.item, this.opts);
-    const fps = this.opts.fps ?? 30;
-    const env = programEnv(this.built.program, this.built.duration, fps, this.built.media);
-    const fonts = await fontsFor(this.built.program, JSON.stringify(this.built.props), this.opts.base ?? CDN_BASE);
-    this.css = fontCss(fonts);
-    this.worker = new ProgramWorker(this.built.program, env, fonts, this.built.codeOffset);
+    this.env = programEnv(this.built.program, this.built.duration, this.opts.fps ?? 30, this.built.media);
+    this.all = await facesAt(this.base);
     this.lastSvg = "";
     this.report(this.built.warnings);
-    await this.worker.ready;
+    let faces = facesFor(this.all, this.built.program.fonts.map((f) => parseFontSpec(f)), wideCodepoints(JSON.stringify(this.built.props)));
+    let worker = await this.startWorker(faces);
+    const have = new Set(faces.map((f) => f.file));
+    const more = [];
+    try {
+      for (const k of [0.1, 0.35, 0.6, 0.85]) for (const f of this.facesOf(await worker.frame(this.built.duration * k))) if (!have.has(f.file) && have.add(f.file)) more.push(f);
+    } catch {
+    }
+    if (more.length) {
+      worker.stop();
+      faces = [...faces, ...more];
+      worker = await this.startWorker(faces);
+    }
+    if (this.gone) return worker.stop();
+    this.worker = worker;
+    this.loaded = have;
     await this.draw(this.offset);
   }
+  async startWorker(faces) {
+    const fonts = await payloadFor(faces, this.base, fontObjectUrl);
+    const w = new ProgramWorker(this.built.program, this.env, fonts, this.built.codeOffset);
+    await w.ready;
+    return w;
+  }
+  /** The faces a frame draws with. */
+  facesOf(f) {
+    const svg = f.defs + f.svg;
+    return facesFor(this.all, fontWants(svg), wideCodepoints(svg));
+  }
+  /** The @font-face rules for a set of faces, as data: URLs; one string per set, made once. */
+  cssOf(faces) {
+    const key = faces.map((f) => f.file).sort().join("|");
+    let p = this.css.get(key);
+    if (!p) {
+      p = payloadFor(faces, this.base, fontDataUrl).then(fontCss);
+      this.css.set(key, p);
+      p.catch(() => this.css.delete(key));
+    }
+    return p;
+  }
+  /** A frame drew with a face the worker lacks (so measured without it): restart it with that face, then redraw. */
+  widen(faces) {
+    if (this.widening) return this.widening;
+    const program = this.built.program;
+    this.widening = (async () => {
+      const files = new Set(this.loaded);
+      for (const f of faces) files.add(f.file);
+      try {
+        const next = await this.startWorker(this.all.filter((f) => files.has(f.file)));
+        const old = this.worker;
+        if (this.gone || !old || this.built.program !== program) return next.stop();
+        this.worker = next;
+        this.loaded = files;
+        setTimeout(() => old.stop(), 2500);
+        this.lastSvg = "";
+        if (!this.playing) await this.draw(this.lastT);
+      } catch {
+      }
+    })().finally(() => {
+      this.widening = null;
+    });
+    return this.widening;
+  }
   report(w) {
     const key = w.join("\n");
     if (key === this.warned) return;
@@ -5089,10 +5394,13 @@ var MotionPlayer = class _MotionPlayer {
     const p = this.built.program;
     const w = this.canvas.width || p.width;
     const h = this.canvas.height || Math.round(w * p.height / p.width);
+    this.lastT = t;
     try {
       const f = await this.worker.frame(Math.max(0, Math.min(this.duration, t)));
       this.report([...this.built.warnings, ...f.warnings]);
-      const doc = frameDocument(p, f, this.css, w, h, this.opts.background);
+      const faces = this.facesOf(f);
+      if (faces.some((x) => !this.loaded.has(x.file))) void this.widen(faces);
+      const doc = frameDocument(p, f, await this.cssOf(faces), w, h, this.opts.background);
       if (doc !== this.lastSvg) {
         const img = await decode(doc);
         const ctx = this.canvas.getContext("2d");
@@ -5140,6 +5448,7 @@ var MotionPlayer = class _MotionPlayer {
     else await this.draw(this.offset);
   }
   destroy() {
+    this.gone = true;
     this.pause();
     this.worker?.stop();
     this.worker = null;