@hyperframes/studio 0.7.54 → 0.7.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.54",
+  "version": "0.7.55",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.7.54",
-    "@hyperframes/sdk": "0.7.54",
-    "@hyperframes/parsers": "0.7.54",
-    "@hyperframes/studio-server": "0.7.54",
-    "@hyperframes/core": "0.7.54"
+    "@hyperframes/core": "0.7.55",
+    "@hyperframes/player": "0.7.55",
+    "@hyperframes/studio-server": "0.7.55",
+    "@hyperframes/parsers": "0.7.55",
+    "@hyperframes/sdk": "0.7.55"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.54"
+    "@hyperframes/producer": "0.7.55"
   },
   "peerDependencies": {
     "react": "19",

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

@@ -0,0 +1,115 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { installReactActEnvironment, makeSelection } from "../../hooks/domSelectionTestHarness";
+import { CanvasContextMenu } from "./CanvasContextMenu";
+import type { DomEditSelection } from "./domEditing";
+
+installReactActEnvironment();
+
+let host: HTMLDivElement;
+let root: Root | null = null;
+
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+});
+
+function renderMenu(props: {
+  selection: DomEditSelection;
+  onApplyZIndex?: () => void;
+  onDelete?: (selection: DomEditSelection) => void;
+}) {
+  root = createRoot(host);
+  act(() => {
+    root!.render(
+      React.createElement(CanvasContextMenu, {
+        x: 10,
+        y: 10,
+        selection: props.selection,
+        onClose: () => {},
+        onApplyZIndex: props.onApplyZIndex,
+        onDelete: props.onDelete,
+      }),
+    );
+  });
+}
+
+/** All menu buttons live in the portal under document.body. */
+function menuButtons(): HTMLButtonElement[] {
+  return [...document.body.querySelectorAll("button")];
+}
+
+function hasDeleteItem(): boolean {
+  return menuButtons().some((b) => b.textContent?.includes("Delete"));
+}
+
+function zOrderButtons(): HTMLButtonElement[] {
+  return menuButtons().filter((b) => !b.textContent?.includes("Delete"));
+}
+
+describe("CanvasContextMenu — handler gating", () => {
+  it("renders all four z-order items, a divider, and Delete when both handlers are present", () => {
+    const el = document.createElement("div");
+    el.id = "target";
+    document.body.append(el);
+
+    renderMenu({
+      selection: makeSelection("Target", el),
+      onApplyZIndex: vi.fn(),
+      onDelete: vi.fn(),
+    });
+
+    expect(zOrderButtons()).toHaveLength(4);
+    expect(hasDeleteItem()).toBe(true);
+    // The divider only appears between the two groups.
+    expect(document.body.querySelector(".border-t")).not.toBeNull();
+  });
+
+  it("hides every item and does NOT render the menu when no handlers are present", () => {
+    const el = document.createElement("div");
+    el.id = "target";
+    // A z-index that a stray optimistic write would clobber — assert it is
+    // untouched, since the menu must not mutate the DOM without a persist path.
+    el.style.zIndex = "3";
+    document.body.append(el);
+
+    renderMenu({ selection: makeSelection("Target", el) });
+
+    // No menu opened at all — no buttons, no dead-end items, no DOM mutation.
+    expect(menuButtons()).toHaveLength(0);
+    expect(document.body.querySelector(".fixed.z-50")).toBeNull();
+    expect(el.style.zIndex).toBe("3");
+  });
+
+  it("shows only the z-order items (no Delete, no divider) when onDelete is absent", () => {
+    const el = document.createElement("div");
+    el.id = "target";
+    document.body.append(el);
+
+    renderMenu({ selection: makeSelection("Target", el), onApplyZIndex: vi.fn() });
+
+    expect(zOrderButtons()).toHaveLength(4);
+    expect(hasDeleteItem()).toBe(false);
+    expect(document.body.querySelector(".border-t")).toBeNull();
+  });
+
+  it("shows only Delete (no z-order items, no divider) when onApplyZIndex is absent", () => {
+    const el = document.createElement("div");
+    el.id = "target";
+    document.body.append(el);
+
+    renderMenu({ selection: makeSelection("Target", el), onDelete: vi.fn() });
+
+    expect(zOrderButtons()).toHaveLength(0);
+    expect(hasDeleteItem()).toBe(true);
+    expect(document.body.querySelector(".border-t")).toBeNull();
+  });
+});

