@hyperframes/studio 0.8.138 → 0.8.140

package/src/components/editor/manualOffsetDrag.ts

@@ -7,10 +7,12 @@ import {
   captureStudioPathOffset,
   clearStudioPathOffset,
   endStudioManualEditGesture,
+  isStudioManualEditGestureCurrent,
   readAppliedStudioPathOffset,
   restoreStudioPathOffset,
   type StudioPathOffsetSnapshot,
 } from "./manualEdits";
+import type { EditMoment } from "./manualEditsTypes";
 import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
 import { editsPlainCss } from "../../hooks/gsapRuntimeKeyframes";
 import { readTranslatePx, UNREADABLE_TRANSLATE, writeTranslatePx } from "./plainTranslate";
@@ -315,6 +317,7 @@ export function createManualOffsetDragMember(input: {
   element: HTMLElement;
   rect: ManualOffsetDragRect;
   gesture?: "drag" | "nudge" | "resize"; // resize: the anchor that keeps its centre planted
+  at?: EditMoment;
 }): ManualOffsetDragMemberResult {
   const plainTranslate =
     !!input.gesture && editsPlainCss(input.element, input.gesture === "resize" ? "resize" : "move");
@@ -357,6 +360,7 @@ export function createManualOffsetDragMember(input: {
   const gestureToken = beginStudioManualEditGesture(
     input.element,
     input.gesture === "resize" ? "resize" : "move",
+    input.at,
   );
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset, {
     scaleX: input.rect.editScaleX,
@@ -531,6 +535,7 @@ function settleDraftTranslate(element: HTMLElement, gsapOwnsPosition: boolean):
 /** Teardown after a COMMITTED drag. */
 export function endManualOffsetDragMembers(members: ManualOffsetDragMember[]): void {
   for (const member of members) {
+    if (!isStudioManualEditGestureCurrent(member.element, member.gestureToken)) continue;
     endStudioManualEditGesture(member.element, member.gestureToken);
     member.element.removeAttribute("data-hf-drag-initial-offset-x");
     member.element.removeAttribute("data-hf-drag-initial-offset-y");

package/src/components/editor/previewGestureStarts.ts

@@ -0,0 +1,284 @@
+import {
+  orientedGroupAwareOverlayRect,
+  shiftedOverlayRect,
+  type OverlayRect,
+} from "./domEditOverlayGeometry";
+import { findElementForSelection, type DomEditSelection } from "./domEditing";
+import { computeOverlayRootScale } from "./domEditOverlayBasis";
+import { resolveCenterResizeScale } from "./domEditResizeLocal";
+import {
+  PRESS_WAITING_ATTR,
+  type WaitingPressState,
+  type GestureKind,
+  type ResizeHandle,
+  type UseDomEditOverlayGesturesOptions,
+} from "./domEditOverlayGestures";
+import {
+  startGesture as _startGesture,
+  startGroupDrag as _startGroupDrag,
+} from "./domEditOverlayStartGesture";
+import { giveUpOnPreviewChange, isPreviewChanging } from "../../player/previewReloading";
+import { setStudioWaitingPressCancel } from "../../utils/studioPendingEdits";
+import { playheadMoment } from "../../hooks/editMoment";
+import type { EditMoment } from "./manualEditsTypes";
+
+const MAX_SETTLED_WAIT_FRAMES = 60;
+export const PRESS_WAIT_MAX_MS = 10_000;
+
+export function createPreviewGestureStarts(
+  opts: UseDomEditOverlayGesturesOptions,
+  moveActiveGesture: (e: React.PointerEvent<HTMLDivElement>) => void,
+  releaseActiveGesture: (e: React.PointerEvent<HTMLDivElement>) => void,
+) {
+  /** Points Cmd+Z at the newest released press still waiting, if any. */
+  const offerUndo = () => {
+    let p = opts.waitingPressRef.current;
+    while (p && !p.released) p = p.after;
+    const press = p;
+    setStudioWaitingPressCancel(press && (() => dropPress(press)));
+  };
+
+  const clearWaitingMark = () => {
+    opts.boxRef.current?.removeAttribute(PRESS_WAITING_ATTR);
+    opts.rafPausedRef.current = false;
+  };
+
+  /** Points the press queued right behind `press` at `next` instead. */
+  const unlink = (press: WaitingPressState, next: WaitingPressState | null) => {
+    for (let p = opts.waitingPressRef.current; p; p = p.after)
+      if (p.after === press) p.after = next;
+  };
+
+  const endWaitingPress = (press: WaitingPressState | null = opts.waitingPressRef.current) => {
+    for (let p = press; p && !p.ended; p = p.after) {
+      p.ended = true;
+      cancelAnimationFrame(p.frame);
+    }
+    if (press === opts.waitingPressRef.current) {
+      opts.waitingPressRef.current = null;
+      clearWaitingMark();
+    }
+    // A press queued behind this one keeps waiting, on nothing that has ended.
+    else if (press) unlink(press, null);
+    offerUndo();
+  };
+
+  /** The newest press goes: the outline shows the press before it, or the box before this one. */
+  const showPressBefore = (press: WaitingPressState) => {
+    const before = press.after;
+    opts.waitingPressRef.current = before;
+    const shown = before ?? press;
+    const at = before?.moved;
+    const [dx, dy] = at ? [at.clientX - shown.startX, at.clientY - shown.startY] : [0, 0];
+    shown.draw?.(dx, dy);
+    if (!before) clearWaitingMark();
+  };
+
+  /** Takes one press out of the queue. */
+  const dropPress = (press: WaitingPressState): boolean => {
+    if (press.ended) return false;
+    press.ended = true;
+    cancelAnimationFrame(press.frame);
+    if (press === opts.waitingPressRef.current) showPressBefore(press);
+    else unlink(press, press.after);
+    offerUndo();
+    return true;
+  };
+
+  /** Ends the press still held, if any; presses already released are finished edits and still land. */
+  const endHeldPress = () => {
+    const held = opts.waitingPressRef.current;
+    if (held && !held.released) dropPress(held);
+  };
+
+  const releaseWaitingPress = (press: WaitingPressState, e: React.PointerEvent<HTMLDivElement>) => {
+    press.released = e;
+    offerUndo();
+  };
+
+  const drawPressedBox = (origin: OverlayRect | null): WaitingPressState["draw"] =>
+    origin && ((dx, dy) => opts.setOverlayRect(shiftedOverlayRect(origin, dx, dy)));
+
+  // A corner resize scales about the element's centre by the pointer's distance from it, as the resize does.
+  const drawResizedBox = (
+    origin: OverlayRect | null,
+    press: { x: number; y: number },
+  ): WaitingPressState["draw"] => {
+    if (!origin) return null;
+    const bounds = opts.overlayRef.current?.getBoundingClientRect();
+    const centre = {
+      x: (bounds?.left ?? 0) + origin.left + origin.width / 2,
+      y: (bounds?.top ?? 0) + origin.top + origin.height / 2,
+    };
+    return (dx, dy) => {
+      const pointer = { x: press.x + dx, y: press.y + dy };
+      const scale = resolveCenterResizeScale({ pointer, pointerStart: press, centerStart: centre });
+      const [width, height] = [origin.width * scale, origin.height * scale];
+      opts.setOverlayRect({
+        ...origin,
+        left: origin.left + (origin.width - width) / 2,
+        top: origin.top + (origin.height - height) / 2,
+        width,
+        height,
+      });
+    };
+  };
+
+  // A press on the page a reload is replacing would edit it by its old rules: it starts on the new page instead.
+  const startOnShownPreview = (
+    e: React.PointerEvent<HTMLElement>,
+    pressed: () => HTMLElement[],
+    start: (e: React.PointerEvent<HTMLElement>, at: EditMoment, waited: boolean) => boolean,
+    draw: WaitingPressState["draw"] = null,
+  ): boolean => {
+    const at = playheadMoment();
+    if (!isPreviewChanging() && !opts.waitingPressRef.current) return start(e, at, false);
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    // The press already holds the pointer, which may be up by the time the gesture starts.
+    const held = { setPointerCapture() {} };
+    const down = { ...e, currentTarget: held, preventDefault() {}, stopPropagation() {} };
+    const press: WaitingPressState = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      draw,
+      frame: 0,
+      moved: null,
+      released: null,
+      after: opts.waitingPressRef.current,
+      ended: false,
+    };
+    opts.waitingPressRef.current = press;
+    opts.boxRef.current?.setAttribute(PRESS_WAITING_ATTR, "true");
+    opts.rafPausedRef.current = true;
+    let shownFrames = 0;
+    let settledFrames = 0;
+    const since = performance.now();
+    /** Counts this frame toward the shown and settled streaks; returns how many pressed elements remain. */
+    const countFrame = () => {
+      const elements = pressed();
+      const live = opts.iframeRef.current?.contentDocument;
+      const settled = !isPreviewChanging();
+      const shown = settled && elements.every((el) => el.ownerDocument === live);
+      shownFrames = shown ? shownFrames + 1 : 0;
+      settledFrames = settled ? settledFrames + 1 : 0;
+      return elements.length;
+    };
+    const waitStep = (): "wait" | "lost" | "run" => {
+      if (press.after && !press.after.ended) return "wait";
+      const found = countFrame();
+      // A change that never ends (a save with no reply) would hold every press: run on the page shown.
+      const overdue = performance.now() - since > PRESS_WAIT_MAX_MS;
+      if (overdue) giveUpOnPreviewChange();
+      // The waiting outline stays drawn while replay measures the live element separately.
+      if (found === 0 || settledFrames > MAX_SETTLED_WAIT_FRAMES) return "lost";
+      return overdue || shownFrames >= 2 ? "run" : "wait";
+    };
+    const poll = () => {
+      if (press.ended) return;
+      const step = waitStep();
+      if (step === "wait") {
+        press.frame = requestAnimationFrame(poll);
+        return;
+      }
+      endWaitingPress(press);
+      if (step === "lost" || !start(down as unknown as React.PointerEvent<HTMLElement>, at, true))
+        return;
+      if (press.moved) moveActiveGesture(press.moved);
+      if (press.released) releaseActiveGesture(press.released);
+    };
+    press.frame = requestAnimationFrame(poll);
+    return true;
+  };
+
+  const shownSelection = (selection: DomEditSelection) => {
+    const doc = opts.iframeRef.current?.contentDocument;
+    if (!doc) return null;
+    const element = findElementForSelection(doc, selection, opts.activeCompositionPathRef.current);
+    return element && { ...selection, element };
+  };
+  const shownRect = (element: HTMLElement) => {
+    const overlay = opts.overlayRef.current;
+    const iframe = opts.iframeRef.current;
+    return overlay && iframe && orientedGroupAwareOverlayRect(overlay, iframe, element);
+  };
+
+  const startGroupDrag = (e: React.PointerEvent<HTMLElement>) => {
+    const items = opts.groupOverlayItemsRef.current;
+    return startOnShownPreview(
+      e,
+      () =>
+        items.flatMap((item) => {
+          const selection = shownSelection(item.selection);
+          return selection ? [selection.element] : [];
+        }),
+      (pressed, at, waited) => {
+        if (!waited) return _startGroupDrag(pressed, opts, at);
+        const overlay = opts.overlayRef.current;
+        const iframe = opts.iframeRef.current;
+        if (!overlay || !iframe) return false;
+        const scale = computeOverlayRootScale(overlay, iframe, iframe.contentDocument);
+        const measured = items.flatMap((item) => {
+          const selection = shownSelection(item.selection);
+          const rect =
+            selection && orientedGroupAwareOverlayRect(overlay, iframe, selection.element, scale);
+          return selection && rect
+            ? [{ ...item, selection, element: selection.element, rect }]
+            : [];
+        });
+        if (measured.length !== items.length) return false;
+        return _startGroupDrag(
+          pressed,
+          { ...opts, groupOverlayItemsRef: { current: measured } },
+          at,
+        );
+      },
+      (dx, dy) =>
+        opts.setGroupOverlayItems(
+          items.map((item) => ({ ...item, rect: shiftedOverlayRect(item.rect, dx, dy) })),
+        ),
+    );
+  };
+  const startGesture = (
+    kind: GestureKind,
+    e: React.PointerEvent<HTMLElement>,
+    options?: {
+      selection?: DomEditSelection;
+      rect?: OverlayRect | null;
+      resizeHandle?: ResizeHandle;
+    },
+  ) => {
+    // A replay edits what was pressed, though another element may be selected by then.
+    const target = options?.selection ?? opts.selectionRef.current;
+    let draw: WaitingPressState["draw"] = null;
+    if (kind === "drag") draw = drawPressedBox(opts.overlayRectRef.current);
+    if (kind === "resize")
+      draw = drawResizedBox(opts.overlayRectRef.current, { x: e.clientX, y: e.clientY });
+    return startOnShownPreview(
+      e,
+      () => {
+        const shown = target && shownSelection(target);
+        return shown ? [shown.element] : [];
+      },
+      (pressed, at, waited) => {
+        if (!waited) return _startGesture(kind, pressed, opts, { ...options, at });
+        const selection = target && shownSelection(target);
+        const rect = selection && shownRect(selection.element);
+        return (
+          !!(selection && rect) &&
+          _startGesture(kind, pressed, opts, {
+            selection,
+            rect,
+            resizeHandle: options?.resizeHandle,
+            at,
+          })
+        );
+      },
+      draw,
+    );
+  };
+
+  return { startGesture, startGroupDrag, endWaitingPress, endHeldPress, releaseWaitingPress };
+}

package/src/components/editor/previewReadOnly.overlay.test.tsx

@@ -311,7 +311,7 @@ describe("DomEditOverlay with canvasInput host", () => {
     expect(fixture(HOST).overlay.className).toContain("pointer-events-none");
   });
 
-  it("draws no hover box", () => {
+  it("draws the hover box for the selection the host hovers, and none without one", () => {
     layout.hover = RECT;
     const hovered = (props = {}) => {
       const { overlay } = fixture(props);
@@ -321,7 +321,8 @@ describe("DomEditOverlay with canvasInput host", () => {
     };
     const selection = makeSelection("Hover", textElement("hover"));
     expect(hovered({ hoverSelection: selection })).not.toBeNull();
-    expect(hovered({ ...HOST, hoverSelection: selection })).toBeNull();
+    expect(hovered({ ...HOST, hoverSelection: selection })).not.toBeNull();
+    expect(hovered({ ...HOST, hoverSelection: null })).toBeNull();
   });
 
   it("starts no marquee and makes no selection from a press on empty canvas", () => {

package/src/components/editor/propertyPanelFill.tsx

@@ -10,6 +10,7 @@ import {
 } from "./gradientValue";
 import { ReverseGradientIcon } from "../icons/ReverseGradientIcon";
 import { IMAGE_EXT } from "../../utils/mediaTypes";
+import type { DomEditSelection } from "./domEditing";
 import { FIELD, LABEL, RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import {
   DetailField,
@@ -27,9 +28,13 @@ import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 function normalizeProjectPath(value: string): string {
   const trimmed = value.trim();
   const maybeUrl = /^[a-z]+:\/\//i.test(trimmed) ? new URL(trimmed).pathname : trimmed;
-  return decodeURIComponent(maybeUrl)
-    .replace(/\\/g, "/")
-    .replace(/^\.?\//, "");
+  let decodedPath = maybeUrl;
+  try {
+    decodedPath = decodeURIComponent(maybeUrl);
+  } catch (error) {
+    if (!(error instanceof URIError)) throw error;
+  }
+  return decodedPath.replace(/\\/g, "/").replace(/^\.?\//, "");
 }
 
 function toRelativeProjectAssetPath(sourceFile: string, assetPath: string): string {
@@ -75,7 +80,8 @@ function resolveSelectedAsset(
 
 export function ImageFillField({
   projectId,
-  sourceFile,
+  element,
+  onSetHtmlAttribute,
   value,
   assets,
   disabled,
@@ -83,7 +89,8 @@ export function ImageFillField({
   onImportAssets,
 }: {
   projectId: string;
-  sourceFile: string;
+  element: DomEditSelection;
+  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
   value: string;
   assets: string[];
   disabled?: boolean;
@@ -91,15 +98,29 @@ export function ImageFillField({
   onImportAssets?: (files: FileList) => Promise<string[]>;
 }) {
   const track = useTrackDesignInput();
+  const sourceFile = element.sourceFile;
+  const isImage = element.tagName === "img";
+  const imageUrl = isImage ? (element.element.getAttribute("src") ?? "") : value;
+  const commitImage = (next: string, projectAsset = false) => {
+    if (isImage) {
+      if (next)
+        void onSetHtmlAttribute(
+          "src",
+          projectAsset ? toRelativeProjectAssetPath(sourceFile, next) : next,
+        );
+      return;
+    }
+    onCommit(next ? `url("${next}")` : "none");
+  };
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [uploading, setUploading] = useState(false);
   const [uploadError, setUploadError] = useState<string | null>(null);
   const imageAssets = useMemo(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
   const selectedAsset = useMemo(
-    () => resolveSelectedAsset(value, sourceFile, imageAssets),
-    [imageAssets, sourceFile, value],
+    () => resolveSelectedAsset(imageUrl, sourceFile, imageAssets),
+    [imageAssets, sourceFile, imageUrl],
   );
-  const externalUrlValue = selectedAsset ? "" : value;
+  const externalUrlValue = selectedAsset ? "" : imageUrl;
 
   const handleUpload = async (files: FileList | null) => {
     if (!files?.length || !onImportAssets) return;
@@ -110,7 +131,7 @@ export function ImageFillField({
       const nextImage = uploaded.find((a) => IMAGE_EXT.test(a));
       if (nextImage) {
         track("button", "Upload image");
-        onCommit(`url("${toProjectRootAssetPath(nextImage)}")`);
+        commitImage(toProjectRootAssetPath(nextImage), true);
       }
     } catch {
       setUploadError("Upload failed — check the file and try again.");
@@ -174,14 +195,16 @@ export function ImageFillField({
                   const next = e.target.value;
                   track("select", "Project asset");
                   if (!next) {
-                    onCommit("none");
+                    commitImage("");
                     return;
                   }
-                  onCommit(`url("${toProjectRootAssetPath(next)}")`);
+                  commitImage(toProjectRootAssetPath(next), true);
                 }}
                 className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
               >
-                <option value="">None</option>
+                <option value="" disabled={isImage}>
+                  None
+                </option>
                 {imageAssets.map((asset) => (
                   <option key={asset} value={asset}>
                     {asset}
@@ -201,7 +224,7 @@ export function ImageFillField({
         label="External URL"
         value={externalUrlValue}
         disabled={disabled}
-        onCommit={(next) => onCommit(next.trim() ? `url("${next.trim()}")` : "none")}
+        onCommit={(next) => commitImage(next.trim())}
       />
     </div>
   );

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

@@ -63,6 +63,7 @@ function renderSection(
         styles={mergedStyles}
         assets={[]}
         onSetStyle={onSetStyle}
+        onSetHtmlAttribute={vi.fn()}
         gsapBorderRadius={gsapBorderRadius}
       />,
     );
@@ -375,6 +376,7 @@ describe("FlatStyleSection — blur sliders", () => {
           styles={{ filter: "blur(4px)" }}
           assets={[]}
           onSetStyle={onSetStyle}
+          onSetHtmlAttribute={vi.fn()}
           gsapBorderRadius={null}
         />,
       );
@@ -483,6 +485,7 @@ describe("FlatStyleSection — Overflow and Mask", () => {
           styles={{}}
           assets={[]}
           onSetStyle={onSetStyle}
+          onSetHtmlAttribute={vi.fn()}
           gsapBorderRadius={null}
         />,
       );
@@ -593,6 +596,7 @@ describe("FlatStyleSection — Opacity", () => {
           styles={{}}
           assets={[]}
           onSetStyle={onSetStyle}
+          onSetHtmlAttribute={vi.fn()}
           gsapBorderRadius={null}
         />,
       );

package/src/components/editor/propertyPanelFlatStyleSections.tsx

@@ -43,6 +43,7 @@ function FlatFillFields({
   styles,
   assets,
   onSetStyle,
+  onSetHtmlAttribute,
   onPreviewStyle,
   onImportAssets,
 }: {
@@ -51,18 +52,19 @@ function FlatFillFields({
   styles: Record<string, string>;
   assets: string[];
   onSetStyle: (prop: string, value: string) => void | Promise<unknown>;
+  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
   onPreviewStyle?: (prop: string, value: string) => void;
   onImportAssets?: (files: FileList) => Promise<string[]>;
 }) {
   const styleEditingDisabled = !element.capabilities.canEditStyles;
   const backgroundImage = styles["background-image"] ?? "none";
   const hasTextControls = isTextEditableSelection(element);
-  const fillMode =
-    backgroundImage && backgroundImage !== "none"
-      ? backgroundImage.includes("gradient")
-        ? "Gradient"
-        : "Image"
-      : "Solid";
+  let fillMode = "Solid";
+  if (element.tagName === "img") {
+    fillMode = "Image";
+  } else if (backgroundImage && backgroundImage !== "none") {
+    fillMode = backgroundImage.includes("gradient") ? "Gradient" : "Image";
+  }
   const [preferredFillMode, setPreferredFillMode] = useState(fillMode);
   const imageUrl = extractBackgroundImageUrl(backgroundImage);
 
@@ -124,7 +126,8 @@ function FlatFillFields({
       ) : (
         <ImageFillField
           projectId={projectId}
-          sourceFile={element.sourceFile}
+          element={element}
+          onSetHtmlAttribute={onSetHtmlAttribute}
           value={imageUrl}
           assets={assets}
           disabled={styleEditingDisabled}
@@ -456,6 +459,7 @@ export function FlatStyleSection({
   styles,
   assets,
   onSetStyle,
+  onSetHtmlAttribute,
   onPreviewStyle,
   onImportAssets,
   gsapBorderRadius,
@@ -465,6 +469,7 @@ export function FlatStyleSection({
   styles: Record<string, string>;
   assets: string[];
   onSetStyle: (prop: string, value: string) => void | Promise<unknown>;
+  onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
   onPreviewStyle?: (prop: string, value: string) => void;
   onImportAssets?: (files: FileList) => Promise<string[]>;
   gsapBorderRadius?: { tl: number; tr: number; br: number; bl: number } | null;
@@ -478,6 +483,7 @@ export function FlatStyleSection({
         styles={styles}
         assets={assets}
         onSetStyle={onSetStyle}
+        onSetHtmlAttribute={onSetHtmlAttribute}
         onPreviewStyle={onPreviewStyle}
         onImportAssets={onImportAssets}
       />