@bycrux/editor 0.4.1

package/src/crop/crop-math.ts

@@ -0,0 +1,125 @@
+// Pure math helpers for in-canvas image cropping.
+//
+// Coordinate spaces:
+// - "wrapper" px: pixels inside the SlideElement wrapper, which is sized
+//   `(element.w * scale, element.h * scale)` and rotated as a whole.
+// - "rendered source" px: pixels inside the letterboxed source image's
+//   rendered rectangle (which sits inside the wrapper at `(offsetX, offsetY)`).
+// - "source fraction": 0–1 fractions of the source's natural dimensions —
+//   exactly the storage format on `ImageElement.crop`.
+
+export type RenderedRect = {
+  offsetX: number
+  offsetY: number
+  width: number
+  height: number
+}
+
+export function renderedSourceRect(args: {
+  wrapperW: number
+  wrapperH: number
+  srcWidth: number
+  srcHeight: number
+}): RenderedRect {
+  const { wrapperW, wrapperH, srcWidth, srcHeight } = args
+  const wrapperAspect = wrapperW / wrapperH
+  const srcAspect = srcWidth / srcHeight
+
+  if (srcAspect >= wrapperAspect) {
+    const width = wrapperW
+    const height = wrapperW / srcAspect
+    return { offsetX: 0, offsetY: (wrapperH - height) / 2, width, height }
+  }
+  const height = wrapperH
+  const width = wrapperH * srcAspect
+  return { offsetX: (wrapperW - width) / 2, offsetY: 0, width, height }
+}
+
+export type CropFraction = { x: number; y: number; w: number; h: number }
+export type WrapperPxRect = { x: number; y: number; w: number; h: number }
+
+export function fractionToWrapperPx(args: {
+  crop: CropFraction
+  rendered: RenderedRect
+}): WrapperPxRect {
+  const { crop, rendered } = args
+  return {
+    x: rendered.offsetX + crop.x * rendered.width,
+    y: rendered.offsetY + crop.y * rendered.height,
+    w: crop.w * rendered.width,
+    h: crop.h * rendered.height,
+  }
+}
+
+export function wrapperPxToFraction(args: {
+  px: WrapperPxRect
+  rendered: RenderedRect
+}): CropFraction {
+  const { px, rendered } = args
+  return {
+    x: (px.x - rendered.offsetX) / rendered.width,
+    y: (px.y - rendered.offsetY) / rendered.height,
+    w: px.w / rendered.width,
+    h: px.h / rendered.height,
+  }
+}
+
+export type CropHandle = 'nw' | 'n' | 'ne' | 'w' | 'e' | 'sw' | 's' | 'se'
+
+const MIN_FRACTION = 0.02 // never let the crop shrink below 2% of source on either axis.
+
+// Free-form crop drag. Each handle moves its own edges by the delta; corners
+// move two edges, edges move one. Result is min-size enforced and clamped to
+// the rendered source bounds. The element box will be resized at commit time
+// to match the resulting crop's aspect — see commitAndExitCropMode.
+export function applyCropHandleDrag(args: {
+  handle: CropHandle
+  initialCrop: CropFraction
+  deltaPx: { x: number; y: number }
+  wrapperW: number
+  wrapperH: number
+  srcWidth: number
+  srcHeight: number
+}): CropFraction {
+  const { handle, initialCrop, deltaPx, wrapperW, wrapperH, srcWidth, srcHeight } = args
+  const rendered = renderedSourceRect({ wrapperW, wrapperH, srcWidth, srcHeight })
+
+  const initialPx = fractionToWrapperPx({ crop: initialCrop, rendered })
+
+  let left = initialPx.x
+  let top = initialPx.y
+  let right = initialPx.x + initialPx.w
+  let bottom = initialPx.y + initialPx.h
+
+  if (handle === 'nw' || handle === 'w' || handle === 'sw') left += deltaPx.x
+  if (handle === 'ne' || handle === 'e' || handle === 'se') right += deltaPx.x
+  if (handle === 'nw' || handle === 'n' || handle === 'ne') top += deltaPx.y
+  if (handle === 'sw' || handle === 's' || handle === 'se') bottom += deltaPx.y
+
+  // Enforce min size, anchored on the side opposite to the dragged edge.
+  const minW = MIN_FRACTION * rendered.width
+  const minH = MIN_FRACTION * rendered.height
+  if (right - left < minW) {
+    if (handle === 'nw' || handle === 'w' || handle === 'sw') left = right - minW
+    else right = left + minW
+  }
+  if (bottom - top < minH) {
+    if (handle === 'nw' || handle === 'n' || handle === 'ne') top = bottom - minH
+    else bottom = top + minH
+  }
+
+  // Clamp to source bounds.
+  const minLeft = rendered.offsetX
+  const minTop = rendered.offsetY
+  const maxRight = rendered.offsetX + rendered.width
+  const maxBottom = rendered.offsetY + rendered.height
+  if (left < minLeft) left = minLeft
+  if (top < minTop) top = minTop
+  if (right > maxRight) right = maxRight
+  if (bottom > maxBottom) bottom = maxBottom
+
+  return wrapperPxToFraction({
+    px: { x: left, y: top, w: right - left, h: bottom - top },
+    rendered,
+  })
+}

