@hyperframes/studio 0.5.0-alpha.9 → 0.5.0

package/src/utils/projectRouting.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from "vitest";
+import { buildFrameCaptureUrl } from "./frameCapture";
+import {
+  buildProjectApiPath,
+  buildProjectHash,
+  encodeProjectId,
+  parseProjectIdFromHash,
+} from "./projectRouting";
+
+describe("project routing utilities", () => {
+  it("decodes project ids from hash routes before building capture URLs", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-05-01T12:00:00Z"));
+
+    const projectId = parseProjectIdFromHash("#project/Notion%20Showcase");
+
+    expect(projectId).toBe("Notion Showcase");
+    expect(
+      buildFrameCaptureUrl({
+        projectId: projectId ?? "",
+        compositionPath: null,
+        currentTime: 1.809,
+        origin: "http://localhost:3002",
+      }),
+    ).toBe(
+      "http://localhost:3002/api/projects/Notion%20Showcase/thumbnail/index.html?t=1.809&format=png&v=1777636800000",
+    );
+
+    vi.useRealTimers();
+  });
+
+  it("accepts legacy raw-space hash routes", () => {
+    expect(parseProjectIdFromHash("#project/Notion Showcase")).toBe("Notion Showcase");
+  });
+
+  it("decodes reserved characters when the hash route is encoded", () => {
+    expect(parseProjectIdFromHash("#project/Launch%20%231%3F%20v2")).toBe("Launch #1? v2");
+  });
+
+  it("does not throw on malformed percent escapes in hash routes", () => {
+    expect(parseProjectIdFromHash("#project/Broken%ZZName")).toBe("Broken%ZZName");
+  });
+
+  it("ignores non-project hash routes", () => {
+    expect(parseProjectIdFromHash("")).toBeNull();
+    expect(parseProjectIdFromHash("#settings")).toBeNull();
+    expect(parseProjectIdFromHash("#project/")).toBeNull();
+    expect(parseProjectIdFromHash("#project/foo/bar")).toBeNull();
+  });
+
+  it("encodes project ids when writing hash routes", () => {
+    expect(buildProjectHash("Notion Showcase")).toBe("#project/Notion%20Showcase");
+    expect(buildProjectHash("Notion%20Showcase")).toBe("#project/Notion%2520Showcase");
+    expect(buildProjectHash("Launch #1? v2")).toBe("#project/Launch%20%231%3F%20v2");
+  });
+
+  it("round-trips unicode project ids through hash routes", () => {
+    const hash = buildProjectHash("Mañana demo");
+
+    expect(hash).toBe("#project/Ma%C3%B1ana%20demo");
+    expect(parseProjectIdFromHash(hash)).toBe("Mañana demo");
+  });
+
+  it("encodes project ids as one API path segment", () => {
+    expect(encodeProjectId("Notion Showcase")).toBe("Notion%20Showcase");
+    expect(encodeProjectId("Notion%20Showcase")).toBe("Notion%2520Showcase");
+    expect(encodeProjectId("Launch #1? v2")).toBe("Launch%20%231%3F%20v2");
+  });
+
+  it("builds API paths without double encoding decoded project ids", () => {
+    expect(buildProjectApiPath("Notion Showcase", "/thumbnail/index.html")).toBe(
+      "/api/projects/Notion%20Showcase/thumbnail/index.html",
+    );
+  });
+
+  it("keeps literal percent signs safe in API paths", () => {
+    expect(buildProjectApiPath("Percent%20Name", "/preview")).toBe(
+      "/api/projects/Percent%2520Name/preview",
+    );
+  });
+
+  it("keeps unicode project ids safe in API paths", () => {
+    expect(buildProjectApiPath("Mañana demo", "/preview")).toBe(
+      "/api/projects/Ma%C3%B1ana%20demo/preview",
+    );
+  });
+});

package/src/utils/projectRouting.ts

