Skip to content

fix(studio): gsap panel bug bash — clamping, overlay, click cycling, visibility toggle #1126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
miguel-heygen merged 11 commits into from
May 30, 2026
Merged

fix(studio): gsap panel bug bash — clamping, overlay, click cycling, visibility toggle #1126

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
89241a1
fix(studio): gsap panel bug bash — clamping, overlay, click cycling, …
miguel-heygen May 29, 2026
209bef5
fix(studio): address Vai+Rames follow-up notes on hf#1122
miguel-heygen May 29, 2026
e1964a6
fix(studio): buildTweenSummary formats percent props as 0-100% not 0-1
miguel-heygen May 29, 2026
43cf8ed
fix(studio): show all .html files as compositions in sidebar
miguel-heygen May 29, 2026
7a8db93
fix(studio): detect compositions by data-composition-id, not path con…
miguel-heygen May 29, 2026
21b462c
fix(studio): rename Ask agent to Copy prompt to AI agent, show contex…
miguel-heygen May 29, 2026
e433750
fix(studio): wire contextPreview to agent modal
miguel-heygen May 29, 2026
dcdee10
fix(core): seek timeline to current time after initial bind
miguel-heygen May 30, 2026
e915957
feat(core): add gsap_timeline_not_registered lint rule
miguel-heygen May 30, 2026
bb88f72
fix(studio): address hf#1126 review feedback
miguel-heygen May 30, 2026
d14dffa
refactor(studio): extract App.tsx below 600 LOC, remove lefthook exem…
miguel-heygen May 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions lefthook.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ pre-commit:
exclude: "(\\.test\\.(ts|tsx)$|\\.generated\\.)"
run: |
for f in {staged_files}; do
# Skip test and generated files (exclude pattern backup in case lefthook doesn't filter)
case "$f" in *.test.ts|*.test.tsx|*.generated.*) continue ;; esac
# Skip test, generated, and App.tsx (652 LOC, decomposition tracked in PR #724)
case "$f" in *.test.ts|*.test.tsx|*.generated.*|*/App.tsx) continue ;; esac
lines=$(wc -l < "$f")
if [ "$lines" -gt 600 ]; then
echo "ERROR: $f has $lines lines (max 600)"
Expand Down
53 changes: 53 additions & 0 deletions packages/core/src/lint/rules/gsap.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -865,4 +865,57 @@ describe("GSAP rules", () => {
const finding = result.findings.find((f) => f.code === "gsap_from_opacity_noop");
expect(finding).toBeUndefined();
});

it("warns when gsap.timeline is created but not registered in __timelines", async () => {
const html = `
<html><body>
<div data-composition-id="root" data-width="1920" data-height="1080">
<div id="box">Hello</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
tl.to("#box", { opacity: 0.5, duration: 2 });
</script>
</body></html>`;
const result = await lintHyperframeHtml(html);
const finding = result.findings.find((f) => f.code === "gsap_timeline_not_registered");
expect(finding).toBeDefined();
expect(finding?.severity).toBe("warning");
});

it("does NOT warn when timeline is registered in __timelines", async () => {
const html = `
<html><body>
<div data-composition-id="root" data-width="1920" data-height="1080">
<div id="box">Hello</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.to("#box", { opacity: 0.5, duration: 2 });
window.__timelines["root"] = tl;
</script>
</body></html>`;
const result = await lintHyperframeHtml(html);
const finding = result.findings.find((f) => f.code === "gsap_timeline_not_registered");
expect(finding).toBeUndefined();
});

it("does NOT warn for sub-compositions (template-based)", async () => {
const html = `
<template>
<div data-composition-id="sub" data-width="1920" data-height="1080">
<div id="box">Hello</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.to("#box", { opacity: 0.5, duration: 2 });
</script>
</template>`;
const result = await lintHyperframeHtml(html);
const finding = result.findings.find((f) => f.code === "gsap_timeline_not_registered");
expect(finding).toBeUndefined();
});
});
27 changes: 27 additions & 0 deletions packages/core/src/lint/rules/gsap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -785,6 +785,33 @@ export const gsapRules: LintRule<LintContext>[] = [
return findings;
},

