@hyperframes/studio 0.7.38 → 0.7.40

package/src/components/editor/domEditingTypes.ts

@@ -50,6 +50,9 @@ export const CURATED_STYLE_PROPERTIES = [
 export interface DomEditCapabilities {
   canSelect: boolean;
   canEditStyles: boolean;
+  /** Can take a non-destructive `clip-path: inset()` crop — broader than
+   *  canEditStyles (a sub-composition host is croppable from the parent view). */
+  canCrop: boolean;
   /** Directly editable authored left/top style fields. Canvas drag uses manual edits instead. */
   canMove: boolean;
   /** Directly editable authored width/height style fields. Canvas resize uses manual edits instead. */

package/src/components/editor/manualEditsDom.ts

@@ -33,6 +33,7 @@ import {
 import { roundRotationAngle } from "./manualEditsParsing";
 import { applyStudioMotionFromDom } from "./studioMotion";
 import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
+import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 
 /* ── Gesture tracking ─────────────────────────────────────────────── */
 let studioManualEditGestureId = 0;
@@ -162,24 +163,6 @@ export function restoreInlineDisplay(element: HTMLElement): void {
 }
 
 /* ── Translate helpers ────────────────────────────────────────────── */
-function splitTopLevelWhitespace(value: string): string[] {
-  const parts: string[] = [];
-  let depth = 0;
-  let current = "";
-  for (const char of value.trim()) {
-    if (char === "(") depth += 1;
-    if (char === ")") depth = Math.max(0, depth - 1);
-    if (/\s/.test(char) && depth === 0) {
-      if (current) parts.push(current);
-      current = "";
-    } else {
-      current += char;
-    }
-  }
-  if (current) parts.push(current);
-  return parts;
-}
-
 function composeTranslateValue(element: HTMLElement, x: string, y: string): string {
   const original = element.getAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR)?.trim();
   if (!original || original === "none") return `${x} ${y}`;

package/src/components/editor/manualEditsStyleHelpers.ts

@@ -0,0 +1,18 @@
+export function splitTopLevelWhitespace(value: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  // fallow-ignore-next-line code-duplication
+  let current = "";
+  for (const char of value.trim()) {
+    if (char === "(") depth += 1;
+    if (char === ")") depth = Math.max(0, depth - 1);
+    if (/\s/.test(char) && depth === 0) {
+      if (current) parts.push(current);
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current) parts.push(current);
+  return parts;
+}

package/src/components/editor/marqueeCommit.ts

@@ -1,10 +1,11 @@
+// fallow-ignore-file code-duplication
 import { useCallback, useRef, useState } from "react";
 import type { DomEditSelection } from "./domEditing";
 import { collectDomEditLayerItems, resolveDomEditSelection } from "./domEditingLayers";
 import { isElementComputedVisible } from "./domEditingElement";
 import { coversComposition } from "../../utils/studioPreviewHelpers";
 import { rectsOverlap, type Rect } from "../../utils/marqueeGeometry";
-import { toOverlayRect } from "./domEditOverlayGeometry";
+import { toVisibleOverlayRect } from "./domEditOverlayGeometry";
 
 interface MarqueeState {
   startX: number;
@@ -57,7 +58,7 @@ function collectMarqueeHits(
     const el = item.element;
     if (!isElementComputedVisible(el)) continue;
     if (coversComposition(el.getBoundingClientRect(), viewport)) continue;
-    const overlayRect = toOverlayRect(overlayEl, iframe, el);
+    const overlayRect = toVisibleOverlayRect(overlayEl, iframe, el);
     if (!overlayRect) continue;
     const r: Rect = {
       left: overlayRect.left,

package/src/components/editor/offCanvasIndicatorGeometry.ts

@@ -0,0 +1,74 @@
+import type React from "react";
+import type { OffCanvasRect } from "./OffCanvasIndicators";
+import { hugRectForElement } from "./domEditOverlayCrop";
+import { groupAwareOverlayRect } from "./domEditOverlayGeometry";
+import { isElementComputedVisible } from "./domEditingElement";
+import { collectDomEditLayerItems } from "./domEditingLayers";
+
+function rounded(value: number): number {
+  return Math.round(value * 100) / 100;
+}
+
+function offCanvasSignature(rects: OffCanvasRect[]): string {
+  return rects
+    .map(
+      (rect) =>
+        `${rect.key}:${rounded(rect.left)},${rounded(rect.top)},${rounded(rect.width)},${rounded(rect.height)}`,
+    )
+    .join("|");
+}
+
+// fallow-ignore-next-line complexity
+export function recomputeOffCanvasIndicators(
+  iframe: HTMLIFrameElement,
+  overlay: HTMLDivElement,
+  doc: Document | null | undefined,
+  comp: { left: number; top: number; width: number; height: number },
+  activeCompositionPath: string | null,
+  sigRef: React.MutableRefObject<string>,
+  elementsRef: React.MutableRefObject<Map<string, HTMLElement>>,
+  setRects: (rects: OffCanvasRect[]) => void,
+): void {
+  if (comp.width <= 0 || !doc) {
+    sigRef.current = "";
+    elementsRef.current = new Map();
+    setRects([]);
+    return;
+  }
+
+  const root = doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.body;
+  const acp = activeCompositionPath ?? "index.html";
+  const items = collectDomEditLayerItems(root, {
+    activeCompositionPath: acp,
+    isMasterView: !acp || acp === "index.html",
+  });
+  const rects: OffCanvasRect[] = [];
+  const elMap = new Map<string, HTMLElement>();
+  for (const item of items) {
+    if (!isElementComputedVisible(item.element)) continue;
+    // Groups use their members' union (where they actually render), so a group
+    // whose members sit inside the canvas isn't flagged off-canvas by a stale
+    // wrapper box. Crop-hug the result so an inset crop that keeps the visible
+    // part on-canvas doesn't flag the element either.
+    const base = groupAwareOverlayRect(overlay, iframe, item.element);
+    const r = base ? { ...base, ...hugRectForElement(base, item.element) } : null;
+    if (!r) continue;
+    // Any edge crossing the composition border → gray-zone indicator (the
+    // in-canvas portion is clipped away below, so only the sliver shows).
+    const extendsOutsideComp =
+      r.left < comp.left ||
+      r.left + r.width > comp.left + comp.width ||
+      r.top < comp.top ||
+      r.top + r.height > comp.top + comp.height;
+    if (extendsOutsideComp) {
+      rects.push({ key: item.key, left: r.left, top: r.top, width: r.width, height: r.height });
+      elMap.set(item.key, item.element);
+    }
+  }
+
+  const nextSig = offCanvasSignature(rects);
+  if (nextSig === sigRef.current) return;
+  sigRef.current = nextSig;
+  elementsRef.current = elMap;
+  setRects(rects);
+}

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

@@ -0,0 +1,154 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { describe, expect, it } from "vitest";
+import { DomEditOverlay } from "./DomEditOverlay";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+
+const INDICATOR = '[aria-label="Select off-canvas element index.html:headline:0"]';
+
+function domRect(left: number, top: number, width: number, height: number): DOMRect {
+  return {
+    left,
+    top,
+    right: left + width,
+    bottom: top + height,
+    width,
+    height,
+    x: left,
+    y: top,
+    toJSON: () => ({}),
+  };
+}
+
+async function flushAnimationFrames(): Promise<void> {
+  await new Promise<void>((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+interface OverlayHarness {
+  host: HTMLElement;
+  movedElement: HTMLElement;
+  cleanup: () => void;
+}
+
+// Mount DomEditOverlay over an iframe whose #headline sits at `initialLeft`, with a
+// getBoundingClientRect stub that reads the element's live inline geometry (so a
+// style mutation moves it) and reports the composition/overlay as 800x450 at origin.
+function mountOverlayWithHeadline(initialLeft: number): OverlayHarness {
+  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root: Root = createRoot(host);
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("Expected iframe content document");
+
+  doc.body.innerHTML = `
+    <div data-composition-id="root" data-width="800" data-height="450">
+      <div id="headline" style="position:absolute; left:${initialLeft}px; top:40px; width:100px; height:40px;">Headline</div>
+    </div>
+  `;
+  const movedElement = doc.getElementById("headline");
+  if (!movedElement) throw new Error("Expected test element");
+
+  Element.prototype.getBoundingClientRect = function (): DOMRect {
+    if (this === movedElement) {
+      return domRect(
+        Number.parseFloat(movedElement.style.left),
+        Number.parseFloat(movedElement.style.top),
+        Number.parseFloat(movedElement.style.width),
+        Number.parseFloat(movedElement.style.height),
+      );
+    }
+    return domRect(0, 0, 800, 450);
+  };
+
+  act(() => {
+    root.render(
+      <DomEditOverlay
+        iframeRef={{ current: iframe }}
+        activeCompositionPath={null}
+        selection={null}
+        hoverSelection={null}
+        groupSelections={[]}
+        onCanvasMouseDown={() => {}}
+        onCanvasPointerMove={() => Promise.resolve(null)}
+        onCanvasPointerLeave={() => {}}
+        onSelectionChange={() => {}}
+        onBlockedMove={() => {}}
+        onPathOffsetCommit={() => {}}
+        onGroupPathOffsetCommit={() => {}}
+        onBoxSizeCommit={() => {}}
+        onRotationCommit={() => {}}
+      />,
+    );
+  });
+
+  return {
+    host,
+    movedElement,
+    cleanup: () => {
+      act(() => root.unmount());
+      Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+      iframe.remove();
+      host.remove();
+    },
+  };
+}
+
+describe("off-canvas indicator refresh", () => {
+  it("removes the indicator when an off-canvas element moves in-canvas (off->on)", async () => {
+    const h = mountOverlayWithHeadline(760);
+    try {
+      await act(async () => {
+        await flushAnimationFrames();
+      });
+      expect(h.host.querySelector(INDICATOR)).toBeTruthy();
+
+      act(() => {
+        h.movedElement.style.left = "120px";
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await flushAnimationFrames();
+      });
+
+      expect(h.host.querySelector(INDICATOR)).toBeNull();
+    } finally {
+      h.cleanup();
+    }
+  });
+
+  it("tracks the indicator to the new position when it stays off-canvas (off->off)", async () => {
+    const h = mountOverlayWithHeadline(760);
+    try {
+      await act(async () => {
+        await flushAnimationFrames();
+      });
+      const before = h.host.querySelector(INDICATOR);
+      expect(before).toBeTruthy();
+      const leftBefore = (before!.parentElement as HTMLElement).style.left;
+
+      // Move further off-canvas (still outside the 800px-wide composition).
+      act(() => {
+        h.movedElement.style.left = "1200px";
+      });
+      await act(async () => {
+        await Promise.resolve();
+        await flushAnimationFrames();
+      });
+
+      const after = h.host.querySelector(INDICATOR);
+      expect(after).toBeTruthy();
+      const leftAfter = (after!.parentElement as HTMLElement).style.left;
+      expect(leftAfter).not.toEqual(leftBefore);
+    } finally {
+      h.cleanup();
+    }
+  });
+});

package/src/components/editor/offCanvasIndicatorRefresh.ts

@@ -0,0 +1,99 @@
+import type React from "react";
+import type { OffCanvasRect } from "./OffCanvasIndicators";
+import { recomputeOffCanvasIndicators } from "./offCanvasIndicatorGeometry";
+
+interface OffCanvasIndicatorRefreshOptions {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
+  compRectRef: React.MutableRefObject<{ left: number; top: number; width: number; height: number }>;
+  activeCompositionPathRef: React.MutableRefObject<string | null>;
+  dirtyRef: React.MutableRefObject<boolean>;
+  sigRef: React.MutableRefObject<string>;
+  observerRef: React.MutableRefObject<MutationObserver | null>;
+  observedDocRef: React.MutableRefObject<Document | null>;
+  elementsRef: React.MutableRefObject<Map<string, HTMLElement>>;
+  setRects: (rects: OffCanvasRect[]) => void;
+}
+
+function compSignature(comp: { left: number; top: number; width: number; height: number }): string {
+  return `${Math.round(comp.left)}:${Math.round(comp.top)}:${Math.round(comp.width)}:${Math.round(comp.height)}`;
+}
+
+function clearIndicators(options: OffCanvasIndicatorRefreshOptions): void {
+  options.dirtyRef.current = false;
+  options.sigRef.current = "";
+  options.elementsRef.current = new Map();
+  options.setRects([]);
+}
+
+function observeDoc(doc: Document, markDirty: () => void): MutationObserver | null {
+  const Observer = doc.defaultView?.MutationObserver ?? globalThis.MutationObserver;
+  if (!Observer) return null;
+  const observer = new Observer(markDirty);
+  observer.observe(doc.documentElement, {
+    attributes: true,
+    // data-hidden is included explicitly: hiding an element writes data-hidden, and
+    // although the runtime honoring also writes display:"none" (a style mutation we'd
+    // catch anyway), keying on the attribute directly makes the coupling robust to any
+    // future throttling of that runtime sync.
+    attributeFilter: ["style", "class", "transform", "width", "height", "data-hidden"],
+    childList: true,
+    subtree: true,
+  });
+  return observer;
+}
+
+export function startOffCanvasIndicatorRefresh(
+  options: OffCanvasIndicatorRefreshOptions,
+): () => void {
+  let frame = 0;
+  let lastCompSig = "";
+  const markDirty = () => {
+    options.dirtyRef.current = true;
+  };
+  const attachObserver = (doc: Document | null) => {
+    options.observerRef.current?.disconnect();
+    options.observerRef.current = doc?.documentElement ? observeDoc(doc, markDirty) : null;
+    options.observedDocRef.current = doc;
+    options.sigRef.current = "";
+  };
+  const update = () => {
+    frame = requestAnimationFrame(update);
+    const iframe = options.iframeRef.current;
+    const overlayEl = options.overlayRef.current;
+    const doc = iframe?.contentDocument ?? null;
+    if (doc !== options.observedDocRef.current) {
+      attachObserver(doc);
+      markDirty();
+    }
+    const comp = options.compRectRef.current;
+    const nextCompSig = compSignature(comp);
+    if (nextCompSig !== lastCompSig) {
+      lastCompSig = nextCompSig;
+      markDirty();
+    }
+    if (!iframe || !overlayEl) {
+      if (options.dirtyRef.current) clearIndicators(options);
+      return;
+    }
+    if (!options.dirtyRef.current) return;
+    options.dirtyRef.current = false;
+    recomputeOffCanvasIndicators(
+      iframe,
+      overlayEl,
+      doc,
+      comp,
+      options.activeCompositionPathRef.current,
+      options.sigRef,
+      options.elementsRef,
+      options.setRects,
+    );
+  };
+  frame = requestAnimationFrame(update);
+  return () => {
+    cancelAnimationFrame(frame);
+    options.observerRef.current?.disconnect();
+    options.observerRef.current = null;
+    options.observedDocRef.current = null;
+  };
+}

package/src/components/editor/propertyPanelHelpers.ts

@@ -2,6 +2,7 @@ import { parseCssColor, type ParsedColor } from "./colorValue";
 import { COMMON_LOCAL_FONT_FAMILIES } from "./fontCatalog";
 import type { DomEditSelection } from "./domEditing";
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
+import type { TimelineElement } from "../../player";
 import { roundToCenti } from "../../utils/rounding";
 
 export type {
@@ -18,6 +19,16 @@ export function stripQueryAndHash(value: string): string {
   return value.slice(0, Math.min(queryIndex, hashIndex));
 }
 
+export function isSelectedElementHidden(
+  elements: readonly TimelineElement[],
+  selectedElementId: string | null,
+): boolean {
+  if (!selectedElementId) return false;
+  return (
+    elements.find((element) => (element.key ?? element.id) === selectedElementId)?.hidden === true
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Font types & constants (shared by font and section modules)        */
 /* ------------------------------------------------------------------ */
@@ -160,6 +171,16 @@ const BOX_SHADOW_PRESETS = {
 
 export type BoxShadowPreset = keyof typeof BOX_SHADOW_PRESETS | "custom";
 
+export {
+  buildClipPathValue,
+  buildInsetClipPathSides,
+  buildInsetClipPathValue,
+  getClipPathInsetPx,
+  inferClipPathPreset,
+  parseInsetClipPathSides,
+  type ClipPathInsetSides,
+} from "./clipPathHelpers";
+
 /* ------------------------------------------------------------------ */
 /*  Shared types                                                       */
 /* ------------------------------------------------------------------ */
@@ -314,23 +335,6 @@ export function buildBoxShadowPresetValue(
   return BOX_SHADOW_PRESETS[preset];
 }
 
-export function inferClipPathPreset(
-  value: string | undefined,
-): "none" | "inset" | "circle" | "custom" {
-  const normalized = value?.trim();
-  if (!normalized || normalized === "none") return "none";
-  if (/^inset\(/i.test(normalized)) return "inset";
-  if (/^circle\(/i.test(normalized)) return "circle";
-  return "custom";
-}
-
-export function getClipPathInsetPx(value: string | undefined): number {
-  const match = /^inset\(\s*(-?\d+(?:\.\d+)?)px\b/i.exec(value?.trim() ?? "");
-  if (!match) return 0;
-  const parsed = Number.parseFloat(match[1]);
-  return Number.isFinite(parsed) ? Math.max(0, parsed) : 0;
-}
-
 export function buildStrokeWidthStyleUpdates(
   nextWidth: string,
   currentBorderStyle: string | undefined,
@@ -359,23 +363,6 @@ export function buildStrokeStyleUpdates(
   return updates;
 }
 
-export function buildClipPathValue(
-  preset: "none" | "inset" | "circle" | "custom",
-  radiusValue: number,
-  fallback: string | undefined,
-) {
-  if (preset === "custom") return fallback?.trim() || "none";
-  if (preset === "circle") return "circle(50% at 50% 50%)";
-  if (preset === "inset") {
-    return `inset(0 round ${formatNumericValue(Math.max(0, radiusValue))}px)`;
-  }
-  return "none";
-}
-
-export function buildInsetClipPathValue(insetPx: number, radiusValue: number): string {
-  return `inset(${formatNumericValue(Math.max(0, insetPx))}px round ${formatNumericValue(Math.max(0, radiusValue))}px)`;
-}
-
 export function adjustNumericToken(
   value: string,
   direction: 1 | -1,

package/src/components/editor/propertyPanelStyleSections.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Eye, Layers, Palette, Settings, Square, Zap } from "../../icons/SystemIcons";
+import { Eye, Layers, Palette, Scissors, Settings, Square, Zap } from "../../icons/SystemIcons";
 import { buildDefaultGradientModel, serializeGradient } from "./gradientValue";
 import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
 import {
   buildBoxShadowPresetValue,
   buildClipPathValue,
+  buildInsetClipPathSides,
   buildInsetClipPathValue,
   buildStrokeStyleUpdates,
   buildStrokeWidthStyleUpdates,
@@ -17,10 +18,12 @@ import {
   inferClipPathPreset,
   LABEL,
   normalizePanelPxValue,
+  parseInsetClipPathSides,
   parseNumericValue,
   parsePxMetricValue,
   RESPONSIVE_GRID,
   setCssFilterFunctionPx,
+  type ClipPathInsetSides,
   type BoxShadowPreset,
 } from "./propertyPanelHelpers";
 import {
@@ -35,6 +38,7 @@ import { ColorField } from "./propertyPanelColor";
 import { GradientField, ImageFillField } from "./propertyPanelFill";
 import { BorderRadiusEditor } from "./BorderRadiusEditor";
 
+// fallow-ignore-next-line complexity
 export function StyleSections({
   projectId,
   element,
@@ -43,6 +47,8 @@ export function StyleSections({
   onSetStyle,
   onImportAssets,
   gsapBorderRadius,
+  cropMode = false,
+  onCropModeChange,
 }: {
   projectId: string;
   element: DomEditSelection;
@@ -51,6 +57,8 @@ export function StyleSections({
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
   onImportAssets?: (files: FileList) => Promise<string[]>;
   gsapBorderRadius?: { tl: number; tr: number; br: number; bl: number } | null;
+  cropMode?: boolean;
+  onCropModeChange?: (active: boolean) => void;
 }) {
   const styleEditingDisabled = !element.capabilities.canEditStyles;
   const isFlex = styles.display === "flex" || styles.display === "inline-flex";
@@ -86,7 +94,16 @@ export function StyleSections({
   const backdropBlurValue = getCssFilterFunctionPx(styles["backdrop-filter"], "blur");
   const clipPathValue = styles["clip-path"] || "none";
   const clipPathPreset = inferClipPathPreset(clipPathValue);
+  const parsedClipInsets = parseInsetClipPathSides(clipPathValue);
   const clipInsetValue = getClipPathInsetPx(clipPathValue);
+  const clipInsetSides = parsedClipInsets ?? {
+    top: clipInsetValue,
+    right: clipInsetValue,
+    bottom: clipInsetValue,
+    left: clipInsetValue,
+    radius: radiusValue,
+  };
+  const showClipInsetSides = clipPathPreset === "inset" || parsedClipInsets != null;
   const backgroundImage = styles["background-image"] ?? "none";
   const hasTextControls = isTextEditableSelection(element);
 
@@ -117,6 +134,19 @@ export function StyleSections({
     }
   };
 
+  const commitClipInsetSide = (side: keyof ClipPathInsetSides, nextValue: string) => {
+    const next = parsePxMetricValue(nextValue);
+    if (next == null) return;
+    const sides: ClipPathInsetSides = {
+      top: clipInsetSides.top,
+      right: clipInsetSides.right,
+      bottom: clipInsetSides.bottom,
+      left: clipInsetSides.left,
+    };
+    sides[side] = next;
+    onSetStyle("clip-path", buildInsetClipPathSides(sides, clipInsetSides.radius));
+  };
+
   return (
     <>
       {isFlex && (
@@ -344,6 +374,50 @@ export function StyleSections({
               }
             />
           </div>
+          {showClipInsetSides && (
+            <div className="grid gap-2">
+              <div className="grid grid-cols-4 gap-2">
+                <MetricField
+                  label="T"
+                  value={formatPxMetricValue(clipInsetSides.top)}
+                  disabled={styleEditingDisabled}
+                  onCommit={(next) => commitClipInsetSide("top", next)}
+                />
+                <MetricField
+                  label="R"
+                  value={formatPxMetricValue(clipInsetSides.right)}
+                  disabled={styleEditingDisabled}
+                  onCommit={(next) => commitClipInsetSide("right", next)}
+                />
+                <MetricField
+                  label="B"
+                  value={formatPxMetricValue(clipInsetSides.bottom)}
+                  disabled={styleEditingDisabled}
+                  onCommit={(next) => commitClipInsetSide("bottom", next)}
+                />
+                <MetricField
+                  label="L"
+                  value={formatPxMetricValue(clipInsetSides.left)}
+                  disabled={styleEditingDisabled}
+                  onCommit={(next) => commitClipInsetSide("left", next)}
+                />
+              </div>
+            </div>
+          )}
+          <button
+            type="button"
+            disabled={styleEditingDisabled || !onCropModeChange}
+            aria-pressed={cropMode}
+            onClick={() => onCropModeChange?.(!cropMode)}
+            className={`inline-flex h-8 w-fit items-center gap-1.5 rounded-md border px-2 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+              cropMode
+                ? "border-studio-accent/60 bg-studio-accent/15 text-studio-accent"
+                : "border-panel-border bg-panel-input text-panel-text-2 hover:text-white"
+            }`}
+          >
+            <Scissors size={13} />
+            Crop
+          </button>
         </div>
       </Section>
 

package/src/components/editor/propertyPanelTypes.ts

@@ -52,6 +52,7 @@ export interface PropertyPanelProps {
   onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
   onRemoveTextField: (fieldKey: string) => void;
   onAskAgent: () => void;
+  onToggleElementHidden?: (elementKey: string, hidden: boolean) => void | Promise<void>;
   onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
   fontAssets?: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
@@ -108,4 +109,6 @@ export interface PropertyPanelProps {
   recordingState?: "idle" | "recording" | "preview";
   recordingDuration?: number;
   onToggleRecording?: () => void;
+  cropMode?: boolean;
+  onCropModeChange?: (active: boolean) => void;
 }

package/src/components/editor/snapTargetCollection.ts

@@ -1,9 +1,8 @@
-// fallow-ignore-file unused-file
 // fallow-ignore-file code-duplication
 import type { DomEditSelection } from "./domEditing";
 import {
   isElementVisibleForOverlay,
-  toOverlayRect,
+  toVisibleOverlayRect,
   type OverlayRect,
 } from "./domEditOverlayGeometry";
 import {
@@ -106,7 +105,7 @@ export function collectSnapContext(input: {
     id: string;
   }> = [];
   for (let i = 0; i < elements.length; i++) {
-    const rect = toOverlayRect(input.overlayEl, input.iframe, elements[i]);
+    const rect = toVisibleOverlayRect(input.overlayEl, input.iframe, elements[i]);
     if (rect) entries.push({ rect, id: `snap-target-${i}` });
   }