pixi-effects 0.4.0 → 0.6.0

package/dist/{chunk-ZQX7WIYL.js → chunk-7IJHJXDI.js}

@@ -739,6 +739,11 @@ var Sequence = class {
    * (not a normal child) by PIXI when `target.mask = maskSequence.target`.
    */
   maskSequence = null;
+  /**
+   * Set by the parent composition on a sprite-based (image / video) mask. PIXI hides such a mask with
+   * `renderable = false`; the lifespan toggles must not switch it back on, or the mask is drawn as a picture.
+   */
+  keepHidden = false;
   /**
    * Absolute start time on the global timeline (offset + at), recorded by
    * bindTimeline. Movie._awaitVideoFrames uses it to determine the correct
@@ -783,6 +788,7 @@ var Sequence = class {
     applyKeyframes(timeline, this.target, this.spec.keyframes, this.duration, scope, [], startTime, routers);
     const endTime = startTime + this.duration;
     this.absoluteStart = startTime;
+    if (this.keepHidden) return;
     this.target.renderable = startTime <= 0;
     timeline.set(this.target, { renderable: true }, startTime);
     timeline.set(this.target, { renderable: false }, endTime);
@@ -835,6 +841,7 @@ function lintTiming(spec, parentDuration, warn = defaultWarn) {
   if (at >= parentDuration) {
     warn(`pixi-effects: ${who} starts at ${at}s, after its composition ends (${parentDuration}s), so it is never visible`);
   }
+  if (spec.type === "audio" && spec.sfx !== void 0 && spec.duration === void 0) return;
   const duration = spec.duration ?? parentDuration;
   (spec.keyframes ?? []).forEach((kf, i) => {
     const kat = kf.at ?? 0;
@@ -852,7 +859,12 @@ function summarizeWarnings(messages, shown = 3) {
 }
 function lintText(spec, warn = defaultWarn) {
   if (spec.type !== "text") return;
-  if (collectPropKeys(spec).has("value") && !(spec.text ?? "").includes("{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") && !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').`);
   }
 }
@@ -1046,6 +1058,8 @@ function revertibleSet(timeline, at, read, write, 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);
@@ -1062,8 +1076,9 @@ function buildColorInterp(from, to, space) {
   }
   const fromLCH = oklabToOklch(fromOk);
   const toLCH = oklabToOklch(toOk);
-  if (fromLCH.C < 1e-4) fromLCH.h = toLCH.h;
-  if (toLCH.C < 1e-4) toLCH.h = fromLCH.h;
+  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);
@@ -1074,6 +1089,11 @@ function buildColorInterp(from, to, space) {
     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 };
@@ -1258,6 +1278,7 @@ var ImageSequence = class extends Sequence {
     }
     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);
@@ -1302,19 +1323,31 @@ var STYLE_OPAQUE_KEYS = [
 ];
 function formatValue(v, f) {
   const fixed = v.toFixed(Math.max(0, Math.floor(f?.decimals ?? 0)));
-  if (!f?.grouping) return fixed;
-  const [int, frac] = fixed.split(".");
-  return int.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (frac !== void 0 ? "." + frac : "");
+  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 {
-  /** 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;
@@ -1326,8 +1359,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
     });
@@ -1339,10 +1374,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)) {
@@ -1351,22 +1386,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) {
@@ -1402,11 +1451,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;
@@ -1414,25 +1463,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 = () => {
@@ -1476,28 +1540,64 @@ function pickFill(props) {
 }
 var AudioSequence = class extends Sequence {
   _audioBuffer = null;
+  _synth = null;
+  _source = "";
   async build() {
-    const data = await Assets.get(this.spec.asset);
+    this.target = null;
+    if (this.spec.sfx !== void 0) return this._buildSfx(this.spec);
+    const spec = this.spec;
+    this._source = `asset "${spec.asset}"`;
+    const data = await Assets.get(spec.asset);
     this._audioBuffer = data.audioBuffer;
     if (this.duration === void 0) {
       const rest = Math.max(0, (this.parent?.duration ?? this.root.duration) - this.at);
-      this.duration = this.spec.duration ?? (this.spec.loop ? rest : data.duration) ?? this.root.duration;
+      this.duration = spec.duration ?? (spec.loop ? rest : data.duration) ?? this.root.duration;
     }
-    if (!this.spec.loop && data.duration !== void 0 && this.duration > data.duration + 0.05) {
+    if (!spec.loop && data.duration !== void 0 && this.duration > data.duration + 0.05) {
       console.warn(
-        `pixi-effects: ${describeLayer(this.spec)}: audio asset "${this.spec.asset}" is ${data.duration.toFixed(1)}s but the layer lasts ${this.duration.toFixed(1)}s, so it goes silent after ${data.duration.toFixed(1)}s. Add loop: true, or shorten the layer's duration.`
+        `pixi-effects: ${describeLayer(spec)}: audio asset "${spec.asset}" is ${data.duration.toFixed(1)}s but the layer lasts ${this.duration.toFixed(1)}s, so it goes silent after ${data.duration.toFixed(1)}s. Add loop: true, or shorten the layer's duration.`
       );
     }
-    this.target = null;
+  }
+  async _buildSfx(spec) {
+    const who = describeLayer(spec);
+    const raw = spec;
+    if (raw.asset !== void 0) console.warn(`pixi-effects: ${who}: has both asset and sfx \u2014 the sfx plays; remove one`);
+    if (raw.loop) console.warn(`pixi-effects: ${who}: loop has no effect on an sfx \u2014 to repeat it, add one audio layer per hit (a JS loop)`);
+    const { resolveSfx, renderSfx, sfxKey } = await import('./sfx-S37DDC66.js');
+    const sfx = resolveSfx(spec.sfx, spec.duration, who);
+    if (!sfx) return;
+    this.duration = sfx.length;
+    this._source = `sfx "${sfx.preset ?? "custom"}"`;
+    this._synth = { key: sfxKey(sfx), render: (sr) => renderSfx(sfx, sr) };
+    (spec.keyframes ?? []).forEach((kf, i) => {
+      if ((kf.at ?? 0) >= sfx.length) {
+        console.warn(`pixi-effects: ${who}: keyframes[${i}] starts at ${kf.at}s, after the sound ends (${sfx.length}s), so it never plays`);
+      } else if ((kf.at ?? 0) < 0 && sfx.length + (kf.at ?? 0) < 0) {
+        console.warn(`pixi-effects: ${who}: keyframes[${i}] starts ${-kf.at}s before the END of a ${sfx.length}s sound, which is before the sound begins (a negative \`at\` counts back from the end of the layer). Use a shorter \`at\`, or stretch the sound with \`duration\`.`);
+      }
+    });
   }
   bindTimeline(_timeline) {
   }
   collectAudio(out, baseTime) {
-    if (!this._audioBuffer) return;
-    const initialVolume = this.spec.volume ?? 1;
-    const volumeKeyframes = [];
-    const dur = this.duration;
+    if (!this._audioBuffer && !this._synth) return;
+    const initialVolume = this.spec.volume ?? this.spec.initial?.volume ?? 1;
     const t0 = baseTime + this.at;
+    const dur = this.duration;
+    out.push({
+      ...this._audioBuffer ? { buffer: this._audioBuffer } : { synth: this._synth },
+      layer: describeLayer(this.spec),
+      source: this._source,
+      loop: !this._synth && !!this.spec.loop,
+      start: t0,
+      end: t0 + dur,
+      initialVolume,
+      volumeKeyframes: this._volumePoints(t0, dur, initialVolume)
+    });
+  }
+  _volumePoints(t0, dur, initialVolume) {
+    const volumeKeyframes = [];
     const keyframes = (this.spec.keyframes ?? []).map((raw) => normalizeKeyframe(raw, dur)).filter((kf) => [kf.set, kf.to, kf.from].some((p) => p && "volume" in p)).sort((x, y) => x.at - y.at);
     let current = initialVolume;
     const point = (time, value) => {
@@ -1525,17 +1625,11 @@ var AudioSequence = class extends Sequence {
         point(end, current);
       }
     }
-    out.push({
-      buffer: this._audioBuffer,
-      loop: !!this.spec.loop,
-      start: baseTime + this.at,
-      end: baseTime + this.at + dur,
-      initialVolume,
-      volumeKeyframes
-    });
+    return volumeKeyframes;
   }
   destroy() {
     this._audioBuffer = null;
+    this._synth = null;
   }
 };
 
@@ -1684,6 +1778,8 @@ var VideoSequence = class extends Sequence {
     const initialVolume = this.spec.volume ?? 1;
     out.push({
       buffer: this._audioBuffer,
+      layer: describeLayer(this.spec),
+      source: `video "${this.spec.asset}"`,
       loop: !!this.spec.loop,
       start: baseTime + this.at,
       end: baseTime + this.at + this.duration,
@@ -1764,19 +1860,107 @@ 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"],
-  line: [],
-  polygon: [],
-  path: []
+  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: [...TRIM_KEYS],
+  polygon: [...TRIM_KEYS],
+  path: [...TRIM_KEYS]
 };
-var ANCHORED_SHAPES = /* @__PURE__ */ new Set(["rect", "circle", "ellipse"]);
+var ANCHORED_SHAPES = /* @__PURE__ */ new Set(["rect", "circle", "ellipse", "arc"]);
 var ShapeSequence = class extends Sequence {
   _state = {
     fillColor: void 0,
@@ -1803,12 +1987,30 @@ var ShapeSequence = class extends Sequence {
     for (const k of geomKeys) this._liveKeys.add(k);
     seedGeometry(this._state, this.spec, scope);
     seedStyle(this._state, this.spec.initial ?? {}, scope);
+    seedStrokeStyle(this._state, this.spec, this.spec.initial ?? {}, describeLayer(this.spec));
+    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)) {
@@ -1826,14 +2028,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
@@ -1871,6 +2096,21 @@ function seedGeometry(state, spec, scope) {
     if (v !== void 0) state[k] = num(v, scope);
   }
 }
+var STROKE_CAPS = ["butt", "round", "square"];
+var STROKE_JOINS = ["miter", "round", "bevel"];
+function seedStrokeStyle(state, spec, initial, who) {
+  const top = spec;
+  const ini = initial;
+  const pick = (key, valid) => {
+    const v = top[key] ?? ini[key];
+    if (v === void 0) return void 0;
+    if (valid.includes(String(v))) return String(v);
+    console.warn(`pixi-effects: ${who}: ${key} "${v}" is not one of ${valid.join(", ")}; ignored`);
+    return void 0;
+  };
+  state.strokeCap = pick("strokeCap", STROKE_CAPS);
+  state.strokeJoin = pick("strokeJoin", STROKE_JOINS);
+}
 function seedStyle(state, initial, scope) {
   for (const k of STYLE_KEYS) {
     const v = initial[k];
@@ -1879,8 +2119,8 @@ function seedStyle(state, initial, scope) {
   }
 }
 function stripGradient(props) {
-  if (!props || !("fillGradient" in props)) return props;
-  const { fillGradient: _drop, ...rest } = props;
+  if (!props || !("fillGradient" in props || "strokeCap" in props || "strokeJoin" in props)) return props;
+  const { fillGradient: _drop, strokeCap: _cap, strokeJoin: _join, ...rest } = props;
   return rest;
 }
 function stripLive(props, liveKeys) {
@@ -1921,13 +2161,25 @@ 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, alpha: s.strokeAlpha, width: s.strokeWidth });
+    g.stroke({
+      color: s.strokeColor,
+      alpha: s.strokeAlpha,
+      width: s.strokeWidth,
+      ...s.strokeCap ? { cap: s.strokeCap } : {},
+      ...s.strokeJoin ? { join: s.strokeJoin } : {}
+    });
   }
 }
 function drawRectFromState(g, s) {
@@ -1954,6 +2206,34 @@ function drawEllipseFromState(g, s) {
   const ay = s.anchorY ?? 0.5;
   g.ellipse((0.5 - ax) * 2 * rx, (0.5 - ay) * 2 * ry, rx, ry);
 }
+var DEG2 = Math.PI / 180;
+function drawArcFromState(g, s) {
+  const r = s.radius ?? 0;
+  const ri = Math.max(0, Math.min(s.innerRadius ?? 0, r));
+  const startDeg = s.startAngle ?? 0;
+  let endDeg = s.endAngle ?? 360;
+  if (!(r > 0) || endDeg === startDeg) return;
+  const filled = !!s.fillStyle || s.fillColor !== void 0;
+  if (Math.abs(endDeg - startDeg) >= 360) {
+    if (!filled) {
+      g.circle(0, 0, r);
+      return;
+    }
+    endDeg = startDeg + Math.sign(endDeg - startDeg) * 359.999;
+  }
+  const a0 = startDeg * DEG2, a1 = endDeg * DEG2;
+  const ccw = a1 < a0;
+  if (filled) g.moveTo(r * Math.cos(a0), r * Math.sin(a0));
+  g.arc(0, 0, r, a0, a1, ccw);
+  if (!filled) return;
+  if (ri > 0) {
+    g.lineTo(ri * Math.cos(a1), ri * Math.sin(a1));
+    g.arc(0, 0, ri, a1, a0, !ccw);
+  } else {
+    g.lineTo(0, 0);
+  }
+  g.closePath();
+}
 function makeLineDraw(spec, scope) {
   const fx = num(spec.from[0], scope);
   const fy = num(spec.from[1], scope);
@@ -1982,7 +2262,8 @@ function makePathDraw(spec) {
 var STATE_DRAWERS = {
   rect: drawRectFromState,
   circle: drawCircleFromState,
-  ellipse: drawEllipseFromState
+  ellipse: drawEllipseFromState,
+  arc: drawArcFromState
 };
 function makeDrawGeometry(spec, scope, state) {
   const stateDrawer = STATE_DRAWERS[spec.shape];
@@ -1998,6 +2279,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);
@@ -2071,7 +2387,7 @@ function numOrZero(v, scope) {
 var _CompositionSequence = null;
 async function getCompositionSequence() {
   if (!_CompositionSequence) {
-    _CompositionSequence = (await import('./Composition-RGTRZ2JX.js')).CompositionSequence;
+    _CompositionSequence = (await import('./Composition-7SO5WYHU.js')).CompositionSequence;
   }
   return _CompositionSequence;
 }
@@ -2108,6 +2424,6 @@ async function buildSequenceTree(specs, parent, root) {
   return out;
 }
 
-export { CameraSequence, DEFAULT_FOV, DEG, Sequence, buildScope, buildSequenceTree, cameraBasis, collectPropKeys, describeLayer, evaluateExpr, homeCamera, homeDistance, lintText, lintTiming, projectLayer, registerSequenceType, resolveAt, summarizeWarnings };
-//# sourceMappingURL=chunk-ZQX7WIYL.js.map
-//# sourceMappingURL=chunk-ZQX7WIYL.js.map
+export { CameraSequence, DEFAULT_FOV, DEG, NEAR, Sequence, buildScope, buildSequenceTree, cameraBasis, collectPropKeys, describeLayer, evaluateExpr, homeCamera, homeDistance, lintText, lintTiming, projectLayer, registerSequenceType, resolveAt, summarizeWarnings };
+//# sourceMappingURL=chunk-7IJHJXDI.js.map
+//# sourceMappingURL=chunk-7IJHJXDI.js.map