@clipkit/runtime 1.0.0

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

@@ -0,0 +1,259 @@
+import { interpolateKeyframes } from '../../animation/keyframes.js';
+import { applyModelTransform, mat4Identity, mat4Multiply, mat4TRS, mat4TRS3D, quadWorldTransform } from '../mat4.js';
+import { resolveAnchor, resolveLength } from '../unit.js';
+import { anchorToCenter } from '../transform.js';
+import { applyAnimation, depthOrder, resolve3D, resolveScalePair } from '../resolve.js';
+import { resolveMaterial } from '../lighting.js';
+import { buildLitParams } from './lit.js';
+import { getLogger } from '../../logger.js';
+// A flattened group card lights from its layer pixels, so the albedo
+// color is unused by the lit-textured shader — pass white.
+const WHITE = [1, 1, 1, 1];
+/**
+ * Render a group element. Pushes the group's transform / opacity / time
+ * scope, then walks children. Stack is restored on return.
+ *
+ * Layers within a group establish local paint order — children render
+ * in descending-layer order (layer 1 on top), just like at the top
+ * level.
+ */
+export function renderGroupElement(el, ctx) {
+    // Time-window check against the local timeline. ctx.time is global;
+    // we compare against the group's global start + duration.
+    const groupStart = ctx.timeOffset + numberOr(el.time, 0);
+    const groupDur = parseDuration(el.duration, ctx.sourceDuration - groupStart);
+    if (ctx.time < groupStart || ctx.time > groupStart + groupDur)
+        return;
+    // §5.8.4 time_remap: the SUBTREE runs on a warped clock. The group's
+    // own animations (opacity/rotation/scale below) read REAL time; only
+    // children see the warp. ctx.time is swapped while children render.
+    const prevGlobalTime = ctx.time;
+    const warpedTime = Array.isArray(el.time_remap) && el.time_remap.length > 0
+        ? groupStart + Math.max(0, interpolateKeyframes(el.time_remap, ctx.time - groupStart))
+        : ctx.time;
+    const opacity01 = applyAnimation(el, 'opacity', numberOr(el.opacity, 1), ctx);
+    const opFactor = Math.max(0, Math.min(1, opacity01));
+    if (opFactor === 0)
+        return;
+    const { canvas } = ctx;
+    const x = resolveLength(el.x, canvas.width, canvas);
+    const y = resolveLength(el.y, canvas.height, canvas);
+    const width = el.width !== undefined
+        ? resolveLength(el.width, canvas.width, canvas)
+        : 0;
+    const height = el.height !== undefined
+        ? resolveLength(el.height, canvas.height, canvas)
+        : 0;
+    const ax = resolveAnchor(el.x_anchor);
+    const ay = resolveAnchor(el.y_anchor);
+    const rotation = applyAnimation(el, 'rotation', numberOr(el.rotation ?? el.z_rotation, 0), ctx);
+    const { sx, sy } = resolveScalePair(el, ctx);
+    // CKP/1.0 3D (§4.4): groups with 3D fields stack a general matrix
+    // (plain path) or project their flattened layer's quad (clip/mask).
+    const t3d = resolve3D(el, ctx);
+    // Render children in descending `layer` order (local paint order,
+    // layer 1 on top). The plain-group path below re-orders by depth
+    // (`z`) when ctx.depthSort is set; the flattened layer keeps this
+    // layer order (its children are coplanar in the flat layer).
+    const sortedChildren = [...el.elements].sort((a, b) => numberOr(b.layer, Number.MAX_SAFE_INTEGER) - numberOr(a.layer, Number.MAX_SAFE_INTEGER));
+    const dispatch = ctx
+        ._dispatch;
+    const prevMatrix = ctx.modelMatrix;
+    const prevWorld = ctx.worldMatrix;
+    const prevOpacity = ctx.opacityFactor;
+    const prevTime = ctx.timeOffset;
+    const prevSurfW = ctx.surfaceWidth;
+    const prevSurfH = ctx.surfaceHeight;
+    // ── Layered paths (clip and/or mask): render children into an
+    // offscreen layer the size of the group's box, optionally render the
+    // mask elements into a second layer, then composite with the group's
+    // transform + opacity. Layer bounds do the clipping (mask implies
+    // clip — both layers are box-sized).
+    if (el.clip === true || el.mask) {
+        if (width <= 0 || height <= 0) {
+            getLogger().warn('group clip/mask requires explicit width and height — skipping');
+        }
+        else {
+            const renderIntoLayer = (key, elements) => {
+                let entry = ctx.groupTargets.get(key);
+                if (entry && (entry.width !== width || entry.height !== height)) {
+                    ctx.backend.destroyRenderTarget(entry.target);
+                    entry = undefined;
+                }
+                if (!entry) {
+                    entry = { target: ctx.backend.createRenderTarget(width, height), width, height };
+                    ctx.groupTargets.set(key, entry);
+                }
+                // Stamp on EVERY acquire (reuse path included) for frame-boundary LRU.
+                entry.lastTouched = ctx.frameIndex;
+                ctx.backend.pushTarget(entry.target, [0, 0, 0, 0]);
+                // try/finally so a throw while rendering a child can't leave the surface
+                // stack unbalanced and blacken the rest of the frame (EXPORT-FLOW §4A).
+                try {
+                    // Inside the layer: identity transform (child coordinates are
+                    // relative to the group's top-left, which is the layer origin),
+                    // full opacity (the group's opacity applies at composite).
+                    ctx.modelMatrix = mat4Identity();
+                    ctx.worldMatrix = mat4Identity();
+                    ctx.opacityFactor = 1;
+                    ctx.timeOffset = groupStart;
+                    ctx.time = warpedTime;
+                    ctx.surfaceWidth = width;
+                    ctx.surfaceHeight = height;
+                    const ordered = [...elements].sort((a, b) => numberOr(b.layer, Number.MAX_SAFE_INTEGER) - numberOr(a.layer, Number.MAX_SAFE_INTEGER));
+                    for (const child of ordered) {
+                        if (child.visible === false)
+                            continue;
+                        if (!isActiveInGroup(child, ctx.time, groupStart, groupDur))
+                            continue;
+                        dispatch?.(child, ctx);
+                    }
+                }
+                finally {
+                    ctx.backend.popTarget();
+                }
+                ctx.modelMatrix = prevMatrix;
+                ctx.worldMatrix = prevWorld;
+                ctx.opacityFactor = prevOpacity;
+                ctx.timeOffset = prevTime;
+                ctx.time = prevGlobalTime;
+                ctx.surfaceWidth = prevSurfW;
+                ctx.surfaceHeight = prevSurfH;
+                return entry;
+            };
+            const baseKey = el.id ?? '__group_layer__';
+            const content = renderIntoLayer(baseKey, sortedChildren);
+            const maskLayer = el.mask ? renderIntoLayer(`${baseKey}::mask`, el.mask.elements) : null;
+            // Composite like a textured leaf element. With 3D on the group
+            // (or an un-flattened 3D ancestor) the LAYER's quad is projected
+            // by the full matrix chain — the §4.4.3 flattening rule and the
+            // "tilted UI card" shot.
+            const { cx, cy } = anchorToCenter(x, y, width, height, ax, ay);
+            const matrixPath = t3d !== null || !prevMatrix.aff;
+            const w = applyModelTransform(prevMatrix, prevOpacity, cx, cy, rotation, opacity01, width * sx, height * sy);
+            const transform = matrixPath
+                ? quadWorldTransform(prevMatrix, cx, cy, width * sx, height * sy, rotation, 0, 0, t3d)
+                : undefined;
+            const tintA = Math.max(0, Math.min(1, w.opacity01));
+            const tint = [tintA, tintA, tintA, tintA];
+            if (maskLayer && el.mask) {
+                ctx.backend.drawMaskedQuad({
+                    cx: w.cx,
+                    cy: w.cy,
+                    width: matrixPath ? width * sx : w.width,
+                    height: matrixPath ? height * sy : w.height,
+                    rotation: w.rotation,
+                    transform,
+                    content: content.target.texture,
+                    mask: maskLayer.target.texture,
+                    mode: el.mask.mode,
+                    tint,
+                    blend: el.blend_mode,
+                });
+            }
+            else {
+                // A rounded clip box (rounded card clipping its content): mask the
+                // composited layer to a rounded rect. border_radius is in the
+                // group's local px, so it scales with the quad's x-scale.
+                const cornerRadius = typeof el.border_radius === 'number' && el.border_radius > 0
+                    ? el.border_radius * sx
+                    : undefined;
+                // §4.8 PBR: a material on the group shades the WHOLE flattened
+                // card as one lit plane (albedo = the layer's pixels). World quad
+                // from the camera-free matrix so the sheen is view-dependent.
+                const material = resolveMaterial(el, ctx.time);
+                const litLayer = material
+                    ? buildLitParams(ctx, quadWorldTransform(prevWorld, cx, cy, width * sx, height * sy, rotation, 0, 0, t3d), material, WHITE)
+                    : null;
+                ctx.backend.drawTexturedQuad({
+                    cx: w.cx,
+                    cy: w.cy,
+                    width: matrixPath ? width * sx : w.width,
+                    height: matrixPath ? height * sy : w.height,
+                    rotation: w.rotation,
+                    transform,
+                    texture: content.target.texture,
+                    tint,
+                    cornerRadius,
+                    blend: el.blend_mode,
+                    lit: litLayer ?? undefined,
+                });
+            }
+            return;
+        }
+    }
+    // ── Unclipped path: compose the group's local matrix with the
+    // current model matrix and render children directly.
+    // blend_mode applies when compositing a group's FLATTENED layer; an
+    // unlayered group never rasterizes, so there's nothing to blend (§4.5).
+    if (el.blend_mode && el.blend_mode !== 'normal') {
+        getLogger().warn('group blend_mode requires clip: true or mask — ignored; children composite with their own blend modes');
+    }
+    // 3D groups stack a general matrix — children live in the group's 3D
+    // space (nested rotations compose; flattening only at layer
+    // boundaries, §4.4.3).
+    // Position the group's box via its anchor (default top-left), but pivot
+    // rotation/scale around the box CENTER — the same model as leaf elements
+    // (anchor = position only; transforms pivot center). Identical to the old
+    // anchor-as-pivot math when the group isn't rotated/scaled. See
+    // ANCHOR-CONVENTION-PLAN.md.
+    const { cx, cy } = anchorToCenter(x, y, width, height, ax, ay);
+    const localMatrix = t3d
+        ? mat4TRS3D(cx, cy, t3d.z, width, height, 0.5, 0.5, rotation, t3d.yRot, t3d.xRot, sx, sy)
+        : mat4TRS(cx, cy, width, height, 0.5, 0.5, rotation, sx, sy);
+    ctx.modelMatrix = mat4Multiply(prevMatrix, localMatrix);
+    ctx.worldMatrix = mat4Multiply(prevWorld, localMatrix);
+    ctx.opacityFactor = prevOpacity * opFactor;
+    ctx.timeOffset = groupStart;
+    ctx.time = warpedTime;
+    // §4.4.3: under a camera, plain-group children paint back-to-front by
+    // camera depth (computed against the just-composed model matrix so the
+    // group's own 3D transform is included). Flattened groups (the clip/
+    // mask path above) keep layer order — their children are coplanar in
+    // the flat layer.
+    const drawOrder = ctx.depthSort ? depthOrder(sortedChildren, ctx) : sortedChildren;
+    for (const child of drawOrder) {
+        if (child.visible === false)
+            continue;
+        if (!isActiveInGroup(child, ctx.time, groupStart, groupDur))
+            continue;
+        // Lazy import would create a cycle; the dispatch is reachable via
+        // the parent module passing dispatchElement in. Inline the dispatch
+        // here by calling back through ctx-attached function set in scene.ts.
+        dispatch?.(child, ctx);
+    }
+    ctx.modelMatrix = prevMatrix;
+    ctx.worldMatrix = prevWorld;
+    ctx.opacityFactor = prevOpacity;
+    ctx.timeOffset = prevTime;
+    ctx.time = prevGlobalTime;
+}
+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 parseDuration(v, fallback) {
+    if (v === 'auto' || v === 'end' || v == null)
+        return fallback;
+    if (typeof v === 'number' && Number.isFinite(v))
+        return v;
+    if (typeof v === 'string') {
+        const n = parseFloat(v);
+        if (Number.isFinite(n))
+            return n;
+    }
+    return fallback;
+}
+function isActiveInGroup(el, globalTime, groupStart, groupDur) {
+    const localStart = numberOr(el.time, 0);
+    const start = groupStart + localStart;
+    const dur = parseDuration(el.duration, groupDur - localStart);
+    return globalTime >= start && globalTime <= start + dur;
+}
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/compositor/element-renderers/group.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrH,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,qEAAqE;AACrE,2DAA2D;AAC3D,MAAM,KAAK,GAA8C,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEtE;;;;;;;GAOG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAgB,EAAE,GAAkB;IACrE,oEAAoE;IACpE,0DAA0D;IAC1D,MAAM,UAAU,GAAG,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,cAAc,GAAG,UAAU,CAAC,CAAC;IAC7E,IAAI,GAAG,CAAC,IAAI,GAAG,UAAU,IAAI,GAAG,CAAC,IAAI,GAAG,UAAU,GAAG,QAAQ;QAAE,OAAO;IAEtE,qEAAqE;IACrE,qEAAqE;IACrE,oEAAoE;IACpE,MAAM,cAAc,GAAG,GAAG,CAAC,IAAI,CAAC;IAChC,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;QACtD,CAAC,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;QACtF,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC;IAEf,MAAM,SAAS,GAAG,cAAc,CAAC,EAAE,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC9E,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;IACrD,IAAI,QAAQ,KAAK,CAAC;QAAE,OAAO;IAE3B,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC;IACvB,MAAM,CAAC,GAAG,aAAa,CAAC,EAAE,CAAC,CAAU,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC7D,MAAM,CAAC,GAAG,aAAa,CAAC,EAAE,CAAC,CAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9D,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,KAAK,SAAS;QAClC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,KAAc,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;QACxD,CAAC,CAAC,CAAC,CAAC;IACN,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM,KAAK,SAAS;QACpC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,MAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;QAC1D,CAAC,CAAC,CAAC,CAAC;IACN,MAAM,EAAE,GAAG,aAAa,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,EAAE,GAAG,aAAa,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,cAAc,CAAC,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,IAAK,EAA+B,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC9H,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,gBAAgB,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;IAC7C,kEAAkE;IAClE,oEAAoE;IACpE,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;IAE/B,kEAAkE;IAClE,iEAAiE;IACjE,kEAAkE;IAClE,6DAA6D;IAC7D,MAAM,cAAc,GAAG,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAClG,CAAC;IAEF,MAAM,QAAQ,GAAI,GAAiF;SAChG,SAAS,CAAC;IAEb,MAAM,UAAU,GAAG,GAAG,CAAC,WAAW,CAAC;IACnC,MAAM,SAAS,GAAG,GAAG,CAAC,WAAW,CAAC;IAClC,MAAM,WAAW,GAAG,GAAG,CAAC,aAAa,CAAC;IACtC,MAAM,QAAQ,GAAG,GAAG,CAAC,UAAU,CAAC;IAChC,MAAM,SAAS,GAAG,GAAG,CAAC,YAAY,CAAC;IACnC,MAAM,SAAS,GAAG,GAAG,CAAC,aAAa,CAAC;IAEpC,+DAA+D;IAC/D,qEAAqE;IACrE,qEAAqE;IACrE,kEAAkE;IAClE,qCAAqC;IACrC,IAAI,EAAE,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;QAChC,IAAI,KAAK,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,EAAE,CAAC;YAC9B,SAAS,EAAE,CAAC,IAAI,CAAC,+DAA+D,CAAC,CAAC;QACpF,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,GAAG,CAAC,GAAW,EAAE,QAA4B,EAAmB,EAAE;gBACrF,IAAI,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;gBACtC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,EAAE,CAAC;oBAChE,GAAG,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oBAC9C,KAAK,GAAG,SAAS,CAAC;gBACpB,CAAC;gBACD,IAAI,CAAC,KAAK,EAAE,CAAC;oBACX,KAAK,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;oBACjF,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;gBACnC,CAAC;gBACD,uEAAuE;gBACvE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC,UAAU,CAAC;gBACnC,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACnD,yEAAyE;gBACzE,wEAAwE;gBACxE,IAAI,CAAC;oBACH,8DAA8D;oBAC9D,gEAAgE;oBAChE,2DAA2D;oBAC3D,GAAG,CAAC,WAAW,GAAG,YAAY,EAAE,CAAC;oBACjC,GAAG,CAAC,WAAW,GAAG,YAAY,EAAE,CAAC;oBACjC,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;oBACtB,GAAG,CAAC,UAAU,GAAG,UAAU,CAAC;oBAC5B,GAAG,CAAC,IAAI,GAAG,UAAU,CAAC;oBACtB,GAAG,CAAC,YAAY,GAAG,KAAK,CAAC;oBACzB,GAAG,CAAC,aAAa,GAAG,MAAM,CAAC;oBAC3B,MAAM,OAAO,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,IAAI,CAChC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAClG,CAAC;oBACF,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;wBAC5B,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK;4BAAE,SAAS;wBACtC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC;4BAAE,SAAS;wBACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;oBACzB,CAAC;gBACH,CAAC;wBAAS,CAAC;oBACT,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;gBAC1B,CAAC;gBACD,GAAG,CAAC,WAAW,GAAG,UAAU,CAAC;gBAC7B,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC;gBAC5B,GAAG,CAAC,aAAa,GAAG,WAAW,CAAC;gBAChC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC;gBAC1B,GAAG,CAAC,IAAI,GAAG,cAAc,CAAC;gBAC1B,GAAG,CAAC,YAAY,GAAG,SAAS,CAAC;gBAC7B,GAAG,CAAC,aAAa,GAAG,SAAS,CAAC;gBAC9B,OAAO,KAAK,CAAC;YACf,CAAC,CAAC;YAEF,MAAM,OAAO,GAAG,EAAE,CAAC,EAAE,IAAI,iBAAiB,CAAC;YAC3C,MAAM,OAAO,GAAG,eAAe,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;YACzD,MAAM,SAAS,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,OAAO,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAEzF,+DAA+D;YAC/D,iEAAiE;YACjE,gEAAgE;YAChE,yBAAyB;YACzB,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;YAC/D,MAAM,UAAU,GAAG,GAAG,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;YACnD,MAAM,CAAC,GAAG,mBAAmB,CAC3B,UAAU,EAAE,WAAW,EACvB,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,CACrD,CAAC;YACF,MAAM,SAAS,GAAG,UAAU;gBAC1B,CAAC,CAAC,kBAAkB,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;gBACtF,CAAC,CAAC,SAAS,CAAC;YACd,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;YACpD,MAAM,IAAI,GAA8C,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;YACrF,IAAI,SAAS,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;gBACzB,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC;oBACzB,EAAE,EAAE,CAAC,CAAC,EAAE;oBACR,EAAE,EAAE,CAAC,CAAC,EAAE;oBACR,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;oBACxC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;oBAC3C,QAAQ,EAAE,CAAC,CAAC,QAAQ;oBACpB,SAAS;oBACT,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO;oBAC/B,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,OAAO;oBAC9B,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI;oBAClB,IAAI;oBACJ,KAAK,EAAE,EAAE,CAAC,UAAU;iBACrB,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,mEAAmE;gBACnE,8DAA8D;gBAC9D,0DAA0D;gBAC1D,MAAM,YAAY,GAChB,OAAO,EAAE,CAAC,aAAa,KAAK,QAAQ,IAAI,EAAE,CAAC,aAAa,GAAG,CAAC;oBAC1D,CAAC,CAAC,EAAE,CAAC,aAAa,GAAG,EAAE;oBACvB,CAAC,CAAC,SAAS,CAAC;gBAChB,+DAA+D;gBAC/D,kEAAkE;gBAClE,8DAA8D;gBAC9D,MAAM,QAAQ,GAAG,eAAe,CAAC,EAAE,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;gBAC/C,MAAM,QAAQ,GAAG,QAAQ;oBACvB,CAAC,CAAC,cAAc,CACZ,GAAG,EACH,kBAAkB,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EACnF,QAAQ,EACR,KAAK,CACN;oBACH,CAAC,CAAC,IAAI,CAAC;gBACT,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC;oBAC3B,EAAE,EAAE,CAAC,CAAC,EAAE;oBACR,EAAE,EAAE,CAAC,CAAC,EAAE;oBACR,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;oBACxC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;oBAC3C,QAAQ,EAAE,CAAC,CAAC,QAAQ;oBACpB,SAAS;oBACT,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO;oBAC/B,IAAI;oBACJ,YAAY;oBACZ,KAAK,EAAE,EAAE,CAAC,UAAU;oBACpB,GAAG,EAAE,QAAQ,IAAI,SAAS;iBAC3B,CAAC,CAAC;YACL,CAAC;YACD,OAAO;QACT,CAAC;IACH,CAAC;IAED,+DAA+D;IAC/D,qDAAqD;IACrD,oEAAoE;IACpE,wEAAwE;IACxE,IAAI,EAAE,CAAC,UAAU,IAAI,EAAE,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;QAChD,SAAS,EAAE,CAAC,IAAI,CAAC,uGAAuG,CAAC,CAAC;IAC5H,CAAC;IACD,qEAAqE;IACrE,4DAA4D;IAC5D,uBAAuB;IACvB,wEAAwE;IACxE,yEAAyE;IACzE,0EAA0E;IAC1E,gEAAgE;IAChE,6BAA6B;IAC7B,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,GAAG;QACrB,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC;QACzF,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAE/D,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IACxD,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IACvD,GAAG,CAAC,aAAa,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC3C,GAAG,CAAC,UAAU,GAAG,UAAU,CAAC;IAC5B,GAAG,CAAC,IAAI,GAAG,UAAU,CAAC;IAEtB,sEAAsE;IACtE,uEAAuE;IACvE,qEAAqE;IACrE,qEAAqE;IACrE,kBAAkB;IAClB,MAAM,SAAS,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IAEnF,KAAK,MAAM,KAAK,IAAI,SAAS,EAAE,CAAC;QAC9B,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK;YAAE,SAAS;QACtC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC;YAAE,SAAS;QACtE,kEAAkE;QAClE,oEAAoE;QACpE,sEAAsE;QACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACzB,CAAC;IAED,GAAG,CAAC,WAAW,GAAG,UAAU,CAAC;IAC7B,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC;IAC5B,GAAG,CAAC,aAAa,GAAG,WAAW,CAAC;IAChC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC;IAC1B,GAAG,CAAC,IAAI,GAAG,cAAc,CAAC;AAC5B,CAAC;AAED,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,aAAa,CAAC,CAAU,EAAE,QAAgB;IACjD,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,IAAI;QAAE,OAAO,QAAQ,CAAC;IAC9D,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QAAE,OAAO,CAAC,CAAC;IAC1D,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;QAC1B,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;YAAE,OAAO,CAAC,CAAC;IACnC,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,eAAe,CACtB,EAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,QAAgB;IAEhB,MAAM,UAAU,GAAG,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;IACtC,MAAM,GAAG,GAAG,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC;IAC9D,OAAO,UAAU,IAAI,KAAK,IAAI,UAAU,IAAI,KAAK,GAAG,GAAG,CAAC;AAC1D,CAAC"}

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

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

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

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

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

