@hyperframes/studio 0.8.138 → 0.8.140

package/src/components/editor/PropertyPanel.tsx

@@ -565,6 +565,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
             styles={styles}
             assets={assets}
             onSetStyle={onSetStyle}
+            onSetHtmlAttribute={props.onSetHtmlAttribute}
             onImportAssets={onImportAssets}
             gsapBorderRadius={gsapBorderRadius}
           />

package/src/components/editor/PropertyPanelFlat.tsx

@@ -351,6 +351,7 @@ export function PropertyPanelFlat({
           styles={styles}
           assets={assets}
           onSetStyle={onSetStyle}
+          onSetHtmlAttribute={forwardedProps.onSetHtmlAttribute}
           onPreviewStyle={onPreviewStyle}
           onImportAssets={onImportAssets}
           gsapBorderRadius={gsapBorderRadius}

package/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts

@@ -142,6 +142,7 @@ function buildHarness(
   const iframe = document.createElement("iframe");
 
   const opts: UseDomEditOverlayGesturesOptions = {
+    activeCompositionPathRef: { current: null },
     overlayRef: ref<HTMLDivElement | null>(overlayEl),
     iframeRef: ref<HTMLIFrameElement | null>(iframe),
     boxRef: ref<HTMLDivElement | null>(document.createElement("div")),
@@ -159,6 +160,7 @@ function buildHarness(
     gestureRef: ref<GestureState | null>(null),
     groupGestureRef: ref(null),
     blockedMoveRef: ref(null),
+    waitingPressRef: ref(null),
     rafPausedRef: ref(false),
     suppressNextBoxClickRef: ref(false),
     setOverlayRect: () => {},

package/src/components/editor/domEditOverlayGeometry.ts

@@ -18,16 +18,16 @@ export interface OverlayRect {
   height: number;
   editScaleX: number;
   editScaleY: number;
-  /**
-   * The element's live transform rotation in DEGREES (screen/CSS convention, CW
-   * positive), decomposed from its computed transform matrix. Present so the
-   * selection chrome can render as an oriented bounding box (OBB) that co-rotates
-   * with the element. Omitted (treated as 0) for group/union rects and when the
-   * transform is unmeasurable — those render axis-aligned exactly as before.
-   */
+  /** Live screen-space rotation; omitted for axis-aligned group bounds. */
   angle?: number;
 }
 
+export const shiftedOverlayRect = (rect: OverlayRect, dx: number, dy: number): OverlayRect => ({
+  ...rect,
+  left: rect.left + dx,
+  top: rect.top + dy,
+});
+
 export interface GroupOverlayItem {
   key: string;
   selection: DomEditSelection;

package/src/components/editor/domEditOverlayGestures.ts

@@ -121,6 +121,22 @@ export interface BlockedMoveState {
   startY: number;
 }
 
+/** Marks the selection box while its press waits for a reload: it is drawn at the pointer, not at the element. */
+export const PRESS_WAITING_ATTR = "data-dom-edit-press-waiting";
+
+/** A press that landed while the preview reloads: it starts once the new preview shows what it pressed. */
+export interface WaitingPressState {
+  pointerId: number;
+  startX: number;
+  startY: number;
+  draw: ((dx: number, dy: number) => void) | null;
+  frame: number;
+  moved: React.PointerEvent<HTMLDivElement> | null;
+  released: React.PointerEvent<HTMLDivElement> | null;
+  after: WaitingPressState | null;
+  ended: boolean;
+}
+
 export type FocusableDomEditOverlay = {
   focus(options?: FocusOptions): void;
 };
@@ -245,6 +261,7 @@ export interface DomEditGroupPathOffsetCommit {
 
 // Refs are stable across renders; values are read via .current.
 export type UseDomEditOverlayGesturesOptions = {
+  activeCompositionPathRef: RefObject<string | null>;
   overlayRef: RefObject<HTMLDivElement | null>;
   iframeRef: RefObject<HTMLIFrameElement | null>;
   boxRef: RefObject<HTMLDivElement | null>;
@@ -255,6 +272,7 @@ export type UseDomEditOverlayGesturesOptions = {
   gestureRef: RefObject<GestureState | null>;
   groupGestureRef: RefObject<GroupGestureState | null>;
   blockedMoveRef: RefObject<BlockedMoveState | null>;
+  waitingPressRef: RefObject<WaitingPressState | null>;
   rafPausedRef: RefObject<boolean>;
   suppressNextBoxClickRef: RefObject<boolean>;
   setOverlayRect: (next: OverlayRect | null) => void;

package/src/components/editor/domEditOverlayStartGesture.blocked.test.ts

@@ -30,6 +30,7 @@ it("a drag press the layer cannot take gets the notice, counts as handled, and l
     snapGuidesRef: ref(null),
     groupGestureRef: ref(null),
     blockedMoveRef: ref(null),
+    waitingPressRef: ref(null),
     setOverlayRect: vi.fn(),
     suppressNextBoxClickRef: ref(false),
     hoverSelectionRef: ref(null),

package/src/components/editor/domEditOverlayStartGesture.test.ts

@@ -47,6 +47,7 @@ function pressOptions(element: HTMLElement) {
     snapGuidesRef: ref(null),
     groupGestureRef: ref(null),
     blockedMoveRef: ref(null),
+    waitingPressRef: ref(null),
     setOverlayRect: vi.fn(),
     suppressNextBoxClickRef: ref(false),
     hoverSelectionRef: ref(null),
@@ -169,6 +170,7 @@ describe("a rotate on a page that loads GSAP", () => {
       gestureRef: ref<GestureState | null>(null),
       groupGestureRef: ref(null),
       blockedMoveRef: ref(null),
+      waitingPressRef: ref(null),
       rafPausedRef: ref(false),
       onCanvasPointerMoveRef: ref(vi.fn()),
     };
@@ -222,6 +224,7 @@ describe("a rotate press on an element a GSAP tween turns", () => {
       iframeRef: ref(null),
       gestureRef: ref<GestureState | null>(null),
       rafPausedRef: ref(false),
+      waitingPressRef: ref(null),
     };
     const press = {
       clientX: 25,

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -3,6 +3,7 @@
  * These are pure "start a new gesture" operations — no draft rect updates.
  */
 import { type DomEditSelection } from "./domEditing";
+import type { EditMoment } from "./manualEditsTypes";
 import {
   applyManualOffsetDragDraft,
   createManualOffsetDragMember,
@@ -49,6 +50,7 @@ export function notifyBlockedPress(
 export function startGroupDrag(
   e: React.PointerEvent<HTMLElement>,
   opts: UseDomEditOverlayGesturesOptions,
+  at?: EditMoment,
 ): boolean {
   const items = opts.groupOverlayItemsRef.current;
   if (items.length <= 1) return false;
@@ -73,6 +75,7 @@ export function startGroupDrag(
       element: item.element,
       rect: item.rect,
       gesture: "drag",
+      at,
     });
     if (!result.ok) {
       restoreManualOffsetDragMembers(members);
@@ -144,8 +147,10 @@ export function startGesture(
     selection?: DomEditSelection;
     rect?: OverlayRect | null;
     resizeHandle?: ResizeHandle;
+    at?: EditMoment;
   },
 ): boolean {
+  const at = options?.at;
   const sel = options?.selection ?? opts.selectionRef.current;
   const rect = options?.rect ?? opts.overlayRectRef.current;
   const box = opts.boxRef.current;
@@ -196,6 +201,7 @@ export function startGesture(
       element: sel.element,
       rect,
       gesture: "drag",
+      at,
     });
     if (!result.ok) {
       opts.onBlockedMoveRef.current(result.selection, result.reason);
@@ -217,6 +223,7 @@ export function startGesture(
         element: sel.element,
         rect,
         gesture: "resize",
+        at,
       });
       if (result.ok) {
         pathOffsetMember = result.member;
@@ -225,12 +232,13 @@ export function startGesture(
         // Hold a % translate as the same px now, so a growing box can't drag it along mid-frame.
         if (result.member.plainTranslate) applyManualOffsetDragDraft(result.member, 0, 0);
       } else {
-        manualEditDragToken = beginStudioManualEditGesture(sel.element, "resize");
+        manualEditDragToken = beginStudioManualEditGesture(sel.element, "resize", at);
       }
     } else {
       manualEditDragToken = beginStudioManualEditGesture(
         sel.element,
         kind === "rotate" ? "rotate" : "resize",
+        at,
       );
     }
   }

package/src/components/editor/dragUndoPaint.test.ts

@@ -68,6 +68,7 @@ function dragWithSaveRunning(save: Promise<void> | (() => Promise<void>)) {
     snapGuidesRef: ref(null),
     groupGestureRef: ref(null),
     blockedMoveRef: ref(null),
+    waitingPressRef: ref(null),
     setOverlayRect: vi.fn(),
     suppressNextBoxClickRef: ref(false),
     hoverSelectionRef: ref(null),
@@ -127,6 +128,7 @@ function gestureWithSaveRunning(kind: "resize" | "rotate", save: Promise<void>)
     snapGuidesRef: ref(null),
     groupGestureRef: ref(null),
     blockedMoveRef: ref(null),
+    waitingPressRef: ref(null),
     setOverlayRect: vi.fn(),
     suppressNextBoxClickRef: ref(false),
     hoverSelectionRef: ref(null),