package/src/components/editor/CanvasContextMenu.tsx

@@ -0,0 +1,198 @@
+/**
+ * Right-click context menu for a selected canvas element.
+ *
+ * Mirrors the look, positioning, and dismiss behavior of
+ * player/components/ClipContextMenu.tsx — portaled to document.body,
+ * overflow-adjusted, dismissed on outside-click or Escape via
+ * useContextMenuDismiss.
+ *
+ * ── Wiring (z-order persistence) ─────────────────────────────────────────────
+ * Z-index changes are applied optimistically to the live iframe element(s) via
+ * `resolveZOrderChange`, which returns a MULTI-element patch list (tie-aware:
+ * moving a target past an equal-z sibling can require renumbering the affected
+ * set). The patches are surfaced through the `onApplyZIndex` prop.
+ *
+ * The prop MUST be wired at the call site to route through the full persist
+ * path. PreviewOverlays.tsx builds the per-patch PatchTargets (the selected
+ * element carries its full selection identity; sibling elements are iframe DOM
+ * nodes, so their id / selector are derived from the node and they share the
+ * selection's sourceFile) and forwards them to handleDomZIndexReorderCommit.
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+import { memo } from "react";
+import { createPortal } from "react-dom";
+import type { DomEditSelection } from "./domEditing";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
+import {
+  isZOrderActionEnabled,
+  resolveZOrderChange,
+  type ZOrderPatch,
+} from "./canvasContextMenuZOrder";
+
+interface CanvasContextMenuProps {
+  /** Viewport x of the right-click event. */
+  x: number;
+  /** Viewport y of the right-click event. */
+  y: number;
+  selection: DomEditSelection;
+  onClose: () => void;
+  /**
+   * Called with the resolved z-order patch list after an optimistic DOM update.
+   * Each patch is an { element, zIndex } pair (the target and, when a renumber
+   * is needed, affected siblings). Wire to handleDomZIndexReorderCommit (see
+   * module-level wiring comment).
+   */
+  onApplyZIndex?: (patches: ZOrderPatch[]) => void;
+  /**
+   * Delete the selected element. Wire to handleDomEditElementDelete from
+   * useDomEditActionsContext — same path as the Delete/Backspace hotkey.
+   * Absent when the caller wires no delete persist path (e.g. a legacy mount):
+   * the Delete item is then hidden rather than shown as a silent no-op.
+   */
+  onDelete?: (selection: DomEditSelection) => void;
+}
+
+type ZAction = "bring-forward" | "send-backward" | "bring-to-front" | "send-to-back";
+
+const Z_ACTIONS: Array<{ action: ZAction; label: string }> = [
+  { action: "bring-forward", label: "Bring forward" },
+  { action: "send-backward", label: "Send backward" },
+  { action: "bring-to-front", label: "Bring to front" },
+  { action: "send-to-back", label: "Send to back" },
+];
+
+export const CanvasContextMenu = memo(function CanvasContextMenu({
+  x,
+  y,
+  selection,
+  onClose,
+  onApplyZIndex,
+  onDelete,
+}: CanvasContextMenuProps) {
+  const menuRef = useContextMenuDismiss(onClose);
+
+  // Gate each item group on the presence of its persist handler. Without the
+  // handler the action can't be persisted, so showing it would be a dead-end:
+  // a z-write reverts on reload and Delete silently no-ops. Hide the group
+  // instead. If nothing is actionable (a legacy mount with no handlers at all),
+  // don't render the menu — an empty menu is itself a dead-end.
+  const hasZActions = Boolean(onApplyZIndex);
+  const hasDelete = Boolean(onDelete);
+  const hasDivider = hasZActions && hasDelete;
+
+  // Overflow correction — match ClipContextMenu approach. Only the rendered
+  // groups contribute height (keeps positioning correct when a group is hidden).
+  const menuWidth = 200;
+  const menuHeight =
+    8 + (hasZActions ? Z_ACTIONS.length * 28 : 0) + (hasDivider ? 1 : 0) + (hasDelete ? 28 : 0) + 8; // padding + items + divider + delete + padding
+  const overflowY = y + menuHeight - window.innerHeight;
+  const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
+  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
+
+  const el = selection.element;
+
+  function handleZAction(action: ZAction) {
+    // No persist handler → do NOT touch the live iframe DOM. An optimistic
+    // write with nothing to persist just reverts on the next reload.
+    if (!onApplyZIndex) return;
+    const patches = resolveZOrderChange(el, action);
+    if (patches === null) return;
+    // Optimistic update — visible immediately even before persist completes.
+    for (const patch of patches) {
+      patch.element.style.zIndex = String(patch.zIndex);
+      const view = patch.element.ownerDocument?.defaultView;
+      if (view && view.getComputedStyle(patch.element).position === "static") {
+        patch.element.style.position = "relative";
+      }
+    }
+    onApplyZIndex(patches);
+    onClose();
+  }
+
+  function handleDelete() {
+    if (!onDelete) return;
+    onDelete(selection);
+    onClose();
+  }
+
+  if (!hasZActions && !hasDelete) return null;
+
+  // The menu is portaled to document.body, but in the React tree it is still a
+  // child of the DomEditOverlay <div>. React synthetic events bubble through the
+  // REACT tree (not the DOM tree), so a click on any menu control would otherwise
+  // bubble into the overlay's onPointerDown / onMouseDown handlers — which
+  // preventDefault() to start a marquee and re-resolve the selection. That
+  // preventDefault cancels the button's own click and the item action never runs.
+  //
+  // Stop pointer/mouse propagation at the menu root so overlay gesture handlers
+  // never see these events, and drive the item actions on pointerDown (which
+  // fires before any outside-click / dismiss logic can unmount the menu).
+  const stopBubble = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+  };
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      style={{ left: adjustedX, top: adjustedY }}
+      onPointerDown={stopBubble}
+      onMouseDown={stopBubble}
+      onClick={stopBubble}
+      onContextMenu={(e) => {
+        // Keep a right-click on the menu itself from re-opening / bubbling.
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      {hasZActions &&
+        Z_ACTIONS.map(({ action, label }) => {
+          const enabled = isZOrderActionEnabled(el, action);
+          return (
+            <button
+              key={action}
+              type="button"
+              className={`w-full flex items-center px-3 py-1.5 text-xs text-left ${
+                enabled
+                  ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer"
+                  : "text-neutral-600 cursor-not-allowed"
+              }`}
+              disabled={!enabled}
+              // Act on pointerDown, not click: a pointerDown that reaches the
+              // overlay/document would otherwise re-select or dismiss the menu
+              // before the trailing click fires. Running here guarantees the
+              // action lands. Guard `button === 0` so a right-press is ignored.
+              onPointerDown={(e) => {
+                if (e.button !== 0) return;
+                e.preventDefault();
+                e.stopPropagation();
+                if (enabled) handleZAction(action);
+              }}
+            >
+              {label}
+            </button>
+          );
+        })}
+
+      {hasDivider && <div className="my-1 border-t border-neutral-700/60" />}
+
+      {hasDelete && (
+        <button
+          type="button"
+          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
+          onPointerDown={(e) => {
+            if (e.button !== 0) return;
+            e.preventDefault();
+            e.stopPropagation();
+            handleDelete();
+          }}
+        >
+          <span>Delete</span>
+          <span className="text-neutral-500 text-[10px] ml-3">⌫</span>
+        </button>
+      )}
+    </div>,
+    document.body,
+  );
+});

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

