@hyperframes/studio 0.7.38 → 0.7.39

package/src/components/editor/clipPathHelpers.ts

@@ -0,0 +1,113 @@
+import { roundToCenti } from "../../utils/rounding";
+
+export interface ClipPathInsetSides {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export type ParsedInsetClipPathSides = ClipPathInsetSides & { radius: number };
+
+function formatClipNumber(value: number): string {
+  const rounded = roundToCenti(value);
+  return Number.isInteger(rounded)
+    ? `${rounded}`
+    : rounded.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
+}
+
+function formatClipPx(value: number): string {
+  return `${formatClipNumber(Math.max(0, value))}px`;
+}
+
+function parseInsetLengthPx(value: string): number | null {
+  const normalized = value.trim();
+  if (normalized === "0") return 0;
+  const match = /^(-?\d+(?:\.\d+)?)px$/i.exec(normalized);
+  if (!match) return null;
+  const parsed = Number.parseFloat(match[1]);
+  return Number.isFinite(parsed) ? Math.max(0, parsed) : null;
+}
+
+function sidesFromInsetTokens(tokens: number[]): ClipPathInsetSides | null {
+  if (tokens.length < 1 || tokens.length > 4) return null;
+  // CSS shorthand expansion: T | T R | T R B | T R B L
+  const [top, right = top, bottom = top, left = right] = tokens;
+  if (top === undefined || right === undefined || bottom === undefined || left === undefined) {
+    return null;
+  }
+  return { top, right, bottom, left };
+}
+
+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 parseInsetClipPathSides(
+  value: string | undefined,
+): ParsedInsetClipPathSides | null {
+  // Unambiguous pattern (no nested optional whitespace) to avoid polynomial
+  // backtracking on adversarial input; trim the payload instead.
+  const match = /^inset\(([^()]*)\)$/i.exec(value?.trim() ?? "");
+  if (!match) return null;
+  const parts = match[1]
+    .trim()
+    .replace(/\s+/g, " ")
+    .split(/ round /i);
+  const insetPart = parts[0]?.trim();
+  if (!insetPart || parts.length > 2) return null;
+
+  const tokens = insetPart.split(/\s+/).map(parseInsetLengthPx);
+  if (tokens.some((token) => token == null)) return null;
+  const numericTokens: number[] = [];
+  for (const token of tokens) {
+    if (token == null) return null;
+    numericTokens.push(token);
+  }
+  const sides = sidesFromInsetTokens(numericTokens);
+  if (!sides) return null;
+
+  const radiusPart = parts[1]?.trim();
+  const radius = radiusPart ? parseInsetLengthPx(radiusPart) : 0;
+  if (radius == null) return null;
+  return { ...sides, radius };
+}
+
+export function getClipPathInsetPx(value: string | undefined): number {
+  const parsed = parseInsetClipPathSides(value);
+  if (!parsed) return 0;
+  const { top, right, bottom, left } = parsed;
+  return top === right && top === bottom && top === left ? top : 0;
+}
+
+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 ${formatClipNumber(Math.max(0, radiusValue))}px)`;
+  }
+  return "none";
+}
+
+export function buildInsetClipPathSides(sides: ClipPathInsetSides, radiusPx: number = 0): string {
+  const values = [sides.top, sides.right, sides.bottom, sides.left].map(formatClipPx);
+  const [top, right, bottom, left] = values;
+  const inset =
+    top === right && top === bottom && top === left ? top : `${top} ${right} ${bottom} ${left}`;
+  const radius = Math.max(0, radiusPx);
+  return radius > 0 ? `inset(${inset} round ${formatClipNumber(radius)}px)` : `inset(${inset})`;
+}
+
+export function buildInsetClipPathValue(insetPx: number, radiusValue: number): string {
+  return `inset(${formatClipPx(insetPx)} round ${formatClipNumber(Math.max(0, radiusValue))}px)`;
+}

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

@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest";
+import {
+  cropRectFromInsets,
+  resolveCropInsetFromEdgeDrag,
+  resolveCropInsetFromMoveDrag,
+} from "./domEditOverlayCrop";
+
+describe("resolveCropInsetFromEdgeDrag", () => {
+  const startInsets = { top: 10, right: 20, bottom: 30, left: 40 };
+
+  it("converts overlay-space edge movement into element-space inset changes", () => {
+    expect(
+      resolveCropInsetFromEdgeDrag({
+        edge: "left",
+        startInsets,
+        deltaX: 20,
+        deltaY: 0,
+        scaleX: 2,
+        scaleY: 1,
+        width: 200,
+        height: 120,
+      }),
+    ).toEqual({ top: 10, right: 20, bottom: 30, left: 50 });
+
+    expect(
+      resolveCropInsetFromEdgeDrag({
+        edge: "right",
+        startInsets,
+        deltaX: 20,
+        deltaY: 0,
+        scaleX: 2,
+        scaleY: 1,
+        width: 200,
+        height: 120,
+      }),
+    ).toEqual({ top: 10, right: 10, bottom: 30, left: 40 });
+  });
+
+  it("clamps edited insets so opposing sides never overlap", () => {
+    expect(
+      resolveCropInsetFromEdgeDrag({
+        edge: "left",
+        startInsets,
+        deltaX: 400,
+        deltaY: 0,
+        scaleX: 1,
+        scaleY: 1,
+        width: 100,
+        height: 120,
+      }),
+    ).toEqual({ top: 10, right: 20, bottom: 30, left: 80 });
+
+    expect(
+      resolveCropInsetFromEdgeDrag({
+        edge: "top",
+        startInsets,
+        deltaX: 0,
+        deltaY: -40,
+        scaleX: 1,
+        scaleY: 2,
+        width: 200,
+        height: 120,
+      }),
+    ).toEqual({ top: 0, right: 20, bottom: 30, left: 40 });
+  });
+});
+
+describe("cropRectFromInsets", () => {
+  it("shrinks the overlay rect by scaled insets", () => {
+    expect(
+      cropRectFromInsets(
+        { left: 100, top: 50, width: 200, height: 100 },
+        { top: 10, right: 40, bottom: 20, left: 30 },
+        2,
+        1,
+      ),
+    ).toEqual({ left: 160, top: 60, width: 60, height: 70 });
+  });
+
+  it("clamps to zero size when insets exceed the rect", () => {
+    const r = cropRectFromInsets(
+      { left: 0, top: 0, width: 100, height: 100 },
+      { top: 300, right: 300, bottom: 300, left: 300 },
+      1,
+      1,
+    );
+    expect(r.width).toBe(0);
+    expect(r.height).toBe(0);
+  });
+});
+
+describe("resolveCropInsetFromMoveDrag", () => {
+  const startInsets = { top: 10, right: 20, bottom: 30, left: 40 };
+
+  it("shifts opposing insets together so the crop size stays constant", () => {
+    expect(
+      resolveCropInsetFromMoveDrag({ startInsets, deltaX: 20, deltaY: -10, scaleX: 2, scaleY: 1 }),
+    ).toEqual({ top: 0, right: 10, bottom: 40, left: 50 });
+  });
+
+  it("clamps the window inside the element bounds", () => {
+    expect(
+      resolveCropInsetFromMoveDrag({ startInsets, deltaX: 999, deltaY: 999, scaleX: 1, scaleY: 1 }),
+    ).toEqual({ top: 40, right: 0, bottom: 0, left: 60 });
+  });
+});

package/src/components/editor/domEditOverlayCrop.ts

@@ -0,0 +1,115 @@
+import { parseInsetClipPathSides, type ClipPathInsetSides } from "./clipPathHelpers";
+
+export type CropEdge = "top" | "right" | "bottom" | "left";
+
+export interface CropScreenRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+/** Element-space insets → the cropped region in overlay (screen) space. */
+export function cropRectFromInsets(
+  rect: CropScreenRect,
+  insets: ClipPathInsetSides,
+  scaleX: number,
+  scaleY: number,
+): CropScreenRect {
+  const sx = scaleX > 0 ? scaleX : 1;
+  const sy = scaleY > 0 ? scaleY : 1;
+  const left = rect.left + insets.left * sx;
+  const top = rect.top + insets.top * sy;
+  return {
+    left,
+    top,
+    width: Math.max(0, rect.width - (insets.left + insets.right) * sx),
+    height: Math.max(0, rect.height - (insets.top + insets.bottom) * sy),
+  };
+}
+
+/** Current inset crop of an element (inline first, computed fallback), or zeros. */
+export function readElementCropInsets(element: HTMLElement): ClipPathInsetSides & {
+  radius: number;
+} {
+  const inline = element.style.getPropertyValue("clip-path").trim();
+  const value =
+    inline || element.ownerDocument.defaultView?.getComputedStyle(element).clipPath.trim() || "";
+  const parsed = parseInsetClipPathSides(value === "none" ? "" : value);
+  return parsed ?? { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
+}
+
+export interface CropInsetDragInput {
+  edge: CropEdge;
+  startInsets: ClipPathInsetSides;
+  deltaX: number;
+  deltaY: number;
+  scaleX: number;
+  scaleY: number;
+  width: number;
+  height: number;
+}
+
+function clampInset(value: number, max: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(Math.max(0, value), Math.max(0, max));
+}
+
+export function resolveCropInsetFromEdgeDrag(input: CropInsetDragInput): ClipPathInsetSides {
+  const scaleX = input.scaleX > 0 ? input.scaleX : 1;
+  const scaleY = input.scaleY > 0 ? input.scaleY : 1;
+  const next = { ...input.startInsets };
+
+  if (input.edge === "left") {
+    next.left = clampInset(
+      input.startInsets.left + input.deltaX / scaleX,
+      input.width - next.right,
+    );
+  } else if (input.edge === "right") {
+    next.right = clampInset(
+      input.startInsets.right - input.deltaX / scaleX,
+      input.width - next.left,
+    );
+  } else if (input.edge === "top") {
+    next.top = clampInset(
+      input.startInsets.top + input.deltaY / scaleY,
+      input.height - next.bottom,
+    );
+  } else {
+    next.bottom = clampInset(
+      input.startInsets.bottom - input.deltaY / scaleY,
+      input.height - next.top,
+    );
+  }
+
+  return next;
+}
+
+/** Drag the whole crop window: both opposing insets shift together, the crop
+ *  size stays constant, clamped inside the element bounds. */
+export function resolveCropInsetFromMoveDrag(input: {
+  startInsets: ClipPathInsetSides;
+  deltaX: number;
+  deltaY: number;
+  scaleX: number;
+  scaleY: number;
+}): ClipPathInsetSides {
+  const sx = input.scaleX > 0 ? input.scaleX : 1;
+  const sy = input.scaleY > 0 ? input.scaleY : 1;
+  const totalX = input.startInsets.left + input.startInsets.right;
+  const totalY = input.startInsets.top + input.startInsets.bottom;
+  const left = Math.min(Math.max(0, input.startInsets.left + input.deltaX / sx), totalX);
+  const top = Math.min(Math.max(0, input.startInsets.top + input.deltaY / sy), totalY);
+  return { left, right: totalX - left, top, bottom: totalY - top };
+}
+
+/** Display-only hug: shrink a projected rect by the element's inset crop.
+ *  For rects nothing writes back to (e.g. the hover ring). */
+export function hugRectForElement(
+  rect: CropScreenRect & { editScaleX: number; editScaleY: number },
+  element: HTMLElement,
+): CropScreenRect {
+  const insets = readElementCropInsets(element);
+  if (insets.top <= 0 && insets.right <= 0 && insets.bottom <= 0 && insets.left <= 0) return rect;
+  return cropRectFromInsets(rect, insets, rect.editScaleX, rect.editScaleY);
+}

package/src/components/editor/domEditOverlayGeometry.ts

@@ -1,5 +1,6 @@
 import { type DomEditSelection, findElementForSelection } from "./domEditing";
 import { isElementVisibleThroughAncestors } from "./domEditingDom";
+import { hugRectForElement } from "./domEditOverlayCrop";
 
 export interface OverlayRect {
   left: number;
@@ -84,6 +85,19 @@ export function resolveDomEditCoordinateScale(input: {
   };
 }
 
+/** toOverlayRect, then shrunk to the element's visible (inset-cropped) region.
+ *  For consumers that reason about what's ON SCREEN — snap targets, marquee
+ *  hit-tests, display outlines. The selection box must keep the full rect
+ *  (it is the gesture coordinate basis). */
+export function toVisibleOverlayRect(
+  overlayEl: HTMLDivElement,
+  iframe: HTMLIFrameElement,
+  element: HTMLElement,
+): OverlayRect | null {
+  const rect = toOverlayRect(overlayEl, iframe, element);
+  return rect ? { ...rect, ...hugRectForElement(rect, element) } : null;
+}
+
 export function toOverlayRect(
   overlayEl: HTMLDivElement,
   iframe: HTMLIFrameElement,

package/src/components/editor/domEditOverlayShape.ts

@@ -0,0 +1,39 @@
+import type { DomEditSelection } from "./domEditing";
+
+export interface DomEditSelectionShapeStyles {
+  borderRadius: string | number;
+  clipPath?: string;
+}
+
+export function readDomEditSelectionShapeStyles(
+  selection: DomEditSelection | null,
+): DomEditSelectionShapeStyles {
+  const fallback = {
+    borderRadius: 8,
+    clipPath: undefined,
+  };
+  if (!selection?.element) return fallback;
+  try {
+    const tag = selection.element.tagName.toLowerCase();
+    if (tag === "svg" || tag === "img" || tag === "video" || tag === "canvas") return fallback;
+    const win = selection.element.ownerDocument.defaultView;
+    if (!win) return fallback;
+    const cs = win.getComputedStyle(selection.element);
+    const borderRadius = cs.borderRadius;
+    const clipPath = cs.clipPath;
+    return {
+      borderRadius: borderRadius && borderRadius !== "0px" ? borderRadius : 4,
+      clipPath: clipPath && clipPath !== "none" ? clipPath : undefined,
+    };
+  } catch {
+    return fallback;
+  }
+}
+
+/** Selection-box chrome: none when the crop-outline child draws it, inset
+ *  shadow for clip-mirrored shapes, plain border otherwise. */
+export function resolveBoxChromeClass(hasCropOutline: boolean, boxClipPath?: string): string {
+  if (hasCropOutline) return "";
+  if (boxClipPath) return "shadow-[inset_0_0_0_2px_rgba(60,230,172,0.6)]";
+  return "border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]";
+}

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

@@ -76,6 +76,7 @@ describe("resolveDomEditCapabilities", () => {
       canEditStyles: true,
       canMove: true,
       canResize: true,
+      canCrop: true,
       canApplyManualOffset: true,
       canApplyManualSize: true,
       canApplyManualRotation: true,
@@ -424,6 +425,7 @@ describe("resolveDomEditSelection", () => {
       canEditStyles: false,
       canMove: true,
       canResize: true,
+      canCrop: true,
       canApplyManualOffset: false,
       canApplyManualSize: false,
       canApplyManualRotation: false,

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/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/propertyPanelHelpers.ts

@@ -160,6 +160,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 +324,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 +352,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

@@ -108,4 +108,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}` });
   }