pixi-effects 0.5.0 → 0.7.0

package/dist/{chunk-UBPZLGLU.js → chunk-4O2NYDJG.js}

@@ -1,8 +1,8 @@
+import { suggestName } from './chunk-DKGG7WD4.js';
+import * as PIXI from 'pixi.js';
 import { Rectangle, Container, Graphics, Assets, Texture, Sprite, Text, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup, FillGradient, Color, GraphicsPath } from 'pixi.js';
 import { gsap } from 'gsap';
 
-// src/sequences/Base.ts
-
 // src/expr/Parser.ts
 var FUNCS = {
   min: Math.min,
@@ -696,6 +696,124 @@ var ChromaKeyFilter = class extends Filter {
     u[2] = rgb[2];
   }
 };
+var CORE = { blur: "BlurFilter", noise: "NoiseFilter", alpha: "AlphaFilter" };
+var CORE_TYPES = [...Object.keys(CORE), "colorMatrix"];
+var LIBRARY_TYPES = [
+  "adjustment",
+  "advancedBloom",
+  "ascii",
+  "backdropBlur",
+  "bevel",
+  "bloom",
+  "bulgePinch",
+  "colorGradient",
+  "colorMap",
+  "colorOverlay",
+  "colorReplace",
+  "convolution",
+  "crossHatch",
+  "crt",
+  "dot",
+  "dropShadow",
+  "emboss",
+  "glitch",
+  "glow",
+  "godray",
+  "grayscale",
+  "hslAdjustment",
+  "kawaseBlur",
+  "motionBlur",
+  "multiColorReplace",
+  "oldFilm",
+  "outline",
+  "pixelate",
+  "radialBlur",
+  "reflection",
+  "rgbSplit",
+  "shockwave",
+  "simpleLightmap",
+  "simplexNoise",
+  "tiltShift",
+  "tiltShiftAxis",
+  "twist",
+  "zoomBlur"
+];
+var FILTER_TYPES = [...CORE_TYPES, ...LIBRARY_TYPES];
+var NOT_NAMED = /* @__PURE__ */ new Set(["custom", "chromaKey"]);
+var lower = (s) => s.toLowerCase();
+var isLibraryType = (t) => LIBRARY_TYPES.some((n) => lower(n) === lower(t));
+var isCoreType = (t) => CORE_TYPES.some((n) => lower(n) === lower(t));
+function isNamedFilterType(t) {
+  return !NOT_NAMED.has(t);
+}
+function unknownType(t) {
+  const guess = suggestName(t, FILTER_TYPES);
+  return new Error(`pixi-effects: unknown filter type "${t}"${guess ? ` \u2014 did you mean "${guess}"?` : ""} (valid: ${[...FILTER_TYPES, "chromaKey", "custom"].join(", ")})`);
+}
+var library = null;
+function registerFilterLibrary(mod) {
+  library = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(mod)) {
+    if (key.endsWith("Filter") && typeof value === "function") library.set(lower(key.slice(0, -"Filter".length)), value);
+  }
+}
+var MISSING = (type, why) => new Error(
+  `pixi-effects: the filter "${type}" comes from the pixi-filters package${why ? ` (${why})` : ""}. Add it to your import map ("pixi-filters": "https://esm.sh/pixi-filters@6.1.5?external=pixi.js") or run \`npm i pixi-filters\`.`
+);
+function needsFilterLibrary(spec) {
+  let needs = false;
+  const visit = (node) => {
+    if (!node || typeof node !== "object") return;
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    const o = node;
+    if (Array.isArray(o.filters)) {
+      for (const f of o.filters) {
+        if (typeof f?.type !== "string" || !isNamedFilterType(f.type)) continue;
+        if (isLibraryType(f.type)) needs = true;
+        else if (!isCoreType(f.type)) throw unknownType(f.type);
+      }
+    }
+    for (const key of ["sequences", "mask"]) visit(o[key]);
+  };
+  visit(spec);
+  return needs;
+}
+async function ensureFilterLibrary(spec, load = () => import('pixi-filters')) {
+  if (!needsFilterLibrary(spec) || library) return;
+  try {
+    registerFilterLibrary(await load());
+  } catch (e) {
+    throw MISSING("(see the type in your filters)", e.message);
+  }
+}
+var SINGLE_VALUE = { pixelate: "size", emboss: "strength" };
+var MATRIX_PRESETS = ["sepia", "grayscale", "negative", "polaroid", "technicolor", "vintage", "kodachrome", "browni"];
+function colorMatrix(params) {
+  const f = new PIXI.ColorMatrixFilter();
+  const preset = params.preset;
+  if (preset !== void 0) {
+    if (!MATRIX_PRESETS.includes(preset)) {
+      const guess = suggestName(preset, MATRIX_PRESETS);
+      throw new Error(`pixi-effects: colorMatrix preset "${preset}" is not one of ${MATRIX_PRESETS.join(", ")}${guess ? ` \u2014 did you mean "${guess}"?` : ""}`);
+    }
+    f[preset === "grayscale" ? "desaturate" : preset].call(f);
+  }
+  if (Array.isArray(params.matrix)) f.matrix = params.matrix;
+  return f;
+}
+function createNamedFilter(type, params) {
+  if (lower(type) === "colormatrix") return colorMatrix(params);
+  const core = Object.entries(CORE).find(([k]) => lower(k) === lower(type));
+  if (core) return new PIXI[core[1]](params);
+  if (!isLibraryType(type)) throw unknownType(type);
+  const Ctor = library?.get(lower(type));
+  if (!Ctor) throw MISSING(type, library ? "not found in the loaded package" : "not loaded yet");
+  const single = SINGLE_VALUE[Object.keys(SINGLE_VALUE).find((k) => lower(k) === lower(type)) ?? ""];
+  return single ? new Ctor(params[single]) : new Ctor(params);
+}
 
 // src/filters/index.ts
 var registry = {
@@ -714,10 +832,9 @@ function createFilter(spec) {
     named._name = spec.name;
     return named;
   }
-  const Cls = registry[spec.type];
-  if (!Cls) throw new Error(`pixi-effects: unknown filter type "${spec.type}"`);
-  const { type: _t, name, ...params } = spec;
-  const inst = new Cls(params);
+  const { type, name, ...params } = spec;
+  const Cls = registry[type];
+  const inst = Cls ? new Cls(params) : createNamedFilter(type, params);
   inst._name = name;
   return inst;
 }