package/src/gestures/helpers/__tests__/element-transform.test.ts

@@ -0,0 +1,30 @@
+/// <reference types="vitest/globals" />
+import { buildElementTransform } from '../element-transform'
+
+describe('buildElementTransform', () => {
+  it('returns only translate when rotation is zero', () => {
+    expect(buildElementTransform(10, 20, 2, 0)).toBe('translate(20px, 40px)')
+  })
+
+  it('omits rotation when rotation is undefined', () => {
+    expect(buildElementTransform(0, 0, 1, undefined)).toBe('translate(0px, 0px)')
+  })
+
+  it('omits rotation when rotation is null', () => {
+    expect(buildElementTransform(0, 0, 1, null as unknown as undefined))
+      .toBe('translate(0px, 0px)')
+  })
+
+  it('composes translate + rotate when rotation is non-zero', () => {
+    expect(buildElementTransform(5, 5, 2, 45))
+      .toBe('translate(10px, 10px) rotate(45deg)')
+  })
+
+  it('handles negative coordinates', () => {
+    expect(buildElementTransform(-3, -4, 1, 0)).toBe('translate(-3px, -4px)')
+  })
+
+  it('handles fractional scale (passes through to sub-pixel CSS)', () => {
+    expect(buildElementTransform(10, 10, 0.5, 0)).toBe('translate(5px, 5px)')
+  })
+})

package/src/gestures/helpers/drag.ts

@@ -0,0 +1,24 @@
+export type DragState = {
+  elementId: string;
+  startCursor: { x: number; y: number };
+  startElement: { x: number; y: number };
+};
+
+export function startDrag(
+  elementId: string,
+  cursor: { x: number; y: number },
+  element: { x: number; y: number },
+): DragState {
+  return { elementId, startCursor: cursor, startElement: element };
+}
+
+export function nextDragPosition(
+  state: DragState,
+  cursor: { x: number; y: number },
+  scale: number,
+): { x: number; y: number } {
+  return {
+    x: state.startElement.x + (cursor.x - state.startCursor.x) / scale,
+    y: state.startElement.y + (cursor.y - state.startCursor.y) / scale,
+  };
+}

package/src/gestures/helpers/element-transform.ts

@@ -0,0 +1,15 @@
+// Builds the CSS `transform` value for an element wrapper. Centralised so
+// React renders (JSX style) and in-gesture mutations (direct DOM style
+// writes in SlideCanvas) produce byte-identical strings — that prevents
+// the wrapper from "snapping" on commit when React's render writes a
+// slightly different transform than the one the DOM already has.
+
+export function buildElementTransform(
+  x: number,
+  y: number,
+  scale: number,
+  rotation: number | undefined | null,
+): string {
+  const base = `translate(${x * scale}px, ${y * scale}px)`
+  return rotation ? `${base} rotate(${rotation}deg)` : base
+}

package/src/gestures/helpers/resize.ts

