@hyperframes/studio 0.6.7 → 0.6.8

package/src/components/sidebar/CompositionsTab.tsx

@@ -5,6 +5,8 @@ interface CompositionsTabProps {
   compositions: string[];
   activeComposition: string | null;
   onSelect: (comp: string) => void;
+  onRenderComposition?: (comp: string) => void;
+  isRendering?: boolean;
 }
 
 const DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
@@ -94,11 +96,15 @@ function CompCard({
   comp,
   isActive,
   onSelect,
+  onRender,
+  isRendering,
 }: {
   projectId: string;
   comp: string;
   isActive: boolean;
   onSelect: () => void;
+  onRender?: () => void;
+  isRendering?: boolean;
 }) {
   const [hovered, setHovered] = useState(false);
   const [stageSize, setStageSize] = useState(DEFAULT_PREVIEW_STAGE);
@@ -158,7 +164,7 @@ function CompCard({
       onClick={onSelect}
       onPointerEnter={handleEnter}
       onPointerLeave={handleLeave}
-      className={`w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${
+      className={`group/card w-full text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer ${
         isActive
           ? "bg-studio-accent/10 border-l-2 border-studio-accent"
           : "border-l-2 border-transparent hover:bg-neutral-800/50"
@@ -200,6 +206,38 @@ function CompCard({
         <span className="text-[11px] font-medium text-neutral-300 truncate block">{name}</span>
         <span className="text-[9px] text-neutral-600 truncate block">{comp}</span>
       </div>
+      {onRender && (
+        <button
+          type="button"
+          title={isRendering ? "Rendering..." : `Render ${name}`}
+          aria-label={isRendering ? "Rendering..." : `Render ${name}`}
+          disabled={isRendering}
+          onClick={(e) => {
+            e.stopPropagation();
+            onRender();
+          }}
+          className={`flex-shrink-0 p-1 rounded transition-colors ${
+            isRendering
+              ? "text-neutral-600 cursor-not-allowed"
+              : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"
+          }`}
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
+        </button>
+      )}
     </div>
   );
 }
@@ -209,6 +247,8 @@ export const CompositionsTab = memo(function CompositionsTab({
   compositions,
   activeComposition,
   onSelect,
+  onRenderComposition,
+  isRendering,
 }: CompositionsTabProps) {
   if (compositions.length === 0) {
     return (
@@ -227,6 +267,8 @@ export const CompositionsTab = memo(function CompositionsTab({
           comp={comp}
           isActive={activeComposition === comp}
           onSelect={() => onSelect(comp)}
+          onRender={onRenderComposition ? () => onRenderComposition(comp) : undefined}
+          isRendering={isRendering}
         />
       ))}
     </div>

package/src/components/sidebar/LeftSidebar.tsx

@@ -43,6 +43,8 @@ interface LeftSidebarProps {
   onDuplicateFile?: (path: string) => void;
   onMoveFile?: (oldPath: string, newPath: string) => void;
   codeChildren?: ReactNode;
+  onRenderComposition?: (comp: string) => void;
+  isRendering?: boolean;
   onLint?: () => void;
   linting?: boolean;
   onToggleCollapse?: () => void;
@@ -69,6 +71,8 @@ export const LeftSidebar = memo(
       onDuplicateFile,
       onMoveFile,
       codeChildren,
+      onRenderComposition,
+      isRendering,
       onLint,
       linting,
       onToggleCollapse,
@@ -169,6 +173,8 @@ export const LeftSidebar = memo(
                 compositions={compositions}
                 activeComposition={activeComposition}
                 onSelect={onSelectComposition}
+                onRenderComposition={onRenderComposition}
+                isRendering={isRendering}
               />
             )}
             {tab === "assets" && (

package/src/contexts/FileManagerContext.tsx

@@ -26,6 +26,8 @@ export function FileManagerProvider({
     readProjectFile,
     writeProjectFile,
     readOptionalProjectFile,
+    revealSourceOffset,
+    openSourceForSelection,
     handleFileSelect,
     handleContentChange,
     refreshFileTree,
@@ -62,6 +64,8 @@ export function FileManagerProvider({
       readProjectFile,
       writeProjectFile,
       readOptionalProjectFile,
+      revealSourceOffset,
+      openSourceForSelection,
       handleFileSelect,
       handleContentChange,
       refreshFileTree,
@@ -92,6 +96,8 @@ export function FileManagerProvider({
       readProjectFile,
       writeProjectFile,
       readOptionalProjectFile,
+      revealSourceOffset,
+      openSourceForSelection,
       handleFileSelect,
       handleContentChange,
       refreshFileTree,

package/src/hooks/useDomEditCommits.ts

@@ -20,12 +20,14 @@ import {
   buildClearPathOffsetPatches,
   buildClearBoxSizePatches,
   buildClearRotationPatches,
+  buildMotionPatches,
+  buildClearMotionPatches,
 } from "../components/editor/manualEditsDom";
 import {
-  removeStudioMotionForSelection,
+  writeStudioMotionToElement,
+  clearStudioMotionFromElement,
+  applyStudioMotionFromDom,
   type StudioGsapMotion,
-  type StudioMotionManifest,
-  upsertStudioGsapMotion,
 } from "../components/editor/studioMotion";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
@@ -58,11 +60,6 @@ export interface UseDomEditCommitsParams {
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
   showToast: (message: string, tone?: "error" | "info") => void;
   queueDomEditSave: (save: () => Promise<void>) => Promise<void>;
-  commitStudioMotionManifestOptimistically: (
-    updateManifest: (manifest: StudioMotionManifest) => StudioMotionManifest,
-    options: { label: string; coalesceKey: string },
-  ) => void;
-  applyCurrentStudioMotionToPreview: (iframe: HTMLIFrameElement | null) => void;
   writeProjectFile: (path: string, content: string) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   editHistory: { recordEdit: (entry: RecordEditInput) => Promise<void> };
@@ -93,8 +90,6 @@ export function useDomEditCommits({
   previewIframeRef,
   showToast,
   queueDomEditSave,
-  commitStudioMotionManifestOptimistically,
-  applyCurrentStudioMotionToPreview,
   writeProjectFile,
   domEditSaveTimestampRef,
   editHistory,
@@ -306,43 +301,60 @@ export function useDomEditCommits({
     [commitPositionPatchToHtml],
   );
 
-  // ── Motion commits ──
+  // ── Motion commits (HTML-attribute–backed) ──
 
   const handleDomMotionCommit = useCallback(
     (
       selection: DomEditSelection,
       motion: Omit<StudioGsapMotion, "kind" | "target" | "updatedAt">,
     ) => {
-      commitStudioMotionManifestOptimistically(
-        (manifest) => upsertStudioGsapMotion(manifest, selection, motion),
-        {
-          label: "Set GSAP motion",
-          coalesceKey: `motion:${getDomEditTargetKey(selection)}`,
-        },
-      );
+      // 1. Write motion data as JSON attribute on the element
+      writeStudioMotionToElement(selection.element, motion);
+      // 2. Apply the GSAP timeline from DOM attributes
+      let doc: Document | null = null;
+      try {
+        doc = previewIframeRef.current?.contentDocument ?? null;
+      } catch {
+        // cross-origin guard
+      }
+      if (doc) applyStudioMotionFromDom(doc);
+      // 3. Build patches and persist to HTML
+      const patches = buildMotionPatches(selection.element);
+      commitPositionPatchToHtml(selection, patches, {
+        label: "Set GSAP motion",
+        coalesceKey: `motion:${getDomEditTargetKey(selection)}`,
+      });
       refreshDomEditSelectionFromPreview(selection);
     },
-    [commitStudioMotionManifestOptimistically, refreshDomEditSelectionFromPreview],
+    [commitPositionPatchToHtml, previewIframeRef, refreshDomEditSelectionFromPreview],
   );
 
   const handleDomMotionClear = useCallback(
     (selection: DomEditSelection) => {
-      commitStudioMotionManifestOptimistically(
-        (manifest) => removeStudioMotionForSelection(manifest, selection),
-        {
-          label: "Clear GSAP motion",
-          coalesceKey: `motion:${getDomEditTargetKey(selection)}`,
-        },
-      );
-      applyCurrentStudioMotionToPreview(previewIframeRef.current);
+      const clearPatches = buildClearMotionPatches(selection.element);
+      // Get gsap from the preview window for proper cleanup
+      let gsap: { set?: (target: HTMLElement, vars: Record<string, unknown>) => void } | undefined;
+      try {
+        gsap = (previewIframeRef.current?.contentWindow as { gsap?: typeof gsap })?.gsap;
+      } catch {
+        // cross-origin guard
+      }
+      clearStudioMotionFromElement(selection.element, gsap);
+      let doc: Document | null = null;
+      try {
+        doc = previewIframeRef.current?.contentDocument ?? null;
+      } catch {
+        // cross-origin guard
+      }
+      if (doc) applyStudioMotionFromDom(doc);
+      commitPositionPatchToHtml(selection, clearPatches, {
+        label: "Clear GSAP motion",
+        coalesceKey: `motion:${getDomEditTargetKey(selection)}`,
+        skipRefresh: false,
+      });
       refreshDomEditSelectionFromPreview(selection);
     },
-    [
-      applyCurrentStudioMotionToPreview,
-      commitStudioMotionManifestOptimistically,
-      refreshDomEditSelectionFromPreview,
-      previewIframeRef,
-    ],
+    [commitPositionPatchToHtml, previewIframeRef, refreshDomEditSelectionFromPreview],
   );
 
   const handleDomEditElementDelete = useCallback(

package/src/hooks/useDomEditSession.ts

@@ -1,11 +1,12 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import type { TimelineElement } from "../player";
 import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
-import { findElementForSelection } from "../components/editor/domEditing";
-import type { StudioMotionManifest } from "../components/editor/studioMotion";
+import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
 import type { RightPanelTab } from "../utils/studioHelpers";
+import type { PatchTarget } from "../utils/sourcePatcher";
+import type { SidebarTab } from "../components/sidebar/LeftSidebar";
 import { useAskAgentModal } from "./useAskAgentModal";
 import { useDomSelection } from "./useDomSelection";
 import { usePreviewInteraction } from "./usePreviewInteraction";
@@ -36,11 +37,6 @@ export interface UseDomEditSessionParams {
   showToast: (message: string, tone?: "error" | "info") => void;
   refreshPreviewDocumentVersion: () => void;
   queueDomEditSave: (save: () => Promise<void>) => Promise<void>;
-  commitStudioMotionManifestOptimistically: (
-    updateManifest: (manifest: StudioMotionManifest) => StudioMotionManifest,
-    options: { label: string; coalesceKey: string },
-  ) => void;
-  applyCurrentStudioMotionToPreview: (iframe: HTMLIFrameElement | null) => void;
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
@@ -55,12 +51,11 @@ export interface UseDomEditSessionParams {
   applyStudioManualEditsToPreviewRef: React.MutableRefObject<
     (iframe: HTMLIFrameElement) => Promise<void>
   >;
-  applyStudioMotionToPreviewRef: React.MutableRefObject<
-    (iframe: HTMLIFrameElement) => Promise<void>
-  >;
   syncPreviewHistoryHotkey: (iframe: HTMLIFrameElement | null) => void;
   reloadPreview: () => void;
   setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
+  openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
+  selectSidebarTab?: (tab: SidebarTab) => void;
 }
 
 // ── Hook ──
@@ -81,8 +76,6 @@ export function useDomEditSession({
   showToast,
   refreshPreviewDocumentVersion,
   queueDomEditSave,
-  commitStudioMotionManifestOptimistically,
-  applyCurrentStudioMotionToPreview,
   readProjectFile: _readProjectFile,
   writeProjectFile,
   domEditSaveTimestampRef,
@@ -95,12 +88,28 @@ export function useDomEditSession({
   refreshKey,
   rightPanelTab,
   applyStudioManualEditsToPreviewRef,
-  applyStudioMotionToPreviewRef,
   syncPreviewHistoryHotkey,
   reloadPreview,
   setRefreshKey: _setRefreshKey,
+  openSourceForSelection,
+  selectSidebarTab,
 }: UseDomEditSessionParams) {
   void _setRefreshKey;
+
+  const onClickToSource = useCallback(
+    (selection: DomEditSelection) => {
+      if (!openSourceForSelection || !selectSidebarTab) return;
+      if (!selection.sourceFile) return;
+      selectSidebarTab("code");
+      openSourceForSelection(selection.sourceFile, {
+        id: selection.id,
+        selector: selection.selector,
+        selectorIndex: selection.selectorIndex,
+      });
+    },
+    [openSourceForSelection, selectSidebarTab],
+  );
+
   // ── Selection (delegated to useDomSelection) ──
 
   const {
@@ -176,6 +185,7 @@ export function useDomEditSession({
     setAgentPromptSelectionContext,
     setAgentModalAnchorPoint,
     setAgentModalOpen,
+    onClickToSource,
   });
 
   // ── Commit handlers (delegated to useDomEditCommits) ──
@@ -200,8 +210,6 @@ export function useDomEditSession({
     previewIframeRef,
     showToast,
     queueDomEditSave,
-    commitStudioMotionManifestOptimistically,
-    applyCurrentStudioMotionToPreview,
     writeProjectFile,
     domEditSaveTimestampRef,
     editHistory,
@@ -249,19 +257,13 @@ export function useDomEditSession({
     };
 
     syncPreviewHistoryHotkey(previewIframe);
-    void (async () => {
-      await applyStudioManualEditsToPreviewRef.current(previewIframe);
-      await applyStudioMotionToPreviewRef.current(previewIframe);
-    })();
+    void applyStudioManualEditsToPreviewRef.current(previewIframe);
     syncSelectionFromDocument();
     refreshPreviewDocumentVersion();
 
     const handleLoad = () => {
       syncPreviewHistoryHotkey(previewIframe);
-      void (async () => {
-        await applyStudioManualEditsToPreviewRef.current(previewIframe);
-        await applyStudioMotionToPreviewRef.current(previewIframe);
-      })();
+      void applyStudioManualEditsToPreviewRef.current(previewIframe);
       syncSelectionFromDocument();
       refreshPreviewDocumentVersion();
     };
@@ -280,7 +282,6 @@ export function useDomEditSession({
     refreshPreviewDocumentVersion,
     syncPreviewHistoryHotkey,
     applyStudioManualEditsToPreviewRef,
-    applyStudioMotionToPreviewRef,
   ]);
 
   return {

package/src/hooks/useFileManager.ts

@@ -4,6 +4,7 @@ import { FONT_EXT, isMediaFile } from "../utils/mediaTypes";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import type { EditHistoryKind } from "../utils/editHistory";
+import { findTagByTarget, type PatchTarget } from "../utils/sourcePatcher";
 
 // ── Types ──
 
@@ -37,6 +38,7 @@ export function useFileManager({
   const [projectDir, setProjectDir] = useState<string | null>(null);
   const [fileTree, setFileTree] = useState<string[]>([]);
   const [fileTreeLoaded, setFileTreeLoaded] = useState(false);
+  const [revealSourceOffset, setRevealSourceOffset] = useState<number | null>(null);
 
   // ── Refs ──
 
@@ -169,6 +171,42 @@ export function useFileManager({
     [domEditSaveTimestampRef, readProjectFile, recordEdit, setRefreshKey, writeProjectFile],
   );
 
+  // ── Open source for selection (click-to-source) ──
+
+  const revealRequestIdRef = useRef(0);
+  const revealAbortRef = useRef<AbortController | null>(null);
+
+  const openSourceForSelection = useCallback(
+    (sourceFile: string, target: PatchTarget) => {
+      const pid = projectIdRef.current;
+      if (!pid || !sourceFile) return;
+      revealAbortRef.current?.abort();
+      revealAbortRef.current = null;
+      if (editingPathRef.current === sourceFile && editingFile?.content != null) {
+        const match = findTagByTarget(editingFile.content, target);
+        setRevealSourceOffset(match ? match.start : null);
+        return;
+      }
+      const requestId = ++revealRequestIdRef.current;
+      const controller = new AbortController();
+      revealAbortRef.current = controller;
+      fetch(`/api/projects/${pid}/files/${encodeURIComponent(sourceFile)}`, {
+        signal: controller.signal,
+      })
+        .then((r) => r.json())
+        .then((data: { content?: string }) => {
+          if (requestId !== revealRequestIdRef.current) return;
+          if (data.content != null) {
+            setEditingFile({ path: sourceFile, content: data.content });
+            const match = findTagByTarget(data.content, target);
+            setRevealSourceOffset(match ? match.start : null);
+          }
+        })
+        .catch(() => {});
+    },
+    [editingFile?.content],
+  );
+
   // ── File tree refresh ──
 
   const refreshFileTree = useCallback(async () => {
@@ -418,6 +456,10 @@ export function useFileManager({
     writeProjectFile,
     readOptionalProjectFile,
 
+    // Click-to-source
+    revealSourceOffset,
+    openSourceForSelection,
+
     // Callbacks
     handleFileSelect,
     handleContentChange,