@@ -859,10 +976,12 @@ function summarizeWarnings(messages, shown = 3) {
 }
 function lintText(spec, warn = defaultWarn) {
   if (spec.type !== "text") return;
-  if ((spec.text ?? "").includes("{value}") && !collectPropKeys(spec).has("value")) {
+  const strings = [spec.text ?? "", ...(spec.keyframes ?? []).map((kf) => String(kf.set?.text ?? ""))];
+  const hasPlaceholder = strings.some((t) => t.includes("{value}"));
+  if (hasPlaceholder && !collectPropKeys(spec).has("value")) {
     warn(`pixi-effects: ${describeLayer(spec)}: the text has a {value} placeholder but nothing sets or animates \`value\`, so it prints 0. Set initial: { value: \u2026 } or animate it; {value} is reserved for counters (there is no way to print a literal "{value}").`);
   }
-  if (collectPropKeys(spec).has("value") && !(spec.text ?? "").includes("{value}")) {
+  if (collectPropKeys(spec).has("value") && !hasPlaceholder) {
     warn(`pixi-effects: ${describeLayer(spec)}: \`value\` is set or animated but the text has no {value} placeholder, so nothing shows it. Use text: '{value}' (or e.g. '{value} users').`);
   }
 }
@@ -1331,14 +1450,21 @@ function formatValue(v, f) {
   return sign + int + (frac !== void 0 ? "." + frac : "");
 }
 var TextSequence = class extends Sequence {
-  /** Current number for the `{value}` placeholder (tweened by `value` keyframes). */
-  _value = { value: 0 };
+  /** `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 = "";
-  /** Rewrite the displayed string from the template and the current `value`. */
+  /** 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() {
-    const template = this.spec.text ?? "";
-    if (!template.includes("{value}")) return;
-    const next = template.split("{value}").join(formatValue(this._value.value, this.spec.format));
+    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;
@@ -1350,8 +1476,10 @@ var TextSequence = class extends Sequence {
       fill: "#ffffff",
       align: "center"
     };
+    const initialProps = this.spec.initial ?? {};
+    this._template = String(initialProps.text ?? this.spec.text ?? "");
     const text = new Text({
-      text: this.spec.text ?? "",
+      text: this._template,
       style: baseStyle,
       label: this.spec.name
     });
@@ -1363,10 +1491,10 @@ var TextSequence = class extends Sequence {
       this.duration = this.parent?.duration ?? this.root.duration;
     }
     if (this.spec.style) {
-      const scope = this.scope();
+      const scope2 = this.scope();
       const resolved = normalizeProps(
         this.spec.style,
-        scope,
+        scope2,
         { skipKeys: STYLE_OPAQUE_KEYS }
       );
       for (const k of Object.keys(resolved)) {
@@ -1375,22 +1503,36 @@ var TextSequence = class extends Sequence {
       this.intrinsicWidth = text.width;
       this.intrinsicHeight = text.height;
     }
-    const initialValue = this.spec.initial?.value;
-    if (initialValue !== void 0) this._value.value = resolveNumber(initialValue, this.scope());
+    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 = stripKeys2(this.spec, ["fill", "value"]);
+    const stripped = stripKeys2(this.spec, ["fill", "value", "text", "visibleChars"]);
     runSuperWithStrippedSpec(this, stripped, timeline, offset);
-    bindFillKeyframes(timeline, this.target, this.spec.keyframes ?? [], this.duration, offset + this.at, colorSpace);
-    bindValueKeyframes(timeline, this._value, () => this._refreshText(), this.spec.keyframes ?? [], this.duration, offset + this.at, this.scope());
+    const keyframes = this.spec.keyframes ?? [];
+    const origin = offset + this.at;
+    bindFillKeyframes(timeline, this.target, keyframes, this.duration, origin, colorSpace);
+    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 runSuperWithStrippedSpec(inst, strippedSpec, timeline, offset) {
@@ -1426,11 +1568,11 @@ function resolveNumber(v, scope) {
   const out = normalizeProps({ v }, scope).v;
   return typeof out === "number" ? out : Number(out) || 0;
 }
-function bindValueKeyframes(timeline, state, refresh, keyframes, parentDuration, origin, scope) {
+function bindCounterKeyframes(timeline, state, key, refresh, keyframes, parentDuration, origin, scope) {
   for (const kf of keyframes) {
-    const setV = kf.set?.value;
-    const fromV = kf.from?.value;
-    const toV = kf.to?.value;
+    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 = kf.duration ?? 0;
@@ -1438,25 +1580,40 @@ function bindValueKeyframes(timeline, state, refresh, keyframes, parentDuration,
     const loop = loopVars(kf);
     if (setV !== void 0) {
       const v = resolveNumber(setV, scope);
-      revertibleSet(timeline, at, () => state.value, (n) => {
-        state.value = n;
+      revertibleSet(timeline, at, () => state[key], (n) => {
+        state[key] = n;
         refresh();
       }, v);
     }
     if (toV !== void 0 && fromV !== void 0) {
       timeline.fromTo(
         state,
-        { value: resolveNumber(fromV, scope) },
-        { value: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh },
+        { [key]: resolveNumber(fromV, scope) },
+        { [key]: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh },
         at
       );
     } else if (toV !== void 0) {
-      timeline.to(state, { value: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
+      timeline.to(state, { [key]: resolveNumber(toV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
     } else if (fromV !== void 0) {
-      timeline.from(state, { value: resolveNumber(fromV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
+      timeline.from(state, { [key]: resolveNumber(fromV, scope), duration, ease, ...loop, onUpdate: refresh }, at);
+    }
+  }
+}
+function bindTextKeyframes(timeline, keyframes, parentDuration, origin, read, write, 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 t = kf.set?.text;
+    if (t === void 0) continue;
+    revertibleSet(timeline, origin + resolveAt(kf.at, parentDuration), read, write, String(t));
   }
 }
+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 = () => {
@@ -1820,18 +1977,105 @@ function makeGradientFill(g) {
   }
   return new FillGradient(gradientOptions(g));
 }
+var CURVE_STEPS = 24;
+var ELLIPSE_STEPS = 128;
+function flattenSvgPath(d) {
+  const prims = new GraphicsPath(d).shapePath.shapePrimitives;
+  const out = [];
+  for (const { shape } of prims) {
+    const poly = shape;
+    if (poly.points && poly.points.length >= 4) out.push({ pts: poly.points.slice(), closed: poly.closePath === true });
+  }
+  return out;
+}
+function rectOutline(x, y, w, h, radius) {
+  const r = Math.max(0, Math.min(radius, Math.abs(w) / 2, Math.abs(h) / 2));
+  if (r === 0) return { pts: [x, y, x + w, y, x + w, y + h, x, y + h], closed: true };
+  const pts = [];
+  const corner = (cx, cy, from) => {
+    for (let i = 0; i <= CURVE_STEPS; i++) {
+      const a = from + i / CURVE_STEPS * (Math.PI / 2);
+      pts.push(cx + r * Math.cos(a), cy + r * Math.sin(a));
+    }
+  };
+  corner(x + w - r, y + r, -Math.PI / 2);
+  corner(x + w - r, y + h - r, 0);
+  corner(x + r, y + h - r, Math.PI / 2);
+  corner(x + r, y + r, Math.PI);
+  const startAt = pts.length - 2;
+  const rotated = pts.slice(startAt).concat(pts.slice(0, startAt));
+  return { pts: rotated, closed: true };
+}
+function ellipseOutline(cx, cy, rx, ry) {
+  const pts = [];
+  for (let i = 0; i < ELLIPSE_STEPS; i++) {
+    const a = -Math.PI / 2 + i / ELLIPSE_STEPS * Math.PI * 2;
+    pts.push(cx + rx * Math.cos(a), cy + ry * Math.sin(a));
+  }
+  return { pts, closed: true };
+}
+function trimPolylines(lines, start, end) {
+  const s = Math.max(0, Math.min(1, start)), e = Math.max(0, Math.min(1, end));
+  if (!(e > s)) return [];
+  const lengths = lines.map(polylineLength);
+  const total = lengths.reduce((a, b) => a + b, 0);
+  if (!(total > 0)) return [];
+  const from = s * total, to = e * total;
+  const out = [];
+  let offset = 0;
+  lines.forEach((line, i) => {
+    const len = lengths[i];
+    const a = Math.max(from - offset, 0), b = Math.min(to - offset, len);
+    offset += len;
+    if (!(b > a) || len === 0) return;
+    if (line.closed && a <= 0 && b >= len) {
+      out.push({ pts: line.pts.slice(), closed: true });
+      return;
+    }
+    out.push({ pts: slice(line, a, b), closed: false });
+  });
+  return out;
+}
+function points(line) {
+  return line.closed ? [...line.pts, line.pts[0], line.pts[1]] : line.pts;
+}
+function polylineLength(line) {
+  const p = points(line);
+  let len = 0;
+  for (let i = 2; i < p.length; i += 2) len += Math.hypot(p[i] - p[i - 2], p[i + 1] - p[i - 1]);
+  return len;
+}
+function slice(line, a, b) {
+  const p = points(line);
+  const out = [];
+  let at = 0;
+  for (let i = 2; i < p.length; i += 2) {
+    const x0 = p[i - 2], y0 = p[i - 1], x1 = p[i], y1 = p[i + 1];
+    const seg = Math.hypot(x1 - x0, y1 - y0);
+    const segEnd = at + seg;
+    if (segEnd > a && at < b && seg > 0) {
+      const t0 = Math.max(a - at, 0) / seg, t1 = Math.min(b - at, seg) / seg;
+      if (out.length === 0) out.push(x0 + (x1 - x0) * t0, y0 + (y1 - y0) * t0);
+      out.push(x0 + (x1 - x0) * t1, y0 + (y1 - y0) * t1);
+    }
+    at = segEnd;
+    if (at >= b) break;
+  }
+  return out;
+}
 
 // src/sequences/Shape.ts
 var STYLE_KEYS = ["fillColor", "fillAlpha", "strokeColor", "strokeAlpha", "strokeWidth"];
 var COLOR_KEYS = /* @__PURE__ */ new Set(["fillColor", "strokeColor"]);
+var TRIM_KEYS = ["trimStart", "trimEnd"];
 var GEOMETRY_KEYS_BY_SHAPE = {
-  rect: ["width", "height", "cornerRadius", "anchorX", "anchorY"],
-  circle: ["radius", "anchorX", "anchorY"],
-  ellipse: ["radiusX", "radiusY", "anchorX", "anchorY"],
+  rect: ["width", "height", "cornerRadius", "anchorX", "anchorY", ...TRIM_KEYS],
+  circle: ["radius", "anchorX", "anchorY", ...TRIM_KEYS],
+  ellipse: ["radiusX", "radiusY", "anchorX", "anchorY", ...TRIM_KEYS],
   arc: ["radius", "innerRadius", "startAngle", "endAngle"],
-  line: [],
-  polygon: [],
-  path: []
+  line: [...TRIM_KEYS],
+  polygon: [...TRIM_KEYS],
+  path: [...TRIM_KEYS]
 };
 var ANCHORED_SHAPES = /* @__PURE__ */ new Set(["rect", "circle", "ellipse", "arc"]);
 var ShapeSequence = class extends Sequence {
@@ -1864,13 +2108,26 @@ var ShapeSequence = class extends Sequence {
     if (this.spec.shape === "arc") {
       this._state.startAngle ??= 0;
       this._state.endAngle ??= 360;
+      const top = this.spec, ini = this.spec.initial ?? {};
+      if ("trimStart" in top || "trimEnd" in top || "trimStart" in ini || "trimEnd" in ini) {
+        console.warn(`pixi-effects: ${describeLayer(this.spec)}: trimStart / trimEnd do not apply to an arc: animate its endAngle (and startAngle) instead`);
+      }
+    } else {
+      this._state.trimStart ??= 0;
+      this._state.trimEnd ??= 1;
     }
     const gradientSpec = this.spec.fillGradient ?? this.spec.initial?.fillGradient;
     if (gradientSpec) this._state.fillStyle = makeGradientFill(gradientSpec);
     this._drawGeometry = makeDrawGeometry(this.spec, scope, this._state);
+    this._outline = makeOutline(this.spec, scope, this._state);
+    const { trimStart, trimEnd } = this._state;
+    this._state.trimStart = 0;
+    this._state.trimEnd = 1;
     this._drawGeometry(graphics);
     applyState(graphics, this._state);
     const bounds = graphics.getLocalBounds();
+    this._state.trimStart = trimStart;
+    this._state.trimEnd = trimEnd;
     this.intrinsicWidth = bounds.width;
     this.intrinsicHeight = bounds.height;
     if (!ANCHORED_SHAPES.has(this.spec.shape)) {
@@ -1888,14 +2145,37 @@ var ShapeSequence = class extends Sequence {
       }
       this._redraw();
     };
+    this._redraw();
     this.buildFilters();
   }
   _fresh = false;
+  _outline = null;
   _redraw() {
     const graphics = this.target;
+    const s = this._state;
     graphics.clear();
-    this._drawGeometry(graphics);
-    applyState(graphics, this._state);
+    const trimmed = (s.trimStart ?? 0) > 0 || (s.trimEnd ?? 1) < 1;
+    if (!trimmed || !this._outline || !(s.strokeColor !== void 0 && s.strokeWidth > 0)) {
+      this._drawGeometry(graphics);
+      applyState(graphics, s);
+      return;
+    }
+    if (s.fillStyle || s.fillColor !== void 0) {
+      this._drawGeometry(graphics);
+      applyFill(graphics, s);
+      graphics.beginPath();
+    }
+    const parts = trimPolylines(this._outline(), s.trimStart ?? 0, s.trimEnd ?? 1);
+    if (parts.length === 0) return;
+    for (const part of parts) {
+      if (part.closed) {
+        graphics.poly(part.pts, true);
+        continue;
+      }
+      graphics.moveTo(part.pts[0], part.pts[1]);
+      for (let i = 2; i < part.pts.length; i += 2) graphics.lineTo(part.pts[i], part.pts[i + 1]);
+    }
+    applyStroke(graphics, s);
   }
   /**
    * Draw from the tweened `_state` before the culler runs. The culler measures the geometry as last
@@ -1998,11 +2278,17 @@ function resolveLiveValue(key, value, scope) {
   return numOrZero(value, scope);
 }
 function applyState(g, s) {
+  applyFill(g, s);
+  applyStroke(g, s);
+}
+function applyFill(g, s) {
   if (s.fillStyle) {
     g.fill(s.fillStyle);
   } else if (s.fillColor !== void 0) {
     g.fill({ color: s.fillColor, alpha: s.fillAlpha });
   }
+}
+function applyStroke(g, s) {
   if (s.strokeColor !== void 0 && s.strokeWidth > 0) {
     g.stroke({
       color: s.strokeColor,
@@ -2110,6 +2396,41 @@ function makeDrawGeometry(spec, scope, state) {
   return () => {
   };
 }
+function makeOutline(spec, scope, s) {
+  switch (spec.shape) {
+    case "rect":
+      return () => {
+        const w = s.width ?? 0, h = s.height ?? 0;
+        return [rectOutline(0 - (s.anchorX ?? 0.5) * w, 0 - (s.anchorY ?? 0.5) * h, w, h, s.cornerRadius ?? 0)];
+      };
+    case "circle":
+      return () => {
+        const r = s.radius ?? 0;
+        return [ellipseOutline((0.5 - (s.anchorX ?? 0.5)) * 2 * r, (0.5 - (s.anchorY ?? 0.5)) * 2 * r, r, r)];
+      };
+    case "ellipse":
+      return () => {
+        const rx = s.radiusX ?? 0, ry = s.radiusY ?? 0;
+        return [ellipseOutline((0.5 - (s.anchorX ?? 0.5)) * 2 * rx, (0.5 - (s.anchorY ?? 0.5)) * 2 * ry, rx, ry)];
+      };
+    case "line": {
+      const lines = [{ pts: [num(spec.from[0], scope), num(spec.from[1], scope), num(spec.to[0], scope), num(spec.to[1], scope)], closed: false }];
+      return () => lines;
+    }
+    case "polygon": {
+      const pts = [];
+      for (const [x, y] of spec.points) pts.push(num(x, scope), num(y, scope));
+      const lines = pts.length >= 4 ? [{ pts, closed: !spec.open }] : [];
+      return () => lines;
+    }
+    case "path": {
+      let lines = null;
+      return () => lines ??= flattenSvgPath(spec.d);
+    }
+    default:
+      return null;
+  }
+}
 function bindLiveKeyframes(timeline, state, liveKeys, keyframes, parentDuration, scope, offset, colorSpace) {
   for (const kf of keyframes) {
     const at = offset + resolveAt(kf.at, parentDuration);
@@ -2183,7 +2504,7 @@ function numOrZero(v, scope) {
 var _CompositionSequence = null;
 async function getCompositionSequence() {
   if (!_CompositionSequence) {
-    _CompositionSequence = (await import('./Composition-TUCRSMJU.js')).CompositionSequence;
+    _CompositionSequence = (await import('./Composition-DT657FO5.js')).CompositionSequence;
   }
   return _CompositionSequence;
 }
@@ -2220,6 +2541,6 @@ async function buildSequenceTree(specs, parent, root) {
   return out;
 }
 
-export { CameraSequence, DEFAULT_FOV, DEG, NEAR, Sequence, buildScope, buildSequenceTree, cameraBasis, collectPropKeys, describeLayer, evaluateExpr, homeCamera, homeDistance, lintText, lintTiming, projectLayer, registerSequenceType, resolveAt, summarizeWarnings };
-//# sourceMappingURL=chunk-UBPZLGLU.js.map
-//# sourceMappingURL=chunk-UBPZLGLU.js.map
+export { CameraSequence, DEFAULT_FOV, DEG, NEAR, Sequence, buildScope, buildSequenceTree, cameraBasis, collectPropKeys, describeLayer, ensureFilterLibrary, evaluateExpr, homeCamera, homeDistance, lintText, lintTiming, projectLayer, registerSequenceType, resolveAt, summarizeWarnings };
+//# sourceMappingURL=chunk-4O2NYDJG.js.map
+//# sourceMappingURL=chunk-4O2NYDJG.js.map