@@ -0,0 +1,60 @@
+export type ResizeHandle = 'nw' | 'n' | 'ne' | 'w' | 'e' | 'sw' | 's' | 'se';
+
+export type ResizeState = {
+  elementId: string;
+  handle: ResizeHandle;
+  startCursor: { x: number; y: number };
+  startBox: { x: number; y: number; w: number; h: number };
+};
+
+export function startResize(
+  elementId: string,
+  handle: ResizeHandle,
+  cursor: { x: number; y: number },
+  box: { x: number; y: number; w: number; h: number },
+): ResizeState {
+  return { elementId, handle, startCursor: cursor, startBox: box };
+}
+
+export function nextResizeBox(
+  state: ResizeState,
+  cursor: { x: number; y: number },
+  scale: number,
+): { x: number; y: number; w: number; h: number } {
+  const dx = (cursor.x - state.startCursor.x) / scale;
+  const dy = (cursor.y - state.startCursor.y) / scale;
+  let { x, y, w, h } = state.startBox;
+
+  if (state.handle.includes('w')) {
+    const proposedW = state.startBox.w - dx;
+    if (proposedW < 1) {
+      x = state.startBox.x + state.startBox.w - 1;
+      w = 1;
+    } else {
+      x = state.startBox.x + dx;
+      w = proposedW;
+    }
+  }
+  if (state.handle.includes('e')) {
+    w = state.startBox.w + dx;
+  }
+  if (state.handle.includes('n')) {
+    const proposedH = state.startBox.h - dy;
+    if (proposedH < 1) {
+      y = state.startBox.y + state.startBox.h - 1;
+      h = 1;
+    } else {
+      y = state.startBox.y + dy;
+      h = proposedH;
+    }
+  }
+  if (state.handle.includes('s')) {
+    h = state.startBox.h + dy;
+  }
+  return {
+    x,
+    y,
+    w: Math.max(w, 1),
+    h: Math.max(h, 1),
+  };
+}

package/src/gestures/helpers/rotate.ts

@@ -0,0 +1,44 @@
+export type RotateState = {
+  elementId: string;
+  center: { x: number; y: number };
+  startCursorAngle: number; // degrees
+  startRotation: number;     // degrees
+};
+
+const RAD_TO_DEG = 180 / Math.PI;
+
+function angleOf(center: { x: number; y: number }, cursor: { x: number; y: number }): number {
+  return Math.atan2(cursor.y - center.y, cursor.x - center.x) * RAD_TO_DEG;
+}
+
+export function startRotate(
+  elementId: string,
+  center: { x: number; y: number },
+  cursor: { x: number; y: number },
+  rotation: number,
+): RotateState {
+  return {
+    elementId,
+    center,
+    startCursorAngle: angleOf(center, cursor),
+    startRotation: rotation,
+  };
+}
+
+export function nextRotation(
+  state: RotateState,
+  cursor: { x: number; y: number },
+  snapThresholdDeg: number = 5,
+): number {
+  const cursorAngle = angleOf(state.center, cursor);
+  const delta = cursorAngle - state.startCursorAngle;
+  const raw = state.startRotation + delta;
+  // Normalize to [0, 360).
+  const norm = ((raw % 360) + 360) % 360;
+  for (const snap of [0, 90, 180, 270]) {
+    if (Math.abs(norm - snap) <= snapThresholdDeg) return snap;
+  }
+  // Also check the 360 boundary (which is 0).
+  if (Math.abs(norm - 360) <= snapThresholdDeg) return 0;
+  return norm;
+}

package/src/gestures/helpers/snap.ts