@@ -0,0 +1,112 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  applyStudioBoxSize,
+  applyStudioPathOffset,
+  readStudioBoxSize,
+  reapplyPositionEditsAfterSeek,
+} from "./manualEditsDom";
+import { buildBoxSizePatches, buildPathOffsetPatches } from "./manualEditsDomPatches";
+import { createManualOffsetDragMember, applyManualOffsetDragCommit } from "./manualOffsetDrag";
+import type { PatchOperation } from "../../utils/sourcePatcher";
+import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
+
+/**
+ * Center-anchored corner resize (CapCut model): the element scales about its
+ * CENTER, which must stay planted across the whole gesture — including after
+ * release, on every corner and at any rotation.
+ *
+ * This file lands here with ONLY the persist round-trip test, which exercises the
+ * real apply → persist → reload symbols that already exist at this point in the
+ * stack. The two center-anchor CONVERGENCE tests (the release-shift root cause)
+ * drive the exported `computeNextResizeAnchor` accumulator, which is extracted from
+ * the resize pointermove branch of `useDomEditOverlayGestures.ts`. That gesture code
+ * lands later in the stack (with the canvas glue swap), so those two tests are added
+ * to this file at that point — importing the real production helper rather than a
+ * test-local copy, so they can never pass against a stand-in that drifts from the
+ * shipped math.
+ */
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+/** Apply a built PatchOperation[] to a live element, mirroring sourcePatcher's
+ * inline-style / attribute application — i.e. what the persisted source carries
+ * when it is re-parsed into the DOM on the next preview load. */
+function applyPatchesToElement(el: HTMLElement, ops: PatchOperation[]): void {
+  for (const op of ops) {
+    if (op.type === "inline-style") {
+      if (op.value === null) el.style.removeProperty(op.property);
+      else el.style.setProperty(op.property, op.value);
+    } else if (op.type === "attribute") {
+      if (op.value === null) el.removeAttribute(op.property);
+      else el.setAttribute(op.property, op.value);
+    }
+  }
+}
+
+/** Net translate applied to an element, resolving the studio offset var()
+ * expression to its px value so we compare the actually-rendered translation. */
+function resolvedTranslatePx(el: HTMLElement): { x: number; y: number } {
+  const raw = el.style.getPropertyValue("translate").trim();
+  if (!raw || raw === "none") return { x: 0, y: 0 };
+  const vx = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-x")) || 0;
+  const vy = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-y")) || 0;
+  const parts = splitTopLevelWhitespace(raw);
+  const parseAxis = (part: string, varVal: number): number => {
+    if (part && part.includes("--hf-studio-offset")) return varVal;
+    const n = Number.parseFloat(part);
+    return Number.isFinite(n) ? n : 0;
+  };
+  return {
+    x: parseAxis(parts[0] ?? "", vx),
+    y: parseAxis(parts[1] ?? "", vy),
+  };
+}
+
+describe("center-anchored corner resize — no shift after release", () => {
+  it("net translate after persist+reload equals the committed anchor offset (non-GSAP)", () => {
+    // The committed offset flows through the real apply → persist → reload chain
+    // unchanged (this hop was proved clean; the shift is upstream in the anchor
+    // loop, tested with the gesture code, not in persistence).
+    const el = document.createElement("div");
+    el.style.setProperty("width", "200px");
+    el.style.setProperty("height", "100px");
+    document.body.appendChild(el);
+
+    const anchorDx = -30;
+    const anchorDy = -18;
+    const finalSize = { width: 240, height: 130 };
+
+    applyStudioBoxSize(el, finalSize);
+    const memberResult = createManualOffsetDragMember({
+      key: "k",
+      selection: { element: el } as never,
+      element: el,
+      rect: { left: 0, top: 0, width: 240, height: 130, editScaleX: 1, editScaleY: 1 },
+    });
+    expect(memberResult.ok).toBe(true);
+    if (!memberResult.ok) return;
+
+    const finalOffset = applyManualOffsetDragCommit(memberResult.member, anchorDx, anchorDy);
+
+    applyStudioBoxSize(el, finalSize);
+    const patches = buildBoxSizePatches(el);
+    applyStudioPathOffset(el, finalOffset);
+    patches.push(...buildPathOffsetPatches(el));
+
+    expect(resolvedTranslatePx(el)).toEqual({ x: anchorDx, y: anchorDy });
+
+    // Persist → fresh element re-parsed from source → reload re-stamp.
+    const reloaded = document.createElement("div");
+    reloaded.style.setProperty("width", "200px");
+    reloaded.style.setProperty("height", "100px");
+    document.body.appendChild(reloaded);
+    applyPatchesToElement(reloaded, patches);
+    reapplyPositionEditsAfterSeek(reloaded.ownerDocument);
+
+    expect(resolvedTranslatePx(reloaded)).toEqual({ x: anchorDx, y: anchorDy });
+    expect(readStudioBoxSize(reloaded)).toEqual(finalSize);
+  });
+});