@parhelia/core 0.1.12895 → 0.1.12901

package/dist/editor/page-editor-chrome/DragInsertionOverlay.js

@@ -0,0 +1,879 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { GripVertical } from "lucide-react";
+import { useEditContext } from "../client/editContext";
+import { useSlotContext } from "../views/editorSlotContext";
+import { getAllPlaceholders, getComponentById } from "../componentTreeHelper";
+import { cn } from "../../lib/utils";
+import { useReducedMotion } from "../client/hooks/useReducedMotion";
+import { clientToOverlay, findBridgeComponentTarget, hostViewportToOverlay, measureBridgeComponentRect, measureBridgePlaceholderRect, rectEquals, } from "./overlay/geometry";
+import { IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, useIframeOverlay, } from "./overlay/IframeOverlayProvider";
+import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
+import { getAutoScrollStep } from "../../lib/pointerDrag";
+import { computePlaceholderZones, layoutAwareIndex, placeholderZonesEqual, resolveNearestGap, } from "./overlay/placeholderZones";
+import { getBetweenInsertionZoneRect, getDirectionalInsertionHitZoneRect, getDirectionalInsertionZoneRect, getEmptyPlaceholderNeutralZoneRect, InsertionLine, } from "./overlay/InsertionLine";
+import { buildComponentDragObject } from "./componentDragObject";
+import { getPlaceholderDropZoneColor, } from "../componentFrameColors";
+// Toggle to re-enable the sibling "make room" shift preview (host previewGap).
+const DRAG_PREVIEW_SHIFT_ENABLED = false;
+const COMPONENT_EDGE_DROP_ZONE_RATIO = 0.25;
+const COMPONENT_EDGE_DROP_ZONE_MIN_PX = 16;
+const COMPONENT_EDGE_DROP_ZONE_MAX_PX = 48;
+// Matches the parhelia-drop-zone-overlay-exit CSS keyframe (120ms): keep the JS
+// unmount timer in lockstep so no transparent residue lingers after the fade.
+const DROP_ZONE_EXIT_ANIMATION_MS = 120;
+/**
+ * Full-canvas drop affordance shown while a component/template is being dragged.
+ * It drives the continuous {@link InsertionLine} from two sources:
+ *
+ * - native HTML5 drags (legacy sidebar/tree sources) via the surface's
+ *   dragover/drop, with the surface `pointer-events-auto`; and
+ * - host/parent-driven pointer gestures (whole-component grab, palette cards)
+ *   via forwarded `dragGesture*` events, with the surface `pointer-events-none`
+ *   so it never competes with the host's in-iframe pointer capture.
+ *
+ * Both paths resolve the nearest gap and commit through the same
+ * `droppedInPlaceholder` the discrete "+" dots use.
+ */
+export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, }) {
+    const editContext = useEditContext();
+    const slotContext = useSlotContext();
+    const reducedMotion = useReducedMotion();
+    const overlay = useIframeOverlay();
+    const surfaceRef = useRef(null);
+    const [placeholders, setPlaceholders] = useState([]);
+    const [active, setActive] = useState(null);
+    const [exitingActive, setExitingActive] = useState(null);
+    const [gestureActive, setGestureActive] = useState(false);
+    const gestureActiveRef = useRef(false);
+    // Cursor position in PARENT viewport coords during a pointer gesture. The chip
+    // and snapshot render position:fixed at this point (portaled out of the
+    // scrolling overlay layer) so they track the cursor regardless of page scroll.
+    const [cursorClient, setCursorClient] = useState(null);
+    // Live raster of the dragged component (host-captured), shown at the cursor
+    // instead of the chip once it arrives.
+    const [snapshot, setSnapshot] = useState(null);
+    const nativeDragPointRef = useRef(null);
+    const nativeAutoScrollRafRef = useRef(null);
+    const activeRef = useRef(null);
+    const exitTimerRef = useRef(null);
+    const setGestureActiveValue = useCallback((next) => {
+        gestureActiveRef.current = next;
+        setGestureActive(next);
+    }, []);
+    useEffect(() => {
+        if (!pageViewContext?.page) {
+            setPlaceholders([]);
+            return;
+        }
+        setPlaceholders(getAllPlaceholders(pageViewContext.page));
+    }, [pageViewContext?.page]);
+    const isDragging = !!editContext?.dragObject &&
+        !!slotContext?.isActive &&
+        editContext.mode === "edit" &&
+        !editContext.readonly;
+    const zones = useOverlayMeasurement((metrics) => {
+        if (!isDragging || !pageViewContext)
+            return [];
+        return computePlaceholderZones({
+            placeholders,
+            geometry: pageViewContext.bridgeGeometry,
+            metrics,
+            dragObject: editContext?.dragObject,
+            selectedForInsertion: editContext?.selectedForInsertion,
+            insertMode: editContext?.insertMode,
+            showLayoutComponents: editContext?.showLayoutComponents,
+        });
+    }, [
+        isDragging,
+        pageViewContext,
+        pageViewContext?.bridgeGeometry,
+        placeholders,
+        editContext?.dragObject,
+        editContext?.selectedForInsertion,
+        editContext?.insertMode,
+        editContext?.showLayoutComponents,
+    ], {
+        initialValue: [],
+        equals: placeholderZonesEqual,
+        interests: ["viewport", "layout", "adornment-data"],
+    });
+    // Refs so the imperative gesture handler always reads current values.
+    const zonesRef = useRef(zones);
+    zonesRef.current = zones;
+    const editContextRef = useRef(editContext);
+    editContextRef.current = editContext;
+    const pageViewContextRef = useRef(pageViewContext);
+    pageViewContextRef.current = pageViewContext;
+    const overlayRef = useRef(overlay);
+    overlayRef.current = overlay;
+    // Sibling-shift preview bookkeeping (gesture drags only).
+    const movingRef = useRef(null);
+    const lastPreviewKeyRef = useRef(null);
+    const lastZoneKeyRef = useRef(null);
+    const ownedInsertionZoneRef = useRef(null);
+    const reducedMotionRef = useRef(reducedMotion);
+    reducedMotionRef.current = reducedMotion;
+    const clearExitTimer = useCallback(() => {
+        if (exitTimerRef.current !== null) {
+            window.clearTimeout(exitTimerRef.current);
+            exitTimerRef.current = null;
+        }
+    }, []);
+    const clearExitAnimation = useCallback(() => {
+        clearExitTimer();
+        setExitingActive(null);
+    }, [clearExitTimer]);
+    const startExitAnimation = useCallback((previous) => {
+        if (reducedMotionRef.current || previous.visualMode === "none") {
+            clearExitAnimation();
+            return;
+        }
+        clearExitTimer();
+        setExitingActive(previous);
+        exitTimerRef.current = window.setTimeout(() => {
+            exitTimerRef.current = null;
+            setExitingActive(null);
+        }, DROP_ZONE_EXIT_ANIMATION_MS);
+    }, [clearExitAnimation, clearExitTimer]);
+    const setActiveInsertion = useCallback((next, { animateExit = true } = {}) => {
+        const previous = activeRef.current;
+        const previousKey = formatActiveInsertionKey(previous);
+        const nextKey = formatActiveInsertionKey(next);
+        const nextIsVisible = !!next && next.visualMode !== "none";
+        if (nextIsVisible) {
+            clearExitAnimation();
+        }
+        else if (animateExit &&
+            previous &&
+            previous.visualMode !== "none" &&
+            previousKey !== nextKey) {
+            startExitAnimation(previous);
+        }
+        else {
+            clearExitAnimation();
+        }
+        activeRef.current = next;
+        setActive(next);
+    }, [clearExitAnimation, startExitAnimation]);
+    const resolveZoneAtOverlayPoint = useCallback((point) => {
+        const geometry = pageViewContextRef.current?.bridgeGeometry;
+        if (!geometry)
+            return null;
+        const zone = resolveNearestGap(point, zonesRef.current);
+        if (!zone)
+            return null;
+        const metrics = overlayRef.current.getMetrics();
+        const placeholderRect = measureBridgePlaceholderRect(geometry, zone.placeholder.key, metrics)?.rect;
+        if (!placeholderRect)
+            return null;
+        const visualTarget = resolveInsertionZoneVisualTarget(zone, point, placeholderRect, geometry, metrics, ownedInsertionZoneRef.current);
+        return {
+            zone,
+            placeholderRect,
+            visualMode: visualTarget.mode,
+            visualAnchor: visualTarget.anchor,
+            visualTargetRect: visualTarget.rect,
+            visualOwnerComponentId: visualTarget.ownerComponentId,
+            zoneHovered: visualTarget.zoneHovered ?? false,
+            color: computeDropZoneColor(zone),
+            adjustedIndex: layoutAwareIndex(zone.placeholder.components, zone.index),
+        };
+    }, []);
+    const announce = useCallback((target) => {
+        editContextRef.current?.setStatusMessage(_jsxs("div", { children: ["Drop into placeholder", " ", _jsx("span", { className: "font-bold", children: target.zone.placeholder.parentComponent?.name }), " ", "/", " ", _jsx("span", { className: "font-bold", children: target.zone.description || target.zone.placeholder.name }), " ", "at position", " ", _jsx("span", { className: "font-bold", children: target.adjustedIndex + 1 })] }));
+    }, []);
+    // Ask the host to open a gap (shift siblings) at the resolved zone. Only for
+    // pointer gestures, where we know the moving element + its size.
+    const sendPreviewGap = useCallback((target) => {
+        // Sibling-shift preview is off: per-element transforms don't hold up across
+        // Sitecore's varied component rendering. The live snapshot is the preview
+        // now; the protocol/host wiring stays for a possible future revisit.
+        if (!DRAG_PREVIEW_SHIFT_ENABLED || reducedMotionRef.current)
+            return;
+        const pvc = pageViewContextRef.current;
+        const moving = movingRef.current;
+        const geometry = pvc?.bridgeGeometry;
+        if (!pvc?.requestBridgePreviewGap || !geometry || !moving)
+            return;
+        const previewKey = `${target.zone.placeholder.key}#${target.zone.index}`;
+        if (previewKey === lastPreviewKeyRef.current)
+            return;
+        const movingRect = findBridgeComponentTarget(geometry, moving.component)?.rect;
+        const gapPx = movingRect
+            ? target.zone.orientation === "horizontal"
+                ? movingRect.width
+                : movingRect.height
+            : 0;
+        if (!gapPx)
+            return;
+        lastPreviewKeyRef.current = previewKey;
+        pvc.requestBridgePreviewGap({
+            siblingElementKeys: target.zone.placeholder.components.map((c) => findBridgeComponentTarget(geometry, c)?.elementKey ?? null),
+            fromDomIndex: target.zone.index,
+            gapPx,
+            axis: target.zone.orientation === "horizontal" ? "x" : "y",
+            movingElementKey: moving.elementKey,
+        });
+    }, []);
+    const clearPreviewGap = useCallback(() => {
+        if (lastPreviewKeyRef.current === null)
+            return;
+        lastPreviewKeyRef.current = null;
+        pageViewContextRef.current?.requestBridgePreviewGap?.({ clear: true });
+    }, []);
+    // Update line/highlight/status/preview only when the target gap changes - not
+    // on every pointer move - so dragging stays smooth (the cursor chip still
+    // tracks every move via setCursorPoint).
+    const applyResolvedZone = useCallback((next) => {
+        const nextKey = formatActiveInsertionKey(next);
+        if (nextKey === lastZoneKeyRef.current)
+            return;
+        lastZoneKeyRef.current = nextKey;
+        setActiveInsertion(next);
+        if (next) {
+            ownedInsertionZoneRef.current =
+                next.visualMode === "directional" &&
+                    next.visualTargetRect &&
+                    next.visualOwnerComponentId
+                    ? {
+                        zoneKey: formatPlaceholderZoneKey(next.zone),
+                        anchor: next.visualAnchor,
+                        targetRect: next.visualTargetRect,
+                        dropZoneRect: getDirectionalInsertionHitZoneRect({
+                            zone: next.zone,
+                            targetRect: next.visualTargetRect,
+                            anchor: next.visualAnchor,
+                        }),
+                        ownerComponentId: next.visualOwnerComponentId,
+                    }
+                    : null;
+            announce(next);
+            sendPreviewGap(next);
+        }
+        else {
+            ownedInsertionZoneRef.current = null;
+            editContextRef.current?.setStatusMessage("");
+            clearPreviewGap();
+        }
+    }, [announce, sendPreviewGap, clearPreviewGap, setActiveInsertion]);
+    const resolveNativeDragPoint = useCallback((point) => {
+        const surface = surfaceRef.current;
+        if (!surface)
+            return;
+        const overlayPoint = clientToOverlay(point.x, point.y, surface.getBoundingClientRect());
+        applyResolvedZone(resolveZoneAtOverlayPoint(overlayPoint));
+    }, [applyResolvedZone, resolveZoneAtOverlayPoint]);
+    const getNativeAutoScrollStep = useCallback((point) => {
+        const iframe = overlayRef.current.iframe;
+        if (!iframe)
+            return 0;
+        const rect = iframe.getBoundingClientRect();
+        if (point.x < rect.left || point.x > rect.right)
+            return 0;
+        return getAutoScrollStep(point.y, rect.top, rect.bottom);
+    }, []);
+    const stopNativeAutoScroll = useCallback(() => {
+        if (nativeAutoScrollRafRef.current !== null) {
+            window.cancelAnimationFrame(nativeAutoScrollRafRef.current);
+            nativeAutoScrollRafRef.current = null;
+        }
+    }, []);
+    const scrollNativeDragAtEdge = useCallback(() => {
+        const point = nativeDragPointRef.current;
+        if (!point)
+            return false;
+        const step = getNativeAutoScrollStep(point);
+        if (step === 0)
+            return false;
+        pageViewContextRef.current?.requestBridgeScrollBy?.({
+            y: step,
+            behavior: "auto",
+        });
+        resolveNativeDragPoint(point);
+        return true;
+    }, [getNativeAutoScrollStep, resolveNativeDragPoint]);
+    const runNativeAutoScroll = useCallback(() => {
+        nativeAutoScrollRafRef.current = null;
+        if (scrollNativeDragAtEdge()) {
+            nativeAutoScrollRafRef.current =
+                window.requestAnimationFrame(runNativeAutoScroll);
+        }
+    }, [scrollNativeDragAtEdge]);
+    const updateNativeAutoScroll = useCallback(() => {
+        const point = nativeDragPointRef.current;
+        if (!point || getNativeAutoScrollStep(point) === 0) {
+            stopNativeAutoScroll();
+            return;
+        }
+        if (nativeAutoScrollRafRef.current !== null)
+            return;
+        if (scrollNativeDragAtEdge()) {
+            nativeAutoScrollRafRef.current =
+                window.requestAnimationFrame(runNativeAutoScroll);
+        }
+    }, [
+        getNativeAutoScrollStep,
+        runNativeAutoScroll,
+        scrollNativeDragAtEdge,
+        stopNativeAutoScroll,
+    ]);
+    const clearDragPresentation = useCallback(() => {
+        setActiveInsertion(null, { animateExit: false });
+        setGestureActiveValue(false);
+        setCursorClient(null);
+        setSnapshot(null);
+        nativeDragPointRef.current = null;
+        stopNativeAutoScroll();
+        clearPreviewGap();
+        lastZoneKeyRef.current = null;
+        ownedInsertionZoneRef.current = null;
+        movingRef.current = null;
+        editContextRef.current?.setStatusMessage("");
+    }, [
+        clearPreviewGap,
+        setActiveInsertion,
+        setGestureActiveValue,
+        stopNativeAutoScroll,
+    ]);
+    const cancelActiveGesture = useCallback(() => {
+        if (!gestureActiveRef.current)
+            return;
+        clearDragPresentation();
+        editContextRef.current?.dragEnd();
+    }, [clearDragPresentation]);
+    useEffect(() => {
+        if (!gestureActive)
+            return;
+        const cancel = () => cancelActiveGesture();
+        const cancelWhenHidden = () => {
+            if (document.visibilityState === "hidden")
+                cancelActiveGesture();
+        };
+        window.addEventListener("blur", cancel);
+        window.addEventListener("pagehide", cancel);
+        document.addEventListener("visibilitychange", cancelWhenHidden);
+        return () => {
+            window.removeEventListener("blur", cancel);
+            window.removeEventListener("pagehide", cancel);
+            document.removeEventListener("visibilitychange", cancelWhenHidden);
+        };
+    }, [cancelActiveGesture, gestureActive]);
+    // Tell the "+" dots which gap is currently targeted so the matching dot can
+    // light up - but only while the insertion LINE is actually visible at that gap,
+    // so the dot highlight and the line appear together. (The resolved gap is set
+    // even when the cursor is far from any edge, with the line hidden.)
+    const activeGapKey = active && isInsertionLineVisibleFor(active)
+        ? formatPlaceholderZoneKey(active.zone)
+        : null;
+    useEffect(() => {
+        onActiveTargetChange?.(activeGapKey);
+    }, [activeGapKey, onActiveTargetChange]);
+    useEffect(() => () => onActiveTargetChange?.(null), [onActiveTargetChange]);
+    // Host-driven pointer gesture path (whole-component grab).
+    useEffect(() => {
+        const iframe = overlay.iframe;
+        if (!iframe)
+            return;
+        const onGesture = (e) => {
+            const detail = e
+                .detail;
+            if (detail.phase === "snapshot") {
+                setSnapshot({
+                    dataUrl: detail.dataUrl,
+                    width: detail.width,
+                    height: detail.height,
+                });
+                return;
+            }
+            const ec = editContextRef.current;
+            const pvc = pageViewContextRef.current;
+            if (!ec || !pvc?.page)
+                return;
+            // "host" gestures report in-iframe (host-viewport) coords; "client"
+            // gestures (frame-menu grip, parent-driven) report PARENT-client coords.
+            const space = detail.space ?? "host";
+            const toOverlay = (clientX, clientY) => {
+                if (space === "client") {
+                    const surface = surfaceRef.current;
+                    if (!surface)
+                        return null;
+                    return clientToOverlay(clientX, clientY, surface.getBoundingClientRect());
+                }
+                const geometry = pvc.bridgeGeometry;
+                if (!geometry)
+                    return null;
+                return hostViewportToOverlay({ x: clientX, y: clientY }, geometry, overlayRef.current.getMetrics());
+            };
+            // Position for the fixed (viewport-anchored) chip/snapshot, in PARENT
+            // viewport coords so it follows the cursor on screen and never scrolls away
+            // with the page. Client-space coords are already parent-client; host-space
+            // coords are mapped through the iframe's on-screen rect vs. its content
+            // viewport size (absorbs any editor scaling).
+            const toClient = (clientX, clientY) => {
+                if (space === "client")
+                    return { x: clientX, y: clientY };
+                const iframe = overlayRef.current.iframe;
+                if (!iframe)
+                    return null;
+                const rect = iframe.getBoundingClientRect();
+                const metrics = overlayRef.current.getMetrics();
+                const sx = metrics.viewportWidth
+                    ? rect.width / metrics.viewportWidth
+                    : 1;
+                const sy = metrics.viewportHeight
+                    ? rect.height / metrics.viewportHeight
+                    : 1;
+                return { x: rect.left + clientX * sx, y: rect.top + clientY * sy };
+            };
+            if (detail.phase === "start") {
+                let component;
+                let dragObject = detail.dragObject;
+                let inMulti = false;
+                if (!dragObject) {
+                    component = detail.componentId
+                        ? getComponentById(detail.componentId, pvc.page)
+                        : undefined;
+                    if (!component)
+                        return;
+                    const selection = ec.selection ?? [];
+                    inMulti = selection.length > 1 && selection.includes(component.id);
+                    const selectedIds = inMulti ? selection : [component.id];
+                    dragObject = buildComponentDragObject(component, selectedIds, pvc.page);
+                }
+                if (!dragObject)
+                    return;
+                movingRef.current =
+                    component && detail.elementKey
+                        ? { elementKey: detail.elementKey, component }
+                        : null;
+                setSnapshot(null);
+                setGestureActiveValue(true);
+                ec.dragStart(dragObject);
+                // Select the grabbed component AFTER dragStart so the selection-scroll
+                // effect (PageViewerFrame) sees the active drag and skips scrolling it
+                // back into view, which would yank the page away from the drag.
+                if (component && !inMulti)
+                    ec.select([component.id]);
+                // Host gestures self-capture the snapshot on threshold-cross. Parent-
+                // driven (client-space) drags must ask the host to rasterize the source.
+                if (space === "client" && detail.elementKey) {
+                    pvc.requestBridgeCaptureSnapshot?.({ elementKey: detail.elementKey });
+                }
+                setCursorClient(toClient(detail.clientX, detail.clientY));
+                const point = toOverlay(detail.clientX, detail.clientY);
+                applyResolvedZone(point ? resolveZoneAtOverlayPoint(point) : null);
+            }
+            else if (detail.phase === "move") {
+                const client = toClient(detail.clientX, detail.clientY);
+                setCursorClient(client);
+                // Hovering the minimap mid-drag scrolls the canvas to that region so
+                // off-screen drop targets become reachable. Works for both grab modes:
+                // the pointer is captured, so the host keeps reporting moves (which we
+                // map to parent coords) even after the cursor leaves the iframe for the
+                // minimap. When the minimap owns the scroll this frame, skip the canvas
+                // zone re-resolve (the cursor is off-canvas).
+                if (client && pvc.scrollViaMinimapPoint?.(client.x, client.y)) {
+                    return;
+                }
+                const point = toOverlay(detail.clientX, detail.clientY);
+                if (!point)
+                    return;
+                applyResolvedZone(resolveZoneAtOverlayPoint(point));
+            }
+            else if (detail.phase === "end") {
+                const point = !detail.canceled
+                    ? toOverlay(detail.clientX, detail.clientY)
+                    : null;
+                const target = point ? resolveZoneAtOverlayPoint(point) : null;
+                const commitTarget = !detail.canceled && isDropCommitTarget(target) ? target : null;
+                clearDragPresentation();
+                if (commitTarget) {
+                    ec.droppedInPlaceholder(commitTarget.zone.placeholder.key, commitTarget.adjustedIndex, undefined, commitTarget.zone.anchor, undefined, commitTarget.zone.position, commitTarget.color);
+                }
+                ec.dragEnd();
+            }
+        };
+        iframe.addEventListener(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, onGesture);
+        return () => iframe.removeEventListener(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, onGesture);
+    }, [
+        overlay.iframe,
+        resolveZoneAtOverlayPoint,
+        applyResolvedZone,
+        clearDragPresentation,
+    ]);
+    // Reset when a drag ends.
+    useEffect(() => {
+        if (!isDragging) {
+            clearDragPresentation();
+        }
+    }, [isDragging, clearDragPresentation]);
+    // Never leave a status message lingering after unmount.
+    useEffect(() => {
+        return () => {
+            stopNativeAutoScroll();
+            clearExitTimer();
+            editContextRef.current?.setStatusMessage("");
+        };
+    }, [clearExitTimer, stopNativeAutoScroll]);
+    if (!isDragging || !pageViewContext || !editContext)
+        return null;
+    const handleDragOver = (e) => {
+        if (editContext.mode !== "edit" || editContext.readonly) {
+            e.dataTransfer.dropEffect = "none";
+            return;
+        }
+        e.preventDefault();
+        e.dataTransfer.dropEffect =
+            editContext.dragObject?.type === "template" ? "copy" : "move";
+        const surface = surfaceRef.current;
+        if (!surface)
+            return;
+        const point = { x: e.clientX, y: e.clientY };
+        nativeDragPointRef.current = point;
+        resolveNativeDragPoint(point);
+        updateNativeAutoScroll();
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        nativeDragPointRef.current = null;
+        stopNativeAutoScroll();
+        editContext.setStatusMessage("");
+        if (editContext.mode !== "edit" || editContext.readonly) {
+            setActiveInsertion(null, { animateExit: false });
+            return;
+        }
+        const surface = surfaceRef.current;
+        const point = surface
+            ? clientToOverlay(e.clientX, e.clientY, surface.getBoundingClientRect())
+            : null;
+        const target = point ? resolveZoneAtOverlayPoint(point) : null;
+        const commitTarget = isDropCommitTarget(target) ? target : null;
+        setActiveInsertion(null, { animateExit: false });
+        ownedInsertionZoneRef.current = null;
+        if (!commitTarget)
+            return;
+        editContext.droppedInPlaceholder(commitTarget.zone.placeholder.key, commitTarget.adjustedIndex, undefined, commitTarget.zone.anchor, undefined, commitTarget.zone.position, commitTarget.color);
+    };
+    const handleDragLeave = (e) => {
+        const surface = surfaceRef.current;
+        const related = e.relatedTarget;
+        if (surface && related && surface.contains(related))
+            return;
+        nativeDragPointRef.current = null;
+        stopNativeAutoScroll();
+        applyResolvedZone(null);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: surfaceRef, "data-testid": "drag-insertion-surface", className: cn("absolute inset-0", gestureActive ? "pointer-events-none" : "pointer-events-auto"), style: { zIndex: 850 }, onDragOver: gestureActive ? undefined : handleDragOver, onDrop: gestureActive ? undefined : handleDrop, onDragLeave: gestureActive ? undefined : handleDragLeave, children: [active && active.zone.placeholder.parentComponent?.id && (_jsx(ParentComponentOutline, { component: active.zone.placeholder.parentComponent, pageViewContext: pageViewContext, color: active.color, animate: !reducedMotion })), exitingActive && (_jsx(InsertionLine
+                    // Constant key: only one exit copy is ever in flight, so reuse the
+                    // same node across successive disappearances instead of remounting
+                    // (and replaying the exit fade) per gap.
+                    , { zone: exitingActive.zone, placeholderRect: exitingActive.placeholderRect, visualMode: exitingActive.visualMode, visualAnchor: exitingActive.visualAnchor, visualTargetRect: exitingActive.visualTargetRect, color: exitingActive.color, label: insertionLabel(exitingActive), animate: !reducedMotion, phase: "exit" }, "exit-active")), active && (_jsx(InsertionLine
+                    // Constant key: the bar is a single persistent element that GLIDES
+                    // to each new gap (via its left/top/width/height transition) instead
+                    // of remounting and replaying the fade-in at every gap - that per-gap
+                    // re-fade is the "spots quickly flashing" as the cursor sweeps. The
+                    // enter fade now plays once when the bar first appears.
+                    , { zone: active.zone, placeholderRect: active.placeholderRect, visualMode: active.visualMode, visualAnchor: active.visualAnchor, visualTargetRect: active.visualTargetRect, color: active.color, label: insertionLabel(active), animate: !reducedMotion, phase: "enter" }, "active-bar"))] }), gestureActive &&
+                cursorClient &&
+                editContext.dragObject &&
+                createPortal(
+                // Cursor-anchored: the dragged thing (live snapshot, else a chip). The
+                // insertion bar names the target placeholder, so the cursor stays clean.
+                _jsx("div", { className: "pointer-events-none fixed flex flex-col items-start gap-1.5", style: {
+                        left: cursorClient.x + 14,
+                        top: cursorClient.y + 14,
+                        zIndex: 99999,
+                    }, children: snapshot ? (
+                    // Card wrapper: padding + near-opaque white backing so the dragged
+                    // component reads as a solid floating card rather than a ghost.
+                    _jsx("div", { "data-testid": "drag-cursor-snapshot", className: "rounded-md shadow-lg ring-1 ring-black/10", style: {
+                            padding: 6,
+                            backgroundColor: "rgba(255, 255, 255, 0.97)",
+                            opacity: 0.96,
+                        }, children: _jsx("img", { src: snapshot.dataUrl, alt: "", className: "block rounded-sm", style: {
+                                ...snapshotDisplaySize(snapshot),
+                                height: "auto",
+                                objectFit: "contain",
+                            } }) })) : (_jsxs("div", { "data-testid": "drag-cursor-chip", className: "bg-component-default flex items-center gap-1 rounded px-2 py-1 text-sm whitespace-nowrap text-white shadow-md", children: [_jsx(GripVertical, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), (editContext.dragObject.components?.length ?? 0) > 1
+                                ? `${editContext.dragObject.components.length} components`
+                                : editContext.dragObject.name] })) }), document.body)] }));
+}
+// The single drag indicator's label, shown on the insertion bar: the path of
+// ANCESTOR COMPONENTS from the page root down to the target placeholder, then
+// the 1-based insert position. Walks up the component/placeholder
+// back-references (wired by pageModelBuilder) but names only the components -
+// the parent components' own placeholders are intermediate plumbing, not shown.
+// E.g. "Page ▸ Section 4 ▸ CENTER · 3" or "Page ▸ Main · 2" for a top-level
+// placeholder.
+function insertionLabel(target) {
+    const position = target.adjustedIndex + 1;
+    const segments = [
+        target.zone.description || target.zone.placeholder.name,
+    ];
+    let component = target.zone.placeholder.parentComponent;
+    while (component) {
+        const placeholder = component.parentPlaceholder;
+        if (!placeholder)
+            break;
+        segments.unshift(component.name);
+        component = placeholder.parentComponent;
+    }
+    segments.unshift("Page");
+    return `${segments.join(" ▸ ")} · ${position}`;
+}
+const insertAccentVar = {
+    default: "var(--color-component-default)",
+    shared: "var(--color-component-shared)",
+    layout: "var(--color-highlight-100)",
+};
+// A subtle dotted outline around the component that owns the target placeholder,
+// so a nested drop reads as "into this component's slot". Renders only when the
+// placeholder sits inside a measurable component; top-level placeholders have no
+// parent component to outline, so nothing is drawn.
+function ParentComponentOutline({ component, pageViewContext, color, animate, }) {
+    const measuredRect = useOverlayMeasurement((metrics) => measureBridgeComponentRect(pageViewContext.bridgeGeometry, component, metrics)?.rect ?? null, [component, pageViewContext.bridgeGeometry], {
+        initialValue: null,
+        equals: rectEquals,
+        interests: ["viewport", "layout", "adornment-data"],
+        validateBeforePaint: true,
+    });
+    // Hold the last good rect so a single transient-null measurement frame (mid
+    // drag auto-scroll / reflow) doesn't unmount the outline and replay its
+    // fade-in - a one-frame blink at the component. Reset when the outlined
+    // component changes so we never paint a stale box at the wrong place.
+    const lastRectRef = useRef(null);
+    const lastComponentIdRef = useRef(component.id);
+    if (lastComponentIdRef.current !== component.id) {
+        lastComponentIdRef.current = component.id;
+        lastRectRef.current = null;
+    }
+    if (measuredRect)
+        lastRectRef.current = measuredRect;
+    const rect = measuredRect ?? lastRectRef.current;
+    if (!rect)
+        return null;
+    const accent = insertAccentVar[color];
+    return (_jsx("div", { "data-testid": "drag-parent-outline", "data-component-id": component.id, className: cn("pointer-events-none absolute rounded-[6px] border border-dotted", animate && "parhelia-drop-zone-overlay-enter"), style: {
+            left: rect.x - 2,
+            top: rect.y - 2,
+            width: rect.width + 4,
+            height: rect.height + 4,
+            borderColor: `color-mix(in srgb, ${accent} 45%, transparent)`,
+            zIndex: 851,
+        } }));
+}
+// Size the floating snapshot by WIDTH only (75% of the component's real width,
+// capped to the viewport). Height is left to the image's natural captured aspect
+// ratio (the caller sets height:auto + objectFit:contain), so the preview never
+// distorts even when html2canvas reflowed the component to a different aspect
+// than its on-screen box. maxHeight caps very tall captures without stretching.
+function snapshotDisplaySize(s) {
+    const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
+    const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 800;
+    return {
+        width: Math.round(Math.min(Math.max(1, s.width * 0.75), viewportWidth * 0.9)),
+        maxHeight: Math.round(viewportHeight * 0.9),
+    };
+}
+function formatOverlayRectKey(rect) {
+    if (!rect)
+        return "none";
+    return `${Math.round(rect.x)}:${Math.round(rect.y)}:${Math.round(rect.width)}:${Math.round(rect.height)}`;
+}
+// GRANULAR identity: the full state signature, including transient hover state
+// and the rounded target rect. Use this for the applyResolvedZone dedup and the
+// setActiveInsertion comparison so a hover-only change (zoneHovered) or a 1px
+// rect tick still flows through to setActive(next) - that keeps active.zoneHovered
+// fresh for isDropCommitTarget and lets the bar reposition. MUST stay granular;
+// do NOT reuse it for the React key (see formatActiveInsertionVisualKey).
+export function formatActiveInsertionKey(target) {
+    if (!target)
+        return "none";
+    return `${target.zone.placeholder.key}#${target.zone.index}#${target.visualMode}#${target.visualAnchor}#${target.zoneHovered ? "hovered" : "resting"}#${formatOverlayRectKey(target.visualTargetRect)}`;
+}
+// COARSE identity: the targeted gap + its visual orientation only. This is the
+// animation/React-key identity for <InsertionLine>. It deliberately DROPS
+// zoneHovered and visualTargetRect so that merely hovering onto the line's hit
+// band, or a sub-pixel rect drift, re-renders the SAME node in place (the inner
+// transition glides it) instead of remounting it - a remount would replay the
+// fade-in enter keyframe = a visible blink/flicker. The key changes only when
+// the real insertion target changes, which is exactly when a fresh fade is wanted.
+export function formatActiveInsertionVisualKey(target) {
+    if (!target)
+        return "none";
+    return `${target.zone.placeholder.key}#${target.zone.index}#${target.visualMode}#${target.visualAnchor}`;
+}
+function isDropCommitTarget(target) {
+    return !!target && target.zoneHovered;
+}
+function formatPlaceholderZoneKey(zone) {
+    return `${zone.placeholder.key}#${zone.index}`;
+}
+// Mirrors InsertionLine's own visibility gate: the bar renders unless the mode
+// is "none" (cursor not near an edge) or a non-empty "neutral" zone. Used to
+// keep the "+" dot highlight in lockstep with the line - the resolved gap is set
+// even when the cursor is far from any edge, and the dot must not light up then.
+function isInsertionLineVisibleFor(target) {
+    if (target.visualMode === "none")
+        return false;
+    const isEmptyPlaceholder = target.zone.placeholder.components.length === 0;
+    if (target.visualMode === "neutral" && !isEmptyPlaceholder)
+        return false;
+    return true;
+}
+function computeDropZoneColor(zone) {
+    const components = zone.placeholder.components;
+    const prev = zone.index >= 1 ? components[zone.index - 1] : null;
+    const next = zone.index < components.length ? components[zone.index] : null;
+    return getPlaceholderDropZoneColor({
+        parentComponent: zone.placeholder.parentComponent,
+        prevComponent: prev,
+        nextComponent: next,
+    });
+}
+function resolveInsertionZoneVisualTarget(zone, point, placeholderRect, geometry, metrics, ownedZone) {
+    const components = zone.placeholder.components;
+    const zoneKey = formatPlaceholderZoneKey(zone);
+    if (ownedZone?.zoneKey === zoneKey &&
+        pointInOverlayRect(point, ownedZone.dropZoneRect)) {
+        const visualDropZoneRect = getDirectionalInsertionZoneRect({
+            zone,
+            targetRect: ownedZone.targetRect,
+            anchor: ownedZone.anchor,
+        });
+        return {
+            mode: "directional",
+            anchor: ownedZone.anchor,
+            rect: ownedZone.targetRect,
+            ownerComponentId: ownedZone.ownerComponentId,
+            zoneHovered: pointInOverlayRect(point, visualDropZoneRect),
+        };
+    }
+    const previousComponent = zone.index > 0 ? components[zone.index - 1] : null;
+    const nextComponent = zone.index < components.length ? components[zone.index] : null;
+    const previousRect = previousComponent
+        ? measureBridgeComponentRect(geometry, previousComponent, metrics)?.rect
+        : null;
+    const nextRect = nextComponent
+        ? measureBridgeComponentRect(geometry, nextComponent, metrics)?.rect
+        : null;
+    const afterPrevious = previousRect
+        ? {
+            anchor: zone.orientation === "horizontal"
+                ? "right"
+                : "bottom",
+            rect: previousRect,
+            ownerComponentId: previousComponent?.id,
+        }
+        : null;
+    const beforeNext = nextRect
+        ? {
+            anchor: zone.orientation === "horizontal"
+                ? "left"
+                : "top",
+            rect: nextRect,
+            ownerComponentId: nextComponent?.id,
+        }
+        : null;
+    if (!previousComponent && beforeNext) {
+        if (pointInOverlayRect(point, beforeNext.rect)) {
+            return pointInDirectionalEdgeBand(point, beforeNext.rect, beforeNext.anchor)
+                ? { ...beforeNext, mode: "directional" }
+                : {
+                    ...resolveHiddenInsertionVisual(zone),
+                    ownerComponentId: beforeNext.ownerComponentId,
+                };
+        }
+        return resolveNeutralInsertionVisual(zone, placeholderRect, point);
+    }
+    if (!nextComponent && afterPrevious) {
+        if (pointInOverlayRect(point, afterPrevious.rect)) {
+            return pointInDirectionalEdgeBand(point, afterPrevious.rect, afterPrevious.anchor)
+                ? { ...afterPrevious, mode: "directional" }
+                : {
+                    ...resolveHiddenInsertionVisual(zone),
+                    ownerComponentId: afterPrevious.ownerComponentId,
+                };
+        }
+        return resolveNeutralInsertionVisual(zone, placeholderRect, point);
+    }
+    if (afterPrevious && beforeNext) {
+        const betweenRect = getBetweenInsertionZoneRect({
+            zone,
+            previousRect: afterPrevious.rect,
+            nextRect: beforeNext.rect,
+        });
+        if (pointInOverlayRect(point, betweenRect)) {
+            return {
+                mode: "between",
+                anchor: zone.anchor,
+                rect: betweenRect,
+                zoneHovered: true,
+            };
+        }
+        if (pointInOverlayRect(point, afterPrevious.rect)) {
+            return pointInDirectionalEdgeBand(point, afterPrevious.rect, afterPrevious.anchor)
+                ? { ...afterPrevious, mode: "directional" }
+                : {
+                    ...resolveHiddenInsertionVisual(zone),
+                    ownerComponentId: afterPrevious.ownerComponentId,
+                };
+        }
+        if (pointInOverlayRect(point, beforeNext.rect)) {
+            return pointInDirectionalEdgeBand(point, beforeNext.rect, beforeNext.anchor)
+                ? { ...beforeNext, mode: "directional" }
+                : {
+                    ...resolveHiddenInsertionVisual(zone),
+                    ownerComponentId: beforeNext.ownerComponentId,
+                };
+        }
+        return resolveNeutralInsertionVisual(zone, placeholderRect, point);
+    }
+    return resolveNeutralInsertionVisual(zone, placeholderRect, point);
+}
+function resolveNeutralInsertionVisual(zone, placeholderRect, point) {
+    const targetRect = zone.targetRect ?? placeholderRect;
+    const isEmptyPlaceholder = zone.placeholder.components.length === 0;
+    return {
+        anchor: zone.anchor,
+        rect: targetRect,
+        mode: "neutral",
+        zoneHovered: isEmptyPlaceholder &&
+            pointInOverlayRect(point, getEmptyPlaceholderNeutralZoneRect({ zone, targetRect })),
+    };
+}
+function resolveHiddenInsertionVisual(zone) {
+    return {
+        anchor: zone.anchor,
+        rect: null,
+        mode: "none",
+    };
+}
+function pointInOverlayRect(point, rect) {
+    return (point.x >= rect.x &&
+        point.x <= rect.x + rect.width &&
+        point.y >= rect.y &&
+        point.y <= rect.y + rect.height);
+}
+function pointInDirectionalEdgeBand(point, rect, anchor) {
+    const length = anchor === "left" || anchor === "right" ? rect.width : rect.height;
+    const edgeSize = resolveComponentEdgeDropZoneSize(length);
+    switch (anchor) {
+        case "top":
+            return point.y - rect.y <= edgeSize;
+        case "bottom":
+            return rect.y + rect.height - point.y <= edgeSize;
+        case "left":
+            return point.x - rect.x <= edgeSize;
+        case "right":
+            return rect.x + rect.width - point.x <= edgeSize;
+    }
+}
+function resolveComponentEdgeDropZoneSize(length) {
+    const desired = Math.min(COMPONENT_EDGE_DROP_ZONE_MAX_PX, Math.max(COMPONENT_EDGE_DROP_ZONE_MIN_PX, length * COMPONENT_EDGE_DROP_ZONE_RATIO));
+    return Math.max(1, Math.min(desired, length / 3));
+}
+//# sourceMappingURL=DragInsertionOverlay.js.map