@hyperframes/studio 0.5.7 → 0.6.0-alpha.10

package/src/utils/sourcePatcher.test.ts

@@ -1,5 +1,11 @@
 import { describe, expect, it } from "vitest";
-import { applyPatchByTarget, readAttributeByTarget, type PatchOperation } from "./sourcePatcher";
+import {
+  applyPatch,
+  applyPatchByTarget,
+  readAttributeByTarget,
+  readTagSnippetByTarget,
+  type PatchOperation,
+} from "./sourcePatcher";
 
 describe("applyPatchByTarget", () => {
   it("updates a composition host by data-composition-id selector", () => {
@@ -29,6 +35,64 @@ describe("applyPatchByTarget", () => {
     );
   });
 
+  it("patches inline move styles by target", () => {
+    const html = `<div id="card" style="position: absolute; left: 108px; top: 112px"></div>`;
+
+    const withLeft = applyPatchByTarget(
+      html,
+      { id: "card" },
+      { type: "inline-style", property: "left", value: "160px" },
+    );
+    const withTop = applyPatchByTarget(
+      withLeft,
+      { id: "card" },
+      { type: "inline-style", property: "top", value: "140px" },
+    );
+
+    expect(withTop).toContain('style="position: absolute; left: 160px; top: 140px"');
+  });
+
+  it("patches inline resize styles by target", () => {
+    const html = `<div id="card" style="position: absolute; width: 380px; height: 196px"></div>`;
+
+    const withWidth = applyPatchByTarget(
+      html,
+      { id: "card" },
+      { type: "inline-style", property: "width", value: "420px" },
+    );
+    const withHeight = applyPatchByTarget(
+      withWidth,
+      { id: "card" },
+      { type: "inline-style", property: "height", value: "220px" },
+    );
+
+    expect(withHeight).toContain('style="position: absolute; width: 420px; height: 220px"');
+  });
+
+  it("escapes quoted CSS urls inside double-quoted style attributes", () => {
+    const html = `<div id="card" style="position: absolute; opacity: 1"></div>`;
+
+    const withBackground = applyPatchByTarget(
+      html,
+      { id: "card" },
+      {
+        type: "inline-style",
+        property: "background-image",
+        value: `url("../ChatGPT Image Apr 22, 2026.png")`,
+      },
+    );
+    const withRadius = applyPatchByTarget(
+      withBackground,
+      { id: "card" },
+      { type: "inline-style", property: "border-radius", value: "12px" },
+    );
+
+    expect(withRadius).toContain(
+      "background-image: url(&quot;../ChatGPT Image Apr 22, 2026.png&quot;)",
+    );
+    expect(withRadius).toContain("border-radius: 12px");
+  });
+
   it("updates media timing attributes by selector", () => {
     const html = `<video class="hero clip" data-start="0.2" data-duration="1.4" data-media-start="0.4"></video>`;
 
@@ -62,6 +126,69 @@ describe("applyPatchByTarget", () => {
     expect(readAttributeByTarget(html, { selector: ".hero" }, "duration")).toBe("1.4");
   });
 
+  it("reads the matched tag snippet by target", () => {
+    const html = `<section id="hero" class="card clip" style="left: 120px; top: 180px"></section>`;
+
+    expect(readTagSnippetByTarget(html, { id: "hero" })).toBe(
+      `<section id="hero" class="card clip" style="left: 120px; top: 180px"`,
+    );
+  });
+
+  it("patches and reads single-quoted attributes and styles", () => {
+    const html =
+      "<section id='hero' class='card clip' data-start='0.2' style='left: 120px; top: 180px'></section>";
+
+    const moved = applyPatchByTarget(
+      html,
+      { id: "hero" },
+      { type: "inline-style", property: "left", value: "160px" },
+    );
+    const updated = applyPatchByTarget(
+      moved,
+      { id: "hero" },
+      { type: "attribute", property: "start", value: "0.4" },
+    );
+
+    expect(updated).toContain(`style='left: 160px; top: 180px'`);
+    expect(updated).toContain(`data-start="0.4"`);
+    expect(readAttributeByTarget(updated, { id: "hero" }, "start")).toBe("0.4");
+  });
+
+  it("replaces the full text body of a nested element by id", () => {
+    const html =
+      '<div id="panel"><strong>Headline</strong><span>Supporting copy</span></div><p>Outside</p>';
+
+    const patched = applyPatch(html, "panel", {
+      type: "text-content",
+      property: "text",
+      value: "<strong>New headline</strong><span>New supporting copy</span>",
+    });
+
+    expect(patched).toContain(
+      '<div id="panel"><strong>New headline</strong><span>New supporting copy</span></div>',
+    );
+    expect(patched).toContain("<p>Outside</p>");
+  });
+
+  it("does not stop at the first child closing tag when patching nested text", () => {
+    const html =
+      '<section id="card"><div><strong>Headline</strong></div><div>Copy</div></section><p>Outside</p>';
+
+    const patched = applyPatchByTarget(
+      html,
+      { id: "card" },
+      {
+        type: "text-content",
+        property: "text",
+        value: "<strong>New headline</strong>",
+      },
+    );
+
+    expect(patched).toBe(
+      '<section id="card"><strong>New headline</strong></section><p>Outside</p>',
+    );
+  });
+
   it("patches the correct duplicate selector occurrence", () => {
     const html = [
       `<div class="headline clip" data-start="0"></div>`,

package/src/utils/sourcePatcher.ts

@@ -7,6 +7,67 @@ function escapeRegex(s: string): string {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
+function escapeStyleAttributeValue(value: string, quote: string): string {
+  return quote === '"' ? value.replace(/"/g, """) : value.replace(/'/g, "'");
+}
+
+function splitInlineStyleDeclarations(style: string): string[] {
+  const declarations: string[] = [];
+  let current = "";
+  let quote: string | null = null;
+  let entity = false;
+  let parenDepth = 0;
+
+  for (const char of style) {
+    if (entity) {
+      current += char;
+      if (char === ";") entity = false;
+      continue;
+    }
+
+    if (char === "&") {
+      entity = true;
+      current += char;
+      continue;
+    }
+
+    if (quote) {
+      current += char;
+      if (char === quote) quote = null;
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      current += char;
+      continue;
+    }
+
+    if (char === "(") {
+      parenDepth += 1;
+      current += char;
+      continue;
+    }
+
+    if (char === ")") {
+      parenDepth = Math.max(0, parenDepth - 1);
+      current += char;
+      continue;
+    }
+
+    if (char === ";" && parenDepth === 0) {
+      declarations.push(current);
+      current = "";
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current) declarations.push(current);
+  return declarations;
+}
+
 export interface PatchOperation {
   type: "inline-style" | "attribute" | "text-content";
   property: string;
@@ -74,7 +135,7 @@ export function resolveSourceFile(
  */
 function patchInlineStyle(html: string, elementId: string, prop: string, value: string): string {
   // Find the element tag with this id
-  const idPattern = new RegExp(`(<[^>]*\\bid="${escapeRegex(elementId)}"[^>]*)>`, "i");
+  const idPattern = new RegExp(`(<[^>]*\\bid=(["'])${escapeRegex(elementId)}\\2[^>]*)>`, "i");
   const match = idPattern.exec(html);
   if (!match) return html;
 
@@ -86,12 +147,13 @@ function patchInlineStyleInTag(html: string, tag: string, prop: string, value: s
   if (!tag) return html;
 
   // Check if there's an existing style attribute
-  const styleMatch = /\bstyle="([^"]*)"/.exec(tag);
+  const styleMatch = /\bstyle=(["'])([\s\S]*?)\1/.exec(tag);
   if (styleMatch) {
-    const existingStyle = styleMatch[1];
+    const existingStyle = styleMatch[2];
+    const quote = styleMatch[1];
     // Parse existing properties
     const props = new Map<string, string>();
-    for (const part of existingStyle.split(";")) {
+    for (const part of splitInlineStyleDeclarations(existingStyle)) {
       const colon = part.indexOf(":");
       if (colon < 0) continue;
       const key = part.slice(0, colon).trim();
@@ -102,13 +164,14 @@ function patchInlineStyleInTag(html: string, tag: string, prop: string, value: s
     props.set(prop, value);
     // Rebuild style string
     const newStyle = Array.from(props.entries())
-      .map(([k, v]) => `${k}: ${v}`)
+      .map(([k, v]) => `${k}: ${escapeStyleAttributeValue(v, quote)}`)
       .join("; ");
-    const newTag = tag.replace(/\bstyle="[^"]*"/, `style="${newStyle}"`);
+    const newTag = tag.replace(styleMatch[0], `style=${quote}${newStyle}${quote}`);
     return html.replace(tag, newTag);
   } else {
     // No existing style — add one
-    const newTag = tag.replace(/>$/, "") + ` style="${prop}: ${value}"`;
+    const newTag =
+      tag.replace(/>$/, "") + ` style="${prop}: ${escapeStyleAttributeValue(value, '"')}"`;
     return html.replace(tag, newTag);
   }
 }
@@ -137,7 +200,7 @@ function replaceTagAtMatch(html: string, match: TagMatch, newTag: string): strin
 
 function findTagByTarget(html: string, target: PatchTarget): TagMatch | null {
   if (target.id) {
-    const idPattern = new RegExp(`(<[^>]*\\bid="${escapeRegex(target.id)}"[^>]*)>`, "i");
+    const idPattern = new RegExp(`(<[^>]*\\bid=(["'])${escapeRegex(target.id)}\\2[^>]*)>`, "i");
     const match = idPattern.exec(html);
     if (match?.index != null) {
       return {
@@ -154,7 +217,7 @@ function findTagByTarget(html: string, target: PatchTarget): TagMatch | null {
   if (compositionIdMatch) {
     const compId = compositionIdMatch[1];
     const pattern = new RegExp(
-      `(<[^>]*\\bdata-composition-id="${escapeRegex(compId)}"[^>]*)>`,
+      `(<[^>]*\\bdata-composition-id=(["'])${escapeRegex(compId)}\\2[^>]*)>`,
       "i",
     );
     const match = pattern.exec(html);
@@ -201,8 +264,13 @@ export function readAttributeByTarget(
   if (!match) return undefined;
 
   const fullAttr = attr.startsWith("data-") ? attr : `data-${attr}`;
-  const valueMatch = new RegExp(`\\b${fullAttr}="([^"]*)"`).exec(match.tag);
-  return valueMatch?.[1];
+  const valueMatch = new RegExp(`\\b${fullAttr}=(["'])([^"']*)\\1`).exec(match.tag);
+  return valueMatch?.[2];
+}
+
+export function readTagSnippetByTarget(html: string, target: PatchTarget): string | undefined {
+  const match = findTagByTarget(html, target);
+  return match?.tag;
 }
 
 function patchAttributeByTarget(
@@ -215,7 +283,7 @@ function patchAttributeByTarget(
   if (!match) return html;
 
   const fullAttr = attr.startsWith("data-") ? attr : `data-${attr}`;
-  const attrPattern = new RegExp(`\\b${fullAttr}="[^"]*"`);
+  const attrPattern = new RegExp(`\\b${fullAttr}=(["'])([^"']*)\\1`);
   const tag = match.tag;
 
   if (attrPattern.test(tag)) {
@@ -231,13 +299,13 @@ function patchAttributeByTarget(
  * Apply an attribute change to an element in the HTML source.
  */
 function patchAttribute(html: string, elementId: string, attr: string, value: string): string {
-  const idPattern = new RegExp(`(<[^>]*\\bid="${escapeRegex(elementId)}"[^>]*)>`, "i");
+  const idPattern = new RegExp(`(<[^>]*\\bid=(["'])${escapeRegex(elementId)}\\2[^>]*)>`, "i");
   const match = idPattern.exec(html);
   if (!match) return html;
 
   const tag = match[1];
   const fullAttr = attr.startsWith("data-") ? attr : `data-${attr}`;
-  const attrPattern = new RegExp(`\\b${fullAttr}="[^"]*"`);
+  const attrPattern = new RegExp(`\\b${fullAttr}=(["'])([^"']*)\\1`);
 
   if (attrPattern.test(tag)) {
     // Update existing attribute
@@ -254,11 +322,53 @@ function patchAttribute(html: string, elementId: string, attr: string, value: st
  * Apply a text content change to an element.
  */
 function patchTextContent(html: string, elementId: string, value: string): string {
-  // Match the element and its content: <tagname id="elementId"...>content</tagname>
-  const pattern = new RegExp(`(<[^>]*\\bid="${elementId}"[^>]*>)([\\s\\S]*?)(<\\/[a-z]+>)`, "i");
-  const match = pattern.exec(html);
+  const openTagPattern = new RegExp(
+    `(<([a-z0-9-]+)[^>]*\\bid=(["'])${escapeRegex(elementId)}\\3[^>]*>)`,
+    "i",
+  );
+  const match = openTagPattern.exec(html);
+  if (!match || match.index == null) return html;
+
+  const openingTag = match[1];
+  const tagName = match[2];
+  const contentStart = match.index + openingTag.length;
+  const closingIndex = findMatchingClosingTagIndex(html, tagName, contentStart);
+  if (closingIndex < 0) return html;
+
+  return `${html.slice(0, contentStart)}${value}${html.slice(closingIndex)}`;
+}
+
+function findMatchingClosingTagIndex(html: string, tagName: string, contentStart: number): number {
+  const tagPattern = new RegExp(`</?${escapeRegex(tagName)}\\b[^>]*>`, "gi");
+  tagPattern.lastIndex = contentStart;
+  let depth = 1;
+  let match: RegExpExecArray | null;
+
+  while ((match = tagPattern.exec(html)) !== null) {
+    const tag = match[0];
+    if (tag.startsWith("</")) {
+      depth -= 1;
+      if (depth === 0) return match.index;
+      continue;
+    }
+    if (!tag.endsWith("/>")) depth += 1;
+  }
+
+  return -1;
+}
+
+function patchTextContentByTarget(html: string, target: PatchTarget, value: string): string {
+  const match = findTagByTarget(html, target);
   if (!match) return html;
-  return html.replace(pattern, `${match[1]}${value}${match[3]}`);
+
+  const tagNameMatch = /^<([a-z0-9-]+)/i.exec(match.tag);
+  const tagName = tagNameMatch?.[1];
+  if (!tagName) return html;
+
+  const closingIndex = findMatchingClosingTagIndex(html, tagName, match.end + 1);
+  if (closingIndex < 0) return html;
+
+  return `${html.slice(0, match.end + 1)}${value}${html.slice(closingIndex)}`;
 }
 
 /**
@@ -290,6 +400,8 @@ export function applyPatchByTarget(html: string, target: PatchTarget, op: PatchO
       return patchInlineStyleByTarget(html, target, op.property, op.value);
     case "attribute":
       return patchAttributeByTarget(html, target, op.property, op.value);
+    case "text-content":
+      return patchTextContentByTarget(html, target, op.value);
     default:
       return html;
   }

package/src/utils/studioFileHistory.test.ts

@@ -0,0 +1,156 @@
+import { describe, expect, it, vi } from "vitest";
+import { saveProjectFilesWithHistory } from "./studioFileHistory";
+
+describe("saveProjectFilesWithHistory", () => {
+  it("reads before content, writes after content, and records a history entry", async () => {
+    const reads: Record<string, string> = { "index.html": "before" };
+    const writes: Record<string, string> = {};
+    const recordEdit = vi.fn();
+
+    await saveProjectFilesWithHistory({
+      projectId: "project-1",
+      label: "Move layer",
+      kind: "manual",
+      files: { "index.html": "after" },
+      readFile: async (path) => reads[path],
+      writeFile: async (path, content) => {
+        writes[path] = content;
+      },
+      recordEdit,
+    });
+
+    expect(writes).toEqual({ "index.html": "after" });
+    expect(recordEdit).toHaveBeenCalledWith({
+      label: "Move layer",
+      kind: "manual",
+      coalesceKey: undefined,
+      files: { "index.html": { before: "before", after: "after" } },
+    });
+  });
+
+  it("skips writes and history for unchanged content", async () => {
+    const writeFile = vi.fn();
+    const recordEdit = vi.fn();
+
+    const changedPaths = await saveProjectFilesWithHistory({
+      projectId: "project-1",
+      label: "Edit layer",
+      kind: "manual",
+      files: { "index.html": "same" },
+      readFile: async () => "same",
+      writeFile,
+      recordEdit,
+    });
+
+    expect(changedPaths).toEqual([]);
+    expect(writeFile).not.toHaveBeenCalled();
+    expect(recordEdit).not.toHaveBeenCalled();
+  });
+
+  it("rolls back files already written when a later file write fails", async () => {
+    const reads: Record<string, string> = {
+      "index.html": "index-before",
+      "scene.html": "scene-before",
+    };
+    const writes: Array<[string, string]> = [];
+    const recordEdit = vi.fn();
+
+    await expect(
+      saveProjectFilesWithHistory({
+        projectId: "project-1",
+        label: "Move layer",
+        kind: "manual",
+        files: {
+          "index.html": "index-after",
+          "scene.html": "scene-after",
+        },
+        readFile: async (path) => reads[path],
+        writeFile: async (path, content) => {
+          writes.push([path, content]);
+          if (path === "scene.html") {
+            throw new Error("disk full");
+          }
+        },
+        recordEdit,
+      }),
+    ).rejects.toThrow("disk full");
+
+    expect(writes).toEqual([
+      ["index.html", "index-after"],
+      ["scene.html", "scene-after"],
+      ["index.html", "index-before"],
+    ]);
+    expect(recordEdit).not.toHaveBeenCalled();
+  });
+
+  it("rolls back written files when the injected history recorder throws", async () => {
+    const reads: Record<string, string> = {
+      "index.html": "index-before",
+      "scene.html": "scene-before",
+    };
+    const writes: Array<[string, string]> = [];
+
+    await expect(
+      saveProjectFilesWithHistory({
+        projectId: "project-1",
+        label: "Move layer",
+        kind: "manual",
+        files: {
+          "index.html": "index-after",
+          "scene.html": "scene-after",
+        },
+        readFile: async (path) => reads[path],
+        writeFile: async (path, content) => {
+          writes.push([path, content]);
+        },
+        recordEdit: async () => {
+          throw new Error("history unavailable");
+        },
+      }),
+    ).rejects.toThrow("history unavailable");
+
+    expect(writes).toEqual([
+      ["index.html", "index-after"],
+      ["scene.html", "scene-after"],
+      ["scene.html", "scene-before"],
+      ["index.html", "index-before"],
+    ]);
+  });
+
+  it("reports rollback failure with the original write failure", async () => {
+    const reads: Record<string, string> = {
+      "index.html": "index-before",
+      "scene.html": "scene-before",
+    };
+    const writes: Array<[string, string]> = [];
+
+    await expect(
+      saveProjectFilesWithHistory({
+        projectId: "project-1",
+        label: "Move layer",
+        kind: "manual",
+        files: {
+          "index.html": "index-after",
+          "scene.html": "scene-after",
+        },
+        readFile: async (path) => reads[path],
+        writeFile: async (path, content) => {
+          writes.push([path, content]);
+          if (path === "scene.html" && content === "scene-after") {
+            throw new Error("write denied");
+          }
+          if (path === "index.html" && content === "index-before") {
+            throw new Error("rollback denied");
+          }
+        },
+        recordEdit: vi.fn(),
+      }),
+    ).rejects.toThrow("rollback did not complete");
+
+    expect(writes).toEqual([
+      ["index.html", "index-after"],
+      ["scene.html", "scene-after"],
+      ["index.html", "index-before"],
+    ]);
+  });
+});

package/src/utils/studioFileHistory.ts

@@ -0,0 +1,61 @@
+import type { EditHistoryKind } from "./editHistory";
+
+interface SaveProjectFilesWithHistoryInput {
+  projectId: string;
+  label: string;
+  kind: EditHistoryKind;
+  coalesceKey?: string;
+  files: Record<string, string>;
+  readFile: (path: string) => Promise<string>;
+  writeFile: (path: string, content: string) => Promise<void>;
+  recordEdit: (entry: {
+    label: string;
+    kind: EditHistoryKind;
+    coalesceKey?: string;
+    files: Record<string, { before: string; after: string }>;
+  }) => Promise<void>;
+}
+
+export async function saveProjectFilesWithHistory({
+  label,
+  kind,
+  coalesceKey,
+  files,
+  readFile,
+  writeFile,
+  recordEdit,
+}: SaveProjectFilesWithHistoryInput): Promise<string[]> {
+  const snapshots: Record<string, { before: string; after: string }> = {};
+  for (const [path, after] of Object.entries(files)) {
+    const before = await readFile(path);
+    if (before !== after) {
+      snapshots[path] = { before, after };
+    }
+  }
+
+  const changedPaths = Object.keys(snapshots);
+  if (changedPaths.length === 0) return [];
+
+  const writtenPaths: string[] = [];
+  try {
+    for (const path of changedPaths) {
+      await writeFile(path, snapshots[path].after);
+      writtenPaths.push(path);
+    }
+
+    await recordEdit({ label, kind, coalesceKey, files: snapshots });
+  } catch (error) {
+    try {
+      for (const path of writtenPaths.reverse()) {
+        await writeFile(path, snapshots[path].before);
+      }
+    } catch (rollbackError) {
+      throw new AggregateError(
+        [error, rollbackError],
+        "Failed to save project files and rollback did not complete",
+      );
+    }
+    throw error;
+  }
+  return changedPaths;
+}

package/src/utils/timelineAssetDrop.test.ts

@@ -4,6 +4,7 @@ import {
   buildTimelineAssetInsertHtml,
   getTimelineAssetKind,
   insertTimelineAssetIntoSource,
+  resolveTimelineAssetInitialGeometry,
   resolveTimelineAssetSrc,
 } from "./timelineAssetDrop";
 
@@ -19,17 +20,21 @@ describe("getTimelineAssetKind", () => {
 
 describe("buildTimelineAssetInsertHtml", () => {
   it("builds an image clip with explicit timing and track", () => {
-    expect(
-      buildTimelineAssetInsertHtml({
-        id: "photo_asset",
-        assetPath: "assets/photo.png",
-        kind: "image",
-        start: 1.25,
-        duration: 3,
-        track: 2,
-        zIndex: 4,
-      }),
-    ).toContain('img id="photo_asset"');
+    const html = buildTimelineAssetInsertHtml({
+      id: "photo_asset",
+      assetPath: "assets/photo.png",
+      kind: "image",
+      start: 1.25,
+      duration: 3,
+      track: 2,
+      zIndex: 4,
+      geometry: { left: 0, top: 0, width: 1280, height: 720 },
+    });
+
+    expect(html).toContain('img id="photo_asset"');
+    expect(html).toContain("left: 0px");
+    expect(html).toContain("width: 1280px");
+    expect(html).not.toContain("inset:");
   });
 
   it("builds an audio clip without visual layout styles", () => {
@@ -47,6 +52,21 @@ describe("buildTimelineAssetInsertHtml", () => {
   });
 });
 
+describe("resolveTimelineAssetInitialGeometry", () => {
+  it("uses the target composition dimensions for visual media", () => {
+    expect(
+      resolveTimelineAssetInitialGeometry(
+        `<div data-composition-id="main" data-width="330" data-height="228"></div>`,
+      ),
+    ).toEqual({
+      left: 0,
+      top: 0,
+      width: 330,
+      height: 228,
+    });
+  });
+});
+
 describe("resolveTimelineAssetSrc", () => {
   it("keeps project-root asset paths for index.html", () => {
     expect(resolveTimelineAssetSrc("index.html", "assets/photo.png")).toBe("assets/photo.png");