@hyperframes/core 0.6.87 → 0.6.89

package/dist/studio-api/routes/files.js

@@ -122,11 +122,6 @@ function updateReferences(projectDir, oldPath, newPath) {
  */
 function extractGsapScriptBlock(html) {
     const { document } = parseHTML(html);
-    // linkedom's querySelectorAll doesn't descend into <template> content, but
-    // sub-compositions wrap their markup (and the GSAP <script>) in a <template>.
-    // Search top-level scripts first, then each template's own scripts. Operate
-    // on the template element directly (NOT .content) so textContent writes are
-    // reflected in document.toString().
     const scripts = [
         ...document.querySelectorAll("script:not([src])"),
         ...Array.from(document.querySelectorAll("template")).flatMap((tmpl) => Array.from(tmpl.querySelectorAll("script:not([src])"))),
@@ -138,6 +133,7 @@ function extractGsapScriptBlock(html) {
             content.includes(".to(")) {
             return {
                 scriptText: content,
+                document,
                 replaceScript(newText) {
                     script.textContent = newText;
                     return document.toString();
@@ -147,10 +143,279 @@ function extractGsapScriptBlock(html) {
     }
     return null;
 }
+function stripStudioEditsFromTarget(document, selector) {
+    if (!selector)
+        return 0;
+    let stripped = 0;
+    try {
+        for (const el of document.querySelectorAll(selector)) {
+            if (!el.getAttribute("data-hf-studio-path-offset"))
+                continue;
+            const htmlEl = el;
+            const originalTranslate = el.getAttribute("data-hf-studio-original-inline-translate");
+            htmlEl.style.removeProperty("--hf-studio-offset-x");
+            htmlEl.style.removeProperty("--hf-studio-offset-y");
+            if (originalTranslate) {
+                htmlEl.style.setProperty("translate", originalTranslate);
+            }
+            else {
+                htmlEl.style.removeProperty("translate");
+            }
+            el.removeAttribute("data-hf-studio-path-offset");
+            el.removeAttribute("data-hf-studio-original-translate");
+            el.removeAttribute("data-hf-studio-original-inline-translate");
+            stripped++;
+        }
+    }
+    catch {
+        // Invalid selector — skip silently.
+    }
+    return stripped;
+}
+function bakeVisibilityOnDelete(document, anim) {
+    let finalOpacity;
+    if (anim.method === "from") {
+        return;
+    }
+    if (anim.keyframes) {
+        const kfs = anim.keyframes.keyframes;
+        for (let i = kfs.length - 1; i >= 0; i--) {
+            if ("opacity" in kfs[i].properties) {
+                finalOpacity = kfs[i].properties.opacity;
+                break;
+            }
+        }
+    }
+    else if ("opacity" in anim.properties) {
+        finalOpacity = anim.properties.opacity;
+    }
+    if (finalOpacity == null) {
+        return;
+    }
+    if (typeof finalOpacity === "string" && /^[+\-*]=/.test(finalOpacity)) {
+        return;
+    }
+    const numOpacity = Number(finalOpacity);
+    if (!Number.isFinite(numOpacity) || numOpacity === 0)
+        return;
+    try {
+        for (const el of document.querySelectorAll(anim.targetSelector)) {
+            el.style.setProperty("opacity", String(numOpacity));
+        }
+    }
+    catch {
+        // Invalid selector — skip silently.
+    }
+}
 /** Lazy-load gsapParser to avoid pulling recast into every file-route import. */
 async function loadGsapParser() {
     return import("../../parsers/gsapParser.js");
 }
+// ── GSAP mutation executor ──────────────────────────────────────────────────
+async function executeGsapMutation(body, block, respond) {
+    const parser = await loadGsapParser();
+    const { parseGsapScript, updateAnimationInScript, addAnimationToScript, removeAnimationFromScript, addKeyframeToScript, removeKeyframeFromScript, updateKeyframeInScript, convertToKeyframesInScript, removeAllKeyframesFromScript, materializeKeyframesInScript, unrollDynamicAnimations, setArcPathInScript, updateArcSegmentInScript, removeArcPathFromScript, addAnimationWithKeyframesToScript, } = parser;
+    function requireAnimation(scriptText, animationId) {
+        const parsed = parseGsapScript(scriptText);
+        const anim = parsed.animations.find((a) => a.id === animationId);
+        if (!anim)
+            return { err: respond({ error: "animation not found" }, 404) };
+        return { anim };
+    }
+    function requireFromToAnimation(scriptText, animationId) {
+        const result = requireAnimation(scriptText, animationId);
+        if ("err" in result)
+            return result;
+        if (result.anim.method !== "fromTo")
+            return { err: respond({ error: "animation is not a fromTo" }, 400) };
+        return result;
+    }
+    switch (body.type) {
+        case "update-property": {
+            const r = requireAnimation(block.scriptText, body.animationId);
+            if ("err" in r)
+                return r.err;
+            return updateAnimationInScript(block.scriptText, body.animationId, {
+                properties: { ...r.anim.properties, [body.property]: body.value },
+            });
+        }
+        case "update-from-property": {
+            const r = requireFromToAnimation(block.scriptText, body.animationId);
+            if ("err" in r)
+                return r.err;
+            return updateAnimationInScript(block.scriptText, body.animationId, {
+                fromProperties: { ...(r.anim.fromProperties ?? {}), [body.property]: body.value },
+            });
+        }
+        case "update-meta": {
+            return updateAnimationInScript(block.scriptText, body.animationId, body.updates);
+        }
+        case "add": {
+            if (body.fromProperties && body.method !== "fromTo") {
+                return respond({ error: "fromProperties is only valid for method=fromTo" }, 400);
+            }
+            const result = addAnimationToScript(block.scriptText, {
+                targetSelector: body.targetSelector,
+                method: body.method,
+                position: body.position,
+                duration: body.duration,
+                ease: body.ease,
+                properties: body.properties,
+                fromProperties: body.fromProperties,
+            });
+            return result.script;
+        }
+        case "delete": {
+            const delTarget = requireAnimation(block.scriptText, body.animationId);
+            if (!("err" in delTarget) && body.stripStudioEdits) {
+                stripStudioEditsFromTarget(block.document, delTarget.anim.targetSelector);
+                bakeVisibilityOnDelete(block.document, delTarget.anim);
+            }
+            return removeAnimationFromScript(block.scriptText, body.animationId);
+        }
+        case "add-property": {
+            const r = requireAnimation(block.scriptText, body.animationId);
+            if ("err" in r)
+                return r.err;
+            return updateAnimationInScript(block.scriptText, body.animationId, {
+                properties: { ...r.anim.properties, [body.property]: body.defaultValue },
+            });
+        }
+        case "add-from-property": {
+            const r = requireFromToAnimation(block.scriptText, body.animationId);
+            if ("err" in r)
+                return r.err;
+            return updateAnimationInScript(block.scriptText, body.animationId, {
+                fromProperties: { ...(r.anim.fromProperties ?? {}), [body.property]: body.defaultValue },
+            });
+        }
+        case "remove-property": {
+            const r = requireAnimation(block.scriptText, body.animationId);
+            if ("err" in r)
+                return r.err;
+            const filtered = { ...r.anim.properties };
+            delete filtered[body.property];
+            return updateAnimationInScript(block.scriptText, body.animationId, {
+                properties: filtered,
+            });
+        }
+        case "remove-from-property": {
+            const r = requireFromToAnimation(block.scriptText, body.animationId);
+            if ("err" in r)
+                return r.err;
+            const filtered = { ...(r.anim.fromProperties ?? {}) };
+            delete filtered[body.property];
+            return updateAnimationInScript(block.scriptText, body.animationId, {
+                fromProperties: filtered,
+            });
+        }
+        case "add-keyframe": {
+            return addKeyframeToScript(block.scriptText, body.animationId, body.percentage, body.properties, body.ease, body.backfillDefaults);
+        }
+        case "remove-keyframe": {
+            return removeKeyframeFromScript(block.scriptText, body.animationId, body.percentage);
+        }
+        case "update-keyframe": {
+            return updateKeyframeInScript(block.scriptText, body.animationId, body.percentage, body.properties, body.ease);
+        }
+        case "convert-to-keyframes": {
+            return convertToKeyframesInScript(block.scriptText, body.animationId, body.resolvedFromValues);
+        }
+        case "remove-all-keyframes": {
+            const preCollapse = requireAnimation(block.scriptText, body.animationId);
+            if (!("err" in preCollapse)) {
+                bakeVisibilityOnDelete(block.document, preCollapse.anim);
+            }
+            return removeAllKeyframesFromScript(block.scriptText, body.animationId);
+        }
+        case "materialize-keyframes": {
+            if (body.allElements && body.allElements.length > 0) {
+                return unrollDynamicAnimations(block.scriptText, body.animationId, body.allElements);
+            }
+            return materializeKeyframesInScript(block.scriptText, body.animationId, body.keyframes, body.easeEach, body.resolvedSelector);
+        }
+        case "set-arc-path": {
+            return setArcPathInScript(block.scriptText, body.animationId, {
+                enabled: body.enabled,
+                autoRotate: body.autoRotate ?? false,
+                segments: body.segments ?? [],
+            });
+        }
+        case "update-arc-segment": {
+            return updateArcSegmentInScript(block.scriptText, body.animationId, body.segmentIndex, {
+                ...(body.curviness !== undefined ? { curviness: body.curviness } : {}),
+                ...(body.cp1 ? { cp1: body.cp1 } : {}),
+                ...(body.cp2 ? { cp2: body.cp2 } : {}),
+            });
+        }
+        case "remove-arc-path": {
+            return removeArcPathFromScript(block.scriptText, body.animationId);
+        }
+        case "add-with-keyframes": {
+            const result = addAnimationWithKeyframesToScript(block.scriptText, body.targetSelector, body.position, body.duration, body.keyframes, body.ease);
+            return result.script;
+        }
+        default:
+            return respond({ error: `unknown mutation type: ${body.type}` }, 400);
+    }
+}
+// ── Upload file processing ──────────────────────────────────────────────────
+async function processUploadedFiles(formData, targetDir, projectDir) {
+    const MAX_UPLOAD_BYTES = 500 * 1024 * 1024; // 500 MB per file
+    const uploaded = [];
+    const skipped = [];
+    const invalid = [];
+    const entries = formData.entries();
+    // Derive the subdirectory prefix from targetDir relative to projectDir
+    const subDir = targetDir === projectDir ? "" : targetDir.slice(projectDir.length + 1);
+    for (const [, value] of entries) {
+        if (typeof value === "string")
+            continue;
+        // Strip path separators — browsers may include directory components
+        const name = value.name.split("/").pop()?.split("\\").pop() ?? "";
+        if (!name || name.includes("\0") || name.includes(".."))
+            continue;
+        // Reject individual files that exceed the size limit
+        if (value.size > MAX_UPLOAD_BYTES) {
+            skipped.push(name);
+            continue;
+        }
+        const destPath = resolve(targetDir, name);
+        if (!isSafePath(projectDir, destPath))
+            continue;
+        // Don't overwrite — append (2), (3), etc.
+        let finalPath = destPath;
+        let finalName = name;
+        if (existsSync(finalPath)) {
+            // Handle dotfiles correctly: .gitignore → ext="", base=".gitignore"
+            const dotIdx = name.indexOf(".", name.startsWith(".") ? 1 : 0);
+            const ext = dotIdx > 0 ? name.slice(dotIdx) : "";
+            const base = dotIdx > 0 ? name.slice(0, dotIdx) : name;
+            let n = 2;
+            while (n < 10000 && existsSync(resolve(targetDir, `${base} (${n})${ext}`)))
+                n++;
+            if (n >= 10000) {
+                skipped.push(name);
+                continue;
+            }
+            finalName = `${base} (${n})${ext}`;
+            finalPath = resolve(targetDir, finalName);
+        }
+        const buffer = Buffer.from(await value.arrayBuffer());
+        const validation = validateUploadedMediaBuffer(finalName, buffer);
+        if (!validation.ok) {
+            invalid.push({ name: finalName, reason: validation.reason });
+            continue;
+        }
+        writeFileSync(finalPath, buffer);
+        const relativePath = subDir ? join(subDir, finalName) : finalName;
+        uploaded.push(relativePath);
+        if (isAudioFile(finalName)) {
+            generateWaveformCache(projectDir, relativePath).catch(() => { });
+        }
+    }
+    return { uploaded, skipped, invalid };
+}
 // ── Route registration ──────────────────────────────────────────────────────
 export function registerFileRoutes(api, adapter) {
     // ── Read ──
@@ -343,57 +608,8 @@ export function registerFileRoutes(api, adapter) {
         if (subDir && !existsSync(targetDir))
             mkdirSync(targetDir, { recursive: true });
         const formData = await c.req.formData();
-        const uploaded = [];
-        const skipped = [];
-        const invalid = [];
-        const entries = formData.entries();
-        for (const [, value] of entries) {
-            if (typeof value === "string")
-                continue;
-            // Strip path separators — browsers may include directory components
-            const name = value.name.split("/").pop()?.split("\\").pop() ?? "";
-            if (!name || name.includes("\0") || name.includes(".."))
-                continue;
-            // Reject individual files that exceed the size limit
-            if (value.size > MAX_UPLOAD_BYTES) {
-                skipped.push(name);
-                continue;
-            }
-            const destPath = resolve(targetDir, name);
-            if (!isSafePath(project.dir, destPath))
-                continue;
-            // Don't overwrite — append (2), (3), etc.
-            let finalPath = destPath;
-            let finalName = name;
-            if (existsSync(finalPath)) {
-                // Handle dotfiles correctly: .gitignore → ext="", base=".gitignore"
-                const dotIdx = name.indexOf(".", name.startsWith(".") ? 1 : 0);
-                const ext = dotIdx > 0 ? name.slice(dotIdx) : "";
-                const base = dotIdx > 0 ? name.slice(0, dotIdx) : name;
-                let n = 2;
-                while (n < 10000 && existsSync(resolve(targetDir, `${base} (${n})${ext}`)))
-                    n++;
-                if (n >= 10000) {
-                    skipped.push(name);
-                    continue;
-                }
-                finalName = `${base} (${n})${ext}`;
-                finalPath = resolve(targetDir, finalName);
-            }
-            const buffer = Buffer.from(await value.arrayBuffer());
-            const validation = validateUploadedMediaBuffer(finalName, buffer);
-            if (!validation.ok) {
-                invalid.push({ name: finalName, reason: validation.reason });
-                continue;
-            }
-            writeFileSync(finalPath, buffer);
-            const relativePath = subDir ? join(subDir, finalName) : finalName;
-            uploaded.push(relativePath);
-            if (isAudioFile(finalName)) {
-                generateWaveformCache(project.dir, relativePath).catch(() => { });
-            }
-        }
-        return c.json({ ok: true, files: uploaded, skipped, invalid }, 201);
+        const result = await processUploadedFiles(formData, targetDir, project.dir);
+        return c.json({ ok: true, files: result.uploaded, skipped: result.skipped, invalid: result.invalid }, 201);
     });
     // ── GSAP Animations (parse) ──
     api.get("/projects/:id/gsap-animations/*", async (c) => {
@@ -416,6 +632,7 @@ export function registerFileRoutes(api, adapter) {
         const parsed = parseGsapScript(block.scriptText);
         return c.json(parsed);
     });
+    // ── GSAP Mutations ──
     api.post("/projects/:id/gsap-mutations/*", async (c) => {
         const res = await resolveProjectPath(c, adapter, (id) => `/projects/${id}/gsap-mutations/`, {
             mustExist: true,
@@ -426,184 +643,44 @@ export function registerFileRoutes(api, adapter) {
         if (!body || !body.type) {
             return c.json({ error: "mutation type required" }, 400);
         }
-        const html = readFileSync(res.absPath, "utf-8");
-        const block = extractGsapScriptBlock(html);
+        let html = readFileSync(res.absPath, "utf-8");
+        let block = extractGsapScriptBlock(html);
+        if (!block && (body.type === "add" || body.type === "add-with-keyframes")) {
+            const compId = html.match(/data-composition-id="([^"]+)"/)?.[1] ?? "main";
+            const { GSAP_CDN } = await import("../../templates/constants.js");
+            const gsapCdn = `<script src="${GSAP_CDN}"></script>`;
+            const bootstrap = [
+                gsapCdn,
+                "<script>",
+                "window.__timelines = window.__timelines || {};",
+                `const tl = gsap.timeline({ paused: true });`,
+                `window.__timelines["${compId}"] = tl;`,
+                "</script>",
+            ].join("\n");
+            if (html.includes("</body>")) {
+                html = html.replace("</body>", `${bootstrap}\n</body>`);
+            }
+            else {
+                html += `\n${bootstrap}`;
+            }
+            block = extractGsapScriptBlock(html);
+        }
         if (!block) {
             return c.json({ error: "no GSAP script found in file" }, 400);
         }
-        const { parseGsapScript, updateAnimationInScript, addAnimationToScript, removeAnimationFromScript, } = await loadGsapParser();
-        function requireAnimation(scriptText, animationId) {
-            const parsed = parseGsapScript(scriptText);
-            const anim = parsed.animations.find((a) => a.id === animationId);
-            if (!anim)
-                return { err: c.json({ error: "animation not found" }, 404) };
-            return { anim };
-        }
-        function requireFromToAnimation(scriptText, animationId) {
-            const result = requireAnimation(scriptText, animationId);
-            if ("err" in result)
-                return result;
-            if (result.anim.method !== "fromTo")
-                return { err: c.json({ error: "animation is not a fromTo" }, 400) };
+        const respond = (data, status) => 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- bridge between generic status and Hono's literal union
+        status ? c.json(data, status) : c.json(data);
+        const result = await executeGsapMutation(body, block, respond);
+        if (result instanceof Response)
             return result;
-        }
-        let newScript;
-        // fallow-ignore-next-line complexity
-        switch (body.type) {
-            case "update-property": {
-                const r = requireAnimation(block.scriptText, body.animationId);
-                if ("err" in r)
-                    return r.err;
-                newScript = updateAnimationInScript(block.scriptText, body.animationId, {
-                    properties: { ...r.anim.properties, [body.property]: body.value },
-                });
-                break;
-            }
-            case "update-from-property": {
-                const r = requireFromToAnimation(block.scriptText, body.animationId);
-                if ("err" in r)
-                    return r.err;
-                newScript = updateAnimationInScript(block.scriptText, body.animationId, {
-                    fromProperties: { ...(r.anim.fromProperties ?? {}), [body.property]: body.value },
-                });
-                break;
-            }
-            case "update-meta": {
-                newScript = updateAnimationInScript(block.scriptText, body.animationId, body.updates);
-                break;
-            }
-            case "add": {
-                if (body.fromProperties && body.method !== "fromTo") {
-                    return c.json({ error: "fromProperties is only valid for method=fromTo" }, 400);
-                }
-                const result = addAnimationToScript(block.scriptText, {
-                    targetSelector: body.targetSelector,
-                    method: body.method,
-                    position: body.position,
-                    duration: body.duration,
-                    ease: body.ease,
-                    properties: body.properties,
-                    fromProperties: body.fromProperties,
-                });
-                newScript = result.script;
-                break;
-            }
-            case "delete": {
-                newScript = removeAnimationFromScript(block.scriptText, body.animationId);
-                break;
-            }
-            case "add-property": {
-                const r = requireAnimation(block.scriptText, body.animationId);
-                if ("err" in r)
-                    return r.err;
-                newScript = updateAnimationInScript(block.scriptText, body.animationId, {
-                    properties: { ...r.anim.properties, [body.property]: body.defaultValue },
-                });
-                break;
-            }
-            case "add-from-property": {
-                const r = requireFromToAnimation(block.scriptText, body.animationId);
-                if ("err" in r)
-                    return r.err;
-                newScript = updateAnimationInScript(block.scriptText, body.animationId, {
-                    fromProperties: { ...(r.anim.fromProperties ?? {}), [body.property]: body.defaultValue },
-                });
-                break;
-            }
-            case "remove-property": {
-                const r = requireAnimation(block.scriptText, body.animationId);
-                if ("err" in r)
-                    return r.err;
-                const filtered = { ...r.anim.properties };
-                delete filtered[body.property];
-                newScript = updateAnimationInScript(block.scriptText, body.animationId, {
-                    properties: filtered,
-                });
-                break;
-            }
-            case "remove-from-property": {
-                const r = requireFromToAnimation(block.scriptText, body.animationId);
-                if ("err" in r)
-                    return r.err;
-                const filtered = { ...(r.anim.fromProperties ?? {}) };
-                delete filtered[body.property];
-                newScript = updateAnimationInScript(block.scriptText, body.animationId, {
-                    fromProperties: filtered,
-                });
-                break;
-            }
-            case "add-keyframe": {
-                const { addKeyframeToScript } = await loadGsapParser();
-                newScript = addKeyframeToScript(block.scriptText, body.animationId, body.percentage, body.properties, body.ease, body.backfillDefaults);
-                break;
-            }
-            case "remove-keyframe": {
-                const { removeKeyframeFromScript } = await loadGsapParser();
-                newScript = removeKeyframeFromScript(block.scriptText, body.animationId, body.percentage);
-                break;
-            }
-            case "update-keyframe": {
-                const { updateKeyframeInScript } = await loadGsapParser();
-                newScript = updateKeyframeInScript(block.scriptText, body.animationId, body.percentage, body.properties, body.ease);
-                break;
-            }
-            case "convert-to-keyframes": {
-                const { convertToKeyframesInScript } = await loadGsapParser();
-                newScript = convertToKeyframesInScript(block.scriptText, body.animationId, body.resolvedFromValues);
-                break;
-            }
-            case "remove-all-keyframes": {
-                const { removeAllKeyframesFromScript } = await loadGsapParser();
-                newScript = removeAllKeyframesFromScript(block.scriptText, body.animationId);
-                break;
-            }
-            case "materialize-keyframes": {
-                const { materializeKeyframesInScript, unrollDynamicAnimations } = await loadGsapParser();
-                if (body.allElements && body.allElements.length > 0) {
-                    newScript = unrollDynamicAnimations(block.scriptText, body.animationId, body.allElements);
-                }
-                else {
-                    newScript = materializeKeyframesInScript(block.scriptText, body.animationId, body.keyframes, body.easeEach, body.resolvedSelector);
-                }
-                break;
-            }
-            case "set-arc-path": {
-                const { setArcPathInScript } = await loadGsapParser();
-                newScript = setArcPathInScript(block.scriptText, body.animationId, {
-                    enabled: body.enabled,
-                    autoRotate: body.autoRotate ?? false,
-                    segments: body.segments ?? [],
-                });
-                break;
-            }
-            case "update-arc-segment": {
-                const { updateArcSegmentInScript } = await loadGsapParser();
-                newScript = updateArcSegmentInScript(block.scriptText, body.animationId, body.segmentIndex, {
-                    ...(body.curviness !== undefined ? { curviness: body.curviness } : {}),
-                    ...(body.cp1 ? { cp1: body.cp1 } : {}),
-                    ...(body.cp2 ? { cp2: body.cp2 } : {}),
-                });
-                break;
-            }
-            case "remove-arc-path": {
-                const { removeArcPathFromScript } = await loadGsapParser();
-                newScript = removeArcPathFromScript(block.scriptText, body.animationId);
-                break;
-            }
-            case "add-with-keyframes": {
-                const { addAnimationWithKeyframesToScript } = await loadGsapParser();
-                const result = addAnimationWithKeyframesToScript(block.scriptText, body.targetSelector, body.position, body.duration, body.keyframes, body.ease);
-                newScript = result.script;
-                break;
-            }
-            default:
-                return c.json({ error: `unknown mutation type: ${body.type}` }, 400);
-        }
+        const newScript = result;
         const newHtml = block.replaceScript(newScript);
         if (newHtml !== html) {
             writeFileSync(res.absPath, newHtml, "utf-8");
         }
         // Re-parse the mutated script so the UI gets fresh state
+        const { parseGsapScript } = await loadGsapParser();
         const freshParsed = parseGsapScript(newScript);
         return c.json({
             ok: true,