@@ -0,0 +1,97 @@
+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';
+import { computeObjectFit } from '../fit.js';
+import { resolveMaterial } from '../lighting.js';
+import { buildLitParams } from './lit.js';
+// Textured surfaces light from the texture's own pixels, so the albedo
+// color is unused by the lit-textured shader — pass white.
+const WHITE = [1, 1, 1, 1];
+export function renderImageElement(element, ctx) {
+    const { canvas, backend, images } = ctx;
+    const sourceUrl = String(element.source ?? '');
+    if (!sourceUrl)
+        return;
+    const asset = images.get(sourceUrl);
+    if (!asset) {
+        // Asset not preloaded — silently skip this frame. Caller should have
+        // awaited preload() before rendering.
+        return;
+    }
+    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, asset.bitmap.width), ctx), applyAnimation(element, 'height', resolveLength(element.height, canvas.height, canvas, asset.bitmap.height), 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 = Math.max(0, Math.min(1, w.opacity01));
+    const tint = [opacity, opacity, opacity, opacity];
+    // CKP/1.0 3D (§4.4): full-matrix hand-off. Fit math runs in LOCAL
+    // pixels (the projection scales everything uniformly afterwards).
+    const t3d = resolve3D(element, ctx);
+    const matrixPath = t3d !== null || !ctx.modelMatrix.aff;
+    // object-fit: crop (cover/none) or letterbox (contain) the media
+    // within the element box. Default cover. The optional source crop
+    // (§5.3) selects a normalized sub-rectangle of the media first.
+    const fitted = computeObjectFit(element.fit, matrixPath ? width : w.width, matrixPath ? height : w.height, asset.bitmap.width, asset.bitmap.height, resolveCrop(element, ctx));
+    const { skewX, skewY } = resolveSkewPair(element, ctx);
+    // §4.8 PBR: a material + scene lights/environment shade the image as a
+    // textured surface (albedo = its own pixels). Built from the camera-
+    // free world quad so the highlight/reflection is view-dependent.
+    const material = resolveMaterial(element, ctx.time);
+    const lit = material
+        ? buildLitParams(ctx, quadWorldTransform(ctx.worldMatrix, cx, cy, fitted.drawWidth, fitted.drawHeight, rotation, skewX, skewY, t3d), material, WHITE)
+        : null;
+    backend.drawTexturedQuad({
+        cx: w.cx,
+        cy: w.cy,
+        width: fitted.drawWidth,
+        height: fitted.drawHeight,
+        rotation: w.rotation,
+        skewX,
+        skewY,
+        transform: matrixPath
+            ? quadWorldTransform(ctx.modelMatrix, cx, cy, fitted.drawWidth, fitted.drawHeight, rotation, skewX, skewY, t3d)
+            : undefined,
+        texture: asset.texture,
+        uvRect: fitted.uvRect,
+        tint,
+        cornerRadius: numberOr(element.border_radius, 0),
+        blend: element.blend_mode,
+        lit: lit ?? undefined,
+    });
+}
+// Source crop (§5.3): resolve the normalized sub-rect, with each component
+// keyframeable. Returns undefined for the common no-crop case so the fit
+// math takes its identity fast path.
+const CROP_PROPS = ['crop_x', 'crop_y', 'crop_width', 'crop_height'];
+function resolveCrop(element, ctx) {
+    const hasField = CROP_PROPS.some((p) => element[p] !== undefined);
+    const hasAnim = (element.keyframe_animations ?? []).some((k) => CROP_PROPS.includes(k.property));
+    if (!hasField && !hasAnim)
+        return undefined;
+    return {
+        x: applyAnimation(element, 'crop_x', numberOr(element.crop_x, 0), ctx),
+        y: applyAnimation(element, 'crop_y', numberOr(element.crop_y, 0), ctx),
+        width: applyAnimation(element, 'crop_width', numberOr(element.crop_width, 1), ctx),
+        height: applyAnimation(element, 'crop_height', numberOr(element.crop_height, 1), ctx),
+    };
+}
+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;
+}
+//# sourceMappingURL=image.js.map

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

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

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

