@hyperframes/studio 0.5.0-alpha.13 → 0.5.0-alpha.15

package/src/App.tsx

@@ -61,6 +61,7 @@ import {
   shouldHandleTimelineToggleHotkey,
 } from "./utils/timelineDiscovery";
 import { buildFrameCaptureFilename, buildFrameCaptureUrl } from "./utils/frameCapture";
+import { buildProjectHash, parseProjectIdFromHash } from "./utils/projectRouting";
 import { Camera } from "./icons/SystemIcons";
 import { PropertyPanel } from "./components/editor/PropertyPanel";
 import { googleFontStylesheetUrl } from "./components/editor/fontCatalog";
@@ -69,23 +70,38 @@ import {
   importedFontFaceCss,
   type ImportedFontAsset,
 } from "./components/editor/fontAssets";
-import { DomEditOverlay } from "./components/editor/DomEditOverlay";
+import {
+  DomEditOverlay,
+  type DomEditGroupPathOffsetCommit,
+} from "./components/editor/DomEditOverlay";
 import {
   buildDefaultDomEditTextField,
-  buildDomEditDetachPatchOperations,
-  buildDomEditMovePatchOperations,
-  buildDomEditResizePatchOperations,
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
   buildElementAgentPrompt,
   findElementForSelection,
+  getDomEditTargetKey,
   isTextEditableSelection,
   serializeDomEditTextFields,
-  resolveDomEditCapabilities,
   resolveDomEditSelection,
   type DomEditTextField,
   type DomEditSelection,
 } from "./components/editor/domEditing";
