@hyperframes/studio-server 0.7.15 → 0.7.16

package/dist/index.js

@@ -540,7 +540,7 @@ function isHTMLElement(el) {
   const HTMLEl = el.ownerDocument.defaultView?.HTMLElement;
   return HTMLEl ? el instanceof HTMLEl : "style" in el;
 }
-function patchStyleAttrString(style, property, value) {
+function parseStyleDecls(style) {
   const props = /* @__PURE__ */ new Map();
   const order = [];
   let i = 0;
@@ -571,6 +571,13 @@ function patchStyleAttrString(style, property, value) {
     if (!props.has(key)) order.push(key);
     props.set(key, val);
   }
+  return { props, order };
+}
+function serializeStyleDecls(props, order) {
+  return order.map((k) => `${k}: ${props.get(k) ?? ""}`).filter((d) => d.trim()).join("; ");
+}
+function patchStyleAttrString(style, property, value) {
+  const { props, order } = parseStyleDecls(style);
   if (value === null) {
     props.delete(property);
     const idx = order.indexOf(property);
@@ -579,7 +586,7 @@ function patchStyleAttrString(style, property, value) {
     if (!props.has(property)) order.push(property);
     props.set(property, value);
   }
-  return order.map((k) => `${k}: ${props.get(k) ?? ""}`).filter((d) => d.trim()).join("; ");
+  return serializeStyleDecls(props, order);
 }
 function patchElementInHtml(source, target, operations) {
   const { document: document2, wrappedFragment } = parseSourceDocument(source);
@@ -706,6 +713,127 @@ function splitElementInHtml(source, target, splitTime, newId, fallbackTiming) {
     newId
   };
 }
+function getInlineStylePx(el, property) {
+  const style = (isHTMLElement(el) ? el.getAttribute("style") : null) ?? "";
+  const { props } = parseStyleDecls(style);
+  const raw = props.get(property);
+  if (!raw) return 0;
+  const n = parseFloat(raw);
+  return Number.isFinite(n) ? n : 0;
+}
+function setInlineLeftTop(el, left, top) {
+  let style = el.getAttribute("style") ?? "";
+  style = patchStyleAttrString(style, "left", `${left}px`);
+  style = patchStyleAttrString(style, "top", `${top}px`);
+  el.setAttribute("style", style);
+}
+function uniqueGroupDomId(document2, groupId) {
+  const base = groupId.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "group";
+  let id = base;
+  let n = 2;
+  while (document2.getElementById(id)) {
+    id = `${base}-${n}`;
+    n += 1;
+  }
+  return id;
+}
+function wrapElementsInHtml(source, targets, groupId, bbox, rebases) {
+  const { document: document2, wrappedFragment } = parseSourceDocument(source);
+  if (targets.length === 0) {
+    return { html: source, matched: false, groupId: null, error: "no targets" };
+  }
+  const els = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const target of targets) {
+    const el = findTargetElement(document2, target);
+    if (!el || !isHTMLElement(el) || seen.has(el)) continue;
+    seen.add(el);
+    els.push(el);
+  }
+  if (els.length === 0) {
+    return { html: source, matched: false, groupId: null, error: "no targets matched" };
+  }
+  const parent = els[0]?.parentElement;
+  if (!parent || els.some((el) => el.parentElement !== parent)) {
+    return {
+      html: source,
+      matched: false,
+      groupId: null,
+      error: "grouped elements must share a single parent"
+    };
+  }
+  const memberSet = new Set(els);
+  const ordered = Array.from(parent.children).filter((c) => memberSet.has(c));
+  const rebaseByEl = /* @__PURE__ */ new Map();
+  for (const rebase of rebases) {
+    const el = findTargetElement(document2, rebase.target);
+    if (el) rebaseByEl.set(el, { left: rebase.left, top: rebase.top });
+  }
+  const wrapper = document2.createElement("div");
+  wrapper.setAttribute("data-hf-group", groupId);
+  wrapper.setAttribute("id", uniqueGroupDomId(document2, groupId));
+  const memberZIndexes = ordered.map(
+    (el) => Number.parseInt(
+      parseStyleDecls(el.getAttribute("style") ?? "").props.get("z-index") ?? "",
+      10
+    )
+  ).filter((z) => Number.isFinite(z));
+  const maxZ = memberZIndexes.length > 0 ? Math.max(...memberZIndexes) : null;
+  wrapper.setAttribute(
+    "style",
+    `position: absolute; left: ${bbox.left}px; top: ${bbox.top}px; width: ${bbox.width}px; height: ${bbox.height}px` + (maxZ !== null ? `; z-index: ${maxZ}` : "")
+  );
+  parent.insertBefore(wrapper, ordered[ordered.length - 1] ?? null);
+  for (const el of ordered) {
+    const rebase = rebaseByEl.get(el);
+    if (rebase) setInlineLeftTop(el, rebase.left, rebase.top);
+    wrapper.appendChild(el);
+  }
+  return {
+    html: wrappedFragment ? document2.body.innerHTML || "" : document2.toString(),
+    matched: true,
+    groupId
+  };
+}
+function unwrapElementsFromHtml(source, groupTarget) {
+  const { document: document2, wrappedFragment } = parseSourceDocument(source);
+  const group = findTargetElement(document2, groupTarget);
+  if (!group || !isHTMLElement(group)) return { html: source, unwrapped: false };
+  if (!group.hasAttribute("data-hf-group")) return { html: source, unwrapped: false };
+  const parent = group.parentElement;
+  if (!parent) return { html: source, unwrapped: false };
+  const wLeft = getInlineStylePx(group, "left");
+  const wTop = getInlineStylePx(group, "top");
+  const groupCenter = {
+    cx: wLeft + getInlineStylePx(group, "width") / 2,
+    cy: wTop + getInlineStylePx(group, "height") / 2
+  };
+  const members = [];
+  for (const child of Array.from(group.children)) {
+    if (isHTMLElement(child)) {
+      const newLeft = getInlineStylePx(child, "left") + wLeft;
+      const newTop = getInlineStylePx(child, "top") + wTop;
+      setInlineLeftTop(child, newLeft, newTop);
+      if (child.id) {
+        members.push({
+          id: child.id,
+          cx: newLeft + getInlineStylePx(child, "width") / 2,
+          cy: newTop + getInlineStylePx(child, "height") / 2
+        });
+      }
+    }
+    parent.insertBefore(child, group);
+  }
+  const groupId = group.id || void 0;
+  group.remove();
+  return {
+    html: wrappedFragment ? document2.body.innerHTML || "" : document2.toString(),
+    unwrapped: true,
+    unwrappedGroupId: groupId,
+    members,
+    groupCenter
+  };
+}
 
 // src/routes/files.ts
 import { parseHTML as parseHTML2 } from "linkedom";
@@ -844,6 +972,97 @@ function extractGsapScriptBlock(html) {
   }
   return null;
 }
