@hyperframes/studio 0.8.28 → 0.8.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.28",
+  "version": "0.8.30",
   "description": "",
   "repository": {
     "type": "git",
@@ -48,11 +48,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.28",
-    "@hyperframes/player": "0.8.28",
-    "@hyperframes/sdk": "0.8.28",
-    "@hyperframes/studio-server": "0.8.28",
-    "@hyperframes/parsers": "0.8.28"
+    "@hyperframes/player": "0.8.30",
+    "@hyperframes/core": "0.8.30",
+    "@hyperframes/sdk": "0.8.30",
+    "@hyperframes/studio-server": "0.8.30",
+    "@hyperframes/parsers": "0.8.30"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -69,7 +69,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.28"
+    "@hyperframes/producer": "0.8.30"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/colorGradingScopePatch.test.ts

@@ -2,6 +2,26 @@ import { describe, expect, it } from "vitest";
 import { patchMediaColorGradingInHtml } from "./colorGradingScopePatch";
 
 describe("patchMediaColorGradingInHtml", () => {
+  it.each(['"', "'"])("replaces and removes long grading values quoted with %s", (quote) => {
+    const otherQuote = quote === '"' ? "'" : '"';
+    for (const value of [
+      "",
+      "line1\nline2",
+      "a".repeat(100_000),
+      `data-color-grading=${otherQuote}a`.repeat(10_000),
+    ]) {
+      const html = `<img alt="kept"\tDATA-COLOR-GRADING=${quote}${value}${quote} />`;
+      expect(patchMediaColorGradingInHtml(html, "new")).toEqual({
+        html: '<img alt="kept" data-color-grading="new" />',
+        count: 1,
+      });
+      expect(patchMediaColorGradingInHtml(html, null)).toEqual({
+        html: '<img alt="kept" />',
+        count: 1,
+      });
+    }
+  });
+
   it("adds color grading to video and image tags only", () => {
     const { html, count } = patchMediaColorGradingInHtml(
       `<div><video id="v"></video><img id="i" /><audio id="a"></audio></div>`,

package/src/components/editor/colorGradingScopePatch.ts

@@ -1,5 +1,5 @@
 const MEDIA_TAG_RE = /<\s*(video|img)\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
-const COLOR_GRADING_ATTR_RE = /\sdata-color-grading=(["'])([\s\S]*?)\1/i;
+const COLOR_GRADING_ATTR_RE = /\sdata-color-grading=(?:"[^"]*"|'[^']*')/i;
 const IGNORED_HTML_RANGE_RE = /<!--[\s\S]*?-->|<(script|style)\b[\s\S]*?<\/\1\s*>/gi;
 
 interface TextRange {

package/src/hooks/useExternalFileChangeCoordinator.test.tsx

@@ -175,7 +175,7 @@ describe("external file change coordinator", () => {
     expect(options.reloadSdkSession).toHaveBeenCalledOnce();
   });
 
-  it("ignores stale drain completion after a newer generation", async () => {
+  it("serializes drains and processes stashed events", async () => {
     const drains: Array<(result: { status: "clean" }) => void> = [];
     const { options } = await mountCoordinator({
       drainPendingChanges: () => new Promise((resolve) => drains.push(resolve)),
@@ -184,11 +184,14 @@ describe("external file change coordinator", () => {
       handler?.({ path: "index.html", content: "first", version: "v2" });
       handler?.({ path: "index.html", content: "second", version: "v3" });
     });
+    expect(drains).toHaveLength(1);
     await act(async () => drains[0]?.({ status: "clean" }));
-    expect(options.reloadPreview).not.toHaveBeenCalled();
-    await act(async () => drains[1]?.({ status: "clean" }));
     expect(options.reloadPreview).toHaveBeenCalledOnce();
-    expect(options.reloadSdkSession).toHaveBeenCalledOnce();
+    await act(async () => {});
+    expect(drains).toHaveLength(2);
+    await act(async () => drains[1]?.({ status: "clean" }));
+    expect(options.reloadPreview).toHaveBeenCalledTimes(2);
+    expect(options.reloadSdkSession).toHaveBeenCalledTimes(2);
   });
 
   it("restores a durable unresolved conflict after remount", async () => {
@@ -285,4 +288,38 @@ describe("external file change coordinator", () => {
     );
     expect(onAcceptedPersistedFileChange).toHaveBeenCalledOnce();
   });
+
+  it("completes a reload after a burst of rapid external writes", async () => {
+    const drains: Array<(result: { status: "clean" }) => void> = [];
+    const reloadPreview = vi.fn();
+    const onAcceptedPersistedFileChange = vi.fn();
+    await mountCoordinator({
+      drainPendingChanges: vi.fn(
+        () => new Promise<{ status: "clean" }>((resolve) => drains.push(resolve)),
+      ),
+      reloadPreview,
+      onAcceptedPersistedFileChange,
+    });
+
+    // Fire three events in rapid succession (simulates generator + check + snapshot)
+    act(() => {
+      handler?.({ path: "index.html", content: "write-1", version: "v1" });
+      handler?.({ path: "index.html", content: "write-2", version: "v2" });
+      handler?.({ path: "index.html", content: "write-3", version: "v3" });
+    });
+
+    // Only one drain runs — events 2 and 3 are stashed (last one wins)
+    expect(drains).toHaveLength(1);
+
+    // Complete the first drain — triggers reload, then stashed event starts a second drain
+    await act(async () => drains[0]?.({ status: "clean" }));
+    expect(reloadPreview).toHaveBeenCalledOnce();
+    await act(async () => {});
+    expect(drains).toHaveLength(2);
+
+    // Complete the second drain — processes the final write
+    await act(async () => drains[1]?.({ status: "clean" }));
+    expect(reloadPreview).toHaveBeenCalledTimes(2);
+    expect(onAcceptedPersistedFileChange).toHaveBeenCalledTimes(2);
+  });
 });

package/src/hooks/useExternalFileChangeCoordinator.ts

@@ -135,6 +135,8 @@ export function useExternalFileChangeCoordinator({
   const lastEventIdentityRef = useRef<string | null>(null);
   const blockedRef = useRef(blocked);
   const snapshotWriteTailRef = useRef<Promise<void>>(Promise.resolve());
+  const drainingRef = useRef(false);
+  const pendingPayloadRef = useRef<{ payload: unknown } | null>(null);
   blockedRef.current = blocked;
 
   useEffect(() => {
@@ -213,37 +215,11 @@ export function useExternalFileChangeCoordinator({
     await next;
   }, []);
 
-  const processChange = useCallback(
+  const drainOnePending = useCallback(
     // fallow-ignore-next-line complexity
-    async (payload: unknown, allowDuplicate = false) => {
+    async (payload: unknown) => {
       const path = readStudioFileChangePath(payload);
-      if (!path || !projectId) return;
-      const pendingTimelinePaths = pendingTimelineEditPathRef.current;
-      // The old path-only suppression could drop a real agent/user write that
-      // raced ahead of the timeline write receipt. Clear the legacy marker but
-      // decide ownership only from the exact write token/content below.
-      pendingTimelinePaths.delete(path);
-
-      const content = readFileChangeContent(payload);
-      const token = readFileChangeWriteToken(payload);
-      logReload("file-change", { path, token: token ?? null, hasContent: content != null });
-      const identity = eventIdentity(path, payload);
-      if (!allowDuplicate && identity != null && identity === lastEventIdentityRef.current) {
-        logReload("suppressed", { path, why: "duplicate event" });
-        return;
-      }
-      lastEventIdentityRef.current = identity;
-
-      const ownWriteToken = consumeStudioWriteToken(token);
-      const ownContentEcho = content != null && isSelfWriteEcho(path, content);
-      if (ownWriteToken || ownContentEcho) {
-        onAcceptedPersistedFileChange(path);
-        logReload("suppressed", {
-          path,
-          why: ownWriteToken ? "own write token" : "own content echo",
-        });
-        return;
-      }
+      if (!path) return;
 
       const generation = ++generationRef.current;
       const result = await drainPendingChanges();
@@ -253,7 +229,7 @@ export function useExternalFileChangeCoordinator({
         const previousBlocked = blockedRef.current;
         if (previousBlocked?.status === "failed" && deleteConflictSnapshot) {
           try {
-            await deleteConflictSnapshot(projectId, path);
+            await deleteConflictSnapshot(projectId!, path);
           } catch (error) {
             if (mountedRef.current && generation === generationRef.current) {
               setBlocked({ ...previousBlocked, generation, error });
@@ -267,6 +243,7 @@ export function useExternalFileChangeCoordinator({
         reloadAcceptedGeneration(path);
         return;
       }
+      const content = readFileChangeContent(payload);
       if (result.status === "failed") {
         const candidate = getPendingCandidate?.();
         const studioContent = candidate?.path === path ? candidate.content : null;
@@ -275,7 +252,7 @@ export function useExternalFileChangeCoordinator({
           try {
             await persistSnapshotInOrder(() =>
               persistFailureSnapshot(
-                projectId,
+                projectId!,
                 path,
                 studioContent,
                 readFileChangeVersion(payload),
@@ -305,7 +282,7 @@ export function useExternalFileChangeCoordinator({
         return;
       }
       try {
-        await persistSnapshotInOrder(() => persistConflictSnapshot(projectId, result.error));
+        await persistSnapshotInOrder(() => persistConflictSnapshot(projectId!, result.error));
       } catch (error) {
         if (!mountedRef.current || generation !== generationRef.current) return;
         setBlocked({
@@ -323,9 +300,8 @@ export function useExternalFileChangeCoordinator({
       setBlocked({ status: "conflict", generation, error: result.error, payload });
     },
     [
-      projectId,
-      pendingTimelineEditPathRef,
       drainPendingChanges,
+      projectId,
       deleteConflictSnapshot,
       getPendingCandidate,
       persistConflictSnapshot,
@@ -336,6 +312,55 @@ export function useExternalFileChangeCoordinator({
     ],
   );
 
+  const startDrainLoop = useCallback(async () => {
+    if (drainingRef.current) return;
+    drainingRef.current = true;
+    try {
+      while (mountedRef.current) {
+        const pending = pendingPayloadRef.current;
+        if (!pending) break;
+        pendingPayloadRef.current = null;
+        await drainOnePending(pending.payload);
+      }
+    } finally {
+      drainingRef.current = false;
+    }
+  }, [drainOnePending]);
+
+  const processChange = useCallback(
+    // fallow-ignore-next-line complexity
+    (payload: unknown) => {
+      const path = readStudioFileChangePath(payload);
+      if (!path || !projectId) return;
+      pendingTimelineEditPathRef.current.delete(path);
+
+      const content = readFileChangeContent(payload);
+      const token = readFileChangeWriteToken(payload);
+      logReload("file-change", { path, token: token ?? null, hasContent: content != null });
+      const identity = eventIdentity(path, payload);
+      if (identity != null && identity === lastEventIdentityRef.current) {
+        logReload("suppressed", { path, why: "duplicate event" });
+        return;
+      }
+      lastEventIdentityRef.current = identity;
+
+      const ownWriteToken = consumeStudioWriteToken(token);
+      const ownContentEcho = content != null && isSelfWriteEcho(path, content);
+      if (ownWriteToken || ownContentEcho) {
+        onAcceptedPersistedFileChange(path);
+        logReload("suppressed", {
+          path,
+          why: ownWriteToken ? "own write token" : "own content echo",
+        });
+        return;
+      }
+
+      pendingPayloadRef.current = { payload };
+      void startDrainLoop();
+    },
+    [projectId, pendingTimelineEditPathRef, startDrainLoop, onAcceptedPersistedFileChange],
+  );
+
   useEffect(() => {
     const handler = (payload?: unknown) => processChange(payload);
     const adapter = testHotAdapter();
@@ -357,7 +382,7 @@ export function useExternalFileChangeCoordinator({
     if (!current || current.status === "conflict" || current.recovered) return;
     resetSaveQueues?.();
     lastEventIdentityRef.current = null;
-    await processChange(current.payload, true);
+    processChange(current.payload);
   }, [processChange, resetSaveQueues]);
 
   const useExternalFile = useCallback(

package/src/utils/htmlEditor.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { mergeStyleIntoTag } from "./htmlEditor";
+
+describe("mergeStyleIntoTag", () => {
+  it.each([
+    ['<div style="color: red; opacity: 1">', '<div style="color: red; opacity: 0.5">'],
+    ["<div style='color: red; opacity: 1'>", "<div style='color: red; opacity: 0.5'>"],
+    ['<div style="">', '<div style="opacity: 0.5">'],
+    ["<div style=''>", "<div style='opacity: 0.5'>"],
+    ['<div style="color:\nred">', '<div style="color: red; opacity: 0.5">'],
+    ["<div style='font-family: \"a\"'>", "<div style='font-family: \"a\"; opacity: 0.5'>"],
+    ["<div style=\"font-family: 'a'\">", "<div style=\"font-family: 'a'; opacity: 0.5\">"],
+    [
+      "<div style=\"color:red\" style='color:blue'>",
+      "<div style=\"color: red; opacity: 0.5\" style='color:blue'>",
+    ],
+    ['<div STYLE="color:red">', '<div STYLE="color:red" style="opacity: 0.5">'],
+    ['<div style = "color:red">', '<div style = "color:red" style="opacity: 0.5">'],
+    ['<div data-style="color:red">', '<div data-style="color: red; opacity: 0.5">'],
+    ["<img/>", '<img style="opacity: 0.5"/>'],
+    ['<div style="color:red>', '<div style="color:red style="opacity: 0.5">'],
+  ])("preserves quote and source behavior (case %#)", (tag, expected) => {
+    expect(mergeStyleIntoTag(tag, "opacity: 0.5")).toBe(expected);
+    expect(mergeStyleIntoTag(tag, " \n")).toBe(tag);
+  });
+
+  it.each(['"', "'"])("handles long values delimited by %s", (quote) => {
+    const value = "a".repeat(100_000);
+    const tag = `<div style=${quote}--label:${value}${quote}>`;
+    expect(mergeStyleIntoTag(tag, "opacity: 0.5")).toBe(
+      `<div style=${quote}--label: ${value}; opacity: 0.5${quote}>`,
+    );
+    const opener = `style=${quote}a`;
+    expect(mergeStyleIntoTag(`<div style=${quote}${opener.repeat(10_000)}>`, "opacity: 0.5")).toBe(
+      `<div style=${quote}opacity: 0.5${quote}a${opener.repeat(9_999)}>`,
+    );
+    const unterminated = `<div style=${quote}${value}>`;
+    expect(mergeStyleIntoTag(unterminated, "opacity: 0.5")).toBe(
+      `<div style=${quote}${value} style="opacity: 0.5">`,
+    );
+  });
+});

package/src/utils/htmlEditor.ts

@@ -29,13 +29,13 @@ export function mergeStyleIntoTag(tag: string, newStyles: string): string {
 
   const incoming = parseStyleString(newStyles);
 
-  // Match style="..." or style='...' — handle multi-line attrs via dotall-like trick
-  const styleAttrRe = /style=(["'])([\s\S]*?)\1/;
+  // Match each quote-delimited form explicitly, including multi-line values.
+  const styleAttrRe = /style=(")([^"]*)"|style=(')([^']*)'/;
   const match = tag.match(styleAttrRe);
 
   if (match) {
-    const quote = match[1];
-    const existing = parseStyleString(match[2]);
+    const quote = match[1] ?? match[3];
+    const existing = parseStyleString(match[2] ?? match[4]);
     const merged = { ...existing, ...incoming };
     const serialized = Object.entries(merged)
       .map(([k, v]) => `${k}: ${v}`)

package/src/utils/sourcePatcher.test.ts

@@ -8,6 +8,22 @@ import {
 } from "./sourcePatcher";
 
 describe("applyPatchByTarget", () => {
+  it.each(['"', "'"])("patches long and multiline styles quoted with %s", (quote) => {
+    const otherQuote = quote === '"' ? "'" : '"';
+    const op: PatchOperation = { type: "inline-style", property: "opacity", value: "0.5" };
+    for (const value of [
+      "",
+      "line1\nline2",
+      "a".repeat(100_000),
+      `style=${otherQuote}a`.repeat(10_000),
+    ]) {
+      const html = `<img id="hero" class="hero" style=${quote}--label:${value}${quote} />`;
+      const expected = `<img id="hero" class="hero" style=${quote}--label: ${value}; opacity: 0.5${quote} />`;
+      expect(applyPatch(html, "hero", op)).toBe(expected);
+      expect(applyPatchByTarget(html, { selector: ".hero" }, op)).toBe(expected);
+    }
+  });
+
   it("updates a composition host by data-composition-id selector", () => {
     const html = `<div data-composition-id="intro" data-start="0" data-track-index="1"></div>`;
     const op: PatchOperation = { type: "attribute", property: "start", value: "2.5" };
@@ -66,6 +82,23 @@ describe("applyPatchByTarget", () => {
     expect(result).not.toContain("/ style");
   });
 
+  it.each(["", " ", "\t\r\n", "\u00a0\u2028", " ".repeat(100_000)])(
+    "preserves self-closing whitespace handling (case %#)",
+    (whitespace) => {
+      const prefix = '<img id="hero" class="hero"';
+      const op: PatchOperation = { type: "inline-style", property: "opacity", value: "0.5" };
+      for (const suffix of ["/", "/\n", "/\r", "/\r\n", "/\u2028", "", "x", "/ "]) {
+        const tag = prefix + whitespace + suffix;
+        const selfClosing = suffix === "/";
+        // The original operation removes whitespace before the slash only.
+        const expectedBase = selfClosing ? prefix + suffix.slice(1) : tag;
+        const expected = `${expectedBase} style="opacity: 0.5"${selfClosing ? " /" : ""}>`;
+        expect(applyPatch(tag + ">", "hero", op)).toBe(expected);
+        expect(applyPatchByTarget(tag + ">", { selector: ".hero" }, op)).toBe(expected);
+      }
+    },
+  );
+
   it("patches inline move styles by target", () => {
     const html = `<div id="card" style="position: absolute; left: 108px; top: 112px"></div>`;
 

package/src/utils/sourcePatcher.ts

@@ -184,10 +184,10 @@ function patchInlineStyleInTag(
   if (!tag) return html;
 
   // Check if there's an existing style attribute
-  const styleMatch = /\bstyle=(["'])([\s\S]*?)\1/.exec(tag);
+  const styleMatch = /\bstyle=(")([^"]*)"|\bstyle=(')([^']*)'/.exec(tag);
   if (styleMatch) {
-    const existingStyle = styleMatch[2];
-    const quote = styleMatch[1];
+    const existingStyle = styleMatch[2] ?? styleMatch[4];
+    const quote = styleMatch[1] ?? styleMatch[3];
     // Parse existing properties
     const props = new Map<string, string>();
     for (const part of splitInlineStyleDeclarations(existingStyle)) {
@@ -212,8 +212,8 @@ function patchInlineStyleInTag(
   } else {
     // No existing style attribute
     if (value === null) return html; // nothing to remove
-    const selfClosing = /\s*\/$/.test(tag);
-    const base = selfClosing ? tag.replace(/\s*\/$/, "") : tag;
+    const selfClosing = tag.endsWith("/");
+    const base = selfClosing ? tag.slice(0, -1).trimEnd() : tag;
     const newTag = `${base} style="${prop}: ${escapeStyleAttributeValue(value, '"')}"${selfClosing ? " /" : ""}`;
     return html.replace(tag, newTag);
   }