// gsap_timeline_not_registered
({ scripts, rawSource, options }) => {
const findings: HyperframeLintFinding[] = [];
const canInheritFromHost =
options.isSubComposition || rawSource.trimStart().toLowerCase().startsWith("<template");

for (const script of scripts) {
const content = script.content;
if (!/gsap\.timeline/.test(content)) continue;
const hasRegistration = WINDOW_TIMELINE_ASSIGN_PATTERN.test(content);
if (hasRegistration || canInheritFromHost) continue;
findings.push({
code: "gsap_timeline_not_registered",
severity: "warning",
message:
"GSAP timeline is created but never registered in window.__timelines. " +
"The runtime discovers timelines from this registry — without registration, " +
"animations will not play during preview or render.",
fixHint:
"Add `window.__timelines = window.__timelines || {};` and " +
'`window.__timelines["root"] = tl;` after creating the timeline (use the ' +
"composition's data-composition-id as the key).",
});
}
return findings;
},

// gsap_from_opacity_noop — CSS opacity:0 + gsap.from({opacity:0}) = invisible forever
async ({ styles, scripts, tags }) => {
const findings: HyperframeLintFinding[] = [];
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/runtime/init.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -948,6 +948,10 @@ export function initSandboxRuntimeModular(): void {
// clock not yet initialized — duration will be set during TransportClock setup
}
state.capturedTimeline.pause();
const seekTime = Math.max(0, state.currentTime || 0);
if (typeof state.capturedTimeline.totalTime === "function") {
state.capturedTimeline.totalTime(seekTime, false);
}
}
if (resolution.diagnostics) {
postRuntimeMessage({
Expand Down
28 changes: 28 additions & 0 deletions packages/core/src/studio-api/routes/files.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,6 +327,34 @@ const tl = gsap.timeline();
expect(anim.properties.opacity).toBe(1);
});

it("add mutation returns 400 when fromProperties provided for non-fromTo method", async () => {
const projectDir = createProjectDir();
const EMPTY_COMP = `<!DOCTYPE html><html><body><div id="el"></div><script data-hyperframes-gsap>
const tl = gsap.timeline();
</script></body></html>`;
writeHtml(projectDir, "empty.html", EMPTY_COMP);
const app = new Hono();
registerFileRoutes(app, createAdapter(projectDir));

const res = await app.request("http://localhost/projects/demo/gsap-mutations/empty.html", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
type: "add",
targetSelector: "#el",
method: "to",
position: 0,
duration: 0.5,
ease: "power2.out",
properties: { opacity: 1 },
fromProperties: { opacity: 0 },
}),
});
expect(res.status).toBe(400);
const body = (await res.json()) as { error: string };
expect(body.error).toContain("fromProperties");
});

it("edits a template-wrapped tween in place, preserving gsap.set and the IIFE", async () => {
const projectDir = createProjectDir();
writeComp(projectDir, "scene.html", TEMPLATE_COMP);
Expand Down
70 changes: 43 additions & 27 deletions packages/core/src/studio-api/routes/files.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { isAudioFile } from "../helpers/mime.js";
import { generateWaveformCache } from "../helpers/waveform.js";
import { validateUploadedMediaBuffer } from "../helpers/mediaValidation.js";
import { isSafePath } from "../helpers/safePath.js";
import type { GsapAnimation } from "../../parsers/gsapSerialize.js";
import {
removeElementFromHtml,
patchElementInHtml,
Expand Down Expand Up @@ -600,26 +601,44 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
removeAnimationFromScript,
} = await loadGsapParser();

function requireAnimation(
scriptText: string,
animationId: string,
): { anim: GsapAnimation } | { err: Response } {
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: string,
animationId: string,
): { anim: GsapAnimation } | { err: Response } {
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) };
return result;
}

let newScript: string;