@@ -0,0 +1,27 @@
+const PROJECT_HASH_PREFIX = "#project/";
+
+export function encodeProjectId(projectId: string): string {
+  return encodeURIComponent(projectId);
+}
+
+export function buildProjectHash(projectId: string): string {
+  return `${PROJECT_HASH_PREFIX}${encodeProjectId(projectId)}`;
+}
+
+export function parseProjectIdFromHash(hash: string): string | null {
+  if (!hash.startsWith(PROJECT_HASH_PREFIX)) return null;
+
+  const encodedProjectId = hash.slice(PROJECT_HASH_PREFIX.length);
+  if (!encodedProjectId || encodedProjectId.includes("/")) return null;
+
+  try {
+    return decodeURIComponent(encodedProjectId);
+  } catch {
+    return encodedProjectId;
+  }
+}
+
+export function buildProjectApiPath(projectId: string, suffix = ""): string {
+  const normalizedSuffix = suffix && !suffix.startsWith("/") ? `/${suffix}` : suffix;
+  return `/api/projects/${encodeProjectId(projectId)}${normalizedSuffix}`;
+}

package/src/utils/sourcePatcher.test.ts

@@ -1,11 +1,5 @@
 import { describe, expect, it } from "vitest";
-import {
-  applyPatch,
-  applyPatchByTarget,
-  readAttributeByTarget,
-  readTagSnippetByTarget,
-  type PatchOperation,
-} from "./sourcePatcher";
+import { applyPatchByTarget, readAttributeByTarget, type PatchOperation } from "./sourcePatcher";
 
 describe("applyPatchByTarget", () => {
   it("updates a composition host by data-composition-id selector", () => {
@@ -35,64 +29,6 @@ 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>`;
 
@@ -126,69 +62,6 @@ 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,67 +7,6 @@ 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;
@@ -135,7 +74,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)}\\2[^>]*)>`, "i");
+  const idPattern = new RegExp(`(<[^>]*\\bid="${escapeRegex(elementId)}"[^>]*)>`, "i");
   const match = idPattern.exec(html);
   if (!match) return html;
 
@@ -147,13 +86,12 @@ 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=(["'])([\s\S]*?)\1/.exec(tag);
+  const styleMatch = /\bstyle="([^"]*)"/.exec(tag);
   if (styleMatch) {
-    const existingStyle = styleMatch[2];
-    const quote = styleMatch[1];
+    const existingStyle = styleMatch[1];
     // Parse existing properties
     const props = new Map<string, string>();
-    for (const part of splitInlineStyleDeclarations(existingStyle)) {
+    for (const part of existingStyle.split(";")) {
       const colon = part.indexOf(":");
       if (colon < 0) continue;
       const key = part.slice(0, colon).trim();
@@ -164,14 +102,13 @@ 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}: ${escapeStyleAttributeValue(v, quote)}`)
+      .map(([k, v]) => `${k}: ${v}`)
       .join("; ");
-    const newTag = tag.replace(styleMatch[0], `style=${quote}${newStyle}${quote}`);
+    const newTag = tag.replace(/\bstyle="[^"]*"/, `style="${newStyle}"`);
     return html.replace(tag, newTag);
   } else {
     // No existing style — add one
-    const newTag =
-      tag.replace(/>$/, "") + ` style="${prop}: ${escapeStyleAttributeValue(value, '"')}"`;
+    const newTag = tag.replace(/>$/, "") + ` style="${prop}: ${value}"`;
     return html.replace(tag, newTag);
   }
 }
@@ -200,7 +137,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)}\\2[^>]*)>`, "i");
+    const idPattern = new RegExp(`(<[^>]*\\bid="${escapeRegex(target.id)}"[^>]*)>`, "i");
     const match = idPattern.exec(html);
     if (match?.index != null) {
       return {
@@ -217,7 +154,7 @@ function findTagByTarget(html: string, target: PatchTarget): TagMatch | null {
   if (compositionIdMatch) {
     const compId = compositionIdMatch[1];
     const pattern = new RegExp(
-      `(<[^>]*\\bdata-composition-id=(["'])${escapeRegex(compId)}\\2[^>]*)>`,
+      `(<[^>]*\\bdata-composition-id="${escapeRegex(compId)}"[^>]*)>`,
       "i",
     );
     const match = pattern.exec(html);
@@ -264,13 +201,8 @@ export function readAttributeByTarget(
   if (!match) return undefined;
 
   const fullAttr = attr.startsWith("data-") ? attr : `data-${attr}`;
-  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;
+  const valueMatch = new RegExp(`\\b${fullAttr}="([^"]*)"`).exec(match.tag);
+  return valueMatch?.[1];
 }
 
 function patchAttributeByTarget(
@@ -283,7 +215,7 @@ function patchAttributeByTarget(
   if (!match) return html;
 
   const fullAttr = attr.startsWith("data-") ? attr : `data-${attr}`;
-  const attrPattern = new RegExp(`\\b${fullAttr}=(["'])([^"']*)\\1`);
+  const attrPattern = new RegExp(`\\b${fullAttr}="[^"]*"`);
   const tag = match.tag;
 
   if (attrPattern.test(tag)) {
@@ -299,13 +231,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)}\\2[^>]*)>`, "i");
+  const idPattern = new RegExp(`(<[^>]*\\bid="${escapeRegex(elementId)}"[^>]*)>`, "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}=(["'])([^"']*)\\1`);
+  const attrPattern = new RegExp(`\\b${fullAttr}="[^"]*"`);
 
   if (attrPattern.test(tag)) {
     // Update existing attribute
@@ -322,53 +254,11 @@ 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 {
-  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);
+  // 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);
   if (!match) return html;
-
-  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)}`;
+  return html.replace(pattern, `${match[1]}${value}${match[3]}`);
 }
 
 /**
@@ -400,8 +290,6 @@ 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/timelineAssetDrop.test.ts

@@ -4,7 +4,6 @@ import {
   buildTimelineAssetInsertHtml,
   getTimelineAssetKind,
   insertTimelineAssetIntoSource,
-  resolveTimelineAssetInitialGeometry,
   resolveTimelineAssetSrc,
 } from "./timelineAssetDrop";
 
@@ -20,21 +19,17 @@ describe("getTimelineAssetKind", () => {
 
 describe("buildTimelineAssetInsertHtml", () => {
   it("builds an image clip with explicit timing and track", () => {
-    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:");
+    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"');
   });
 
   it("builds an audio clip without visual layout styles", () => {
@@ -52,21 +47,6 @@ 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");

package/src/utils/timelineAssetDrop.ts

@@ -76,23 +76,6 @@ export function buildTimelineFileDropPlacements(
   });
 }
 
-export function resolveTimelineAssetInitialGeometry(source: string): {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-} {
-  const width = Number.parseFloat(source.match(/\bdata-width=(["'])([^"']+)\1/i)?.[2] ?? "");
-  const height = Number.parseFloat(source.match(/\bdata-height=(["'])([^"']+)\1/i)?.[2] ?? "");
-
-  return {
-    left: 0,
-    top: 0,
-    width: Number.isFinite(width) && width > 0 ? Math.round(width) : 640,
-    height: Number.isFinite(height) && height > 0 ? Math.round(height) : 360,
-  };
-}
-
 export function buildTimelineAssetInsertHtml(input: {
   id: string;
   assetPath: string;
@@ -101,18 +84,15 @@ export function buildTimelineAssetInsertHtml(input: {
   duration: number;
   track: number;
   zIndex: number;
-  geometry?: { left: number; top: number; width: number; height: number };
 }): string {
   const sharedAttrs = `id="${input.id}" class="clip" src="${input.assetPath}" data-start="${input.start}" data-duration="${input.duration}" data-track-index="${input.track}"`;
-  const geometry = input.geometry ?? { left: 0, top: 0, width: 640, height: 360 };
-  const visualStyles = `position: absolute; left: ${geometry.left}px; top: ${geometry.top}px; width: ${geometry.width}px; height: ${geometry.height}px; object-fit: contain; z-index: ${input.zIndex}`;
 
   if (input.kind === "image") {
-    return `<img ${sharedAttrs} style="${visualStyles}" />`;
+    return `<img ${sharedAttrs} style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: ${input.zIndex}" />`;
   }
 
   if (input.kind === "video") {
-    return `<video ${sharedAttrs} muted playsinline style="${visualStyles}"></video>`;
+    return `<video ${sharedAttrs} muted playsinline style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: ${input.zIndex}"></video>`;
   }
 
   return `<audio ${sharedAttrs} style="z-index: ${input.zIndex}"></audio>`;