@@ -0,0 +1,64 @@
+export type SnapGuide = { axis: 'x' | 'y'; at: number };
+
+export type SnapResult = {
+  position: { x: number; y: number };
+  guides: SnapGuide[];
+};
+
+// `threshold` is in the SAME units as proposed/slide (logical, unscaled).
+// Callers that want a screen-pixel-relative feel should pass roughly
+// `desired_screen_px / scale`. Default is a conservative ~0.7% of a 1080-unit
+// slide — tight enough that snap doesn't trap a near-aligned element at rest,
+// loose enough to still feel magnetic on deliberate alignment passes.
+export function snapToSlide(
+  proposed: { x: number; y: number; w: number; h: number },
+  slide: { w: number; h: number },
+  threshold: number = 8,
+): SnapResult {
+  const thresholdX = threshold;
+  const thresholdY = threshold;
+  const guides: SnapGuide[] = [];
+  let { x, y } = proposed;
+
+  // X-axis snap candidates: element-left/center/right vs slide-left/center/right.
+  const elCenterX = proposed.x + proposed.w / 2;
+  const elRightX = proposed.x + proposed.w;
+  const slideCenterX = slide.w / 2;
+  const xCandidates: Array<{ at: number; dx: number }> = [
+    { at: 0, dx: -proposed.x }, // align element left to slide left
+    { at: slideCenterX, dx: slideCenterX - elCenterX }, // center
+    { at: slide.w, dx: slide.w - elRightX }, // align element right to slide right
+  ];
+  let bestX = { dx: Infinity, at: 0 };
+  for (const c of xCandidates) {
+    if (Math.abs(c.dx) < Math.abs(bestX.dx) && Math.abs(c.dx) <= thresholdX) {
+      bestX = c;
+    }
+  }
+  if (bestX.dx !== Infinity) {
+    x = proposed.x + bestX.dx;
+    guides.push({ axis: 'x', at: bestX.at });
+  }
+
+  // Y-axis snap (mirror).
+  const elCenterY = proposed.y + proposed.h / 2;
+  const elBottomY = proposed.y + proposed.h;
+  const slideCenterY = slide.h / 2;
+  const yCandidates: Array<{ at: number; dy: number }> = [
+    { at: 0, dy: -proposed.y },
+    { at: slideCenterY, dy: slideCenterY - elCenterY },
+    { at: slide.h, dy: slide.h - elBottomY },
+  ];
+  let bestY = { dy: Infinity, at: 0 };
+  for (const c of yCandidates) {
+    if (Math.abs(c.dy) < Math.abs(bestY.dy) && Math.abs(c.dy) <= thresholdY) {
+      bestY = c;
+    }
+  }
+  if (bestY.dy !== Infinity) {
+    y = proposed.y + bestY.dy;
+    guides.push({ axis: 'y', at: bestY.at });
+  }
+
+  return { position: { x, y }, guides };
+}

package/src/gestures/hooks/useOverlayDrag.ts

@@ -0,0 +1,106 @@
+import { useCallback, useRef, useState } from 'react';
+import { startDrag, nextDragPosition, type DragState } from '../helpers/drag';
+import { snapToSlide, type SnapGuide } from '../helpers/snap';
+
+// Cursor must travel this many screen pixels from pointer-down before snap
+// engages. Prevents the element from being trapped at a snap target that
+// happens to align with its starting position (e.g. an element whose bottom
+// edge sits exactly on the slide's bottom edge would otherwise re-snap on
+// every pointer event until the user crosses the threshold).
+const DEAD_ZONE_PX = 12;
+
+// Screen-pixel-relative snap distance. Converted to logical units per move
+// using the current scale; floored at 1 logical unit so very-zoomed-out views
+// still snap meaningfully.
+const SNAP_PX = 6;
+
+export type UseOverlayDragArgs = {
+  scale: number;
+  slide: { w: number; h: number };
+  // Called on every pointer move with the latest position and current rotation.
+  // Consumers should perform a cheap, side-effect-only update here (e.g. mutate
+  // DOM style) — do NOT trigger React state updates, since this fires at
+  // pointer-event rate.
+  onPreview: (elementId: string, x: number, y: number, rotation: number) => void;
+  // Called once on pointer up with the final position. This is where React
+  // state should be committed and persistence should be triggered.
+  onCommit?: (elementId: string, x: number, y: number) => void | Promise<void>;
+};
+
+export type UseOverlayDragReturn = {
+  guides: SnapGuide[];
+  onPointerDown: (
+    elementId: string,
+    cursor: { x: number; y: number },
+    element: { x: number; y: number; w: number; h: number; rotation?: number },
+  ) => void;
+  onPointerMove: (cursor: { x: number; y: number }) => void;
+  onPointerUp: () => void;
+};
+
+export function useOverlayDrag({ scale, slide, onPreview, onCommit }: UseOverlayDragArgs): UseOverlayDragReturn {
+  const [guides, setGuides] = useState<SnapGuide[]>([]);
+  const stateRef = useRef<DragState | null>(null);
+  const sizeRef = useRef<{ w: number; h: number } | null>(null);
+  const latestRef = useRef<{ id: string; x: number; y: number } | null>(null);
+  const rotationRef = useRef<number>(0);
+
+  const onPointerDown = useCallback(
+    (
+      elementId: string,
+      cursor: { x: number; y: number },
+      element: { x: number; y: number; w: number; h: number; rotation?: number },
+    ) => {
+      stateRef.current = startDrag(elementId, cursor, element);
+      sizeRef.current = { w: element.w, h: element.h };
+      rotationRef.current = element.rotation ?? 0;
+      latestRef.current = { id: elementId, x: element.x, y: element.y };
+    },
+    [],
+  );
+
+  const onPointerMove = useCallback(
+    (cursor: { x: number; y: number }) => {
+      const s = stateRef.current;
+      const size = sizeRef.current;
+      if (!s || !size) return;
+      const raw = nextDragPosition(s, cursor, scale);
+
+      // Skip snapping until the cursor has cleared the dead-zone. This is a
+      // gesture-level escape hatch: elements that start at a snap target can
+      // never get unstuck otherwise (every move re-snaps them back).
+      const cursorDx = cursor.x - s.startCursor.x;
+      const cursorDy = cursor.y - s.startCursor.y;
+      const cursorDistSq = cursorDx * cursorDx + cursorDy * cursorDy;
+      const inDeadZone = cursorDistSq < DEAD_ZONE_PX * DEAD_ZONE_PX;
+
+      const snap = inDeadZone
+        ? { position: raw, guides: [] as SnapGuide[] }
+        : snapToSlide(
+            { x: raw.x, y: raw.y, w: size.w, h: size.h },
+            slide,
+            Math.max(SNAP_PX / scale, 1),
+          );
+
+      setGuides(snap.guides);
+      latestRef.current = { id: s.elementId, x: snap.position.x, y: snap.position.y };
+      onPreview(s.elementId, snap.position.x, snap.position.y, rotationRef.current);
+    },
+    [scale, slide, onPreview],
+  );
+
+  const onPointerUp = useCallback(() => {
+    const final = latestRef.current;
+    // Idempotent — `pointercancel` and `pointerup` can both fire for the same
+    // gesture (especially after `setPointerCapture`); the second arrival sees
+    // null state and exits before re-committing.
+    if (!final) return;
+    stateRef.current = null;
+    sizeRef.current = null;
+    latestRef.current = null;
+    setGuides([]);
+    void onCommit?.(final.id, final.x, final.y);
+  }, [onCommit]);
+
+  return { guides, onPointerDown, onPointerMove, onPointerUp };
+}

