@parhelia/core 0.1.12907 → 0.1.12910

package/dist/editor/page-editor-chrome/overlay/IframeOverlayProvider.d.ts

@@ -0,0 +1,62 @@
+import { OverlayMetrics } from "./geometry";
+import type { DragObject } from "../../client/editContext";
+export type OverlayInvalidationReason = "viewport" | "layout" | "text" | "adornment-data";
+type OverlayMode = "scrolling" | "static";
+export declare const IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT = "parhelia:iframe-overlay-bridge-scroll";
+export declare const IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT = "parhelia:iframe-overlay-bridge-geometry";
+export type IframeOverlayBridgeScrollDetail = {
+    scrollLeft: number;
+    scrollTop: number;
+};
+export type IframeOverlayBridgeGeometryDetail = Partial<Pick<OverlayMetrics, "scrollLeft" | "scrollTop" | "viewportWidth" | "viewportHeight" | "scrollWidth" | "scrollHeight">>;
+export declare const IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT = "parhelia:iframe-overlay-bridge-drag-gesture";
+export type IframeOverlayBridgeDragGestureSpace = "host" | "client";
+export type IframeOverlayBridgeDragGestureDetail = {
+    phase: "start";
+    pointerId: number;
+    elementKey?: string;
+    componentId?: string;
+    dragObject?: DragObject;
+    clientX: number;
+    clientY: number;
+    space?: IframeOverlayBridgeDragGestureSpace;
+} | {
+    phase: "move";
+    pointerId: number;
+    clientX: number;
+    clientY: number;
+    space?: IframeOverlayBridgeDragGestureSpace;
+} | {
+    phase: "end";
+    pointerId: number;
+    clientX: number;
+    clientY: number;
+    canceled?: boolean;
+    space?: IframeOverlayBridgeDragGestureSpace;
+} | {
+    phase: "snapshot";
+    elementKey: string;
+    dataUrl: string;
+    width: number;
+    height: number;
+};
+type MeasurementCallback = (metrics: OverlayMetrics, reasons: ReadonlySet<OverlayInvalidationReason>) => void;
+type ScrollCallback = (metrics: OverlayMetrics) => void;
+type IframeOverlayContextValue = {
+    iframe: HTMLIFrameElement | null;
+    getMetrics: () => OverlayMetrics;
+    invalidateGeometry: (reason: OverlayInvalidationReason | OverlayInvalidationReason[]) => void;
+    subscribeMeasurement: (callback: MeasurementCallback, interests?: Iterable<OverlayInvalidationReason>) => () => void;
+    subscribeScroll: (callback: ScrollCallback) => () => void;
+};
+export declare function useIframeOverlay(): IframeOverlayContextValue;
+export declare function IframeOverlayProvider({ iframe, scrollScale, visualScale, invalidationKey, deferredInvalidationMs, mode, children, }: {
+    iframe: HTMLIFrameElement | null;
+    scrollScale?: number;
+    visualScale?: number;
+    invalidationKey?: unknown;
+    deferredInvalidationMs?: number;
+    mode?: OverlayMode;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/editor/page-editor-chrome/overlay/IframeOverlayProvider.js

@@ -0,0 +1,306 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, } from "react";
+import { getOverlayMetrics, } from "./geometry";
+import { SPLITTER_RESIZE_EVENT } from "../../ui/splitterResizeEvent";
+export const IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT = "parhelia:iframe-overlay-bridge-scroll";
+export const IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT = "parhelia:iframe-overlay-bridge-geometry";
+// Component drag gesture consumed by DragInsertionOverlay. Two sources dispatch
+// it:
+// - the host (whole-component grab), re-dispatched from PageViewerFrame, with
+//   coordinates in host-viewport space (`space: "host"`, the default); and
+// - parent-DOM grips (the frame-menu header), which own the pointer in the
+//   parent and report PARENT-client coordinates (`space: "client"`).
+// The overlay maps each space with the matching coordinate mapper.
+export const IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT = "parhelia:iframe-overlay-bridge-drag-gesture";
+const ALL_REASONS = [
+    "viewport",
+    "layout",
+    "text",
+    "adornment-data",
+];
+const EMPTY_METRICS = {
+    scrollLeft: 0,
+    scrollTop: 0,
+    scrollScale: 1,
+    visualScale: 1,
+    viewportWidth: 0,
+    viewportHeight: 0,
+    scrollWidth: 0,
+    scrollHeight: 0,
+};
+const IframeOverlayContext = createContext(null);
+export function useIframeOverlay() {
+    const context = useContext(IframeOverlayContext);
+    if (!context) {
+        throw new Error("useIframeOverlay must be used inside IframeOverlayProvider");
+    }
+    return context;
+}
+export function IframeOverlayProvider({ iframe, scrollScale = 1, visualScale = 1, invalidationKey, deferredInvalidationMs = 0, mode = "scrolling", children, }) {
+    const layerRef = useRef(null);
+    const subscribersRef = useRef(new Set());
+    const scrollSubscribersRef = useRef(new Set());
+    const pendingReasonsRef = useRef(new Set());
+    const geometryRafRef = useRef(null);
+    const scrollRafRef = useRef(null);
+    const lastMetricsRef = useRef(EMPTY_METRICS);
+    const iframeRef = useRef(iframe);
+    const bridgeScrollRef = useRef(null);
+    const bridgeGeometryMetricsRef = useRef(null);
+    const scrollScaleRef = useRef(scrollScale);
+    const visualScaleRef = useRef(visualScale);
+    useEffect(() => {
+        iframeRef.current = iframe;
+        bridgeScrollRef.current = null;
+        bridgeGeometryMetricsRef.current = null;
+    }, [iframe]);
+    useEffect(() => {
+        scrollScaleRef.current = scrollScale;
+        visualScaleRef.current = visualScale;
+    }, [scrollScale, visualScale]);
+    const getMetrics = useCallback(() => {
+        const metrics = getOverlayMetrics(iframeRef.current, scrollScaleRef.current, visualScaleRef.current);
+        return bridgeScrollRef.current
+            ? {
+                ...metrics,
+                ...bridgeGeometryMetricsRef.current,
+                ...bridgeScrollRef.current,
+            }
+            : bridgeGeometryMetricsRef.current
+                ? { ...metrics, ...bridgeGeometryMetricsRef.current }
+                : metrics;
+    }, []);
+    const writeScrollPosition = useCallback((metrics) => {
+        const layer = layerRef.current;
+        if (!layer)
+            return;
+        const translatedX = mode === "scrolling"
+            ? -metrics.scrollLeft * metrics.scrollScale * metrics.visualScale
+            : 0;
+        const translatedY = mode === "scrolling"
+            ? -metrics.scrollTop * metrics.scrollScale * metrics.visualScale
+            : 0;
+        layer.style.transform = `translate3d(${translatedX}px, ${translatedY}px, 0)`;
+    }, [mode]);
+    const applyScrollMetrics = useCallback((scrollMetrics) => {
+        const metrics = {
+            ...lastMetricsRef.current,
+            ...scrollMetrics,
+        };
+        lastMetricsRef.current = metrics;
+        writeScrollPosition(metrics);
+        return metrics;
+    }, [writeScrollPosition]);
+    const writeLayerMetrics = useCallback((metrics) => {
+        const layer = layerRef.current;
+        if (!layer)
+            return;
+        lastMetricsRef.current = metrics;
+        writeScrollPosition(metrics);
+        const documentScale = metrics.scrollScale * metrics.visualScale;
+        layer.style.width = `${Math.max(metrics.scrollWidth * documentScale, metrics.viewportWidth)}px`;
+        layer.style.height = `${Math.max(metrics.scrollHeight * documentScale, metrics.viewportHeight)}px`;
+    }, [writeScrollPosition]);
+    const notifyScrollSubscribers = useCallback((metrics) => {
+        scrollSubscribersRef.current.forEach((callback) => callback(metrics));
+    }, []);
+    useEffect(() => {
+        if (!iframe)
+            return;
+        const handleBridgeScroll = (event) => {
+            const detail = event
+                .detail;
+            if (!detail ||
+                !Number.isFinite(detail.scrollLeft) ||
+                !Number.isFinite(detail.scrollTop)) {
+                return;
+            }
+            const bridgeScroll = {
+                scrollLeft: detail.scrollLeft,
+                scrollTop: detail.scrollTop,
+            };
+            bridgeScrollRef.current = bridgeScroll;
+            applyScrollMetrics({
+                ...bridgeScroll,
+                scrollScale: scrollScaleRef.current,
+                visualScale: visualScaleRef.current,
+            });
+            if (scrollRafRef.current != null)
+                return;
+            scrollRafRef.current = window.requestAnimationFrame(() => {
+                scrollRafRef.current = null;
+                notifyScrollSubscribers(lastMetricsRef.current);
+            });
+        };
+        iframe.addEventListener(IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, handleBridgeScroll);
+        return () => {
+            iframe.removeEventListener(IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, handleBridgeScroll);
+        };
+    }, [iframe, applyScrollMetrics, notifyScrollSubscribers]);
+    const flushMeasurements = useCallback(() => {
+        geometryRafRef.current = null;
+        const reasons = pendingReasonsRef.current.size > 0
+            ? new Set(pendingReasonsRef.current)
+            : new Set(ALL_REASONS);
+        pendingReasonsRef.current.clear();
+        const metrics = getMetrics();
+        writeLayerMetrics(metrics);
+        subscribersRef.current.forEach((subscriber) => {
+            const shouldRun = subscriber.interests.size === 0 ||
+                Array.from(reasons).some((reason) => subscriber.interests.has(reason));
+            if (shouldRun)
+                subscriber.callback(metrics, reasons);
+        });
+    }, [getMetrics, writeLayerMetrics]);
+    const invalidateGeometry = useCallback((reason) => {
+        const reasons = Array.isArray(reason) ? reason : [reason];
+        reasons.forEach((item) => pendingReasonsRef.current.add(item));
+        if (geometryRafRef.current != null)
+            return;
+        geometryRafRef.current = window.requestAnimationFrame(() => {
+            flushMeasurements();
+        });
+    }, [flushMeasurements]);
+    useEffect(() => {
+        if (!iframe)
+            return;
+        const handleBridgeGeometry = (event) => {
+            const detail = event
+                .detail;
+            if (detail && typeof detail === "object") {
+                bridgeGeometryMetricsRef.current = {
+                    ...(Number.isFinite(detail.scrollLeft)
+                        ? { scrollLeft: detail.scrollLeft }
+                        : {}),
+                    ...(Number.isFinite(detail.scrollTop)
+                        ? { scrollTop: detail.scrollTop }
+                        : {}),
+                    ...(Number.isFinite(detail.viewportWidth)
+                        ? { viewportWidth: detail.viewportWidth }
+                        : {}),
+                    ...(Number.isFinite(detail.viewportHeight)
+                        ? { viewportHeight: detail.viewportHeight }
+                        : {}),
+                    ...(Number.isFinite(detail.scrollWidth)
+                        ? { scrollWidth: detail.scrollWidth }
+                        : {}),
+                    ...(Number.isFinite(detail.scrollHeight)
+                        ? { scrollHeight: detail.scrollHeight }
+                        : {}),
+                };
+                if (Number.isFinite(detail.scrollLeft) &&
+                    Number.isFinite(detail.scrollTop)) {
+                    bridgeScrollRef.current = {
+                        scrollLeft: detail.scrollLeft,
+                        scrollTop: detail.scrollTop,
+                    };
+                }
+            }
+            invalidateGeometry(["viewport", "layout", "adornment-data"]);
+        };
+        iframe.addEventListener(IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT, handleBridgeGeometry);
+        return () => {
+            iframe.removeEventListener(IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT, handleBridgeGeometry);
+        };
+    }, [iframe, invalidateGeometry]);
+    const subscribeMeasurement = useCallback((callback, interests = ALL_REASONS) => {
+        const subscriber = {
+            callback,
+            interests: new Set(interests),
+        };
+        subscribersRef.current.add(subscriber);
+        callback(getMetrics(), new Set(ALL_REASONS));
+        return () => {
+            subscribersRef.current.delete(subscriber);
+        };
+    }, [getMetrics]);
+    const subscribeScroll = useCallback((callback) => {
+        scrollSubscribersRef.current.add(callback);
+        return () => {
+            scrollSubscribersRef.current.delete(callback);
+        };
+    }, []);
+    useLayoutEffect(() => {
+        const metrics = getMetrics();
+        writeLayerMetrics(metrics);
+    }, [getMetrics, mode, scrollScale, visualScale, writeLayerMetrics]);
+    useEffect(() => {
+        invalidateGeometry(["viewport", "layout", "adornment-data"]);
+    }, [iframe, invalidateGeometry, mode, scrollScale, visualScale]);
+    useEffect(() => {
+        invalidateGeometry(["viewport", "layout", "adornment-data"]);
+        if (deferredInvalidationMs <= 0)
+            return;
+        const timer = window.setTimeout(() => {
+            invalidateGeometry(["viewport", "layout", "adornment-data"]);
+        }, deferredInvalidationMs);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [deferredInvalidationMs, invalidationKey, invalidateGeometry]);
+    useEffect(() => {
+        const handleHostViewportChange = (event) => {
+            if (event.type === SPLITTER_RESIZE_EVENT) {
+                pendingReasonsRef.current.add("viewport");
+                pendingReasonsRef.current.add("layout");
+                if (geometryRafRef.current != null) {
+                    window.cancelAnimationFrame(geometryRafRef.current);
+                    geometryRafRef.current = null;
+                }
+                flushMeasurements();
+                return;
+            }
+            invalidateGeometry(["viewport", "layout"]);
+        };
+        window.addEventListener("resize", handleHostViewportChange);
+        window.addEventListener(SPLITTER_RESIZE_EVENT, handleHostViewportChange);
+        return () => {
+            window.removeEventListener("resize", handleHostViewportChange);
+            window.removeEventListener(SPLITTER_RESIZE_EVENT, handleHostViewportChange);
+        };
+    }, [flushMeasurements, invalidateGeometry]);
+    useEffect(() => {
+        if (!iframe)
+            return;
+        let resizeObserver = null;
+        try {
+            resizeObserver = new ResizeObserver(() => {
+                invalidateGeometry("viewport");
+            });
+            resizeObserver.observe(iframe);
+        }
+        catch {
+            resizeObserver = null;
+        }
+        return () => {
+            resizeObserver?.disconnect();
+        };
+    }, [iframe, invalidateGeometry]);
+    useEffect(() => {
+        return () => {
+            if (geometryRafRef.current != null) {
+                window.cancelAnimationFrame(geometryRafRef.current);
+                geometryRafRef.current = null;
+            }
+            if (scrollRafRef.current != null) {
+                window.cancelAnimationFrame(scrollRafRef.current);
+                scrollRafRef.current = null;
+            }
+        };
+    }, []);
+    const contextValue = useMemo(() => ({
+        iframe,
+        getMetrics,
+        invalidateGeometry,
+        subscribeMeasurement,
+        subscribeScroll,
+    }), [
+        iframe,
+        getMetrics,
+        invalidateGeometry,
+        subscribeMeasurement,
+        subscribeScroll,
+    ]);
+    return (_jsx(IframeOverlayContext.Provider, { value: contextValue, children: _jsx("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", "data-testid": "iframe-overlay-root", children: _jsx("div", { ref: layerRef, className: "pointer-events-none absolute top-0 left-0 will-change-transform", "data-testid": "iframe-overlay-layer", children: children }) }) }));
+}
+//# sourceMappingURL=IframeOverlayProvider.js.map

package/dist/editor/page-editor-chrome/overlay/IframeOverlayProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframeOverlayProvider.js","sourceRoot":"","sources":["../../../../src/editor/page-editor-chrome/overlay/IframeOverlayProvider.tsx"],"names":[],"mappings":"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"}

package/dist/editor/page-editor-chrome/overlay/InsertionLine.d.ts

@@ -0,0 +1,44 @@
+import { type ComponentFrameInsertColor } from "../../componentFrameColors";
+import type { OverlayRect } from "./geometry";
+import type { PlaceholderZone } from "./placeholderZones";
+export type InsertionVisualMode = "directional" | "between" | "neutral" | "none";
+export type InsertionVisualAnchor = PlaceholderZone["anchor"];
+export type InsertionVisualPhase = "enter" | "exit";
+export declare const INSERTION_ZONE_THICKNESS = 40;
+/**
+ * The single "where will it land" indicator shown during a drag: a thin colored
+ * bar at the exact insertion gap, tagged with the target placeholder + position.
+ * One calm signal - it replaced the heavy 40px "drop zone" band so the drag
+ * canvas isn't a stack of competing highlights. Purely presentational; positions
+ * are overlay/document coordinates.
+ */
+export declare function InsertionLine({ zone, placeholderRect, visualMode, visualAnchor, visualTargetRect, color, animate, phase, label, }: {
+    zone: PlaceholderZone;
+    placeholderRect: OverlayRect;
+    visualMode?: InsertionVisualMode;
+    visualAnchor?: InsertionVisualAnchor;
+    visualTargetRect?: OverlayRect | null;
+    color: ComponentFrameInsertColor;
+    animate: boolean;
+    phase?: InsertionVisualPhase;
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function getDirectionalInsertionZoneRect({ zone, targetRect, anchor, }: {
+    zone: PlaceholderZone;
+    targetRect: OverlayRect;
+    anchor: InsertionVisualAnchor;
+}): OverlayRect;
+export declare function getDirectionalInsertionHitZoneRect({ zone, targetRect, anchor, }: {
+    zone: PlaceholderZone;
+    targetRect: OverlayRect;
+    anchor: InsertionVisualAnchor;
+}): OverlayRect;
+export declare function getBetweenInsertionZoneRect({ zone, previousRect, nextRect, }: {
+    zone: PlaceholderZone;
+    previousRect: OverlayRect;
+    nextRect: OverlayRect;
+}): OverlayRect;
+export declare function getEmptyPlaceholderNeutralZoneRect({ zone, targetRect, }: {
+    zone: PlaceholderZone;
+    targetRect: OverlayRect;
+}): OverlayRect;

package/dist/editor/page-editor-chrome/overlay/InsertionLine.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils";
+import { componentFrameBgColorVariants, } from "../../componentFrameColors";
+// The catch geometry stays 40px (used for hit-testing in DragInsertionOverlay);
+// only the rendered indicator is the slim bar below.
+export const INSERTION_ZONE_THICKNESS = 40;
+const VERTICAL_OUTSIDE_ZONE_OFFSET = 4;
+const INSERTION_BAR_THICKNESS = 3;
+const insertAccentVar = {
+    default: "var(--color-component-default)",
+    shared: "var(--color-component-shared)",
+    layout: "var(--color-highlight-100)",
+};
+/**
+ * The single "where will it land" indicator shown during a drag: a thin colored
+ * bar at the exact insertion gap, tagged with the target placeholder + position.
+ * One calm signal - it replaced the heavy 40px "drop zone" band so the drag
+ * canvas isn't a stack of competing highlights. Purely presentational; positions
+ * are overlay/document coordinates.
+ */
+export function InsertionLine({ zone, placeholderRect, visualMode = "directional", visualAnchor, visualTargetRect, color, animate, phase = "enter", label, }) {
+    if (visualMode === "none")
+        return null;
+    const isEmptyPlaceholder = zone.placeholder.components.length === 0;
+    if (visualMode === "neutral" && !isEmptyPlaceholder)
+        return null;
+    const targetRect = visualTargetRect ?? zone.targetRect ?? placeholderRect;
+    const anchor = visualAnchor ?? zone.anchor;
+    const zoneRect = visualMode === "between"
+        ? targetRect
+        : visualMode === "neutral"
+            ? getEmptyPlaceholderNeutralZoneRect({ zone, targetRect })
+            : getDirectionalInsertionZoneRect({ zone, targetRect, anchor });
+    // A vertical placeholder (stacked components) gets a horizontal insertion bar.
+    const horizontalBar = zone.orientation === "vertical";
+    // Pin the bar to the resolved gap; centre it for an empty placeholder.
+    const mainPos = isEmptyPlaceholder
+        ? horizontalBar
+            ? zoneRect.y + zoneRect.height / 2
+            : zoneRect.x + zoneRect.width / 2
+        : horizontalBar
+            ? zone.position.y
+            : zone.position.x;
+    const barStyle = horizontalBar
+        ? {
+            left: zoneRect.x,
+            top: mainPos - INSERTION_BAR_THICKNESS / 2,
+            width: zoneRect.width,
+            height: INSERTION_BAR_THICKNESS,
+        }
+        : {
+            left: mainPos - INSERTION_BAR_THICKNESS / 2,
+            top: zoneRect.y,
+            width: INSERTION_BAR_THICKNESS,
+            height: zoneRect.height,
+        };
+    const labelStyle = horizontalBar
+        ? { left: zoneRect.x, top: mainPos - 22 }
+        : { left: mainPos + 8, top: zoneRect.y };
+    const accent = insertAccentVar[color];
+    return (_jsxs("div", { "data-testid": "drag-insertion-line", "data-motion-phase": phase, className: cn("pointer-events-none absolute inset-0", animate &&
+            (phase === "exit"
+                ? "parhelia-drop-zone-overlay-exit"
+                : "parhelia-drop-zone-overlay-enter")), style: { zIndex: 860 }, children: [_jsx("div", { "data-testid": "drag-insertion-zone", "data-visual-mode": visualMode, 
+                // No position transition: the bar snaps to each gap so it stays locked
+                // to the active "+" dot. The constant React key already prevents the
+                // remount/re-fade that caused the per-gap flashing, and gliding made the
+                // bar lag behind the cursor's gap.
+                className: "absolute rounded-full", style: { ...barStyle, backgroundColor: accent } }), label && (_jsx("div", { "data-testid": "drag-insertion-label", className: cn("absolute flex max-w-[min(18rem,calc(100vw-3rem))] items-center rounded-[4px] px-2 py-0.5 text-[11px] leading-none font-medium whitespace-nowrap text-white shadow-sm", componentFrameBgColorVariants[color]), style: labelStyle, children: _jsx("span", { className: "truncate", children: label }) }))] }));
+}
+export function getDirectionalInsertionZoneRect({ zone, targetRect, anchor, }) {
+    const isVerticalPlaceholder = zone.orientation === "vertical";
+    const isEmptyPlaceholder = zone.placeholder.components.length === 0;
+    const zoneThickness = INSERTION_ZONE_THICKNESS;
+    return isVerticalPlaceholder
+        ? {
+            x: targetRect.x,
+            y: isEmptyPlaceholder
+                ? zone.position.y - zoneThickness / 2
+                : anchor === "top"
+                    ? targetRect.y - zoneThickness - VERTICAL_OUTSIDE_ZONE_OFFSET
+                    : targetRect.y + targetRect.height + VERTICAL_OUTSIDE_ZONE_OFFSET,
+            width: targetRect.width,
+            height: zoneThickness,
+        }
+        : {
+            x: isEmptyPlaceholder
+                ? zone.position.x - zoneThickness / 2
+                : anchor === "left"
+                    ? targetRect.x - zoneThickness
+                    : targetRect.x + targetRect.width,
+            y: targetRect.y,
+            width: zoneThickness,
+            height: targetRect.height,
+        };
+}
+export function getDirectionalInsertionHitZoneRect({ zone, targetRect, anchor, }) {
+    const visualRect = getDirectionalInsertionZoneRect({
+        zone,
+        targetRect,
+        anchor,
+    });
+    const isVerticalPlaceholder = zone.orientation === "vertical";
+    const isEmptyPlaceholder = zone.placeholder.components.length === 0;
+    if (!isVerticalPlaceholder || isEmptyPlaceholder)
+        return visualRect;
+    switch (anchor) {
+        case "top":
+            return {
+                ...visualRect,
+                height: visualRect.height + VERTICAL_OUTSIDE_ZONE_OFFSET,
+            };
+        case "bottom":
+            return {
+                ...visualRect,
+                y: targetRect.y + targetRect.height,
+                height: visualRect.height + VERTICAL_OUTSIDE_ZONE_OFFSET,
+            };
+        case "left":
+        case "right":
+            return visualRect;
+    }
+}
+export function getBetweenInsertionZoneRect({ zone, previousRect, nextRect, }) {
+    if (zone.orientation === "horizontal") {
+        const y = Math.min(previousRect.y, nextRect.y);
+        const bottom = Math.max(previousRect.y + previousRect.height, nextRect.y + nextRect.height);
+        return {
+            x: zone.position.x - INSERTION_ZONE_THICKNESS / 2,
+            width: INSERTION_ZONE_THICKNESS,
+            y,
+            height: bottom - y,
+        };
+    }
+    const x = Math.min(previousRect.x, nextRect.x);
+    const right = Math.max(previousRect.x + previousRect.width, nextRect.x + nextRect.width);
+    return {
+        x,
+        y: zone.position.y - INSERTION_ZONE_THICKNESS / 2,
+        height: INSERTION_ZONE_THICKNESS,
+        width: right - x,
+    };
+}
+export function getEmptyPlaceholderNeutralZoneRect({ zone, targetRect, }) {
+    if (zone.orientation === "horizontal") {
+        return {
+            x: zone.position.x - INSERTION_ZONE_THICKNESS / 2,
+            y: targetRect.y,
+            width: INSERTION_ZONE_THICKNESS,
+            height: targetRect.height,
+        };
+    }
+    return {
+        x: targetRect.x,
+        y: zone.position.y - INSERTION_ZONE_THICKNESS / 2,
+        width: targetRect.width,
+        height: INSERTION_ZONE_THICKNESS,
+    };
+}
+//# sourceMappingURL=InsertionLine.js.map

package/dist/editor/page-editor-chrome/overlay/InsertionLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsertionLine.js","sourceRoot":"","sources":["../../../../src/editor/page-editor-chrome/overlay/InsertionLine.tsx"],"names":[],"mappings":"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"}