@hyperframes/studio 0.6.72 → 0.6.74

package/src/components/editor/SnapGuideOverlay.tsx

@@ -0,0 +1,166 @@
+// fallow-ignore-file unused-file
+import { memo, useRef, type RefObject } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+import type { SnapGuide, SpacingGuide } from "./snapEngine";
+
+export interface SnapGuidesState {
+  guides: SnapGuide[];
+  spacingGuides: SpacingGuide[];
+}
+
+const MAX_GUIDES = 6;
+const MAX_SPACING_GUIDES = 4;
+
+const GUIDE_COLOR = "rgba(255, 68, 204, 0.85)";
+const SPACING_COLOR = "rgba(255, 68, 204, 0.6)";
+const SPACING_BG = "rgba(255, 68, 204, 0.15)";
+
+interface SnapGuideOverlayProps {
+  snapGuidesRef: RefObject<SnapGuidesState | null>;
+  overlayWidth: number;
+  overlayHeight: number;
+}
+
+export const SnapGuideOverlay = memo(function SnapGuideOverlay({
+  snapGuidesRef,
+  overlayWidth,
+  overlayHeight,
+}: SnapGuideOverlayProps) {
+  const guideElsRef = useRef<(HTMLDivElement | null)[]>([]);
+  const spacingElsRef = useRef<(HTMLDivElement | null)[]>([]);
+  const spacingLabelElsRef = useRef<(HTMLSpanElement | null)[]>([]);
+  const overlayWidthRef = useRef(overlayWidth);
+  overlayWidthRef.current = overlayWidth;
+  const overlayHeightRef = useRef(overlayHeight);
+  overlayHeightRef.current = overlayHeight;
+
+  useMountEffect(() => {
+    let frame = 0;
+
+    // fallow-ignore-next-line complexity
+    const update = () => {
+      frame = requestAnimationFrame(update);
+
+      const state = snapGuidesRef.current;
+      const guides = state?.guides ?? [];
+      const spacingGuides = state?.spacingGuides ?? [];
+      const w = overlayWidthRef.current;
+      const h = overlayHeightRef.current;
+
+      for (let i = 0; i < MAX_GUIDES; i++) {
+        const el = guideElsRef.current[i];
+        if (!el) continue;
+
+        const guide = guides[i];
+        if (!guide) {
+          el.style.display = "none";
+          continue;
+        }
+
+        el.style.display = "";
+        if (guide.axis === "x") {
+          el.style.left = `${guide.position}px`;
+          el.style.top = "0";
+          el.style.width = "1px";
+          el.style.height = `${h}px`;
+        } else {
+          el.style.left = "0";
+          el.style.top = `${guide.position}px`;
+          el.style.width = `${w}px`;
+          el.style.height = "1px";
+        }
+      }
+
+      for (let i = 0; i < MAX_SPACING_GUIDES; i++) {
+        const el = spacingElsRef.current[i];
+        const label = spacingLabelElsRef.current[i];
+        if (!el) continue;
+
+        const sg = spacingGuides[i];
+        if (!sg) {
+          el.style.display = "none";
+          continue;
+        }
+
+        el.style.display = "flex";
+        el.style.alignItems = "center";
+        el.style.justifyContent = "center";
+        if (sg.axis === "x") {
+          el.style.left = `${sg.position}px`;
+          el.style.top = `${sg.from}px`;
+          el.style.width = `${sg.size}px`;
+          el.style.height = `${sg.to - sg.from}px`;
+          el.style.borderLeft = `1px dashed ${SPACING_COLOR}`;
+          el.style.borderRight = `1px dashed ${SPACING_COLOR}`;
+          el.style.borderTop = "none";
+          el.style.borderBottom = "none";
+        } else {
+          el.style.left = `${sg.from}px`;
+          el.style.top = `${sg.position}px`;
+          el.style.width = `${sg.to - sg.from}px`;
+          el.style.height = `${sg.size}px`;
+          el.style.borderTop = `1px dashed ${SPACING_COLOR}`;
+          el.style.borderBottom = `1px dashed ${SPACING_COLOR}`;
+          el.style.borderLeft = "none";
+          el.style.borderRight = "none";
+        }
+
+        if (label) {
+          label.textContent = `${Math.round(sg.size)}`;
+        }
+      }
+    };
+
+    frame = requestAnimationFrame(update);
+    return () => cancelAnimationFrame(frame);
+  });
+
+  return (
+    <div aria-hidden="true" className="pointer-events-none absolute inset-0">
+      {Array.from({ length: MAX_GUIDES }, (_, i) => (
+        <div
+          key={`guide-${i}`}
+          ref={(el) => {
+            guideElsRef.current[i] = el;
+          }}
+          style={{
+            display: "none",
+            position: "absolute",
+            backgroundColor: GUIDE_COLOR,
+            zIndex: 50,
+          }}
+        />
+      ))}
+
+      {Array.from({ length: MAX_SPACING_GUIDES }, (_, i) => (
+        <div
+          key={`spacing-${i}`}
+          ref={(el) => {
+            spacingElsRef.current[i] = el;
+          }}
+          style={{
+            display: "none",
+            position: "absolute",
+            zIndex: 50,
+          }}
+        >
+          <span
+            ref={(el) => {
+              spacingLabelElsRef.current[i] = el;
+            }}
+            style={{
+              fontSize: "10px",
+              fontFamily: "monospace",
+              color: GUIDE_COLOR,
+              backgroundColor: SPACING_BG,
+              padding: "0 3px",
+              borderRadius: "2px",
+              lineHeight: "14px",
+              whiteSpace: "nowrap",
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/components/editor/SnapToolbar.tsx

@@ -0,0 +1,163 @@
+// fallow-ignore-file unused-file
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { MagnetStraight, GridFour } from "@phosphor-icons/react";
+import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
+
+const SNAP_DEFAULTS = {
+  snapEnabled: true,
+  gridVisible: false,
+  gridSpacing: 50,
+  snapToGrid: false,
+};
+
+// fallow-ignore-next-line complexity
+function readSnapPrefs() {
+  const prefs = readStudioUiPreferences();
+  return {
+    snapEnabled: prefs.snapEnabled ?? SNAP_DEFAULTS.snapEnabled,
+    gridVisible: prefs.gridVisible ?? SNAP_DEFAULTS.gridVisible,
+    gridSpacing: prefs.gridSpacing ?? SNAP_DEFAULTS.gridSpacing,
+    snapToGrid: prefs.snapToGrid ?? SNAP_DEFAULTS.snapToGrid,
+  };
+}
+
+interface SnapToolbarProps {
+  onSnapChange?: (prefs: {
+    snapEnabled: boolean;
+    gridVisible: boolean;
+    gridSpacing: number;
+    snapToGrid: boolean;
+  }) => void;
+}
+
+// fallow-ignore-next-line complexity
+export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolbarProps) {
+  const [prefs, setPrefs] = useState(readSnapPrefs);
+  const [gridPopoverOpen, setGridPopoverOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const gridButtonRef = useRef<HTMLButtonElement>(null);
+
+  const updatePrefs = useCallback(
+    (patch: Partial<typeof prefs>) => {
+      setPrefs((prev) => {
+        const next = { ...prev, ...patch };
+        writeStudioUiPreferences(patch);
+        onSnapChange?.(next);
+        return next;
+      });
+    },
+    [onSnapChange],
+  );
+
+  const toggleSnap = useCallback(() => {
+    updatePrefs({ snapEnabled: !prefs.snapEnabled });
+  }, [prefs.snapEnabled, updatePrefs]);
+
+  const toggleGrid = useCallback(() => {
+    updatePrefs({ gridVisible: !prefs.gridVisible });
+  }, [prefs.gridVisible, updatePrefs]);
+
+  useEffect(() => {
+    // fallow-ignore-next-line complexity
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const t = e.target;
+      if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) return;
+      if (t instanceof HTMLElement && t.isContentEditable) return;
+      if (t instanceof HTMLIFrameElement) return;
+      if (e.key === "s" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault();
+        updatePrefs({ snapEnabled: !readSnapPrefs().snapEnabled });
+      }
+      if (e.key === "g" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault();
+        updatePrefs({ gridVisible: !readSnapPrefs().gridVisible });
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [updatePrefs]);
+
+  useEffect(() => {
+    if (!gridPopoverOpen) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (popoverRef.current?.contains(target) || gridButtonRef.current?.contains(target)) return;
+      setGridPopoverOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [gridPopoverOpen]);
+
+  return (
+    <div className="absolute top-2 right-2 z-50 flex items-center gap-1">
+      <button
+        type="button"
+        className={`rounded-md p-1.5 transition-colors ${
+          prefs.snapEnabled
+            ? "bg-studio-accent/20 text-studio-accent"
+            : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+        }`}
+        onClick={toggleSnap}
+        title={prefs.snapEnabled ? "Snap enabled (S)" : "Snap disabled (S)"}
+        aria-label="Toggle snap"
+      >
+        <MagnetStraight size={16} weight={prefs.snapEnabled ? "fill" : "regular"} />
+      </button>
+
+      <div className="relative">
+        <button
+          ref={gridButtonRef}
+          type="button"
+          className={`rounded-md p-1.5 transition-colors ${
+            prefs.gridVisible
+              ? "bg-studio-accent/20 text-studio-accent"
+              : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+          }`}
+          onClick={toggleGrid}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            setGridPopoverOpen((v) => !v);
+          }}
+          title={prefs.gridVisible ? "Grid visible (G)" : "Grid hidden (G)"}
+          aria-label="Toggle grid"
+        >
+          <GridFour size={16} weight={prefs.gridVisible ? "fill" : "regular"} />
+        </button>
+
+        {gridPopoverOpen && (
+          <div
+            ref={popoverRef}
+            className="absolute right-0 top-full mt-1 rounded-lg bg-neutral-800 border border-neutral-700 p-3 shadow-xl min-w-[180px]"
+          >
+            <label className="flex items-center justify-between text-xs text-white/80 mb-2">
+              <span>Grid spacing</span>
+              <input
+                type="number"
+                min={10}
+                max={500}
+                step={10}
+                value={prefs.gridSpacing}
+                onChange={(e) => {
+                  const val = Number.parseInt(e.target.value, 10);
+                  if (Number.isFinite(val) && val >= 10 && val <= 500) {
+                    updatePrefs({ gridSpacing: val });
+                  }
+                }}
+                className="w-16 rounded bg-neutral-900 border border-neutral-600 px-1.5 py-0.5 text-xs text-white text-right tabular-nums outline-none focus:border-studio-accent"
+              />
+            </label>
+            <label className="flex items-center gap-2 text-xs text-white/80 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={prefs.snapToGrid}
+                onChange={() => updatePrefs({ snapToGrid: !prefs.snapToGrid })}
+                className="accent-studio-accent"
+              />
+              <span>Snap to grid</span>
+            </label>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/editor/SpringEaseEditor.tsx

@@ -0,0 +1,256 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { generateSpringEaseData, SPRING_PRESETS } from "@hyperframes/core/spring-ease";
+import { LABEL } from "./MotionPanelFields";
+import { RotateCcw } from "../../icons/SystemIcons";
+
+interface SpringParams {
+  mass: number;
+  stiffness: number;
+  damping: number;
+}
+
+const DEFAULT_SPRING: SpringParams = { mass: 1, stiffness: 180, damping: 12 };
+
+const SLIDERS: {
+  key: keyof SpringParams;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+}[] = [
+  { key: "mass", label: "Mass", min: 0.1, max: 5, step: 0.1 },
+  { key: "stiffness", label: "Stiffness", min: 10, max: 500, step: 10 },
+  { key: "damping", label: "Damping", min: 1, max: 50, step: 1 },
+];
+
+function springValue(mass: number, stiffness: number, damping: number, t: number): number {
+  const w0 = Math.sqrt(stiffness / mass);
+  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  if (zeta < 1) {
+    const wd = w0 * Math.sqrt(1 - zeta * zeta);
+    return (
+      1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + ((zeta * w0) / wd) * Math.sin(wd * t))
+    );
+  }
+  if (zeta === 1) {
+    return 1 - (1 + w0 * t) * Math.exp(-w0 * t);
+  }
+  const s1 = -w0 * (zeta - Math.sqrt(zeta * zeta - 1));
+  const s2 = -w0 * (zeta + Math.sqrt(zeta * zeta - 1));
+  return 1 + (s1 * Math.exp(s2 * t) - s2 * Math.exp(s1 * t)) / (s2 - s1);
+}
+
+function springSimDuration(mass: number, stiffness: number, damping: number): number {
+  const w0 = Math.sqrt(stiffness / mass);
+  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  if (zeta < 1) return Math.min(5 / (zeta * w0), 10);
+  const decayRate = zeta * w0 - w0 * Math.sqrt(zeta * zeta - 1);
+  return Math.min(4 / Math.max(decayRate, 0.01), 10);
+}
+
+function buildSpringPath(
+  params: SpringParams,
+  mapFn: (point: { x: number; y: number }) => { x: number; y: number },
+): string {
+  const steps = 64;
+  const simDur = springSimDuration(params.mass, params.stiffness, params.damping);
+  const commands: string[] = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const simT = t * simDur;
+    const y = springValue(params.mass, params.stiffness, params.damping, simT);
+    const mapped = mapFn({ x: t, y });
+    commands.push(`${i === 0 ? "M" : "L"}${mapped.x.toFixed(2)},${mapped.y.toFixed(2)}`);
+  }
+  return commands.join(" ");
+}
+
+export function SpringEaseEditor({
+  onCommit,
+}: {
+  onCommit: (easeId: string, easeData: string) => void;
+}) {
+  const [params, setParams] = useState<SpringParams>(DEFAULT_SPRING);
+  const commitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scheduleCommit = useCallback(
+    (next: SpringParams) => {
+      if (commitTimeoutRef.current) clearTimeout(commitTimeoutRef.current);
+      commitTimeoutRef.current = setTimeout(() => {
+        const data = generateSpringEaseData(next.mass, next.stiffness, next.damping);
+        const id = `spring-m${next.mass}-k${next.stiffness}-d${next.damping}`;
+        onCommit(id, data);
+      }, 120);
+    },
+    [onCommit],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (commitTimeoutRef.current) clearTimeout(commitTimeoutRef.current);
+    };
+  }, []);
+
+  const updateParam = (key: keyof SpringParams, value: number) => {
+    const next = { ...params, [key]: value };
+    setParams(next);
+    scheduleCommit(next);
+  };
+
+  const applyPreset = (preset: (typeof SPRING_PRESETS)[number]) => {
+    const next: SpringParams = {
+      mass: preset.mass,
+      stiffness: preset.stiffness,
+      damping: preset.damping,
+    };
+    setParams(next);
+    const data = generateSpringEaseData(next.mass, next.stiffness, next.damping);
+    onCommit(preset.name, data);
+  };
+
+  const reset = () => {
+    setParams(DEFAULT_SPRING);
+    const data = generateSpringEaseData(
+      DEFAULT_SPRING.mass,
+      DEFAULT_SPRING.stiffness,
+      DEFAULT_SPRING.damping,
+    );
+    onCommit("spring-bouncy", data);
+  };
+
+  // SVG layout matching EaseCurveEditor proportions
+  const width = 324;
+  const height = 214;
+  const plot = { left: 46, top: 24, width: 242, height: 146 };
+  const yMin = -0.2;
+  const yMax = 1.3;
+
+  const mapPoint = (point: { x: number; y: number }) => ({
+    x: plot.left + point.x * plot.width,
+    y: plot.top + ((yMax - point.y) / (yMax - yMin)) * plot.height,
+  });
+
+  const curvePath = buildSpringPath(params, mapPoint);
+  const start = mapPoint({ x: 0, y: 0 });
+  const end = mapPoint({ x: 1, y: 1 });
+
+  const activePreset = SPRING_PRESETS.find(
+    (p) =>
+      p.mass === params.mass && p.stiffness === params.stiffness && p.damping === params.damping,
+  );
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-neutral-800 bg-black/40">
+      <div className="flex items-center justify-between gap-3 border-b border-neutral-800 px-3 py-2">
+        <div>
+          <div className={LABEL}>Spring Ease</div>
+          <div className="mt-1 font-mono text-[10px] text-neutral-500">
+            {activePreset?.label ?? `m${params.mass} k${params.stiffness} d${params.damping}`}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={reset}
+          className="inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-800 bg-neutral-950 px-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-100"
+        >
+          <RotateCcw size={13} />
+          Reset
+        </button>
+      </div>
+
+      {/* Curve preview */}
+      <svg viewBox={`0 0 ${width} ${height}`} className="block w-full select-none touch-none">
+        <rect x="0" y="0" width={width} height={height} fill="transparent" />
+        {[0, 0.5, 1].map((value) => {
+          const mapped = mapPoint({ x: 0, y: value });
+          return (
+            <g key={value}>
+              <line
+                x1={plot.left}
+                x2={plot.left + plot.width}
+                y1={mapped.y}
+                y2={mapped.y}
+                stroke="rgba(255,255,255,0.12)"
+                strokeDasharray="5 8"
+              />
+              <text
+                x={plot.left - 12}
+                y={mapped.y + 4}
+                textAnchor="end"
+                className="fill-neutral-500 text-[10px] font-semibold"
+              >
+                {value}
+              </text>
+            </g>
+          );
+        })}
+        <line
+          x1={plot.left}
+          x2={plot.left + plot.width}
+          y1={plot.top + plot.height}
+          y2={plot.top + plot.height}
+          stroke="rgba(255,255,255,0.18)"
+        />
+        <line
+          x1={plot.left}
+          x2={plot.left}
+          y1={plot.top}
+          y2={plot.top + plot.height}
+          stroke="rgba(255,255,255,0.18)"
+        />
+        <path d={curvePath} fill="none" stroke="#ffdd57" strokeWidth="4" strokeLinecap="round" />
+        <circle cx={start.x} cy={start.y} r="5" fill="#ffdd57" />
+        <circle cx={end.x} cy={end.y} r="5" fill="#ffdd57" />
+      </svg>
+
+      {/* Presets */}
+      <div className="flex gap-1.5 border-t border-neutral-800 px-3 py-2">
+        {SPRING_PRESETS.map((preset) => {
+          const isActive =
+            preset.mass === params.mass &&
+            preset.stiffness === params.stiffness &&
+            preset.damping === params.damping;
+          return (
+            <button
+              key={preset.name}
+              type="button"
+              onClick={() => applyPreset(preset)}
+              className={`flex-1 rounded-lg px-1.5 py-1.5 text-[10px] font-semibold transition-colors ${
+                isActive
+                  ? "border border-yellow-400/40 bg-yellow-400/10 text-yellow-300"
+                  : "border border-neutral-800 bg-neutral-950 text-neutral-500 hover:border-neutral-700 hover:text-neutral-300"
+              }`}
+            >
+              {preset.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Sliders */}
+      <div className="space-y-3 border-t border-neutral-800 px-3 py-3">
+        {SLIDERS.map((slider) => (
+          <div key={slider.key}>
+            <div className="mb-1 flex items-center justify-between">
+              <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-neutral-500">
+                {slider.label}
+              </span>
+              <span className="min-w-[36px] text-right font-mono text-[10px] text-neutral-400">
+                {params[slider.key]}
+              </span>
+            </div>
+            <input
+              type="range"
+              min={slider.min}
+              max={slider.max}
+              step={slider.step}
+              value={params[slider.key]}
+              onChange={(e) => updateParam(slider.key, Number(e.target.value))}
+              className="h-1 w-full cursor-pointer appearance-none rounded-full bg-neutral-800 accent-yellow-400 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-yellow-400"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/editor/domEditOverlayGestures.ts

@@ -6,6 +6,7 @@ import type {
 } from "./manualEdits";
 import type { ManualOffsetDragMember } from "./manualOffsetDrag";
 import type { GroupOverlayItem } from "./domEditOverlayGeometry";
+import type { SnapContext } from "./snapTargetCollection";
 
 export type GestureKind = "drag" | "resize" | "rotate";
 
@@ -36,6 +37,9 @@ export interface GestureState {
   editScaleX: number;
   editScaleY: number;
   manualEditDragToken?: string;
+  snapContext?: SnapContext;
+  lastSnappedDx?: number;
+  lastSnappedDy?: number;
 }
 
 export interface GroupGestureState {
@@ -43,6 +47,9 @@ export interface GroupGestureState {
   startY: number;
   originItems: GroupOverlayItem[];
   members: ManualOffsetDragMember[];
+  snapContext?: SnapContext;
+  lastSnappedDx?: number;
+  lastSnappedDy?: number;
 }
 
 export interface BlockedMoveState {

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -23,6 +23,7 @@ import {
 } from "./domEditOverlayGeometry";
 import { type GestureKind, type GestureState } from "./domEditOverlayGestures";
 import type { UseDomEditOverlayGesturesOptions } from "./useDomEditOverlayGestures";
+import { collectSnapContext, buildExcludeElements } from "./snapTargetCollection";
 
 export function startGroupDrag(
   e: React.PointerEvent<HTMLElement>,
@@ -61,6 +62,20 @@ export function startGroupDrag(
     members.push(result.member);
   }
 
+  const overlayEl = opts.overlayRef.current;
+  const iframe = opts.iframeRef.current;
+  const snapContext =
+    overlayEl && iframe
+      ? collectSnapContext({
+          overlayEl,
+          iframe,
+          excludeElements: buildExcludeElements({
+            iframe,
+            groupSelections: items.map((i) => i.selection),
+          }),
+        })
+      : undefined;
+
   e.preventDefault();
   e.stopPropagation();
   e.currentTarget.setPointerCapture(e.pointerId);
@@ -70,10 +85,12 @@ export function startGroupDrag(
     startY: e.clientY,
     originItems: items,
     members,
+    snapContext,
   };
   return true;
 }
 
+// fallow-ignore-next-line complexity
 export function startGesture(
   kind: GestureKind,
   e: React.PointerEvent<HTMLElement>,
@@ -124,6 +141,16 @@ export function startGesture(
   const overlayBounds = overlayEl?.getBoundingClientRect();
   const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
   const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
+
+  const iframe = opts.iframeRef.current;
+  const snapContext =
+    (kind === "drag" || kind === "resize") && overlayEl && iframe
+      ? collectSnapContext({
+          overlayEl,
+          iframe,
+          excludeElements: buildExcludeElements({ iframe, selection: sel }),
+        })
+      : undefined;
   e.preventDefault();
   e.stopPropagation();
   e.currentTarget.setPointerCapture(e.pointerId);
@@ -150,6 +177,7 @@ export function startGesture(
     editScaleX: rect.editScaleX,
     editScaleY: rect.editScaleY,
     manualEditDragToken,
+    snapContext,
   };
   return true;
 }