pixi-effects 0.30.1 → 0.32.0

package/dist/{chunk-ZAXYPXKW.js → chunk-AW5NPDE4.js}

@@ -1,7 +1,7 @@
-import { collectPropKeys, describeLayer } from './chunk-RCVZX2JP.js';
+import { describeLayer, collectPropKeys } from './chunk-C5BNHVKK.js';
 import { suggestName, warnUnknownOptions } from './chunk-BXOCEZ4U.js';
 import * as PIXI from 'pixi.js';
-import { Rectangle, Container, Color, GraphicsPath, Sprite, Texture, Graphics, Assets, FillGradient, Text, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup } from 'pixi.js';
+import { Rectangle, Container, FillGradient, Text, Color, GraphicsPath, Sprite, Texture, Graphics, Assets, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup, TextStyle, CanvasTextMetrics } from 'pixi.js';
 
 // src/core/spring.ts
 var SETTLE_TOL = 5e-3;
@@ -345,6 +345,35 @@ function pixiAccessors(target, key) {
       return null;
   }
 }
+function pathView(target, key) {
+  const parts = key.split(".");
+  const leaf = parts.pop();
+  const parentOf = () => {
+    let o = target;
+    for (const p of parts) {
+      o = o?.[p];
+      if (o === null || typeof o !== "object") return null;
+    }
+    return o;
+  };
+  const first = parentOf();
+  if (!first || !(leaf in first)) return null;
+  const view = {};
+  Object.defineProperty(view, leaf, {
+    get: () => parentOf()?.[leaf],
+    set: (v) => {
+      const parent = parentOf();
+      if (parent) parent[leaf] = v;
+    }
+  });
+  return { view, leaf };
+}
+var saidPaths = /* @__PURE__ */ new Set();
+function warnLeadsNowhere(key) {
+  if (saidPaths.has(key)) return;
+  saidPaths.add(key);
+  console.warn(`pixi-effects: "${key}" leads nowhere on its target, so it is ignored (a point option of a filter must exist to be animated: give it in the filter's options, e.g. red: { x: 0, y: 0 })`);
+}
 function rawAccessor(target, key) {
   return { id: key, kind: "raw", unit: 1, round: 1, get: () => target[key], set: (v) => {
     target[key] = v;
@@ -462,7 +491,14 @@ var PureTimeline = class _PureTimeline {
       for (const key of Object.keys(v)) {
         if (RESERVED.has(key) || key === "pixi" || CALLBACKS.includes(key)) continue;
         const value = v[key];
-        const acc = parseRel(value) ? plainAccessor(t, key) : typeof value === "string" && parseCssColor(value) ? cssAccessor(t, key) : rawAccessor(t, key);
+        const path = key.includes(".") ? pathView(t, key) : null;
+        if (key.includes(".") && !path) {
+          warnLeadsNowhere(key);
+          continue;
+        }
+        const at2 = path?.view ?? t, name = path?.leaf ?? key;
+        const acc = parseRel(value) ? plainAccessor(at2, name) : typeof value === "string" && parseCssColor(value) ? cssAccessor(at2, name) : rawAccessor(at2, name);
+        acc.id = key;
         out.set(acc.id, { acc, value });
       }
       if (v.pixi) for (const key of Object.keys(v.pixi)) {
@@ -870,7 +906,14 @@ function setNow(target, vars) {
       }
     } else {
       const v = vars[key];
-      plainAccessor(t, key).set(typeof v === "number" ? Math.round(v * 1e6) / 1e6 : v);
+      const value = typeof v === "number" ? Math.round(v * 1e6) / 1e6 : v;
+      if (key.includes(".")) {
+        const path = pathView(t, key);
+        if (path) path.view[path.leaf] = value;
+        else warnLeadsNowhere(key);
+        continue;
+      }
+      plainAccessor(t, key).set(value);
     }
   }
 }
@@ -954,6 +997,7 @@ var FUNCS = {
   step: (edge, x) => x >= edge ? 1 : 0
 };
 var CONSTS = { PI: Math.PI };
+var EXPRESSION_NAMES = [...Object.keys(FUNCS), ...Object.keys(CONSTS)];
 function isDigit(c) {
   return c >= "0" && c <= "9";
 }
@@ -1460,6 +1504,8 @@ function buildScope(sequence, parent, root) {
   const contain = w === 0 || h === 0 ? 1 : Math.min(W / w, H / h);
   const cover = w === 0 || h === 0 ? 1 : Math.max(W / w, H / h);
   return {
+    ...root.vars ?? {},
+    // the declared numbers first: the built-in words below win
     w,
     h,
     W,
@@ -2245,6 +2291,13 @@ var registry = {
 function looksLikePixiFilter(x) {
   return !!x && typeof x === "object" && typeof x.apply === "function";
 }
+function copyPlain(v) {
+  if (Array.isArray(v)) return v.map(copyPlain);
+  if (v && typeof v === "object" && Object.getPrototypeOf(v) === Object.prototype) {
+    return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, copyPlain(x)]));
+  }
+  return v;
+}
 function createFilter(spec) {
   if (spec.type === "custom") {
     const inst2 = spec.filter;
@@ -2255,7 +2308,8 @@ function createFilter(spec) {
     named._name = spec.name;
     return named;
   }
-  const { type, name, ...params } = spec;
+  const { type, name, ...given } = spec;
+  const params = copyPlain(given);
   const Cls = registry[type];
   const inst = Cls ? new Cls(params) : createNamedFilter(type, params);
   inst._name = name;
@@ -2380,694 +2434,345 @@ var NullSequence = class extends Sequence {
   }
 };
 
-// src/core/remap.ts
-var BAGS = ["set", "to", "from"];
-function timeRemapOf(spec, prop = "time") {
-  const hasInitial = !!spec.initial && "time" in spec.initial;
-  const hasKf = (spec.keyframes ?? []).some((kf) => BAGS.some((b) => kf[b] && "time" in kf[b]));
-  const speed = typeof spec.speed === "number" && Number.isFinite(spec.speed) && spec.speed !== 0 ? spec.speed : void 0;
-  if (!hasInitial && !hasKf && speed === void 0) return null;
-  const timeKfs = [];
-  const restKfs = [];
-  for (const kf of spec.keyframes ?? []) {
-    const t = { ...kf }, r = { ...kf };
-    let touched = false, left = false;
-    for (const b of BAGS) {
-      const bag = kf[b];
-      if (!bag) {
-        delete t[b];
-        delete r[b];
-        continue;
-      }
-      const { time, ...others } = bag;
-      if ("time" in bag) {
-        touched = true;
-        t[b] = { [prop]: time };
-      } else delete t[b];
-      if (Object.keys(others).length) {
-        r[b] = others;
-        left = true;
-      } else delete r[b];
-    }
-    if (touched) timeKfs.push(t);
-    if (!touched || left) restKfs.push(r);
-  }
-  let restInitial = spec.initial;
-  let start;
-  if (hasInitial) {
-    const { time, ...others } = spec.initial;
-    start = typeof time === "number" && Number.isFinite(time) ? time : void 0;
-    restInitial = others;
-  }
-  return { timeKfs, restKfs: restKfs.length ? restKfs : void 0, restInitial, start, speed };
+// src/sequences/gradient.ts
+function cssColor(c) {
+  return typeof c === "number" ? "#" + c.toString(16).padStart(6, "0") : c;
 }
-function resolveFromEnd(remap, length, prop) {
-  const fix = (v) => typeof v === "number" && v < 0 ? Math.max(0, length + v) : v;
-  const timeKfs = remap.timeKfs.map((kf) => {
-    const out = { ...kf };
-    for (const b of BAGS) {
-      const bag = kf[b];
-      if (bag && prop in bag) out[b] = { ...bag, [prop]: fix(bag[prop]) };
-    }
-    return out;
-  });
-  return { ...remap, timeKfs, start: remap.start === void 0 ? void 0 : fix(remap.start) };
+function normalizedStops(g) {
+  const stops = g.stops ?? [];
+  if (stops.length < 2) throw new Error('pixi-effects: fillGradient needs at least two colour stops, e.g. stops: [[0, "#000"], [1, "#fff"]]');
+  return stops.map((s) => Array.isArray(s) ? { offset: s[0], color: s[1] } : { offset: s.offset, color: s.color });
 }
-function remapOf(spec, prop, length) {
-  const r = timeRemapOf(spec, prop);
-  return r && length !== null ? resolveFromEnd(r, length, prop) : r;
+function gradientOptions(g) {
+  const colorStops = normalizedStops(g);
+  const a = (g.angle ?? 90) * Math.PI / 180;
+  const dx = Math.cos(a), dy = Math.sin(a);
+  const h = (Math.abs(dx) + Math.abs(dy)) / 2;
+  return {
+    type: "linear",
+    start: { x: 0.5 - dx * h, y: 0.5 - dy * h },
+    end: { x: 0.5 + dx * h, y: 0.5 + dy * h },
+    colorStops,
+    textureSpace: "local"
+  };
 }
-function contentLength(remap, duration) {
-  let m = duration;
-  if (remap.speed !== void 0) m = Math.max(m, Math.abs(remap.speed) * duration);
-  if (remap.start !== void 0) m = Math.max(m, remap.start + (remap.speed ?? 1) * duration);
-  for (const kf of remap.timeKfs) {
-    for (const b of BAGS) {
-      const bag = kf[b];
-      const v = bag && Object.values(bag)[0];
-      if (typeof v === "number") m = Math.max(m, v);
-    }
+function paintRadial(ctx, size, g) {
+  const stops = normalizedStops(g);
+  const [cx, cy] = g.center ?? [0.5, 0.5];
+  const grad = ctx.createRadialGradient(cx * size, cy * size, (g.innerRadius ?? 0) * size, cx * size, cy * size, (g.radius ?? 0.5) * size);
+  for (const s of stops) grad.addColorStop(s.offset, cssColor(s.color));
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, size, size);
+}
+
+// src/expr/colorInterp.ts
+var CHROMA_FLOOR = 0.03;
+var CHROMA_FULL = 0.08;
+function buildColorInterp(from, to, space) {
+  const fromRGBA = parseToRGBA(from);
+  const toRGBA = parseToRGBA(to);
+  const fromOk = rgbToOklab(fromRGBA);
+  const toOk = rgbToOklab(toRGBA);
+  if (space === "oklab") {
+    return (t) => {
+      const L = lerp(fromOk.L, toOk.L, t);
+      const a = lerp(fromOk.a, toOk.a, t);
+      const b = lerp(fromOk.b, toOk.b, t);
+      const alpha = lerp(fromRGBA.a, toRGBA.a, t);
+      return rgbaString(oklabToRgb({ L, a, b }), alpha);
+    };
   }
-  return m;
+  const fromLCH = oklabToOklch(fromOk);
+  const toLCH = oklabToOklch(toOk);
+  const fromHue = fromLCH.h, toHue = toLCH.h;
+  fromLCH.h = borrowHue(fromHue, fromLCH.C, toHue);
+  toLCH.h = borrowHue(toHue, toLCH.C, fromHue);
+  const hueDelta = shortestHueDelta(fromLCH.h, toLCH.h);
+  return (t) => {
+    const L = lerp(fromLCH.L, toLCH.L, t);
+    const C = lerp(fromLCH.C, toLCH.C, t);
+    const h = fromLCH.h + hueDelta * t;
+    const alpha = lerp(fromRGBA.a, toRGBA.a, t);
+    const ab = oklchToOklab({ L, C, h });
+    return rgbaString(oklabToRgb(ab), alpha);
+  };
 }
-function bindClock(timeline, clock, prop, remap, duration, at, scope) {
-  if (remap.timeKfs.length) {
-    if (remap.start !== void 0) timeline.set(clock, { [prop]: remap.start }, at);
-    applyKeyframes(timeline, clock, remap.timeKfs, duration, scope, [], at);
-    return;
+function borrowHue(own, chroma, other) {
+  const u = Math.min(1, Math.max(0, (chroma - CHROMA_FLOOR) / (CHROMA_FULL - CHROMA_FLOOR)));
+  const keep = u * u * (3 - 2 * u);
+  return own + shortestHueDelta(own, other) * (1 - keep);
+}
+function parseToRGBA(input) {
+  if (typeof input === "number") {
+    return { r: (input >> 16 & 255) / 255, g: (input >> 8 & 255) / 255, b: (input & 255) / 255, a: 1 };
   }
-  const s = remap.speed ?? 1;
-  const from = remap.start ?? (s < 0 ? -s * duration : 0);
-  timeline.fromTo(clock, { [prop]: from }, { [prop]: from + s * duration, duration, ease: "none" }, at);
+  const s = input.trim();
+  if (s.startsWith("#")) return parseHex(s);
+  if (s.startsWith("rgb")) return parseRgbFunc(s);
+  return { r: 0, g: 0, b: 0, a: 1 };
 }
-function clockTable(remap, prop, duration, at, scope, to) {
-  const probe = createTimeline({ paused: true });
-  const clock = { [prop]: remap.start ?? 0 };
-  bindClock(probe, clock, prop, remap, duration, at, scope);
-  probe.time(probe.duration());
-  probe.time(0);
-  const h = 1 / 1e3;
-  const n = Math.max(2, Math.ceil(to / h) + 2);
-  const tab = new Float64Array(n);
-  let min = Infinity, max = -Infinity;
-  for (let k = 0; k < n; k++) {
-    probe.time(k * h);
-    const v = clock[prop];
-    tab[k] = v;
-    const t = k * h;
-    if (t >= at && t <= at + duration) {
-      if (v < min) min = v;
-      if (v > max) max = v;
-    }
+function parseHex(s) {
+  const hex = s.slice(1);
+  let r = 0, g = 0, b = 0, a = 1;
+  if (hex.length === 3 || hex.length === 4) {
+    r = parseInt(hex[0] + hex[0], 16) / 255;
+    g = parseInt(hex[1] + hex[1], 16) / 255;
+    b = parseInt(hex[2] + hex[2], 16) / 255;
+    if (hex.length === 4) a = parseInt(hex[3] + hex[3], 16) / 255;
+  } else if (hex.length === 6 || hex.length === 8) {
+    r = parseInt(hex.slice(0, 2), 16) / 255;
+    g = parseInt(hex.slice(2, 4), 16) / 255;
+    b = parseInt(hex.slice(4, 6), 16) / 255;
+    if (hex.length === 8) a = parseInt(hex.slice(6, 8), 16) / 255;
   }
-  probe.kill();
+  return { r, g, b, a };
+}
+function parseRgbFunc(s) {
+  const inner = s.replace(/^rgba?\(/, "").replace(/\)$/, "");
+  const parts = inner.split(/[,\s/]+/).filter(Boolean).map(parseFloat);
   return {
-    at(t) {
-      const x = Math.min(Math.max(t / h, 0), n - 1.000001);
-      const k = Math.floor(x), f = x - k;
-      return tab[k] * (1 - f) + tab[k + 1] * f;
-    },
-    min: Number.isFinite(min) ? min : 0,
-    max: Number.isFinite(max) ? max : 0
+    r: (parts[0] ?? 0) / 255,
+    g: (parts[1] ?? 0) / 255,
+    b: (parts[2] ?? 0) / 255,
+    a: parts.length > 3 ? parts[3] ?? 1 : 1
   };
 }
-
-// src/space/math.ts
-var DEG3 = Math.PI / 180;
-var DEFAULT_FOV = 40;
-var MIN_FOV = 1;
-var MAX_FOV = 179;
-var NEAR = 1;
-function clampFov(fov) {
-  if (!Number.isFinite(fov)) return DEFAULT_FOV;
-  return Math.min(MAX_FOV, Math.max(MIN_FOV, fov));
+function rgbaString(rgb, alpha) {
+  const r = Math.round(clamp01(rgb.r) * 255);
+  const g = Math.round(clamp01(rgb.g) * 255);
+  const b = Math.round(clamp01(rgb.b) * 255);
+  return `rgba(${r},${g},${b},${alpha})`;
 }
-function homeDistance(compHeight, fovDeg) {
-  return compHeight / 2 / Math.tan(clampFov(fovDeg) * DEG3 / 2);
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
 }
-function homeCamera(compW, compH, fov = DEFAULT_FOV) {
+function linearToSrgb(c) {
+  return c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+function rgbToOklab(rgba) {
+  const r = srgbToLinear(rgba.r);
+  const g = srgbToLinear(rgba.g);
+  const b = srgbToLinear(rgba.b);
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
   return {
-    x: compW / 2,
-    y: compH / 2,
-    z: homeDistance(compH, fov),
-    lookAtX: compW / 2,
-    lookAtY: compH / 2,
-    lookAtZ: 0,
-    fov
+    L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+    a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+    b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_
   };
 }
-function cameraBasis(cam, compW, compH) {
-  let fx = cam.lookAtX - cam.x;
-  let fy = cam.lookAtY - cam.y;
-  let fz = cam.lookAtZ - cam.z;
-  let len = Math.hypot(fx, fy, fz);
-  if (len < 1e-9) {
-    fx = 0;
-    fy = 0;
-    fz = -1;
-    len = 1;
-  }
-  fx /= len;
-  fy /= len;
-  fz /= len;
-  let rx = -fz;
-  const ry = 0;
-  let rz = fx;
-  const rlen = Math.hypot(rx, rz);
-  if (rlen < 1e-9) {
-    rx = 1;
-    rz = 0;
-  } else {
-    rx /= rlen;
-    rz /= rlen;
-  }
-  const dx = ry * fz - rz * fy;
-  const dy = rz * fx - rx * fz;
-  const dz = rx * fy - ry * fx;
+function oklabToRgb(lab) {
+  const l_ = lab.L + 0.3963377774 * lab.a + 0.2158037573 * lab.b;
+  const m_ = lab.L - 0.1055613458 * lab.a - 0.0638541728 * lab.b;
+  const s_ = lab.L - 0.0894841775 * lab.a - 1.291485548 * lab.b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
   return {
-    cx: cam.x,
-    cy: cam.y,
-    cz: cam.z,
-    rx,
-    ry,
-    rz,
-    dx,
-    dy,
-    dz,
-    fx,
-    fy,
-    fz,
-    focal: compH / 2 / Math.tan(clampFov(cam.fov) * DEG3 / 2),
-    halfW: compW / 2,
-    halfH: compH / 2
+    r: linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+    g: linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+    b: linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)
   };
 }
-function layerToWorld(t, px, py) {
-  let x = (px - t.pivotX) * t.scaleX;
-  let y = (py - t.pivotY) * t.scaleY;
-  let z = 0;
-  let c = Math.cos(t.rotationX);
-  let s = Math.sin(t.rotationX);
-  [y, z] = [y * c - z * s, y * s + z * c];
-  c = Math.cos(t.rotationY);
-  s = Math.sin(t.rotationY);
-  [x, z] = [x * c + z * s, -x * s + z * c];
-  c = Math.cos(t.rotationZ);
-  s = Math.sin(t.rotationZ);
-  [x, y] = [x * c - y * s, x * s + y * c];
-  return { x: x + t.x, y: y + t.y, z: z + t.z };
-}
-function projectPoint(b, p) {
-  const vx = p.x - b.cx;
-  const vy = p.y - b.cy;
-  const vz = p.z - b.cz;
-  const xc = vx * b.rx + vy * b.ry + vz * b.rz;
-  const yc = vx * b.dx + vy * b.dy + vz * b.dz;
-  const zc = vx * b.fx + vy * b.fy + vz * b.fz;
-  return { x: b.halfW + b.focal * xc / zc, y: b.halfH + b.focal * yc / zc, depth: zc };
+function oklabToOklch(lab) {
+  return { L: lab.L, C: Math.hypot(lab.a, lab.b), h: Math.atan2(lab.b, lab.a) };
 }
-function projectLayer(t, frame, b) {
-  const pts = [
-    [frame.x, frame.y],
-    [frame.x + frame.width, frame.y],
-    [frame.x + frame.width, frame.y + frame.height],
-    [frame.x, frame.y + frame.height]
-  ];
-  let visible = true;
-  const corners = [];
-  for (const [px, py] of pts) {
-    const p = projectPoint(b, layerToWorld(t, px, py));
-    if (!(p.depth > NEAR)) visible = false;
-    corners.push(p.x, p.y);
-  }
-  const origin = projectPoint(b, { x: t.x, y: t.y, z: t.z });
-  return { corners, depth: origin.depth, visible };
+function oklchToOklab(lch) {
+  return { L: lch.L, a: lch.C * Math.cos(lch.h), b: lch.C * Math.sin(lch.h) };
 }
-
-// src/space/focus.ts
-var DEFAULT_APERTURE = 30;
-var MIN_BLUR = 0.05;
-var MAX_BLUR = 32;
-var MANY_BLURRED = 20;
-function blurRadius(aperture, focal, depth, focusDepth) {
-  if (!(aperture > 0) || !(focal > 0) || !(depth > 0) || !(focusDepth > 0)) return 0;
-  const r = aperture * focal * Math.abs(1 / depth - 1 / focusDepth) / 2;
-  return Math.min(r, MAX_BLUR);
+function lerp(a, b, t) {
+  return a + (b - a) * t;
 }
-var SCOPE_NAMES = /* @__PURE__ */ new Set(["w", "h", "W", "H", "GW", "GH", "contain", "cover", "t", "d", "T"]);
-function looksLikeLayerName(s) {
-  return /^[A-Za-z_][\w-]*$/.test(s) && !SCOPE_NAMES.has(s);
+function clamp01(v) {
+  return v < 0 ? 0 : v > 1 ? 1 : v;
 }
-var isName = (v, known) => typeof v === "string" && (known.has(v) || looksLikeLayerName(v));
-function focusNames(props, known) {
-  const out = [];
-  const read2 = (bag) => {
-    const v = bag?.focus;
-    if (isName(v, known)) out.push(v);
-  };
-  read2(props.initial);
-  for (const kf of props.keyframes ?? []) for (const bag of [kf.set, kf.to, kf.from]) read2(bag);
-  return out;
+function shortestHueDelta(from, to) {
+  const TWO_PI = Math.PI * 2;
+  let d = (to - from) % TWO_PI;
+  if (d > Math.PI) d -= TWO_PI;
+  if (d < -Math.PI) d += TWO_PI;
+  return d;
 }
-function withFocusResolved(props, zOf, known = /* @__PURE__ */ new Set()) {
-  if (focusNames(props, known).length === 0) return props;
-  const fix = (bag) => {
-    const v = bag?.focus;
-    if (!bag || !isName(v, known)) return bag;
-    return { ...bag, focus: zOf(v) ?? 0 };
-  };
+
+// src/sequences/gradientAnim.ts
+var PATCH_KEYS = ["type", "angle", "center", "innerRadius", "radius", "stops"];
+function gradStateFrom(g) {
   return {
-    ...props,
-    initial: fix(props.initial),
-    keyframes: props.keyframes?.map((kf) => ({ ...kf, set: fix(kf.set), to: fix(kf.to), from: fix(kf.from) }))
+    type: g.type ?? "linear",
+    angle: g.angle ?? 90,
+    center: [...g.center ?? [0.5, 0.5]],
+    innerRadius: g.innerRadius ?? 0,
+    radius: g.radius ?? 0.5,
+    stops: (g.stops ?? []).map((s) => Array.isArray(s) ? { offset: s[0], color: cssColor(s[1]) } : { offset: s.offset, color: cssColor(s.color) })
   };
 }
-function layerInitialZ(spec, scope) {
-  const z = spec.initial?.z;
-  if (typeof z === "number") return z;
-  if (typeof z === "string") return evaluateExpr(z, scope);
-  return 0;
-}
-var movesZ = (spec) => (spec.keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((bag) => bag && "z" in bag));
-function focusProblems(camera, siblings) {
-  const out = [];
-  const said = /* @__PURE__ */ new Set();
-  const threeD = siblings.filter((s) => s.threeD && s.name).map((s) => s.name);
-  const known = new Set(siblings.map((s) => s.name).filter((n) => !!n));
-  for (const name of focusNames(camera, known)) {
-    if (said.has(name)) continue;
-    said.add(name);
-    const same = siblings.filter((s) => s.name === name);
-    const hit = same.find((s) => s.threeD) ?? same[0];
-    if (!hit) out.push({ kind: "missing", name, hint: suggestName(name, threeD) });
-    else if (!hit.threeD) out.push({ kind: "not-threeD", name });
-    else {
-      if (same.length > 1) out.push({ kind: "duplicate", name, count: same.length });
-      if (movesZ(hit)) out.push({ kind: "moving", name });
-    }
+function mergeGrad(base, patch) {
+  const out = { ...base, center: [...base.center], stops: base.stops.map((s) => ({ ...s })) };
+  if (patch === null || typeof patch !== "object" || Array.isArray(patch)) return out;
+  const p = patch;
+  if (typeof p.angle === "number") out.angle = p.angle;
+  if (Array.isArray(p.center)) out.center = [Number(p.center[0]), Number(p.center[1])];
+  if (typeof p.innerRadius === "number") out.innerRadius = p.innerRadius;
+  if (typeof p.radius === "number") out.radius = p.radius;
+  if (p.stops !== void 0) {
+    const next = gradStateFrom({ stops: p.stops }).stops;
+    if (next.length === base.stops.length) out.stops = next;
   }
   return out;
 }
-var CameraSequence = class extends Sequence {
-  /** True when `z` is never specified anywhere: z then follows `fov`. */
-  autoZ = true;
-  compH = 0;
-  warnedFov = false;
-  warnedLookAt = false;
-  warnedAperture = false;
-  /** True when the camera writes `focus` or `aperture` anywhere: depth of field is on. */
-  dof = false;
-  /** True when the camera writes any fog key anywhere: depth fog is on (nothing is made for a camera without fog). */
-  fog = false;
-  fogC = null;
-  zOfName = null;
-  layerNames = /* @__PURE__ */ new Set();
-  async build() {
-    const compW = this.parent?.width ?? this.root.width;
-    this.compH = this.parent?.height ?? this.root.height;
-    if (this.duration === void 0) {
-      this.duration = this.parent?.duration ?? this.root.duration;
-    }
-    const home = homeCamera(compW, this.compH);
-    const carrier = new Container();
-    carrier.x = home.x;
-    carrier.y = home.y;
-    carrier.z = home.z;
-    carrier.lookAtX = home.lookAtX;
-    carrier.lookAtY = home.lookAtY;
-    carrier.lookAtZ = home.lookAtZ;
-    carrier.fov = home.fov;
-    carrier.focus = 0;
-    carrier.aperture = DEFAULT_APERTURE;
-    carrier.offsetX = carrier.offsetY = carrier.offsetZ = 0;
-    carrier.lookOffsetX = carrier.lookOffsetY = carrier.lookOffsetZ = 0;
-    carrier.fogNear = home.z;
-    carrier.fogFar = home.z * 3;
-    carrier.fogColor = "#000000";
-    carrier.fogAmount = 1;
-    this.target = carrier;
-    const keys = collectPropKeys(this.spec);
-    this.autoZ = !keys.has("z");
-    this.dof = keys.has("focus") || keys.has("aperture");
-    this.fog = keys.has("fogNear") || keys.has("fogFar") || keys.has("fogColor") || keys.has("fogAmount");
-  }
-  /** The aperture to use now: off unless depth of field is on and the value is a number of 0 or more (said once if it is not). */
-  apertureNow(a) {
-    if (!this.dof) return 0;
-    if (!(a >= 0) && !this.warnedAperture) {
-      this.warnedAperture = true;
-      const who = this.spec.name ? ` "${this.spec.name}"` : "";
-      console.warn(`pixi-effects: camera${who}: aperture ${a} is not a number of 0 or more; depth of field is off (it is the lens diameter in px: 30 is the default, 0 turns it off)`);
+var objectHint = "a keyframe's fillGradient must be an object like { angle: 200, stops: [[0, '#f00'], [1, '#00f']] }";
+function validateGradientKeyframes(spec, who, warn = (m) => console.warn(m), kind = "shape") {
+  const said = /* @__PURE__ */ new Set();
+  const say = (m) => {
+    if (!said.has(m)) {
+      said.add(m);
+      warn(`pixi-effects: ${who}: ${m}`);
     }
-    return a > 0 ? a : 0;
-  }
-  /** Called by the composition once its children exist: how a layer name in `focus` becomes the z of that layer. */
-  resolveFocusNames(zOf, names = /* @__PURE__ */ new Set()) {
-    this.zOfName = zOf;
-    this.layerNames = names;
-  }
-  displayProps() {
-    const base = super.displayProps();
-    return this.zOfName ? withFocusResolved(base, this.zOfName, this.layerNames) : base;
+  };
+  const startSpec = spec.fillGradient ?? spec.initial?.fillGradient;
+  const start = startSpec && typeof startSpec === "object" && Array.isArray(startSpec.stops) ? gradStateFrom(startSpec) : null;
+  let animated = false;
+  if (kind === "text") {
+    const radial = (g) => !!g && typeof g === "object" && ["type", "center", "innerRadius", "radius"].some((k) => g[k] !== void 0 && !(k === "type" && g.type === "linear"));
+    const asked = radial(startSpec) || (spec.keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((b) => radial(b?.fillGradient)));
+    if (asked) say("a text gradient is linear: type, center, innerRadius and radius are ignored (only angle and stops apply); use a shape for a radial gradient");
   }
-  /** The camera's state at the current timeline position. */
-  state() {
-    const c = this.target;
-    if (!this.warnedFov && !(c.fov >= MIN_FOV && c.fov <= MAX_FOV)) {
-      this.warnedFov = true;
-      const who = this.spec.name ? ` "${this.spec.name}"` : "";
-      console.warn(`pixi-effects: camera${who}: fov ${c.fov} is outside [${MIN_FOV}, ${MAX_FOV}]; clamped`);
-    }
-    const fov = clampFov(c.fov);
-    const z = this.autoZ ? homeDistance(this.compH, fov) : c.z;
-    if (!this.warnedLookAt && c.lookAtX === c.x && c.lookAtY === c.y && c.lookAtZ === z) {
-      this.warnedLookAt = true;
-      const who = this.spec.name ? ` "${this.spec.name}"` : "";
-      console.warn(`pixi-effects: camera${who}: lookAt equals the camera position; looking along -z instead`);
-    }
-    return {
-      x: c.x + c.offsetX,
-      y: c.y + c.offsetY,
-      z: z + c.offsetZ,
-      lookAtX: c.lookAtX + c.lookOffsetX,
-      lookAtY: c.lookAtY + c.lookOffsetY,
-      lookAtZ: c.lookAtZ + c.lookOffsetZ,
-      fov,
-      focus: Number.isFinite(c.focus) ? c.focus : 0,
-      aperture: this.apertureNow(c.aperture)
-    };
-  }
-  /** The fog now (colour as 0..1 channels, distances, 0..1 amount), or null when the camera writes no fog key. */
-  fogState() {
-    if (!this.fog) return null;
-    const c = this.target;
-    const fc = this.fogC ??= new Color();
-    try {
-      fc.setValue(c.fogColor);
-    } catch {
-      fc.setValue(0);
+  for (const kf of spec.keyframes ?? []) {
+    for (const bag of [kf.set, kf.to, kf.from]) {
+      if (!bag) continue;
+      for (const [key, value] of Object.entries(bag)) {
+        if (key === "fillGradient") {
+          animated = true;
+          if (value === null || typeof value !== "object" || Array.isArray(value)) {
+            say(objectHint);
+            continue;
+          }
+          const p = value;
+          for (const k of Object.keys(p)) {
+            if (PATCH_KEYS.includes(k)) continue;
+            const guess = suggestName(k, PATCH_KEYS.filter((x) => x !== "type"));
+            say(`fillGradient.${k} is not a gradient property${guess ? ` \u2014 did you mean "${guess}"?` : ""} (valid: ${PATCH_KEYS.join(", ")}); it is ignored`);
+          }
+          if (p.type !== void 0 && start && p.type !== start.type) say("fillGradient.type cannot change over time (linear <-> radial); it is ignored");
+          if (p.stops !== void 0 && start) {
+            const n = Array.isArray(p.stops) ? p.stops.length : 0;
+            if (n !== start.stops.length) say(`a fillGradient keyframe must give the same number of stops as the gradient has (${start.stops.length}, got ${n}); the stops are left as they were`);
+          }
+        } else if (/^fillGradient\./i.test(key) || /^gradient/i.test(key)) {
+          const tail = key.replace(/^fillGradient\./i, "").replace(/^gradient/i, "");
+          const sub2 = tail ? tail[0].toLowerCase() + tail.slice(1) : "angle";
+          say(`"${key}" is not an animatable property: write fillGradient: { ${PATCH_KEYS.includes(sub2) ? sub2 : "angle"} } (the whole gradient is one object) in the keyframe's to / from / set`);
+        }
+      }
     }
-    const [r, g, b] = fc.toArray();
-    const amount = Number.isFinite(c.fogAmount) ? Math.min(1, Math.max(0, c.fogAmount)) : 1;
-    return { r, g, b, near: c.fogNear, far: c.fogFar, amount };
-  }
-  /** Lifespan on the global timeline (valid after bindTimeline). */
-  window() {
-    const start = this.absoluteStart ?? this.at;
-    return { start, end: start + (this.duration ?? 0) };
   }
-};
-
-// src/space/lighting.ts
-var LIGHT_KINDS = ["ambient", "point", "spot", "parallel"];
-var FALLOFFS = ["none", "smooth", "inverseSquare"];
-var LIGHT_PROPS = ["x", "y", "z", "lookAtX", "lookAtY", "lookAtZ", "intensity", "color", "coneAngle", "coneFeather", "radius", "falloffDistance", "shadowDarkness", "shadowDiffusion"];
-var MAX_LIGHTS = 8;
-var MAX_CASTERS = 4;
-var SHADOW_TAPS = 16;
-var FALLOFF_ID = { none: 0, smooth: 1, inverseSquare: 2 };
-var KIND_ID = { point: 1, spot: 2, parallel: 3 };
-function smoothstep(e0, e1, x) {
-  const t = Math.min(1, Math.max(0, (x - e0) / (e1 - e0)));
-  return t * t * (3 - 2 * t);
-}
-var DEG4 = Math.PI / 180;
-function norm(v) {
-  const l = Math.hypot(v.x, v.y, v.z) || 1;
-  return { x: v.x / l, y: v.y / l, z: v.z / l };
+  if (animated && !start) say("a keyframe animates fillGradient but the layer has none to start from: give it a fillGradient first (top level or in initial)");
 }
-var dot = (a, b) => a.x * b.x + a.y * b.y + a.z * b.z;
-var sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y, z: a.z - b.z });
-function coneCos(l) {
-  const half = Math.min(179, Math.max(0, l.coneAngle)) * DEG4 / 2;
-  const inner = half * (1 - Math.min(1, Math.max(0, l.coneFeather)));
-  const cosOuter = Math.cos(half);
-  const cosInner = Math.max(Math.cos(inner), cosOuter + 1e-4);
-  return { cosOuter, cosInner };
+function tweenGradient(timeline, holder, fromPatch, toPatch, duration, ease, at, colorSpace, onChange, loop = {}) {
+  timeline.tweenValue({
+    holder,
+    id: "grad",
+    get: () => holder.grad,
+    set: (g) => {
+      holder.grad = g;
+      onChange();
+    },
+    from: fromPatch !== void 0 ? (prev) => mergeGrad(prev, fromPatch) : void 0,
+    to: (start, prev) => toPatch !== void 0 ? mergeGrad(start, toPatch) : prev,
+    make: (a, b) => {
+      const colors = a.stops.map((s, i) => colorSpace === "rgb" ? interpolateColors(s.color, b.stops[i].color) : buildColorInterp(s.color, b.stops[i].color, colorSpace));
+      return (t) => {
+        const l = (x, y) => x + (y - x) * t;
+        return {
+          type: a.type,
+          angle: l(a.angle, b.angle),
+          center: [l(a.center[0], b.center[0]), l(a.center[1], b.center[1])],
+          innerRadius: l(a.innerRadius, b.innerRadius),
+          radius: l(a.radius, b.radius),
+          stops: a.stops.map((s, i) => ({ offset: l(s.offset, b.stops[i].offset), color: colors[i](t) }))
+        };
+      };
+    },
+    duration,
+    ease,
+    at,
+    repeat: loop.repeat,
+    yoyo: loop.yoyo,
+    repeatDelay: loop.repeatDelay
+  });
 }
-function packLights(lights) {
-  const pos = new Float32Array(4 * MAX_LIGHTS), dir = new Float32Array(4 * MAX_LIGHTS), col = new Float32Array(4 * MAX_LIGHTS), fall = new Float32Array(4 * MAX_LIGHTS), shadow = new Float32Array(4 * MAX_LIGHTS);
-  const ambient = [0, 0, 0];
-  let n = 0;
-  for (const l of lights) {
-    if (l.kind === "ambient") {
-      ambient[0] += l.r * l.intensity;
-      ambient[1] += l.g * l.intensity;
-      ambient[2] += l.b * l.intensity;
-      continue;
-    }
-    if (n >= MAX_LIGHTS) continue;
-    const d = norm({ x: l.lookAtX - l.x, y: l.lookAtY - l.y, z: l.lookAtZ - l.z });
-    const { cosOuter, cosInner } = coneCos(l);
-    pos.set([l.x, l.y, l.z, KIND_ID[l.kind]], 4 * n);
-    dir.set([d.x, d.y, d.z, cosOuter], 4 * n);
-    col.set([l.r * l.intensity, l.g * l.intensity, l.b * l.intensity, cosInner], 4 * n);
-    fall.set([FALLOFF_ID[l.falloff], l.radius, l.falloffDistance, l.castsShadows ? 1 : 0], 4 * n);
-    shadow.set([l.castsShadows ? l.shadowDarkness : 0, l.shadowDiffusion, 0, 0], 4 * n);
-    n++;
+var PAINT_SIZE = 512;
+var GradientPainter = class {
+  constructor(size = PAINT_SIZE) {
+    this.size = size;
+    this.canvas.width = size;
+    this.canvas.height = size;
+    this.tex = Texture.from(this.canvas);
+    globalThis.__gradientPainters = (globalThis.__gradientPainters ?? 0) + 1;
   }
-  return { count: n, ambient, pos, dir, col, fall, shadow };
-}
-function shadeReference(p, n, cam, lights) {
-  let N = norm(n);
-  if (dot(N, sub(cam, p)) < 0) N = { x: -N.x, y: -N.y, z: -N.z };
-  const out = [0, 0, 0];
-  for (const l of lights) {
-    if (l.kind === "ambient") {
-      out[0] += l.r * l.intensity;
-      out[1] += l.g * l.intensity;
-      out[2] += l.b * l.intensity;
-      continue;
-    }
-    const dirLA = norm({ x: l.lookAtX - l.x, y: l.lookAtY - l.y, z: l.lookAtZ - l.z });
-    let L;
-    let dist = 0;
-    if (l.kind === "parallel") L = { x: -dirLA.x, y: -dirLA.y, z: -dirLA.z };
-    else {
-      const d = sub({ x: l.x, y: l.y, z: l.z }, p);
-      dist = Math.hypot(d.x, d.y, d.z);
-      L = { x: d.x / dist, y: d.y / dist, z: d.z / dist };
+  size;
+  canvas = document.createElement("canvas");
+  tex;
+  /** Paint `g` and return what `Graphics.fill(...)` takes. */
+  paint(g) {
+    const ctx = this.canvas.getContext("2d"), s = this.size;
+    if (!ctx) return new FillGradient(gradientOptions({ angle: g.angle, stops: g.stops.map((x) => [x.offset, x.color]) }));
+    ctx.clearRect(0, 0, s, s);
+    if (g.type === "radial") {
+      paintRadial(ctx, s, { stops: g.stops.map((x) => [x.offset, x.color]), center: g.center, innerRadius: g.innerRadius, radius: g.radius });
+    } else {
+      const a = g.angle * Math.PI / 180, dx = Math.cos(a), dy = Math.sin(a);
+      const h = (Math.abs(dx) + Math.abs(dy)) / 2;
+      const grad = ctx.createLinearGradient((0.5 - dx * h) * s, (0.5 - dy * h) * s, (0.5 + dx * h) * s, (0.5 + dy * h) * s);
+      for (const st of g.stops) grad.addColorStop(Math.min(1, Math.max(0, st.offset)), st.color);
+      ctx.fillStyle = grad;
+      ctx.fillRect(0, 0, s, s);
     }
-    const ndl = Math.max(0, dot(N, L));
-    let att = 1;
-    if (l.kind !== "parallel") {
-      if (l.falloff === "smooth") att = 1 - smoothstep(l.radius, l.radius + Math.max(l.falloffDistance, 1e-3), dist);
-      else if (l.falloff === "inverseSquare") att = Math.min(1, l.radius * l.radius / Math.max(dist * dist, 1e-6));
+    this.tex.source.update();
+    return { texture: this.tex, textureSpace: "local" };
+  }
+  /** Give the texture and the canvas back (a layer that is destroyed must not leave them). */
+  destroy() {
+    this.tex.destroy(true);
+    this.canvas.width = this.canvas.height = 0;
+    globalThis.__gradientPainters = Math.max(0, (globalThis.__gradientPainters ?? 1) - 1);
+  }
+};
+function bindGradientKeyframes(timeline, holder, keyframes, duration, offset, colorSpace, onChange) {
+  const bag = (b) => b?.fillGradient;
+  for (const kf of keyframes) {
+    const at = offset + resolveAt(kf.at, duration);
+    const setV = bag(kf.set), fromV = bag(kf.from), toV = bag(kf.to);
+    if (setV !== void 0) {
+      timeline.tweenValue({
+        holder,
+        id: "grad",
+        get: () => holder.grad,
+        set: (g) => {
+          holder.grad = g;
+          onChange();
+        },
+        to: (start) => mergeGrad(start, setV),
+        make: (_a, b) => () => b,
+        duration: 0,
+        ease: "none",
+        at
+      });
     }
-    let cone = 1;
-    if (l.kind === "spot") {
-      const { cosOuter, cosInner } = coneCos(l);
-      cone = smoothstep(cosOuter, cosInner, -dot(L, dirLA));
+    if (fromV !== void 0 || toV !== void 0) {
+      tweenGradient(timeline, holder, fromV, toV, kfDuration(kf), kf.ease ?? "none", at, colorSpace, onChange, loopVars(kf));
     }
-    const k = l.intensity * ndl * att * cone;
-    out[0] += l.r * k;
-    out[1] += l.g * k;
-    out[2] += l.b * k;
   }
-  return out;
 }
-function lightLevel(frame, cam, lights) {
-  const mid = { x: frame.o.x + 0.5 * frame.u.x + 0.5 * frame.v.x, y: frame.o.y + 0.5 * frame.u.y + 0.5 * frame.v.y, z: frame.o.z + 0.5 * frame.u.z + 0.5 * frame.v.z };
-  const n = { x: frame.u.y * frame.v.z - frame.u.z * frame.v.y, y: frame.u.z * frame.v.x - frame.u.x * frame.v.z, z: frame.u.x * frame.v.y - frame.u.y * frame.v.x };
-  const m = shadeReference(mid, n, cam, lights);
-  return 0.2126 * m[0] + 0.7152 * m[1] + 0.0722 * m[2];
-}
-var LightSequence = class extends Sequence {
-  color = new Color();
-  async build() {
-    const w = this.parent?.width ?? this.root.width;
-    const h = this.parent?.height ?? this.root.height;
-    if (this.duration === void 0) this.duration = this.parent?.duration ?? this.root.duration;
-    const c = new Container();
-    c.x = w * 0.3;
-    c.y = h * 0.2;
-    c.z = homeDistance(h, 40) * 0.6;
-    c.lookAtX = w / 2;
-    c.lookAtY = h / 2;
-    c.lookAtZ = 0;
-    c.intensity = 1;
-    c.color = "#ffffff";
-    c.coneAngle = 90;
-    c.coneFeather = 0.5;
-    c.radius = 500;
-    c.falloffDistance = 500;
-    c.shadowDarkness = 1;
-    c.shadowDiffusion = 0;
-    this.target = c;
-  }
-  state() {
-    const c = this.target;
-    try {
-      this.color.setValue(c.color);
-    } catch {
-      this.color.setValue(16777215);
-    }
-    const [r, g, b] = this.color.toArray();
-    return {
-      // a kind or falloff nobody knows is the default the warning promises (the shader must never see an unknown id)
-      kind: LIGHT_KINDS.includes(this.spec.kind) ? this.spec.kind : "point",
-      x: c.x,
-      y: c.y,
-      z: c.z,
-      lookAtX: c.lookAtX,
-      lookAtY: c.lookAtY,
-      lookAtZ: c.lookAtZ,
-      r,
-      g,
-      b,
-      intensity: Number.isFinite(c.intensity) ? Math.max(0, c.intensity) : 1,
-      coneAngle: c.coneAngle,
-      coneFeather: c.coneFeather,
-      falloff: FALLOFFS.includes(this.spec.falloff) ? this.spec.falloff : "none",
-      radius: c.radius,
-      falloffDistance: c.falloffDistance,
-      castsShadows: !!this.spec.castsShadows,
-      shadowDarkness: Math.min(1, Math.max(0, c.shadowDarkness)),
-      shadowDiffusion: Math.max(0, c.shadowDiffusion)
-    };
-  }
-  window() {
-    const start = this.absoluteStart ?? this.at;
-    return { start, end: start + (this.duration ?? 0) };
-  }
-};
-
-// src/core/revertibleSet.ts
-function revertibleSet(timeline, at, read2, write2, value, property) {
-  timeline.setValue(property?.[0] ?? read2, property?.[1] ?? "set", at, read2, write2, value);
-}
-
-// src/expr/colorInterp.ts
-var CHROMA_FLOOR = 0.03;
-var CHROMA_FULL = 0.08;
-function buildColorInterp(from, to, space) {
-  const fromRGBA = parseToRGBA(from);
-  const toRGBA = parseToRGBA(to);
-  const fromOk = rgbToOklab(fromRGBA);
-  const toOk = rgbToOklab(toRGBA);
-  if (space === "oklab") {
-    return (t) => {
-      const L = lerp(fromOk.L, toOk.L, t);
-      const a = lerp(fromOk.a, toOk.a, t);
-      const b = lerp(fromOk.b, toOk.b, t);
-      const alpha = lerp(fromRGBA.a, toRGBA.a, t);
-      return rgbaString(oklabToRgb({ L, a, b }), alpha);
-    };
-  }
-  const fromLCH = oklabToOklch(fromOk);
-  const toLCH = oklabToOklch(toOk);
-  const fromHue = fromLCH.h, toHue = toLCH.h;
-  fromLCH.h = borrowHue(fromHue, fromLCH.C, toHue);
-  toLCH.h = borrowHue(toHue, toLCH.C, fromHue);
-  const hueDelta = shortestHueDelta(fromLCH.h, toLCH.h);
-  return (t) => {
-    const L = lerp(fromLCH.L, toLCH.L, t);
-    const C = lerp(fromLCH.C, toLCH.C, t);
-    const h = fromLCH.h + hueDelta * t;
-    const alpha = lerp(fromRGBA.a, toRGBA.a, t);
-    const ab = oklchToOklab({ L, C, h });
-    return rgbaString(oklabToRgb(ab), alpha);
-  };
-}
-function borrowHue(own, chroma, other) {
-  const u = Math.min(1, Math.max(0, (chroma - CHROMA_FLOOR) / (CHROMA_FULL - CHROMA_FLOOR)));
-  const keep = u * u * (3 - 2 * u);
-  return own + shortestHueDelta(own, other) * (1 - keep);
-}
-function parseToRGBA(input) {
-  if (typeof input === "number") {
-    return { r: (input >> 16 & 255) / 255, g: (input >> 8 & 255) / 255, b: (input & 255) / 255, a: 1 };
-  }
-  const s = input.trim();
-  if (s.startsWith("#")) return parseHex(s);
-  if (s.startsWith("rgb")) return parseRgbFunc(s);
-  return { r: 0, g: 0, b: 0, a: 1 };
-}
-function parseHex(s) {
-  const hex = s.slice(1);
-  let r = 0, g = 0, b = 0, a = 1;
-  if (hex.length === 3 || hex.length === 4) {
-    r = parseInt(hex[0] + hex[0], 16) / 255;
-    g = parseInt(hex[1] + hex[1], 16) / 255;
-    b = parseInt(hex[2] + hex[2], 16) / 255;
-    if (hex.length === 4) a = parseInt(hex[3] + hex[3], 16) / 255;
-  } else if (hex.length === 6 || hex.length === 8) {
-    r = parseInt(hex.slice(0, 2), 16) / 255;
-    g = parseInt(hex.slice(2, 4), 16) / 255;
-    b = parseInt(hex.slice(4, 6), 16) / 255;
-    if (hex.length === 8) a = parseInt(hex.slice(6, 8), 16) / 255;
-  }
-  return { r, g, b, a };
-}
-function parseRgbFunc(s) {
-  const inner = s.replace(/^rgba?\(/, "").replace(/\)$/, "");
-  const parts = inner.split(/[,\s/]+/).filter(Boolean).map(parseFloat);
-  return {
-    r: (parts[0] ?? 0) / 255,
-    g: (parts[1] ?? 0) / 255,
-    b: (parts[2] ?? 0) / 255,
-    a: parts.length > 3 ? parts[3] ?? 1 : 1
-  };
-}
-function rgbaString(rgb, alpha) {
-  const r = Math.round(clamp01(rgb.r) * 255);
-  const g = Math.round(clamp01(rgb.g) * 255);
-  const b = Math.round(clamp01(rgb.b) * 255);
-  return `rgba(${r},${g},${b},${alpha})`;
-}
-function srgbToLinear(c) {
-  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-}
-function linearToSrgb(c) {
-  return c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
-}
-function rgbToOklab(rgba) {
-  const r = srgbToLinear(rgba.r);
-  const g = srgbToLinear(rgba.g);
-  const b = srgbToLinear(rgba.b);
-  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
-  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
-  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
-  const l_ = Math.cbrt(l);
-  const m_ = Math.cbrt(m);
-  const s_ = Math.cbrt(s);
-  return {
-    L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
-    a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
-    b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_
-  };
-}
-function oklabToRgb(lab) {
-  const l_ = lab.L + 0.3963377774 * lab.a + 0.2158037573 * lab.b;
-  const m_ = lab.L - 0.1055613458 * lab.a - 0.0638541728 * lab.b;
-  const s_ = lab.L - 0.0894841775 * lab.a - 1.291485548 * lab.b;
-  const l = l_ * l_ * l_;
-  const m = m_ * m_ * m_;
-  const s = s_ * s_ * s_;
-  return {
-    r: linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
-    g: linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
-    b: linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)
-  };
-}
-function oklabToOklch(lab) {
-  return { L: lab.L, C: Math.hypot(lab.a, lab.b), h: Math.atan2(lab.b, lab.a) };
-}
-function oklchToOklab(lch) {
-  return { L: lch.L, a: lch.C * Math.cos(lch.h), b: lch.C * Math.sin(lch.h) };
-}
-function lerp(a, b, t) {
-  return a + (b - a) * t;
-}
-function clamp01(v) {
-  return v < 0 ? 0 : v > 1 ? 1 : v;
-}
-function shortestHueDelta(from, to) {
-  const TWO_PI = Math.PI * 2;
-  let d = (to - from) % TWO_PI;
-  if (d > Math.PI) d -= TWO_PI;
-  if (d < -Math.PI) d += TWO_PI;
-  return d;
+var hasGradientKeys = (keyframes) => (keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((b) => b && b.fillGradient !== void 0));
+
+// src/core/revertibleSet.ts
+function revertibleSet(timeline, at, read2, write2, value, property) {
+  timeline.setValue(property?.[0] ?? read2, property?.[1] ?? "set", at, read2, write2, value);
 }
 
 // src/expr/colorTween.ts
@@ -3095,555 +2800,1058 @@ function tweenColor(timeline, target, key, fromValue, toValue, duration, ease, a
   });
 }
 
-// src/sequences/Image.ts
-var ImageSequence = class extends Sequence {
-  async build() {
-    const texture = await Assets.get(this.spec.asset);
-    const sprite = new Sprite({ texture, label: this.spec.name });
-    sprite.cullable = true;
-    this.target = sprite;
-    this.intrinsicWidth = texture.width;
-    this.intrinsicHeight = texture.height;
-    if (this.duration === void 0) {
-      this.duration = this.parent?.duration ?? this.root.duration;
-    }
-    this.buildFilters();
+// src/text/styleKeys.ts
+var STYLE_OPAQUE_KEYS = [
+  "fontFamily",
+  "fill",
+  "align",
+  "fontStyle",
+  "fontWeight",
+  "fontVariant",
+  "textBaseline",
+  "whiteSpace",
+  "lineJoin",
+  "join",
+  "cap",
+  "color",
+  "stroke"
+];
+var TEXT_STYLE_DEFAULTS = {
+  fontFamily: "Arial",
+  fontSize: 36,
+  fill: "#ffffff",
+  align: "center"
+};
+
+// src/sequences/Text.ts
+function formatValue(v, f) {
+  const fixed = v.toFixed(Math.max(0, Math.floor(f?.decimals ?? 0)));
+  const pad = Math.max(0, Math.floor(f?.pad ?? 0));
+  if (!f?.grouping && !pad) return fixed;
+  const [signed, frac] = fixed.split(".");
+  const sign = signed.startsWith("-") ? "-" : "";
+  let int = sign ? signed.slice(1) : signed;
+  if (pad) int = int.padStart(pad, "0");
+  if (f?.grouping) int = int.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return sign + int + (frac !== void 0 ? "." + frac : "");
+}
+var TextSequence = class extends Sequence {
+  /** `value`: the number for the `{value}` placeholder; `visibleChars`: how many characters show (typewriter). Both tweened by keyframes. */
+  _counters = { value: 0, visibleChars: 0 };
+  /** The string now on the layer (before `{value}` / `visibleChars`): `text`, or the last `set: { text }`. */
+  _template = "";
+  /** `visibleChars` is in play (initial or animated): otherwise the whole text shows. */
+  _typed = false;
+  _lastText = "";
+  /** A gradient fill for the text (`fillGradient`, static or animated): rebuilt as a FillGradient on each change (the text is re-rasterised). */
+  _grad = null;
+  _fillGradient = null;
+  _applyGradient() {
+    const g = this._grad.grad;
+    const next = new FillGradient(gradientOptions({ angle: g.angle, stops: g.stops.map((s) => [s.offset, s.color]) }));
+    this.target.style.fill = next;
+    this._fillGradient?.destroy();
+    this._fillGradient = next;
   }
-  bindTimeline(timeline, offset = 0) {
-    if (!this.target) return;
-    const colorSpace = this.spec.colorSpace;
-    if (!colorSpace || colorSpace === "rgb") {
-      super.bindTimeline(timeline, offset);
-      return;
-    }
-    const scope = this.scope();
-    const startTime = offset + this.at;
-    const initial = stripKeys(this.spec.initial, ["tint"]);
-    const keyframes = this.spec.keyframes ? this.spec.keyframes.map((kf) => stripKeysInKeyframe(kf, ["tint"])) : void 0;
-    applyInitial(this.target, initial, scope);
-    applyKeyframes(timeline, this.target, keyframes, this.duration, scope, [], startTime);
-    const initTint = this.spec.initial?.tint;
-    if (initTint !== void 0) this.target.tint = initTint;
-    for (const kf of this.spec.keyframes ?? []) {
-      const at = startTime + resolveAt(kf.at, this.duration);
-      const duration = kfDuration(kf);
-      const ease = kf.ease ?? "none";
-      const fromTint = kf.from?.tint;
-      const toTint = kf.to?.tint;
-      const setTint = kf.set?.tint;
-      if (setTint !== void 0) {
-        const sprite = this.target;
-        revertibleSet(timeline, at, () => sprite.tint, (c) => {
-          sprite.tint = c;
-        }, setTint, [sprite, "tint"]);
-      }
-      if (toTint !== void 0) {
-        tweenColor(
-          timeline,
-          this.target,
-          "tint",
-          fromTint,
-          toTint,
-          duration,
-          ease,
-          at,
-          colorSpace,
-          void 0,
-          loopVars(kf)
-        );
+  destroy() {
+    super.destroy();
+    this._fillGradient?.destroy();
+    this._fillGradient = null;
+  }
+  /** @internal A `spans` group that types over several pieces: this piece shows its first `n` characters (the piece was built typed). */
+  setVisibleChars(n) {
+    this._counters.visibleChars = n;
+    this._refreshText();
+  }
+  /** A typewriter that has typed nothing yet: the layer is empty on purpose (inspect must not call that "no size"). */
+  get showsNothingYet() {
+    return this._typed && this._lastText === "" && this._template !== "";
+  }
+  /** Rewrite the displayed string from the template, the current `value` and `visibleChars`. */
+  _refreshText() {
+    let next = this._template.includes("{value}") ? this._template.split("{value}").join(formatValue(this._counters.value, this.spec.format)) : this._template;
+    if (this._typed) next = Array.from(next).slice(0, Math.max(0, Math.floor(this._counters.visibleChars))).join("");
+    if (next === this._lastText) return;
+    this._lastText = next;
+    this.target.text = next;
+  }
+  async build() {
+    const baseStyle = { ...TEXT_STYLE_DEFAULTS };
+    const initialProps = this.spec.initial ?? {};
+    this._template = String(initialProps.text ?? this.spec.text ?? "");
+    const text = new Text({
+      text: this._template,
+      style: baseStyle,
+      label: this.spec.name
+    });
+    text.cullable = true;
+    this.target = text;
+    this.intrinsicWidth = text.width;
+    this.intrinsicHeight = text.height;
+    if (this.duration === void 0) {
+      this.duration = this.parent?.duration ?? this.root.duration;
+    }
+    if (this.spec.style) {
+      const scope2 = this.scope();
+      const resolved = normalizeProps(
+        this.spec.style,
+        scope2,
+        { skipKeys: STYLE_OPAQUE_KEYS }
+      );
+      const unset = Object.keys(resolved).filter((k) => resolved[k] === void 0);
+      if (unset.length) console.warn(`pixi-effects: ${describeLayer(this.spec)}: ${unset.map((k) => `style.${k}`).join(", ")} ${unset.length > 1 ? "are" : "is"} undefined (a variable that was never set?), so ${unset.length > 1 ? "they are" : "it is"} ignored and the default is used: omit the key instead`);
+      const outline = resolved.stroke;
+      if (outline && typeof outline === "object" && !("join" in outline) && !("lineJoin" in outline)) resolved.stroke = { ...outline, join: "round" };
+      for (const k of Object.keys(resolved)) {
+        if (unset.includes(k)) continue;
+        text.style[k] = resolved[k];
       }
+      this.intrinsicWidth = text.width;
+      this.intrinsicHeight = text.height;
     }
-    this.absoluteStart = startTime;
-    const endTime = startTime + this.duration;
-    if (this.keepHidden) return;
-    this.target.renderable = startTime <= 0;
-    timeline.set(this.target, { renderable: true }, startTime);
-    timeline.set(this.target, { renderable: false }, endTime);
+    validateGradientKeyframes(this.spec, describeLayer(this.spec), void 0, "text");
+    const gradientSpec = this.spec.fillGradient ?? initialProps.fillGradient;
+    if (gradientSpec) {
+      this._grad = { grad: gradStateFrom(gradientSpec) };
+      this._applyGradient();
+    }
+    const scope = this.scope();
+    if (initialProps.value !== void 0) this._counters.value = resolveNumber(initialProps.value, scope);
+    this._typed = initialProps.visibleChars !== void 0 || animates(this.spec.keyframes, "visibleChars");
+    if (initialProps.visibleChars !== void 0) this._counters.visibleChars = resolveNumber(initialProps.visibleChars, scope);
+    const typed = this._typed;
+    this._typed = false;
+    this._refreshText();
+    if (this._lastText !== "") {
+      this.intrinsicWidth = text.width;
+      this.intrinsicHeight = text.height;
+    }
+    this._typed = typed;
+    this._refreshText();
+    this.buildFilters();
+  }
+  bindTimeline(timeline, offset = 0) {
+    if (!this.target) return;
+    const colorSpace = this.spec.colorSpace ?? "rgb";
+    const stripped = stripKeys(this.spec, ["fill", "value", "text", "visibleChars", "fillGradient"]);
+    runSuperWithStrippedSpec(this, stripped, timeline, offset);
+    const keyframes = this.spec.keyframes ?? [];
+    const origin = offset + this.at;
+    bindFillKeyframes(timeline, this.target, keyframes, this.duration, origin, colorSpace);
+    if (this._grad) bindGradientKeyframes(timeline, this._grad, keyframes, this.duration, origin, colorSpace, () => this._applyGradient());
+    const refresh = () => this._refreshText();
+    bindCounterKeyframes(timeline, this._counters, "value", refresh, keyframes, this.duration, origin, this.scope());
+    bindCounterKeyframes(timeline, this._counters, "visibleChars", refresh, keyframes, this.duration, origin, this.scope());
+    bindTextKeyframes(timeline, keyframes, this.duration, origin, () => this._template, (t) => {
+      this._template = t;
+      refresh();
+    }, describeLayer(this.spec));
   }
 };
-function stripKeys(props, keys) {
-  if (!props) return props;
-  const drop = new Set(keys);
-  const out = {};
-  let changed = false;
-  for (const k of Object.keys(props)) {
-    if (drop.has(k)) {
-      changed = true;
-      continue;
-    }
-    out[k] = props[k];
+function runSuperWithStrippedSpec(inst, strippedSpec, timeline, offset) {
+  const originalSpec = inst.spec;
+  inst.spec = strippedSpec;
+  try {
+    Sequence.prototype.bindTimeline.call(inst, timeline, offset);
+  } finally {
+    inst.spec = originalSpec;
   }
-  return changed ? out : props;
-}
-function stripKeysInKeyframe(kf, keys) {
-  return {
-    ...kf,
-    set: stripKeys(kf.set, keys),
-    to: stripKeys(kf.to, keys),
-    from: stripKeys(kf.from, keys)
-  };
 }
-
-// src/sequences/gradient.ts
-function cssColor(c) {
-  return typeof c === "number" ? "#" + c.toString(16).padStart(6, "0") : c;
-}
-function normalizedStops(g) {
-  const stops = g.stops ?? [];
-  if (stops.length < 2) throw new Error('pixi-effects: fillGradient needs at least two colour stops, e.g. stops: [[0, "#000"], [1, "#fff"]]');
-  return stops.map((s) => Array.isArray(s) ? { offset: s[0], color: s[1] } : { offset: s.offset, color: s.color });
-}
-function gradientOptions(g) {
-  const colorStops = normalizedStops(g);
-  const a = (g.angle ?? 90) * Math.PI / 180;
-  const dx = Math.cos(a), dy = Math.sin(a);
-  const h = (Math.abs(dx) + Math.abs(dy)) / 2;
+function stripKeys(spec, keys) {
   return {
-    type: "linear",
-    start: { x: 0.5 - dx * h, y: 0.5 - dy * h },
-    end: { x: 0.5 + dx * h, y: 0.5 + dy * h },
-    colorStops,
-    textureSpace: "local"
+    ...spec,
+    initial: stripProps(spec.initial, keys),
+    keyframes: spec.keyframes ? spec.keyframes.map((kf) => ({
+      ...kf,
+      set: stripProps(kf.set, keys),
+      to: stripProps(kf.to, keys),
+      from: stripProps(kf.from, keys)
+    })) : void 0
   };
 }
-function paintRadial(ctx, size, g) {
-  const stops = normalizedStops(g);
-  const [cx, cy] = g.center ?? [0.5, 0.5];
-  const grad = ctx.createRadialGradient(cx * size, cy * size, (g.innerRadius ?? 0) * size, cx * size, cy * size, (g.radius ?? 0.5) * size);
-  for (const s of stops) grad.addColorStop(s.offset, cssColor(s.color));
-  ctx.fillStyle = grad;
-  ctx.fillRect(0, 0, size, size);
+function stripProps(props, keys) {
+  if (!props) return props;
+  if (!keys.some((k) => k in props)) return props;
+  const out = {};
+  for (const k of Object.keys(props)) if (!keys.includes(k)) out[k] = props[k];
+  return out;
 }
-
-// src/sequences/gradientAnim.ts
-var PATCH_KEYS = ["type", "angle", "center", "innerRadius", "radius", "stops"];
-function gradStateFrom(g) {
-  return {
-    type: g.type ?? "linear",
-    angle: g.angle ?? 90,
-    center: [...g.center ?? [0.5, 0.5]],
-    innerRadius: g.innerRadius ?? 0,
-    radius: g.radius ?? 0.5,
-    stops: (g.stops ?? []).map((s) => Array.isArray(s) ? { offset: s[0], color: cssColor(s[1]) } : { offset: s.offset, color: cssColor(s.color) })
-  };
+function resolveNumber(v, scope) {
+  if (typeof v === "number") return v;
+  const out = normalizeProps({ v }, scope).v;
+  return typeof out === "number" ? out : Number(out) || 0;
 }
-function mergeGrad(base, patch) {
-  const out = { ...base, center: [...base.center], stops: base.stops.map((s) => ({ ...s })) };
-  if (patch === null || typeof patch !== "object" || Array.isArray(patch)) return out;
-  const p = patch;
-  if (typeof p.angle === "number") out.angle = p.angle;
-  if (Array.isArray(p.center)) out.center = [Number(p.center[0]), Number(p.center[1])];
-  if (typeof p.innerRadius === "number") out.innerRadius = p.innerRadius;
-  if (typeof p.radius === "number") out.radius = p.radius;
-  if (p.stops !== void 0) {
-    const next = gradStateFrom({ stops: p.stops }).stops;
-    if (next.length === base.stops.length) out.stops = next;
+function bindCounterKeyframes(timeline, state, key, refresh, keyframes, parentDuration, origin, scope) {
+  for (const kf of keyframes) {
+    const setV = kf.set?.[key];
+    const fromV = kf.from?.[key];
+    const toV = kf.to?.[key];
+    if (setV === void 0 && fromV === void 0 && toV === void 0) continue;
+    const at = origin + resolveAt(kf.at, parentDuration);
+    const duration = kfDuration(kf);
+    const ease = kf.ease ?? "none";
+    const loop = loopVars(kf);
+    if (setV !== void 0) {
+      const v = resolveNumber(setV, scope);
+      revertibleSet(timeline, at, () => state[key], (n) => {
+        state[key] = n;
+        refresh();
+      }, v, [state, key]);
+    }
+    if (toV !== void 0 && fromV !== void 0) {
+      timeline.fromTo(
+        state,
+        { [key]: resolveNumber(fromV, scope) },
+        { [key]: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh },
+        at
+      );
+    } else if (toV !== void 0) {
+      timeline.to(state, { [key]: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
+    } else if (fromV !== void 0) {
+      timeline.from(state, { [key]: resolveNumber(fromV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
+    }
   }
-  return out;
 }
-var objectHint = "a keyframe's fillGradient must be an object like { angle: 200, stops: [[0, '#f00'], [1, '#00f']] }";
-function validateGradientKeyframes(spec, who, warn = (m) => console.warn(m), kind = "shape") {
-  const said = /* @__PURE__ */ new Set();
-  const say = (m) => {
-    if (!said.has(m)) {
-      said.add(m);
-      warn(`pixi-effects: ${who}: ${m}`);
+function bindTextKeyframes(timeline, keyframes, parentDuration, origin, read2, write2, who) {
+  for (const kf of keyframes) {
+    for (const [what, props] of [["to", kf.to], ["from", kf.from]]) {
+      if (props && props.text !== void 0) {
+        console.warn(`pixi-effects: ${who}: a keyframe's ${what}: { text } cannot tween a string: use set: { text: '\u2026' } at the time it should change`);
+      }
     }
-  };
-  const startSpec = spec.fillGradient ?? spec.initial?.fillGradient;
-  const start = startSpec && typeof startSpec === "object" && Array.isArray(startSpec.stops) ? gradStateFrom(startSpec) : null;
-  let animated = false;
-  if (kind === "text") {
-    const radial = (g) => !!g && typeof g === "object" && ["type", "center", "innerRadius", "radius"].some((k) => g[k] !== void 0 && !(k === "type" && g.type === "linear"));
-    const asked = radial(startSpec) || (spec.keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((b) => radial(b?.fillGradient)));
-    if (asked) say("a text gradient is linear: type, center, innerRadius and radius are ignored (only angle and stops apply); use a shape for a radial gradient");
+    const t = kf.set?.text;
+    if (t === void 0) continue;
+    revertibleSet(timeline, origin + resolveAt(kf.at, parentDuration), read2, write2, String(t));
   }
-  for (const kf of spec.keyframes ?? []) {
-    for (const bag of [kf.set, kf.to, kf.from]) {
-      if (!bag) continue;
-      for (const [key, value] of Object.entries(bag)) {
-        if (key === "fillGradient") {
-          animated = true;
-          if (value === null || typeof value !== "object" || Array.isArray(value)) {
-            say(objectHint);
-            continue;
-          }
-          const p = value;
-          for (const k of Object.keys(p)) {
-            if (PATCH_KEYS.includes(k)) continue;
-            const guess = suggestName(k, PATCH_KEYS.filter((x) => x !== "type"));
-            say(`fillGradient.${k} is not a gradient property${guess ? ` \u2014 did you mean "${guess}"?` : ""} (valid: ${PATCH_KEYS.join(", ")}); it is ignored`);
-          }
-          if (p.type !== void 0 && start && p.type !== start.type) say("fillGradient.type cannot change over time (linear <-> radial); it is ignored");
-          if (p.stops !== void 0 && start) {
-            const n = Array.isArray(p.stops) ? p.stops.length : 0;
-            if (n !== start.stops.length) say(`a fillGradient keyframe must give the same number of stops as the gradient has (${start.stops.length}, got ${n}); the stops are left as they were`);
-          }
-        } else if (/^fillGradient\./i.test(key) || /^gradient/i.test(key)) {
-          const tail = key.replace(/^fillGradient\./i, "").replace(/^gradient/i, "");
-          const sub2 = tail ? tail[0].toLowerCase() + tail.slice(1) : "angle";
-          say(`"${key}" is not an animatable property: write fillGradient: { ${PATCH_KEYS.includes(sub2) ? sub2 : "angle"} } (the whole gradient is one object) in the keyframe's to / from / set`);
-        }
-      }
+}
+function animates(keyframes, key) {
+  return (keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((p) => p && p[key] !== void 0));
+}
+function bindFillKeyframes(timeline, text, keyframes, parentDuration, offset, colorSpace) {
+  const state = { fill: text.style.fill };
+  const writeFill = () => {
+    text.style.fill = state.fill;
+  };
+  for (const kf of keyframes) {
+    const at = offset + resolveAt(kf.at, parentDuration);
+    const duration = kfDuration(kf);
+    const ease = kf.ease ?? "none";
+    const setFill = pickFill(kf.set);
+    const fromFill = pickFill(kf.from);
+    const toFill = pickFill(kf.to);
+    if (setFill !== void 0) {
+      revertibleSet(timeline, at, () => state.fill, (c) => {
+        state.fill = c;
+        writeFill();
+      }, setFill, [state, "fill"]);
+    }
+    if (toFill !== void 0) {
+      tweenColor(
+        timeline,
+        state,
+        "fill",
+        fromFill,
+        toFill,
+        duration,
+        ease,
+        at,
+        colorSpace,
+        writeFill,
+        loopVars(kf)
+      );
     }
   }
-  if (animated && !start) say("a keyframe animates fillGradient but the layer has none to start from: give it a fillGradient first (top level or in initial)");
 }
-function tweenGradient(timeline, holder, fromPatch, toPatch, duration, ease, at, colorSpace, onChange, loop = {}) {
-  timeline.tweenValue({
-    holder,
-    id: "grad",
-    get: () => holder.grad,
-    set: (g) => {
-      holder.grad = g;
-      onChange();
-    },
-    from: fromPatch !== void 0 ? (prev) => mergeGrad(prev, fromPatch) : void 0,
-    to: (start, prev) => toPatch !== void 0 ? mergeGrad(start, toPatch) : prev,
-    make: (a, b) => {
-      const colors = a.stops.map((s, i) => colorSpace === "rgb" ? interpolateColors(s.color, b.stops[i].color) : buildColorInterp(s.color, b.stops[i].color, colorSpace));
-      return (t) => {
-        const l = (x, y) => x + (y - x) * t;
-        return {
-          type: a.type,
-          angle: l(a.angle, b.angle),
-          center: [l(a.center[0], b.center[0]), l(a.center[1], b.center[1])],
-          innerRadius: l(a.innerRadius, b.innerRadius),
-          radius: l(a.radius, b.radius),
-          stops: a.stops.map((s, i) => ({ offset: l(s.offset, b.stops[i].offset), color: colors[i](t) }))
-        };
-      };
-    },
-    duration,
-    ease,
-    at,
-    repeat: loop.repeat,
-    yoyo: loop.yoyo,
-    repeatDelay: loop.repeatDelay
-  });
+function pickFill(props) {
+  if (!props) return void 0;
+  const v = props.fill;
+  if (typeof v === "string" || typeof v === "number") return v;
+  return void 0;
 }
-var PAINT_SIZE = 512;
-var GradientPainter = class {
-  constructor(size = PAINT_SIZE) {
-    this.size = size;
-    this.canvas.width = size;
-    this.canvas.height = size;
-    this.tex = Texture.from(this.canvas);
-    globalThis.__gradientPainters = (globalThis.__gradientPainters ?? 0) + 1;
-  }
-  size;
-  canvas = document.createElement("canvas");
-  tex;
-  /** Paint `g` and return what `Graphics.fill(...)` takes. */
-  paint(g) {
-    const ctx = this.canvas.getContext("2d"), s = this.size;
-    if (!ctx) return new FillGradient(gradientOptions({ angle: g.angle, stops: g.stops.map((x) => [x.offset, x.color]) }));
-    ctx.clearRect(0, 0, s, s);
-    if (g.type === "radial") {
-      paintRadial(ctx, s, { stops: g.stops.map((x) => [x.offset, x.color]), center: g.center, innerRadius: g.innerRadius, radius: g.radius });
-    } else {
-      const a = g.angle * Math.PI / 180, dx = Math.cos(a), dy = Math.sin(a);
-      const h = (Math.abs(dx) + Math.abs(dy)) / 2;
-      const grad = ctx.createLinearGradient((0.5 - dx * h) * s, (0.5 - dy * h) * s, (0.5 + dx * h) * s, (0.5 + dy * h) * s);
-      for (const st of g.stops) grad.addColorStop(Math.min(1, Math.max(0, st.offset)), st.color);
-      ctx.fillStyle = grad;
-      ctx.fillRect(0, 0, s, s);
+
+// src/core/remap.ts
+var BAGS = ["set", "to", "from"];
+function timeRemapOf(spec, prop = "time") {
+  const hasInitial = !!spec.initial && "time" in spec.initial;
+  const hasKf = (spec.keyframes ?? []).some((kf) => BAGS.some((b) => kf[b] && "time" in kf[b]));
+  const speed = typeof spec.speed === "number" && Number.isFinite(spec.speed) && spec.speed !== 0 ? spec.speed : void 0;
+  if (!hasInitial && !hasKf && speed === void 0) return null;
+  const timeKfs = [];
+  const restKfs = [];
+  for (const kf of spec.keyframes ?? []) {
+    const t = { ...kf }, r = { ...kf };
+    let touched = false, left = false;
+    for (const b of BAGS) {
+      const bag = kf[b];
+      if (!bag) {
+        delete t[b];
+        delete r[b];
+        continue;
+      }
+      const { time, ...others } = bag;
+      if ("time" in bag) {
+        touched = true;
+        t[b] = { [prop]: time };
+      } else delete t[b];
+      if (Object.keys(others).length) {
+        r[b] = others;
+        left = true;
+      } else delete r[b];
     }
-    this.tex.source.update();
-    return { texture: this.tex, textureSpace: "local" };
+    if (touched) timeKfs.push(t);
+    if (!touched || left) restKfs.push(r);
   }
-  /** Give the texture and the canvas back (a layer that is destroyed must not leave them). */
-  destroy() {
-    this.tex.destroy(true);
-    this.canvas.width = this.canvas.height = 0;
-    globalThis.__gradientPainters = Math.max(0, (globalThis.__gradientPainters ?? 1) - 1);
+  let restInitial = spec.initial;
+  let start;
+  if (hasInitial) {
+    const { time, ...others } = spec.initial;
+    start = typeof time === "number" && Number.isFinite(time) ? time : void 0;
+    restInitial = others;
   }
-};
-function bindGradientKeyframes(timeline, holder, keyframes, duration, offset, colorSpace, onChange) {
-  const bag = (b) => b?.fillGradient;
-  for (const kf of keyframes) {
-    const at = offset + resolveAt(kf.at, duration);
-    const setV = bag(kf.set), fromV = bag(kf.from), toV = bag(kf.to);
-    if (setV !== void 0) {
-      timeline.tweenValue({
-        holder,
-        id: "grad",
-        get: () => holder.grad,
-        set: (g) => {
-          holder.grad = g;
-          onChange();
-        },
-        to: (start) => mergeGrad(start, setV),
-        make: (_a, b) => () => b,
-        duration: 0,
-        ease: "none",
-        at
-      });
+  return { timeKfs, restKfs: restKfs.length ? restKfs : void 0, restInitial, start, speed };
+}
+function resolveFromEnd(remap, length, prop) {
+  const fix = (v) => typeof v === "number" && v < 0 ? Math.max(0, length + v) : v;
+  const timeKfs = remap.timeKfs.map((kf) => {
+    const out = { ...kf };
+    for (const b of BAGS) {
+      const bag = kf[b];
+      if (bag && prop in bag) out[b] = { ...bag, [prop]: fix(bag[prop]) };
     }
-    if (fromV !== void 0 || toV !== void 0) {
-      tweenGradient(timeline, holder, fromV, toV, kfDuration(kf), kf.ease ?? "none", at, colorSpace, onChange, loopVars(kf));
+    return out;
+  });
+  return { ...remap, timeKfs, start: remap.start === void 0 ? void 0 : fix(remap.start) };
+}
+function remapOf(spec, prop, length) {
+  const r = timeRemapOf(spec, prop);
+  return r && length !== null ? resolveFromEnd(r, length, prop) : r;
+}
+function contentLength(remap, duration) {
+  let m = duration;
+  if (remap.speed !== void 0) m = Math.max(m, Math.abs(remap.speed) * duration);
+  if (remap.start !== void 0) m = Math.max(m, remap.start + (remap.speed ?? 1) * duration);
+  for (const kf of remap.timeKfs) {
+    for (const b of BAGS) {
+      const bag = kf[b];
+      const v = bag && Object.values(bag)[0];
+      if (typeof v === "number") m = Math.max(m, v);
     }
   }
+  return m;
 }
-var hasGradientKeys = (keyframes) => (keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((b) => b && b.fillGradient !== void 0));
-
-// src/sequences/Text.ts
-var STYLE_OPAQUE_KEYS = [
-  "fontFamily",
-  "fill",
-  "align",
-  "fontStyle",
-  "fontWeight",
-  "fontVariant",
-  "textBaseline",
-  "whiteSpace",
-  "lineJoin",
-  "join",
-  "cap",
-  "color",
-  "stroke"
-];
-function formatValue(v, f) {
-  const fixed = v.toFixed(Math.max(0, Math.floor(f?.decimals ?? 0)));
-  const pad = Math.max(0, Math.floor(f?.pad ?? 0));
-  if (!f?.grouping && !pad) return fixed;
-  const [signed, frac] = fixed.split(".");
-  const sign = signed.startsWith("-") ? "-" : "";
-  let int = sign ? signed.slice(1) : signed;
-  if (pad) int = int.padStart(pad, "0");
-  if (f?.grouping) int = int.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  return sign + int + (frac !== void 0 ? "." + frac : "");
+function bindClock(timeline, clock, prop, remap, duration, at, scope) {
+  if (remap.timeKfs.length) {
+    if (remap.start !== void 0) timeline.set(clock, { [prop]: remap.start }, at);
+    applyKeyframes(timeline, clock, remap.timeKfs, duration, scope, [], at);
+    return;
+  }
+  const s = remap.speed ?? 1;
+  const from = remap.start ?? (s < 0 ? -s * duration : 0);
+  timeline.fromTo(clock, { [prop]: from }, { [prop]: from + s * duration, duration, ease: "none" }, at);
 }
-var TextSequence = class extends Sequence {
-  /** `value`: the number for the `{value}` placeholder; `visibleChars`: how many characters show (typewriter). Both tweened by keyframes. */
-  _counters = { value: 0, visibleChars: 0 };
-  /** The string now on the layer (before `{value}` / `visibleChars`): `text`, or the last `set: { text }`. */
-  _template = "";
-  /** `visibleChars` is in play (initial or animated): otherwise the whole text shows. */
-  _typed = false;
-  _lastText = "";
-  /** A gradient fill for the text (`fillGradient`, static or animated): rebuilt as a FillGradient on each change (the text is re-rasterised). */
-  _grad = null;
-  _fillGradient = null;
-  _applyGradient() {
-    const g = this._grad.grad;
-    const next = new FillGradient(gradientOptions({ angle: g.angle, stops: g.stops.map((s) => [s.offset, s.color]) }));
-    this.target.style.fill = next;
-    this._fillGradient?.destroy();
-    this._fillGradient = next;
+function clockTable(remap, prop, duration, at, scope, to) {
+  const probe = createTimeline({ paused: true });
+  const clock = { [prop]: remap.start ?? 0 };
+  bindClock(probe, clock, prop, remap, duration, at, scope);
+  probe.time(probe.duration());
+  probe.time(0);
+  const h = 1 / 1e3;
+  const n = Math.max(2, Math.ceil(to / h) + 2);
+  const tab = new Float64Array(n);
+  let min = Infinity, max = -Infinity;
+  for (let k = 0; k < n; k++) {
+    probe.time(k * h);
+    const v = clock[prop];
+    tab[k] = v;
+    const t = k * h;
+    if (t >= at && t <= at + duration) {
+      if (v < min) min = v;
+      if (v > max) max = v;
+    }
   }
-  destroy() {
-    super.destroy();
-    this._fillGradient?.destroy();
-    this._fillGradient = null;
+  probe.kill();
+  return {
+    at(t) {
+      const x = Math.min(Math.max(t / h, 0), n - 1.000001);
+      const k = Math.floor(x), f = x - k;
+      return tab[k] * (1 - f) + tab[k + 1] * f;
+    },
+    min: Number.isFinite(min) ? min : 0,
+    max: Number.isFinite(max) ? max : 0
+  };
+}
+
+// src/space/math.ts
+var DEG3 = Math.PI / 180;
+var DEFAULT_FOV = 40;
+var MIN_FOV = 1;
+var MAX_FOV = 179;
+var NEAR = 1;
+function clampFov(fov) {
+  if (!Number.isFinite(fov)) return DEFAULT_FOV;
+  return Math.min(MAX_FOV, Math.max(MIN_FOV, fov));
+}
+function homeDistance(compHeight, fovDeg) {
+  return compHeight / 2 / Math.tan(clampFov(fovDeg) * DEG3 / 2);
+}
+function homeCamera(compW, compH, fov = DEFAULT_FOV) {
+  return {
+    x: compW / 2,
+    y: compH / 2,
+    z: homeDistance(compH, fov),
+    lookAtX: compW / 2,
+    lookAtY: compH / 2,
+    lookAtZ: 0,
+    fov
+  };
+}
+function cameraBasis(cam, compW, compH) {
+  let fx = cam.lookAtX - cam.x;
+  let fy = cam.lookAtY - cam.y;
+  let fz = cam.lookAtZ - cam.z;
+  let len = Math.hypot(fx, fy, fz);
+  if (len < 1e-9) {
+    fx = 0;
+    fy = 0;
+    fz = -1;
+    len = 1;
   }
-  /** A typewriter that has typed nothing yet: the layer is empty on purpose (inspect must not call that "no size"). */
-  get showsNothingYet() {
-    return this._typed && this._lastText === "" && this._template !== "";
+  fx /= len;
+  fy /= len;
+  fz /= len;
+  let rx = -fz;
+  const ry = 0;
+  let rz = fx;
+  const rlen = Math.hypot(rx, rz);
+  if (rlen < 1e-9) {
+    rx = 1;
+    rz = 0;
+  } else {
+    rx /= rlen;
+    rz /= rlen;
   }
-  /** Rewrite the displayed string from the template, the current `value` and `visibleChars`. */
-  _refreshText() {
-    let next = this._template.includes("{value}") ? this._template.split("{value}").join(formatValue(this._counters.value, this.spec.format)) : this._template;
-    if (this._typed) next = Array.from(next).slice(0, Math.max(0, Math.floor(this._counters.visibleChars))).join("");
-    if (next === this._lastText) return;
-    this._lastText = next;
-    this.target.text = next;
+  const dx = ry * fz - rz * fy;
+  const dy = rz * fx - rx * fz;
+  const dz = rx * fy - ry * fx;
+  return {
+    cx: cam.x,
+    cy: cam.y,
+    cz: cam.z,
+    rx,
+    ry,
+    rz,
+    dx,
+    dy,
+    dz,
+    fx,
+    fy,
+    fz,
+    focal: compH / 2 / Math.tan(clampFov(cam.fov) * DEG3 / 2),
+    halfW: compW / 2,
+    halfH: compH / 2
+  };
+}
+function layerToWorld(t, px, py) {
+  let x = (px - t.pivotX) * t.scaleX;
+  let y = (py - t.pivotY) * t.scaleY;
+  let z = 0;
+  let c = Math.cos(t.rotationX);
+  let s = Math.sin(t.rotationX);
+  [y, z] = [y * c - z * s, y * s + z * c];
+  c = Math.cos(t.rotationY);
+  s = Math.sin(t.rotationY);
+  [x, z] = [x * c + z * s, -x * s + z * c];
+  c = Math.cos(t.rotationZ);
+  s = Math.sin(t.rotationZ);
+  [x, y] = [x * c - y * s, x * s + y * c];
+  return { x: x + t.x, y: y + t.y, z: z + t.z };
+}
+function projectPoint(b, p) {
+  const vx = p.x - b.cx;
+  const vy = p.y - b.cy;
+  const vz = p.z - b.cz;
+  const xc = vx * b.rx + vy * b.ry + vz * b.rz;
+  const yc = vx * b.dx + vy * b.dy + vz * b.dz;
+  const zc = vx * b.fx + vy * b.fy + vz * b.fz;
+  return { x: b.halfW + b.focal * xc / zc, y: b.halfH + b.focal * yc / zc, depth: zc };
+}
+function projectLayer(t, frame, b) {
+  const pts = [
+    [frame.x, frame.y],
+    [frame.x + frame.width, frame.y],
+    [frame.x + frame.width, frame.y + frame.height],
+    [frame.x, frame.y + frame.height]
+  ];
+  let visible = true;
+  const corners = [];
+  for (const [px, py] of pts) {
+    const p = projectPoint(b, layerToWorld(t, px, py));
+    if (!(p.depth > NEAR)) visible = false;
+    corners.push(p.x, p.y);
   }
+  const origin = projectPoint(b, { x: t.x, y: t.y, z: t.z });
+  return { corners, depth: origin.depth, visible };
+}
+
+// src/space/focus.ts
+var DEFAULT_APERTURE = 30;
+var MIN_BLUR = 0.05;
+var MAX_BLUR = 32;
+var MANY_BLURRED = 20;
+function blurRadius(aperture, focal, depth, focusDepth) {
+  if (!(aperture > 0) || !(focal > 0) || !(depth > 0) || !(focusDepth > 0)) return 0;
+  const r = aperture * focal * Math.abs(1 / depth - 1 / focusDepth) / 2;
+  return Math.min(r, MAX_BLUR);
+}
+var SCOPE_NAMES = /* @__PURE__ */ new Set(["w", "h", "W", "H", "GW", "GH", "contain", "cover", "t", "d", "T"]);
+function looksLikeLayerName(s) {
+  return /^[A-Za-z_][\w-]*$/.test(s) && !SCOPE_NAMES.has(s);
+}
+var isName = (v, known) => typeof v === "string" && (known.has(v) || looksLikeLayerName(v));
+function focusNames(props, known) {
+  const out = [];
+  const read2 = (bag) => {
+    const v = bag?.focus;
+    if (isName(v, known)) out.push(v);
+  };
+  read2(props.initial);
+  for (const kf of props.keyframes ?? []) for (const bag of [kf.set, kf.to, kf.from]) read2(bag);
+  return out;
+}
+function withFocusResolved(props, zOf, known = /* @__PURE__ */ new Set()) {
+  if (focusNames(props, known).length === 0) return props;
+  const fix = (bag) => {
+    const v = bag?.focus;
+    if (!bag || !isName(v, known)) return bag;
+    return { ...bag, focus: zOf(v) ?? 0 };
+  };
+  return {
+    ...props,
+    initial: fix(props.initial),
+    keyframes: props.keyframes?.map((kf) => ({ ...kf, set: fix(kf.set), to: fix(kf.to), from: fix(kf.from) }))
+  };
+}
+function layerInitialZ(spec, scope) {
+  const z = spec.initial?.z;
+  if (typeof z === "number") return z;
+  if (typeof z === "string") return evaluateExpr(z, scope);
+  return 0;
+}
+var movesZ = (spec) => (spec.keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((bag) => bag && "z" in bag));
+function focusProblems(camera, siblings) {
+  const out = [];
+  const said = /* @__PURE__ */ new Set();
+  const threeD = siblings.filter((s) => s.threeD && s.name).map((s) => s.name);
+  const known = new Set(siblings.map((s) => s.name).filter((n) => !!n));
+  for (const name of focusNames(camera, known)) {
+    if (said.has(name)) continue;
+    said.add(name);
+    const same = siblings.filter((s) => s.name === name);
+    const hit = same.find((s) => s.threeD) ?? same[0];
+    if (!hit) out.push({ kind: "missing", name, hint: suggestName(name, threeD) });
+    else if (!hit.threeD) out.push({ kind: "not-threeD", name });
+    else {
+      if (same.length > 1) out.push({ kind: "duplicate", name, count: same.length });
+      if (movesZ(hit)) out.push({ kind: "moving", name });
+    }
+  }
+  return out;
+}
+var CameraSequence = class extends Sequence {
+  /** True when `z` is never specified anywhere: z then follows `fov`. */
+  autoZ = true;
+  compH = 0;
+  warnedFov = false;
+  warnedLookAt = false;
+  warnedAperture = false;
+  /** True when the camera writes `focus` or `aperture` anywhere: depth of field is on. */
+  dof = false;
+  /** True when the camera writes any fog key anywhere: depth fog is on (nothing is made for a camera without fog). */
+  fog = false;
+  fogC = null;
+  zOfName = null;
+  layerNames = /* @__PURE__ */ new Set();
   async build() {
-    const baseStyle = {
-      fontFamily: "Arial",
-      fontSize: 36,
-      fill: "#ffffff",
-      align: "center"
-    };
-    const initialProps = this.spec.initial ?? {};
-    this._template = String(initialProps.text ?? this.spec.text ?? "");
-    const text = new Text({
-      text: this._template,
-      style: baseStyle,
-      label: this.spec.name
-    });
-    text.cullable = true;
-    this.target = text;
-    this.intrinsicWidth = text.width;
-    this.intrinsicHeight = text.height;
+    const compW = this.parent?.width ?? this.root.width;
+    this.compH = this.parent?.height ?? this.root.height;
     if (this.duration === void 0) {
       this.duration = this.parent?.duration ?? this.root.duration;
     }
-    if (this.spec.style) {
-      const scope2 = this.scope();
-      const resolved = normalizeProps(
-        this.spec.style,
-        scope2,
-        { skipKeys: STYLE_OPAQUE_KEYS }
-      );
-      const unset = Object.keys(resolved).filter((k) => resolved[k] === void 0);
-      if (unset.length) console.warn(`pixi-effects: ${describeLayer(this.spec)}: ${unset.map((k) => `style.${k}`).join(", ")} ${unset.length > 1 ? "are" : "is"} undefined (a variable that was never set?), so ${unset.length > 1 ? "they are" : "it is"} ignored and the default is used: omit the key instead`);
-      for (const k of Object.keys(resolved)) {
-        if (unset.includes(k)) continue;
-        text.style[k] = resolved[k];
-      }
-      this.intrinsicWidth = text.width;
-      this.intrinsicHeight = text.height;
+    const home = homeCamera(compW, this.compH);
+    const carrier = new Container();
+    carrier.x = home.x;
+    carrier.y = home.y;
+    carrier.z = home.z;
+    carrier.lookAtX = home.lookAtX;
+    carrier.lookAtY = home.lookAtY;
+    carrier.lookAtZ = home.lookAtZ;
+    carrier.fov = home.fov;
+    carrier.focus = 0;
+    carrier.aperture = DEFAULT_APERTURE;
+    carrier.offsetX = carrier.offsetY = carrier.offsetZ = 0;
+    carrier.lookOffsetX = carrier.lookOffsetY = carrier.lookOffsetZ = 0;
+    carrier.fogNear = home.z;
+    carrier.fogFar = home.z * 3;
+    carrier.fogColor = "#000000";
+    carrier.fogAmount = 1;
+    this.target = carrier;
+    const keys = collectPropKeys(this.spec);
+    this.autoZ = !keys.has("z");
+    this.dof = keys.has("focus") || keys.has("aperture");
+    this.fog = keys.has("fogNear") || keys.has("fogFar") || keys.has("fogColor") || keys.has("fogAmount");
+  }
+  /** The aperture to use now: off unless depth of field is on and the value is a number of 0 or more (said once if it is not). */
+  apertureNow(a) {
+    if (!this.dof) return 0;
+    if (!(a >= 0) && !this.warnedAperture) {
+      this.warnedAperture = true;
+      const who = this.spec.name ? ` "${this.spec.name}"` : "";
+      console.warn(`pixi-effects: camera${who}: aperture ${a} is not a number of 0 or more; depth of field is off (it is the lens diameter in px: 30 is the default, 0 turns it off)`);
     }
-    validateGradientKeyframes(this.spec, describeLayer(this.spec), void 0, "text");
-    const gradientSpec = this.spec.fillGradient ?? initialProps.fillGradient;
-    if (gradientSpec) {
-      this._grad = { grad: gradStateFrom(gradientSpec) };
-      this._applyGradient();
+    return a > 0 ? a : 0;
+  }
+  /** Called by the composition once its children exist: how a layer name in `focus` becomes the z of that layer. */
+  resolveFocusNames(zOf, names = /* @__PURE__ */ new Set()) {
+    this.zOfName = zOf;
+    this.layerNames = names;
+  }
+  displayProps() {
+    const base = super.displayProps();
+    return this.zOfName ? withFocusResolved(base, this.zOfName, this.layerNames) : base;
+  }
+  /** The camera's state at the current timeline position. */
+  state() {
+    const c = this.target;
+    if (!this.warnedFov && !(c.fov >= MIN_FOV && c.fov <= MAX_FOV)) {
+      this.warnedFov = true;
+      const who = this.spec.name ? ` "${this.spec.name}"` : "";
+      console.warn(`pixi-effects: camera${who}: fov ${c.fov} is outside [${MIN_FOV}, ${MAX_FOV}]; clamped`);
     }
-    const scope = this.scope();
-    if (initialProps.value !== void 0) this._counters.value = resolveNumber(initialProps.value, scope);
-    this._typed = initialProps.visibleChars !== void 0 || animates(this.spec.keyframes, "visibleChars");
-    if (initialProps.visibleChars !== void 0) this._counters.visibleChars = resolveNumber(initialProps.visibleChars, scope);
-    const typed = this._typed;
-    this._typed = false;
-    this._refreshText();
-    if (this._lastText !== "") {
-      this.intrinsicWidth = text.width;
-      this.intrinsicHeight = text.height;
+    const fov = clampFov(c.fov);
+    const z = this.autoZ ? homeDistance(this.compH, fov) : c.z;
+    if (!this.warnedLookAt && c.lookAtX === c.x && c.lookAtY === c.y && c.lookAtZ === z) {
+      this.warnedLookAt = true;
+      const who = this.spec.name ? ` "${this.spec.name}"` : "";
+      console.warn(`pixi-effects: camera${who}: lookAt equals the camera position; looking along -z instead`);
+    }
+    return {
+      x: c.x + c.offsetX,
+      y: c.y + c.offsetY,
+      z: z + c.offsetZ,
+      lookAtX: c.lookAtX + c.lookOffsetX,
+      lookAtY: c.lookAtY + c.lookOffsetY,
+      lookAtZ: c.lookAtZ + c.lookOffsetZ,
+      fov,
+      focus: Number.isFinite(c.focus) ? c.focus : 0,
+      aperture: this.apertureNow(c.aperture)
+    };
+  }
+  /** The fog now (colour as 0..1 channels, distances, 0..1 amount), or null when the camera writes no fog key. */
+  fogState() {
+    if (!this.fog) return null;
+    const c = this.target;
+    const fc = this.fogC ??= new Color();
+    try {
+      fc.setValue(c.fogColor);
+    } catch {
+      fc.setValue(0);
+    }
+    const [r, g, b] = fc.toArray();
+    const amount = Number.isFinite(c.fogAmount) ? Math.min(1, Math.max(0, c.fogAmount)) : 1;
+    return { r, g, b, near: c.fogNear, far: c.fogFar, amount };
+  }
+  /** Lifespan on the global timeline (valid after bindTimeline). */
+  window() {
+    const start = this.absoluteStart ?? this.at;
+    return { start, end: start + (this.duration ?? 0) };
+  }
+};
+
+// src/space/lighting.ts
+var LIGHT_KINDS = ["ambient", "point", "spot", "parallel"];
+var FALLOFFS = ["none", "smooth", "inverseSquare"];
+var LIGHT_PROPS = ["x", "y", "z", "lookAtX", "lookAtY", "lookAtZ", "intensity", "color", "coneAngle", "coneFeather", "radius", "falloffDistance", "shadowDarkness", "shadowDiffusion"];
+var MAX_LIGHTS = 8;
+var MAX_CASTERS = 4;
+var SHADOW_TAPS = 16;
+var FALLOFF_ID = { none: 0, smooth: 1, inverseSquare: 2 };
+var KIND_ID = { point: 1, spot: 2, parallel: 3 };
+function smoothstep(e0, e1, x) {
+  const t = Math.min(1, Math.max(0, (x - e0) / (e1 - e0)));
+  return t * t * (3 - 2 * t);
+}
+var DEG4 = Math.PI / 180;
+function norm(v) {
+  const l = Math.hypot(v.x, v.y, v.z) || 1;
+  return { x: v.x / l, y: v.y / l, z: v.z / l };
+}
+var dot = (a, b) => a.x * b.x + a.y * b.y + a.z * b.z;
+var sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y, z: a.z - b.z });
+function coneCos(l) {
+  const half = Math.min(179, Math.max(0, l.coneAngle)) * DEG4 / 2;
+  const inner = half * (1 - Math.min(1, Math.max(0, l.coneFeather)));
+  const cosOuter = Math.cos(half);
+  const cosInner = Math.max(Math.cos(inner), cosOuter + 1e-4);
+  return { cosOuter, cosInner };
+}
+function packLights(lights) {
+  const pos = new Float32Array(4 * MAX_LIGHTS), dir = new Float32Array(4 * MAX_LIGHTS), col = new Float32Array(4 * MAX_LIGHTS), fall = new Float32Array(4 * MAX_LIGHTS), shadow = new Float32Array(4 * MAX_LIGHTS);
+  const ambient = [0, 0, 0];
+  let n = 0;
+  for (const l of lights) {
+    if (l.kind === "ambient") {
+      ambient[0] += l.r * l.intensity;
+      ambient[1] += l.g * l.intensity;
+      ambient[2] += l.b * l.intensity;
+      continue;
+    }
+    if (n >= MAX_LIGHTS) continue;
+    const d = norm({ x: l.lookAtX - l.x, y: l.lookAtY - l.y, z: l.lookAtZ - l.z });
+    const { cosOuter, cosInner } = coneCos(l);
+    pos.set([l.x, l.y, l.z, KIND_ID[l.kind]], 4 * n);
+    dir.set([d.x, d.y, d.z, cosOuter], 4 * n);
+    col.set([l.r * l.intensity, l.g * l.intensity, l.b * l.intensity, cosInner], 4 * n);
+    fall.set([FALLOFF_ID[l.falloff], l.radius, l.falloffDistance, l.castsShadows ? 1 : 0], 4 * n);
+    shadow.set([l.castsShadows ? l.shadowDarkness : 0, l.shadowDiffusion, 0, 0], 4 * n);
+    n++;
+  }
+  return { count: n, ambient, pos, dir, col, fall, shadow };
+}
+function shadeReference(p, n, cam, lights) {
+  let N = norm(n);
+  if (dot(N, sub(cam, p)) < 0) N = { x: -N.x, y: -N.y, z: -N.z };
+  const out = [0, 0, 0];
+  for (const l of lights) {
+    if (l.kind === "ambient") {
+      out[0] += l.r * l.intensity;
+      out[1] += l.g * l.intensity;
+      out[2] += l.b * l.intensity;
+      continue;
+    }
+    const dirLA = norm({ x: l.lookAtX - l.x, y: l.lookAtY - l.y, z: l.lookAtZ - l.z });
+    let L;
+    let dist = 0;
+    if (l.kind === "parallel") L = { x: -dirLA.x, y: -dirLA.y, z: -dirLA.z };
+    else {
+      const d = sub({ x: l.x, y: l.y, z: l.z }, p);
+      dist = Math.hypot(d.x, d.y, d.z);
+      L = { x: d.x / dist, y: d.y / dist, z: d.z / dist };
+    }
+    const ndl = Math.max(0, dot(N, L));
+    let att = 1;
+    if (l.kind !== "parallel") {
+      if (l.falloff === "smooth") att = 1 - smoothstep(l.radius, l.radius + Math.max(l.falloffDistance, 1e-3), dist);
+      else if (l.falloff === "inverseSquare") att = Math.min(1, l.radius * l.radius / Math.max(dist * dist, 1e-6));
+    }
+    let cone = 1;
+    if (l.kind === "spot") {
+      const { cosOuter, cosInner } = coneCos(l);
+      cone = smoothstep(cosOuter, cosInner, -dot(L, dirLA));
+    }
+    const k = l.intensity * ndl * att * cone;
+    out[0] += l.r * k;
+    out[1] += l.g * k;
+    out[2] += l.b * k;
+  }
+  return out;
+}
+function lightLevel(frame, cam, lights) {
+  const mid = { x: frame.o.x + 0.5 * frame.u.x + 0.5 * frame.v.x, y: frame.o.y + 0.5 * frame.u.y + 0.5 * frame.v.y, z: frame.o.z + 0.5 * frame.u.z + 0.5 * frame.v.z };
+  const n = { x: frame.u.y * frame.v.z - frame.u.z * frame.v.y, y: frame.u.z * frame.v.x - frame.u.x * frame.v.z, z: frame.u.x * frame.v.y - frame.u.y * frame.v.x };
+  const m = shadeReference(mid, n, cam, lights);
+  return 0.2126 * m[0] + 0.7152 * m[1] + 0.0722 * m[2];
+}
+var LightSequence = class extends Sequence {
+  color = new Color();
+  async build() {
+    const w = this.parent?.width ?? this.root.width;
+    const h = this.parent?.height ?? this.root.height;
+    if (this.duration === void 0) this.duration = this.parent?.duration ?? this.root.duration;
+    const c = new Container();
+    c.x = w * 0.3;
+    c.y = h * 0.2;
+    c.z = homeDistance(h, 40) * 0.6;
+    c.lookAtX = w / 2;
+    c.lookAtY = h / 2;
+    c.lookAtZ = 0;
+    c.intensity = 1;
+    c.color = "#ffffff";
+    c.coneAngle = 90;
+    c.coneFeather = 0.5;
+    c.radius = 500;
+    c.falloffDistance = 500;
+    c.shadowDarkness = 1;
+    c.shadowDiffusion = 0;
+    this.target = c;
+  }
+  state() {
+    const c = this.target;
+    try {
+      this.color.setValue(c.color);
+    } catch {
+      this.color.setValue(16777215);
     }
-    this._typed = typed;
-    this._refreshText();
-    this.buildFilters();
+    const [r, g, b] = this.color.toArray();
+    return {
+      // a kind or falloff nobody knows is the default the warning promises (the shader must never see an unknown id)
+      kind: LIGHT_KINDS.includes(this.spec.kind) ? this.spec.kind : "point",
+      x: c.x,
+      y: c.y,
+      z: c.z,
+      lookAtX: c.lookAtX,
+      lookAtY: c.lookAtY,
+      lookAtZ: c.lookAtZ,
+      r,
+      g,
+      b,
+      intensity: Number.isFinite(c.intensity) ? Math.max(0, c.intensity) : 1,
+      coneAngle: c.coneAngle,
+      coneFeather: c.coneFeather,
+      falloff: FALLOFFS.includes(this.spec.falloff) ? this.spec.falloff : "none",
+      radius: c.radius,
+      falloffDistance: c.falloffDistance,
+      castsShadows: !!this.spec.castsShadows,
+      shadowDarkness: Math.min(1, Math.max(0, c.shadowDarkness)),
+      shadowDiffusion: Math.max(0, c.shadowDiffusion)
+    };
   }
-  bindTimeline(timeline, offset = 0) {
-    if (!this.target) return;
-    const colorSpace = this.spec.colorSpace ?? "rgb";
-    const stripped = stripKeys2(this.spec, ["fill", "value", "text", "visibleChars", "fillGradient"]);
-    runSuperWithStrippedSpec(this, stripped, timeline, offset);
-    const keyframes = this.spec.keyframes ?? [];
-    const origin = offset + this.at;
-    bindFillKeyframes(timeline, this.target, keyframes, this.duration, origin, colorSpace);
-    if (this._grad) bindGradientKeyframes(timeline, this._grad, keyframes, this.duration, origin, colorSpace, () => this._applyGradient());
-    const refresh = () => this._refreshText();
-    bindCounterKeyframes(timeline, this._counters, "value", refresh, keyframes, this.duration, origin, this.scope());
-    bindCounterKeyframes(timeline, this._counters, "visibleChars", refresh, keyframes, this.duration, origin, this.scope());
-    bindTextKeyframes(timeline, keyframes, this.duration, origin, () => this._template, (t) => {
-      this._template = t;
-      refresh();
-    }, describeLayer(this.spec));
+  window() {
+    const start = this.absoluteStart ?? this.at;
+    return { start, end: start + (this.duration ?? 0) };
   }
 };
-function runSuperWithStrippedSpec(inst, strippedSpec, timeline, offset) {
-  const originalSpec = inst.spec;
-  inst.spec = strippedSpec;
-  try {
-    Sequence.prototype.bindTimeline.call(inst, timeline, offset);
-  } finally {
-    inst.spec = originalSpec;
+var defaultWarn = (m) => console.warn(m);
+var SPAN_STYLE_KEYS = ["fill", "fontWeight", "fontStyle", "fontVariant", "letterSpacing", "dropShadow"];
+var LINE_KEYS = ["fontSize", "fontFamily", "lineHeight", "wordWrap", "wordWrapWidth", "align", "leading", "textBaseline", "whiteSpace", "stroke", "padding"];
+var spansMeta = /* @__PURE__ */ new WeakMap();
+var widthOf = (text, style) => CanvasTextMetrics.measureText(text, style).width;
+function normalize(spans, who, warn) {
+  if (!Array.isArray(spans) || spans.length === 0) {
+    warn(`pixi-effects: ${who}: spans is empty: write an array of strings and { text, fill \u2026 } objects (nothing is drawn)`);
+    return [];
   }
-}
-function stripKeys2(spec, keys) {
-  return {
-    ...spec,
-    initial: stripProps(spec.initial, keys),
-    keyframes: spec.keyframes ? spec.keyframes.map((kf) => ({
-      ...kf,
-      set: stripProps(kf.set, keys),
-      to: stripProps(kf.to, keys),
-      from: stripProps(kf.from, keys)
-    })) : void 0
-  };
-}
-function stripProps(props, keys) {
-  if (!props) return props;
-  if (!keys.some((k) => k in props)) return props;
-  const out = {};
-  for (const k of Object.keys(props)) if (!keys.includes(k)) out[k] = props[k];
-  return out;
-}
-function resolveNumber(v, scope) {
-  if (typeof v === "number") return v;
-  const out = normalizeProps({ v }, scope).v;
-  return typeof out === "number" ? out : Number(out) || 0;
-}
-function bindCounterKeyframes(timeline, state, key, refresh, keyframes, parentDuration, origin, scope) {
-  for (const kf of keyframes) {
-    const setV = kf.set?.[key];
-    const fromV = kf.from?.[key];
-    const toV = kf.to?.[key];
-    if (setV === void 0 && fromV === void 0 && toV === void 0) continue;
-    const at = origin + resolveAt(kf.at, parentDuration);
-    const duration = kfDuration(kf);
-    const ease = kf.ease ?? "none";
-    const loop = loopVars(kf);
-    if (setV !== void 0) {
-      const v = resolveNumber(setV, scope);
-      revertibleSet(timeline, at, () => state[key], (n) => {
-        state[key] = n;
-        refresh();
-      }, v, [state, key]);
+  const out = [];
+  const lineKeys = /* @__PURE__ */ new Set();
+  spans.forEach((sp, i) => {
+    if (typeof sp === "string") {
+      out.push({ text: sp, overrides: {} });
+      return;
     }
-    if (toV !== void 0 && fromV !== void 0) {
-      timeline.fromTo(
-        state,
-        { [key]: resolveNumber(fromV, scope) },
-        { [key]: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh },
-        at
-      );
-    } else if (toV !== void 0) {
-      timeline.to(state, { [key]: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
-    } else if (fromV !== void 0) {
-      timeline.from(state, { [key]: resolveNumber(fromV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
+    if (!sp || typeof sp !== "object" || typeof sp.text !== "string") {
+      warn(`pixi-effects: ${who}: spans[${i}] must be a string or { text: '\u2026', fill: '#\u2026' }, got ${JSON.stringify(sp)}; skipped`);
+      return;
     }
-  }
+    const { text, ...rest } = sp;
+    const overrides = {};
+    for (const [k, v] of Object.entries(rest)) {
+      if (v === void 0) continue;
+      if (SPAN_STYLE_KEYS.includes(k)) overrides[k] = v;
+      else if (LINE_KEYS.includes(k)) lineKeys.add(k);
+      else {
+        const guess = suggestName(k, [...SPAN_STYLE_KEYS]);
+        warn(`pixi-effects: ${who}: spans[${i}]: "${k}" is not a span key${guess ? ` \u2014 did you mean "${guess}"?` : ""} (it is ignored). A span takes text and ${SPAN_STYLE_KEYS.join(", ")}`);
+      }
+    }
+    out.push({ text, overrides });
+  });
+  if (lineKeys.size) warn(`pixi-effects: ${who}: a span cannot set ${[...lineKeys].join(", ")}: they move the baseline, the line or the pieces' places (a stroke shifts a piece by half its width); put them in the style of the layer (one size, one font and one outline per layer). They are ignored`);
+  return out;
 }
-function bindTextKeyframes(timeline, keyframes, parentDuration, origin, read2, write2, who) {
-  for (const kf of keyframes) {
-    for (const [what, props] of [["to", kf.to], ["from", kf.from]]) {
-      if (props && props.text !== void 0) {
-        console.warn(`pixi-effects: ${who}: a keyframe's ${what}: { text } cannot tween a string: use set: { text: '\u2026' } at the time it should change`);
+function layoutSpans(spans, style, align2, who, warn = defaultWarn) {
+  const clean = normalize(spans, who, warn);
+  const base = new TextStyle(style);
+  const m = CanvasTextMetrics.measureText("M", base);
+  const lineHeight = m.lineHeight ?? m.height;
+  const sentinel = (ts) => widthOf("|", ts);
+  const measure = (text, ts) => widthOf(text + "|", ts) - sentinel(ts);
+  const pieces = [];
+  let line = 0, chars = 0, x = 0;
+  clean.forEach((sp, spanIdx) => {
+    const ts = Object.keys(sp.overrides).length ? new TextStyle({ ...style, ...sp.overrides }) : base;
+    sp.text.split("\n").forEach((part, k) => {
+      if (k > 0) {
+        line++;
+        x = 0;
+        chars += 1;
+      }
+      if (part === "") return;
+      const width2 = measure(part, ts);
+      const length = Array.from(part).length;
+      pieces.push({ text: part, x, y: line * lineHeight, width: width2, line, span: spanIdx, start: chars, length, style: sp.overrides, blank: part.trim() === "" });
+      x += width2;
+      chars += length;
+    });
+  });
+  const lineWidth = /* @__PURE__ */ new Map();
+  for (const p of pieces) lineWidth.set(p.line, Math.max(lineWidth.get(p.line) ?? 0, p.x + p.width));
+  const width = Math.max(0, ...lineWidth.values());
+  for (const p of pieces) {
+    const room = width - (lineWidth.get(p.line) ?? 0);
+    p.x += align2 === "center" ? room / 2 : align2 === "right" ? room : 0;
+  }
+  return { pieces, width, height: pieces.length ? (line + 1) * lineHeight : 0, lineHeight, chars };
+}
+function resolveSpansStyle(style, scope, who, warn = defaultWarn) {
+  const out = { ...TEXT_STYLE_DEFAULTS };
+  for (const [k, raw] of Object.entries(style)) {
+    if (raw === void 0) continue;
+    let v = raw;
+    if (scope) {
+      try {
+        v = normalizeProps({ [k]: raw }, scope, { skipKeys: STYLE_OPAQUE_KEYS })[k];
+      } catch (e) {
+        v = NaN;
+        if (!(k in TEXT_STYLE_DEFAULTS) || k === "fontSize") warn(`pixi-effects: ${who}: style.${k} ${JSON.stringify(raw)} could not be resolved (${e.message}); ${k === "fontSize" ? `the default, ${TEXT_STYLE_DEFAULTS.fontSize}, is used` : "it is left out"}`);
+        continue;
       }
     }
-    const t = kf.set?.text;
-    if (t === void 0) continue;
-    revertibleSet(timeline, origin + resolveAt(kf.at, parentDuration), read2, write2, String(t));
+    if (["fontSize", "letterSpacing", "lineHeight"].includes(k) && (typeof v !== "number" || !Number.isFinite(v) || k !== "letterSpacing" && v <= 0)) {
+      warn(`pixi-effects: ${who}: style.${k} ${JSON.stringify(raw)} is not a usable number here (a name that is not declared counts as 0; spans measure the text when the layer is built); ${k === "fontSize" ? `the default, ${TEXT_STYLE_DEFAULTS.fontSize}, is used` : "it is left out"}`);
+      continue;
+    }
+    out[k] = v;
   }
+  return out;
 }
-function animates(keyframes, key) {
-  return (keyframes ?? []).some((kf) => [kf.set, kf.to, kf.from].some((p) => p && p[key] !== void 0));
-}
-function bindFillKeyframes(timeline, text, keyframes, parentDuration, offset, colorSpace) {
-  const state = { fill: text.style.fill };
-  const writeFill = () => {
-    text.style.fill = state.fill;
+var TEXT_ONLY = ["type", "spans", "text", "style", "format", "colorSpace", "fillGradient", "initial", "keyframes"];
+var NOT_FOR_A_GROUP = ["fill", "text", "value", "fillGradient"];
+function expandSpans(spec, warn = defaultWarn, scope) {
+  const who = describeLayer(spec);
+  const s = spec;
+  if (s.text !== void 0) warn(`pixi-effects: ${who}: "text" is ignored when the layer has spans: write the text as spans`);
+  const style = resolveSpansStyle(s.style ?? {}, scope, who, warn);
+  const noLayout = ["wordWrap", "wordWrapWidth", "leading"].filter((k) => style[k] !== void 0 && style[k] !== false && style[k] !== 0);
+  for (const k of ["wordWrap", "wordWrapWidth", "leading"]) delete style[k];
+  if (noLayout.length) warn(`pixi-effects: ${who}: style.${noLayout.join(", style.")} ${noLayout.length > 1 ? "do" : "does"} not apply to a spans layer (the lines are the \\n of the spans); break the lines with \\n. ${noLayout.length > 1 ? "They are" : "It is"} ignored`);
+  const layout = layoutSpans(s.spans, style, style.align, who, warn);
+  const dropped = new Set(["fillGradient", "format", "colorSpace"].filter((k) => s[k] !== void 0));
+  const clean = (bag) => {
+    if (!bag) return bag;
+    const out = {};
+    for (const [k, v] of Object.entries(bag)) {
+      if (NOT_FOR_A_GROUP.includes(k)) dropped.add(k);
+      else out[k] = v;
+    }
+    return out;
   };
-  for (const kf of keyframes) {
-    const at = offset + resolveAt(kf.at, parentDuration);
-    const duration = kfDuration(kf);
-    const ease = kf.ease ?? "none";
-    const setFill = pickFill(kf.set);
-    const fromFill = pickFill(kf.from);
-    const toFill = pickFill(kf.to);
-    if (setFill !== void 0) {
-      revertibleSet(timeline, at, () => state.fill, (c) => {
-        state.fill = c;
-        writeFill();
-      }, setFill, [state, "fill"]);
+  const initial = clean(s.initial) ?? {};
+  const keyframes = (s.keyframes ?? []).map((kf) => ({ ...kf, set: clean(kf.set), to: clean(kf.to), from: clean(kf.from) }));
+  if (dropped.size) warn(`pixi-effects: ${who}: ${[...dropped].join(", ")} do not apply to a spans layer (it is a group of text layers): use a separate text layer, or put the colour in a span`);
+  const typed = initial.visibleChars !== void 0 || keyframes.some((kf) => [kf.set, kf.to, kf.from].some((p) => p && p.visibleChars !== void 0));
+  const width = Math.max(1, layout.width), height = Math.max(1, layout.height);
+  for (const [a, pivot, size] of [["anchorX", "pivotX", width], ["anchorY", "pivotY", height]]) {
+    if (initial[a] === void 0) continue;
+    if (typeof initial[a] === "number") {
+      initial[pivot] = initial[a] * size;
+      delete initial[a];
+    } else {
+      warn(`pixi-effects: ${who}: initial.${a} ${JSON.stringify(initial[a])} must be a number on a spans layer (it becomes the pivot of the block); it is ignored`);
+      delete initial[a];
+    }
+  }
+  const animatedAnchors = ["anchorX", "anchorY"].filter((a) => keyframes.some((kf) => [kf.set, kf.to, kf.from].some((p) => p && p[a] !== void 0)));
+  if (animatedAnchors.length) warn(`pixi-effects: ${who}: ${animatedAnchors.join(", ")} cannot be keyframed on a spans layer (the anchor is the pivot of the block, set once in initial); the keyframes do nothing`);
+  const baseName = typeof s.name === "string" && s.name ? s.name : "spans";
+  const drawn = layout.pieces.filter((p) => !p.blank);
+  const sequences = drawn.map((p, i) => ({
+    type: "text",
+    name: `${baseName}.${i}`,
+    text: p.text,
+    style: { ...style, ...p.style },
+    initial: { x: p.x, y: p.y, ...typed ? { visibleChars: p.length } : {} }
+  }));
+  const rest = {};
+  for (const [k, v] of Object.entries(s)) if (!TEXT_ONLY.includes(k)) rest[k] = v;
+  const group = { type: "composition", ...rest, width, height, initial, keyframes, sequences };
+  spansMeta.set(group, { typed, pieces: drawn.map((p) => ({ start: p.start, length: p.length })), preview: layout.pieces.map((p, i) => (i > 0 && p.line !== layout.pieces[i - 1].line ? " " : "") + p.text).join("") });
+  return group;
+}
+var ImageSequence = class extends Sequence {
+  async build() {
+    const texture = await Assets.get(this.spec.asset);
+    const sprite = new Sprite({ texture, label: this.spec.name });
+    sprite.cullable = true;
+    this.target = sprite;
+    this.intrinsicWidth = texture.width;
+    this.intrinsicHeight = texture.height;
+    if (this.duration === void 0) {
+      this.duration = this.parent?.duration ?? this.root.duration;
     }
-    if (toFill !== void 0) {
-      tweenColor(
-        timeline,
-        state,
-        "fill",
-        fromFill,
-        toFill,
-        duration,
-        ease,
-        at,
-        colorSpace,
-        writeFill,
-        loopVars(kf)
-      );
+    this.buildFilters();
+  }
+  bindTimeline(timeline, offset = 0) {
+    if (!this.target) return;
+    const colorSpace = this.spec.colorSpace;
+    if (!colorSpace || colorSpace === "rgb") {
+      super.bindTimeline(timeline, offset);
+      return;
+    }
+    const scope = this.scope();
+    const startTime = offset + this.at;
+    const initial = stripKeys2(this.spec.initial, ["tint"]);
+    const keyframes = this.spec.keyframes ? this.spec.keyframes.map((kf) => stripKeysInKeyframe(kf, ["tint"])) : void 0;
+    applyInitial(this.target, initial, scope);
+    applyKeyframes(timeline, this.target, keyframes, this.duration, scope, [], startTime);
+    const initTint = this.spec.initial?.tint;
+    if (initTint !== void 0) this.target.tint = initTint;
+    for (const kf of this.spec.keyframes ?? []) {
+      const at = startTime + resolveAt(kf.at, this.duration);
+      const duration = kfDuration(kf);
+      const ease = kf.ease ?? "none";
+      const fromTint = kf.from?.tint;
+      const toTint = kf.to?.tint;
+      const setTint = kf.set?.tint;
+      if (setTint !== void 0) {
+        const sprite = this.target;
+        revertibleSet(timeline, at, () => sprite.tint, (c) => {
+          sprite.tint = c;
+        }, setTint, [sprite, "tint"]);
+      }
+      if (toTint !== void 0) {
+        tweenColor(
+          timeline,
+          this.target,
+          "tint",
+          fromTint,
+          toTint,
+          duration,
+          ease,
+          at,
+          colorSpace,
+          void 0,
+          loopVars(kf)
+        );
+      }
+    }
+    this.absoluteStart = startTime;
+    const endTime = startTime + this.duration;
+    if (this.keepHidden) return;
+    this.target.renderable = startTime <= 0;
+    timeline.set(this.target, { renderable: true }, startTime);
+    timeline.set(this.target, { renderable: false }, endTime);
+  }
+};
+function stripKeys2(props, keys) {
+  if (!props) return props;
+  const drop = new Set(keys);
+  const out = {};
+  let changed = false;
+  for (const k of Object.keys(props)) {
+    if (drop.has(k)) {
+      changed = true;
+      continue;
     }
+    out[k] = props[k];
   }
+  return changed ? out : props;
 }
-function pickFill(props) {
-  if (!props) return void 0;
-  const v = props.fill;
-  if (typeof v === "string" || typeof v === "number") return v;
-  return void 0;
+function stripKeysInKeyframe(kf, keys) {
+  return {
+    ...kf,
+    set: stripKeys2(kf.set, keys),
+    to: stripKeys2(kf.to, keys),
+    from: stripKeys2(kf.from, keys)
+  };
 }
 var AudioSequence = class extends Sequence {
   _audioBuffer = null;
@@ -5398,10 +5606,15 @@ function resolveDim(v, scope) {
 var _CompositionSequence = null;
 async function getCompositionSequence() {
   if (!_CompositionSequence) {
-    _CompositionSequence = (await import('./Composition-RJGA7KDU.js')).CompositionSequence;
+    _CompositionSequence = (await import('./Composition-RF7QOEXT.js')).CompositionSequence;
   }
   return _CompositionSequence;
 }
+var _SpansSequence = null;
+async function getSpansSequence() {
+  if (!_SpansSequence) _SpansSequence = (await import('./Spans-SDXABOV6.js')).SpansSequence;
+  return _SpansSequence;
+}
 var staticTypes = {
   image: ImageSequence,
   text: TextSequence,
@@ -5419,8 +5632,12 @@ function registerSequenceType(type, ctor) {
 }
 async function buildSequenceTree(specs, parent, root) {
   const out = [];
-  for (const spec of specs) {
+  for (let spec of specs) {
     let Cls = staticTypes[spec.type] ?? registry2[spec.type];
+    if (spec.type === "text" && spec.spans !== void 0) {
+      spec = expandSpans(spec, void 0, buildScope({ intrinsicWidth: 0, intrinsicHeight: 0, at: spec.at, duration: spec.duration }, parent, root));
+      Cls = await getSpansSequence();
+    }
     if (!Cls && spec.type === "composition") {
       Cls = await getCompositionSequence();
     }
@@ -5440,6 +5657,6 @@ async function buildSequenceTree(specs, parent, root) {
   return out;
 }
 
-export { CameraSequence, DEFAULT_FOV, DEG3 as DEG, FALLOFFS, LIGHT_KINDS, LIGHT_PROPS, LightSequence, MANY_BLURRED, MAX_BLUR, MAX_CASTERS, MAX_LIGHTS, MIN_BLUR, NEAR, NullSequence, SHADOW_TAPS, Sequence, bindClock, blurRadius, buildScope, buildSequenceTree, cameraBasis, checkEase, clockTable, contentLength, createTimeline, ensureFilterLibrary, evaluateExpr, flattenSvgPath, focusProblems, homeCamera, homeDistance, layerInitialZ, layerToWorld, lengthen, lightLevel, noise, packLights, parseEase, projectLayer, projectPoint, rand, random, registerSequenceType, remapOf, resolveAt, timeRemapOf };
-//# sourceMappingURL=chunk-ZAXYPXKW.js.map
-//# sourceMappingURL=chunk-ZAXYPXKW.js.map
+export { CameraSequence, DEFAULT_FOV, DEG3 as DEG, EXPRESSION_NAMES, FALLOFFS, LIGHT_KINDS, LIGHT_PROPS, LightSequence, MANY_BLURRED, MAX_BLUR, MAX_CASTERS, MAX_LIGHTS, MIN_BLUR, NEAR, NullSequence, SHADOW_TAPS, Sequence, TextSequence, bindClock, bindCounterKeyframes, blurRadius, buildScope, buildSequenceTree, cameraBasis, checkEase, clockTable, contentLength, createTimeline, ensureFilterLibrary, evaluateExpr, flattenSvgPath, focusProblems, homeCamera, homeDistance, layerInitialZ, layerToWorld, lengthen, lightLevel, noise, packLights, parseEase, projectLayer, projectPoint, rand, random, registerSequenceType, remapOf, resolveAt, resolveNumber, spansMeta, timeRemapOf };
+//# sourceMappingURL=chunk-AW5NPDE4.js.map
+//# sourceMappingURL=chunk-AW5NPDE4.js.map