@hyperframes/studio 0.6.52 → 0.6.54

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -103,6 +103,8 @@ export function MetricField({
   disabled,
   liveCommit,
   scrub,
+  suffix,
+  tooltip,
   onCommit,
 }: {
   label: string;
@@ -110,6 +112,8 @@ export function MetricField({
   disabled?: boolean;
   liveCommit?: boolean;
   scrub?: boolean;
+  suffix?: string;
+  tooltip?: string;
   onCommit: (nextValue: string) => void;
 }) {
   const scrubRef = useRef<{ startX: number; startValue: number; pointerId: number } | null>(null);
@@ -151,7 +155,7 @@ export function MetricField({
       : ({ className: "flex-shrink-0 text-[11px] font-medium text-neutral-500" } as const);
 
   return (
-    <div className={FIELD}>
+    <div className={FIELD} title={tooltip}>
       <div className="flex min-w-0 items-center gap-3">
         <span {...scrubProps}>{label}</span>
         <CommitField
@@ -160,6 +164,7 @@ export function MetricField({
           liveCommit={liveCommit}
           onCommit={onCommit}
         />
+        {suffix && <span className="flex-shrink-0 text-[10px] text-neutral-600">{suffix}</span>}
       </div>
     </div>
   );

package/src/contexts/DomEditContext.tsx

@@ -53,6 +53,15 @@ export function DomEditProvider({
     setAgentModalOpen,
     setAgentPromptSelectionContext,
     setAgentModalAnchorPoint,
+    selectedGsapAnimations,
+    gsapMultipleTimelines,
+    gsapUnsupportedTimelinePattern,
+    handleGsapUpdateProperty,
+    handleGsapUpdateMeta,
+    handleGsapDeleteAnimation,
+    handleGsapAddAnimation,
+    handleGsapAddProperty,
+    handleGsapRemoveProperty,
   },
   children,
 }: {
@@ -101,6 +110,15 @@ export function DomEditProvider({
       setAgentModalOpen,
       setAgentPromptSelectionContext,
       setAgentModalAnchorPoint,
+      selectedGsapAnimations,
+      gsapMultipleTimelines,
+      gsapUnsupportedTimelinePattern,
+      handleGsapUpdateProperty,
+      handleGsapUpdateMeta,
+      handleGsapDeleteAnimation,
+      handleGsapAddAnimation,
+      handleGsapAddProperty,
+      handleGsapRemoveProperty,
     }),
     [
       domEditSelection,
@@ -143,6 +161,15 @@ export function DomEditProvider({
       setAgentModalOpen,
       setAgentPromptSelectionContext,
       setAgentModalAnchorPoint,
+      selectedGsapAnimations,
+      gsapMultipleTimelines,
+      gsapUnsupportedTimelinePattern,
+      handleGsapUpdateProperty,
+      handleGsapUpdateMeta,
+      handleGsapDeleteAnimation,
+      handleGsapAddAnimation,
+      handleGsapAddProperty,
+      handleGsapRemoveProperty,
     ],
   );
   return <DomEditContext value={stable}>{children}</DomEditContext>;

package/src/hooks/useDomEditSession.ts

@@ -1,7 +1,11 @@
 import { useCallback, useEffect, useRef } from "react";
 import type { TimelineElement } from "../player";
-import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
+import {
+  STUDIO_INSPECTOR_PANELS_ENABLED,
+  STUDIO_GSAP_PANEL_ENABLED,
+} from "../components/editor/manualEditingAvailability";
 import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
+import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
 import type { RightPanelTab } from "../utils/studioHelpers";
@@ -11,6 +15,8 @@ import { useAskAgentModal } from "./useAskAgentModal";
 import { useDomSelection } from "./useDomSelection";
 import { usePreviewInteraction } from "./usePreviewInteraction";
 import { useDomEditCommits } from "./useDomEditCommits";
+import { useGsapScriptCommits } from "./useGsapScriptCommits";
+import { useGsapAnimationsForElement, useGsapCacheVersion } from "./useGsapTweenCache";
 
 // ── Types ──
 
@@ -185,6 +191,37 @@ export function useDomEditSession({
     onClickToSource,
   });
 
+  // ── GSAP script editing ──
+
+  const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
+
+  const {
+    animations: selectedGsapAnimations,
+    multipleTimelines: gsapMultipleTimelines,
+    unsupportedTimelinePattern: gsapUnsupportedTimelinePattern,
+  } = useGsapAnimationsForElement(
+    STUDIO_GSAP_PANEL_ENABLED ? (projectId ?? null) : null,
+    domEditSelection?.sourceFile || activeCompPath || "index.html",
+    domEditSelection?.id ?? null,
+    gsapCacheVersion,
+  );
+
+  const {
+    updateGsapProperty,
+    updateGsapMeta,
+    deleteGsapAnimation,
+    addGsapAnimation,
+    addGsapProperty,
+    removeGsapProperty,
+  } = useGsapScriptCommits({
+    projectIdRef,
+    activeCompPath,
+    editHistory,
+    domEditSaveTimestampRef,
+    reloadPreview,
+    onCacheInvalidate: bumpGsapCache,
+  });
+
   // ── Commit handlers (delegated to useDomEditCommits) ──
 
   const {
@@ -224,7 +261,53 @@ export function useDomEditSession({
     buildDomSelectionFromTarget,
   });
 
-  // ── Effects ──
+  const handleGsapUpdateProperty = useCallback(
+    (animId: string, prop: string, value: number | string) => {
+      if (!domEditSelection) return;
+      updateGsapProperty(domEditSelection, animId, prop, value);
+    },
+    [domEditSelection, updateGsapProperty],
+  );
+
+  const handleGsapUpdateMeta = useCallback(
+    (animId: string, updates: { duration?: number; ease?: string; position?: number }) => {
+      if (!domEditSelection) return;
+      updateGsapMeta(domEditSelection, animId, updates);
+    },
+    [domEditSelection, updateGsapMeta],
+  );
+
+  const handleGsapDeleteAnimation = useCallback(
+    (animId: string) => {
+      if (!domEditSelection) return;
+      deleteGsapAnimation(domEditSelection, animId);
+    },
+    [domEditSelection, deleteGsapAnimation],
+  );
+
+  const handleGsapAddAnimation = useCallback(
+    (method: "to" | "from" | "set") => {
+      if (!domEditSelection) return;
+      addGsapAnimation(domEditSelection, method, currentTime);
+    },
+    [domEditSelection, addGsapAnimation, currentTime],
+  );
+
+  const handleGsapAddProperty = useCallback(
+    (animId: string, prop: string) => {
+      if (!domEditSelection) return;
+      addGsapProperty(domEditSelection, animId, prop);
+    },
+    [domEditSelection, addGsapProperty],
+  );
+
+  const handleGsapRemoveProperty = useCallback(
+    (animId: string, prop: string) => {
+      if (!domEditSelection) return;
+      removeGsapProperty(domEditSelection, animId, prop);
+    },
+    [domEditSelection, removeGsapProperty],
+  );
 
   // Sync selection from preview document on load / refresh
   // eslint-disable-next-line no-restricted-syntax
@@ -243,6 +326,8 @@ export function useDomEditSession({
       }
       if (!doc) return;
 
+      reapplyPositionEditsAfterSeek(doc);
+
       const nextElement = findElementForSelection(doc, currentSelection, activeCompPath);
       if (!nextElement) {
         applyDomSelection(null, { revealPanel: false });
@@ -345,5 +430,16 @@ export function useDomEditSession({
     setAgentModalOpen,
     setAgentPromptSelectionContext,
     setAgentModalAnchorPoint,
+
+    // GSAP script editing
+    selectedGsapAnimations,
+    gsapMultipleTimelines,
+    gsapUnsupportedTimelinePattern,
+    handleGsapUpdateProperty,
+    handleGsapUpdateMeta,
+    handleGsapDeleteAnimation,
+    handleGsapAddAnimation,
+    handleGsapAddProperty,
+    handleGsapRemoveProperty,
   };
 }

package/src/hooks/useDomSelection.ts

@@ -16,6 +16,7 @@ import {
   resolveDomEditSelection,
   type DomEditSelection,
 } from "../components/editor/domEditing";
+import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
 
 // ── Types ──
 
@@ -218,6 +219,11 @@ export function useDomSelection({
     ) => {
       const iframe = previewIframeRef.current;
       if (!iframe || captionEditMode) return null;
+      try {
+        if (iframe.contentDocument) reapplyPositionEditsAfterSeek(iframe.contentDocument);
+      } catch {
+        /* cross-origin guard */
+      }
       const target = getPreviewTargetFromPointer(iframe, clientX, clientY, activeCompPath);
       if (!target) return null;
       return buildDomSelectionFromTarget(target, {
@@ -245,6 +251,8 @@ export function useDomSelection({
       }
       if (!doc) return null;
 
+      reapplyPositionEditsAfterSeek(doc);
+
       const targetElement = findElementForTimelineElement(doc, element, {
         activeCompositionPath: activeCompPath,
         compIdToSrc,

package/src/hooks/useGsapScriptCommits.ts

@@ -0,0 +1,303 @@
+import { useCallback, useEffect, useRef } from "react";
+import type { ParsedGsap } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import type { EditHistoryKind } from "../utils/editHistory";
+
+const PROPERTY_DEFAULTS: Record<string, number> = {
+  opacity: 1,
+  x: 0,
+  y: 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotation: 0,
+  width: 100,
+  height: 100,
+};
+
+/**
+ * Ensures the element has an id so it can be targeted by a GSAP selector.
+ * If the element already has an id or a CSS selector, returns those.
+ * Otherwise mints a unique id and sets it on the live element.
+ */
+function ensureElementAddressable(selection: DomEditSelection): {
+  selector: string;
+  autoId?: string;
+} {
+  if (selection.id) return { selector: `#${selection.id}` };
+  if (selection.selector) return { selector: selection.selector };
+
+  const el = selection.element;
+  const doc = el.ownerDocument;
+  const tag = el.tagName.toLowerCase();
+  let id = tag;
+  let n = 1;
+  while (doc.getElementById(id)) {
+    n += 1;
+    id = `${tag}-${n}`;
+  }
+  el.setAttribute("id", id);
+  return { selector: `#${id}`, autoId: id };
+}
+
+interface MutationResult {
+  ok: boolean;
+  parsed?: ParsedGsap;
+  before?: string;
+  after?: string;
+}
+
+async function mutateGsapScript(
+  projectId: string,
+  sourceFile: string,
+  mutation: Record<string, unknown>,
+): Promise<MutationResult | null> {
+  try {
+    const res = await fetch(
+      `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(sourceFile)}`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(mutation),
+      },
+    );
+    if (!res.ok) return null;
+    return (await res.json()) as MutationResult;
+  } catch {
+    return null;
+  }
+}
+
+interface GsapScriptCommitsParams {
+  projectIdRef: React.MutableRefObject<string | null>;
+  activeCompPath: string | null;
+  editHistory: {
+    recordEdit: (entry: {
+      label: string;
+      kind: EditHistoryKind;
+      coalesceKey?: string;
+      files: Record<string, { before: string; after: string }>;
+    }) => Promise<void>;
+  };
+  domEditSaveTimestampRef: React.MutableRefObject<number>;
+  reloadPreview: () => void;
+  onCacheInvalidate: () => void;
+}
+
+const DEBOUNCE_MS = 150;
+
+// fallow-ignore-next-line complexity unit-size
+export function useGsapScriptCommits({
+  projectIdRef,
+  activeCompPath,
+  editHistory,
+  domEditSaveTimestampRef,
+  reloadPreview,
+  onCacheInvalidate,
+}: GsapScriptCommitsParams) {
+  const pendingPropertyEditRef = useRef<{
+    selection: DomEditSelection;
+    animationId: string;
+    property: string;
+    value: number | string;
+  } | null>(null);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  /** Send a mutation and record the edit in undo history. */
+  const commitMutation = useCallback(
+    async (
+      selection: DomEditSelection,
+      mutation: Record<string, unknown>,
+      options: { label: string; coalesceKey?: string; softReload?: boolean },
+    ) => {
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      const targetPath = selection.sourceFile || activeCompPath || "index.html";
+
+      const result = await mutateGsapScript(pid, targetPath, mutation);
+      if (!result?.ok) return;
+
+      domEditSaveTimestampRef.current = Date.now();
+
+      if (result.before != null && result.after != null) {
+        await editHistory.recordEdit({
+          label: options.label,
+          kind: "manual",
+          coalesceKey: options.coalesceKey,
+          files: { [targetPath]: { before: result.before, after: result.after } },
+        });
+      }
+
+      onCacheInvalidate();
+
+      if (!options.softReload) {
+        reloadPreview();
+      }
+    },
+    [
+      projectIdRef,
+      activeCompPath,
+      editHistory,
+      domEditSaveTimestampRef,
+      reloadPreview,
+      onCacheInvalidate,
+    ],
+  );
+
+  const flushPendingPropertyEdit = useCallback(() => {
+    const pending = pendingPropertyEditRef.current;
+    if (!pending) return;
+    pendingPropertyEditRef.current = null;
+    const { selection, animationId, property, value } = pending;
+    void commitMutation(
+      selection,
+      { type: "update-property", animationId, property, value },
+      {
+        label: `Edit GSAP ${property}`,
+        coalesceKey: `gsap:${animationId}:${property}`,
+      },
+    );
+  }, [commitMutation]);
+
+  const updateGsapProperty = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      property: string,
+      value: number | string,
+    ) => {
+      pendingPropertyEditRef.current = { selection, animationId, property, value };
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = setTimeout(flushPendingPropertyEdit, DEBOUNCE_MS);
+    },
+    [flushPendingPropertyEdit],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      flushPendingPropertyEdit();
+    };
+  }, [flushPendingPropertyEdit]);
+
+  const updateGsapMeta = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      updates: { duration?: number; ease?: string; position?: number },
+    ) => {
+      void commitMutation(
+        selection,
+        { type: "update-meta", animationId, updates },
+        {
+          label: "Edit GSAP animation",
+          coalesceKey: `gsap:${animationId}:meta`,
+        },
+      );
+    },
+    [commitMutation],
+  );
+
+  const deleteGsapAnimation = useCallback(
+    (selection: DomEditSelection, animationId: string) => {
+      void commitMutation(
+        selection,
+        { type: "delete", animationId },
+        { label: "Delete GSAP animation" },
+      );
+    },
+    [commitMutation],
+  );
+
+  const addGsapAnimation = useCallback(
+    async (selection: DomEditSelection, method: "to" | "from" | "set", currentTime?: number) => {
+      const { selector, autoId } = ensureElementAddressable(selection);
+
+      if (autoId) {
+        const pid = projectIdRef.current;
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        if (!pid) return;
+        const res = await fetch(
+          `/api/projects/${encodeURIComponent(pid)}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              target: {
+                id: selection.id,
+                selector: selection.selector,
+                selectorIndex: selection.selectorIndex,
+              },
+              operations: [{ type: "html-attribute", property: "id", value: autoId }],
+            }),
+          },
+        );
+        if (!res.ok) return;
+        const data = (await res.json()) as { changed?: boolean };
+        if (!data.changed) return;
+      }
+
+      const start = currentTime ?? (Number.parseFloat(selection.dataAttributes.start ?? "0") || 0);
+      const defaults: Record<string, Record<string, number>> = {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+        set: { opacity: 1 },
+      };
+
+      await commitMutation(
+        selection,
+        {
+          type: "add",
+          targetSelector: selector,
+          method,
+          position: start,
+          duration: method === "set" ? undefined : 0.5,
+          ease: method === "set" ? undefined : "power2.out",
+          properties: defaults[method] ?? { opacity: 1 },
+        },
+        { label: `Add GSAP ${method} animation` },
+      );
+    },
+    [commitMutation, projectIdRef, activeCompPath],
+  );
+
+  const addGsapProperty = useCallback(
+    (selection: DomEditSelection, animationId: string, property: string) => {
+      let defaultValue = PROPERTY_DEFAULTS[property] ?? 0;
+      const el = selection.element;
+      if (property === "width" || property === "height") {
+        const rect = el.getBoundingClientRect();
+        defaultValue = Math.round(property === "width" ? rect.width : rect.height);
+      } else if (property === "opacity" || property === "autoAlpha") {
+        const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
+        defaultValue = cs ? Number.parseFloat(cs.opacity) || 1 : 1;
+      }
+      void commitMutation(
+        selection,
+        { type: "add-property", animationId, property, defaultValue },
+        { label: `Add GSAP ${property}` },
+      );
+    },
+    [commitMutation],
+  );
+
+  const removeGsapProperty = useCallback(
+    (selection: DomEditSelection, animationId: string, property: string) => {
+      void commitMutation(
+        selection,
+        { type: "remove-property", animationId, property },
+        { label: `Remove GSAP ${property}` },
+      );
+    },
+    [commitMutation],
+  );
+
+  return {
+    updateGsapProperty,
+    updateGsapMeta,
+    deleteGsapAnimation,
+    addGsapAnimation,
+    addGsapProperty,
+    removeGsapProperty,
+  };
+}

package/src/hooks/useGsapTweenCache.ts

@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { GsapAnimation, ParsedGsap } from "@hyperframes/core/gsap-parser";
+
+function getAnimationsForElement(animations: GsapAnimation[], elementId: string): GsapAnimation[] {
+  return animations.filter((a) => a.targetSelector === `#${elementId}`);
+}
+
+async function fetchParsedAnimations(
+  projectId: string,
+  sourceFile: string,
+): Promise<ParsedGsap | null> {
+  try {
+    const res = await fetch(
+      `/api/projects/${encodeURIComponent(projectId)}/gsap-animations/${encodeURIComponent(sourceFile)}`,
+    );
+    return res.ok ? ((await res.json()) as ParsedGsap) : null;
+  } catch {
+    return null;
+  }
+}
+
+export function useGsapAnimationsForElement(
+  projectId: string | null,
+  sourceFile: string,
+  elementId: string | null,
+  version: number,
+): {
+  animations: GsapAnimation[];
+  multipleTimelines: boolean;
+  unsupportedTimelinePattern: boolean;
+} {
+  const [allAnimations, setAllAnimations] = useState<GsapAnimation[]>([]);
+  const [multipleTimelines, setMultipleTimelines] = useState(false);
+  const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState(false);
+  const lastFetchKeyRef = useRef("");
+
+  useEffect(() => {
+    const fetchKey = `${projectId}:${sourceFile}:${version}`;
+    if (fetchKey === lastFetchKeyRef.current) return;
+    lastFetchKeyRef.current = fetchKey;
+
+    if (!projectId) {
+      setAllAnimations([]);
+      setMultipleTimelines(false);
+      setUnsupportedTimelinePattern(false);
+      return;
+    }
+
+    let cancelled = false;
+    fetchParsedAnimations(projectId, sourceFile).then((parsed) => {
+      if (cancelled) return;
+      if (!parsed) {
+        setAllAnimations([]);
+        setMultipleTimelines(false);
+        setUnsupportedTimelinePattern(false);
+        return;
+      }
+      setAllAnimations(parsed.animations);
+      setMultipleTimelines(parsed.multipleTimelines === true);
+      setUnsupportedTimelinePattern(parsed.unsupportedTimelinePattern === true);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, sourceFile, version]);
+
+  const animations = useMemo(
+    () => (elementId ? getAnimationsForElement(allAnimations, elementId) : []),
+    [allAnimations, elementId],
+  );
+
+  return { animations, multipleTimelines, unsupportedTimelinePattern };
+}
+
+export function useGsapCacheVersion() {
+  const [version, setVersion] = useState(0);
+  const bump = useCallback(() => setVersion((v) => v + 1), []);
+  return { version, bump };
+}

package/src/hooks/usePreviewPersistence.ts

@@ -102,6 +102,7 @@ export function usePreviewPersistence({
         }
         if (d) reapplyPositionEditsAfterSeek(d);
       };
+
       const install = () => {
         reapply();
         if (iframe.contentWindow) installStudioManualEditSeekReapply(iframe.contentWindow, reapply);