@hyperframes/studio 0.5.0-alpha.13 → 0.5.0-alpha.15

package/src/components/editor/PropertyPanel.tsx

@@ -38,6 +38,7 @@ import {
   type GradientModel,
 } from "./gradientValue";
 import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
+import { readStudioBoxSize, readStudioPathOffset } from "./manualEdits";
 import {
   COMMON_LOCAL_FONT_FAMILIES,
   googleFontStylesheetUrl,
@@ -54,17 +55,17 @@ interface PropertyPanelProps {
   copiedAgentPrompt: boolean;
   onClearSelection: () => void;
   onSetStyle: (prop: string, value: string) => void;
+  onSetManualOffset: (element: DomEditSelection, next: { x: number; y: number }) => void;
+  onSetManualSize: (element: DomEditSelection, next: { width: number; height: number }) => void;
   onSetText: (value: string, fieldKey?: string) => void;
   onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
   onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
   onRemoveTextField: (fieldKey: string) => void;
-  onDetachFromLayout: () => void;
+  onResetManualEdits: (element: DomEditSelection) => void;
   onAskAgent: () => void;
-  onCopyAgentInstruction: (instruction: string) => void | Promise<void>;
   onImportAssets?: (files: FileList) => Promise<string[]>;
   fontAssets?: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
-  allowLayoutDetach?: boolean;
 }
 
 const FIELD =
@@ -117,17 +118,6 @@ interface FontOption {
 
 const COLOR_PICKER_SIZE = { width: 292, height: 386 };
 
-function buildMakeMovableAgentInstruction(reason: string): string {
-  return [
-    "Make this selected HyperFrames element movable in Studio.",
-    `Studio blocked direct move/resize because: ${reason}`,
-    "Refactor only this element safely.",
-    "Preserve its current visual position, timing, and sibling layout intent where possible.",
-    "If it is transform-driven, replace transform-based positioning with absolute pixel geometry.",
-    "If layout flow owns it, detach conservatively with position: absolute, px left/top/width/height, and margin: 0.",
-  ].join(" ");
-}
-
 function colorFromCss(value: string): ParsedColor {
   return parseCssColor(value) ?? { red: 0, green: 0, blue: 0, alpha: 1 };
 }
@@ -184,6 +174,17 @@ function parseNumericToken(value: string | undefined): ParsedNumericToken | null
   };
 }
 
