@clipkit/runtime 1.0.0

package/dist/compositor/element-renderers/particles.js

@@ -0,0 +1,212 @@
+// Particles renderer — Clipkit extension.
+//
+// Pure-function-of-time simulation: every particle's position, rotation,
+// size, and color is deterministically derived from (element id, particle
+// index, age). No state carried frame-to-frame, so seeking backward and
+// rendering arbitrary frames works without resimulation.
+//
+// Each frame:
+//   1. Enumerate which particle indices are currently alive.
+//   2. For each, run simulateParticle(n, age) → {x, y, rotation, size, color, alpha}.
+//   3. Emit one backend.drawShape per particle.
+//
+// Active-window enumeration is O(maxAlive) per frame regardless of total
+// emission count — for continuous mode the alive window slides forward in
+// time, so we only iterate ceil(lifetime × rate) indices.
+import { parseColor } from '../color.js';
+import { mat4ApplyToPoint, mat4Multiply, mat4PlaneAt, mat4Rotation, quadWorldTransform } from '../mat4.js';
+import { resolveLength } from '../unit.js';
+import { applyAnimation, resolve3D } from '../resolve.js';
+import { applyEasing } from '../../animation/easings.js';
+export function renderParticlesElement(element, ctx) {
+    const { canvas, backend } = ctx;
+    const elementStart = ctx.timeOffset + numberOr(element.time, 0);
+    const localTime = ctx.time - elementStart;
+    if (localTime < 0)
+        return;
+    // Emitter position (animatable like any other element).
+    const emitterX = applyAnimation(element, 'x', resolveLength(element.x, canvas.width, canvas), ctx);
+    const emitterY = applyAnimation(element, 'y', resolveLength(element.y, canvas.height, canvas), ctx);
+    // Per-particle depth (CKP/1.0, §5.7.3): vz along the emitter plane's
+    // normal. Authoring either field puts the element on the matrix path
+    // (like element `z`, depth is invisible without perspective).
+    const zVelocity = numberOr(element.z_velocity, 0);
+    const zSpread = numberOr(element.z_spread, 0);
+    const hasZDynamics = zVelocity !== 0 || zSpread !== 0;
+    // CKP/1.0 3D (§4.4): the whole particle field tilts as one plane
+    // anchored at the emitter.
+    const t3d = resolve3D(element, ctx);
+    const planeChain = t3d !== null || !ctx.modelMatrix.aff || hasZDynamics
+        ? mat4Multiply(ctx.modelMatrix, mat4PlaneAt(emitterX, emitterY, t3d?.z ?? 0, 0, t3d?.yRot ?? 0, t3d?.xRot ?? 0))
+        : null;
+    // Config with defaults.
+    const rate = Math.max(1, numberOr(element.rate, 60));
+    const lifetime = Math.max(0.01, numberOr(element.lifetime, 1.5));
+    const velocity = numberOr(element.velocity, 300);
+    const spread = numberOr(element.spread, 360);
+    const direction = numberOr(element.direction, -90);
+    const gravity = numberOr(element.gravity, 600);
+    const size = Math.max(1, numberOr(element.size, 12));
+    const sizeVariation = clamp01(numberOr(element.size_variation, 0.4));
+    const rotSpeed = numberOr(element.rotation_speed, 360);
+    const burst = element.burst === true;
+    const burstCount = Math.max(1, Math.floor(numberOr(element.burst_count, 80)));
+    const fadeAt = clamp01(numberOr(element.fade_at, 0.7));
+    const isCircle = element.particle_shape === 'circle';
+    // Convergence mode setup.
+    const targetPoints = Array.isArray(element.target_points) ? element.target_points : null;
+    const convergenceEasing = element.convergence_easing ?? 'ease-out-quart';
+    const scatterRadius = numberOr(element.scatter_radius, Math.max(canvas.width, canvas.height));
+    const colors = normalizeColors(element.color);
+    const elementOpacity = clamp01(applyAnimation(element, 'opacity', numberOr(element.opacity, 1), ctx) * ctx.opacityFactor);
+    if (elementOpacity <= 0)
+        return;
+    // Stable seed per element so the particle field is deterministic across frames.
+    const seedBase = hashString(typeof element.id === 'string' ? element.id : 'particles');
+    // Enumerate active particle indices.
+    // Burst mode: all particles share spawnTime=0, age=localTime.
+    // Continuous mode: particle n spawns at n/rate; alive when 0 ≤ age < lifetime.
+    let firstN;
+    let lastN;
+    if (burst) {
+        if (localTime >= lifetime)
+            return;
+        firstN = 0;
+        lastN = burstCount - 1;
+    }
+    else {
+        firstN = Math.max(0, Math.ceil((localTime - lifetime) * rate));
+        lastN = Math.floor(localTime * rate);
+    }
+    for (let n = firstN; n <= lastN; n++) {
+        const spawnTime = burst ? 0 : n / rate;
+        const age = localTime - spawnTime;
+        if (age < 0 || age >= lifetime)
+            continue;
+        // 6 independent random values per particle.
+        const rng = mulberry32(seedBase + n * 0x9e3779b9);
+        const r1 = rng(); // angle within spread / scatter x
+        const r2 = rng(); // speed jitter / scatter y
+        const r3 = rng(); // rotation direction
+        const r4 = rng(); // size
+        const r5 = rng(); // color index
+        const r6 = rng(); // z-velocity spread (§5.7.3)
+        let px;
+        let py;
+        if (targetPoints && targetPoints.length > 0) {
+            // ── Convergence mode ────────────────────────────────────────────
+            // Random scattered start position (in a disk of radius scatterRadius
+            // centered on the emitter), animating to its assigned target point.
+            const startAngle = r1 * Math.PI * 2;
+            const startDist = scatterRadius * (0.5 + 0.5 * r2); // 50%..100% radius
+            const startX = emitterX + Math.cos(startAngle) * startDist;
+            const startY = emitterY + Math.sin(startAngle) * startDist;
+            const target = targetPoints[n % targetPoints.length];
+            const progress = clamp01(age / lifetime);
+            const eased = applyEasing(convergenceEasing, progress);
+            px = startX + (target[0] - startX) * eased;
+            py = startY + (target[1] - startY) * eased;
+        }
+        else {
+            // ── Ballistic emission (default) ────────────────────────────────
+            const angleDeg = direction + (r1 - 0.5) * spread;
+            const angleRad = (angleDeg * Math.PI) / 180;
+            const speed = velocity * (0.7 + 0.6 * r2); // 70%..130%
+            const vx = Math.cos(angleRad) * speed;
+            const vy = Math.sin(angleRad) * speed;
+            px = emitterX + vx * age;
+            py = emitterY + vy * age + 0.5 * gravity * age * age;
+        }
+        // Depth along the plane normal: vz = z_velocity + (r6 − 0.5) ×
+        // z_spread, pz = vz · age. No z gravity (gravity stays in-plane y).
+        // Applies in convergence mode too (orthogonal, no special case).
+        const pz = hasZDynamics ? (zVelocity + (r6 - 0.5) * zSpread) * age : 0;
+        // Rotation accumulates linearly; sign randomized per particle.
+        const rot = rotSpeed * age * (r3 < 0.5 ? -1 : 1);
+        // Size — anchored at `size`, scaled down by up to sizeVariation.
+        const partSize = size * (1 - sizeVariation + sizeVariation * r4);
+        // Color — pick from the palette.
+        const color = colors[Math.floor(r5 * colors.length) % colors.length];
+        // Fade — full alpha until fade_at, then linear ramp to 0.
+        const lifeProg = age / lifetime;
+        let alpha = elementOpacity;
+        if (lifeProg > fadeAt) {
+            alpha *= (1 - lifeProg) / (1 - fadeAt);
+        }
+        if (alpha <= 0)
+            continue;
+        // Apply group transform stack: each particle's center is translated
+        // through the model matrix, rotation is summed, opacity multiplied.
+        // Under 3D the particle field lives in the emitter's plane: local
+        // coords stay local and each quad projects through planeChain.
+        const [worldX, worldY] = planeChain ? [px, py] : mat4ApplyToPoint(ctx.modelMatrix, px, py);
+        const totalRot = planeChain ? rot : rot + mat4Rotation(ctx.modelMatrix);
+        // Premultiplied RGBA. Group's opacity factor was already folded
+        // into elementOpacity at the top of this loop's caller.
+        const c = parseColor(color);
+        const ca = c[3] * alpha;
+        const premul = [
+            c[0] * ca,
+            c[1] * ca,
+            c[2] * ca,
+            ca,
+        ];
+        backend.drawShape({
+            cx: worldX,
+            cy: worldY,
+            width: partSize,
+            height: partSize,
+            rotation: totalRot,
+            transform: planeChain
+                ? quadWorldTransform(planeChain, px, py, partSize, partSize, rot, 0, 0, pz !== 0 ? { xRot: 0, yRot: 0, z: pz } : null)
+                : undefined,
+            color: premul,
+            shape: isCircle ? 'ellipse' : 'rectangle',
+            cornerRadius: isCircle ? 0 : 0,
+            blend: element.blend_mode,
+        });
+    }
+}
+// ── helpers ────────────────────────────────────────────────────────────────
+function numberOr(value, fallback) {
+    if (typeof value === 'number' && Number.isFinite(value))
+        return value;
+    if (typeof value === 'string') {
+        const n = parseFloat(value);
+        if (Number.isFinite(n))
+            return n;
+    }
+    return fallback;
+}
+function clamp01(n) {
+    return n < 0 ? 0 : n > 1 ? 1 : n;
+}
+function normalizeColors(c) {
+    if (!c)
+        return ['#ffffff'];
+    if (Array.isArray(c))
+        return c.length > 0 ? c : ['#ffffff'];
+    return [c];
+}
+// FNV-1a string hash — fast, decent dispersion, no allocations.
+function hashString(s) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < s.length; i++) {
+        h ^= s.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    return h >>> 0;
+}
+// Mulberry32 — small, fast, good-enough PRNG. Returns a thunk that yields
+// successive [0, 1) values from a single seed.
+function mulberry32(seed) {
+    let a = seed >>> 0;
+    return () => {
+        a = (a + 0x6d2b79f5) | 0;
+        let t = a;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+//# sourceMappingURL=particles.js.map

package/dist/compositor/element-renderers/particles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"particles.js","sourceRoot":"","sources":["../../../src/compositor/element-renderers/particles.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,EAAE;AACF,yEAAyE;AACzE,0EAA0E;AAC1E,wEAAwE;AACxE,yDAAyD;AACzD,EAAE;AACF,cAAc;AACd,6DAA6D;AAC7D,sFAAsF;AACtF,gDAAgD;AAChD,EAAE;AACF,yEAAyE;AACzE,0EAA0E;AAC1E,0DAA0D;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAC3G,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAG,SAAS,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGzD,MAAM,UAAU,sBAAsB,CAAC,OAAyB,EAAE,GAAkB;IAClF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC;IAEhC,MAAM,YAAY,GAAG,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChE,MAAM,SAAS,GAAG,GAAG,CAAC,IAAI,GAAG,YAAY,CAAC;IAC1C,IAAI,SAAS,GAAG,CAAC;QAAE,OAAO;IAE1B,wDAAwD;IACxD,MAAM,QAAQ,GAAG,cAAc,CAAC,OAAO,EAAE,GAAG,EAAE,aAAa,CAAC,OAAO,CAAC,CAAU,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;IAC5G,MAAM,QAAQ,GAAG,cAAc,CAAC,OAAO,EAAE,GAAG,EAAE,aAAa,CAAC,OAAO,CAAC,CAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;IAE7G,qEAAqE;IACrE,qEAAqE;IACrE,8DAA8D;IAC9D,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC9C,MAAM,YAAY,GAAG,SAAS,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,CAAC;IAEtD,iEAAiE;IACjE,2BAA2B;IAC3B,MAAM,GAAG,GAAG,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACpC,MAAM,UAAU,GAAG,GAAG,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,IAAI,YAAY;QACrE,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC;QAChH,CAAC,CAAC,IAAI,CAAC;IAET,wBAAwB;IACxB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IACjE,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAC/C,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;IACrD,MAAM,aAAa,GAAG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;IACvD,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC;IACrC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9E,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,KAAK,QAAQ,CAAC;IAErD,0BAA0B;IAC1B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC;IACzF,MAAM,iBAAiB,GAAmB,OAAO,CAAC,kBAAkB,IAAI,gBAAgB,CAAC;IACzF,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;IAE9F,MAAM,MAAM,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC,CAAC;IAC1H,IAAI,cAAc,IAAI,CAAC;QAAE,OAAO;IAEhC,gFAAgF;IAChF,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAEvF,qCAAqC;IACrC,8DAA8D;IAC9D,+EAA+E;IAC/E,IAAI,MAAc,CAAC;IACnB,IAAI,KAAa,CAAC;IAClB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,SAAS,IAAI,QAAQ;YAAE,OAAO;QAClC,MAAM,GAAG,CAAC,CAAC;QACX,KAAK,GAAG,UAAU,GAAG,CAAC,CAAC;IACzB,CAAC;SAAM,CAAC;QACN,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;QAC/D,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IACvC,CAAC;IAED,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;QACvC,MAAM,GAAG,GAAG,SAAS,GAAG,SAAS,CAAC;QAClC,IAAI,GAAG,GAAG,CAAC,IAAI,GAAG,IAAI,QAAQ;YAAE,SAAS;QAEzC,4CAA4C;QAC5C,MAAM,GAAG,GAAG,UAAU,CAAC,QAAQ,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC;QAClD,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC,kCAAkC;QACpD,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC,2BAA2B;QAC7C,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC,qBAAqB;QACvC,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC,OAAO;QACzB,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC,cAAc;QAChC,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC,6BAA6B;QAE/C,IAAI,EAAU,CAAC;QACf,IAAI,EAAU,CAAC;QAEf,IAAI,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5C,mEAAmE;YACnE,qEAAqE;YACrE,oEAAoE;YACpE,MAAM,UAAU,GAAG,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;YACpC,MAAM,SAAS,GAAG,aAAa,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC,mBAAmB;YACvE,MAAM,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;YAC3D,MAAM,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;YAC3D,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,CAAE,CAAC;YACtD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC;YACzC,MAAM,KAAK,GAAG,WAAW,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;YACvD,EAAE,GAAG,MAAM,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC;YAC3C,EAAE,GAAG,MAAM,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,mEAAmE;YACnE,MAAM,QAAQ,GAAG,SAAS,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC;YACjD,MAAM,QAAQ,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;YAC5C,MAAM,KAAK,GAAG,QAAQ,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC,YAAY;YACvD,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;YACtC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;YACtC,EAAE,GAAG,QAAQ,GAAG,EAAE,GAAG,GAAG,CAAC;YACzB,EAAE,GAAG,QAAQ,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;QACvD,CAAC;QAED,+DAA+D;QAC/D,oEAAoE;QACpE,iEAAiE;QACjE,MAAM,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAEvE,+DAA+D;QAC/D,MAAM,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEjD,iEAAiE;QACjE,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,aAAa,GAAG,aAAa,GAAG,EAAE,CAAC,CAAC;QAEjE,iCAAiC;QACjC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,CAAE,CAAC;QAEtE,0DAA0D;QAC1D,MAAM,QAAQ,GAAG,GAAG,GAAG,QAAQ,CAAC;QAChC,IAAI,KAAK,GAAG,cAAc,CAAC;QAC3B,IAAI,QAAQ,GAAG,MAAM,EAAE,CAAC;YACtB,KAAK,IAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;QACzC,CAAC;QACD,IAAI,KAAK,IAAI,CAAC;YAAE,SAAS;QAEzB,oEAAoE;QACpE,oEAAoE;QACpE,kEAAkE;QAClE,+DAA+D;QAC/D,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QAC3F,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAExE,gEAAgE;QAChE,wDAAwD;QACxD,MAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAC5B,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;QACxB,MAAM,MAAM,GAA8C;YACxD,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;YACT,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;YACT,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE;YACT,EAAE;SACH,CAAC;QAEF,OAAO,CAAC,SAAS,CAAC;YAChB,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,UAAU;gBACnB,CAAC,CAAC,kBAAkB,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAClE,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;gBAClD,CAAC,CAAC,SAAS;YACb,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;YACzC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9B,KAAK,EAAE,OAAO,CAAC,UAAU;SAC1B,CAAC,CAAC;IACL,CAAC;AACH,CAAC;AAED,8EAA8E;AAE9E,SAAS,QAAQ,CAAC,KAAc,EAAE,QAAgB;IAChD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IACtE,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,MAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;YAAE,OAAO,CAAC,CAAC;IACnC,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,OAAO,CAAC,CAAS;IACxB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACnC,CAAC;AAED,SAAS,eAAe,CAAC,CAA4B;IACnD,IAAI,CAAC,CAAC;QAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3B,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAAE,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC5D,OAAO,CAAC,CAAC,CAAC,CAAC;AACb,CAAC;AAED,gEAAgE;AAChE,SAAS,UAAU,CAAC,CAAS;IAC3B,IAAI,CAAC,GAAG,UAAU,CAAC;IACnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAClC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IAC/B,CAAC;IACD,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC;AAED,0EAA0E;AAC1E,+CAA+C;AAC/C,SAAS,UAAU,CAAC,IAAY;IAC9B,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC;IACnB,OAAO,GAAG,EAAE;QACV,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QACzB,IAAI,CAAC,GAAG,CAAC,CAAC;QACV,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QACrC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;QAC1C,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CAAC;IAC/C,CAAC,CAAC;AACJ,CAAC"}

package/dist/compositor/element-renderers/shape.d.ts

@@ -0,0 +1,4 @@
+import type { ShapeElement } from '@clipkit/protocol';
+import type { RenderContext } from '../render-context.js';
+export declare function renderShapeElement(element: ShapeElement, ctx: RenderContext): void;
+//# sourceMappingURL=shape.d.ts.map

package/dist/compositor/element-renderers/shape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../../src/compositor/element-renderers/shape.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkC,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAStF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,aAAa,GAAG,IAAI,CAuJlF"}

package/dist/compositor/element-renderers/shape.js

@@ -0,0 +1,171 @@
+import { parseColor, parseColorPremultiplied } from '../color.js';
+import { applyModelTransform, quadWorldTransform } from '../mat4.js';
+import { resolveAnchor, resolveLength } from '../unit.js';
+import { anchorToCenter } from '../transform.js';
+import { applyAnimation, applyAspectRatio, resolve3D, resolveColorProperty, resolveScalePair, resolveSkewPair } from '../resolve.js';
+import { resolveMaterial } from '../lighting.js';
+import { buildLitParams } from './lit.js';
+export function renderShapeElement(element, ctx) {
+    const { canvas, backend } = ctx;
+    const x = applyAnimation(element, 'x', resolveLength(element.x, canvas.width, canvas), ctx);
+    const y = applyAnimation(element, 'y', resolveLength(element.y, canvas.height, canvas), ctx);
+    const { sx, sy } = resolveScalePair(element, ctx);
+    const box = applyAspectRatio(element, applyAnimation(element, 'width', resolveLength(element.width, canvas.width, canvas, 100), ctx), applyAnimation(element, 'height', resolveLength(element.height, canvas.height, canvas, 100), ctx));
+    const width = sx * box.width;
+    const height = sy * box.height;
+    const rotation = applyAnimation(element, 'rotation', numberOr((element.rotation ?? element.z_rotation), 0), ctx);
+    const { skewX, skewY } = resolveSkewPair(element, ctx);
+    const opacity01 = applyAnimation(element, 'opacity', numberOr(element.opacity, 1), ctx);
+    const xAnchor = resolveAnchor(element.x_anchor);
+    const yAnchor = resolveAnchor(element.y_anchor);
+    const { cx, cy } = anchorToCenter(x, y, width, height, xAnchor, yAnchor);
+    // CKP/1.0 3D (§4.4): own 3D fields, or an un-flattened 3D ancestor,
+    // route through the full-matrix hand-off. Everything else stays on
+    // the byte-stable 2D decomposition.
+    const t3d = resolve3D(element, ctx);
+    const matrixPath = t3d !== null || !ctx.modelMatrix.aff;
+    // Apply the group transform stack (no-op when not nested in a group).
+    // Under the matrix path only opacity01 is meaningful (it is matrix-
+    // independent); the spatial fields are superseded by `transform`.
+    const w = applyModelTransform(ctx.modelMatrix, ctx.opacityFactor, cx, cy, rotation, opacity01, width, height);
+    const transform = matrixPath
+        ? quadWorldTransform(ctx.modelMatrix, cx, cy, width, height, rotation, skewX, skewY, t3d)
+        : undefined;
+    // Color: parse hex → straight RGBA, multiply alpha by opacity, premultiply.
+    // (parseColorPremultiplied premultiplies by the parsed alpha — we apply
+    // element-level opacity by multiplying the alpha channel before that.)
+    // fill_color is animatable via color-valued keyframe_animations.
+    const fillColor = resolveColorProperty(element, 'fill_color', typeof element.fill_color === 'string' ? element.fill_color : undefined, ctx);
+    const straight = parseColorPremultipliedWithOpacity(fillColor, w.opacity01);
+    // Border radius is in PIXELS — the backend now does corner SDF in pixel
+    // space (so corners stay circular on non-square rects) and clamps to a
+    // safe maximum internally. Animatable via keyframe_animations (no keyframes
+    // ⇒ applyAnimation returns the static value, so static shapes are unchanged).
+    const cornerRadius = applyAnimation(element, 'border_radius', numberOr(element.border_radius, 0), ctx);
+    // Primitive kind: rectangle (default) or ellipse. Arbitrary geometry takes
+    // the `paths` form and never reaches this SDF renderer.
+    const shapeName = (typeof element.shape === 'string' && element.shape) || 'rectangle';
+    const isEllipse = shapeName.toLowerCase() === 'ellipse';
+    // Parse gradient if present. Hex stops → premultiplied RGBA; angle deg → rad.
+    const gradient = element.gradient
+        ? compileGradient(element.gradient, w.opacity01)
+        : undefined;
+    // Stroke (border) — the SDF in SHAPE_FS paints the stroke band
+    // directly, so semi-transparent fills no longer let the stroke color
+    // bleed through the interior. We just pass through to the backend.
+    const strokeColorStr = resolveColorProperty(element, 'stroke_color', typeof element.stroke_color === 'string' ? element.stroke_color : undefined, ctx) ?? null;
+    const strokeWidth = applyAnimation(element, 'stroke_width', numberOr(element.stroke_width, 0), ctx);
+    const strokePremul = strokeColorStr && strokeWidth > 0
+        ? parseColorPremultipliedWithOpacity(strokeColorStr, w.opacity01)
+        : undefined;
+    // Draw the drop shadow (if any) BEFORE the shape so the shape paints
+    // over the inside-of-SDF region. Shadow opacity scales with the
+    // element's overall opacity so animating the shape's opacity fades
+    // the shadow alongside it.
+    if (element.shadow && typeof element.shadow.color === 'string') {
+        const shadowPremul = parseColorPremultipliedWithOpacity(element.shadow.color, w.opacity01);
+        const offsetX = numberOr(element.shadow.offset_x, 0);
+        const offsetY = numberOr(element.shadow.offset_y, 0);
+        const blur = Math.max(0, numberOr(element.shadow.blur, 0));
+        backend.drawShapeShadow({
+            cx: w.cx,
+            cy: w.cy,
+            width: matrixPath ? width : w.width,
+            height: matrixPath ? height : w.height,
+            rotation: w.rotation,
+            skewX,
+            skewY,
+            // Under 3D the EXPANDED quad foreshortens with the element while
+            // the offset translates in the PARENT plane — consistent with 2D,
+            // where a rotated shape's shadow offset stays screen-aligned.
+            transform: matrixPath
+                ? quadWorldTransform(ctx.modelMatrix, cx + offsetX, cy + offsetY, width + blur * 2, height + blur * 2, rotation, skewX, skewY, t3d)
+                : undefined,
+            cornerRadius,
+            shape: isEllipse ? 'ellipse' : 'rectangle',
+            offsetX,
+            offsetY,
+            blur,
+            color: shadowPremul,
+        });
+    }
+    // §4.8 PBR lighting: when the shape carries a material and the scene
+    // has lights, build the lit payload (world-space normal + position via
+    // the camera-FREE world matrix, straight-alpha albedo). gradient fills
+    // aren't lit in Phase 1.
+    const material = !gradient ? resolveMaterial(element, ctx.time) : null;
+    const opacityFactor = Math.max(0, Math.min(1, w.opacity01));
+    const lit = material
+        ? buildLitParams(ctx, quadWorldTransform(ctx.worldMatrix, cx, cy, width, height, rotation, skewX, skewY, t3d), material, straightWithOpacity(fillColor, opacityFactor), strokeColorStr && strokeWidth > 0 ? straightWithOpacity(strokeColorStr, opacityFactor) : undefined)
+        : null;
+    backend.drawShape({
+        cx: w.cx,
+        cy: w.cy,
+        // Matrix path: local dims (the SDF works in element pixel space and
+        // the projection lives in `transform`); 2D path: decomposed dims.
+        width: matrixPath ? width : w.width,
+        height: matrixPath ? height : w.height,
+        rotation: w.rotation,
+        skewX,
+        skewY,
+        transform,
+        color: straight,
+        gradient,
+        cornerRadius,
+        shape: isEllipse ? 'ellipse' : 'rectangle',
+        strokeColor: strokePremul,
+        strokeWidth: strokePremul ? strokeWidth : 0,
+        blend: element.blend_mode,
+        lit: lit ?? undefined,
+    });
+}
+function straightWithOpacity(hex, opacityFactor) {
+    const c = parseColor(typeof hex === 'string' ? hex : '#ffffff');
+    return [c[0], c[1], c[2], c[3] * opacityFactor];
+}
+function compileGradient(g, opacity01) {
+    const opacityFactor = Math.max(0, Math.min(1, opacity01));
+    const stops = g.stops.slice(0, 4).map((s) => {
+        const c = parseColorPremultiplied(s.color);
+        return {
+            offset: Math.max(0, Math.min(1, s.offset)),
+            color: [
+                c[0] * opacityFactor,
+                c[1] * opacityFactor,
+                c[2] * opacityFactor,
+                c[3] * opacityFactor,
+            ],
+        };
+    });
+    if (g.type === 'linear') {
+        // CSS `linear-gradient(θ)`: 0° = to top, clockwise (90° = to right,
+        // 180° = to bottom). Default 180 (to bottom). The shader projects
+        // centered UV onto (cos, sin) of its angle, whose basis is 0° = +x
+        // (right), 90° = +y (down) — so map CSS θ → shader (θ − 90).
+        const angleDeg = typeof g.angle === 'number' ? g.angle : 180;
+        return { type: 'linear', angle: ((angleDeg - 90) * Math.PI) / 180, stops };
+    }
+    return {
+        type: 'radial',
+        cx: typeof g.cx === 'number' ? g.cx : 0.5,
+        cy: typeof g.cy === 'number' ? g.cy : 0.5,
+        radius: typeof g.radius === 'number' ? g.radius : 0.5,
+        stops,
+    };
+}
+function numberOr(value, fallback) {
+    if (typeof value === 'number' && Number.isFinite(value))
+        return value;
+    if (typeof value === 'string') {
+        const n = parseFloat(value);
+        if (Number.isFinite(n))
+            return n;
+    }
+    return fallback;
+}
+function parseColorPremultipliedWithOpacity(hex, opacity01) {
+    const c = parseColorPremultiplied(typeof hex === 'string' ? hex : '#ffffff');
+    const opacityFactor = Math.max(0, Math.min(1, opacity01));
+    return [c[0] * opacityFactor, c[1] * opacityFactor, c[2] * opacityFactor, c[3] * opacityFactor];
+}
+//# sourceMappingURL=shape.js.map

package/dist/compositor/element-renderers/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sourceRoot":"","sources":["../../../src/compositor/element-renderers/shape.ts"],"names":[],"mappings":"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"}

package/dist/compositor/element-renderers/svg.d.ts

@@ -0,0 +1,4 @@
+import type { ShapeElement } from '@clipkit/protocol';
+import type { RenderContext } from '../render-context.js';
+export declare function renderPathShape(element: ShapeElement, ctx: RenderContext): void;
+//# sourceMappingURL=svg.d.ts.map

package/dist/compositor/element-renderers/svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../../src/compositor/element-renderers/svg.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAY,YAAY,EAAQ,MAAM,mBAAmB,CAAC;AAUtE,OAAO,KAAK,EACV,aAAa,EAGd,MAAM,sBAAsB,CAAC;AAU9B,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,aAAa,GAAG,IAAI,CAqG/E"}

package/dist/compositor/element-renderers/svg.js

@@ -0,0 +1,210 @@
+// SVG element renderer.
+//
+// Each frame:
+//   1. Resolve per-path stroke_progress values (animatable via keyframes).
+//   2. Get or create a cached OffscreenCanvas + Texture sized to the viewBox
+//      at a 2× supersampling factor.
+//   3. Rasterize the paths into the OffscreenCanvas.
+//   4. Upload the canvas contents into the texture.
+//   5. Draw as a textured quad at the element's animated transform.
+import { interpolateKeyframes } from '../../animation/keyframes.js';
+import { isExpr, evalExpr } from '../../animation/expr.js';
+import { applyEasing } from '../../animation/easings.js';
+import { morphD } from '../../svg/morph.js';
+import { rasterizeSvgElement } from '../../svg/svg-renderer.js';
+import { applyModelTransform, quadWorldTransform } from '../mat4.js';
+import { resolveAnchor, resolveLength } from '../unit.js';
+import { anchorToCenter } from '../transform.js';
+import { applyAnimation, applyAspectRatio, resolve3D, resolveScalePair, resolveSkewPair } from '../resolve.js';
+const SUPERSAMPLE = 2;
+// Cap the rasterization canvas. Going past this wastes memory + GPU
+// without visible improvement at typical canvas sizes.
+const MAX_RASTER = 2048;
+// Renders the PATH form of a `shape` (an element carrying `paths`) — rasterized
+// to a cached OffscreenCanvas and drawn as a textured quad. The primitive form
+// (rectangle/ellipse, no `paths`) goes through renderShapeElement instead.
+export function renderPathShape(element, ctx) {
+    const { canvas, backend, svgRasters } = ctx;
+    const paths = element.paths;
+    if (!paths || paths.length === 0)
+        return;
+    const viewBox = element.view_box ?? [0, 0, 100, 100];
+    const [, , vbW, vbH] = viewBox;
+    const x = applyAnimation(element, 'x', resolveLength(element.x, canvas.width, canvas), ctx);
+    const y = applyAnimation(element, 'y', resolveLength(element.y, canvas.height, canvas), ctx);
+    const { sx, sy } = resolveScalePair(element, ctx);
+    const box = applyAspectRatio(element, applyAnimation(element, 'width', resolveLength(element.width, canvas.width, canvas, vbW), ctx), applyAnimation(element, 'height', resolveLength(element.height, canvas.height, canvas, vbH), ctx));
+    const width = sx * box.width;
+    const height = sy * box.height;
+    const rotation = applyAnimation(element, 'rotation', numberOr(element.rotation ?? element.z_rotation, 0), ctx);
+    const opacity01 = applyAnimation(element, 'opacity', numberOr(element.opacity, 1), ctx);
+    const xAnchor = resolveAnchor(element.x_anchor);
+    const yAnchor = resolveAnchor(element.y_anchor);
+    const { cx, cy } = anchorToCenter(x, y, width, height, xAnchor, yAnchor);
+    const w = applyModelTransform(ctx.modelMatrix, ctx.opacityFactor, cx, cy, rotation, opacity01, width, height);
+    const opacity = clamp01(w.opacity01);
+    if (opacity <= 0 || w.width <= 0 || w.height <= 0)
+        return;
+    // Resolve per-path trim windows at this frame (§5.6.1) —
+    // stroke_progress is sugar for [0, progress, 0].
+    const elementStart = ctx.timeOffset + numberOr(element.time, 0);
+    const localTime = ctx.time - elementStart;
+    const trims = paths.flatMap((p) => resolveTrim(p, localTime));
+    const ds = paths.map((p) => resolveD(p.d, localTime));
+    // Get or create the per-element raster target.
+    //
+    // The canvas resolution drives clarity at display. If we used the viewBox
+    // dimensions alone (e.g. 20×20 for an SVG icon), an element drawn at
+    // 320×320 px would upscale the texture 16× and look blurry. So we size
+    // the canvas to max(viewBox, display) × supersample, capped to avoid
+    // blowing up GPU memory.
+    const targetRasterW = Math.min(MAX_RASTER, Math.max(1, Math.ceil(Math.max(vbW, width) * SUPERSAMPLE)));
+    const targetRasterH = Math.min(MAX_RASTER, Math.max(1, Math.ceil(Math.max(vbH, height) * SUPERSAMPLE)));
+    const cacheKey = typeof element.id === 'string' ? element.id : `__svg_${JSON.stringify(viewBox)}`;
+    let target = svgRasters.get(cacheKey);
+    if (!target || target.canvas.width !== targetRasterW || target.canvas.height !== targetRasterH) {
+        const off = new OffscreenCanvas(targetRasterW, targetRasterH);
+        const offCtx = off.getContext('2d');
+        if (!offCtx)
+            return;
+        // We have to initialize the texture with the canvas to pin its size.
+        const texture = backend.createTexture(off);
+        target = { canvas: off, ctx: offCtx, texture };
+        svgRasters.set(cacheKey, target);
+    }
+    // Memoize the raster + upload — skip both when nothing about the
+    // rendered pixels has changed since the last frame. For a complex
+    // SVG (US map: 50+ paths, 2048×2048 raster, 16MB texture upload),
+    // this is the difference between ~50ms per frame and ~0ms while the
+    // element is sitting on screen post-animation. Stroke-progress
+    // animations still re-raster every frame because their progresses
+    // genuinely change frame-to-frame; the moment they settle at 1.0
+    // the cache kicks in.
+    const nextSignature = {
+        trims,
+        ds,
+        pathsRef: paths,
+        gradientsRef: element.gradients,
+        rasterW: targetRasterW,
+        rasterH: targetRasterH,
+    };
+    if (!signaturesEqual(target.lastSignature, nextSignature)) {
+        rasterizeSvgElement(element, trims, ds, target);
+        backend.updateTexture(target.texture, target.canvas);
+        target.lastSignature = nextSignature;
+    }
+    // Draw the rasterized SVG as a textured quad. Tint by opacity (premul).
+    // CKP/1.0 3D (§4.4): full-matrix hand-off when 3D is in play.
+    const t3d = resolve3D(element, ctx);
+    const matrixPath = t3d !== null || !ctx.modelMatrix.aff;
+    const { skewX, skewY } = resolveSkewPair(element, ctx);
+    backend.drawTexturedQuad({
+        cx: w.cx,
+        cy: w.cy,
+        width: matrixPath ? width : w.width,
+        height: matrixPath ? height : w.height,
+        rotation: w.rotation,
+        skewX,
+        skewY,
+        transform: matrixPath
+            ? quadWorldTransform(ctx.modelMatrix, cx, cy, width, height, rotation, skewX, skewY, t3d)
+            : undefined,
+        texture: target.texture,
+        tint: [opacity, opacity, opacity, opacity],
+        blend: element.blend_mode,
+    });
+}
+function resolveTrim(p, localTime) {
+    const rp = (v) => {
+        if (v === undefined)
+            return undefined;
+        if (typeof v === 'number')
+            return v;
+        if (isExpr(v))
+            return evalExpr(v, { t: localTime, dur: 0, i: 0, n: 1, value: 0 });
+        if (Array.isArray(v))
+            return interpolateKeyframes(v, localTime);
+        return undefined;
+    };
+    const hasTrim = p.trim_start !== undefined || p.trim_end !== undefined || p.trim_offset !== undefined;
+    if (hasTrim) {
+        return [
+            clamp01p(rp(p.trim_start) ?? 0),
+            clamp01p(rp(p.trim_end) ?? 1),
+            rp(p.trim_offset) ?? 0,
+        ];
+    }
+    return [0, clamp01p(rp(p.stroke_progress) ?? 1), 0];
+}
+function clamp01p(v) {
+    return Math.max(0, Math.min(1, v));
+}
+/**
+ * Resolve a path's d at element-local time: a plain string passes
+ * through; keyframed d-strings MORPH between compatible command lists
+ * (§5.6.2) and SNAP at the destination keyframe otherwise.
+ */
+function resolveD(d, localTime) {
+    if (typeof d === 'string')
+        return d;
+    if (!Array.isArray(d) || d.length === 0)
+        return '';
+    const tv = (k) => typeof k.time === 'number' ? k.time : parseFloat(String(k.time)) || 0;
+    const first = d[0];
+    const last = d[d.length - 1];
+    if (localTime <= tv(first))
+        return String(first.value);
+    if (localTime >= tv(last))
+        return String(last.value);
+    for (let i = 0; i < d.length - 1; i++) {
+        const a = d[i];
+        const b = d[i + 1];
+        const at = tv(a);
+        const bt = tv(b);
+        if (localTime >= at && localTime <= bt) {
+            const span = bt - at;
+            const u = applyEasing(b.easing, span > 0 ? (localTime - at) / span : 1);
+            const morphed = morphD(String(a.value), String(b.value), u);
+            return morphed ?? String(a.value);
+        }
+    }
+    return String(last.value);
+}
+function numberOr(value, fallback) {
+    if (typeof value === 'number' && Number.isFinite(value))
+        return value;
+    if (typeof value === 'string') {
+        const n = parseFloat(value);
+        if (Number.isFinite(n))
+            return n;
+    }
+    return fallback;
+}
+function clamp01(n) {
+    return n < 0 ? 0 : n > 1 ? 1 : n;
+}
+function signaturesEqual(prev, next) {
+    if (!prev)
+        return false;
+    if (prev.pathsRef !== next.pathsRef)
+        return false;
+    if (prev.gradientsRef !== next.gradientsRef)
+        return false;
+    if (prev.rasterW !== next.rasterW || prev.rasterH !== next.rasterH) {
+        return false;
+    }
+    if (prev.trims.length !== next.trims.length)
+        return false;
+    for (let i = 0; i < prev.trims.length; i++) {
+        if (prev.trims[i] !== next.trims[i])
+            return false;
+    }
+    if (prev.ds.length !== next.ds.length)
+        return false;
+    for (let i = 0; i < prev.ds.length; i++) {
+        if (prev.ds[i] !== next.ds[i])
+            return false;
+    }
+    return true;
+}
+//# sourceMappingURL=svg.js.map