+import {
+  STUDIO_MANUAL_EDITS_PATH,
+  applyStudioManualEditManifest,
+  emptyStudioManualEditManifest,
+  installStudioManualEditSeekReapply,
+  isStudioManualEditManifestPath,
+  parseStudioManualEditManifest,
+  readStudioFileChangePath,
+  removeStudioManualEditsForSelection,
+  serializeStudioManualEditManifest,
+  type StudioManualEditManifest,
+  upsertStudioBoxSizeEdit,
+  upsertStudioPathOffsetEdit,
+  upsertStudioRotationEdit,
+} from "./components/editor/manualEdits";
 import { saveProjectFilesWithHistory } from "./utils/studioFileHistory";
 
 interface EditingFile {
@@ -226,10 +242,7 @@ function normalizeDomEditStyleValue(property: string, value: string): string {
   const trimmed = value.trim();
   if (!trimmed) return trimmed;
 
-  if (
-    ["left", "top", "width", "height", "border-radius", "font-size"].includes(property) &&
-    /^-?\d+(\.\d+)?$/.test(trimmed)
-  ) {
+  if (["border-radius", "font-size"].includes(property) && /^-?\d+(\.\d+)?$/.test(trimmed)) {
     return `${trimmed}px`;
   }
 
@@ -240,27 +253,6 @@ function isImageBackgroundValue(value: string): boolean {
   return /^url\(/i.test(value.trim());
 }
 
-function shouldDetachOppositeEdges(selection: DomEditSelection): boolean {
-  return Boolean(
-    selection.inlineStyles.inset || selection.inlineStyles.right || selection.inlineStyles.bottom,
-  );
-}
-
-function buildOppositeEdgePatchOperations(
-  selection: DomEditSelection,
-  dimension: "width" | "height" | "both",
-): PatchOperation[] {
-  if (!shouldDetachOppositeEdges(selection)) return [];
-  const operations: PatchOperation[] = [];
-  if (dimension === "width" || dimension === "both") {
-    operations.push({ type: "inline-style", property: "right", value: "auto" });
-  }
-  if (dimension === "height" || dimension === "both") {
-    operations.push({ type: "inline-style", property: "bottom", value: "auto" });
-  }
-  return operations;
-}
-
 function getEventTargetElement(target: EventTarget | null): HTMLElement | null {
   if (!target || typeof target !== "object") return null;
   const maybeNode = target as {
@@ -289,14 +281,6 @@ function getHistoryShortcutLabel(action: "undo" | "redo"): string {
   return action === "undo" ? `${modifier}+Z` : `${modifier}+Shift+Z`;
 }
 
-function getDomEditCoalesceKey(
-  selection: Pick<DomEditSelection, "id" | "selector" | "sourceFile">,
-  action: "move" | "resize",
-): string {
-  const target = selection.id || selection.selector || "selection";
-  return `${action}:${selection.sourceFile || "index.html"}:${target}`;
-}
-
 function findMatchingTimelineElementId(
   selection: Pick<
     DomEditSelection,
@@ -304,8 +288,14 @@ function findMatchingTimelineElementId(
   >,
   elements: TimelineElement[],
 ): string | null {
+  const selectionSourceFile = selection.sourceFile || "index.html";
   for (const element of elements) {
-    if (selection.id && element.domId === selection.id) {
+    const elementSourceFile = element.sourceFile || "index.html";
+    if (
+      selection.id &&
+      element.domId === selection.id &&
+      elementSourceFile === selectionSourceFile
+    ) {
       return element.key ?? element.id;
     }
     if (
@@ -328,112 +318,8 @@ function findMatchingTimelineElementId(
   return null;
 }
 
-function findMappedCompositionHost(
-  target: HTMLElement,
-  timelineElements: TimelineElement[],
-  compIdToSrc: Map<string, string>,
-  fileTree: string[],
-): { host: HTMLElement; compositionSrc: string } | null {
-  const rootCompositionId =
-    target.ownerDocument
-      .querySelector("[data-composition-id]")
-      ?.getAttribute("data-composition-id") ?? null;
-
-  let nestedCurrent: HTMLElement | null = target;
-  while (nestedCurrent) {
-    const nestedCompId = nestedCurrent.getAttribute("data-composition-id");
-    if (nestedCompId && nestedCompId !== rootCompositionId) {
-      const hostCandidate = nestedCurrent.parentElement?.closest(".clip");
-      if (hostCandidate instanceof HTMLElement) {
-        const hostCompId = hostCandidate.getAttribute("data-composition-id");
-        const compositionSrc =
-          hostCandidate.getAttribute("data-composition-src") ??
-          hostCandidate.getAttribute("data-composition-file") ??
-          (hostCompId ? compIdToSrc.get(hostCompId) : undefined) ??
-          compIdToSrc.get(nestedCompId) ??
-          fileTree.find((path) => path.endsWith(`${nestedCompId}.html`)) ??
-          undefined;
-        if (compositionSrc) {
-          return { host: hostCandidate, compositionSrc };
-        }
-      }
-    }
-    nestedCurrent = nestedCurrent.parentElement;
-  }
-
-  let current: HTMLElement | null = target;
-  while (current) {
-    const compId = current.getAttribute("data-composition-id");
-    const directSrc =
-      current.getAttribute("data-composition-src") ??
-      current.getAttribute("data-composition-file") ??
-      undefined;
-    const timelineMatch =
-      timelineElements.find(
-        (element) =>
-          Boolean(element.compositionSrc) &&
-          (element.domId === current?.id ||
-            (current?.id && element.id === current.id) ||
-            (compId && element.id === compId)),
-      ) ?? null;
-    const compositionSrc =
-      directSrc ??
-      timelineMatch?.compositionSrc ??
-      (compId ? compIdToSrc.get(compId) : undefined) ??
-      (compId ? fileTree.find((path) => path.endsWith(`${compId}.html`)) : undefined);
-    if (compositionSrc) {
-      return { host: current, compositionSrc };
-    }
-    current = current.parentElement;
-  }
-
-  return null;
-}
-
-function isMoveStyleProperty(property: string): boolean {
-  return property === "left" || property === "top";
-}
-
-function isResizeStyleProperty(property: string): boolean {
-  return property === "width" || property === "height";
-}
-
-function getDomDetachCoordinateRoot(element: HTMLElement): HTMLElement {
-  const offsetParent = element.offsetParent;
-  if (offsetParent instanceof HTMLElement) return offsetParent;
-
-  let current = element.parentElement;
-  while (current) {
-    if (current.hasAttribute("data-composition-id")) return current;
-    current = current.parentElement;
-  }
-
-  return element.ownerDocument.body;
-}
-
-function measureDomDetachRect(element: HTMLElement): {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-} {
-  const root = getDomDetachCoordinateRoot(element);
-  const rect = element.getBoundingClientRect();
-  const rootRect = root.getBoundingClientRect();
-
-  return {
-    left: rect.left - rootRect.left + root.scrollLeft,
-    top: rect.top - rootRect.top + root.scrollTop,
-    width: rect.width,
-    height: rect.height,
-  };
-}
-
-function getDomSelectionClickKey(
-  selection: Pick<DomEditSelection, "id" | "selector" | "selectorIndex">,
-): string {
-  if (selection.id) return `id:${selection.id}`;
-  return `${selection.selector ?? "unknown"}:${selection.selectorIndex ?? 0}`;
+function isManualGeometryStyleProperty(property: string): boolean {
+  return property === "left" || property === "top" || property === "width" || property === "height";
 }
 
 function getPreviewTargetFromPointer(
@@ -467,6 +353,108 @@ function getPreviewTargetFromPointer(
   return getEventTargetElement(doc.elementFromPoint(localX, localY));
 }
 
+function domEditSelectionsTargetSame(
+  a: DomEditSelection | null,
+  b: DomEditSelection | null,
+): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return getDomEditTargetKey(a) === getDomEditTargetKey(b);
+}
+
+function domEditSelectionInGroup(
+  group: DomEditSelection[],
+  selection: DomEditSelection | null,
+): boolean {
+  if (!selection) return false;
+  return group.some((entry) => domEditSelectionsTargetSame(entry, selection));
+}
+
+function toggleDomEditGroupSelection(
+  group: DomEditSelection[],
+  selection: DomEditSelection,
+): DomEditSelection[] {
+  if (domEditSelectionInGroup(group, selection)) {
+    return group.filter((entry) => !domEditSelectionsTargetSame(entry, selection));
+  }
+  return [...group, selection];
+}
+
+function replaceDomEditGroupSelection(
+  group: DomEditSelection[],
+  selection: DomEditSelection,
+): DomEditSelection[] {
+  let replaced = false;
+  const nextGroup = group.map((entry) => {
+    if (!domEditSelectionsTargetSame(entry, selection)) return entry;
+    replaced = true;
+    return selection;
+  });
+  return replaced ? nextGroup : [...group, selection];
+}
+
+function seedDomEditGroupWithSelection(
+  group: DomEditSelection[],
+  selection: DomEditSelection | null,
+): DomEditSelection[] {
+  if (!selection || domEditSelectionInGroup(group, selection)) return group;
+  return [selection, ...group];
+}
+
+function objectLike(value: unknown): object | null {
+  return value && (typeof value === "object" || typeof value === "function") ? value : null;
+}
+
+function callPlaybackMethod(target: object | null, key: string): void {
+  const method = target ? Reflect.get(target, key) : null;
+  if (typeof method !== "function") return;
+  try {
+    method.call(target);
+  } catch {
+    // Best-effort playback freeze; drag should still work if playback control is unavailable.
+  }
+}
+
+function readPlaybackTime(target: object | null, key: string): number | null {
+  const method = target ? Reflect.get(target, key) : null;
+  if (typeof method !== "function") return null;
+  try {
+    const value = method.call(target);
+    return typeof value === "number" && Number.isFinite(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function pauseStudioPreviewPlayback(iframe: HTMLIFrameElement | null): number | null {
+  const win = iframe?.contentWindow;
+  if (!win) return null;
+
+  try {
+    let pausedTime: number | null = null;
+    const player = objectLike(Reflect.get(win, "__player"));
+    pausedTime = readPlaybackTime(player, "getTime") ?? pausedTime;
+    callPlaybackMethod(player, "pause");
+
+    const timeline = objectLike(Reflect.get(win, "__timeline"));
+    pausedTime = pausedTime ?? readPlaybackTime(timeline, "time");
+    callPlaybackMethod(timeline, "pause");
+
+    const timelines = objectLike(Reflect.get(win, "__timelines"));
+    if (timelines) {
+      for (const value of Object.values(timelines)) {
+        const timelineRecord = objectLike(value);
+        pausedTime = pausedTime ?? readPlaybackTime(timelineRecord, "time");
+        callPlaybackMethod(timelineRecord, "pause");
+      }
+    }
+
+    return pausedTime;
+  } catch {
+    return null;
+  }
+}
+
 // ── Ask Agent Modal ──
 
 function AskAgentModal({
@@ -611,9 +599,9 @@ export function StudioApp() {
   const [resolving, setResolving] = useState(true);
 
   useMountEffect(() => {
-    const hashMatch = window.location.hash.match(/^#project\/([^/]+)/);
-    if (hashMatch) {
-      setProjectId(hashMatch[1]);
+    const hashProjectId = parseProjectIdFromHash(window.location.hash);
+    if (hashProjectId) {
+      setProjectId(hashProjectId);
       setResolving(false);
       return;
     }
@@ -624,7 +612,7 @@ export function StudioApp() {
         const first = (data.projects ?? [])[0];
         if (first) {
           setProjectId(first.id);
-          window.location.hash = `#project/${first.id}`;
+          window.location.hash = buildProjectHash(first.id);
         }
       })
       .catch(() => {})
@@ -648,6 +636,8 @@ export function StudioApp() {
   const [rightCollapsed, setRightCollapsed] = useState(true);
   const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>("renders");
   const [domEditSelection, setDomEditSelection] = useState<DomEditSelection | null>(null);
+  const [domEditGroupSelections, setDomEditGroupSelections] = useState<DomEditSelection[]>([]);
+  const [domEditHoverSelection, setDomEditHoverSelection] = useState<DomEditSelection | null>(null);
   const [agentPromptTagSnippet, setAgentPromptTagSnippet] = useState<string | undefined>();
   const [copiedAgentPrompt, setCopiedAgentPrompt] = useState(false);
   const [agentModalOpen, setAgentModalOpen] = useState(false);
@@ -784,6 +774,7 @@ export function StudioApp() {
   const lastBlockedDomMoveToastAtRef = useRef(0);
   const importedFontAssetsRef = useRef<ImportedFontAsset[]>([]);
   const previewHotkeyWindowRef = useRef<Window | null>(null);
+  const previewHistoryHotkeyCleanupRef = useRef<(() => void) | null>(null);
   const panelDragRef = useRef<{
     side: "left" | "right";
     startX: number;
@@ -1102,9 +1093,37 @@ export function StudioApp() {
   const consoleErrorsRef = useRef<LintFinding[]>([]);
   const copiedAgentTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const domEditSelectionRef = useRef<DomEditSelection | null>(domEditSelection);
-  const lastPreviewClickRef = useRef<{ key: string; at: number } | null>(null);
+  const domEditGroupSelectionsRef = useRef<DomEditSelection[]>(domEditGroupSelections);
+  const domEditHoverSelectionRef = useRef<DomEditSelection | null>(domEditHoverSelection);
   const domEditSaveTimestampRef = useRef(0);
   const domTextCommitVersionRef = useRef(0);
+  const domEditSaveQueueRef = useRef(Promise.resolve());
+  const studioManualEditManifestRef = useRef<StudioManualEditManifest>(
+    emptyStudioManualEditManifest(),
+  );
+  const studioManualEditRevisionRef = useRef(0);
+  const applyStudioManualEditsToPreviewRef = useRef<
+    (
+      iframe?: HTMLIFrameElement | null,
+      options?: { forceFromDisk?: boolean; readFromDiskFirst?: boolean },
+    ) => Promise<void>
+  >(async () => {});
+  const studioManualEditProjectRef = useRef<string | null>(projectId);
+  const activeCompPathRef = useRef(activeCompPath);
+  activeCompPathRef.current = activeCompPath;
+
+  const queueDomEditSave = useCallback((save: () => Promise<void>) => {
+    const queuedSave = domEditSaveQueueRef.current.catch(() => undefined).then(save);
+    domEditSaveQueueRef.current = queuedSave.then(
+      () => undefined,
+      () => undefined,
+    );
+    return queuedSave;
+  }, []);
+
+  const waitForPendingDomEditSaves = useCallback(async () => {
+    await domEditSaveQueueRef.current.catch(() => undefined);
+  }, []);
 
   // Listen for external file changes (user editing HTML outside the editor).
   // In dev: use Vite HMR. In embedded/production: use SSE from /api/events.
@@ -1112,8 +1131,18 @@ export function StudioApp() {
   // those changes are already applied to the iframe DOM and a full reload
   // would flash the preview.
   useMountEffect(() => {
-    const handler = () => {
-      if (Date.now() - domEditSaveTimestampRef.current < 1200) return;
+    const handler = (payload?: unknown) => {
+      const changedPath = readStudioFileChangePath(payload);
+      const recentDomEditSave = Date.now() - domEditSaveTimestampRef.current < 1200;
+      if (isStudioManualEditManifestPath(changedPath)) {
+        if (!recentDomEditSave) {
+          void applyStudioManualEditsToPreviewRef.current(previewIframeRef.current, {
+            forceFromDisk: true,
+          });
+        }
+        return;
+      }
+      if (recentDomEditSave) return;
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
       refreshTimerRef.current = setTimeout(() => setRefreshKey((k) => k + 1), 400);
     };
@@ -1128,6 +1157,17 @@ export function StudioApp() {
   });
   projectIdRef.current = projectId;
   domEditSelectionRef.current = domEditSelection;
+  domEditGroupSelectionsRef.current = domEditGroupSelections;
+  domEditHoverSelectionRef.current = domEditHoverSelection;
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    const previousProjectId = studioManualEditProjectRef.current;
+    studioManualEditProjectRef.current = projectId;
+    if (!previousProjectId || previousProjectId === projectId) return;
+    studioManualEditManifestRef.current = emptyStudioManualEditManifest();
+    studioManualEditRevisionRef.current += 1;
+  }, [projectId]);
 
   // Load file tree when projectId changes.
   // Note: This is one of the few places where useEffect with deps is acceptable —
@@ -1199,6 +1239,16 @@ export function StudioApp() {
     }
   }, []);
 
+  const readOptionalProjectFile = useCallback(async (path: string): Promise<string> => {
+    const pid = projectIdRef.current;
+    if (!pid) throw new Error("No active project");
+    const response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`);
+    if (response.status === 404) return "";
+    if (!response.ok) throw new Error(`Failed to read ${path}`);
+    const data = (await response.json()) as { content?: string };
+    return typeof data.content === "string" ? data.content : "";
+  }, []);
+
   const handleContentChange = useCallback(
     (content: string) => {
       const pid = projectIdRef.current;
@@ -1419,6 +1469,7 @@ export function StudioApp() {
 
       const currentTime = usePlayerStore.getState().currentTime;
       setCaptureFrameTime(currentTime);
+      await waitForPendingDomEditSaves();
       const href = buildFrameCaptureUrl({
         projectId,
         compositionPath: activeCompPath,
@@ -1445,7 +1496,7 @@ export function StudioApp() {
         showToast(message);
       }
     },
-    [activeCompPath, projectId, showToast],
+    [activeCompPath, projectId, showToast, waitForPendingDomEditSaves],
   );
 
   const handleTimelineElementDelete = useCallback(
@@ -1572,10 +1623,8 @@ export function StudioApp() {
       if (now - lastBlockedDomMoveToastAtRef.current < 1500) return;
       lastBlockedDomMoveToastAtRef.current = now;
       showToast(
-        selection.capabilities.canDetachFromLayout
-          ? "This layer is controlled by layout. Use Make movable in the panel to detach it."
-          : (selection.capabilities.reasonIfDisabled ??
-              "This element can’t be moved directly from the preview."),
+        selection.capabilities.reasonIfDisabled ??
+          "This element can’t be adjusted directly from the preview.",
         "info",
       );
     },
@@ -1583,16 +1632,57 @@ export function StudioApp() {
   );
 
   const applyDomSelection = useCallback(
-    (selection: DomEditSelection | null, options?: { revealPanel?: boolean }) => {
-      setDomEditSelection(selection);
+    (
+      selection: DomEditSelection | null,
+      options?: { revealPanel?: boolean; additive?: boolean; preserveGroup?: boolean },
+    ) => {
       setAgentPromptTagSnippet(undefined);
       setCopiedAgentPrompt(false);
-      if (selection) {
+      if (!selection) {
+        domEditSelectionRef.current = null;
+        domEditGroupSelectionsRef.current = [];
+        setDomEditSelection(null);
+        setDomEditGroupSelections([]);
+        setSelectedTimelineElementId(null);
+        return;
+      }
+
+      const isAdditiveSelection = Boolean(options?.additive);
+      const currentSelection = domEditSelectionRef.current;
+      const previousGroup = domEditGroupSelectionsRef.current;
+      const currentGroup = isAdditiveSelection
+        ? seedDomEditGroupWithSelection(previousGroup, currentSelection)
+        : previousGroup;
+      const wasInGroup = domEditSelectionInGroup(currentGroup, selection);
+      const nextGroup = options?.preserveGroup
+        ? replaceDomEditGroupSelection(currentGroup, selection)
+        : isAdditiveSelection
+          ? toggleDomEditGroupSelection(currentGroup, selection)
+          : [selection];
+      const nextSelection = options?.preserveGroup
+        ? selection
+        : isAdditiveSelection && wasInGroup
+          ? domEditSelectionsTargetSame(currentSelection, selection)
+            ? (nextGroup[0] ?? null)
+            : domEditSelectionInGroup(nextGroup, currentSelection)
+              ? currentSelection
+              : (nextGroup[0] ?? null)
+          : selection;
+
+      domEditSelectionRef.current = nextSelection;
+      domEditGroupSelectionsRef.current = nextGroup;
+      setDomEditSelection(nextSelection);
+      setDomEditGroupSelections(nextGroup);
+
+      if (nextSelection) {
         if (options?.revealPanel !== false) {
           setRightCollapsed(false);
           setRightPanelTab("design");
         }
-        const nextSelectedTimelineId = findMatchingTimelineElementId(selection, timelineElements);
+        const nextSelectedTimelineId = findMatchingTimelineElementId(
+          nextSelection,
+          timelineElements,
+        );
         setSelectedTimelineElementId(nextSelectedTimelineId);
         return;
       }
@@ -1606,10 +1696,194 @@ export function StudioApp() {
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection]);
 
+  const readHistoryProjectFile = useCallback(
+    async (path: string): Promise<string> => {
+      return path === STUDIO_MANUAL_EDITS_PATH
+        ? readOptionalProjectFile(path)
+        : readProjectFile(path);
+    },
+    [readOptionalProjectFile, readProjectFile],
+  );
+
+  const writeHistoryProjectFile = useCallback(
+    async (path: string, content: string): Promise<void> => {
+      await writeProjectFile(path, content);
+      if (path === STUDIO_MANUAL_EDITS_PATH) {
+        domEditSaveTimestampRef.current = Date.now();
+      }
+    },
+    [writeProjectFile],
+  );
+
+  const applyCurrentStudioManualEditsToPreview = useCallback(
+    (iframe: HTMLIFrameElement | null = previewIframeRef.current) => {
+      if (!iframe) return;
+      let doc: Document | null = null;
+      try {
+        doc = iframe.contentDocument;
+      } catch {
+        return;
+      }
+      if (!doc) return;
+      const previewDoc = doc;
+
+      const applyManifest = () => {
+        applyStudioManualEditManifest(
+          previewDoc,
+          studioManualEditManifestRef.current,
+          activeCompPathRef.current,
+        );
+      };
+      const applyAndInstallSeekHooks = () => {
+        applyManifest();
+        if (iframe.contentWindow) {
+          installStudioManualEditSeekReapply(iframe.contentWindow, applyManifest);
+        }
+      };
+
+      const win = iframe.contentWindow;
+      applyAndInstallSeekHooks();
+      win?.requestAnimationFrame?.(applyAndInstallSeekHooks);
+      win?.setTimeout?.(applyAndInstallSeekHooks, 80);
+      win?.setTimeout?.(applyAndInstallSeekHooks, 250);
+      win?.setTimeout?.(applyAndInstallSeekHooks, 500);
+      win?.setTimeout?.(applyAndInstallSeekHooks, 1000);
+      win?.setTimeout?.(applyAndInstallSeekHooks, 2000);
+    },
+    [],
+  );
+
+  const applyStudioManualEditsToPreview = useCallback(
+    async (
+      iframe: HTMLIFrameElement | null = previewIframeRef.current,
+      options?: { forceFromDisk?: boolean; readFromDiskFirst?: boolean },
+    ) => {
+      const readRevision = studioManualEditRevisionRef.current;
+      const readFromDiskFirst = Boolean(options?.forceFromDisk || options?.readFromDiskFirst);
+      if (!readFromDiskFirst) {
+        applyCurrentStudioManualEditsToPreview(iframe);
+      }
+      let content: string;
+      try {
+        content = await readOptionalProjectFile(STUDIO_MANUAL_EDITS_PATH);
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to read manual edit manifest";
+        showToast(message);
+        if (readFromDiskFirst) {
+          applyCurrentStudioManualEditsToPreview(iframe);
+        }
+        return;
+      }
+      if (options?.forceFromDisk || readRevision === studioManualEditRevisionRef.current) {
+        studioManualEditManifestRef.current = parseStudioManualEditManifest(content);
+        if (options?.forceFromDisk) studioManualEditRevisionRef.current += 1;
+        applyCurrentStudioManualEditsToPreview(iframe);
+        return;
+      }
+      if (readFromDiskFirst) {
+        applyCurrentStudioManualEditsToPreview(iframe);
+      }
+    },
+    [applyCurrentStudioManualEditsToPreview, readOptionalProjectFile, showToast],
+  );
+  applyStudioManualEditsToPreviewRef.current = applyStudioManualEditsToPreview;
+
+  const applyStudioManualEditsToPreviewAfterRefresh = useCallback(
+    (iframe: HTMLIFrameElement | null = previewIframeRef.current) =>
+      applyStudioManualEditsToPreview(iframe, { readFromDiskFirst: true }),
+    [applyStudioManualEditsToPreview],
+  );
+
+  const commitStudioManualEditManifestOptimistically = useCallback(
+    (
+      updateManifest: (manifest: StudioManualEditManifest) => StudioManualEditManifest,
+      options: { label: string; coalesceKey: string },
+    ) => {
+      const previousManifest = studioManualEditManifestRef.current;
+      const nextManifest = updateManifest(previousManifest);
+      const previousContent = serializeStudioManualEditManifest(previousManifest);
+      const nextContent = serializeStudioManualEditManifest(nextManifest);
+      if (nextContent === previousContent) {
+        return;
+      }
+
+      const revision = studioManualEditRevisionRef.current + 1;
+      studioManualEditRevisionRef.current = revision;
+      studioManualEditManifestRef.current = nextManifest;
+      applyCurrentStudioManualEditsToPreview(previewIframeRef.current);
+
+      const save = async () => {
+        const originalContent = await readOptionalProjectFile(STUDIO_MANUAL_EDITS_PATH);
+        const diskManifest = parseStudioManualEditManifest(originalContent);
+        const nextDiskManifest = updateManifest(diskManifest);
+        const nextDiskContent = serializeStudioManualEditManifest(nextDiskManifest);
+        if (nextDiskContent === originalContent) {
+          return;
+        }
+
+        const pid = projectIdRef.current;
+        if (!pid) throw new Error("No active project");
+        domEditSaveTimestampRef.current = Date.now();
+        await saveProjectFilesWithHistory({
+          projectId: pid,
+          label: options.label,
+          kind: "manual",
+          coalesceKey: options.coalesceKey,
+          files: { [STUDIO_MANUAL_EDITS_PATH]: nextDiskContent },
+          readFile: async () => originalContent,
+          writeFile: writeProjectFile,
+          recordEdit: editHistory.recordEdit,
+        });
+        domEditSaveTimestampRef.current = Date.now();
+
+        if (studioManualEditRevisionRef.current === revision) {
+          studioManualEditManifestRef.current = nextDiskManifest;
+          applyCurrentStudioManualEditsToPreview(previewIframeRef.current);
+        }
+      };
+
+      void queueDomEditSave(save).catch((error) => {
+        if (studioManualEditRevisionRef.current === revision) {
+          studioManualEditRevisionRef.current += 1;
+          studioManualEditManifestRef.current = previousManifest;
+          applyCurrentStudioManualEditsToPreview(previewIframeRef.current);
+        }
+        const message = error instanceof Error ? error.message : "Failed to save manual edit";
+        showToast(message);
+      });
+    },
+    [
+      applyCurrentStudioManualEditsToPreview,
+      editHistory.recordEdit,
+      queueDomEditSave,
+      readOptionalProjectFile,
+      showToast,
+      writeProjectFile,
+    ],
+  );
+
+  const syncHistoryPreviewAfterApply = useCallback(
+    async (paths: string[] | undefined) => {
+      const changedPaths = paths ?? [];
+      const manualManifestOnly =
+        changedPaths.length > 0 && changedPaths.every((path) => path === STUDIO_MANUAL_EDITS_PATH);
+
+      if (manualManifestOnly) {
+        await applyStudioManualEditsToPreview(previewIframeRef.current, { forceFromDisk: true });
+        return;
+      }
+
+      setRefreshKey((key) => key + 1);
+    },
+    [applyStudioManualEditsToPreview],
+  );
+
   const handleUndo = useCallback(async () => {
+    await waitForPendingDomEditSaves();
     const result = await editHistory.undo({
-      readFile: readProjectFile,
-      writeFile: writeProjectFile,
+      readFile: readHistoryProjectFile,
+      writeFile: writeHistoryProjectFile,
     });
     if (!result.ok && result.reason === "content-mismatch") {
       showToast("File changed outside Studio. Undo history was not applied.", "info");
@@ -1617,15 +1891,24 @@ export function StudioApp() {
     }
     if (result.ok && result.label) {
       clearDomSelection();
-      setRefreshKey((key) => key + 1);
+      await syncHistoryPreviewAfterApply(result.paths);
       showToast(`Undid ${result.label}`, "info");
     }
-  }, [clearDomSelection, editHistory, readProjectFile, showToast, writeProjectFile]);
+  }, [
+    clearDomSelection,
+    editHistory,
+    readHistoryProjectFile,
+    showToast,
+    syncHistoryPreviewAfterApply,
+    waitForPendingDomEditSaves,
+    writeHistoryProjectFile,
+  ]);
 
   const handleRedo = useCallback(async () => {
+    await waitForPendingDomEditSaves();
     const result = await editHistory.redo({
-      readFile: readProjectFile,
-      writeFile: writeProjectFile,
+      readFile: readHistoryProjectFile,
+      writeFile: writeHistoryProjectFile,
     });
     if (!result.ok && result.reason === "content-mismatch") {
       showToast("File changed outside Studio. Redo history was not applied.", "info");
@@ -1633,78 +1916,107 @@ export function StudioApp() {
     }
     if (result.ok && result.label) {
       clearDomSelection();
-      setRefreshKey((key) => key + 1);
+      await syncHistoryPreviewAfterApply(result.paths);
       showToast(`Redid ${result.label}`, "info");
     }
-  }, [clearDomSelection, editHistory, readProjectFile, showToast, writeProjectFile]);
+  }, [
+    clearDomSelection,
+    editHistory,
+    readHistoryProjectFile,
+    showToast,
+    syncHistoryPreviewAfterApply,
+    waitForPendingDomEditSaves,
+    writeHistoryProjectFile,
+  ]);
 
   const handleUndoRef = useRef(handleUndo);
   const handleRedoRef = useRef(handleRedo);
   handleUndoRef.current = handleUndo;
   handleRedoRef.current = handleRedo;
 
+  const handleHistoryHotkey = useCallback((event: KeyboardEvent) => {
+    if (!(event.metaKey || event.ctrlKey)) return;
+    if (shouldIgnoreHistoryShortcut(event.target)) return;
+    const key = event.key.toLowerCase();
+    if (key === "z" && !event.shiftKey) {
+      event.preventDefault();
+      void handleUndoRef.current();
+      return;
+    }
+    if ((key === "z" && event.shiftKey) || (event.ctrlKey && !event.metaKey && key === "y")) {
+      event.preventDefault();
+      void handleRedoRef.current();
+    }
+  }, []);
+
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    const handler = (event: KeyboardEvent) => {
-      if (!(event.metaKey || event.ctrlKey)) return;
-      if (shouldIgnoreHistoryShortcut(event.target)) return;
-      const key = event.key.toLowerCase();
-      if (key === "z" && !event.shiftKey) {
-        event.preventDefault();
-        void handleUndoRef.current();
-        return;
-      }
-      if ((key === "z" && event.shiftKey) || (event.ctrlKey && !event.metaKey && key === "y")) {
-        event.preventDefault();
-        void handleRedoRef.current();
+    window.addEventListener("keydown", handleHistoryHotkey, true);
+    return () => window.removeEventListener("keydown", handleHistoryHotkey, true);
+  }, [handleHistoryHotkey]);
+
+  const syncPreviewHistoryHotkey = useCallback(
+    (iframe: HTMLIFrameElement | null) => {
+      previewHistoryHotkeyCleanupRef.current?.();
+      previewHistoryHotkeyCleanupRef.current = null;
+
+      const win = iframe?.contentWindow ?? null;
+      let doc: Document | null = null;
+      try {
+        doc = iframe?.contentDocument ?? null;
+      } catch {
+        doc = null;
       }
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  }, []);
+      if (!win && !doc) return;
+
+      win?.addEventListener("keydown", handleHistoryHotkey, true);
+      doc?.addEventListener("keydown", handleHistoryHotkey, true);
+      previewHistoryHotkeyCleanupRef.current = () => {
+        win?.removeEventListener("keydown", handleHistoryHotkey, true);
+        doc?.removeEventListener("keydown", handleHistoryHotkey, true);
+      };
+    },
+    [handleHistoryHotkey],
+  );
+
+  useEffect(
+    () => () => {
+      previewHistoryHotkeyCleanupRef.current?.();
+      previewHistoryHotkeyCleanupRef.current = null;
+    },
+    [],
+  );
 
   const buildDomSelectionFromTarget = useCallback(
     (target: HTMLElement, options?: { preferClipAncestor?: boolean }) => {
-      if (isMasterView) {
-        const mappedHost = findMappedCompositionHost(
-          target,
-          timelineElements,
-          compIdToSrc,
-          fileTree,
-        );
-        if (mappedHost) {
-          const hostSelection = resolveDomEditSelection(mappedHost.host, {
-            activeCompositionPath: activeCompPath,
-            isMasterView,
-            preferClipAncestor: options?.preferClipAncestor,
-          });
-          if (!hostSelection) return null;
-          return {
-            ...hostSelection,
-            compositionSrc: mappedHost.compositionSrc,
-            isCompositionHost: true,
-            capabilities: resolveDomEditCapabilities({
-              selector: hostSelection.selector,
-              tagName: hostSelection.tagName,
-              className: hostSelection.element.className,
-              inlineStyles: hostSelection.inlineStyles,
-              computedStyles: hostSelection.computedStyles,
-              isCompositionHost: true,
-              isMasterView: true,
-            }),
-          } satisfies DomEditSelection;
-        }
-      }
-
       return resolveDomEditSelection(target, {
         activeCompositionPath: activeCompPath,
         isMasterView,
         preferClipAncestor: options?.preferClipAncestor,
       });
     },
-    [activeCompPath, compIdToSrc, fileTree, isMasterView, timelineElements],
+    [activeCompPath, isMasterView],
   );
 
+  const resolveDomSelectionFromPreviewPoint = useCallback(
+    (clientX: number, clientY: number, options?: { preferClipAncestor?: boolean }) => {
+      const iframe = previewIframeRef.current;
+      if (!iframe || captionEditMode) return null;
+      const target = getPreviewTargetFromPointer(iframe, clientX, clientY);
+      if (!target) return null;
+      return buildDomSelectionFromTarget(target, {
+        preferClipAncestor: options?.preferClipAncestor,
+      });
+    },
+    [buildDomSelectionFromTarget, captionEditMode],
+  );
+
+  const updateDomEditHoverSelection = useCallback((selection: DomEditSelection | null) => {
+    if (domEditSelectionsTargetSame(domEditHoverSelectionRef.current, selection)) return;
+    domEditHoverSelectionRef.current = selection;
+    setDomEditHoverSelection(selection);
+  }, []);
+
   const preloadAgentPromptSnippet = useCallback(
     async (selection: DomEditSelection) => {
       const pid = projectIdRef.current;
@@ -1817,110 +2129,183 @@ export function StudioApp() {
     [activeCompPath, editHistory.recordEdit, writeProjectFile],
   );
 
-  const handleDomMoveCommit = useCallback(
-    async (selection: DomEditSelection, next: { left: number; top: number }) => {
-      await persistDomEditOperations(
-        selection,
-        [
-          ...buildDomEditMovePatchOperations(next.left, next.top),
-          ...buildOppositeEdgePatchOperations(selection, "both"),
-        ],
+  const refreshDomEditSelectionFromPreview = useCallback(
+    (selection: DomEditSelection) => {
+      const iframe = previewIframeRef.current;
+      let doc: Document | null = null;
+      try {
+        doc = iframe?.contentDocument ?? null;
+      } catch {
+        return;
+      }
+      if (!doc) return;
+
+      const element = findElementForSelection(doc, selection, activeCompPath);
+      if (!element) return;
+
+      const nextSelection = buildDomSelectionFromTarget(element);
+      if (nextSelection) {
+        applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+      }
+    },
+    [activeCompPath, applyDomSelection, buildDomSelectionFromTarget],
+  );
+
+  const refreshDomEditGroupSelectionsFromPreview = useCallback(
+    (selections: DomEditSelection[]) => {
+      const iframe = previewIframeRef.current;
+      let doc: Document | null = null;
+      try {
+        doc = iframe?.contentDocument ?? null;
+      } catch {
+        return;
+      }
+      if (!doc) return;
+
+      const nextGroup: DomEditSelection[] = [];
+      for (const selection of selections) {
+        const element = findElementForSelection(doc, selection, activeCompPath);
+        if (!element) continue;
+        const nextSelection = buildDomSelectionFromTarget(element);
+        if (nextSelection) nextGroup.push(nextSelection);
+      }
+      if (nextGroup.length === 0) return;
+
+      const currentSelection = domEditSelectionRef.current;
+      const nextSelection =
+        nextGroup.find((selection) => domEditSelectionsTargetSame(selection, currentSelection)) ??
+        nextGroup[0] ??
+        null;
+
+      setAgentPromptTagSnippet(undefined);
+      setCopiedAgentPrompt(false);
+      domEditSelectionRef.current = nextSelection;
+      domEditGroupSelectionsRef.current = nextGroup;
+      setDomEditSelection(nextSelection);
+      setDomEditGroupSelections(nextGroup);
+
+      if (nextSelection) {
+        setSelectedTimelineElementId(
+          findMatchingTimelineElementId(nextSelection, timelineElements),
+        );
+      } else {
+        setSelectedTimelineElementId(null);
+      }
+    },
+    [activeCompPath, buildDomSelectionFromTarget, setSelectedTimelineElementId, timelineElements],
+  );
+
+  const handleDomManualDragStart = useCallback(() => {
+    const pausedTime = pauseStudioPreviewPlayback(previewIframeRef.current);
+    const playerStore = usePlayerStore.getState();
+    playerStore.setIsPlaying(false);
+    if (pausedTime != null) {
+      playerStore.setCurrentTime(pausedTime);
+      liveTime.notify(pausedTime);
+    }
+  }, []);
+
+  const handleDomPathOffsetCommit = useCallback(
+    (selection: DomEditSelection, next: { x: number; y: number }) => {
+      commitStudioManualEditManifestOptimistically(
+        (manifest) => upsertStudioPathOffsetEdit(manifest, selection, next),
         {
-          skipRefresh: true,
           label: "Move layer",
-          coalesceKey: getDomEditCoalesceKey(selection, "move"),
+          coalesceKey: `path-offset:${getDomEditTargetKey(selection)}`,
         },
       );
+      refreshDomEditSelectionFromPreview(selection);
     },
-    [persistDomEditOperations],
+    [commitStudioManualEditManifestOptimistically, refreshDomEditSelectionFromPreview],
   );
 
-  const handleDomResizeCommit = useCallback(
-    async (selection: DomEditSelection, next: { width: number; height: number }) => {
-      if (shouldDetachOppositeEdges(selection)) {
-        selection.element.style.right = "auto";
-        selection.element.style.bottom = "auto";
-      }
-      await persistDomEditOperations(
-        selection,
-        [
-          ...buildDomEditResizePatchOperations(next.width, next.height),
-          ...buildOppositeEdgePatchOperations(selection, "both"),
-        ],
+  const handleDomGroupPathOffsetCommit = useCallback(
+    (updates: DomEditGroupPathOffsetCommit[]) => {
+      if (updates.length === 0) return;
+      const coalesceKey = updates
+        .map((update) => getDomEditTargetKey(update.selection))
+        .sort()
+        .join(":");
+      commitStudioManualEditManifestOptimistically(
+        (manifest) =>
+          updates.reduce(
+            (nextManifest, update) =>
+              upsertStudioPathOffsetEdit(nextManifest, update.selection, update.next),
+            manifest,
+          ),
         {
-          skipRefresh: true,
-          label: "Resize layer",
-          coalesceKey: getDomEditCoalesceKey(selection, "resize"),
+          label: `Move ${updates.length} layers`,
+          coalesceKey: `group-path-offset:${coalesceKey}`,
         },
       );
+      refreshDomEditGroupSelectionsFromPreview(domEditGroupSelectionsRef.current);
     },
-    [persistDomEditOperations],
+    [commitStudioManualEditManifestOptimistically, refreshDomEditGroupSelectionsFromPreview],
   );
 
-  const handleDomDetachFromLayout = useCallback(async () => {
-    const selection = domEditSelection;
-    if (!selection?.capabilities.canDetachFromLayout) return;
-
-    const doc = previewIframeRef.current?.contentDocument;
-    const element = doc
-      ? findElementForSelection(doc, selection, selection.sourceFile)
-      : selection.element;
-    if (!element) {
-      showToast("Could not find the selected layer in the preview.", "info");
-      return;
-    }
-
-    const rect = measureDomDetachRect(element);
-    const operations = buildDomEditDetachPatchOperations(rect);
-
-    for (const operation of operations) {
-      element.style.setProperty(operation.property, operation.value);
-    }
+  const handleDomBoxSizeCommit = useCallback(
+    (selection: DomEditSelection, next: { width: number; height: number }) => {
+      commitStudioManualEditManifestOptimistically(
+        (manifest) => upsertStudioBoxSizeEdit(manifest, selection, next),
+        {
+          label: "Resize layer box",
+          coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
+        },
+      );
+      refreshDomEditSelectionFromPreview(selection);
+    },
+    [commitStudioManualEditManifestOptimistically, refreshDomEditSelectionFromPreview],
+  );
 
-    await persistDomEditOperations(selection, operations, {
-      skipRefresh: true,
-      label: "Make layer movable",
-    });
+  const handleDomRotationCommit = useCallback(
+    (selection: DomEditSelection, next: { angle: number }) => {
+      commitStudioManualEditManifestOptimistically(
+        (manifest) => upsertStudioRotationEdit(manifest, selection, next),
+        {
+          label: "Rotate layer",
+          coalesceKey: `rotation:${getDomEditTargetKey(selection)}`,
+        },
+      );
+      refreshDomEditSelectionFromPreview(selection);
+    },
+    [commitStudioManualEditManifestOptimistically, refreshDomEditSelectionFromPreview],
+  );
 
-    const refreshed = doc ? findElementForSelection(doc, selection, selection.sourceFile) : element;
-    if (refreshed) {
-      const nextSelection = buildDomSelectionFromTarget(refreshed);
-      if (nextSelection) {
-        applyDomSelection(nextSelection, { revealPanel: false });
-      }
-    }
-    showToast("Layer detached from layout. You can move it now.", "info");
-  }, [
-    applyDomSelection,
-    buildDomSelectionFromTarget,
-    domEditSelection,
-    persistDomEditOperations,
-    showToast,
-  ]);
+  const handleDomManualEditsReset = useCallback(
+    (selection: DomEditSelection) => {
+      commitStudioManualEditManifestOptimistically(
+        (manifest) => removeStudioManualEditsForSelection(manifest, selection),
+        {
+          label: "Reset layer edits",
+          coalesceKey: `manual-reset:${getDomEditTargetKey(selection)}`,
+        },
+      );
+      applyCurrentStudioManualEditsToPreview(previewIframeRef.current);
+      refreshDomEditSelectionFromPreview(selection);
+    },
+    [
+      applyCurrentStudioManualEditsToPreview,
+      commitStudioManualEditManifestOptimistically,
+      refreshDomEditSelectionFromPreview,
+    ],
+  );
 
   const handleDomStyleCommit = useCallback(
     async (property: string, value: string) => {
       if (!domEditSelection) return;
-      const isMoveStyle = isMoveStyleProperty(property);
-      const isResizeStyle = isResizeStyleProperty(property);
-      if (isMoveStyle && !domEditSelection.capabilities.canMove) return;
-      if (isResizeStyle && !domEditSelection.capabilities.canResize) return;
-      if (!isMoveStyle && !isResizeStyle && !domEditSelection.capabilities.canEditStyles) return;
+      if (isManualGeometryStyleProperty(property)) return;
+      if (!domEditSelection.capabilities.canEditStyles) return;
       const importedFont = property === "font-family" ? resolveImportedFontAsset(value) : null;
       const iframe = previewIframeRef.current;
       const doc = iframe?.contentDocument;
       if (doc) {
-        const el = findElementForSelection(doc, domEditSelection, domEditSelection.sourceFile);
+        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
         if (el) {
           el.style.setProperty(property, normalizeDomEditStyleValue(property, value));
           if (property === "font-family") {
             injectPreviewGoogleFont(doc, value);
             if (importedFont) injectPreviewImportedFont(doc, importedFont);
           }
-          if (shouldDetachOppositeEdges(domEditSelection)) {
-            if (property === "width") el.style.right = "auto";
-            if (property === "height") el.style.bottom = "auto";
-          }
           if (property === "background-image" && isImageBackgroundValue(value)) {
             el.style.setProperty("background-position", "center");
             el.style.setProperty("background-repeat", "no-repeat");
@@ -1931,11 +2316,7 @@ export function StudioApp() {
       const operations: PatchOperation[] = [
         buildDomEditStylePatchOperation(property, normalizeDomEditStyleValue(property, value)),
       ];
-      if (property === "width") {
-        operations.push(...buildOppositeEdgePatchOperations(domEditSelection, "width"));
-      } else if (property === "height") {
-        operations.push(...buildOppositeEdgePatchOperations(domEditSelection, "height"));
-      } else if (property === "background-image" && isImageBackgroundValue(value)) {
+      if (property === "background-image" && isImageBackgroundValue(value)) {
         operations.push(
           buildDomEditStylePatchOperation("background-position", "center"),
           buildDomEditStylePatchOperation("background-repeat", "no-repeat"),
@@ -1950,7 +2331,7 @@ export function StudioApp() {
           : undefined,
       });
     },
-    [domEditSelection, persistDomEditOperations, resolveImportedFontAsset],
+    [activeCompPath, domEditSelection, persistDomEditOperations, resolveImportedFontAsset],
   );
 
   const handleDomTextCommit = useCallback(
@@ -1972,7 +2353,7 @@ export function StudioApp() {
       const iframe = previewIframeRef.current;
       const doc = iframe?.contentDocument;
       if (doc) {
-        const el = findElementForSelection(doc, domEditSelection, domEditSelection.sourceFile);
+        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
         if (el) {
           if (
             nextTextFields.length > 1 ||
@@ -1996,20 +2377,22 @@ export function StudioApp() {
       if (domTextCommitVersionRef.current !== commitVersion) return;
 
       if (doc) {
-        const refreshed = findElementForSelection(
-          doc,
-          domEditSelection,
-          domEditSelection.sourceFile,
-        );
+        const refreshed = findElementForSelection(doc, domEditSelection, activeCompPath);
         if (refreshed) {
           const nextSelection = buildDomSelectionFromTarget(refreshed);
           if (nextSelection) {
-            applyDomSelection(nextSelection, { revealPanel: false });
+            applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
           }
         }
       }
     },
-    [applyDomSelection, buildDomSelectionFromTarget, domEditSelection, persistDomEditOperations],
+    [
+      activeCompPath,
+      applyDomSelection,
+      buildDomSelectionFromTarget,
+      domEditSelection,
+      persistDomEditOperations,
+    ],
   );
 
   const commitDomTextFields = useCallback(
@@ -2026,7 +2409,7 @@ export function StudioApp() {
       const iframe = previewIframeRef.current;
       const doc = iframe?.contentDocument;
       if (doc) {
-        const el = findElementForSelection(doc, selection, selection.sourceFile);
+        const el = findElementForSelection(doc, selection, activeCompPath);
         if (el) {
           if (
             nextTextFields.length > 1 ||
@@ -2049,16 +2432,16 @@ export function StudioApp() {
       });
 
       if (doc) {
-        const refreshed = findElementForSelection(doc, selection, selection.sourceFile);
+        const refreshed = findElementForSelection(doc, selection, activeCompPath);
         if (refreshed) {
           const nextSelection = buildDomSelectionFromTarget(refreshed);
           if (nextSelection) {
-            applyDomSelection(nextSelection, { revealPanel: false });
+            applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
           }
         }
       }
     },
-    [applyDomSelection, buildDomSelectionFromTarget, persistDomEditOperations],
+    [activeCompPath, applyDomSelection, buildDomSelectionFromTarget, persistDomEditOperations],
   );
 
   const handleDomTextFieldStyleCommit = useCallback(
@@ -2184,84 +2567,93 @@ export function StudioApp() {
       previewIframeRef.current = iframe;
       setPreviewIframe(iframe);
       syncPreviewTimelineHotkey(iframe);
+      syncPreviewHistoryHotkey(iframe);
       consoleErrorsRef.current = [];
       setConsoleErrors(null);
     },
-    [syncPreviewTimelineHotkey],
+    [syncPreviewHistoryHotkey, syncPreviewTimelineHotkey],
   );
 
   const handlePreviewCanvasMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
-      const iframe = previewIframeRef.current;
-      if (!iframe || captionEditMode) return;
-      const target = getPreviewTargetFromPointer(iframe, e.clientX, e.clientY);
-      if (!target) {
-        lastPreviewClickRef.current = null;
-        applyDomSelection(null, { revealPanel: false });
-        return;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-      const nextSelection = buildDomSelectionFromTarget(target, {
+      if (captionEditMode) return;
+      const nextSelection = resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
         preferClipAncestor: options?.preferClipAncestor ?? true,
       });
       if (!nextSelection) {
-        lastPreviewClickRef.current = null;
-        applyDomSelection(null, { revealPanel: false });
+        if (!e.shiftKey) applyDomSelection(null, { revealPanel: false });
         return;
       }
-      if (nextSelection.isCompositionHost && isMasterView && nextSelection.compositionSrc) {
-        const key = getDomSelectionClickKey(nextSelection);
-        const last = lastPreviewClickRef.current;
-        const now = Date.now();
-        if (last && last.key === key && now - last.at < 350) {
-          lastPreviewClickRef.current = null;
-          applyDomSelection(null, { revealPanel: false });
-          setActiveCompPath(nextSelection.compositionSrc);
-          return;
-        }
-        lastPreviewClickRef.current = { key, at: now };
-      } else {
-        lastPreviewClickRef.current = null;
-      }
-      applyDomSelection(nextSelection);
+      e.preventDefault();
+      e.stopPropagation();
+      applyDomSelection(nextSelection, { additive: e.shiftKey });
     },
-    [applyDomSelection, buildDomSelectionFromTarget, captionEditMode, isMasterView],
+    [applyDomSelection, captionEditMode, resolveDomSelectionFromPreviewPoint],
   );
 
-  const handlePreviewCanvasDoubleClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      const iframe = previewIframeRef.current;
-      if (!iframe || captionEditMode) return;
-      const target = getPreviewTargetFromPointer(iframe, e.clientX, e.clientY);
-      if (!target) return;
-      const nextSelection = buildDomSelectionFromTarget(target, {
-        preferClipAncestor: false,
-      });
-      if (!nextSelection?.isCompositionHost || !isMasterView || !nextSelection.compositionSrc) {
-        return;
+  const handlePreviewCanvasPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
+      if (captionEditMode) {
+        updateDomEditHoverSelection(null);
+        return null;
       }
-      e.preventDefault();
-      e.stopPropagation();
-      lastPreviewClickRef.current = null;
-      applyDomSelection(null, { revealPanel: false });
-      setActiveCompPath(nextSelection.compositionSrc);
+
+      const nextSelection = resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
+        preferClipAncestor: options?.preferClipAncestor ?? false,
+      });
+      updateDomEditHoverSelection(nextSelection);
+      return nextSelection;
     },
-    [applyDomSelection, buildDomSelectionFromTarget, captionEditMode, isMasterView],
+    [captionEditMode, resolveDomSelectionFromPreviewPoint, updateDomEditHoverSelection],
   );
 
-  const handleSelectedOverlayDoubleClick = useCallback(() => {
-    const selection = domEditSelectionRef.current;
-    if (!selection?.isCompositionHost || !selection.compositionSrc) return;
-    applyDomSelection(null, { revealPanel: false });
-    setActiveCompPath(selection.compositionSrc);
-  }, [applyDomSelection]);
+  const handlePreviewCanvasPointerLeave = useCallback(() => {
+    updateDomEditHoverSelection(null);
+  }, [updateDomEditHoverSelection]);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (captionEditMode) updateDomEditHoverSelection(null);
+  }, [captionEditMode, updateDomEditHoverSelection]);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    updateDomEditHoverSelection(null);
+  }, [activeCompPath, projectId, previewIframe, refreshKey, updateDomEditHoverSelection]);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!domEditHoverSelection) return;
+    const hoverMatchesSelection = domEditSelectionsTargetSame(
+      domEditHoverSelection,
+      domEditSelection,
+    );
+    const hoverMatchesGroup = domEditSelectionInGroup(
+      domEditGroupSelections,
+      domEditHoverSelection,
+    );
+    if (!hoverMatchesSelection && !hoverMatchesGroup) return;
+    updateDomEditHoverSelection(null);
+  }, [
+    domEditGroupSelections,
+    domEditHoverSelection,
+    domEditSelection,
+    updateDomEditHoverSelection,
+  ]);
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (!previewIframe || captionEditMode) return;
+    if (!domEditHoverSelection) return;
+    if (domEditHoverSelection.element.isConnected) return;
+    updateDomEditHoverSelection(null);
+  }, [domEditHoverSelection, updateDomEditHoverSelection]);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!previewIframe) return;
 
     const syncSelectionFromDocument = () => {
+      if (captionEditMode) return;
       const currentSelection = domEditSelectionRef.current;
       if (!currentSelection) return;
       let doc: Document | null = null;
@@ -2280,7 +2672,7 @@ export function StudioApp() {
 
       const nextSelection = buildDomSelectionFromTarget(nextElement);
       if (nextSelection) {
-        applyDomSelection(nextSelection, { revealPanel: false });
+        applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
       }
     };
 
@@ -2315,12 +2707,16 @@ export function StudioApp() {
     };
 
     attachErrorCapture();
+    syncPreviewHistoryHotkey(previewIframe);
+    void applyStudioManualEditsToPreviewAfterRefresh(previewIframe);
     syncSelectionFromDocument();
 
     const handleLoad = () => {
       consoleErrorsRef.current = [];
       setConsoleErrors(null);
       attachErrorCapture();
+      syncPreviewHistoryHotkey(previewIframe);
+      void applyStudioManualEditsToPreviewAfterRefresh(previewIframe);
       syncSelectionFromDocument();
     };
 
@@ -2331,9 +2727,11 @@ export function StudioApp() {
   }, [
     activeCompPath,
     applyDomSelection,
+    applyStudioManualEditsToPreviewAfterRefresh,
     buildDomSelectionFromTarget,
     captionEditMode,
     previewIframe,
+    syncPreviewHistoryHotkey,
   ]);
 
   // eslint-disable-next-line no-restricted-syntax
@@ -3016,16 +3414,25 @@ export function StudioApp() {
               ) : (
                 <DomEditOverlay
                   iframeRef={previewIframeRef}
+                  activeCompositionPath={activeCompPath}
+                  hoverSelection={captionEditMode ? null : domEditHoverSelection}
                   selection={
                     !rightCollapsed && rightPanelTab === "design" ? domEditSelection : null
                   }
-                  allowCanvasMovement={false}
+                  groupSelections={
+                    !rightCollapsed && rightPanelTab === "design" ? domEditGroupSelections : []
+                  }
+                  allowCanvasMovement
                   onCanvasMouseDown={handlePreviewCanvasMouseDown}
-                  onCanvasDoubleClick={handlePreviewCanvasDoubleClick}
-                  onSelectedDoubleClick={handleSelectedOverlayDoubleClick}
+                  onCanvasPointerMove={handlePreviewCanvasPointerMove}
+                  onCanvasPointerLeave={handlePreviewCanvasPointerLeave}
+                  onSelectionChange={applyDomSelection}
                   onBlockedMove={handleBlockedDomMove}
-                  onMoveCommit={handleDomMoveCommit}
-                  onResizeCommit={handleDomResizeCommit}
+                  onManualDragStart={handleDomManualDragStart}
+                  onPathOffsetCommit={handleDomPathOffsetCommit}
+                  onGroupPathOffsetCommit={handleDomGroupPathOffsetCommit}
+                  onBoxSizeCommit={handleDomBoxSizeCommit}
+                  onRotationCommit={handleDomRotationCommit}
                 />
               )
             }
@@ -3100,21 +3507,21 @@ export function StudioApp() {
                       <PropertyPanel
                         projectId={projectId}
                         assets={assets}
-                        element={domEditSelection}
+                        element={domEditGroupSelections.length > 1 ? null : domEditSelection}
                         copiedAgentPrompt={copiedAgentPrompt}
                         onClearSelection={clearDomSelection}
                         onSetStyle={handleDomStyleCommit}
+                        onSetManualOffset={handleDomPathOffsetCommit}
+                        onSetManualSize={handleDomBoxSizeCommit}
                         onSetText={handleDomTextCommit}
                         onSetTextFieldStyle={handleDomTextFieldStyleCommit}
                         onAddTextField={handleDomAddTextField}
                         onRemoveTextField={handleDomRemoveTextField}
-                        onDetachFromLayout={handleDomDetachFromLayout}
+                        onResetManualEdits={handleDomManualEditsReset}
                         onAskAgent={handleAskAgent}
-                        onCopyAgentInstruction={handleAgentModalSubmit}
                         onImportAssets={handleImportFiles}
                         fontAssets={fontAssets}
                         onImportFonts={handleImportFonts}
-                        allowLayoutDetach={false}
                       />
                     ) : (
                       <RenderQueue
@@ -3122,9 +3529,10 @@ export function StudioApp() {
                         projectId={projectId}
                         onDelete={renderQueue.deleteRender}
                         onClearCompleted={renderQueue.clearCompleted}
-                        onStartRender={(format, quality) =>
-                          renderQueue.startRender(30, quality, format)
-                        }
+                        onStartRender={async (format, quality) => {
+                          await waitForPendingDomEditSaves();
+                          await renderQueue.startRender(30, quality, format);
+                        }}
                         isRendering={renderQueue.isRendering}
                       />
                     )}