@parhelia/core 0.1.12902 → 0.1.12904

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

@@ -1,879 +0,0 @@
-"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 { buildInsertTargetLabel } from "./insertTargetLabel";
-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: buildActiveInsertionLabel(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: buildActiveInsertionLabel(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 buildActiveInsertionLabel(target) {
-    return buildInsertTargetLabel({
-        placeholder: target.zone.placeholder,
-        description: target.zone.description,
-        index: target.adjustedIndex,
-    });
-}
-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) {
-    if (!target)
-        return false;
-    if (target.zoneHovered)
-        return true;
-    // Directional edge targets render a clear insertion line even when the final
-    // pointer sample is inside the component edge band instead of the 40px band
-    // outside it. Treat the visible line as the user's drop intent; hidden/neutral
-    // targets remain non-committal unless their own hit zone is hovered.
-    return target.visualMode !== "neutral" && isInsertionLineVisibleFor(target);
-}
-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