sketchmark 2.0.0 → 2.1.1

package/dist/src/render/svg.js

@@ -2,102 +2,122 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToSvg = renderToSvg;
 exports.renderResolvedSvg = renderResolvedSvg;
-const kernel_1 = require("../kernel");
+const normalize_1 = require("../normalize");
 const utils_1 = require("../utils");
+const DEFAULT_FONT_FAMILY = "Roboto, Arial, sans-serif";
+const LEGACY_DEFAULT_FONT_STACKS = new Set([
+    "inter,system-ui,sans-serif",
+    "system-ui,sans-serif",
+    "arial,helvetica,sans-serif"
+]);
 function renderToSvg(document, options = {}) {
-    const frame = (0, kernel_1.resolveKernelFrame)(document, options.time ?? 0);
-    return renderResolvedSvg(frame, options);
+    return renderResolvedSvg((0, normalize_1.resolveVisualFrame)(document, options.time ?? 0), options);
 }
 function renderResolvedSvg(document, options = {}) {
-    const kernel = isKernelVisualDocument(document) ? document : (0, kernel_1.lowerResolvedVisualDocument)(document);
     const width = document.canvas.width;
     const height = document.canvas.height;
     const background = document.canvas.background ?? "#ffffff";
-    const context = { defs: [], nextId: 0, markerIds: new Map() };
-    const elements = (kernel.elements ?? []).map((element) => renderElement(element, context)).join("");
+    const context = { defs: [], nextId: 0 };
+    const elements = document.elements.map((element) => renderElement(element, context)).join("");
     const backdrop = options.transparent ? "" : `<rect x="0" y="0" width="${width}" height="${height}" fill="${escapeAttr(background)}"/>`;
     const defs = context.defs.length ? `<defs>${context.defs.join("")}</defs>` : "";
     return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img">${defs}${backdrop}${elements}</svg>`;
 }
 function renderElement(element, context) {
-    const attrs = commonAttrs(element, context);
+    const attrs = commonAttrParts(element, context);
     const fill = paintValue(element.fill, context, element.type === "text" ? "#111827" : "none");
     const stroke = strokeAttrs(element, context, "none");
     switch (element.type) {
         case "point":
             return "";
-        case "path": {
-            const marker = element.metadata?.markerEnd === "arrow" ? ` marker-end="url(#${markerForStroke(element.stroke, context)})"` : "";
-            return `<path${attrs} d="${escapeAttr(element.d)}" fill="${fill}"${stroke}${marker}${drawAttrs(element)}/>`;
-        }
+        case "path":
+            return `<path${joinCommonAttrs(attrs)} d="${escapeAttr(element.d)}" fill="${fill}"${stroke}${drawAttrs(element)}/>`;
         case "text":
-            return renderText(element, attrs, fill);
+            return renderText(element, joinCommonAttrs(attrs), fill);
         case "image":
             return renderImage(element, attrs, context);
         case "group": {
-            const transform = groupTransform(element);
-            const children = (element.children ?? []).map((child) => renderElement(child, context)).join("");
-            return `<g${attrs}${transform}>${children}</g>`;
+            const children = element.children.map((child) => renderElement(child, context)).join("");
+            return `<g${joinCommonAttrs(attrs)}${groupTransform(element)}>${children}</g>`;
         }
         default:
             return "";
     }
 }