package/src/gestures/hooks/useOverlayResize.ts

@@ -0,0 +1,67 @@
+import { useCallback, useRef } from 'react';
+import { startResize, nextResizeBox, type ResizeState, type ResizeHandle } from '../helpers/resize';
+
+export type UseOverlayResizeArgs = {
+  scale: number;
+  // Called on every pointer move with the new box and current rotation. Use for
+  // cheap, side-effect-only previews (e.g. direct DOM mutation) — do NOT trigger
+  // React state updates here.
+  onPreview: (
+    elementId: string,
+    box: { x: number; y: number; w: number; h: number },
+    rotation: number,
+  ) => void;
+  // Called once on pointer up with the final box. Commit React state here.
+  onCommit?: (elementId: string, box: { x: number; y: number; w: number; h: number }) => void | Promise<void>;
+};
+
+export type UseOverlayResizeReturn = {
+  onPointerDown: (
+    elementId: string,
+    handle: ResizeHandle,
+    cursor: { x: number; y: number },
+    box: { x: number; y: number; w: number; h: number; rotation?: number },
+  ) => void;
+  onPointerMove: (cursor: { x: number; y: number }) => void;
+  onPointerUp: () => void;
+};
+
+export function useOverlayResize({ scale, onPreview, onCommit }: UseOverlayResizeArgs): UseOverlayResizeReturn {
+  const stateRef = useRef<ResizeState | null>(null);
+  const latestRef = useRef<{ id: string; box: { x: number; y: number; w: number; h: number } } | null>(null);
+  const rotationRef = useRef<number>(0);
+
+  const onPointerDown = useCallback(
+    (
+      elementId: string,
+      handle: ResizeHandle,
+      cursor: { x: number; y: number },
+      box: { x: number; y: number; w: number; h: number; rotation?: number },
+    ) => {
+      stateRef.current = startResize(elementId, handle, cursor, box);
+      rotationRef.current = box.rotation ?? 0;
+      latestRef.current = { id: elementId, box };
+    },
+    [],
+  );
+
+  const onPointerMove = useCallback(
+    (cursor: { x: number; y: number }) => {
+      const s = stateRef.current;
+      if (!s) return;
+      const box = nextResizeBox(s, cursor, scale);
+      latestRef.current = { id: s.elementId, box };
+      onPreview(s.elementId, box, rotationRef.current);
+    },
+    [scale, onPreview],
+  );
+
+  const onPointerUp = useCallback(() => {
+    const final = latestRef.current;
+    stateRef.current = null;
+    latestRef.current = null;
+    if (final) void onCommit?.(final.id, final.box);
+  }, [onCommit]);
+
+  return { onPointerDown, onPointerMove, onPointerUp };
+}