+function stripGsapAnimationsForSelector(html, selector) {
+  const block = extractGsapScriptBlock(html);
+  if (!block) return html;
+  const parsed = parseGsapScriptAcorn(block.scriptText);
+  const matching = parsed.animations.filter((a) => a.targetSelector === selector);
+  if (matching.length === 0) return html;
+  let script = block.scriptText;
+  for (const anim of [...matching].reverse()) {
+    script = removeAnimationFromScript(script, anim.id);
+  }
+  return block.replaceScript(script);
+}
+function bakeGroupTransformIntoMembers(html, groupId, members, groupCenter) {
+  const block = extractGsapScriptBlock(html);
+  if (!block) return html;
+  const parsed = parseGsapScriptAcorn(block.scriptText);
+  const groupSel = `#${groupId}`;
+  const groupSets = parsed.animations.filter(
+    (a) => a.targetSelector === groupSel && a.method === "set"
+  );
+  if (groupSets.length === 0) return html;
+  const gt = {};
+  for (const s of groupSets) {
+    for (const [k, v] of Object.entries(s.properties)) if (typeof v === "number") gt[k] = v;
+  }
+  const gx = gt.x ?? 0;
+  const gy = gt.y ?? 0;
+  const gz = gt.z ?? 0;
+  const grot = gt.rotation ?? 0;
+  const gscale = gt.scale ?? 1;
+  const isScaleAxis = (k) => k === "scale" || k === "scaleX" || k === "scaleY";
+  const groupIsIdentity = Object.entries(gt).every(
+    ([k, v]) => isScaleAxis(k) ? v === 1 : v === 0
+  );
+  if (groupIsIdentity) return html;
+  const rad = grot * Math.PI / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const round3 = (n) => Math.round(n * 1e3) / 1e3;
+  let script = block.scriptText;
+  for (const m of members) {
+    const memberSel = `#${m.id}`;
+    const sets = parsed.animations.filter(
+      (a) => a.targetSelector === memberSel && a.method === "set"
+    );
+    const mProps = {};
+    for (const s of sets) Object.assign(mProps, s.properties);
+    const mx = typeof mProps.x === "number" ? mProps.x : 0;
+    const my = typeof mProps.y === "number" ? mProps.y : 0;
+    const dx = m.cx + mx - groupCenter.cx;
+    const dy = m.cy + my - groupCenter.cy;
+    const visX = groupCenter.cx + gscale * (cos * dx - sin * dy) + gx;
+    const visY = groupCenter.cy + gscale * (sin * dx + cos * dy) + gy;
+    const newProps = {
+      ...mProps,
+      x: round3(visX - m.cx),
+      y: round3(visY - m.cy)
+    };
+    if (gz !== 0) newProps.z = (typeof mProps.z === "number" ? mProps.z : 0) + gz;
+    if (grot !== 0) {
+      newProps.rotation = round3(
+        (typeof mProps.rotation === "number" ? mProps.rotation : 0) + grot
+      );
+    }
+    if (gscale !== 1) {
+      newProps.scale = round3((typeof mProps.scale === "number" ? mProps.scale : 1) * gscale);
+    }
+    const pivoted = /* @__PURE__ */ new Set(["x", "y", "z", "rotation", "scale"]);
+    for (const [k, v] of Object.entries(gt)) {
+      if (pivoted.has(k) || typeof v !== "number") continue;
+      if (k === "scaleX" || k === "scaleY") {
+        if (v !== 1) newProps[k] = round3((typeof mProps[k] === "number" ? mProps[k] : 1) * v);
+      } else if (k === "transformPerspective") {
+        if (typeof mProps[k] !== "number") newProps[k] = v;
+      } else if (v !== 0) {
+        newProps[k] = round3((typeof mProps[k] === "number" ? mProps[k] : 0) + v);
+      }
+    }
+    for (const s of [...sets].reverse()) {
+      script = removeAnimationFromScript(script, s.id);
+    }
+    script = addAnimationToScript(script, {
+      targetSelector: memberSel,
+      method: "set",
+      position: 0,
+      properties: newProps,
+      global: true
+    }).script;
+  }
+  return block.replaceScript(script);
+}
 function stripStudioEditsFromTarget(document2, selector) {
   if (!selector) return 0;
   let stripped = 0;
@@ -1692,6 +1911,88 @@ function registerFileRoutes(api, adapter) {
       backupPath: backupPathForResponse(ctx.project.dir, backup.backupPath)
     });
   });
