@hyperframes/studio 0.7.37 → 0.7.39

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

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import {
+  buildInsetClipPathSides,
   buildStrokeStyleUpdates,
   buildStrokeWidthStyleUpdates,
   getClipPathInsetPx,
@@ -7,6 +8,7 @@ import {
   inferBoxShadowPreset,
   inferClipPathPreset,
   normalizePanelPxValue,
+  parseInsetClipPathSides,
   setCssFilterFunctionPx,
 } from "./PropertyPanel";
 
@@ -49,6 +51,52 @@ describe("PropertyPanel style helpers", () => {
     expect(getClipPathInsetPx("circle(50% at 50% 50%)")).toBe(0);
   });
 
+  it("builds and parses 4-side inset clip paths without losing radius", () => {
+    expect(buildInsetClipPathSides({ top: 10, right: 20, bottom: 30, left: 40 }, 6)).toBe(
+      "inset(10px 20px 30px 40px round 6px)",
+    );
+    expect(parseInsetClipPathSides("inset(10px 20px 30px 40px round 6px)")).toEqual({
+      top: 10,
+      right: 20,
+      bottom: 30,
+      left: 40,
+      radius: 6,
+    });
+  });
+
+  it("emits the single-value inset form when all sides are equal", () => {
+    expect(buildInsetClipPathSides({ top: 12.5, right: 12.5, bottom: 12.5, left: 12.5 })).toBe(
+      "inset(12.5px)",
+    );
+    expect(parseInsetClipPathSides("inset(12.5px)")).toEqual({
+      top: 12.5,
+      right: 12.5,
+      bottom: 12.5,
+      left: 12.5,
+      radius: 0,
+    });
+    expect(getClipPathInsetPx("inset(12.5px 12.5px 12.5px 12.5px)")).toBe(12.5);
+  });
+
+  it("accepts CSS shorthand inset values and rejects unsupported clip paths", () => {
+    expect(parseInsetClipPathSides("inset(10px 20px)")).toEqual({
+      top: 10,
+      right: 20,
+      bottom: 10,
+      left: 20,
+      radius: 0,
+    });
+    expect(parseInsetClipPathSides("inset(10px 20px 30px)")).toEqual({
+      top: 10,
+      right: 20,
+      bottom: 30,
+      left: 20,
+      radius: 0,
+    });
+    expect(parseInsetClipPathSides("inset(10%)")).toBeNull();
+    expect(parseInsetClipPathSides("circle(50% at 50% 50%)")).toBeNull();
+  });
+
   it("keeps stroke width and style edits visually effective", () => {
     expect(buildStrokeWidthStyleUpdates("3px", "none")).toEqual([
       ["border-width", "3px"],

package/src/components/editor/PropertyPanel.tsx

@@ -1,5 +1,5 @@
 import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { Eye, Layers, Move } from "../../icons/SystemIcons";
+import { Move } from "../../icons/SystemIcons";
 import { InspectorHeaderActions } from "./InspectorHeaderActions";
 import { useStudioShellContext } from "../../contexts/StudioContext";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
@@ -22,18 +22,16 @@ import { TextSection, StyleSections } from "./propertyPanelSections";
 import { GsapAnimationSection } from "./GsapAnimationSection";
 import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
 import { KeyframeNavigation } from "./KeyframeNavigation";
-import {
-  STUDIO_COLOR_GRADING_ENABLED,
-  STUDIO_GSAP_PANEL_ENABLED,
-  STUDIO_KEYFRAMES_ENABLED,
-} from "./manualEditingAvailability";
+import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
 import { usePlayerStore, liveTime } from "../../player";
 import { TimingSection } from "./propertyPanelTimingSection";
 import { type PropertyPanelProps } from "./propertyPanelHelpers";
 import { GestureRecordPanelButton } from "./GestureRecordControl";
+import { PropertyPanelEmptyState } from "./PropertyPanelEmptyState";
 
 // Re-export helpers that external consumers import from this module
 export {
+  buildInsetClipPathSides,
   buildStrokeStyleUpdates,
   buildStrokeWidthStyleUpdates,
   getCssFilterFunctionPx,
@@ -41,6 +39,7 @@ export {
   inferBoxShadowPreset,
   inferClipPathPreset,
   normalizePanelPxValue,
+  parseInsetClipPathSides,
   setCssFilterFunctionPx,
 } from "./propertyPanelHelpers";
 
@@ -57,7 +56,9 @@ export const PropertyPanel = memo(function PropertyPanel({
   onSetStyle,
   onSetAttribute,
   onSetAttributeLive,
+  onApplyColorGradingScope,
   onSetHtmlAttribute,
+  onRemoveBackground,
   onSetManualOffset,
   onSetManualSize,
   onSetManualRotation,
@@ -96,6 +97,8 @@ export const PropertyPanel = memo(function PropertyPanel({
   recordingState,
   recordingDuration,
   onToggleRecording,
+  cropMode,
+  onCropModeChange,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
   const { showToast } = useStudioShellContext();
@@ -162,35 +165,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   };
 
   if (!element) {
-    return (
-      <div className="flex h-full flex-col bg-neutral-900">
-        <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
-          {multiSelectCount > 1 ? (
-            <>
-              <Layers size={18} className="mb-3 text-neutral-600" />
-              <p className="text-sm font-medium text-neutral-200">
-                {multiSelectCount} elements selected
-              </p>
-              <p className="mt-2 max-w-[260px] text-xs leading-5 text-neutral-500">
-                Select a single element to edit its properties. Click an element in the preview or
-                use the timeline layer panel.
-              </p>
-            </>
-          ) : (
-            <>
-              <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 element edits with safer geometry controls, color
-                picking, and cleaner grouped layer controls.
-              </p>
-            </>
-          )}
-        </div>
-      </div>
-    );
+    return <PropertyPanelEmptyState multiSelectCount={multiSelectCount} />;
   }
 
   const manualOffsetEditingDisabled = !element.capabilities.canApplyManualOffset;
@@ -352,18 +327,7 @@ export const PropertyPanel = memo(function PropertyPanel({
             onSetAttribute={onSetAttribute}
           />
         )}
-        {sections.media && (
-          <MediaSection
-            projectDir={projectDir}
-            element={element}
-            styles={styles}
-            onSetStyle={onSetStyle}
-            onSetAttribute={onSetAttribute}
-            onSetHtmlAttribute={onSetHtmlAttribute}
-          />
-        )}
-
-        {STUDIO_COLOR_GRADING_ENABLED && sections.colorGrading && (
+        {sections.colorGrading && (
           <ColorGradingSection
             key={[
               element.id ?? "",
@@ -371,11 +335,25 @@ export const PropertyPanel = memo(function PropertyPanel({
               element.selector ?? "",
               String(element.selectorIndex ?? ""),
             ].join("|")}
+            projectId={projectId}
             element={element}
             assets={assets}
             previewIframeRef={previewIframeRef}
             onImportAssets={onImportAssets}
             onSetAttributeLive={onSetAttributeLive}
+            onApplyScope={onApplyColorGradingScope}
+          />
+        )}
+
+        {sections.media && (
+          <MediaSection
+            projectDir={projectDir}
+            element={element}
+            styles={styles}
+            onSetStyle={onSetStyle}
+            onSetAttribute={onSetAttribute}
+            onSetHtmlAttribute={onSetHtmlAttribute}
+            onRemoveBackground={onRemoveBackground}
           />
         )}
 
@@ -580,6 +558,8 @@ export const PropertyPanel = memo(function PropertyPanel({
             onSetStyle={onSetStyle}
             onImportAssets={onImportAssets}
             gsapBorderRadius={gsapBorderRadius}
+            cropMode={cropMode}
+            onCropModeChange={onCropModeChange}
           />
         )}
       </div>

package/src/components/editor/PropertyPanelEmptyState.tsx

@@ -0,0 +1,33 @@
+import { Eye, Layers } from "../../icons/SystemIcons";
+
+export function PropertyPanelEmptyState({ multiSelectCount }: { multiSelectCount: number }) {
+  return (
+    <div className="flex h-full flex-col bg-neutral-900">
+      <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
+        {multiSelectCount > 1 ? (
+          <>
+            <Layers size={18} className="mb-3 text-neutral-600" />
+            <p className="text-sm font-medium text-neutral-200">
+              {multiSelectCount} elements selected
+            </p>
+            <p className="mt-2 max-w-[260px] text-xs leading-5 text-neutral-500">
+              Select a single element to edit its properties. Click an element in the preview or use
+              the timeline layer panel.
+            </p>
+          </>
+        ) : (
+          <>
+            <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 element edits with safer geometry controls, color picking,
+              and cleaner grouped layer controls.
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/editor/SnapToolbar.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
+import { Crop, MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 import { usePlayerStore } from "../../player/store/playerStore";
 
@@ -39,6 +39,9 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
   const motionPathCreateAvailable = usePlayerStore((s) => s.motionPathCreateAvailable);
   const motionPathArmed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
+  const cropAvailable = usePlayerStore((s) => s.cropAvailable);
+  const cropMode = usePlayerStore((s) => s.cropMode);
+  const setCropMode = usePlayerStore((s) => s.setCropMode);
   const popoverRef = useRef<HTMLDivElement>(null);
   const gridButtonRef = useRef<HTMLButtonElement>(null);
 
@@ -99,6 +102,22 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
       className="absolute top-2 right-2 z-50 flex items-center gap-1"
       onPointerDown={(e) => e.stopPropagation()}
     >
+      {cropAvailable && (
+        <button
+          type="button"
+          className={`rounded-md p-1.5 transition-colors ${
+            cropMode
+              ? "bg-studio-accent/20 text-studio-accent"
+              : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+          }`}
+          onClick={() => setCropMode(!cropMode)}
+          title={cropMode ? "Exit crop (Esc)" : "Crop selection"}
+          aria-label="Crop selection"
+          aria-pressed={cropMode}
+        >
+          <Crop size={16} weight={cropMode ? "fill" : "regular"} />
+        </button>
+      )}
       {motionPathCreateAvailable && (
         <button
           type="button"

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/colorGradingScopePatch.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { patchMediaColorGradingInHtml } from "./colorGradingScopePatch";
+
+describe("patchMediaColorGradingInHtml", () => {
+  it("adds color grading to video and image tags only", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      `<div><video id="v"></video><img id="i" /><audio id="a"></audio></div>`,
+      `{"preset":"natural-lift"}`,
+    );
+
+    expect(count).toBe(2);
+    expect(html).toContain(
+      `video id="v" data-color-grading="{&quot;preset&quot;:&quot;natural-lift&quot;}"`,
+    );
+    expect(html).toContain(
+      `img id="i" data-color-grading="{&quot;preset&quot;:&quot;natural-lift&quot;}"`,
+    );
+    expect(html).toContain(`<audio id="a"></audio>`);
+  });
+
+  it("replaces existing color grading without touching other attributes", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      `<video muted data-color-grading='old' playsinline></video>`,
+      `{"adjust":{"exposure":0.2}}`,
+    );
+
+    expect(count).toBe(1);
+    expect(html).toBe(
+      `<video muted data-color-grading="{&quot;adjust&quot;:{&quot;exposure&quot;:0.2}}" playsinline></video>`,
+    );
+  });
+
+  it("keeps quoted greater-than characters inside media attributes", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      `<img alt="before > after" src="photo.jpg">`,
+      `{"adjust":{"contrast":0.1}}`,
+    );
+
+    expect(count).toBe(1);
+    expect(html).toBe(
+      `<img alt="before > after" src="photo.jpg" data-color-grading="{&quot;adjust&quot;:{&quot;contrast&quot;:0.1}}">`,
+    );
+  });
+
+  it("removes color grading when value is empty", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      `<video data-color-grading="old"></video><img alt="">`,
+      null,
+    );
+
+    expect(count).toBe(1);
+    expect(html).toBe(`<video></video><img alt="">`);
+  });
+
+  it("does not patch media-looking text inside scripts, styles, or comments", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      [
+        `<script>const tpl = '<video id="script-video"></video>';</script>`,
+        `<style>.icon::before { content: "<img>"; }</style>`,
+        `<!-- <img id="commented"> -->`,
+        `<video id="real"></video>`,
+      ].join(""),
+      `{"preset":"clean-studio"}`,
+    );
+
+    expect(count).toBe(1);
+    expect(html).toContain(`<script>const tpl = '<video id="script-video"></video>';</script>`);
+    expect(html).toContain(`<style>.icon::before { content: "<img>"; }</style>`);
+    expect(html).toContain(`<!-- <img id="commented"> -->`);
+    expect(html).toContain(
+      `<video id="real" data-color-grading="{&quot;preset&quot;:&quot;clean-studio&quot;}"></video>`,
+    );
+  });
+});

package/src/components/editor/colorGradingScopePatch.ts

@@ -0,0 +1,57 @@
+const MEDIA_TAG_RE = /<\s*(video|img)\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+const COLOR_GRADING_ATTR_RE = /\sdata-color-grading=(["'])([\s\S]*?)\1/i;
+const IGNORED_HTML_RANGE_RE = /<!--[\s\S]*?-->|<(script|style)\b[\s\S]*?<\/\1\s*>/gi;
+
+interface TextRange {
+  start: number;
+  end: number;
+}
+
+function collectIgnoredRanges(html: string): TextRange[] {
+  const ranges: TextRange[] = [];
+  let match: RegExpExecArray | null;
+  IGNORED_HTML_RANGE_RE.lastIndex = 0;
+  while ((match = IGNORED_HTML_RANGE_RE.exec(html)) !== null) {
+    ranges.push({ start: match.index, end: match.index + match[0].length });
+  }
+  return ranges;
+}
+
+function isInsideRange(offset: number, ranges: TextRange[]): boolean {
+  return ranges.some((range) => offset >= range.start && offset < range.end);
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function patchMediaTag(tag: string, value: string | null): string {
+  if (value === null || value === "") {
+    return tag.replace(COLOR_GRADING_ATTR_RE, "");
+  }
+
+  const nextAttr = ` data-color-grading="${escapeHtmlAttribute(value)}"`;
+  if (COLOR_GRADING_ATTR_RE.test(tag)) {
+    return tag.replace(COLOR_GRADING_ATTR_RE, nextAttr);
+  }
+  return tag.replace(/\s*\/?>$/, (end) => `${nextAttr}${end}`);
+}
+
+export function patchMediaColorGradingInHtml(
+  html: string,
+  value: string | null,
+): { html: string; count: number } {
+  let count = 0;
+  const ignoredRanges = collectIgnoredRanges(html);
+  const patched = html.replace(MEDIA_TAG_RE, (tag, _tagName, offset: number) => {
+    if (isInsideRange(offset, ignoredRanges)) return tag;
+    const next = patchMediaTag(tag, value);
+    if (next !== tag) count += 1;
+    return next;
+  });
+  return { html: patched, count };
+}

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 });
+  });
+});