@@ -0,0 +1,6 @@
+import type { LitParams } from '../../backend/backend.js';
+import type { RGBA } from '../color.js';
+import type { ResolvedMaterial } from '../lighting.js';
+import type { RenderContext } from '../render-context.js';
+export declare function buildLitParams(ctx: RenderContext, worldQuadMatrix: ArrayLike<number>, material: ResolvedMaterial | null, albedo: RGBA, strokeAlbedo?: RGBA): LitParams | null;
+//# sourceMappingURL=lit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lit.d.ts","sourceRoot":"","sources":["../../../src/compositor/element-renderers/lit.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,wBAAgB,cAAc,CAC5B,GAAG,EAAE,aAAa,EAClB,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,EAClC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,EACjC,MAAM,EAAE,IAAI,EACZ,YAAY,CAAC,EAAE,IAAI,GAClB,SAAS,GAAG,IAAI,CAsElB"}

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

@@ -0,0 +1,82 @@
+// Shared builder for a draw's PBR `LitParams` (§4.8). Given the element's
+// world (pre-camera) quad matrix and resolved material, splits the scene
+// lights into ambient + directional and derives the world face normal.
+// Used by shape/image/group renderers; returns null when there's nothing
+// to light (no material or no lights → unlit fast path).
+export function buildLitParams(ctx, worldQuadMatrix, material, albedo, strokeAlbedo) {
+    // Lit if there's a material AND something to shade with — direct
+    // lights and/or an environment to reflect. No material, or neither
+    // lights nor environment ⇒ unlit fast path.
+    if (!material || (ctx.lights.length === 0 && !ctx.environment))
+        return null;
+    const m = worldQuadMatrix;
+    // Column 2 of the unit-quad→world matrix is the face normal direction;
+    // columns 0/1 are the tangent (+U) / bitangent (+V) for normal mapping.
+    let nx = m[8], ny = m[9], nz = m[10];
+    const nl = Math.hypot(nx, ny, nz) || 1;
+    nx /= nl;
+    ny /= nl;
+    nz /= nl;
+    // §4.8 Phase 2 normal map: resolve the texture + world TBN basis.
+    let normalMap;
+    if (material.normalMap && material.normalScale > 0) {
+        const asset = ctx.images.get(material.normalMap);
+        if (asset) {
+            let tx = m[0], ty = m[1], tz = m[2];
+            const tl = Math.hypot(tx, ty, tz) || 1;
+            tx /= tl;
+            ty /= tl;
+            tz /= tl;
+            let bx = m[4], by = m[5], bz = m[6];
+            const bl = Math.hypot(bx, by, bz) || 1;
+            bx /= bl;
+            by /= bl;
+            bz /= bl;
+            normalMap = {
+                texture: asset.texture,
+                scale: material.normalScale,
+                tangent: [tx, ty, tz],
+                bitangent: [bx, by, bz],
+            };
+        }
+    }
+    const ambient = [0, 0, 0];
+    const lightDirs = [];
+    const lightColors = [];
+    for (const l of ctx.lights) {
+        if (l.ambient) {
+            ambient[0] += l.color[0];
+            ambient[1] += l.color[1];
+            ambient[2] += l.color[2];
+        }
+        else if (lightDirs.length < 4) {
+            lightDirs.push(l.dir);
+            lightColors.push(l.color);
+        }
+    }
+    const env = ctx.environment
+        ? {
+            stopColors: ctx.environment.stops.map((s) => s.color),
+            stopOffsets: ctx.environment.stops.map((s) => s.offset),
+            avg: ctx.environment.avg,
+            image: ctx.environment.image ? ctx.images.get(ctx.environment.image)?.texture : undefined,
+        }
+        : undefined;
+    return {
+        albedo,
+        strokeAlbedo,
+        roughness: material.roughness,
+        metalness: material.metalness,
+        reflectivity: material.reflectivity,
+        emissive: material.emissive,
+        worldMatrix: worldQuadMatrix,
+        normal: [nx, ny, nz],
+        eye: ctx.eye,
+        ambient,
+        lightDirs,
+        lightColors,
+        env,
+        normalMap,
+    };
+}
+//# sourceMappingURL=lit.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"particles.d.ts","sourceRoot":"","sources":["../../../src/compositor/element-renderers/particles.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAkB,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,aAAa,GAAG,IAAI,CAmK1F"}