+function parsePxMetricValue(value: string): number | null {
+  const token = parseNumericToken(value);
+  if (!token) return null;
+  if (token.unit && token.unit.toLowerCase() !== "px") return null;
+  return token.value;
+}
+
+function formatPxMetricValue(value: number): string {
+  return `${formatNumericValue(value)}px`;
+}
+
 function adjustNumericToken(
   value: string,
   direction: 1 | -1,
@@ -1975,17 +1976,17 @@ export const PropertyPanel = memo(function PropertyPanel({
   copiedAgentPrompt,
   onClearSelection,
   onSetStyle,
+  onSetManualOffset,
+  onSetManualSize,
   onSetText,
   onSetTextFieldStyle,
   onAddTextField,
   onRemoveTextField,
-  onDetachFromLayout,
+  onResetManualEdits,
   onAskAgent,
-  onCopyAgentInstruction,
   onImportAssets,
   fontAssets = [],
   onImportFonts,
-  allowLayoutDetach = true,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
   const selectionColors = useMemo(() => collectSelectionColors(styles), [styles]);
@@ -2021,28 +2022,60 @@ export const PropertyPanel = memo(function PropertyPanel({
         <Eye size={18} className="mb-3 text-neutral-600" />
         <p className="text-sm font-medium text-neutral-200">Select an element in the preview.</p>
         <p className="mt-2 max-w-[260px] text-xs leading-5 text-neutral-500">
-          The inspector is tuned for direct DOM edits with safer geometry controls, color picking,
-          and cleaner grouped layer controls.
+          The inspector is tuned for element edits with safer geometry controls, color picking, and
+          cleaner grouped layer controls.
         </p>
       </div>
     );
   }
 
   const styleEditingDisabled = !element.capabilities.canEditStyles;
-  const moveEditingDisabled = !element.capabilities.canMove;
-  const resizeEditingDisabled = !element.capabilities.canResize;
+  const manualOffsetEditingDisabled = !element.capabilities.canApplyManualOffset;
+  const manualSizeEditingDisabled = !element.capabilities.canApplyManualSize;
   const isFlex = styles.display === "flex" || styles.display === "inline-flex";
   const radiusValue = parseNumericValue(styles["border-radius"]) ?? 0;
   const opacityValue = Math.round((parseNumericValue(styles.opacity) ?? 1) * 100);
   const clipContent = ["hidden", "clip"].includes((styles.overflow ?? "").trim());
   const sourceLabel = element.id ? `#${element.id}` : element.selector;
   const showEditableSections = element.capabilities.canEditStyles;
-  const disabledMoveReason =
-    allowLayoutDetach &&
-    element.capabilities.reasonIfDisabled &&
-    !element.capabilities.canDetachFromLayout
-      ? element.capabilities.reasonIfDisabled
-      : null;
+  const manualOffset = readStudioPathOffset(element.element);
+  const manualSize = readStudioBoxSize(element.element);
+  const resolvedWidth =
+    manualSize.width > 0
+      ? manualSize.width
+      : (parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width);
+  const resolvedHeight =
+    manualSize.height > 0
+      ? manualSize.height
+      : (parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height);
+
+  const commitManualOffset = (axis: "x" | "y", nextValue: string) => {
+    const parsed = parsePxMetricValue(nextValue);
+    if (parsed == null) return;
+    const current = readStudioPathOffset(element.element);
+    onSetManualOffset(element, {
+      x: axis === "x" ? parsed : current.x,
+      y: axis === "y" ? parsed : current.y,
+    });
+  };
+
+  const commitManualSize = (axis: "width" | "height", nextValue: string) => {
+    const parsed = parsePxMetricValue(nextValue);
+    if (parsed == null || parsed <= 0) return;
+    const current = readStudioBoxSize(element.element);
+    const width =
+      current.width > 0
+        ? current.width
+        : (parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width);
+    const height =
+      current.height > 0
+        ? current.height
+        : (parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height);
+    onSetManualSize(element, {
+      width: axis === "width" ? parsed : width,
+      height: axis === "height" ? parsed : height,
+    });
+  };
 
   const handleFillModeChange = (nextMode: string) => {
     setPreferredFillMode(nextMode);
@@ -2078,14 +2111,25 @@ export const PropertyPanel = memo(function PropertyPanel({
             <X size={13} />
           </button>
         </div>
-        <button
-          type="button"
-          onClick={onAskAgent}
-          className="mt-4 inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-700 bg-neutral-950 px-3.5 text-[11px] font-medium text-neutral-100 transition-colors hover:border-studio-accent/40 hover:text-studio-accent"
-        >
-          <MessageSquare size={15} />
-          <span>{copiedAgentPrompt ? "Prompt copied" : "Ask agent"}</span>
-        </button>
+        <div className="mt-4 flex min-w-0 flex-wrap items-center gap-2">
+          <button
+            type="button"
+            onClick={onAskAgent}
+            className="inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-700 bg-neutral-950 px-3.5 text-[11px] font-medium text-neutral-100 transition-colors hover:border-studio-accent/40 hover:text-studio-accent"
+          >
+            <MessageSquare size={15} />
+            <span>{copiedAgentPrompt ? "Prompt copied" : "Ask agent"}</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => onResetManualEdits(element)}
+            title="Reset move, size, and rotation edits"
+            className="inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-700 bg-neutral-950 px-3.5 text-[11px] font-medium text-neutral-100 transition-colors hover:border-neutral-500 hover:text-white"
+          >
+            <RotateCcw size={14} />
+            <span>Reset edits</span>
+          </button>
+        </div>
       </div>
 
       <div className="flex-1 overflow-y-auto">
@@ -2093,65 +2137,29 @@ export const PropertyPanel = memo(function PropertyPanel({
           <div className={RESPONSIVE_GRID}>
             <MetricField
               label="X"
-              value={styles.left ?? "auto"}
-              disabled={moveEditingDisabled}
-              onCommit={(next) => onSetStyle("left", next)}
+              value={formatPxMetricValue(manualOffset.x)}
+              disabled={manualOffsetEditingDisabled}
+              onCommit={(next) => commitManualOffset("x", next)}
             />
             <MetricField
               label="Y"
-              value={styles.top ?? "auto"}
-              disabled={moveEditingDisabled}
-              onCommit={(next) => onSetStyle("top", next)}
+              value={formatPxMetricValue(manualOffset.y)}
+              disabled={manualOffsetEditingDisabled}
+              onCommit={(next) => commitManualOffset("y", next)}
             />
             <MetricField
               label="W"
-              value={styles.width ?? "auto"}
-              disabled={resizeEditingDisabled}
-              onCommit={(next) => onSetStyle("width", next)}
+              value={formatPxMetricValue(resolvedWidth)}
+              disabled={manualSizeEditingDisabled}
+              onCommit={(next) => commitManualSize("width", next)}
             />
             <MetricField
               label="H"
-              value={styles.height ?? "auto"}
-              disabled={resizeEditingDisabled}
-              onCommit={(next) => onSetStyle("height", next)}
+              value={formatPxMetricValue(resolvedHeight)}
+              disabled={manualSizeEditingDisabled}
+              onCommit={(next) => commitManualSize("height", next)}
             />
           </div>
-          {disabledMoveReason && (
-            <div className="mt-4 flex min-w-0 flex-wrap items-center justify-between gap-3 border-l border-amber-500/40 pl-3">
-              <div className="min-w-0 text-[11px] leading-5 text-neutral-400">
-                <div className="font-medium text-amber-100">{disabledMoveReason}</div>
-                <div>Copy a targeted prompt so an agent can refactor this layer safely.</div>
-              </div>
-              <button
-                type="button"
-                onClick={() => {
-                  void Promise.resolve(
-                    onCopyAgentInstruction(buildMakeMovableAgentInstruction(disabledMoveReason)),
-                  );
-                }}
-                className="inline-flex h-8 flex-shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-3 text-[11px] font-medium text-neutral-100 transition-colors hover:border-amber-400/70 hover:text-amber-100"
-              >
-                {copiedAgentPrompt ? "Prompt copied" : "Ask agent to make movable"}
-              </button>
-            </div>
-          )}
-          {allowLayoutDetach && element.capabilities.canDetachFromLayout && (
-            <div className="mt-4 flex min-w-0 flex-wrap items-center justify-between gap-3 border-l border-amber-500/40 pl-3">
-              <div className="min-w-0 text-[11px] leading-5 text-neutral-400">
-                <div className="font-medium text-neutral-200">
-                  This layer is controlled by layout.
-                </div>
-                <div>Detaches from flex/grid flow and preserves current visual position.</div>
-              </div>
-              <button
-                type="button"
-                onClick={onDetachFromLayout}
-                className="inline-flex h-8 flex-shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-3 text-[11px] font-medium text-neutral-100 transition-colors hover:border-amber-400/70 hover:text-amber-100"
-              >
-                Make movable
-              </button>
-            </div>
-          )}
         </Section>
 
         {showEditableSections && isFlex && (

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

@@ -1,11 +1,11 @@
 import { describe, expect, it } from "vitest";
 import { Window } from "happy-dom";
 import {
-  buildDomEditMovePatchOperations,
-  buildDomEditResizePatchOperations,
   buildDomEditStylePatchOperation,
   buildElementAgentPrompt,
   findElementForSelection,
+  getDomEditNonEditableReason,
+  getDomEditTargetKey,
   isTextEditableSelection,
   serializeDomEditTextFields,
   type DomEditSelection,
@@ -47,7 +47,9 @@ describe("resolveDomEditCapabilities", () => {
       canEditStyles: true,
       canMove: true,
       canResize: true,
-      canDetachFromLayout: false,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
       reasonIfDisabled: undefined,
     });
   });
@@ -75,8 +77,10 @@ describe("resolveDomEditCapabilities", () => {
       canEditStyles: true,
       canMove: false,
       canResize: false,
-      canDetachFromLayout: true,
-      reasonIfDisabled: "This layer is controlled by layout.",
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+      reasonIfDisabled: undefined,
     });
   });
 
@@ -104,7 +108,9 @@ describe("resolveDomEditCapabilities", () => {
     ).toMatchObject({
       canMove: false,
       canResize: false,
-      canDetachFromLayout: false,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
     });
   });
 
@@ -132,7 +138,7 @@ describe("resolveDomEditCapabilities", () => {
     ).toMatchObject({
       canMove: true,
       canResize: true,
-      canDetachFromLayout: false,
+      canApplyManualOffset: true,
     });
   });
 
@@ -191,7 +197,7 @@ describe("resolveDomEditCapabilities", () => {
 });
 
 describe("resolveDomEditSelection", () => {
-  it("allows moving composition hosts in master view while keeping contents drill-down only", () => {
+  it("keeps composition host transforms disabled in master view", () => {
     expect(
       resolveDomEditCapabilities({
         selector: "#detail-host",
@@ -217,15 +223,49 @@ describe("resolveDomEditSelection", () => {
       canEditStyles: false,
       canMove: true,
       canResize: true,
-      canDetachFromLayout: false,
-      reasonIfDisabled: undefined,
+      canApplyManualOffset: false,
+      canApplyManualSize: false,
+      canApplyManualRotation: false,
+      reasonIfDisabled: "Select an internal layer to transform it.",
+    });
+  });
+
+  it("resolves child clicks inside a composition host to the child in master view", () => {
+    const document = createDocument(`
+      <div data-composition-id="main">
+        <div
+          id="detail-host"
+          class="clip"
+          data-composition-id="detail-card"
+          data-composition-file="compositions/detail-card.html"
+        >
+          <span id="inner-copy">Nested scene</span>
+        </div>
+      </div>
+    `);
+
+    const child = document.getElementById("inner-copy") as HTMLElement;
+    const selection = resolveDomEditSelection(child, {
+      activeCompositionPath: null,
+      isMasterView: true,
     });
+
+    expect(selection?.id).toBe("inner-copy");
+    expect(selection?.sourceFile).toBe("compositions/detail-card.html");
+    expect(selection?.isCompositionHost).toBe(false);
+    expect(selection?.capabilities.canApplyManualOffset).toBe(true);
+    expect(selection?.capabilities.canEditStyles).toBe(true);
   });
 
-  it("resolves child clicks inside a composition host back to the host in master view", () => {
+  it("does not prefer a scene host clip ancestor when selecting inside it", () => {
     const document = createDocument(`
       <div data-composition-id="main">
-        <div id="detail-host" data-composition-src="compositions/detail-card.html">
+        <div
+          id="detail-host"
+          class="clip"
+          data-composition-id="detail-card"
+          data-composition-file="compositions/detail-card.html"
+        >
           <span id="inner-copy">Nested scene</span>
         </div>
       </div>
@@ -235,12 +275,40 @@ describe("resolveDomEditSelection", () => {
     const selection = resolveDomEditSelection(child, {
       activeCompositionPath: null,
       isMasterView: true,
+      preferClipAncestor: true,
+    });
+
+    expect(selection?.id).toBe("inner-copy");
+    expect(selection?.sourceFile).toBe("compositions/detail-card.html");
+    expect(selection?.isCompositionHost).toBe(false);
+  });
+
+  it("still prefers an internal clip ancestor inside a scene", () => {
+    const document = createDocument(`
+      <div data-composition-id="main">
+        <div
+          id="detail-host"
+          class="clip"
+          data-composition-id="detail-card"
+          data-composition-file="compositions/detail-card.html"
+        >
+          <section id="nested-card" class="clip">
+            <span id="inner-copy">Nested scene</span>
+          </section>
+        </div>
+      </div>
+    `);
+
+    const child = document.getElementById("inner-copy") as HTMLElement;
+    const selection = resolveDomEditSelection(child, {
+      activeCompositionPath: null,
+      isMasterView: true,
+      preferClipAncestor: true,
     });
 
-    expect(selection?.id).toBe("detail-host");
-    expect(selection?.isCompositionHost).toBe(true);
-    expect(selection?.capabilities.canMove).toBe(false);
-    expect(selection?.capabilities.canEditStyles).toBe(false);
+    expect(selection?.id).toBe("nested-card");
+    expect(selection?.sourceFile).toBe("compositions/detail-card.html");
+    expect(selection?.isCompositionHost).toBe(false);
   });
 
   it("scopes class selector indexing to the same source file", () => {
@@ -265,6 +333,28 @@ describe("resolveDomEditSelection", () => {
     expect(findElementForSelection(document, selection!, null)).toBe(rootChip);
   });
 
+  it("resolves nested duplicate ids from master view without treating root as the nested source", () => {
+    const document = createDocument(`
+      <div data-composition-id="main">
+        <div id="card">Root card</div>
+        <div data-composition-id="nested" data-composition-file="scenes/nested.html">
+          <div id="card">Nested card</div>
+        </div>
+      </div>
+    `);
+
+    const nestedCard = document.querySelector(
+      '[data-composition-file="scenes/nested.html"] #card',
+    ) as HTMLElement;
+    const selection = resolveDomEditSelection(nestedCard, {
+      activeCompositionPath: null,
+      isMasterView: true,
+    });
+
+    expect(selection?.sourceFile).toBe("scenes/nested.html");
+    expect(findElementForSelection(document, selection!, null)).toBe(nestedCard);
+  });
+
   it("prefers the nearest clip ancestor on single-click style selection", () => {
     const document = createDocument(`
       <section id="card" class="clip" style="left: 10px; top: 20px; width: 200px; height: 100px; position: absolute;">
@@ -373,23 +463,60 @@ describe("resolveDomEditSelection", () => {
     expect(selection?.textFields.map((field) => field.tagName)).toEqual(["strong", "span"]);
     expect(selection?.textFields.map((field) => field.value)).toEqual(["", ""]);
   });
-});
 
-describe("patch builders and prompt builder", () => {
-  it("builds move patch operations for left/top", () => {
-    expect(buildDomEditMovePatchOperations(140.4, 82.1)).toEqual([
-      { type: "inline-style", property: "left", value: "140px" },
-      { type: "inline-style", property: "top", value: "82px" },
-    ]);
+  it("explains anonymous child elements that resolve to an editable parent", () => {
+    const document = createDocument(`
+      <div data-composition-id="main">
+        <div id="card">
+          <strong>Headline</strong>
+        </div>
+      </div>
+    `);
+
+    const child = document.querySelector("strong") as HTMLElement;
+    const selection = resolveDomEditSelection(child, {
+      activeCompositionPath: null,
+      isMasterView: false,
+      preferClipAncestor: false,
+    });
+
+    expect(selection?.id).toBe("card");
+    expect(getDomEditNonEditableReason(child, selection)).toBe("Selection resolves to Card");
   });
 
-  it("builds resize patch operations for width/height", () => {
-    expect(buildDomEditResizePatchOperations(301.6, 210.1)).toEqual([
-      { type: "inline-style", property: "width", value: "302px" },
-      { type: "inline-style", property: "height", value: "210px" },
-    ]);
+  it("does not mark an element as non-editable when Studio can edit it directly", () => {
+    const document = createDocument(`
+      <div data-composition-id="main">
+        <div id="card">Editable</div>
+      </div>
+    `);
+
+    const element = document.getElementById("card") as HTMLElement;
+    const selection = resolveDomEditSelection(element, {
+      activeCompositionPath: null,
+      isMasterView: false,
+    });
+
+    expect(getDomEditNonEditableReason(element, selection)).toBeNull();
+  });
+
+  it("keeps duplicate class targets distinct for history keys", () => {
+    const first = getDomEditTargetKey({
+      sourceFile: "index.html",
+      selector: ".card",
+      selectorIndex: 0,
+    });
+    const second = getDomEditTargetKey({
+      sourceFile: "index.html",
+      selector: ".card",
+      selectorIndex: 1,
+    });
+
+    expect(first).not.toBe(second);
   });
+});
 
+describe("patch builders and prompt builder", () => {
   it("builds style patch operations", () => {
     expect(buildDomEditStylePatchOperation("background-color", "rgb(15, 23, 42)")).toEqual({
       type: "inline-style",
@@ -444,6 +571,9 @@ describe("patch builders and prompt builder", () => {
         canEditStyles: true,
         canMove: true,
         canResize: true,
+        canApplyManualOffset: true,
+        canApplyManualSize: true,
+        canApplyManualRotation: true,
       },
     } satisfies DomEditSelection;
 
@@ -490,7 +620,9 @@ describe("patch builders and prompt builder", () => {
         canEditStyles: true,
         canMove: true,
         canResize: true,
-        canDetachFromLayout: false,
+        canApplyManualOffset: true,
+        canApplyManualSize: true,
+        canApplyManualRotation: true,
       },
     } satisfies DomEditSelection;