package/src/gestures/hooks/useOverlayRotate.ts

@@ -0,0 +1,64 @@
+import { useCallback, useRef } from 'react';
+import { startRotate, nextRotation, type RotateState } from '../helpers/rotate';
+
+export type UseOverlayRotateArgs = {
+  // Called on every pointer move with the new rotation and the element's (x, y).
+  // Use for cheap, side-effect-only previews (e.g. direct DOM mutation) — do NOT
+  // trigger React state updates here.
+  onPreview: (elementId: string, rotation: number, x: number, y: number) => void;
+  // Called once on pointer up with the final rotation. Commit React state here.
+  onCommit?: (elementId: string, rotation: number) => void | Promise<void>;
+};
+
+export type UseOverlayRotateReturn = {
+  onPointerDown: (
+    elementId: string,
+    center: { x: number; y: number },
+    cursor: { x: number; y: number },
+    currentRotation: number,
+    position: { x: number; y: number },
+  ) => void;
+  onPointerMove: (cursor: { x: number; y: number }) => void;
+  onPointerUp: () => void;
+};
+
+export function useOverlayRotate({ onPreview, onCommit }: UseOverlayRotateArgs): UseOverlayRotateReturn {
+  const stateRef = useRef<RotateState | null>(null);
+  const latestRef = useRef<{ id: string; rotation: number } | null>(null);
+  const positionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+
+  const onPointerDown = useCallback(
+    (
+      elementId: string,
+      center: { x: number; y: number },
+      cursor: { x: number; y: number },
+      currentRotation: number,
+      position: { x: number; y: number },
+    ) => {
+      stateRef.current = startRotate(elementId, center, cursor, currentRotation);
+      positionRef.current = position;
+      latestRef.current = { id: elementId, rotation: currentRotation };
+    },
+    [],
+  );
+
+  const onPointerMove = useCallback(
+    (cursor: { x: number; y: number }) => {
+      const s = stateRef.current;
+      if (!s) return;
+      const rotation = nextRotation(s, cursor);
+      latestRef.current = { id: s.elementId, rotation };
+      onPreview(s.elementId, rotation, positionRef.current.x, positionRef.current.y);
+    },
+    [onPreview],
+  );
+
+  const onPointerUp = useCallback(() => {
+    const final = latestRef.current;
+    stateRef.current = null;
+    latestRef.current = null;
+    if (final) void onCommit?.(final.id, final.rotation);
+  }, [onCommit]);
+
+  return { onPointerDown, onPointerMove, onPointerUp };
+}

package/src/gestures/index.ts

@@ -0,0 +1,16 @@
+export { buildElementTransform } from './helpers/element-transform';
+export { startDrag, nextDragPosition } from './helpers/drag';
+export type { DragState } from './helpers/drag';
+export { startResize, nextResizeBox } from './helpers/resize';
+export type { ResizeHandle, ResizeState } from './helpers/resize';
+export { startRotate, nextRotation } from './helpers/rotate';
+export type { RotateState } from './helpers/rotate';
+export { snapToSlide } from './helpers/snap';
+export type { SnapGuide, SnapResult } from './helpers/snap';
+
+export { useOverlayDrag } from './hooks/useOverlayDrag';
+export type { UseOverlayDragArgs, UseOverlayDragReturn } from './hooks/useOverlayDrag';
+export { useOverlayResize } from './hooks/useOverlayResize';
+export type { UseOverlayResizeArgs, UseOverlayResizeReturn } from './hooks/useOverlayResize';
+export { useOverlayRotate } from './hooks/useOverlayRotate';
+export type { UseOverlayRotateArgs, UseOverlayRotateReturn } from './hooks/useOverlayRotate';