+  api.post("/projects/:id/file-mutations/wrap-elements/*", async (c) => {
+    const ctx = await resolveFileMutationContext(c, adapter, "wrap-elements");
+    if ("error" in ctx) return ctx.error;
+    const body = await c.req.json().catch(() => null);
+    if (!Array.isArray(body?.targets) || body.targets.length === 0 || !body.groupId) {
+      return c.json({ error: "targets and groupId required" }, 400);
+    }
+    const bbox = body.bbox ?? {};
+    const bboxNums = [bbox.left, bbox.top, bbox.width, bbox.height];
+    const rebases = body.rebases ?? [];
+    const allNumeric = bboxNums.every((n) => typeof n === "number" && Number.isFinite(n)) && rebases.every(
+      (r) => typeof r?.left === "number" && Number.isFinite(r.left) && typeof r?.top === "number" && Number.isFinite(r.top)
+    );
+    if (!allNumeric) {
+      return c.json({ error: "bbox and rebase coordinates must be finite numbers" }, 400);
+    }
+    let originalContent;
+    try {
+      originalContent = readFileSync3(ctx.absPath, "utf-8");
+    } catch {
+      return c.json({ error: "not found" }, 404);
+    }
+    const result = wrapElementsInHtml(
+      originalContent,
+      body.targets,
+      body.groupId,
+      { left: bbox.left, top: bbox.top, width: bbox.width, height: bbox.height },
+      rebases
+    );
+    if (!result.matched) {
+      return c.json(
+        {
+          ok: false,
+          changed: false,
+          content: originalContent,
+          path: ctx.filePath,
+          error: result.error
+        },
+        result.error === "grouped elements must share a single parent" ? 422 : 400
+      );
+    }
+    const backup = snapshotBeforeWrite(ctx.project.dir, ctx.absPath);
+    if (backup.error) console.warn(`Failed to create backup for ${ctx.filePath}: ${backup.error}`);
+    writeFileSync4(ctx.absPath, result.html, "utf-8");
+    return c.json({
+      ok: true,
+      changed: true,
+      groupId: result.groupId,
+      content: result.html,
+      path: ctx.filePath,
+      backupPath: backupPathForResponse(ctx.project.dir, backup.backupPath)
+    });
+  });
+  api.post("/projects/:id/file-mutations/unwrap-elements/*", async (c) => {
+    const ctx = await resolveFileMutationContext(c, adapter, "unwrap-elements");
+    if ("error" in ctx) return ctx.error;
+    const parsed = await parseMutationBody(c);
+    if ("error" in parsed) return parsed.error;
+    let originalContent;
+    try {
+      originalContent = readFileSync3(ctx.absPath, "utf-8");
+    } catch {
+      return c.json({ error: "not found" }, 404);
+    }
+    const result = unwrapElementsFromHtml(originalContent, parsed.target);
+    if (!result.unwrapped) {
+      return c.json({ ok: false, changed: false, content: originalContent, path: ctx.filePath });
+    }
+    let cleaned = result.html;
+    if (result.unwrappedGroupId && result.members && result.groupCenter) {
+      cleaned = bakeGroupTransformIntoMembers(
+        cleaned,
+        result.unwrappedGroupId,
+        result.members,
+        result.groupCenter
+      );
+    }
+    if (result.unwrappedGroupId) {
+      cleaned = stripGsapAnimationsForSelector(cleaned, `#${result.unwrappedGroupId}`);
+    }
+    return writeIfChanged(c, ctx.project.dir, ctx.filePath, ctx.absPath, originalContent, cleaned);
+  });
   api.post("/projects/:id/file-mutations/probe-element/*", async (c) => {
     const ctx = await resolveFileMutationContext(c, adapter, "probe-element");
     if ("error" in ctx) return ctx.error;