@hyperframes/studio 0.7.14 → 0.7.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.14",
+  "version": "0.7.16",
   "description": "",
   "repository": {
     "type": "git",
@@ -45,9 +45,11 @@
     "dompurify": "^3.2.4",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.14",
-    "@hyperframes/sdk": "0.7.14",
-    "@hyperframes/player": "0.7.14"
+    "@hyperframes/core": "0.7.16",
+    "@hyperframes/player": "0.7.16",
+    "@hyperframes/parsers": "0.7.16",
+    "@hyperframes/studio-server": "0.7.16",
+    "@hyperframes/sdk": "0.7.16"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -62,7 +64,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.14"
+    "@hyperframes/producer": "0.7.16"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -258,6 +258,8 @@ export function StudioApp() {
     onResetKeyframes: () => resetKeyframesRef.current(),
     onDeleteSelectedKeyframes: () => deleteSelectedKeyframesRef.current(),
     onAfterUndoRedo: () => invalidateGsapCacheRef.current(),
+    onGroupSelection: () => domEditSessionRef.current.handleGroupSelection(),
+    onUngroupSelection: () => domEditSessionRef.current.handleUngroupSelection(),
     activeCompPath,
     forceReloadSdkSession: sdkHandle.forceReload,
     onToggleRecording: STUDIO_KEYFRAMES_ENABLED

package/src/components/StudioPreviewArea.tsx

@@ -21,8 +21,6 @@ import { useDomEditActionsContext, useDomEditSelectionContext } from "../context
 import { TimelineEditProvider } from "../contexts/TimelineEditContext";
 import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
 import { readStudioUiPreferences } from "../utils/studioUiPreferences";
-import { fetchParsedAnimations } from "../hooks/useGsapTweenCache";
-import { pickKeyframeTween, computeKeyframeMovePlan } from "./editor/keyframeMove";
 import type { GestureRecordingState } from "./editor/GestureRecordControl";
 
 export interface StudioPreviewAreaProps {
@@ -182,45 +180,6 @@ export function StudioPreviewArea({
         }
       },
       // fallow-ignore-next-line complexity
-      onMoveKeyframe: async (_el: TimelineElement, oldPct: number, newPct: number) => {
-        // Resolve the dragged element's selection + parsed animations on demand
-        // (both awaited and cached) rather than relying on the async DOM-edit
-        // session being loaded for this element — that coupling made the commit
-        // intermittently no-op (revert) when dragging before the session caught up.
-        if (!projectId) return;
-        const sourceFile = _el.sourceFile || activeCompPath || "index.html";
-        const [selection, parsed] = await Promise.all([
-          buildDomSelectionForTimelineElement(_el),
-          fetchParsedAnimations(projectId, sourceFile),
-        ]);
-        if (!selection || !parsed) return;
-
-        const cached = usePlayerStore.getState().keyframeCache.get(_el.key ?? _el.id);
-        const cachedKf = cached?.keyframes.find((k) => Math.abs(k.percentage - oldPct) < 0.2);
-        const origAbsTime = _el.start + (oldPct / 100) * _el.duration;
-        const anim = pickKeyframeTween(
-          parsed.animations,
-          _el,
-          origAbsTime,
-          cachedKf?.propertyGroup,
-        );
-        if (!anim) return;
-
-        const plan = computeKeyframeMovePlan(
-          anim,
-          cachedKf?.tweenPercentage ?? oldPct,
-          _el,
-          newPct,
-        );
-        if (plan.meta) handleGsapUpdateMeta(anim.id, plan.meta, selection);
-        for (const pct of plan.removes) handleGsapRemoveKeyframe(anim.id, pct, selection);
-        for (const add of plan.adds) {
-          for (const [prop, val] of Object.entries(add.properties)) {
-            handleGsapAddKeyframe(anim.id, add.pct, prop, val, selection);
-          }
-        }
-      },
-      // fallow-ignore-next-line complexity
       onToggleKeyframeAtPlayhead: (el: TimelineElement) => {
         const currentTime = usePlayerStore.getState().currentTime;
         const pct =

package/src/components/StudioRightPanel.tsx

@@ -93,6 +93,7 @@ export function StudioRightPanel({
     domEditGroupSelections,
     copiedAgentPrompt,
     clearDomSelection,
+    handleUngroupSelection,
     handleDomStyleCommit,
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
@@ -241,6 +242,7 @@ export function StudioRightPanel({
       multiSelectCount={domEditGroupSelections.length}
       copiedAgentPrompt={copiedAgentPrompt}
       onClearSelection={clearDomSelection}
+      onUngroup={handleUngroupSelection}
       onSetStyle={handleDomStyleCommit}
       onSetAttribute={handleDomAttributeCommit}
       onSetAttributeLive={handleDomAttributeLiveCommit}

package/src/components/TimelineToolbar.tsx

@@ -133,12 +133,12 @@ export function TimelineToolbar({
               <Tooltip
                 label={
                   keyframeState === "active"
-                    ? "Remove keyframe at playhead"
+                    ? "Remove keyframe at playhead (K)"
                     : keyframeState === "inactive"
                       ? keyframeWillExtend
-                        ? "Add keyframe at playhead (extends animation)"
-                        : "Add keyframe at playhead"
-                      : "Enable keyframes"
+                        ? "Add keyframe at playhead — extends animation (K)"
+                        : "Add keyframe at playhead (K)"
+                      : "Add keyframe (K)"
                 }
               >
                 <button

package/src/components/editor/DomEditOverlay.tsx

@@ -3,7 +3,7 @@ import { useMountEffect } from "../../hooks/useMountEffect";
 import { type DomEditSelection } from "./domEditing";
 import { useMarqueeGestures } from "./marqueeCommit";
 import { MarqueeOverlay } from "./MarqueeOverlay";
-import { resolveDomEditGroupOverlayRect, toOverlayRect } from "./domEditOverlayGeometry";
+import { groupAwareOverlayRect, resolveDomEditGroupOverlayRect } from "./domEditOverlayGeometry";
 import { collectDomEditLayerItems } from "./domEditingLayers";
 import { isElementComputedVisible } from "./domEditingElement";
 import {
@@ -248,7 +248,10 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     const elMap = new Map<string, HTMLElement>();
     for (const item of items) {
       if (!isElementComputedVisible(item.element)) continue;
-      const r = toOverlayRect(overlay, iframe, item.element);
+      // Groups use their members' union (where they actually render), so a group
+      // whose members sit inside the canvas isn't flagged off-canvas by a stale
+      // wrapper box.
+      const r = groupAwareOverlayRect(overlay, iframe, item.element);
       if (!r) continue;
       // Any edge crossing the composition border → gray-zone indicator (the
       // in-canvas portion is clipped away below, so only the sliver shows).

package/src/components/editor/GestureRecordControl.tsx

@@ -43,8 +43,8 @@ export function GestureRecordPanelButton({
       >
         <GestureRecordIcon recording={recording} />
         {recording
-          ? `Stop recording ${(recordingDuration ?? 0).toFixed(1)}s — press R`
-          : "Record gesture (R) — move pointer to capture motion"}
+          ? `Stop recording ${(recordingDuration ?? 0).toFixed(1)}s -- press R`
+          : "Record gesture (R) -- move pointer to capture motion"}
       </button>
     </div>
   );

package/src/components/editor/GsapAnimationSection.tsx

@@ -46,9 +46,9 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
       )}
       {unsupportedTimelinePattern && (
         <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400">
-          This composition uses a timeline assignment pattern (window.__timelines[...]) that the
-          editor doesn&apos;t support. Use a variable declaration (const tl = gsap.timeline()) to
-          enable editing.
+          This timeline uses a computed key (window.__timelines[variable]) the editor can&apos;t
+          resolve statically. Use a string-literal key (window.__timelines[&quot;id&quot;]) or a
+          variable declaration (const tl = gsap.timeline()) to enable editing.
         </p>
       )}
       {multipleTimelines || unsupportedTimelinePattern ? null : (

package/src/components/editor/InspectorHeaderActions.tsx

@@ -0,0 +1,62 @@
+import { X } from "../../icons/SystemIcons";
+import type { DomEditSelection } from "./domEditingTypes";
+
+/** The action buttons in the inspector header: Ungroup (groups only), copy, clear. */
+export function InspectorHeaderActions({
+  element,
+  copied,
+  onCopy,
+  onClear,
+  onUngroup,
+}: {
+  element: DomEditSelection;
+  copied: boolean;
+  onCopy: () => void;
+  onClear: () => void;
+  onUngroup?: () => void;
+}) {
+  return (
+    <div className="flex items-center gap-1">
+      {onUngroup && element.dataAttributes["hf-group"] != null && (
+        <button
+          type="button"
+          onClick={onUngroup}
+          title="Ungroup (⌘⇧G)"
+          className="flex h-6 items-center rounded px-2 text-[11px] font-medium text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
+        >
+          Ungroup
+        </button>
+      )}
+      <button
+        type="button"
+        onClick={onCopy}
+        className={`flex h-6 w-6 items-center justify-center rounded transition-colors ${
+          copied
+            ? "text-studio-accent"
+            : "text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"
+        }`}
+        title={copied ? "Copied!" : "Copy element info to clipboard"}
+      >
+        <svg
+          width="13"
+          height="13"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <rect x="5" y="5" width="9" height="9" rx="1.5" />
+          <path d="M11 5V3.5A1.5 1.5 0 009.5 2h-6A1.5 1.5 0 002 3.5v6A1.5 1.5 0 003.5 11H5" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        aria-label="Clear selection"
+        onClick={onClear}
+        className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+      >
+        <X size={13} />
+      </button>
+    </div>
+  );
+}

package/src/components/editor/LayersPanel.tsx

@@ -59,9 +59,11 @@ export const LayersPanel = memo(function LayersPanel() {
   const currentTime = usePlayerStore((s) => s.currentTime);
   const {
     domEditSelection,
+    activeGroupElement,
     applyDomSelection,
     updateDomEditHoverSelection,
     handleDomZIndexReorderCommit,
+    setActiveGroupElement,
   } = useDomEditContext();
 
   const [layers, setLayers] = useState<DomEditLayerItem[]>([]);
@@ -86,12 +88,16 @@ export const LayersPanel = memo(function LayersPanel() {
       doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.documentElement ?? null;
     if (!root) return;
 
+    // A preview reload detaches the drilled-into wrapper; exit drill-in if so.
+    if (activeGroupElement && !activeGroupElement.isConnected) setActiveGroupElement(null);
+
     const items = collectDomEditLayerItems(root, {
       activeCompositionPath: activeCompPath,
       isMasterView,
+      activeGroupElement,
     });
     setLayers(sortLayersByZIndex(items));
-  }, [previewIframeRef, activeCompPath, isMasterView]);
+  }, [previewIframeRef, activeCompPath, isMasterView, activeGroupElement, setActiveGroupElement]);
 
   useEffect(() => {
     collectLayers();
@@ -135,9 +141,10 @@ export const LayersPanel = memo(function LayersPanel() {
         activeCompositionPath: activeCompPath,
         isMasterView,
         preferClipAncestor: false,
+        activeGroupElement,
       });
     },
-    [activeCompPath, isMasterView, previewIframeRef],
+    [activeCompPath, isMasterView, previewIframeRef, activeGroupElement],
   );
 
   const seekToLayer = useCallback(
@@ -183,6 +190,19 @@ export const LayersPanel = memo(function LayersPanel() {
     [resolveSelection, applyDomSelection, seekToLayer],
   );
 
+  // Double-click a group row → drill into it; any other row → select it.
+  const handleLayerDoubleClick = useCallback(
+    async (layer: DomEditLayerItem) => {
+      const selection = await resolveSelection(layer);
+      if (selection?.element.hasAttribute("data-hf-group")) {
+        setActiveGroupElement(selection.element);
+      } else {
+        await handleSelectLayer(layer);
+      }
+    },
+    [resolveSelection, setActiveGroupElement, handleSelectLayer],
+  );
+
   const handleLayerHover = useCallback(
     async (layer: DomEditLayerItem | null) => {
       if (!layer) {
@@ -271,6 +291,18 @@ export const LayersPanel = memo(function LayersPanel() {
         onPointerUp={handleContainerPointerUp}
         onPointerCancel={handleContainerPointerUp}
       >
+        {activeGroupElement && (
+          <button
+            type="button"
+            onClick={() => setActiveGroupElement(null)}
+            className="flex w-full items-center gap-1.5 px-2 py-1 text-left text-[11px] text-panel-text-3 hover:bg-panel-hover/40 hover:text-panel-text-1"
+          >
+            <span aria-hidden="true">←</span>
+            <span className="truncate">
+              {activeGroupElement.getAttribute("data-hf-group") || "Group"}
+            </span>
+          </button>
+        )}
         {visibleLayers.map((layer, index) => {
           const selected = layer.key === selectedKey;
           const isDragged = layer.key === dragKey;
@@ -286,6 +318,7 @@ export const LayersPanel = memo(function LayersPanel() {
               role="button"
               tabIndex={0}
               onClick={() => !dragKey && handleSelectLayer(layer)}
+              onDoubleClick={() => !dragKey && handleLayerDoubleClick(layer)}
               onPointerDown={(e) => handleRowPointerDown(index, e)}
               onPointerEnter={() => !dragKey && handleLayerHover(layer)}
               onKeyDown={(e) => {

package/src/components/editor/MotionPathOverlay.tsx

@@ -21,6 +21,7 @@ import {
   elementHome,
   hasMotionPathPlugin,
   isPreviewHtmlElement,
+  transformWDivisor,
   useMotionPathData,
 } from "./useMotionPathData";
 
@@ -39,6 +40,7 @@ type DragState = {
   initX: number;
   initY: number;
   scale: number;
+  pScale: number;
   ref: MotionNodeRef;
 };
 
@@ -71,7 +73,7 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
     handleGsapRemoveKeyframe,
     handleGsapDeleteAllForElement,
   } = useDomEditContext();
-  const { rect, geometry, geometryResolved, visibleInPreview, home } = useMotionPathData(
+  const { rect, geometry, geometryResolved, visibleInPreview, home, pScale } = useMotionPathData(
     iframeRef,
     selectorFor(selection),
   );
@@ -156,8 +158,12 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
       e.preventDefault();
       const sc = r.width / compW;
       const elHome = elementHome(live);
-      const px = Math.round((e.clientX - r.left) / sc - elHome.x);
-      const py = Math.round((e.clientY - r.top) / sc - elHome.y);
+      // De-magnify: the click lands on the projected (1/m44-magnified) path, so
+      // divide the home-relative offset by the perspective factor to recover the
+      // stored composition offset (inverse of the `* pScale` applied at draw).
+      const ps = 1 / transformWDivisor(live);
+      const px = Math.round(((e.clientX - r.left) / sc - elHome.x) / ps);
+      const py = Math.round(((e.clientY - r.top) / sc - elHome.y) / ps);
       const t = Math.round(usePlayerStore.getState().currentTime * 100) / 100;
       void commitCreatePath(createSelector, t, px, py, commitMutation);
       setMotionPathArmed(false);
@@ -232,7 +238,16 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
     : geometry.nodes;
   // ax/ay = absolute composition position (home + offset) for drawing; n.x/n.y
   // stay offsets so the drag commit writes the right tween values.
-  const abs = nodes.map((n) => ({ ...n, ax: home.x + n.x, ay: home.y + n.y }));
+  // Magnify the animated offsets by the element's perspective factor (1/m44, via
+  // pScale) so the path tracks the *projected* element. `home` is the projection
+  // pivot (transform-origin), so it stays put; only the offsets foreshorten. 2D
+  // elements have pScale = 1 (no change). Inverse (de-magnify) applied wherever a
+  // pointer position is mapped back to a stored offset (create + node drag).
+  const abs = nodes.map((n) => ({
+    ...n,
+    ax: home.x + n.x * pScale,
+    ay: home.y + n.y * pScale,
+  }));
   const points = abs.map((p) => `${p.ax},${p.ay}`).join(" ");
   // Map a VIEWPORT pointer to composition space. Use the iframe's LIVE viewport
   // rect, not `rect` — `rect.left/top` are stored pan-surface-relative (for the
@@ -264,6 +279,7 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
       initX: x,
       initY: y,
       scale,
+      pScale,
       ref,
     };
     setDraft({ index, x, y });
@@ -273,8 +289,8 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
     if (!d) return;
     setDraft({
       index: d.index,
-      x: d.initX + (e.clientX - d.startX) / d.scale,
-      y: d.initY + (e.clientY - d.startY) / d.scale,
+      x: d.initX + (e.clientX - d.startX) / d.scale / d.pScale,
+      y: d.initY + (e.clientY - d.startY) / d.scale / d.pScale,
     });
   };
   // fallow-ignore-next-line complexity
@@ -286,8 +302,8 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
     if (!animId) return;
     const screenDx = e.clientX - d.startX;
     const screenDy = e.clientY - d.startY;
-    const x = Math.round(d.initX + screenDx / d.scale);
-    const y = Math.round(d.initY + screenDy / d.scale);
+    const x = Math.round(d.initX + screenDx / d.scale / d.pScale);
+    const y = Math.round(d.initY + screenDy / d.scale / d.pScale);
     // Click-vs-drag is decided in SCREEN space, not composition px: the old guard
     // compared rounded comp-px, which at high zoom (scale ≫ 1) swallowed real
     // multi-px screen drags whose sub-comp-px delta rounds to 0 → the node would

package/src/components/editor/PropertyPanel.tsx

@@ -1,5 +1,6 @@
 import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { Eye, Layers, Move, X } from "../../icons/SystemIcons";
+import { Eye, Layers, Move } from "../../icons/SystemIcons";
+import { InspectorHeaderActions } from "./InspectorHeaderActions";
 import { useStudioShellContext } from "../../contexts/StudioContext";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
 import {
@@ -53,6 +54,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   multiSelectCount = 0,
   copiedAgentPrompt: _copiedAgentPrompt,
   onClearSelection,
+  onUngroup,
   onSetStyle,
   onSetAttribute,
   onSetAttributeLive,
@@ -146,6 +148,19 @@ export const PropertyPanel = memo(function PropertyPanel({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [gsapRuntimeValues, gsapAnimations, element, currentTime],
   );
+  // The 3D Transform panel should be reachable on ANY element, not only ones GSAP is
+  // already animating — otherwise you can't add depth/rotation to a fresh static
+  // element (the panel never appears, the classic chicken-and-egg). Default to
+  // identity when there are no runtime values yet; the first edit creates the
+  // gsap.set via commitStaticSet, after which real runtime values flow in.
+  const gsap3dValues: Record<string, number> = gsapRuntimeValues ?? {
+    rotationX: 0,
+    rotationY: 0,
+    rotationZ: 0,
+    z: 0,
+    scale: 1,
+    transformPerspective: 0,
+  };
 
   if (!element) {
     return (
@@ -295,38 +310,13 @@ export const PropertyPanel = memo(function PropertyPanel({
             </div>
             <div className="mt-0.5 truncate text-[11px] text-neutral-500">{sourceLabel}</div>
           </div>
-          <div className="flex items-center gap-1">
-            <button
-              type="button"
-              onClick={handleCopyElementInfo}
-              className={`flex h-6 w-6 items-center justify-center rounded transition-colors ${
-                clipboardCopied
-                  ? "text-studio-accent"
-                  : "text-neutral-500 hover:bg-neutral-800 hover:text-neutral-300"
-              }`}
-              title={clipboardCopied ? "Copied!" : "Copy element info to clipboard"}
-            >
-              <svg
-                width="13"
-                height="13"
-                viewBox="0 0 16 16"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-              >
-                <rect x="5" y="5" width="9" height="9" rx="1.5" />
-                <path d="M11 5V3.5A1.5 1.5 0 009.5 2h-6A1.5 1.5 0 002 3.5v6A1.5 1.5 0 003.5 11H5" />
-              </svg>
-            </button>
-            <button
-              type="button"
-              aria-label="Clear selection"
-              onClick={onClearSelection}
-              className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
-            >
-              <X size={13} />
-            </button>
-          </div>
+          <InspectorHeaderActions
+            element={element}
+            copied={clipboardCopied}
+            onCopy={handleCopyElementInfo}
+            onClear={onClearSelection}
+            onUngroup={onUngroup}
+          />
         </div>
       </div>
       <div className="flex-1 overflow-y-auto">
@@ -513,33 +503,31 @@ export const PropertyPanel = memo(function PropertyPanel({
               )}
             </div>
           </div>
-          {gsapRuntimeValues && (
-            <PropertyPanel3dTransform
-              gsapRuntimeValues={gsapRuntimeValues}
-              gsapAnimId={gsapAnimId}
-              resolveAnimIdForProp={animIdForProp}
-              gsapKeyframes={navKeyframes}
-              currentPct={currentPct}
-              elStart={elStart}
-              elDuration={elDuration}
-              element={element}
-              onCommitAnimatedProperty={onCommitAnimatedProperty}
-              onCommitAnimatedProperties={onCommitAnimatedProperties}
-              onSeekToTime={onSeekToTime}
-              onRemoveKeyframe={onRemoveKeyframe}
-              onConvertToKeyframes={onConvertToKeyframes}
-              onLivePreviewProps={(el, props) => {
-                const iframe = iframeRef.current;
-                const win = iframe?.contentWindow as
-                  | { gsap?: { set: (t: Element, v: Record<string, number>) => void } }
-                  | null
-                  | undefined;
-                const sel = el.id ? `#${el.id}` : el.selector;
-                const node = sel ? iframe?.contentDocument?.querySelector(sel) : null;
-                if (win?.gsap && node) win.gsap.set(node, props);
-              }}
-            />
-          )}
+          <PropertyPanel3dTransform
+            gsapRuntimeValues={gsap3dValues}
+            gsapAnimId={gsapAnimId}
+            resolveAnimIdForProp={animIdForProp}
+            gsapKeyframes={navKeyframes}
+            currentPct={currentPct}
+            elStart={elStart}
+            elDuration={elDuration}
+            element={element}
+            onCommitAnimatedProperty={onCommitAnimatedProperty}
+            onCommitAnimatedProperties={onCommitAnimatedProperties}
+            onSeekToTime={onSeekToTime}
+            onRemoveKeyframe={onRemoveKeyframe}
+            onConvertToKeyframes={onConvertToKeyframes}
+            onLivePreviewProps={(el, props) => {
+              const iframe = iframeRef.current;
+              const win = iframe?.contentWindow as
+                | { gsap?: { set: (t: Element, v: Record<string, number>) => void } }
+                | null
+                | undefined;
+              const sel = el.id ? `#${el.id}` : el.selector;
+              const node = sel ? iframe?.contentDocument?.querySelector(sel) : null;
+              if (win?.gsap && node) win.gsap.set(node, props);
+            }}
+          />
           <div className="mt-3">
             <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
               Stacking