@parhelia/core 0.1.12927 → 0.1.12931

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

@@ -2,17 +2,18 @@
 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 { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, GripVertical, } from "lucide-react";
+import { Ban, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, GripVertical, } from "lucide-react";
 import { useEditContext } from "../client/editContext";
 import { useSlotContext } from "../views/editorSlotContext";
 import { getAllPlaceholders, getComponentById } from "../componentTreeHelper";
+import { CANVAS_REFRESH_COMPLETED_EVENT, } from "../page-viewer/pageViewContext";
 import { cn } from "../../lib/utils";
 import { useReducedMotion } from "../client/hooks/useReducedMotion";
 import { clientToOverlay, findBridgeComponentTarget, hostViewportToOverlay, FRAME_OUTSET, 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 { computePlaceholderZones, isWrapInsertionGap, layoutAwareIndex, placeholderZonesEqual, resolveNearestGap, } from "./overlay/placeholderZones";
 import { getBetweenInsertionZoneRect, getDirectionalInsertionHitZoneRect, getDirectionalInsertionZoneRect, getEmptyPlaceholderNeutralZoneRect, InsertionLine, } from "./overlay/InsertionLine";
 import { buildComponentDragObject } from "./componentDragObject";
 import { buildInsertTargetLabel, formatPlaceholderDisplayName, } from "./insertTargetLabel";
@@ -31,6 +32,9 @@ const TEMPLATE_THUMBNAIL_WIDTH_PX = 176;
 const TEMPLATE_THUMBNAIL_IMAGE_HEIGHT_PX = 96;
 const OFFSCREEN_GUIDE_EDGE_INSET_PX = 18;
 const OFFSCREEN_GUIDE_CROSS_AXIS_PADDING_PX = 24;
+// Zones start empty for a frame or two while the first overlay measurement
+// runs; only call the drag hopeless after they stay empty this long.
+const NO_DROP_HINT_DELAY_MS = 200;
 /**
  * Full-canvas drop affordance shown while a component/template is being dragged.
  * It drives the continuous {@link InsertionLine} from two sources:
@@ -233,7 +237,7 @@ export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, })
     }, []);
     const announce = useCallback((target) => {
         const displayPlaceholderName = formatPlaceholderDisplayName(target.zone.description || target.zone.placeholder.name);
-        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: displayPlaceholderName }), " ", "at position", " ", _jsx("span", { className: "font-bold", children: target.adjustedIndex + 1 })] }));
+        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: displayPlaceholderName }), " 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.
@@ -277,6 +281,56 @@ export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, })
         originalPlaceholderPreviewActiveRef.current = false;
         pageViewContextRef.current?.requestBridgePreviewGap?.({ clear: true });
     }, []);
+    // Pending "keep the original-position placeholder up" hold after a committed
+    // move; holds the clear until the canvas repaints (or the backstop fires).
+    const previewGapHoldCleanupRef = useRef(null);
+    const cancelPreviewGapHold = useCallback(() => {
+        previewGapHoldCleanupRef.current?.();
+    }, []);
+    // After a committed component move, the grayed-out placeholder the bridge
+    // draws over the original position must outlive the drag: the operation
+    // resolves when the server accepts it, but the canvas repaints later -
+    // clearing at drop leaves the stale component fully visible at its old spot
+    // until the refresh lands. Mirror holdInsertingUntilCanvasRefresh
+    // (EditorShell): clear on the first canvas refresh, with a timeout backstop,
+    // or immediately if the operation did not commit.
+    const holdPreviewGapUntilCanvasRefresh = useCallback((commit) => {
+        previewGapHoldCleanupRef.current?.();
+        const detach = () => {
+            if (previewGapHoldCleanupRef.current === detach) {
+                previewGapHoldCleanupRef.current = null;
+            }
+            window.removeEventListener(CANVAS_REFRESH_COMPLETED_EVENT, finish);
+            window.clearTimeout(timeoutId);
+        };
+        const finish = () => {
+            detach();
+            clearPreviewGap();
+        };
+        const timeoutId = window.setTimeout(finish, 15000);
+        window.addEventListener(CANVAS_REFRESH_COMPLETED_EVENT, finish);
+        // Cancel (a new drag owns the preview now): stop watching WITHOUT
+        // sending a clear that would wipe the new drag's placeholder.
+        previewGapHoldCleanupRef.current = detach;
+        const isCurrentHold = () => previewGapHoldCleanupRef.current === detach;
+        // Promise.resolve guards non-async doubles (test mocks) of
+        // droppedInPlaceholder.
+        void Promise.resolve(commit)
+            .then((result) => {
+            if (result?.committed === false && isCurrentHold())
+                finish();
+        })
+            .catch(() => {
+            if (isCurrentHold())
+                finish();
+        });
+    }, [clearPreviewGap]);
+    useEffect(() => () => {
+        // Detach only: unmount tears down the whole chrome (view switch or the
+        // refresh itself re-keying the overlay); an unconditional clear here
+        // would race a hold that a remounted overlay no longer tracks.
+        previewGapHoldCleanupRef.current?.();
+    }, []);
     const startCanceledDragReturnAnimation = useCallback(() => {
         if (reducedMotionRef.current)
             return false;
@@ -485,6 +539,32 @@ export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, })
             window.removeEventListener("keydown", cancelOnEscape, true);
         };
     }, [cancelCurrentDrag, isDragging]);
+    // No gap anywhere accepts this drag — for a component move that means it
+    // already sits in its only possible position (its own adjacent gaps are
+    // no-ops and hidden). Surface that instead of leaving the drag mute: a hint
+    // rides the drag cursor (gesture drags) or tops the canvas (native drags),
+    // and the status line announces it. Delayed so the initial empty measurement
+    // doesn't flash the hint at every drag start.
+    const noDropPositionMessage = isDragging
+        ? editContext?.dragObject?.type === "component"
+            ? "Already in its only possible position — nowhere else to move it"
+            : "No compatible placeholder on this page"
+        : null;
+    const zonesEmptyWhileDragging = isDragging && zones.length === 0;
+    const [showNoDropHint, setShowNoDropHint] = useState(false);
+    useEffect(() => {
+        if (!zonesEmptyWhileDragging) {
+            setShowNoDropHint(false);
+            return;
+        }
+        const timer = window.setTimeout(() => setShowNoDropHint(true), NO_DROP_HINT_DELAY_MS);
+        return () => window.clearTimeout(timer);
+    }, [zonesEmptyWhileDragging]);
+    useEffect(() => {
+        if (showNoDropHint && noDropPositionMessage) {
+            editContextRef.current?.setStatusMessage(_jsx("div", { children: noDropPositionMessage }));
+        }
+    }, [showNoDropHint, noDropPositionMessage]);
     // 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
@@ -571,6 +651,9 @@ export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, })
             };
             if (detail.phase === "start") {
                 clearReturnPreview();
+                // A pending post-drop hold must stop watching: the new drag owns the
+                // original-position placeholder from here on.
+                cancelPreviewGapHold();
                 canceledGestureHandledRef.current = false;
                 let component;
                 let dragObject = detail.dragObject;
@@ -581,7 +664,7 @@ export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, })
                         : undefined;
                     if (!component)
                         return;
-                    const selection = ec.selection ?? [];
+                    const selection = ec.getSelection();
                     inMulti = selection.length > 1 && selection.includes(component.id);
                     const selectedIds = inMulti ? selection : [component.id];
                     dragObject = buildComponentDragObject(component, selectedIds, pvc.page);
@@ -657,9 +740,16 @@ export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, })
                     : null;
                 const target = point ? resolveZoneAtOverlayPoint(point) : null;
                 const commitTarget = !detail.canceled && isDropCommitTarget(target) ? target : null;
-                clearDragPresentation();
+                // On a committed move, keep the original-position placeholder up past
+                // the drag - it is cleared when the canvas refresh lands (see
+                // holdPreviewGapUntilCanvasRefresh).
+                const holdOriginalPreview = !!commitTarget && originalPlaceholderPreviewActiveRef.current;
+                clearDragPresentation({ clearPreview: !holdOriginalPreview });
                 if (commitTarget) {
-                    ec.droppedInPlaceholder(commitTarget.zone.placeholder.key, commitTarget.adjustedIndex, undefined, commitTarget.zone.anchor, undefined, commitTarget.zone.position, commitTarget.color);
+                    const commit = ec.droppedInPlaceholder(commitTarget.zone.placeholder.key, commitTarget.adjustedIndex, undefined, commitTarget.zone.anchor, undefined, commitTarget.zone.position, commitTarget.color);
+                    if (holdOriginalPreview) {
+                        holdPreviewGapUntilCanvasRefresh(commit);
+                    }
                 }
                 ec.dragEnd();
             }
@@ -670,16 +760,22 @@ export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, })
         overlay.iframe,
         resolveZoneAtOverlayPoint,
         applyResolvedZone,
+        cancelPreviewGapHold,
         clearReturnPreview,
         clearDragPresentation,
+        holdPreviewGapUntilCanvasRefresh,
         startCanceledDragReturnAnimation,
     ]);
-    // Reset when a drag ends.
+    // Reset when a drag ends. A pending post-drop hold keeps the original
+    // placeholder alive until the canvas refresh, so don't clear the preview
+    // out from under it here.
     useEffect(() => {
         if (!isDragging) {
             if (returnPreviewRef.current)
                 return;
-            clearDragPresentation();
+            clearDragPresentation({
+                clearPreview: !previewGapHoldCleanupRef.current,
+            });
         }
     }, [isDragging, clearDragPresentation]);
     // Never leave a status message lingering after unmount.
@@ -708,8 +804,12 @@ export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, })
     const dragCursorSnapshotSize = snapshot
         ? snapshotDisplaySize(snapshot, dragCursorShrinkPx)
         : null;
-    const templateThumbnailWidth = shrinkDimension(TEMPLATE_THUMBNAIL_WIDTH_PX, dragCursorShrinkPx);
-    const templateThumbnailImageHeight = shrinkDimension(TEMPLATE_THUMBNAIL_IMAGE_HEIGHT_PX, dragCursorShrinkPx);
+    const templateThumbnailSize = shrinkSizeProportionally({
+        width: TEMPLATE_THUMBNAIL_WIDTH_PX,
+        height: TEMPLATE_THUMBNAIL_IMAGE_HEIGHT_PX,
+    }, dragCursorShrinkPx);
+    const templateThumbnailWidth = templateThumbnailSize.width;
+    const templateThumbnailImageHeight = templateThumbnailSize.height;
     const dragCursorSizeTransition = reducedMotion
         ? undefined
         : "width 120ms ease-out, height 120ms ease-out";
@@ -775,31 +875,37 @@ export function DragInsertionOverlay({ pageViewContext, onActiveTargetChange, })
                     // 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")), offscreenGuides.map((guide) => (_jsx(OffscreenInsertionGuidePill, { guide: guide }, guide.direction)))] }), gestureActive &&
+                    , { 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")), offscreenGuides.map((guide) => (_jsx(OffscreenInsertionGuidePill, { guide: guide }, guide.direction))), !gestureActive && showNoDropHint && noDropPositionMessage && (
+                    // Native (HTML5) drags have no cursor-anchored preview to attach the
+                    // hint to, so it tops the canvas instead.
+                    _jsxs("div", { "data-testid": "drag-no-drop-banner", className: "pointer-events-none absolute top-4 left-1/2 flex -translate-x-1/2 items-center gap-1.5 rounded-[4px] bg-neutral-grey-100/90 px-2.5 py-1.5 text-xs leading-none font-medium whitespace-nowrap text-white shadow-md backdrop-blur-sm", style: { zIndex: 900 }, children: [_jsx(Ban, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate", children: noDropPositionMessage })] }))] }), 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", { ref: dragCursorPreviewRef, "data-testid": "drag-cursor-preview", className: "pointer-events-none fixed flex flex-col items-start gap-1.5", style: {
+                _jsxs("div", { ref: dragCursorPreviewRef, "data-testid": "drag-cursor-preview", 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 ? (_jsx("div", { "data-testid": "drag-cursor-snapshot", className: "overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10", style: { opacity: 0.96 }, children: _jsx("div", { className: "p-1.5", children: _jsx("img", { src: snapshot.dataUrl, alt: "", "aria-hidden": "true", draggable: false, className: "block rounded-sm", style: {
-                                    width: dragCursorSnapshotSize?.width,
-                                    height: dragCursorSnapshotSize?.height,
-                                    objectFit: "contain",
-                                    transition: dragCursorSizeTransition,
-                                } }) }) })) : dragCursorThumbnailUrl ? (_jsxs("div", { "data-testid": "drag-cursor-thumbnail", className: "overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10", style: {
-                            opacity: 0.96,
-                            width: templateThumbnailWidth,
-                            transition: dragCursorSizeTransition,
-                        }, children: [_jsx("div", { "data-testid": "drag-cursor-thumbnail-label", className: "border-border-default truncate border-b px-2 py-1 text-xs leading-4 font-medium text-neutral-grey-100", title: dragCursorLabel, children: dragCursorLabel }), _jsx("div", { className: "p-1.5", children: _jsx("img", { src: dragCursorThumbnailUrl, alt: "", "aria-hidden": "true", draggable: false, className: "block w-full rounded-sm object-contain", style: {
-                                        height: templateThumbnailImageHeight,
+                    }, children: [showNoDropHint && noDropPositionMessage && (
+                        // Ride ABOVE the dragged preview so the hint sits on top of the
+                        // snapshot/thumbnail image rather than dangling below it.
+                        _jsxs("div", { "data-testid": "drag-cursor-no-drop", className: "bg-neutral-grey-100/90 flex items-center gap-1.5 rounded-[4px] px-2 py-1 text-xs leading-none font-medium whitespace-nowrap text-white shadow-md", children: [_jsx(Ban, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate", children: noDropPositionMessage })] })), snapshot ? (_jsx("div", { "data-testid": "drag-cursor-snapshot", className: "overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10", style: { opacity: 0.96 }, children: _jsx("div", { className: "p-1.5", children: _jsx("img", { src: snapshot.dataUrl, alt: "", "aria-hidden": "true", draggable: false, className: "block rounded-sm", style: {
+                                        width: dragCursorSnapshotSize?.width,
+                                        height: dragCursorSnapshotSize?.height,
+                                        objectFit: "contain",
                                         transition: dragCursorSizeTransition,
-                                    } }) })] })) : (_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), returnPreviewPortal] }));
+                                    } }) }) })) : dragCursorThumbnailUrl ? (_jsxs("div", { "data-testid": "drag-cursor-thumbnail", className: "overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10", style: {
+                                opacity: 0.96,
+                                width: templateThumbnailWidth,
+                                transition: dragCursorSizeTransition,
+                            }, children: [_jsx("div", { "data-testid": "drag-cursor-thumbnail-label", className: "border-border-default text-neutral-grey-100 truncate border-b px-2 py-1 text-xs leading-4 font-medium", title: dragCursorLabel, children: dragCursorLabel }), _jsx("div", { className: "p-1.5", children: _jsx("img", { src: dragCursorThumbnailUrl, alt: "", "aria-hidden": "true", draggable: false, className: "block w-full rounded-sm object-contain", style: {
+                                            height: templateThumbnailImageHeight,
+                                            transition: dragCursorSizeTransition,
+                                        } }) })] })) : (_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), returnPreviewPortal] }));
 }
 function ReturningDragPreview({ preview }) {
     const [atRest, setAtRest] = useState(false);
@@ -1039,22 +1145,32 @@ function ParentComponentOutline({ component, pageViewContext, color, animate, })
         } }));
 }
 // Size the floating snapshot from 75% of the component's captured width, capped
-// to the viewport. The image uses objectFit:contain, so explicit hover-shrunk
-// width/height boxes do not distort captures with unusual aspect ratios.
+// to the viewport.
 function snapshotDisplaySize(s, shrinkPx = 0) {
     const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
     const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 800;
     const width = Math.round(Math.min(Math.max(1, s.width * 0.75), viewportWidth * 0.9));
     const aspectHeight = s.width > 0 ? Math.round((width * Math.max(1, s.height)) / s.width) : width;
     const height = Math.round(Math.min(Math.max(1, aspectHeight), viewportHeight * 0.9));
+    return shrinkSizeProportionally({ width, height }, shrinkPx);
+}
+// Shrink both dimensions by ONE scale factor (the larger dimension loses
+// `shrinkPx`), preserving aspect ratio. Subtracting the pixels per axis
+// squashed extreme aspect ratios: a flat accordion-row capture lost most of
+// its height but almost none of its width, so the hover-over-drop-zone shrink
+// squeezed it into a sliver.
+export function shrinkSizeProportionally(size, shrinkPx) {
+    const width = Math.max(1, Math.round(size.width));
+    const height = Math.max(1, Math.round(size.height));
+    if (shrinkPx <= 0)
+        return { width, height };
+    const maxDimension = Math.max(width, height);
+    const factor = Math.max(1, maxDimension - shrinkPx) / maxDimension;
     return {
-        width: shrinkDimension(width, shrinkPx),
-        height: shrinkDimension(height, shrinkPx),
+        width: Math.max(1, Math.round(width * factor)),
+        height: Math.max(1, Math.round(height * factor)),
     };
 }
-function shrinkDimension(value, shrinkPx) {
-    return Math.max(1, Math.round(value) - shrinkPx);
-}
 function formatDragCursorLabel(dragObject) {
     const componentCount = dragObject.components?.length ?? 0;
     if (componentCount > 1)
@@ -1170,28 +1286,20 @@ function resolveInsertionZoneVisualTarget(zone, point, placeholderRect, geometry
         }
         : 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);
+        return resolveSingleEdgeVisual(zone, point, placeholderRect, beforeNext);
     }
     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);
+        return resolveSingleEdgeVisual(zone, point, placeholderRect, afterPrevious);
     }
     if (afterPrevious && beforeNext) {
+        // A wrap gap (next starts a new row/column of a wrapping grid) has no
+        // shared gutter for a "between" band - the min→max cross span would
+        // stretch the bar across both rows. Treat the gap as the previous
+        // component's trailing edge instead, which is where `zone.position`
+        // (and the "+" dot) already sits.
+        if (isWrapInsertionGap(zone.orientation, afterPrevious.rect, beforeNext.rect)) {
+            return resolveSingleEdgeVisual(zone, point, placeholderRect, afterPrevious);
+        }
         const betweenRect = getBetweenInsertionZoneRect({
             zone,
             previousRect: afterPrevious.rect,
@@ -1225,6 +1333,50 @@ function resolveInsertionZoneVisualTarget(zone, point, placeholderRect, geometry
     }
     return resolveNeutralInsertionVisual(zone, placeholderRect, point);
 }
+// A gap with a single visual owner: a terminal gap (before the first / after
+// the last component) or a wrap gap resolved to its previous component. The
+// component's edge band and the outside band both light the directional bar;
+// anywhere else falls back to neutral/hidden.
+function resolveSingleEdgeVisual(zone, point, placeholderRect, edge) {
+    if (pointInOverlayRect(point, edge.rect)) {
+        return pointInDirectionalEdgeBand(point, edge.rect, edge.anchor)
+            ? { ...edge, mode: "directional" }
+            : {
+                ...resolveHiddenInsertionVisual(zone),
+                ownerComponentId: edge.ownerComponentId,
+            };
+    }
+    const outsideEdge = resolveDirectionalOutsideEdgeVisual(zone, point, edge);
+    if (outsideEdge)
+        return outsideEdge;
+    return resolveNeutralInsertionVisual(zone, placeholderRect, point);
+}
+// An end gap's "+" dot and insertion band hang OUTSIDE the terminal
+// component's edge (below the last / above the first component), where the
+// component-rect checks above can't match. Without this, the first approach
+// from that side resolved "neutral" (nothing lights up) while the same spot
+// activated fine once the zone was owned - the pointer had to cross into the
+// component's edge band once to arm it. Reuse the owned-zone hit rect so the
+// first approach and the hysteresis accept the exact same region.
+function resolveDirectionalOutsideEdgeVisual(zone, point, edge) {
+    const hitRect = getDirectionalInsertionHitZoneRect({
+        zone,
+        targetRect: edge.rect,
+        anchor: edge.anchor,
+    });
+    if (!pointInOverlayRect(point, hitRect))
+        return null;
+    const visualDropZoneRect = getDirectionalInsertionZoneRect({
+        zone,
+        targetRect: edge.rect,
+        anchor: edge.anchor,
+    });
+    return {
+        ...edge,
+        mode: "directional",
+        zoneHovered: pointInOverlayRect(point, visualDropZoneRect),
+    };
+}
 function resolveNeutralInsertionVisual(zone, placeholderRect, point) {
     const targetRect = zone.targetRect ?? placeholderRect;
     const isEmptyPlaceholder = zone.placeholder.components.length === 0;