@hyperframes/studio 0.7.28 → 0.7.30

package/package.json

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

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

@@ -345,6 +345,101 @@ describe("DomEditOverlay", () => {
     Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
     host.remove();
   });
+
+  it("passes the tracked hover selection when clicking the existing selection box", async () => {
+    const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+    Element.prototype.getBoundingClientRect = function (): DOMRect {
+      return {
+        left: 0,
+        top: 0,
+        right: 800,
+        bottom: 450,
+        width: 800,
+        height: 450,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      };
+    };
+
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const selection: DomEditSelection = {
+      element: document.createElement("div"),
+      id: "hero-title",
+      selector: ".hero-title",
+      selectorIndex: 0,
+      sourceFile: "index.html",
+      tagName: "div",
+      label: "Hero Title",
+      textContent: "Hello",
+      textFields: [],
+      capabilities: {
+        canEditText: true,
+        canEditLayout: true,
+        canMove: false,
+        canApplyManualOffset: false,
+        canApplyManualSize: false,
+        canApplyManualRotation: false,
+        canAdjustOpacity: true,
+        canAdjustFill: true,
+        canAdjustBorderRadius: true,
+        canAdjustStroke: true,
+        canAdjustShadow: true,
+        canAdjustZIndex: true,
+      },
+      computedStyle: {
+        display: "block",
+        position: "absolute",
+      },
+    };
+    const hoverSelection: DomEditSelection = { ...selection, id: "hovered-sibling" };
+    const onCanvasMouseDown = vi.fn();
+    const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
+
+    function Harness() {
+      return React.createElement(DomEditOverlay, {
+        ...createOverlayProps({
+          iframeRef,
+          selection,
+          hoverSelection,
+          onSelectionChange: () => {},
+        }),
+        onCanvasMouseDown,
+      });
+    }
+
+    act(() => {
+      root.render(React.createElement(Harness));
+    });
+
+    await act(async () => {
+      await new Promise<void>((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      });
+    });
+
+    const selectionBox = host.querySelector(
+      '[data-dom-edit-selection-box="true"]',
+    ) as HTMLDivElement;
+    expect(selectionBox).toBeTruthy();
+
+    act(() => {
+      selectionBox.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(onCanvasMouseDown).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ hoverSelection }),
+    );
+
+    act(() => {
+      root.unmount();
+    });
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    host.remove();
+  });
 });
 
 describe("resolveDomEditCoordinateScale", () => {

package/src/components/editor/DomEditOverlay.tsx

@@ -1,6 +1,7 @@
 import { memo, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { type DomEditSelection } from "./domEditing";
+import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction";
 import { useMarqueeGestures } from "./marqueeCommit";
 import { MarqueeOverlay } from "./MarqueeOverlay";
 import { groupAwareOverlayRect, resolveDomEditGroupOverlayRect } from "./domEditOverlayGeometry";
@@ -44,7 +45,7 @@ interface DomEditOverlayProps {
   allowCanvasMovement?: boolean;
   onCanvasMouseDown: (
     event: React.MouseEvent<HTMLDivElement>,
-    options?: { preferClipAncestor?: boolean },
+    options?: PreviewMouseDownOptions,
   ) => void;
   onCanvasPointerMove: (
     event: React.PointerEvent<HTMLDivElement>,
@@ -277,6 +278,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     iframeRef,
     boxRef,
     selectionRef,
+    hoverSelectionRef,
     overlayRectRef,
     groupOverlayItemsRef,
     gestureRef,
@@ -336,7 +338,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     // Allow clicks anywhere on the overlay — GSAP-translated elements can
     // extend beyond the composition rect into the gray zone, and users need
     // to select/deselect them by clicking there.
-    onCanvasMouseDown(event, { preferClipAncestor: false });
+    onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
     if (event.shiftKey) {
       suppressNextBoxMouseDownRef.current = true;
       suppressNextBoxClickRef.current = true;
@@ -401,7 +403,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       event.stopPropagation();
       return;
     }
-    onCanvasMouseDown(event, { preferClipAncestor: false });
+    onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
   };
 
   const suppressBoxMouseDown = (e: React.MouseEvent) => {

package/src/components/editor/domEditOverlayGestures.ts

@@ -9,6 +9,7 @@ import type { ManualOffsetDragMember } from "./manualOffsetDrag";
 import type { GroupOverlayItem, OverlayRect } from "./domEditOverlayGeometry";
 import type { SnapContext } from "./snapTargetCollection";
 import type { SnapGuidesState } from "./SnapGuideOverlay";
+import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction";
 
 export type GestureKind = "drag" | "resize" | "rotate";
 
@@ -161,6 +162,7 @@ export type UseDomEditOverlayGesturesOptions = {
   iframeRef: RefObject<HTMLIFrameElement | null>;
   boxRef: RefObject<HTMLDivElement | null>;
   selectionRef: RefObject<DomEditSelection | null>;
+  hoverSelectionRef: RefObject<DomEditSelection | null>;
   overlayRectRef: RefObject<OverlayRect | null>;
   groupOverlayItemsRef: RefObject<GroupOverlayItem[]>;
   gestureRef: RefObject<GestureState | null>;
@@ -194,9 +196,6 @@ export type UseDomEditOverlayGesturesOptions = {
       o?: { preferClipAncestor?: boolean },
     ) => Promise<DomEditSelection | null>
   >;
-  onCanvasMouseDown: (
-    e: React.MouseEvent<HTMLDivElement>,
-    o?: { preferClipAncestor?: boolean },
-  ) => void;
+  onCanvasMouseDown: (e: React.MouseEvent<HTMLDivElement>, o?: PreviewMouseDownOptions) => void;
   snapGuidesRef: RefObject<SnapGuidesState | null>;
 };

package/src/components/editor/domEditing.ts

@@ -31,6 +31,7 @@ export {
   buildDomEditTextPatchOperation,
   collectDomEditLayerItems,
   countDomEditChildLayers,
+  buildTextFieldChildLocator,
   getDomEditLayerKey,
   getDomEditNonEditableReason,
   getDomEditTargetKey,

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

@@ -4,11 +4,27 @@ import {
   collectDomEditLayerItems,
   resolveDomEditSelection,
   buildDomEditPatchTarget,
+  buildTextFieldChildLocator,
   readHfId,
 } from "./domEditingLayers";
+import type { DomEditTextField } from "./domEditingTypes";
 
 const opts = { activeCompositionPath: "index.html", isMasterView: true, skipSourceProbe: true };
 
+function textField(overrides: Partial<DomEditTextField> = {}): DomEditTextField {
+  return {
+    key: "child:0:span",
+    label: "Text 1",
+    value: "Hello",
+    tagName: "span",
+    attributes: [],
+    inlineStyles: {},
+    computedStyles: {},
+    source: "child",
+    ...overrides,
+  };
+}
+
 describe("buildDomEditPatchTarget", () => {
   it("includes hfId when selection has hfId", () => {
     const target = buildDomEditPatchTarget({
@@ -172,3 +188,39 @@ describe("resolveDomEditSelection — data-hf-group capture", () => {
     expect(selection?.id).toBe("outside");
   });
 });
+
+describe("buildTextFieldChildLocator", () => {
+  it("locates a child field using its DOM-derived sourceChildIndex", () => {
+    const fields = [textField({ key: "child:0:span", sourceChildIndex: 0 })];
+
+    expect(buildTextFieldChildLocator(fields, "child:0:span")).toEqual({
+      childSelector: ":scope > span",
+      childIndex: 0,
+    });
+  });
+
+  it("fails closed for a synthetic child field with no sourceChildIndex", () => {
+    // A field built by buildDefaultDomEditTextField (e.g. "add text field")
+    // has never been read back from the live DOM, so its true position among
+    // same-tag siblings is unknown. Guessing it by counting same-tag "child"
+    // fields elsewhere in the array can silently point at the wrong element.
+    const fields = [
+      textField({ key: "child:0:span", sourceChildIndex: 0 }),
+      textField({ key: "child:new:1", tagName: "span" }),
+    ];
+
+    expect(buildTextFieldChildLocator(fields, "child:new:1")).toBeNull();
+  });
+
+  it("returns null for a self-sourced field", () => {
+    const fields = [textField({ key: "self:0:div", source: "self", sourceChildIndex: 0 })];
+
+    expect(buildTextFieldChildLocator(fields, "self:0:div")).toBeNull();
+  });
+
+  it("returns null for an unknown field key", () => {
+    const fields = [textField({ key: "child:0:span", sourceChildIndex: 0 })];
+
+    expect(buildTextFieldChildLocator(fields, "missing")).toBeNull();
+  });
+});

package/src/components/editor/domEditingLayers.ts

@@ -1,7 +1,3 @@
-/**
- * Layer items, text fields, capabilities, selection resolution, and patch operations
- * for dom editing.
- */
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import {
   resolveEditingAffordances,
@@ -36,12 +32,20 @@ import {
 } from "./domEditingElement";
 import { isCompositionRootLayer } from "./domEditingRootLayer";
 
-// ─── Text fields ────────────────────────────────────────────────────────────
-
 export function isEditableTextLeaf(el: HTMLElement): boolean {
   return isTextBearingTag(el.tagName.toLowerCase()) && el.children.length === 0;
 }
 
+function sameTagChildIndex(el: HTMLElement): number {
+  let index = 0;
+  let sibling = el.previousElementSibling;
+  while (sibling) {
+    if (sibling.tagName === el.tagName) index += 1;
+    sibling = sibling.previousElementSibling;
+  }
+  return index;
+}
+
 function getTextFieldLabel(
   _tagName: string,
   index: number,
@@ -57,6 +61,7 @@ function buildTextField(
   index: number,
   total: number,
   source: "self" | "child",
+  sourceChildIndex?: number,
 ): DomEditTextField {
   const tagName = el.tagName.toLowerCase();
   const key = el.getAttribute("data-hf-text-key") ?? `${source}:${index}:${tagName}`;
@@ -74,6 +79,7 @@ function buildTextField(
     inlineStyles: getInlineStyles(el),
     computedStyles: getCuratedComputedStyles(el),
     source,
+    ...(sourceChildIndex == null ? {} : { sourceChildIndex }),
   };
 }
 
@@ -105,7 +111,9 @@ export function collectDomEditTextFields(el: HTMLElement): DomEditTextField[] {
           });
           childIdx++;
         } else if (isHtmlElement(node) && isEditableTextLeaf(node)) {
-          fields.push(buildTextField(node, childIdx, childElements.length, "child"));
+          fields.push(
+            buildTextField(node, childIdx, childElements.length, "child", sameTagChildIndex(node)),
+          );
           childIdx++;
         }
       }
@@ -113,7 +121,7 @@ export function collectDomEditTextFields(el: HTMLElement): DomEditTextField[] {
     }
 
     return childElements.map((child, index) =>
-      buildTextField(child, index, childElements.length, "child"),
+      buildTextField(child, index, childElements.length, "child", sameTagChildIndex(child)),
     );
   }
 
@@ -172,14 +180,30 @@ export function buildDefaultDomEditTextField(base?: Partial<DomEditTextField>):
   };
 }
 
-// ─── Capabilities ────────────────────────────────────────────────────────────
+export interface DomEditChildLocator {
+  childSelector: string;
+  childIndex: number;
+}
+
+export function buildTextFieldChildLocator(
+  fields: DomEditTextField[],
+  fieldKey: string,
+): DomEditChildLocator | null {
+  const field = fields.find((candidate) => candidate.key === fieldKey);
+  if (!field || field.source !== "child") return null;
+  // sourceChildIndex is only absent for a synthetic field that was never read
+  // back from the live DOM (e.g. one built by buildDefaultDomEditTextField).
+  // Guessing its position by counting same-tag "child" fields elsewhere in
+  // the array is unreliable and can silently locate the wrong element — fail
+  // closed instead so the caller falls back to the unsupported-structure path.
+  if (field.sourceChildIndex == null) return null;
+
+  return {
+    childSelector: `:scope > ${field.tagName}`,
+    childIndex: field.sourceChildIndex,
+  };
+}
 
-/**
- * Build the geometry/capability half of EditableElementFacts. Section inputs
- * (text/timing/animation) are irrelevant to capability resolution, so they are
- * zeroed here. Shared by the wrapper and the live-selection path so the two
- * fact-construction sites can't disagree.
- */
 function capabilityFacts(geometry: {
   hasStableTarget: boolean;
   tag: string;
@@ -276,8 +300,11 @@ async function probeSourceElement(
       },
     );
     if (!response.ok) return true;
-    const data = (await response.json()) as { exists?: boolean };
-    return data.exists !== false;
+    const data = await response.json();
+    if (data && typeof data === "object" && "exists" in data && data.exists === false) {
+      return false;
+    }
+    return true;
   } catch {
     return true;
   }
@@ -475,19 +502,28 @@ export function collectDomEditLayerItems(
 
 // ─── Patch operations ────────────────────────────────────────────────────────
 
-export function buildDomEditStylePatchOperation(property: string, value: string): PatchOperation {
+export function buildDomEditStylePatchOperation(
+  property: string,
+  value: string | null,
+  childLocator?: DomEditChildLocator,
+): PatchOperation {
   return {
     type: "inline-style",
     property,
     value,
+    ...childLocator,
   };
 }
 
-export function buildDomEditTextPatchOperation(value: string): PatchOperation {
+export function buildDomEditTextPatchOperation(
+  value: string,
+  childLocator?: DomEditChildLocator,
+): PatchOperation {
   return {
     type: "text-content",
     property: "text",
     value,
+    ...childLocator,
   };
 }
 

package/src/components/editor/domEditingTypes.ts

@@ -69,6 +69,7 @@ export interface DomEditTextField {
   inlineStyles: Record<string, string>;
   computedStyles: Record<string, string>;
   source: "self" | "child" | "text-node";
+  sourceChildIndex?: number;
 }
 
 export interface DomEditSelection extends PatchTarget {