sketchmark 2.1.5 → 2.1.7

package/dist/src/browser-editor.js

@@ -0,0 +1,450 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSketchmarkBrowserEditor = createSketchmarkBrowserEditor;
+const animatable_1 = require("./animatable");
+const browser_export_1 = require("./browser-export");
+const edit_1 = require("./edit");
+const normalize_1 = require("./normalize");
+const svg_1 = require("./render/svg");
+const utils_1 = require("./utils");
+const validate_1 = require("./validate");
+const STYLE_ID = "sketchmark-browser-editor-style";
+function createSketchmarkBrowserEditor(root, options) {
+    ensureStyle();
+    const document = (0, utils_1.clone)(options.document);
+    assertValid(document);
+    const refs = (0, edit_1.listElementReferences)(document);
+    const state = {
+        root,
+        options,
+        document,
+        selectedId: refs[0]?.id ?? "",
+        currentTime: 0,
+        playing: false,
+        raf: 0,
+        saveTimer: 0,
+        lastFrame: 0
+    };
+    root.classList.add("sketchmark-browser-editor");
+    root.innerHTML = [
+        "<aside class='skme-tree'></aside>",
+        "<main class='skme-main'>",
+        "  <div class='skme-toolbar'></div>",
+        "  <div class='skme-stage-wrap'><div class='skme-stage'></div></div>",
+        "  <div class='skme-playbar'></div>",
+        "</main>",
+        "<aside class='skme-inspector'></aside>"
+    ].join("");
+    renderAll(state);
+    return {
+        getDocument: () => (0, utils_1.clone)(state.document),
+        setDocument: (next) => {
+            assertValid(next);
+            state.document = (0, utils_1.clone)(next);
+            if (state.selectedId && !(0, edit_1.findElementById)(state.document, state.selectedId))
+                state.selectedId = "";
+            renderAll(state);
+        },
+        save: () => saveNow(state),
+        destroy: () => {
+            window.clearTimeout(state.saveTimer);
+            window.cancelAnimationFrame(state.raf);
+            root.innerHTML = "";
+            root.classList.remove("sketchmark-browser-editor");
+        }
+    };
+}
+function renderAll(state) {
+    renderTree(state);
+    renderToolbar(state);
+    renderStage(state);
+    renderPlaybar(state);
+    renderInspector(state);
+}
+function renderTree(state) {
+    const tree = requirePart(state.root, ".skme-tree");
+    const refs = (0, edit_1.listElementReferences)(state.document);
+    tree.innerHTML = `<div class="skme-panel-title">Elements</div>${refs.map((ref) => {
+        const selected = ref.id === state.selectedId ? " selected" : "";
+        const pad = Math.max(0, ref.depth) * 12;
+        return `<button class="skme-tree-row${selected}" data-select="${escapeAttr(ref.id)}" style="padding-left:${pad + 6}px"><span>${escapeHtml(ref.id)}</span><small>${escapeHtml(ref.type)}</small></button>`;
+    }).join("") || "<p class='skme-muted'>No elements.</p>"}`;
+    tree.querySelectorAll("[data-select]").forEach((button) => {
+        button.onclick = () => {
+            state.selectedId = button.dataset.select ?? "";
+            renderTree(state);
+            renderStage(state);
+            renderInspector(state);
+        };
+    });
+}
+function renderToolbar(state) {
+    const toolbar = requirePart(state.root, ".skme-toolbar");
+    toolbar.innerHTML = [
+        `<strong>${escapeHtml(state.options.title ?? "Sketchmark Editor")}</strong>`,
+        "<span class='skme-spacer'></span>",
+        "<button data-save>Save</button>",
+        "<button data-export='svg'>SVG</button>",
+        "<button data-export='png'>PNG</button>",
+        "<button data-export='jpg'>JPG</button>",
+        "<button data-export='html'>HTML</button>",
+        "<button data-export='json'>JSON</button>",
+        "<button data-export='mp4'>MP4</button>",
+        "<span class='skme-status' data-status></span>"
+    ].join("");
+    toolbar.querySelector("[data-save]").onclick = () => saveNow(state);
+    toolbar.querySelectorAll("[data-export]").forEach((button) => {
+        button.onclick = () => exportDocument(state, button.dataset.export);
+    });
+}
+function renderStage(state) {
+    const stage = requirePart(state.root, ".skme-stage");
+    try {
+        const resolved = (0, normalize_1.resolveVisualFrame)(state.document, state.currentTime);
+        stage.innerHTML = (0, svg_1.renderResolvedSvg)(resolved);
+        const svg = stage.querySelector("svg");
+        if (!svg)
+            return;
+        svg.addEventListener("pointerdown", (event) => beginDrag(state, event));
+        svg.querySelectorAll("[id]").forEach((element) => {
+            element.style.cursor = "pointer";
+            element.addEventListener("click", (event) => {
+                event.stopPropagation();
+                const id = event.currentTarget.id;
+                if (id) {
+                    state.selectedId = id;
+                    renderTree(state);
+                    renderStage(state);
+                    renderInspector(state);
+                }
+            });
+        });
+        if (state.selectedId) {
+            const selected = svg.querySelector(`#${cssEscape(state.selectedId)}`);
+            if (selected)
+                drawSelection(svg, selected);
+        }
+    }
+    catch (error) {
+        stage.innerHTML = `<pre class="skme-error">${escapeHtml(errorMessage(error))}</pre>`;
+    }
+}
+function renderPlaybar(state) {
+    const playbar = requirePart(state.root, ".skme-playbar");
+    const duration = Math.max(0, Number(state.document.canvas.duration ?? 0));
+    playbar.innerHTML = [
+        `<button data-play>${state.playing ? "Pause" : "Play"}</button>`,
+        `<input data-time type="range" min="0" max="${duration || 1}" step="0.001" value="${state.currentTime}">`,
+        `<span>${state.currentTime.toFixed(2)}s / ${duration.toFixed(2)}s</span>`
+    ].join("");
+    playbar.querySelector("[data-play]").onclick = () => togglePlayback(state);
+    const slider = playbar.querySelector("[data-time]");
+    slider.oninput = () => {
+        state.currentTime = Number(slider.value);
+        renderStage(state);
+        renderPlaybar(state);
+    };
+}
+function renderInspector(state) {
+    const inspector = requirePart(state.root, ".skme-inspector");
+    const element = state.selectedId ? (0, edit_1.findElementById)(state.document, state.selectedId) : undefined;
+    if (!element) {
+        inspector.innerHTML = "<div class='skme-panel-title'>Inspector</div><p class='skme-muted'>Select an element.</p>";
+        return;
+    }
+    const tracks = (0, edit_1.listTimelineTracks)(state.document, element.id ?? "");
+    inspector.innerHTML = [
+        "<div class='skme-panel-title'>Inspector</div>",
+        fieldText("ID", element.id ?? "", true),
+        fieldText("Type", element.type, true),
+        numberField("x", numberProp(element, "x")),
+        numberField("y", numberProp(element, "y")),
+        numberField("width", numberProp(element, "width")),
+        numberField("height", numberProp(element, "height")),
+        numberField("opacity", numberProp(element, "opacity")),
+        numberField("rotation", numberProp(element, "rotation")),
+        numberField("scale", numberProp(element, "scale")),
+        paintField("fill", element.fill),
+        paintField("stroke", element.stroke),
+        numberField("strokeWidth", numberProp(element, "strokeWidth")),
+        textAreaField("text", element.type === "text" ? element.text ?? "" : undefined),
+        "<hr>",
+        renderKeyframeEditor(element),
+        "<hr>",
+        "<div class='skme-panel-title small'>Timeline</div>",
+        tracks.length ? tracks.map((track) => `<div class='skme-track'><b>${escapeHtml(track.property)}</b><span>${track.keyframes.length} keyframes</span></div>`).join("") : "<p class='skme-muted'>No tracks.</p>"
+    ].join("");
+    inspector.querySelectorAll("[data-prop]").forEach((input) => {
+        input.oninput = () => {
+            const property = input.dataset.prop;
+            const value = input.dataset.kind === "number" ? Number(input.value) : input.value;
+            if (input.dataset.kind === "number" && !Number.isFinite(value))
+                return;
+            updateProperty(state, element.id, property, value);
+        };
+    });
+    const propertySelect = inspector.querySelector("[data-key-prop]");
+    const keyButton = inspector.querySelector("[data-add-key]");
+    if (propertySelect && keyButton) {
+        keyButton.onclick = () => addKeyframe(state, element, propertySelect.value);
+    }
+}
+function renderKeyframeEditor(element) {
+    const id = element.id;
+    if (!id)
+        return "";
+    const options = (0, animatable_1.animatablePropertiesForElement)(element)
+        .map((spec) => `<option value="${escapeAttr(spec.property)}">${escapeHtml(spec.property)}</option>`)
+        .join("");
+    return [
+        "<div class='skme-panel-title small'>Keyframe</div>",
+        "<div class='skme-row'>",
+        `<select data-key-prop>${options}</select>`,
+        "<button data-add-key>Set</button>",
+        "</div>"
+    ].join("");
+}
+function updateProperty(state, id, property, value) {
+    try {
+        state.document = (0, edit_1.setElementProperty)(state.document, id, property, value);
+        markChanged(state);
+        renderStage(state);
+    }
+    catch (error) {
+        setStatus(state, errorMessage(error), true);
+    }
+}
+function addKeyframe(state, element, property) {
+    if (!element.id)
+        return;
+    const value = (0, animatable_1.getPropertyValue)(element, property) ?? (0, animatable_1.baseValueForProperty)(element, property);
+    if (value === undefined) {
+        setStatus(state, `No value for ${property}`, true);
+        return;
+    }
+    try {
+        state.document = (0, edit_1.setTimelineKeyframe)(state.document, element.id, property, state.currentTime, value);
+        markChanged(state);
+        renderInspector(state);
+        renderStage(state);
+    }
+    catch (error) {
+        setStatus(state, errorMessage(error), true);
+    }
+}
+function beginDrag(state, event) {
+    const target = event.target;
+    const id = closestSvgId(target);
+    if (!id)
+        return;
+    const element = (0, edit_1.findElementById)(state.document, id);
+    if (!element || !("x" in element) || !("y" in element))
+        return;
+    const point = svgPoint(event);
+    if (!point)
+        return;
+    state.selectedId = id;
+    state.drag = { id, start: point, baseX: Number(element.x ?? 0), baseY: Number(element.y ?? 0) };
+    const svg = event.currentTarget;
+    svg.setPointerCapture(event.pointerId);
+    svg.addEventListener("pointermove", dragMove);
+    svg.addEventListener("pointerup", dragEnd);
+    svg.addEventListener("pointercancel", dragEnd);
+    renderTree(state);
+    renderInspector(state);
+    function dragMove(moveEvent) {
+        if (!state.drag)
+            return;
+        const nextPoint = svgPoint(moveEvent);
+        if (!nextPoint)
+            return;
+        const current = (0, edit_1.findElementById)(state.document, state.drag.id);
+        if (!current || !("x" in current) || !("y" in current))
+            return;
+        current.x = state.drag.baseX + nextPoint[0] - state.drag.start[0];
+        current.y = state.drag.baseY + nextPoint[1] - state.drag.start[1];
+        renderStage(state);
+        renderInspector(state);
+    }
+    function dragEnd(endEvent) {
+        svg.releasePointerCapture(endEvent.pointerId);
+        svg.removeEventListener("pointermove", dragMove);
+        svg.removeEventListener("pointerup", dragEnd);
+        svg.removeEventListener("pointercancel", dragEnd);
+        state.drag = undefined;
+        markChanged(state);
+    }
+}
+function togglePlayback(state) {
+    state.playing = !state.playing;
+    state.lastFrame = performance.now();
+    renderPlaybar(state);
+    if (state.playing)
+        tick(state);
+}
+function tick(state) {
+    if (!state.playing)
+        return;
+    const now = performance.now();
+    const delta = Math.max(0, (now - state.lastFrame) / 1000);
+    state.lastFrame = now;
+    const duration = Math.max(0, Number(state.document.canvas.duration ?? 0));
+    state.currentTime = duration > 0 ? (state.currentTime + delta) % duration : 0;
+    renderStage(state);
+    renderPlaybar(state);
+    state.raf = window.requestAnimationFrame(() => tick(state));
+}
+function markChanged(state) {
+    state.options.onChange?.((0, utils_1.clone)(state.document));
+    setStatus(state, "Changed");
+    if (state.options.autoSaveDelay === false || !state.options.onSave)
+        return;
+    window.clearTimeout(state.saveTimer);
+    state.saveTimer = window.setTimeout(() => {
+        saveNow(state).catch((error) => setStatus(state, errorMessage(error), true));
+    }, state.options.autoSaveDelay ?? 800);
+}
+async function saveNow(state) {
+    if (!state.options.onSave) {
+        setStatus(state, "No save handler", true);
+        return;
+    }
+    await state.options.onSave((0, utils_1.clone)(state.document));
+    setStatus(state, "Saved");
+}
+async function exportDocument(state, format) {
+    try {
+        setStatus(state, format === "mp4" ? "Exporting MP4..." : "Exporting...");
+        await (0, browser_export_1.exportVisualInBrowser)(state.document, {
+            format,
+            title: state.options.title ?? "sketchmark",
+            time: state.currentTime,
+            sourceDocument: state.document,
+            onProgress: (progress) => setStatus(state, `Export ${progress}%`)
+        });
+        setStatus(state, "Exported");
+    }
+    catch (error) {
+        setStatus(state, errorMessage(error), true);
+    }
+}
+function assertValid(document) {
+    const result = (0, validate_1.validateVisualDocument)(document);
+    if (!result.ok)
+        throw new Error(result.issues.map((issue) => `${issue.path}: ${issue.message}`).join("\n"));
+}
+function fieldText(label, value, readonly) {
+    return `<label class="skme-field"><span>${label}</span><input value="${escapeAttr(value)}"${readonly ? " readonly" : ""}></label>`;
+}
+function numberField(property, value) {
+    if (value === undefined)
+        return "";
+    return `<label class="skme-field"><span>${property}</span><input data-prop="${escapeAttr(property)}" data-kind="number" type="number" step="0.1" value="${Number(value)}"></label>`;
+}
+function paintField(property, value) {
+    if (typeof value !== "string")
+        return "";
+    return `<label class="skme-field"><span>${property}</span><input data-prop="${escapeAttr(property)}" value="${escapeAttr(value)}"></label>`;
+}
+function textAreaField(property, value) {
+    if (value === undefined)
+        return "";
+    return `<label class="skme-field"><span>${property}</span><textarea data-prop="${escapeAttr(property)}">${escapeHtml(value)}</textarea></label>`;
+}
+function numberProp(element, property) {
+    const value = element[property];
+    return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+function closestSvgId(target) {
+    let current = target;
+    while (current && current instanceof SVGElement) {
+        if (current.id)
+            return current.id;
+        current = current.parentElement;
+    }
+    return "";
+}
+function svgPoint(event) {
+    const svg = event.currentTarget ?? event.target.ownerSVGElement;
+    if (!svg)
+        return undefined;
+    const point = svg.createSVGPoint();
+    point.x = event.clientX;
+    point.y = event.clientY;
+    const matrix = svg.getScreenCTM();
+    if (!matrix)
+        return undefined;
+    const mapped = point.matrixTransform(matrix.inverse());
+    return [mapped.x, mapped.y];
+}
+function drawSelection(svg, selected) {
+    const box = selected.getBBox();
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rect.setAttribute("x", String(box.x));
+    rect.setAttribute("y", String(box.y));
+    rect.setAttribute("width", String(box.width));
+    rect.setAttribute("height", String(box.height));
+    rect.setAttribute("fill", "none");
+    rect.setAttribute("stroke", "#0b63ff");
+    rect.setAttribute("stroke-width", "1.5");
+    rect.setAttribute("stroke-dasharray", "5 4");
+    rect.setAttribute("pointer-events", "none");
+    svg.appendChild(rect);
+}
+function setStatus(state, message, isError = false) {
+    const status = state.root.querySelector("[data-status]");
+    if (!status)
+        return;
+    status.textContent = message;
+    status.classList.toggle("error", isError);
+}
+function requirePart(root, selector) {
+    const part = root.querySelector(selector);
+    if (!part)
+        throw new Error(`Missing editor part ${selector}.`);
+    return part;
+}
+function errorMessage(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+function escapeHtml(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttr(value) {
+    return escapeHtml(value);
+}
+function cssEscape(value) {
+    const css = globalThis.CSS;
+    if (css?.escape)
+        return css.escape(value);
+    return value.replace(/[^A-Za-z0-9_-]/g, (char) => `\\${char}`);
+}
+function ensureStyle() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `
+.sketchmark-browser-editor{height:100%;min-height:100vh;display:grid;grid-template-columns:240px 1fr 320px;background:#c0c0c0;color:#111;font:13px Arial,sans-serif;overflow:hidden}
+.skme-tree,.skme-inspector{overflow:auto;background:#f2f2f2;border-right:1px solid #888;padding:8px}
+.skme-inspector{border-right:0;border-left:1px solid #888}
+.skme-main{min-width:0;display:grid;grid-template-rows:auto 1fr auto}
+.skme-toolbar,.skme-playbar{display:flex;align-items:center;gap:6px;padding:6px;background:#e5e5e5;border-bottom:1px solid #999}
+.skme-playbar{border-top:1px solid #999;border-bottom:0}
+.skme-playbar input{flex:1}
+.skme-stage-wrap{min-width:0;min-height:0;display:grid;place-items:center;overflow:auto;background:#fff}
+.skme-stage svg{display:block;max-width:100%;max-height:calc(100vh - 88px);background:#fff;border:1px solid #333;overflow:visible}
+.skme-panel-title{font-weight:bold;margin:0 0 8px}.skme-panel-title.small{font-size:12px;margin-top:8px}
+.skme-tree-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:1px solid transparent;background:transparent;text-align:left;padding:3px 6px;cursor:pointer}
+.skme-tree-row small{color:#555}.skme-tree-row.selected{background:#003399;color:#fff}.skme-tree-row.selected small{color:#dbeafe}
+.skme-field{display:grid;grid-template-columns:88px 1fr;gap:6px;align-items:center;margin:5px 0}
+.skme-field input,.skme-field textarea,.skme-field select{width:100%;box-sizing:border-box;font:13px Arial,sans-serif}
+.skme-field textarea{min-height:88px}
+.skme-row{display:grid;grid-template-columns:1fr auto;gap:6px}
+.skme-track{display:flex;justify-content:space-between;border:1px solid #aaa;background:#e9e9e9;margin:4px 0;padding:4px}
+.skme-spacer{flex:1}.skme-muted{color:#555}.skme-error,.skme-status.error{color:#900}.skme-status{min-width:90px;color:#333}
+button{font:13px Arial,sans-serif;padding:3px 8px}
+hr{border:0;border-top:1px solid #bbb;margin:10px 0}
+`;
+    document.head.appendChild(style);
+}

package/dist/src/edit.js

@@ -142,13 +142,20 @@ function makeKeyframe(time, value, options) {
 function mergeKeyframe(existing, next) {
     if (Array.isArray(existing))
         return next;
-    return {
+    const merged = {
         ...existing,
-        ...next,
-        in: next.in ?? existing.in,
-        out: next.out ?? existing.out,
-        interpolation: next.interpolation ?? existing.interpolation
+        ...next
     };
+    mergeCurveValue(merged, "in", next.in ?? existing.in);
+    mergeCurveValue(merged, "out", next.out ?? existing.out);
+    mergeCurveValue(merged, "interpolation", next.interpolation ?? existing.interpolation);
+    return merged;
+}
+function mergeCurveValue(frame, key, value) {
+    if (value)
+        frame[key] = value;
+    else
+        delete frame[key];
 }
 function keyframeTime(frame) {
     return Array.isArray(frame) ? frame[0] : frame.time;
@@ -171,30 +178,88 @@ function repairLegacyTimelineCurves(document) {
 }
 function repairTrackCurve(track) {
     const record = track;
-    if (typeof record.curve === "string") {
-        const curve = legacyCurve(record.curve);
-        if (curve)
-            record.curve = curve;
-        else
-            delete record.curve;
-    }
+    repairCurveField(record, "curve");
 }
 function repairKeyframeCurve(frame) {
     if (Array.isArray(frame))
         return;
     const record = frame;
-    for (const key of ["in", "out", "interpolation"]) {
-        if (typeof record[key] !== "string")
-            continue;
-        const curve = legacyCurve(record[key]);
-        if (curve)
-            record[key] = curve;
-        else
-            delete record[key];
+    for (const key of ["in", "out", "interpolation"])
+        repairCurveField(record, key);
+}
+function repairCurveField(record, key) {
+    if (!(key in record))
+        return;
+    const curve = coerceTimelineCurve(record[key]);
+    if (curve)
+        record[key] = curve;
+    else
+        delete record[key];
+}
+function coerceTimelineCurve(value) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === "string")
+        return legacyCurve(value);
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        return undefined;
+    const record = value;
+    if (record.type === "hold")
+        return { type: "hold" };
+    if (record.type === "cubicBezier") {
+        const x1 = finiteNumber(record.x1);
+        const y1 = finiteNumber(record.y1);
+        const x2 = finiteNumber(record.x2);
+        const y2 = finiteNumber(record.y2);
+        if (x1 === undefined || y1 === undefined || x2 === undefined || y2 === undefined)
+            return undefined;
+        if (x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1)
+            return undefined;
+        return { type: "cubicBezier", x1, y1, x2, y2 };
+    }
+    if (record.type === "graph") {
+        const points = Array.isArray(record.points)
+            ? record.points.map(coerceCurvePoint).filter((point) => Boolean(point))
+            : [];
+        if (points.length < 2)
+            return undefined;
+        let previousX = Number.NEGATIVE_INFINITY;
+        for (const point of points) {
+            if (point[0] < 0 || point[0] > 1 || point[0] <= previousX)
+                return undefined;
+            previousX = point[0];
+        }
+        if (points[0]?.[0] !== 0 || points[points.length - 1]?.[0] !== 1)
+            return undefined;
+        return { type: "graph", points };
     }
+    return undefined;
+}
+function coerceCurvePoint(value) {
+    if (!Array.isArray(value) || value.length < 2)
+        return undefined;
+    const x = finiteNumber(value[0]);
+    const y = finiteNumber(value[1]);
+    return x === undefined || y === undefined ? undefined : [x, y];
+}
+function finiteNumber(value) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : undefined;
 }
 function legacyCurve(value) {
-    return (0, keyframes_1.timelineCurvePreset)(value);
+    switch (value.trim()) {
+        case "ease":
+        case "easeInOut":
+        case "ease-inout":
+        case "easeInout":
+            return (0, keyframes_1.timelineCurvePreset)("ease-in-out");
+        case "easeIn":
+            return (0, keyframes_1.timelineCurvePreset)("ease-in");
+        case "easeOut":
+            return (0, keyframes_1.timelineCurvePreset)("ease-out");
+        default:
+            return (0, keyframes_1.timelineCurvePreset)(value);
+    }
 }
 function finiteOrZero(value) {
     return (0, utils_1.isFiniteNumber)(value) ? value : 0;

package/dist/src/keyframes.js

@@ -151,13 +151,20 @@ function makeKeyframe(time, value, options = {}) {
 function mergeKeyframe(existing, next) {
     if (Array.isArray(existing))
         return next;
-    return {
+    const merged = {
         ...existing,
-        ...next,
-        in: next.in ?? existing.in,
-        out: next.out ?? existing.out,
-        interpolation: next.interpolation ?? existing.interpolation
+        ...next
     };
+    mergeCurveValue(merged, "in", next.in ?? existing.in);
+    mergeCurveValue(merged, "out", next.out ?? existing.out);
+    mergeCurveValue(merged, "interpolation", next.interpolation ?? existing.interpolation);
+    return merged;
+}
+function mergeCurveValue(frame, key, value) {
+    if (value)
+        frame[key] = value;
+    else
+        delete frame[key];
 }
 function keyframeTime(frame) {
     return Array.isArray(frame) ? frame[0] : frame.time;

package/dist/tests/run.js

@@ -487,6 +487,39 @@ test("edits nested element properties and timeline keyframes", () => {
     const cleaned = (0, src_1.removeTimelineKeyframe)(animated, "nested", "position", 1);
     assert(!(0, src_1.listTimelineTracks)(cleaned, "nested").length, "timeline keyframe removal should prune empty tracks");
 });
+test("editor helpers repair malformed timeline curve fields before validating", () => {
+    const doc = {
+        version: 1,
+        canvas: { width: 320, height: 180, duration: 2 },
+        elements: [
+            {
+                id: "dot",
+                type: "point",
+                x: 0,
+                y: 0,
+                timeline: {
+                    tracks: {
+                        position: {
+                            curve: "easeOut",
+                            keyframes: [
+                                { time: 0, value: [0, 0], in: null, interpolation: ["linear"] },
+                                { time: 1, value: [100, 0] }
+                            ]
+                        }
+                    }
+                }
+            }
+        ]
+    };
+    const repaired = (0, src_1.setTimelineKeyframe)(doc, "dot", "position", 0, [0, 0], { out: { type: "hold" } });
+    const result = (0, src_1.validateVisualDocument)(repaired);
+    assert(result.ok, `repaired edit document should validate: ${result.issues.map((item) => item.message).join("; ")}`);
+    const track = (repaired.elements?.[0]).timeline.tracks.position;
+    const first = track.keyframes[0];
+    assert(track.curve.type === "cubicBezier", "legacy camel-case track curve should be canonicalized");
+    assert(first.out.type === "hold", "new keyframe curve should be applied");
+    assert(!("in" in first) && !("interpolation" in first), "malformed keyframe curves should be removed");
+});
 test("edits and renders path position offsets", () => {
     const doc = {
         version: 1,