-function isKernelVisualDocument(document) {
-    return (document.elements ?? []).every((element) => element.type === "group" || element.type === "path" || element.type === "text" || element.type === "image" || element.type === "point" || element.type === "group3d" || element.type === "mesh3d" || element.type === "line3d" || element.type === "text3d" || element.type === "point3d" || element.type === "light");
-}
 function renderImage(element, attrs, context) {
+    const imageClip = imageSourceClipAttr(element, context);
+    const wrapped = !!attrs.clip;
+    const imageAttrs = joinCommonAttrs(attrs, wrapped ? ["clip", "transform"] : []);
     if (element.source) {
-        const id = nextId(context, "image-crop");
         const scaleX = element.width / element.source.width;
         const scaleY = element.height / element.source.height;
         const imageX = element.x - element.source.x * scaleX;
         const imageY = element.y - element.source.y * scaleY;
         const imageWidth = element.source.imageWidth * scaleX;
         const imageHeight = element.source.imageHeight * scaleY;
-        context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><rect x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}"/></clipPath>`);
-        return `<image${attrs} href="${escapeAttr(element.src)}" x="${imageX}" y="${imageY}" width="${imageWidth}" height="${imageHeight}" preserveAspectRatio="none" clip-path="url(#${id})"/>`;
+        const image = `<image${imageAttrs} href="${escapeAttr(element.src)}" x="${imageX}" y="${imageY}" width="${imageWidth}" height="${imageHeight}" preserveAspectRatio="none"${imageClip}/>`;
+        return wrapped ? `<g${attrs.clip}${attrs.transform}>${image}</g>` : image;
     }