// fallow-ignore-next-line complexity
switch (body.type) {
case "update-property": {
const parsed = parseGsapScript(block.scriptText);
const anim = parsed.animations.find((a) => a.id === body.animationId);
if (!anim) return c.json({ error: "animation not found" }, 404);
const r = requireAnimation(block.scriptText, body.animationId);
if ("err" in r) return r.err;
newScript = updateAnimationInScript(block.scriptText, body.animationId, {
properties: { ...anim.properties, [body.property]: body.value },
properties: { ...r.anim.properties, [body.property]: body.value },
});
break;
}
case "update-from-property": {
const parsed = parseGsapScript(block.scriptText);
const anim = parsed.animations.find((a) => a.id === body.animationId);
if (!anim) return c.json({ error: "animation not found" }, 404);
if (anim.method !== "fromTo") return c.json({ error: "animation is not a fromTo" }, 400);
const r = requireFromToAnimation(block.scriptText, body.animationId);
if ("err" in r) return r.err;
newScript = updateAnimationInScript(block.scriptText, body.animationId, {
fromProperties: { ...(anim.fromProperties ?? {}), [body.property]: body.value },
fromProperties: { ...(r.anim.fromProperties ?? {}), [body.property]: body.value },
});
break;
}
Expand All @@ -628,6 +647,9 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
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,
Expand All @@ -645,41 +667,35 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
break;
}
case "add-property": {
const parsed = parseGsapScript(block.scriptText);
const anim = parsed.animations.find((a) => a.id === body.animationId);
if (!anim) return c.json({ error: "animation not found" }, 404);
const r = requireAnimation(block.scriptText, body.animationId);
if ("err" in r) return r.err;
newScript = updateAnimationInScript(block.scriptText, body.animationId, {
properties: { ...anim.properties, [body.property]: body.defaultValue },
properties: { ...r.anim.properties, [body.property]: body.defaultValue },
});
break;
}
case "add-from-property": {
const parsed = parseGsapScript(block.scriptText);
const anim = parsed.animations.find((a) => a.id === body.animationId);
if (!anim) return c.json({ error: "animation not found" }, 404);
if (anim.method !== "fromTo") return c.json({ error: "animation is not a fromTo" }, 400);
const r = requireFromToAnimation(block.scriptText, body.animationId);
if ("err" in r) return r.err;
newScript = updateAnimationInScript(block.scriptText, body.animationId, {
fromProperties: { ...(anim.fromProperties ?? {}), [body.property]: body.defaultValue },
fromProperties: { ...(r.anim.fromProperties ?? {}), [body.property]: body.defaultValue },
});
break;
}
case "remove-property": {
const parsed = parseGsapScript(block.scriptText);
const anim = parsed.animations.find((a) => a.id === body.animationId);
if (!anim) return c.json({ error: "animation not found" }, 404);
const filtered = { ...anim.properties };
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 parsed = parseGsapScript(block.scriptText);
const anim = parsed.animations.find((a) => a.id === body.animationId);
if (!anim) return c.json({ error: "animation not found" }, 404);
if (anim.method !== "fromTo") return c.json({ error: "animation is not a fromTo" }, 400);
const filtered = { ...(anim.fromProperties ?? {}) };
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,
Expand Down
15 changes: 14 additions & 1 deletion packages/core/src/studio-api/routes/projects.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
import { readFileSync } from "node:fs";
import { join } from "node:path";
import type { Hono } from "hono";
import type { StudioApiAdapter } from "../types.js";
import { walkDir } from "../helpers/safePath.js";

function isCompositionFile(projectDir: string, relPath: string): boolean {
if (!relPath.endsWith(".html")) return false;
try {
const content = readFileSync(join(projectDir, relPath), "utf-8");
return content.includes("data-composition-id");
} catch {
return false;
}
}

export function registerProjectRoutes(api: Hono, adapter: StudioApiAdapter): void {
// List all projects
api.get("/projects", async (c) => {
Expand All @@ -25,6 +37,7 @@ export function registerProjectRoutes(api: Hono, adapter: StudioApiAdapter): voi
const project = await adapter.resolveProject(c.req.param("id"));
if (!project) return c.json({ error: "not found" }, 404);
const files = walkDir(project.dir);
return c.json({ id: project.id, dir: project.dir, title: project.title, files });
const compositions = files.filter((f) => isCompositionFile(project.dir, f));
return c.json({ id: project.id, dir: project.dir, title: project.title, files, compositions });
});
}
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_00s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_05s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_10s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_15s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_20s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_25s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_30s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_35s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_40s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/actual_0_45s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_00s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_05s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_10s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_15s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_20s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_25s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_30s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_35s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_40s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/producer/tests/iframe-render-compat/failures/frames/expected_0_45s.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading