@hyperframes/studio 0.8.116 → 0.8.118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.116",
+  "version": "0.8.118",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.8.116",
-    "@hyperframes/player": "0.8.116",
-    "@hyperframes/core": "0.8.116",
-    "@hyperframes/sdk": "0.8.116",
-    "@hyperframes/studio-server": "0.8.116",
-    "@hyperframes/shader-transitions": "0.8.116"
+    "@hyperframes/core": "0.8.118",
+    "@hyperframes/sdk": "0.8.118",
+    "@hyperframes/studio-server": "0.8.118",
+    "@hyperframes/parsers": "0.8.118",
+    "@hyperframes/player": "0.8.118",
+    "@hyperframes/shader-transitions": "0.8.118"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.116"
+    "@hyperframes/producer": "0.8.118"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioRightPanels.tsx

@@ -170,12 +170,9 @@ export const StudioRightPanels = memo(function StudioRightPanels({
   );
   const handleHideAllSelected = useCallback(() => {
     // Audio has no visual to hide, and `data-hidden` on an audio element is what
-    // MUTES it — preview silences it and the render drops it from the mix. The
-    // timeline withholds the eye on an audio track for that reason
-    // (`visible={!isAudioTrack}`), and the single-selection panel gates the same
-    // write on `audioSelection`; this multi-selection path was the way back to
-    // it. Checked here as well as in the panel because the button is not the
-    // only caller.
+    // mutes it — preview silences it and the render drops it from the mix; the
+    // timeline offers that write as a mute. Checked here as well as in the panel
+    // because the button is not the only caller.
     if (!canHideSelections(domEditGroupSelections)) {
       showToast("Audio can't be hidden — use the group's own controls", "info");
       return;

package/src/components/TimelineToolbar.test.tsx

@@ -422,3 +422,17 @@ describe("TimelineToolbar Linked Selection", () => {
     act(() => useLinkedClipPreferences.getState().setSyncIndicatorsVisible(true));
   });
 });
+
+describe("TimelineToolbar — host right actions", () => {
+  it("draws the host's controls immediately before the thumbnails toggle", () => {
+    const { host, root } = renderToolbar(undefined, {
+      rightActions: <button type="button">Script</button>,
+    });
+    const buttons = [...host.querySelectorAll("button")];
+    const script = buttons.findIndex((b) => b.textContent === "Script");
+    const thumbs = buttons.findIndex((b) => b.getAttribute("aria-label")?.includes("thumbnails"));
+    expect(script).toBeGreaterThan(-1);
+    expect(thumbs).toBe(script + 1);
+    act(() => root.unmount());
+  });
+});

package/src/components/TimelineToolbar.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef } from "react";
+import { memo, useEffect, useRef, type ReactNode } from "react";
 import {
   ArrowsOutLineHorizontal,
   Image,
@@ -50,6 +50,7 @@ export interface TimelineToolbarProps {
   showAddBeat?: boolean;
   /** Hides Add keyframe and auto-record, and turns off auto-record and the K shortcut with them. */
   showKeyframes?: boolean;
+  rightActions?: ReactNode;
 }
 
 interface KeyframeToggleState {
@@ -149,6 +150,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
   showSelectAroundPlayhead = true,
   showAddBeat = true,
   showKeyframes = true,
+  rightActions,
 }: TimelineToolbarProps) {
   const timelineSnapEnabled = usePlayerStore((s) => s.timelineSnapEnabled);
   const setTimelineSnapEnabled = usePlayerStore((s) => s.setTimelineSnapEnabled);
@@ -460,6 +462,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
           })()}
         </div>
         <div className="flex items-center gap-0.5">
+          {rightActions}
           <Tooltip
             label={
               thumbnailsVisible

package/src/components/editor/DomEditOverlay.tsx

@@ -94,6 +94,7 @@ export interface DomEditOverlayProps {
     next: { width: number; height: number },
     offset?: { x: number; y: number },
     restore?: () => void,
+    route?: { plainTranslate: boolean },
   ) => Promise<unknown> | void;
   onRotationCommit: (selection: DomEditSelection, next: RotationCommit) => Promise<unknown> | void;
   onStyleCommit?: (property: string, value: string) => Promise<unknown> | void;

package/src/components/editor/PropertyPanel.test.tsx

@@ -4,6 +4,7 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { PropertyPanelProps } from "./propertyPanelHelpers";
+import type { TimelineEditCallbacks } from "../../player/components/timelineCallbacks";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -235,7 +236,13 @@ async function renderPanel(
   flatEnabled: boolean,
   elementOverride: NonNullable<PropertyPanelProps["element"]> = baseElement(),
   propsOverride: Partial<PropertyPanelProps> = {},
-  currentTime?: number,
+  options: {
+    currentTime?: number;
+    selectedElementId?: string;
+    timelineEdit?: TimelineEditCallbacks;
+    refreshSelection?: (selection: unknown) => void;
+    selectionRef?: { current: unknown };
+  } = {},
 ) {
   vi.resetModules();
   vi.doMock("./manualEditingAvailability", async () => {
@@ -244,32 +251,57 @@ async function renderPanel(
     );
     return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: flatEnabled };
   });
-  // Seed the playhead on the SAME store instance PropertyPanel.tsx will read via
-  // usePlayerStore (module-fresh since the resetModules() above) — must happen
-  // before PropertyPanel is imported/rendered so its initial render sees it.
-  if (currentTime !== undefined) {
-    const { usePlayerStore } = await import("../../player/store/playerStore");
-    usePlayerStore.getState().setCurrentTime(currentTime);
+  vi.doMock("../../contexts/DomEditContext", async () => {
+    const actual = await vi.importActual<typeof import("../../contexts/DomEditContext")>(
+      "../../contexts/DomEditContext",
+    );
+    const { refreshSelection: refresh, selectionRef } = options;
+    return refresh && selectionRef
+      ? {
+          ...actual,
+          useDomEditActionsContextOptional: () => ({
+            refreshDomEditSelectionFromPreview: refresh,
+            domEditSelectionRef: selectionRef,
+          }),
+        }
+      : actual;
+  });
+  // Seed the playhead and selection on the same store instance PropertyPanel.tsx
+  // reads (module-fresh after the resetModules() above), before it is imported so
+  // its first render sees them.
+  const { usePlayerStore } = await import("../../player/store/playerStore");
+  if (options.currentTime !== undefined) {
+    usePlayerStore.getState().setCurrentTime(options.currentTime);
   }
+  if (options.selectedElementId)
+    usePlayerStore.setState({ selectedElementId: options.selectedElementId });
   const { PropertyPanel } = await import("./PropertyPanel");
+  const { TimelineEditProvider } = await import("../../contexts/TimelineEditContext");
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
-  // Only the props the render path touches are supplied; the rest are unused at
-  // mount (handlers fire on interaction), so cast a minimal object to the full
-  // props shape rather than stubbing all ~15 required fields.
-  const props = {
-    element: elementOverride,
-    assets: [],
-    onSetStyle: vi.fn(),
-    onSetText: vi.fn(),
-    onSetAttributeLive: vi.fn(),
-    ...propsOverride,
-  } as unknown as PropertyPanelProps;
-  act(() => {
-    root.render(<PropertyPanel {...props} />);
-  });
-  return { host, root };
+  const render = (element: NonNullable<PropertyPanelProps["element"]>) => {
+    // Only the props the render path touches are supplied; the rest are unused at
+    // mount (handlers fire on interaction), so cast a minimal object to the full
+    // props shape rather than stubbing all ~15 required fields.
+    const props = {
+      element,
+      assets: [],
+      onSetStyle: vi.fn(),
+      onSetText: vi.fn(),
+      onSetAttributeLive: vi.fn(),
+      ...propsOverride,
+    } as unknown as PropertyPanelProps;
+    act(() => {
+      root.render(
+        <TimelineEditProvider value={options.timelineEdit ?? {}}>
+          <PropertyPanel {...props} />
+        </TimelineEditProvider>,
+      );
+    });
+  };
+  render(elementOverride);
+  return { host, root, render };
 }
 
 // renderPanel resetModules()+dynamic-imports PropertyPanel (needed for a fresh
@@ -561,7 +593,7 @@ describe("PropertyPanel — flat Layout/Motion timing agreement (whole-plan cohe
         true,
         inferredMotionElement(),
         { gsapAnimations: [INFERRED_TIMING_ANIMATION], onSeekToTime },
-        2,
+        { currentTime: 2 },
       );
       openFlatGroup(host, "Layout");
       const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
@@ -606,7 +638,7 @@ describe("PropertyPanel — flat Layout currentPct basis (currentPct follow-up f
         true,
         inferredMotionElement(),
         { gsapAnimations: [INFERRED_TIMING_ANIMATION] },
-        3.5,
+        { currentTime: 3.5 },
       );
       openFlatGroup(host, "Layout");
       const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
@@ -643,7 +675,7 @@ describe("PropertyPanel — flat Layout currentPct basis (currentPct follow-up f
         true,
         inferredMotionElement(),
         { gsapAnimations: [INFERRED_TIMING_ANIMATION], onSeekToTime },
-        3.5,
+        { currentTime: 3.5 },
       );
       openFlatGroup(host, "Layout");
       const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
@@ -1038,6 +1070,98 @@ describe("PropertyPanel — Motion is for things that move", () => {
     RENDER_TIMEOUT_MS,
   );
 
+  it(
+    "offers a mute on an audible audio clip and toggles it through the timeline",
+    async () => {
+      const onToggleElementHidden = vi.fn();
+      const { host, root } = await renderPanel(
+        true,
+        audioClipElement(),
+        { onToggleElementHidden },
+        { selectedElementId: "vo-1" },
+      );
+      act(() => host.querySelector<HTMLElement>('button[aria-label="Mute element"]')!.click());
+      expect(onToggleElementHidden).toHaveBeenCalledWith("vo-1", true);
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+
+  // A bus has no timeline row, so the panel is its only mute; it must go both ways.
+  it(
+    "mutes, unmutes and mutes an audio group from the panel header",
+    async () => {
+      const bus = (hidden: boolean) => {
+        const element = audioBusElement();
+        return {
+          ...element,
+          dataAttributes: { ...element.dataAttributes, ...(hidden ? { hidden: "" } : {}) },
+        };
+      };
+      let hidden = true;
+      const onSetAudioGroupAttributeQuiet = vi.fn(
+        async (_id: string, _attr: string, value: string | null, _label: string) => {
+          hidden = value !== null;
+        },
+      );
+      // The panel re-reads its selection after the write; nothing else re-renders it here.
+      const { host, root, render } = await renderPanel(
+        true,
+        bus(true),
+        {},
+        {
+          timelineEdit: { onSetAudioGroupAttributeQuiet },
+          selectionRef: { current: bus(true) },
+          refreshSelection: () => render(bus(hidden)),
+        },
+      );
+      const press = async (label: string) => {
+        const button = host.querySelector<HTMLElement>(`button[aria-label="${label}"]`);
+        if (!button) throw new Error(`Expected a "${label}" button`);
+        await act(async () => button.click());
+      };
+      await press("Unmute element");
+      await press("Mute element");
+      await press("Unmute element");
+      expect(onSetAudioGroupAttributeQuiet.mock.calls).toEqual([
+        ["voiceover", "data-hidden", null, "Unmute element"],
+        ["voiceover", "data-hidden", "", "Mute element"],
+        ["voiceover", "data-hidden", null, "Unmute element"],
+      ]);
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+
+  it(
+    "re-reads the current selection, not the muted bus, once the write lands",
+    async () => {
+      let land = () => {};
+      const onSetAudioGroupAttributeQuiet = vi.fn(
+        () => new Promise<void>((resolve) => (land = resolve)),
+      );
+      const selectionRef: { current: unknown } = { current: audioBusElement() };
+      const refreshSelection = vi.fn();
+      const { host, root } = await renderPanel(
+        true,
+        audioBusElement(),
+        {},
+        {
+          timelineEdit: { onSetAudioGroupAttributeQuiet },
+          selectionRef,
+          refreshSelection,
+        },
+      );
+      act(() => host.querySelector<HTMLElement>('button[aria-label="Mute element"]')!.click());
+      const next = audioClipElement();
+      selectionRef.current = next;
+      await act(async () => land());
+      expect(refreshSelection.mock.calls).toEqual([[next]]);
+      act(() => root.unmount());
+    },
+    RENDER_TIMEOUT_MS,
+  );
+
   it(
     "offers a bus neither — it has no clip range to edit",
     async () => {

package/src/components/editor/PropertyPanel.tsx

@@ -119,18 +119,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const selectedElementHidden = isSelectedElementHidden(timelineElements, selectedElementId);
   const visibilityToggleLabel = selectedElementHidden ? "Show element" : "Hide element";
-  /**
-   * An audio element gets no hide control here.
-   *
-   * On an audio track "hidden" and "muted" are not similar operations, they are
-   * the SAME operation with two names (groups doc §2.1) — which is why the
-   * timeline's eye became the mute rather than growing a sibling. A second copy
-   * in the panel, still called "Hide element", is precisely the thing that step
-   * removed: "Two controls that silence a track, sitting next to each other,
-   * differing only in a distinction the author cannot see." An
-   * `<hf-audio-group>` has no visual to hide at all, and its mute lives on its
-   * own row.
-   */
+  // Audio gets no visibility toggle in this classic panel; the timeline and the flat panel offer it as a mute.
   const audioSelection = isAudioDomElement(element?.element);
   // Live during playback, the store's when paused — see the hook. Shared with the
   // audio FX panel, which follows the playhead for the same reason: a value the

package/src/components/editor/PropertyPanelEmptyState.test.tsx

@@ -96,9 +96,8 @@ describe("PropertyPanelEmptyState — flat multi-select", () => {
       />,
     );
     expect(host.querySelector('[data-flat-multiselect-group="true"]')).toBeNull();
-    // Hiding is visibility, and `data-hidden` on audio is what MUTES it — the
-    // timeline withholds the eye on an audio track for that reason, and this
-    // panel was the way back to the same write.
+    // Hiding is visibility, and `data-hidden` on audio is what mutes it; the
+    // timeline owns that write as a mute.
     expect(host.querySelector('[data-flat-multiselect-hide-all="true"]')).toBeNull();
     // The list still names what is selected; only the actions go.
     expect(host.textContent).toContain("2 elements selected");

package/src/components/editor/PropertyPanelEmptyState.tsx

@@ -133,11 +133,9 @@ function FlatMultiSelectState({
           an empty frame. Grouping is the LAYOUT grouper — a positioned wrapper
           around a bounding box, and an <audio> clip has none (grouping two
           produced a 0x0 div with inline left/top on elements that are never
-          laid out). Hiding is visibility, which for audio doubles as mute; the
-          timeline already withholds the eye on an audio track
-          (`visible={!isAudioTrack}`) and this panel was the way back to the
-          same write. Both handlers refuse it too — they own keyboard paths no
-          hidden button can gate. */}
+          laid out). Hiding is visibility, which for audio is mute, and the
+          timeline owns that as a mute control. Both handlers refuse it too —
+          they own keyboard paths no hidden button can gate. */}
       {!hasAudio && (
         <div className="flex gap-2">
           <button

package/src/components/editor/PropertyPanelFlat.tsx

@@ -9,6 +9,7 @@ import { useLinkedSpeedCommit, withLinkedPlaybackRate } from "./linkedSpeedEdits
 import { formatPxMetricValue } from "./propertyPanelHelpers";
 import { audioFxSummary } from "./audioFxSummary";
 import { resolveAudioGroups } from "@hyperframes/core/audio-groups";
+import { usePanelHiddenToggle } from "./usePanelHiddenToggle";
 import { PropertyPanelFlatHeader } from "./PropertyPanelFlatHeader";
 import { PropertyPanelFlatFooter } from "./PropertyPanelFlatFooter";
 import { closedGroupHeader, isSelectionHidden } from "./propertyPanelFlatClosedGroup";
@@ -206,6 +207,12 @@ export function PropertyPanelFlat({
    * selected the clip and then appeared to do nothing.
    */
   const hiddenNow = isSelectionHidden(selectedElementHidden, element);
+  const toggleHidden = usePanelHiddenToggle({
+    element,
+    hidden: hiddenNow,
+    selectedElementId,
+    onToggleElementHidden,
+  });
 
   const reveal = useAudioFxRevealSection({
     elementId: element?.id,
@@ -531,28 +538,8 @@ export function PropertyPanelFlat({
             meta={`${sourceLabel} · ${element.tagName}`}
             elementKind={elementKind}
             hidden={hiddenNow}
-            // Audio gets no hide control here. On an audio track "hidden" and
-            // "muted" are not similar operations, they are the SAME operation
-            // with two names (groups doc §2.1) — which is why the timeline's eye
-            // BECAME the mute rather than growing a sibling. A second copy in
-            // the panel, still called "Hide element", is exactly what that step
-            // set out to remove: "Two controls that silence a track, sitting
-            // next to each other, differing only in a distinction the author
-            // cannot see." An `<hf-audio-group>` has no visual to hide at all.
-            //
-            // EXCEPT while it is already hidden — the same door-from-the-inside
-            // the timeline's eye keeps for an audio track
-            // (`TimelineTrackPlainHeader`). Withholding it unconditionally
-            // withheld the only way back: a `data-hidden` group is silent in
-            // preview (the bus's mute gain) and absent from the render (every
-            // member dropped), and the group header carries no visibility
-            // control of its own now that mute and solo are gone. Only
-            // hand-editing the HTML brought the audio back.
-            onToggleHidden={
-              selectedElementId && onToggleElementHidden && (!audioSelection || hiddenNow)
-                ? () => void onToggleElementHidden(selectedElementId, !hiddenNow)
-                : undefined
-            }
+            asMute={audioSelection}
+            onToggleHidden={toggleHidden}
             copied={clipboardCopied}
             onCopy={onCopyElementInfo}
             onClear={onClearSelection}

package/src/components/editor/PropertyPanelFlatHeader.test.tsx

@@ -77,10 +77,6 @@ describe("PropertyPanelFlatHeader", () => {
     expect(withUngroup.querySelector('[aria-label="Ungroup"]')).not.toBeNull();
   });
 
-  // The panel's hide control is withheld for audio by its caller — on an audio
-  // track "hidden" and "muted" are the same operation with two names (groups
-  // doc §2.1), and the timeline already carries it, correctly labelled. This
-  // pins the header's half of that contract: no handler, no button.
   it("renders no visibility control when its caller withholds the handler", () => {
     const { host } = renderHeader({ onToggleHidden: undefined });
     const labels = Array.from(host.querySelectorAll("button")).map((b) =>
@@ -90,6 +86,13 @@ describe("PropertyPanelFlatHeader", () => {
     expect(labels).not.toContain("Show element");
   });
 
+  it("names a mute on an audio selection", () => {
+    const { host } = renderHeader({ onToggleHidden: vi.fn(), asMute: true });
+    expect(host.querySelector('button[aria-label="Mute element"]')).not.toBeNull();
+    const { host: muted } = renderHeader({ onToggleHidden: vi.fn(), asMute: true, hidden: true });
+    expect(muted.querySelector('button[aria-label="Unmute element"]')).not.toBeNull();
+  });
+
   it("renders it when the handler is supplied", () => {
     const { host } = renderHeader({ onToggleHidden: vi.fn() });
     const labels = Array.from(host.querySelectorAll("button")).map((b) =>

package/src/components/editor/PropertyPanelFlatHeader.tsx

@@ -1,4 +1,4 @@
-import { Eye, EyeSlash } from "@phosphor-icons/react";
+import { HiddenToggleIcon, hiddenToggleVerb } from "../../player/components/hiddenToggle";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { ClipboardList, Film, Square, Type, X } from "../../icons/SystemIcons";
 
@@ -14,6 +14,7 @@ export function PropertyPanelFlatHeader({
   meta,
   elementKind,
   hidden,
+  asMute = false,
   onToggleHidden,
   copied,
   onCopy,
@@ -25,6 +26,7 @@ export function PropertyPanelFlatHeader({
   meta: string;
   elementKind: "text" | "media" | "other";
   hidden: boolean;
+  asMute?: boolean;
   onToggleHidden?: () => void;
   copied: boolean;
   onCopy: () => void;
@@ -34,7 +36,7 @@ export function PropertyPanelFlatHeader({
 }) {
   const track = useTrackDesignInput();
   const Icon = ICON_BY_KIND[elementKind];
-  const visibilityLabel = hidden ? "Show element" : "Hide element";
+  const visibilityLabel = `${hiddenToggleVerb(asMute, hidden)} element`;
 
   return (
     <div className="flex items-center gap-2.5 border-b border-panel-hairline px-4 py-3">
@@ -81,7 +83,7 @@ export function PropertyPanelFlatHeader({
               onToggleHidden();
             }}
           >
-            {hidden ? <EyeSlash size={13} weight="bold" /> : <Eye size={13} weight="bold" />}
+            <HiddenToggleIcon asMute={asMute} hidden={hidden} size={13} />
           </button>
         )}
         <button

package/src/components/editor/domEditOverlayGestures.ts

@@ -275,6 +275,7 @@ export type UseDomEditOverlayGesturesOptions = {
       n: { width: number; height: number },
       offset?: { x: number; y: number },
       restore?: () => void,
+      route?: { plainTranslate: boolean },
     ) => Promise<unknown> | void
   >;
   onRotationCommitRef: RefObject<

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -32,7 +32,7 @@ import {
   type UseDomEditOverlayGesturesOptions,
 } from "./domEditOverlayGestures";
 import { collectSnapContext, buildExcludeElements } from "./snapTargetCollection";
-import { gsapWritesRotation } from "../../hooks/gsapRuntimeKeyframes";
+import { editsPlainCss } from "../../hooks/gsapRuntimeKeyframes";
 import { logResize, resetResizeMoveLog } from "../../utils/resizeDebug";
 import { logDrag, readDragPositions, resetDragMoveLog } from "../../utils/dragDebug";
 
@@ -234,7 +234,7 @@ export function startGesture(
   try {
     // Rotation base: the angle the element shows. An element GSAP does not turn, or a plain-translate
     // move, never asks GSAP: reading a property makes it bake the CSS into its transform.
-    const plain = !!pathOffsetMember?.plainTranslate || !gsapWritesRotation(sel.element);
+    const plain = !!pathOffsetMember?.plainTranslate || editsPlainCss(sel.element, "rotate");
     const plainRotation = plain && kind === "rotate" ? readCssRotationTarget(sel.element) : null;
     const rotation = { angle: readRotationBase(sel.element, plain) };
     const overlayBounds = overlayEl?.getBoundingClientRect();

package/src/components/editor/manualOffsetDrag.ts

@@ -11,7 +11,7 @@ import {
   type StudioPathOffsetSnapshot,
 } from "./manualEdits";
 import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
-import { gsapWritesBox, gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
+import { editsPlainCss } from "../../hooks/gsapRuntimeKeyframes";
 import { readTranslatePx, UNREADABLE_TRANSLATE, writeTranslatePx } from "./plainTranslate";
 import type { StudioEditRevert } from "../../utils/studioPendingEdits";
 
@@ -318,8 +318,8 @@ export function createManualOffsetDragMember(input: {
   rect: ManualOffsetDragRect;
   gesture?: "drag" | "nudge" | "resize"; // resize: the anchor that keeps its centre planted
 }): ManualOffsetDragMemberResult {
-  const gsapOwns = input.gesture === "resize" ? gsapWritesBox : gsapWritesPosition;
-  const plainTranslate = !!input.gesture && !gsapOwns(input.element);
+  const plainTranslate =
+    !!input.gesture && editsPlainCss(input.element, input.gesture === "resize" ? "resize" : "move");
   // The APPLIED offset, never a dormant var, so a stale one can't fling the element off-screen.
   const initialOffset = plainTranslate
     ? readTranslatePx(input.element)

package/src/components/editor/plainTranslate.ts

@@ -1,5 +1,5 @@
 import { roundTo3 } from "../../utils/rounding";
-import { gsapWritesPosition, gsapWritesRotation } from "../../hooks/gsapRuntimeKeyframes";
+import { editsPlainCss } from "../../hooks/gsapRuntimeKeyframes";
 import { readCssRotation } from "../../hooks/draggedGsapPosition";
 import { readStudioPathOffset, readStudioRotation, styleUsesStudioOffset } from "./manualEditsDom";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
@@ -142,10 +142,12 @@ export function writeTranslatePx(el: HTMLElement, p: Point): void {
 }
 
 /** The position the panel shows and edits: the translate a move writes, unless GSAP positions it. */
-export function readMoveOffset(el: HTMLElement, plainTranslate = !gsapWritesPosition(el)): Point {
+export function readMoveOffset(el: HTMLElement, plainTranslate = editsPlainCss(el, "move")): Point {
   return plainTranslate ? readTranslatePx(el) : readStudioPathOffset(el);
 }
 
 export function readShownRotation(el: HTMLElement): { angle: number } {
-  return gsapWritesRotation(el) ? readStudioRotation(el) : { angle: roundTo3(readCssRotation(el)) };
+  return editsPlainCss(el, "rotate")
+    ? { angle: roundTo3(readCssRotation(el)) }
+    : readStudioRotation(el);
 }

package/src/components/editor/propertyPanelHelpers.ts

@@ -9,7 +9,7 @@ import {
   playbackStartAttributeForElement,
   readPlaybackStartAttributes,
 } from "../../player/lib/timelineElementHelpers";
-import { GSAP_TRANSFORM_KEYS, gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
+import { editsPlainCss, GSAP_TRANSFORM_KEYS } from "../../hooks/gsapRuntimeKeyframes";
 
 export type {
   BackgroundRemovalProgress,
@@ -496,7 +496,7 @@ export function readGsapRuntimeValuesForPanel(
     const el = findPreviewNode(iframe.contentDocument, element);
     if (!el) return null;
     const propKeys = collectPanelPropKeys(gsapAnimations);
-    const readsTransform = gsapWritesPosition(el);
+    const readsTransform = !editsPlainCss(el, "move");
     const result: Record<string, number> = {};
     for (const prop of propKeys) {
       if (!readsTransform && GSAP_TRANSFORM_KEYS.has(prop)) continue;

package/src/components/editor/propertyPanelTransformCommit.ts

@@ -1,4 +1,4 @@
-import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
+import { editsPlainCss } from "../../hooks/gsapRuntimeKeyframes";
 import type { DomEditSelection } from "./domEditingTypes";
 import { readStudioBoxSize } from "./manualEdits";
 import { readMoveOffset, UNREADABLE_TRANSLATE } from "./plainTranslate";
@@ -75,7 +75,7 @@ export function createTransformCommitHandlers({
       )
     )
       return;
-    const plainTranslate = !gsapWritesPosition(element.element);
+    const plainTranslate = editsPlainCss(element.element, "move");
     const current = readMoveOffset(element.element, plainTranslate);
     if (!Number.isFinite(current.x) || !Number.isFinite(current.y))
       return void showToast?.(UNREADABLE_TRANSLATE);

package/src/components/editor/rotationDraft.ts

@@ -51,7 +51,8 @@ export interface CssRotationTarget {
   inline: boolean;
 }
 
-export type RotationCommit = { angle: number; plain?: CssRotationTarget };
+export type PressChoseGsap = null;
+export type RotationCommit = { angle: number; plain?: CssRotationTarget | PressChoseGsap };
 
 const TRANSLATE = /^translate(?:3d|X|Y|Z)?\(/i;
 const OWN_TURN = /^rotate\(\s*-?[\d.]+(?:e[+-]?\d+)?deg\s*\)$/i;

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -442,7 +442,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       }
       // Hold the final angle while the commit lands.
       applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
-      const commit = g.plainRotation ? { ...finalRotation, plain: g.plainRotation } : finalRotation;
+      const commit = { ...finalRotation, plain: g.plainRotation };
       void Promise.resolve(opts.onRotationCommitRef.current(sel, commit))
         .then((result) => trackPreviewEditResult("rotate", "drag", result))
         .catch((error) => {
@@ -536,7 +536,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
       };
       void Promise.resolve(
-        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore),
+        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore, member),
       )
         .then((result) => trackPreviewEditResult("resize", "drag", result))
         .catch((error) => {