@real-music-packages/web-core 0.24.1 → 0.26.0

package/dist/scene/index.js

@@ -2,9 +2,11 @@ import {
   intervalBySemitones
 } from "../chunk-N56UTMWA.js";
 import {
+  getScaleDegree,
+  getStability,
   noteNameToIndex,
   pitchClass
-} from "../chunk-25RUSM2X.js";
+} from "../chunk-GORQ5YMR.js";
 import {
   ctaScene,
   drawSafeGuides,
@@ -3811,6 +3813,7 @@ function countdownLayer() {
   let fontPx = DEFAULTS6.fontPx;
   let centerFrac = DEFAULTS6.centerFrac;
   let ring = DEFAULTS6.ring;
+  let ringRadiusProp;
   return {
     key: "countdown",
     init(_ctx, props) {
@@ -3821,6 +3824,7 @@ function countdownLayer() {
       fontPx = props.fontPx ?? DEFAULTS6.fontPx;
       centerFrac = props.centerFrac ?? DEFAULTS6.centerFrac;
       ring = props.ring ?? DEFAULTS6.ring;
+      ringRadiusProp = props.ringRadius;
     },
     draw(ctx, tMs) {
       const elapsed = tMs - startMs;
@@ -3839,7 +3843,7 @@ function countdownLayer() {
       const fade = 1 - Math.max(0, (tickFrac - 0.7) / 0.3) * 0.85;
       c.save();
       if (ring) {
-        const r = fontPx * 0.62;
+        const r = ringRadiusProp ?? fontPx * 0.62;
         c.lineWidth = 10;
         c.lineCap = "round";
         c.strokeStyle = rgba6(col, 0.18 * fade);
@@ -3875,6 +3879,7 @@ var countdownFactory = {
     if (p.fontPx != null && (typeof p.fontPx !== "number" || p.fontPx <= 0)) errs.push("countdown.fontPx must be a positive number");
     if (p.centerFrac != null && (typeof p.centerFrac !== "number" || p.centerFrac < 0 || p.centerFrac > 1)) errs.push("countdown.centerFrac must be in [0,1]");
     if (p.ring != null && typeof p.ring !== "boolean") errs.push("countdown.ring must be a boolean");
+    if (p.ringRadius != null && (typeof p.ringRadius !== "number" || p.ringRadius <= 0)) errs.push("countdown.ringRadius must be a positive number");
     return errs;
   }
 };
@@ -4028,14 +4033,26 @@ function scaleHighlightLayer() {
       const layout = getKeyboardLayout(ctx);
       if (layout) {
         c.save();
-        c.globalAlpha = alpha;
         for (let m = layout.lowMidi; m <= layout.highMidi; m++) {
           if (!inRange(layout, m)) continue;
           const pc = pitchClass(m);
           if (!inScale.has(pc)) continue;
           const r = keyRect(layout, m);
-          c.fillStyle = pc === root ? tc : sc;
-          c.fillRect(r.x, r.y, r.w, r.h);
+          const isTonic = pc === root;
+          const cx = r.x + r.w / 2;
+          const pipR = (r.black ? r.w * 0.5 : r.w * 0.32) * (isTonic ? 1.25 : 1);
+          const cy = r.y + r.h - pipR - (r.black ? 8 : 16);
+          c.globalAlpha = Math.min(1, alpha + 0.4);
+          c.fillStyle = isTonic ? tc : sc;
+          c.beginPath();
+          c.arc(cx, cy, pipR, 0, Math.PI * 2);
+          c.fill();
+          if (isTonic) {
+            c.fillStyle = "#ffffff";
+            c.beginPath();
+            c.arc(cx, cy, pipR * 0.42, 0, Math.PI * 2);
+            c.fill();
+          }
         }
         c.restore();
       }
@@ -4074,6 +4091,485 @@ var scaleHighlightFactory = {
   }
 };
 
+// src/scene/layers/particleBurst.ts
+var DEFAULTS7 = { count: 16, lifeMs: 750, speed: 520, gravity: 900, originYFrac: 0.6, size: 9 };
+function seeded(a, b) {
+  const s = Math.sin(a * 127.1 + b * 311.7) * 43758.5453;
+  return s - Math.floor(s);
+}
+function rgba7(hex, al) {
+  const h = hex.replace("#", "");
+  const n = h.length === 3 ? parseInt(h.split("").map((c) => c + c).join(""), 16) : parseInt(h, 16);
+  return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${al})`;
+}
+function particleBurstLayer() {
+  let sources = [];
+  let count = DEFAULTS7.count;
+  let lifeMs = DEFAULTS7.lifeMs;
+  let speed = DEFAULTS7.speed;
+  let gravity = DEFAULTS7.gravity;
+  let originYFrac = DEFAULTS7.originYFrac;
+  let color;
+  let size = DEFAULTS7.size;
+  return {
+    key: "particle-burst",
+    init(ctx, props) {
+      count = props.count ?? DEFAULTS7.count;
+      lifeMs = props.lifeMs ?? DEFAULTS7.lifeMs;
+      speed = props.speed ?? DEFAULTS7.speed;
+      gravity = props.gravity ?? DEFAULTS7.gravity;
+      originYFrac = props.originYFrac ?? DEFAULTS7.originYFrac;
+      color = props.color;
+      size = props.size ?? DEFAULTS7.size;
+      if (props.onsetsMs) {
+        sources = props.onsetsMs.map((tMs) => ({ tMs, x01: 0.5 }));
+      } else if (ctx.score?.notes?.length) {
+        const notes = ctx.score.notes;
+        let lo = Infinity, hi = -Infinity;
+        for (const nn of notes) {
+          if (nn.pitchMidi < lo) lo = nn.pitchMidi;
+          if (nn.pitchMidi > hi) hi = nn.pitchMidi;
+        }
+        const span = Math.max(1, hi - lo);
+        const byOnset = /* @__PURE__ */ new Map();
+        for (const nn of notes) if (!byOnset.has(nn.onsetMs)) byOnset.set(nn.onsetMs, nn.pitchMidi);
+        sources = distinctOnsets(notes).map((tMs) => ({ tMs, x01: 0.15 + 0.7 * (((byOnset.get(tMs) ?? lo) - lo) / span) }));
+      } else {
+        sources = [];
+      }
+      sources.sort((a, b) => a.tMs - b.tMs);
+    },
+    draw(ctx, tMs) {
+      if (!sources.length) return;
+      const c = ctx.ctx2d;
+      const W = ctx.W, H = ctx.H;
+      const oy = H * originYFrac;
+      const col = color ?? ctx.theme.gold;
+      c.save();
+      c.globalCompositeOperation = "lighter";
+      for (let si = 0; si < sources.length; si++) {
+        const src = sources[si];
+        const age = tMs - src.tMs;
+        if (age < 0) break;
+        if (age >= lifeMs) continue;
+        const ageSec = age / 1e3;
+        const lifeFrac = age / lifeMs;
+        const ox = W * src.x01;
+        for (let i = 0; i < count; i++) {
+          const a = seeded(si * 31 + i, 7);
+          const sp = speed * (0.5 + seeded(si, i * 17));
+          const ang = -Math.PI / 2 + (a - 0.5) * Math.PI * 1.2;
+          const vx = Math.cos(ang) * sp;
+          const vy = Math.sin(ang) * sp;
+          const x = ox + vx * ageSec;
+          const y = oy + vy * ageSec + 0.5 * gravity * ageSec * ageSec;
+          const alpha = (1 - lifeFrac) * 0.9;
+          const r = size * (1 - lifeFrac * 0.6);
+          if (r <= 0) continue;
+          c.fillStyle = rgba7(col, alpha);
+          c.beginPath();
+          c.arc(x, y, r, 0, Math.PI * 2);
+          c.fill();
+        }
+      }
+      c.restore();
+    }
+  };
+}
+var particleBurstFactory = {
+  key: "particle-burst",
+  create: particleBurstLayer,
+  validateProps(props) {
+    if (props == null || typeof props !== "object") return ["particle-burst: props must be an object"];
+    const p = props;
+    const errs = [];
+    if (p.onsetsMs != null && (!Array.isArray(p.onsetsMs) || p.onsetsMs.some((x) => typeof x !== "number"))) errs.push("particle-burst.onsetsMs must be a number[]");
+    for (const k of ["count", "lifeMs", "speed", "gravity", "size"]) {
+      if (p[k] != null && (typeof p[k] !== "number" || p[k] <= 0)) errs.push(`particle-burst.${k} must be a positive number`);
+    }
+    if (p.originYFrac != null && (typeof p.originYFrac !== "number" || p.originYFrac < 0 || p.originYFrac > 1)) errs.push("particle-burst.originYFrac must be in [0,1]");
+    if (p.color != null && typeof p.color !== "string") errs.push("particle-burst.color must be a string");
+    return errs;
+  }
+};
+
+// src/scene/layers/tensionGraph.ts
+function stabilityTension(midi, key) {
+  const deg = getScaleDegree(midi, key);
+  if (deg == null) return 1;
+  const s = getStability(deg);
+  return s === "stable" ? 0.15 : s === "lessStable" ? 0.5 : s === "unstable" ? 0.85 : 0.5;
+}
+function rgba8(hex, a) {
+  const h = hex.replace("#", "");
+  const n = h.length === 3 ? parseInt(h.split("").map((c) => c + c).join(""), 16) : parseInt(h, 16);
+  return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${a})`;
+}
+function tensionGraphLayer() {
+  let series = [];
+  let durationMs = 1;
+  let topProp;
+  let heightProp;
+  let color;
+  let fill = true;
+  let width = 5;
+  let dot = true;
+  return {
+    key: "tension-graph",
+    init(ctx, props) {
+      topProp = props.top;
+      heightProp = props.height;
+      color = props.color;
+      fill = props.fill ?? true;
+      width = props.width ?? 5;
+      dot = props.dot ?? true;
+      if (props.series?.length) {
+        series = props.series.slice().sort((a, b) => a.tMs - b.tMs);
+      } else if (ctx.score?.notes?.length) {
+        const pts = contourPoints(ctx.score.notes);
+        if (props.key) {
+          series = pts.map((p) => ({ tMs: p.tMs, value: stabilityTension(p.pitchMidi, props.key) }));
+        } else {
+          const r = pitchRange(pts);
+          const span = Math.max(1, r.max - r.min);
+          series = pts.map((p) => ({ tMs: p.tMs, value: (p.pitchMidi - r.min) / span }));
+        }
+      } else {
+        series = [];
+      }
+      durationMs = ctx.score?.durationMs ?? (series.length ? series[series.length - 1].tMs : 1);
+    },
+    draw(ctx, tMs) {
+      if (series.length < 2) return;
+      const c = ctx.ctx2d;
+      const sb = ctx.safeBox;
+      const top = topProp ?? sb.top + sb.h * 0.18;
+      const height = heightProp ?? sb.h * 0.3;
+      const bottom = top + height;
+      const col = color ?? ctx.theme.accent;
+      const x = (ms) => sb.left + (sb.right - sb.left) * Math.min(1, Math.max(0, ms / durationMs));
+      const y = (v) => bottom - Math.min(1, Math.max(0, v)) * height;
+      const playX = x(tMs);
+      c.save();
+      c.lineJoin = "round";
+      c.lineCap = "round";
+      c.globalAlpha = 0.2;
+      c.strokeStyle = ctx.theme.sepia;
+      c.lineWidth = width;
+      c.beginPath();
+      series.forEach((p, i) => i === 0 ? c.moveTo(x(p.tMs), y(p.value)) : c.lineTo(x(p.tMs), y(p.value)));
+      c.stroke();
+      const revealed = [];
+      for (let i = 0; i < series.length; i++) {
+        const px = x(series[i].tMs);
+        if (px <= playX) {
+          revealed.push({ x: px, y: y(series[i].value) });
+        } else {
+          if (i > 0) {
+            const a = series[i - 1], b = series[i];
+            const f = (playX - x(a.tMs)) / Math.max(1, x(b.tMs) - x(a.tMs));
+            revealed.push({ x: playX, y: y(a.value + (b.value - a.value) * f) });
+          }
+          break;
+        }
+      }
+      if (revealed.length) {
+        c.globalAlpha = 1;
+        if (fill) {
+          c.fillStyle = rgba8(col, 0.22);
+          c.beginPath();
+          c.moveTo(revealed[0].x, bottom);
+          for (const p of revealed) c.lineTo(p.x, p.y);
+          c.lineTo(revealed[revealed.length - 1].x, bottom);
+          c.closePath();
+          c.fill();
+        }
+        c.strokeStyle = col;
+        c.lineWidth = width;
+        c.beginPath();
+        revealed.forEach((p, i) => i === 0 ? c.moveTo(p.x, p.y) : c.lineTo(p.x, p.y));
+        c.stroke();
+        if (dot) {
+          const last = revealed[revealed.length - 1];
+          c.fillStyle = col;
+          c.beginPath();
+          c.arc(last.x, last.y, width * 2, 0, Math.PI * 2);
+          c.fill();
+        }
+      }
+      c.restore();
+    }
+  };
+}
+var tensionGraphFactory = {
+  key: "tension-graph",
+  create: tensionGraphLayer,
+  validateProps(props) {
+    if (props == null || typeof props !== "object") return ["tension-graph: props must be an object"];
+    const p = props;
+    const errs = [];
+    if (p.series != null) {
+      if (!Array.isArray(p.series)) errs.push("tension-graph.series must be an array of {tMs, value}");
+      else p.series.forEach((raw, i) => {
+        const s = raw;
+        if (typeof s?.tMs !== "number" || typeof s?.value !== "number") errs.push(`tension-graph.series[${i}] must be {tMs:number, value:number}`);
+      });
+    }
+    if (p.key != null && typeof p.key !== "string") errs.push("tension-graph.key must be a string");
+    if (p.top != null && typeof p.top !== "number") errs.push("tension-graph.top must be a number");
+    if (p.height != null && (typeof p.height !== "number" || p.height <= 0)) errs.push("tension-graph.height must be a positive number");
+    if (p.color != null && typeof p.color !== "string") errs.push("tension-graph.color must be a string");
+    if (p.fill != null && typeof p.fill !== "boolean") errs.push("tension-graph.fill must be a boolean");
+    if (p.width != null && (typeof p.width !== "number" || p.width <= 0)) errs.push("tension-graph.width must be a positive number");
+    if (p.dot != null && typeof p.dot !== "boolean") errs.push("tension-graph.dot must be a boolean");
+    return errs;
+  }
+};
+
+// src/scene/layers/texture.ts
+var DEFAULTS8 = { grain: 0.05, grainDensity: 700, vignette: 0.35, letterboxFrac: 0 };
+function lcg(seed) {
+  let s = seed | 0 || 1;
+  return () => {
+    s = s * 1664525 + 1013904223 & 2147483647;
+    return s / 2147483647;
+  };
+}
+function textureLayer() {
+  let grain = DEFAULTS8.grain;
+  let grainDensity = DEFAULTS8.grainDensity;
+  let vignette = DEFAULTS8.vignette;
+  let letterboxFrac = DEFAULTS8.letterboxFrac;
+  return {
+    key: "texture",
+    init(_ctx, props) {
+      grain = props.grain ?? DEFAULTS8.grain;
+      grainDensity = props.grainDensity ?? DEFAULTS8.grainDensity;
+      vignette = props.vignette ?? DEFAULTS8.vignette;
+      letterboxFrac = props.letterboxFrac ?? DEFAULTS8.letterboxFrac;
+    },
+    draw(ctx, tMs) {
+      const c = ctx.ctx2d;
+      const W = ctx.W, H = ctx.H;
+      c.save();
+      if (vignette > 0) {
+        const g = c.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.35, W / 2, H / 2, Math.max(W, H) * 0.72);
+        g.addColorStop(0, "rgba(0,0,0,0)");
+        g.addColorStop(1, `rgba(0,0,0,${vignette})`);
+        c.fillStyle = g;
+        c.fillRect(0, 0, W, H);
+      }
+      if (grain > 0 && grainDensity > 0) {
+        const frame = Math.floor(tMs / 1e3 * (ctx.fps || 30));
+        const rnd = lcg(frame * 2654435761);
+        for (let i = 0; i < grainDensity; i++) {
+          const x = rnd() * W;
+          const y = rnd() * H;
+          const dark = rnd() < 0.5;
+          c.fillStyle = dark ? `rgba(0,0,0,${grain})` : `rgba(255,255,255,${grain})`;
+          c.fillRect(x, y, 2, 2);
+        }
+      }
+      if (letterboxFrac > 0) {
+        const bh = H * letterboxFrac;
+        c.fillStyle = "#000";
+        c.fillRect(0, 0, W, bh);
+        c.fillRect(0, H - bh, W, bh);
+      }
+      c.restore();
+    }
+  };
+}
+var textureFactory = {
+  key: "texture",
+  create: textureLayer,
+  validateProps(props) {
+    if (props == null || typeof props !== "object") return ["texture: props must be an object"];
+    const p = props;
+    const errs = [];
+    if (p.grain != null && (typeof p.grain !== "number" || p.grain < 0 || p.grain > 1)) errs.push("texture.grain must be in [0,1]");
+    if (p.grainDensity != null && (typeof p.grainDensity !== "number" || p.grainDensity < 0)) errs.push("texture.grainDensity must be a number >= 0");
+    if (p.vignette != null && (typeof p.vignette !== "number" || p.vignette < 0 || p.vignette > 1)) errs.push("texture.vignette must be in [0,1]");
+    if (p.letterboxFrac != null && (typeof p.letterboxFrac !== "number" || p.letterboxFrac < 0 || p.letterboxFrac > 0.45)) errs.push("texture.letterboxFrac must be in [0,0.45]");
+    return errs;
+  }
+};
+
+// src/scene/layers/statCounter.ts
+var DEFAULTS9 = { startMs: 0, durationMs: 1200, fontPx: 220, centerFrac: 0.46, group: true };
+function easeOut2(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function clamp015(x) {
+  return x < 0 ? 0 : x > 1 ? 1 : x;
+}
+function statCounterLayer() {
+  let value = 0;
+  let startMs = DEFAULTS9.startMs;
+  let durationMs = DEFAULTS9.durationMs;
+  let prefix = "";
+  let suffix = "";
+  let label = "";
+  let fontPx = DEFAULTS9.fontPx;
+  let centerFrac = DEFAULTS9.centerFrac;
+  let color;
+  let group = DEFAULTS9.group;
+  return {
+    key: "stat-counter",
+    init(_ctx, props) {
+      value = props.value ?? 0;
+      startMs = props.startMs ?? DEFAULTS9.startMs;
+      durationMs = props.durationMs ?? DEFAULTS9.durationMs;
+      prefix = props.prefix ?? "";
+      suffix = props.suffix ?? "";
+      label = props.label ?? "";
+      fontPx = props.fontPx ?? DEFAULTS9.fontPx;
+      centerFrac = props.centerFrac ?? DEFAULTS9.centerFrac;
+      color = props.color;
+      group = props.group ?? DEFAULTS9.group;
+    },
+    draw(ctx, tMs) {
+      const c = ctx.ctx2d;
+      const p = clamp015((tMs - startMs) / Math.max(1, durationMs));
+      const shown = Math.round(easeOut2(p) * value);
+      const numStr = group ? shown.toLocaleString("en-US") : String(shown);
+      const cx = ctx.W / 2;
+      const cy = ctx.H * centerFrac;
+      const col = color ?? ctx.theme.accent;
+      c.save();
+      c.textAlign = "center";
+      c.textBaseline = "middle";
+      c.fillStyle = col;
+      c.font = `800 ${fontPx}px ${ctx.theme.fontDisplay}`;
+      c.fillText(`${prefix}${numStr}${suffix}`, cx, cy);
+      if (label) {
+        c.fillStyle = ctx.theme.ink;
+        c.font = `600 ${Math.round(fontPx * 0.26)}px ${ctx.theme.fontDisplay}`;
+        c.fillText(label, cx, cy + fontPx * 0.62);
+      }
+      c.restore();
+    }
+  };
+}
+var statCounterFactory = {
+  key: "stat-counter",
+  create: statCounterLayer,
+  validateProps(props) {
+    if (props == null || typeof props !== "object") return ["stat-counter: props must be an object"];
+    const p = props;
+    const errs = [];
+    if (typeof p.value !== "number") errs.push("stat-counter.value must be a number");
+    if (p.startMs != null && typeof p.startMs !== "number") errs.push("stat-counter.startMs must be a number");
+    if (p.durationMs != null && (typeof p.durationMs !== "number" || p.durationMs <= 0)) errs.push("stat-counter.durationMs must be a positive number");
+    for (const k of ["prefix", "suffix", "label"]) if (p[k] != null && typeof p[k] !== "string") errs.push(`stat-counter.${k} must be a string`);
+    if (p.fontPx != null && (typeof p.fontPx !== "number" || p.fontPx <= 0)) errs.push("stat-counter.fontPx must be a positive number");
+    if (p.centerFrac != null && (typeof p.centerFrac !== "number" || p.centerFrac < 0 || p.centerFrac > 1)) errs.push("stat-counter.centerFrac must be in [0,1]");
+    if (p.color != null && typeof p.color !== "string") errs.push("stat-counter.color must be a string");
+    if (p.group != null && typeof p.group !== "boolean") errs.push("stat-counter.group must be a boolean");
+    return errs;
+  }
+};
+
+// src/scene/layers/endCard.ts
+var DEFAULTS10 = { text: "Follow for daily", startMs: 0, inMs: 400, centerFrac: 0.5, fontPx: 72, arrow: true, arrowDir: "up" };
+function clamp016(x) {
+  return x < 0 ? 0 : x > 1 ? 1 : x;
+}
+function easeOut3(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function endCardLayer() {
+  let text = DEFAULTS10.text;
+  let handle = "";
+  let startMs = DEFAULTS10.startMs;
+  let inMs = DEFAULTS10.inMs;
+  let color;
+  let centerFrac = DEFAULTS10.centerFrac;
+  let fontPx = DEFAULTS10.fontPx;
+  let arrow = DEFAULTS10.arrow;
+  let arrowDir = DEFAULTS10.arrowDir;
+  return {
+    key: "end-card",
+    init(_ctx, props) {
+      text = props.text ?? DEFAULTS10.text;
+      handle = props.handle ?? "";
+      startMs = props.startMs ?? DEFAULTS10.startMs;
+      inMs = props.inMs ?? DEFAULTS10.inMs;
+      color = props.color;
+      centerFrac = props.centerFrac ?? DEFAULTS10.centerFrac;
+      fontPx = props.fontPx ?? DEFAULTS10.fontPx;
+      arrow = props.arrow ?? DEFAULTS10.arrow;
+      arrowDir = props.arrowDir ?? DEFAULTS10.arrowDir;
+    },
+    draw(ctx, tMs) {
+      if (tMs < startMs) return;
+      const c = ctx.ctx2d;
+      const cx = ctx.W / 2;
+      const cy = ctx.H * centerFrac;
+      const col = color ?? ctx.theme.accent;
+      const p = clamp016((tMs - startMs) / Math.max(1, inMs));
+      const scale = 0.7 + 0.3 * easeOut3(p);
+      const dir = arrowDir === "down" ? 1 : -1;
+      const bounce = Math.sin(tMs / 260) * 14;
+      c.save();
+      c.globalAlpha = p;
+      c.translate(cx, cy);
+      c.scale(scale, scale);
+      c.textAlign = "center";
+      c.textBaseline = "middle";
+      c.fillStyle = col;
+      c.font = `800 ${fontPx}px ${ctx.theme.fontDisplay}`;
+      c.fillText(text, 0, 0);
+      if (handle) {
+        c.fillStyle = ctx.theme.ink;
+        c.font = `600 ${Math.round(fontPx * 0.5)}px ${ctx.theme.fontDisplay}`;
+        c.fillText(handle, 0, fontPx * 0.9);
+      }
+      c.restore();
+      if (arrow) {
+        const ax = cx;
+        const ay = (arrowDir === "down" ? cy + fontPx * 1.6 : cy - fontPx * 1.6) + bounce * dir;
+        const s = fontPx * 0.4;
+        c.save();
+        c.globalAlpha = p;
+        c.strokeStyle = col;
+        c.lineWidth = 10;
+        c.lineCap = "round";
+        c.lineJoin = "round";
+        c.beginPath();
+        if (arrowDir === "down") {
+          c.moveTo(ax - s, ay - s * 0.6);
+          c.lineTo(ax, ay + s * 0.6);
+          c.lineTo(ax + s, ay - s * 0.6);
+        } else {
+          c.moveTo(ax - s, ay + s * 0.6);
+          c.lineTo(ax, ay - s * 0.6);
+          c.lineTo(ax + s, ay + s * 0.6);
+        }
+        c.stroke();
+        c.restore();
+      }
+    }
+  };
+}
+var endCardFactory = {
+  key: "end-card",
+  create: endCardLayer,
+  validateProps(props) {
+    if (props == null || typeof props !== "object") return ["end-card: props must be an object"];
+    const p = props;
+    const errs = [];
+    for (const k of ["text", "handle", "color"]) if (p[k] != null && typeof p[k] !== "string") errs.push(`end-card.${k} must be a string`);
+    if (p.startMs != null && typeof p.startMs !== "number") errs.push("end-card.startMs must be a number");
+    if (p.inMs != null && (typeof p.inMs !== "number" || p.inMs <= 0)) errs.push("end-card.inMs must be a positive number");
+    if (p.centerFrac != null && (typeof p.centerFrac !== "number" || p.centerFrac < 0 || p.centerFrac > 1)) errs.push("end-card.centerFrac must be in [0,1]");
+    if (p.fontPx != null && (typeof p.fontPx !== "number" || p.fontPx <= 0)) errs.push("end-card.fontPx must be a positive number");
+    if (p.arrow != null && typeof p.arrow !== "boolean") errs.push("end-card.arrow must be a boolean");
+    if (p.arrowDir != null && p.arrowDir !== "up" && p.arrowDir !== "down") errs.push('end-card.arrowDir must be "up" | "down"');
+    return errs;
+  }
+};
+
 // src/scene/registry.ts
 var REGISTRY = /* @__PURE__ */ new Map();
 function registerLayer(factory) {
@@ -4116,6 +4612,11 @@ registerLayer(kineticTextFactory);
 registerLayer(countdownFactory);
 registerLayer(waveformFactory);
 registerLayer(scaleHighlightFactory);
+registerLayer(particleBurstFactory);
+registerLayer(tensionGraphFactory);
+registerLayer(textureFactory);
+registerLayer(statCounterFactory);
+registerLayer(endCardFactory);
 
 // src/scene/audioLayers.ts
 function countInSchedule(opts) {
@@ -4274,7 +4775,11 @@ var SCREEN_PINNED_KEYS = /* @__PURE__ */ new Set([
   "progress-ring",
   "karaoke-caption",
   "kinetic-text",
-  "countdown"
+  "countdown",
+  "particle-burst",
+  "texture",
+  "stat-counter",
+  "end-card"
 ]);
 function defaultBufferFactory() {
   const g = globalThis;
@@ -4912,6 +5417,7 @@ export {
   easeIn,
   easeInOut,
   easeOut,
+  endCardFactory,
   fallingKeyboardDemoScore,
   fallingKeyboardDemoSpec,
   fallingNotesFactory,
@@ -4963,6 +5469,7 @@ export {
   noteSetXRange,
   parseKey,
   parseTimeSig,
+  particleBurstFactory,
   pcToSlot,
   pitchAt,
   pitchContourFactory,
@@ -5003,7 +5510,10 @@ export {
   staffAnchor,
   staffKeyboardRayFactory,
   staffRayDemoSpec,
+  statCounterFactory,
   systemBox,
+  tensionGraphFactory,
+  textureFactory,
   transitionProgress,
   validateChordTrack,
   validateQuiz,