-    return `<image${attrs} href="${escapeAttr(element.src)}" x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}" preserveAspectRatio="${imageFit(element.fit)}"/>`;
+    const image = `<image${imageAttrs} href="${escapeAttr(element.src)}" x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}" preserveAspectRatio="${imageFit(element.fit)}"${imageClip}/>`;
+    return wrapped ? `<g${attrs.clip}${attrs.transform}>${image}</g>` : image;
 }
 function renderText(element, attrs, fill) {
-    const anchor = element.align === "right" ? "end" : element.align === "left" ? "start" : "middle";
+    const anchor = element.align === "center" ? "middle" : element.align === "right" ? "end" : "start";
     const fontSize = Number(element.fontSize ?? 16);
     const lineHeight = fontSize * Number(element.lineHeight ?? 1.2);
     const lines = (0, utils_1.textLines)(element);
     const weight = escapeAttr(String(element.weight ?? 400));
-    const fontFamily = escapeAttr(String(element.fontFamily ?? "Inter, Arial, sans-serif"));
+    const fontFamily = escapeAttr(resolveFontFamily(element.fontFamily));
     const fontStyle = element.fontStyle ? ` font-style="${escapeAttr(String(element.fontStyle))}"` : "";
     const letterSpacing = (0, utils_1.isFiniteNumber)(element.letterSpacing) ? ` letter-spacing="${element.letterSpacing}"` : "";
     const firstY = textFirstLineY(element, lines.length, fontSize, lineHeight);
-    const content = lines
-        .map((line, index) => `<tspan x="${element.x}" y="${firstY + index * lineHeight}">${escapeText(line)}</tspan>`)
-        .join("");
-    return `<text${attrs} text-anchor="${anchor}" dominant-baseline="middle" font-family="${fontFamily}" font-size="${fontSize}" font-weight="${weight}"${fontStyle}${letterSpacing} fill="${fill}">${content}</text>`;
+    const content = lines.map((line, index) => `<tspan x="${element.x}" y="${firstY + index * lineHeight}">${escapeTextLine(line)}</tspan>`).join("");
+    return `<text${attrs} xml:space="preserve" text-anchor="${anchor}" dominant-baseline="middle" font-family="${fontFamily}" font-size="${fontSize}" font-weight="${weight}"${fontStyle}${letterSpacing} fill="${fill}">${content}</text>`;
+}
+function resolveFontFamily(value) {
+    const text = String(value ?? "").trim();
+    if (!text)
+        return DEFAULT_FONT_FAMILY;
+    const normalized = normalizeFontStack(text);
+    if (LEGACY_DEFAULT_FONT_STACKS.has(normalized))
+        return DEFAULT_FONT_FAMILY;
+    return text;
+}
+function normalizeFontStack(value) {
+    return value
+        .split(",")
+        .map((item) => item.trim().replace(/^['"]|['"]$/g, "").toLowerCase())
+        .filter(Boolean)
+        .join(",");
 }
 function textFirstLineY(element, lineCount, fontSize, lineHeight) {
-    if (element.valign === "top")
-        return element.y + fontSize / 2;
+    if (element.valign === "middle")
+        return element.y - ((lineCount - 1) * lineHeight) / 2;
     if (element.valign === "bottom")
         return element.y - fontSize / 2 - (lineCount - 1) * lineHeight;
-    return element.y - ((lineCount - 1) * lineHeight) / 2;
+    return element.y + fontSize / 2;
+}
+function commonAttrParts(element, context) {
+    return {
+        id: element.id ? ` id="${escapeAttr(element.id)}"` : "",
+        opacity: element.opacity === undefined ? "" : ` opacity="${Number(element.opacity)}"`,
+        filter: effectFilter(element.effects, context),
+        clip: clipPath(element.clip, context),
+        mask: maskPath(element.mask, context),
+        blend: element.blendMode && element.blendMode !== "normal" ? ` style="mix-blend-mode:${escapeAttr(element.blendMode)}"` : "",
+        transform: element.type === "group" ? "" : elementTransform(element)
+    };
 }
-function commonAttrs(element, context) {
-    const id = element.id ? ` id="${escapeAttr(element.id)}"` : "";
-    const opacity = element.opacity === undefined ? "" : ` opacity="${Number(element.opacity)}"`;
-    const filter = effectFilter(element.effects, context);
-    const clip = clipPath(element.clip, context);
-    const mask = maskPath(element.mask, context);
-    const blend = element.blendMode && element.blendMode !== "normal" ? ` style="mix-blend-mode:${escapeAttr(element.blendMode)}"` : "";
-    const transform = element.type === "group" ? "" : elementTransform(element);
-    return `${id}${opacity}${filter}${clip}${mask}${blend}${transform}`;
+function joinCommonAttrs(parts, omit = []) {
+    const skipped = new Set(omit);
+    return `${skipped.has("id") ? "" : parts.id}${skipped.has("opacity") ? "" : parts.opacity}${skipped.has("filter") ? "" : parts.filter}${skipped.has("clip") ? "" : parts.clip}${skipped.has("mask") ? "" : parts.mask}${skipped.has("blend") ? "" : parts.blend}${skipped.has("transform") ? "" : parts.transform}`;
 }
 function strokeAttrs(element, context, fallback) {
     const hasStroke = element.stroke !== undefined || element.strokeWidth !== undefined || fallback !== "none";
     if (!hasStroke)
         return "";
     const stroke = paintValue(element.stroke, context, fallback);
-    const width = Number(element.strokeWidth ?? (fallback === "none" ? 0 : 1));
+    const width = Number(element.strokeWidth ?? (element.stroke !== undefined || fallback !== "none" ? 1 : 0));
     const cap = element.strokeCap ? ` stroke-linecap="${escapeAttr(element.strokeCap)}"` : "";
     const join = element.strokeJoin ? ` stroke-linejoin="${escapeAttr(element.strokeJoin)}"` : "";
     const miter = (0, utils_1.isFiniteNumber)(element.miterLimit) ? ` stroke-miterlimit="${element.miterLimit}"` : "";
@@ -137,23 +157,11 @@ function paintValue(paint, context, fallback) {
     return `url(#${id})`;
 }
 function gradientStops(stops) {
-    return stops
-        .map((stop) => {
+    return stops.map((stop) => {
         const offset = Array.isArray(stop) ? stop[0] : stop.offset;
         const color = Array.isArray(stop) ? stop[1] : stop.color;
         return `<stop offset="${Number(offset) * 100}%" stop-color="${escapeAttr(String(color))}"/>`;
-    })
-        .join("");
-}
-function markerForStroke(stroke, context) {
-    const color = typeof stroke === "string" ? stroke : "#111827";
-    const cached = context.markerIds.get(color);
-    if (cached)
-        return cached;
-    const id = nextId(context, "arrow");
-    context.markerIds.set(color, id);
-    context.defs.push(`<marker id="${id}" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 5 L 0 10 z" fill="${escapeAttr(color)}"/></marker>`);
-    return id;
+    }).join("");
 }
 function effectFilter(effects, context) {
     if (!effects)
@@ -185,15 +193,14 @@ function clipPath(clip, context) {
     if (!clip)
         return "";
     const id = nextId(context, "clip");
-    if (clip.type === "rect") {
-        context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><rect x="${clip.x}" y="${clip.y}" width="${clip.width}" height="${clip.height}" rx="${Number(clip.radius ?? 0)}"/></clipPath>`);
-    }
-    else if (clip.type === "circle") {
-        context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><circle cx="${clip.cx}" cy="${clip.cy}" r="${clip.radius}"/></clipPath>`);
-    }
-    else {
-        context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><path d="${escapeAttr(clip.d)}"/></clipPath>`);
-    }
+    context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><path d="${escapeAttr(clip.d)}"/></clipPath>`);
+    return ` clip-path="url(#${id})"`;
+}
+function imageSourceClipAttr(element, context) {
+    if (!element.source)
+        return "";
+    const id = nextId(context, "image-clip");
+    context.defs.push(`<clipPath id="${id}" clipPathUnits="userSpaceOnUse"><rect x="${element.x}" y="${element.y}" width="${element.width}" height="${element.height}"/></clipPath>`);
     return ` clip-path="url(#${id})"`;
 }
 function maskPath(mask, context) {
@@ -201,25 +208,21 @@ function maskPath(mask, context) {
         return "";
     const id = nextId(context, "mask");
     const opacity = mask.opacity === undefined ? "" : ` opacity="${Number(mask.opacity)}"`;
-    if (mask.type === "rect") {
-        context.defs.push(`<mask id="${id}" maskUnits="userSpaceOnUse" x="-100000" y="-100000" width="200000" height="200000"><rect x="${mask.x}" y="${mask.y}" width="${mask.width}" height="${mask.height}" rx="${Number(mask.radius ?? 0)}" fill="#ffffff"${opacity}/></mask>`);
-    }
-    else if (mask.type === "circle") {
-        context.defs.push(`<mask id="${id}" maskUnits="userSpaceOnUse" x="-100000" y="-100000" width="200000" height="200000"><circle cx="${mask.cx}" cy="${mask.cy}" r="${mask.radius}" fill="#ffffff"${opacity}/></mask>`);
-    }
-    else {
-        context.defs.push(`<mask id="${id}" maskUnits="userSpaceOnUse" x="-100000" y="-100000" width="200000" height="200000"><path d="${escapeAttr(mask.d)}" fill="#ffffff"${opacity}/></mask>`);
-    }
+    context.defs.push(`<mask id="${id}" maskUnits="userSpaceOnUse" x="-100000" y="-100000" width="200000" height="200000"><path d="${escapeAttr(mask.d)}" fill="#ffffff"${opacity}/></mask>`);
     return ` mask="url(#${id})"`;
 }
 function elementTransform(element) {
+    const x = element.type === "path" ? Number(element.x ?? 0) : 0;
+    const y = element.type === "path" ? Number(element.y ?? 0) : 0;
     const rotation = Number(element.rotation ?? 0);
     const scaleX = Number(element.scaleX ?? element.scale ?? 1);
     const scaleY = Number(element.scaleY ?? element.scale ?? 1);
-    if (rotation === 0 && scaleX === 1 && scaleY === 1)
+    if (x === 0 && y === 0 && rotation === 0 && scaleX === 1 && scaleY === 1)
         return "";
     const origin = originPoint(element);
     const transforms = [];
+    if (x !== 0 || y !== 0)
+        transforms.push(`translate(${x} ${y})`);
     if (rotation !== 0)
         transforms.push(`rotate(${rotation} ${origin[0]} ${origin[1]})`);
     if (scaleX !== 1 || scaleY !== 1)
@@ -227,12 +230,11 @@ function elementTransform(element) {
     return transforms.length ? ` transform="${transforms.join(" ")}"` : "";
 }
 function groupTransform(element) {
-    const base = `translate(${element.x} ${element.y})`;
+    const transforms = [`translate(${element.x} ${element.y})`];
     const rotation = Number(element.rotation ?? 0);
     const scaleX = Number(element.scaleX ?? element.scale ?? 1);
     const scaleY = Number(element.scaleY ?? element.scale ?? 1);
     const origin = groupOrigin(element);
-    const transforms = [base];
     if (rotation !== 0)
         transforms.push(`rotate(${rotation} ${origin[0]} ${origin[1]})`);
     if (scaleX !== 1 || scaleY !== 1)
@@ -242,17 +244,16 @@ function groupTransform(element) {
 function originPoint(element) {
     if ((0, utils_1.isPoint2)(element.origin))
         return element.origin;
+    if (element.type === "text" || element.type === "point") {
+        return [Number(element.x ?? 0), Number(element.y ?? 0)];
+    }
     const box = (0, utils_1.elementBox)(element);
-    if (!box)
-        return [0, 0];
-    return (0, utils_1.anchorPoint)(box, typeof element.origin === "string" ? element.origin : "center");
+    return box ? [box.x + box.width / 2, box.y + box.height / 2] : [0, 0];
 }
 function groupOrigin(element) {
     if ((0, utils_1.isPoint2)(element.origin))
         return [element.origin[0] - element.x, element.origin[1] - element.y];
-    const width = Number(element.width ?? 0);
-    const height = Number(element.height ?? 0);
-    return (0, utils_1.anchorPoint)({ x: 0, y: 0, width, height }, typeof element.origin === "string" ? element.origin : "center");
+    return [Number(element.width ?? 0) / 2, Number(element.height ?? 0) / 2];
 }
 function imageFit(fit) {
     if (fit === "contain")
@@ -272,6 +273,9 @@ function escapeAttr(value) {
 function escapeText(value) {
     return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function escapeTextLine(value) {
+    return escapeText(value.replace(/\t/g, "    ")).replace(/ /g, "&#160;");
+}
 function clamp(value, min, max) {
     return Math.max(min, Math.min(max, value));
 }

package/dist/src/render/three-html.js

@@ -7,9 +7,8 @@ function renderToThreeHtml(document, options = {}) {
     const width = document.canvas.width;
     const height = document.canvas.height;
     const background = options.transparent ? "transparent" : (document.canvas.background ?? "#ffffff");
-    const kernel = (0, kernel_1.lowerVisualDocument)(document);
-    const elements = JSON.stringify(kernel.elements ?? []);
     const initialTime = Number(options.time ?? 0);
+    const frames = JSON.stringify(sampleKernelFrames(document, initialTime));
     const threeRuntime = options.threeRuntime ?? DEFAULT_THREE_RUNTIME;
     return `<!doctype html>
 <html>
@@ -54,7 +53,7 @@ import * as THREE from ${JSON.stringify(threeRuntime)};
 const width = ${JSON.stringify(width)};
 const height = ${JSON.stringify(height)};
 const background = ${JSON.stringify(background)};
-const elements = ${elements};
+const frames = ${frames};
 const canvas = document.getElementById("stage");
 const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, preserveDrawingBuffer: true });
 renderer.setSize(width, height, false);
@@ -67,24 +66,9 @@ const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
 camera.position.set(6, 4, 8);
 camera.lookAt(0, 0, 0);
 
-const objects = [];
-let hasLight = false;
-for (const element of elements) {
-  const object = createObject(element);
-  if (!object) continue;
-  bindObject(object, element);
-  scene.add(object);
-  objects.push(object);
-  if (element.type === "light") hasLight = true;
-}
-
-if (!hasLight) {
-  const ambient = new THREE.AmbientLight(0xffffff, 0.6);
-  scene.add(ambient);
-  const light = new THREE.DirectionalLight(0xffffff, 1);
-  light.position.set(5, 8, 5);
-  scene.add(light);
-}
+const content = new THREE.Group();
+scene.add(content);
+let currentFrameIndex = -1;
 
 function createObject(element) {
   if (element.type === "mesh3d") {
@@ -165,107 +149,62 @@ function materialFor(element) {
   });
 }
 
-function bindObject(object, element) {
-  object.userData.sketchmark = {
-    element,
-    basePosition: object.position.clone(),
-    baseRotation: object.rotation.clone(),
-    baseScale: object.scale.clone(),
-    baseOpacity: materialOpacity(object),
-    baseIntensity: typeof object.intensity === "number" ? object.intensity : undefined
-  };
-}
-
 function showTime(rawTime = 0) {
   const time = Number.isFinite(Number(rawTime)) ? Number(rawTime) : 0;
-  for (const object of objects) applyAnimatedObject(object, time);
+  const frameIndex = nearestFrameIndex(time);
+  if (frameIndex !== currentFrameIndex) {
+    currentFrameIndex = frameIndex;
+    setElements(frames[frameIndex] ? frames[frameIndex].elements : []);
+  }
   renderer.render(scene, camera);
   return true;
 }
 
-function applyAnimatedObject(object, time) {
-  const data = object.userData.sketchmark;
-  if (!data) return;
-  const element = data.element;
-  const animation = element.animate || {};
-
-  const basePosition = vector(element.position, [data.basePosition.x, data.basePosition.y, data.basePosition.z]);
-  const px = valueAt(animation.positionX, time, basePosition[0]);
-  const py = valueAt(animation.positionY, time, basePosition[1]);
-  const pz = valueAt(animation.positionZ, time, basePosition[2]);
-  object.position.set(px, py, pz);
-
-  const rx = data.baseRotation.x + degrees(valueAt(animation.rotationX, time, number(element.rotationX, 0)));
-  const ry = data.baseRotation.y + degrees(valueAt(animation.rotationY, time, number(element.rotationY, 0)));
-  const rz = data.baseRotation.z + degrees(valueAt(animation.rotationZ, time, number(element.rotationZ, 0)));
-  object.rotation.set(rx, ry, rz);
-
-  const baseScale = data.baseScale;
-  const allScale = valueAt(animation.scale, time, number(element.scale, 1));
-  const sx = baseScale.x * valueAt(animation.scaleX, time, number(element.scaleX, allScale));
-  const sy = baseScale.y * valueAt(animation.scaleY, time, number(element.scaleY, allScale));
-  const sz = baseScale.z * valueAt(animation.scaleZ, time, number(element.scaleZ, allScale));
-  object.scale.set(sx, sy, sz);
-
-  const opacity = valueAt(animation.opacity, time, number(element.opacity, data.baseOpacity ?? 1));
-  setMaterialOpacity(object, opacity);
-
-  if (typeof object.intensity === "number") {
-    object.intensity = valueAt(animation.intensity, time, number(element.intensity, data.baseIntensity ?? 1));
+function setElements(elements) {
+  while (content.children.length) {
+    const child = content.children[0];
+    content.remove(child);
+    disposeObject(child);
+  }
+  let hasLight = false;
+  for (const element of elements || []) {
+    const object = createObject(element);
+    if (!object) continue;
+    content.add(object);
+    if (element.type === "light") hasLight = true;
+  }
+  if (!hasLight) {
+    const ambient = new THREE.AmbientLight(0xffffff, 0.6);
+    content.add(ambient);
+    const light = new THREE.DirectionalLight(0xffffff, 1);
+    light.position.set(5, 8, 5);
+    content.add(light);
   }
 }
 
-function valueAt(animation, time, fallback) {
-  if (!animation || typeof animation !== "object") return fallback;
-  if (Array.isArray(animation.keyframes) && animation.keyframes.length) {
-    const frames = animation.keyframes
-      .filter((frame) => Array.isArray(frame) && Number.isFinite(Number(frame[0])) && Number.isFinite(Number(frame[1])))
-      .map((frame) => [Number(frame[0]), Number(frame[1])])
-      .sort((a, b) => a[0] - b[0]);
-    if (!frames.length) return fallback;
-    if (time <= frames[0][0]) return frames[0][1];
-    for (let index = 0; index < frames.length - 1; index += 1) {
-      const from = frames[index];
-      const to = frames[index + 1];
-      if (time > to[0]) continue;
-      const span = Math.max(0.000001, to[0] - from[0]);
-      const t = easeValue((time - from[0]) / span, animation.ease);
-      return from[1] + (to[1] - from[1]) * t;
+function nearestFrameIndex(time) {
+  if (!frames.length) return 0;
+  let best = 0;
+  let bestDistance = Infinity;
+  for (let index = 0; index < frames.length; index += 1) {
+    const distance = Math.abs(number(frames[index].time, 0) - time);
+    if (distance < bestDistance) {
+      best = index;
+      bestDistance = distance;
     }
-    return frames[frames.length - 1][1];
   }
-
-  const from = number(animation.from, fallback);
-  const to = number(animation.to, fallback);
-  const delay = number(animation.delay, 0);
-  const duration = Math.max(0.000001, number(animation.duration, 1));
-  const t = easeValue((time - delay) / duration, animation.ease);
-  if (time <= delay) return from;
-  if (time >= delay + duration) return to;
-  return from + (to - from) * t;
-}
-
-function easeValue(value, kind) {
-  const t = clamp(value, 0, 1);
-  if (kind === "ease-in") return t * t;
-  if (kind === "ease-out") return 1 - (1 - t) * (1 - t);
-  if (kind === "ease-in-out") return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-  return t;
+  return best;
 }
 
-function materialOpacity(object) {
-  const material = Array.isArray(object.material) ? object.material[0] : object.material;
-  return material && typeof material.opacity === "number" ? material.opacity : 1;
-}
-
-function setMaterialOpacity(object, opacity) {
-  if (!object.material) return;
-  const materials = Array.isArray(object.material) ? object.material : [object.material];
-  for (const material of materials) {
-    material.opacity = opacity;
-    material.transparent = opacity < 1;
-    material.needsUpdate = true;
-  }
+function disposeObject(object) {
+  object.traverse((child) => {
+    if (child.geometry) child.geometry.dispose();
+    const materials = Array.isArray(child.material) ? child.material : child.material ? [child.material] : [];
+    for (const material of materials) {
+      if (material.map) material.map.dispose();
+      material.dispose();
+    }
+  });
 }
 
 function applyPosition(object, position) {
@@ -286,10 +225,6 @@ function degrees(value) {
   return number(value, 0) * Math.PI / 180;
 }
 
-function clamp(value, min, max) {
-  return Math.max(min, Math.min(max, Number(value) || 0));
-}
-
 window.__SKETCHMARK_SHOW_TIME__ = showTime;
 window.__SKETCHMARK_READY__ = true;
 window.addEventListener("message", (event) => {
@@ -301,3 +236,22 @@ showTime(${JSON.stringify(initialTime)});
 </body>
 </html>`;
 }
+function sampleKernelFrames(document, initialTime) {
+    const duration = finiteNumber(document.canvas.duration, 0);
+    const fps = Math.max(1, Math.min(60, finiteNumber(document.canvas.fps, 30)));
+    const times = new Set([0, Math.max(0, initialTime)]);
+    if (duration > 0) {
+        const frameCount = Math.ceil(duration * fps);
+        for (let index = 0; index <= frameCount; index += 1) {
+            times.add(Number((index / fps).toFixed(6)));
+        }
+        times.add(duration);
+    }
+    return [...times]
+        .sort((left, right) => left - right)
+        .map((time) => ({ time, elements: (0, kernel_1.resolveKernelFrame)(document, time).elements ?? [] }));
+}
+function finiteNumber(value, fallback) {
+    const numeric = Number(value);
+    return Number.isFinite(numeric) ? numeric : fallback;
+}

package/dist/src/scenes.js

@@ -16,6 +16,7 @@ function documentForScene(document, sceneId) {
         ...(0, utils_1.clone)(document),
         canvas: { ...document.canvas, ...(scene.canvas ?? {}) },
         elements: (0, utils_1.clone)(scene.elements),
+        motion: (0, utils_1.clone)(scene.motion),
         scenes: undefined,
         sequences: undefined
     };