@nordcraft/runtime 1.0.0

package/dist/custom-element.main.js

@@ -0,0 +1,14 @@
+import * as libActions from '@nordcraft/std-lib/dist/actions';
+import * as libFormulas from '@nordcraft/std-lib/dist/formulas';
+import fastDeepEqual from 'fast-deep-equal';
+import { defineComponents } from './custom-element/defineComponents';
+const loadCorePlugins = (toddle = window.toddle) => {
+    toddle.isEqual = fastDeepEqual;
+    // load default formulas and actions
+    Object.entries(libFormulas).forEach(([name, module]) => toddle.registerFormula('@toddle/' + name, module.default, 'getArgumentInputData' in module
+        ? module.getArgumentInputData
+        : undefined));
+    Object.entries(libActions).forEach(([name, module]) => toddle.registerAction('@toddle/' + name, module.default));
+};
+export { defineComponents, loadCorePlugins };
+//# sourceMappingURL=custom-element.main.js.map

package/dist/custom-element.main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-element.main.js","sourceRoot":"","sources":["../src/custom-element.main.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,iCAAiC,CAAA;AAC7D,OAAO,KAAK,WAAW,MAAM,kCAAkC,CAAA;AAC/D,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAA;AAEpE,MAAM,eAAe,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE;IACjD,MAAM,CAAC,OAAO,GAAG,aAAa,CAAA;IAE9B,oCAAoC;IACpC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE,CACrD,MAAM,CAAC,eAAe,CACpB,UAAU,GAAG,IAAI,EACjB,MAAM,CAAC,OAAc,EACrB,sBAAsB,IAAI,MAAM;QAC9B,CAAC,CAAC,MAAM,CAAC,oBAAoB;QAC7B,CAAC,CAAC,SAAS,CACd,CACF,CAAA;IACD,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE,CACpD,MAAM,CAAC,cAAc,CAAC,UAAU,GAAG,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,CACzD,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAA"}

package/dist/debug/logState.d.ts

@@ -0,0 +1,4 @@
+import type { Component, ComponentData } from '@nordcraft/core/dist/component/component.types';
+import type { Signal } from '../signal/signal';
+export declare function initLogState(): void;
+export declare function registerComponentToLogState(component: Component, dataSignal: Signal<ComponentData>): void;

package/dist/debug/logState.js

@@ -0,0 +1,19 @@
+export function initLogState() {
+    ;
+    window.logState = () => {
+        // eslint-disable-next-line no-console
+        console.table(Object.entries(window.__components ?? {}).map(([name, sig]) => {
+            return {
+                name,
+                ...sig.get(),
+            };
+        }));
+    };
+}
+export function registerComponentToLogState(component, dataSignal) {
+    if (!window.__components) {
+        window.__components = {};
+    }
+    window.__components[component.name] = dataSignal;
+}
+//# sourceMappingURL=logState.js.map

package/dist/debug/logState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logState.js","sourceRoot":"","sources":["../../src/debug/logState.ts"],"names":[],"mappings":"AAMA,MAAM,UAAU,YAAY;IAC1B,CAAC;IAAC,MAAc,CAAC,QAAQ,GAAG,GAAG,EAAE;QAC/B,sCAAsC;QACtC,OAAO,CAAC,KAAK,CACX,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE;YAC5D,OAAO;gBACL,IAAI;gBACJ,GAAI,GAAW,CAAC,GAAG,EAAE;aACtB,CAAA;QACH,CAAC,CAAC,CACH,CAAA;IACH,CAAC,CAAA;AACH,CAAC;AAED,MAAM,UAAU,2BAA2B,CACzC,SAAoB,EACpB,UAAiC;IAEjC,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;QACzB,MAAM,CAAC,YAAY,GAAG,EAAE,CAAA;IAC1B,CAAC;IAED,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,UAAU,CAAA;AAClD,CAAC"}

package/dist/editor/drag-drop/dragEnded.d.ts

@@ -0,0 +1,2 @@
+import type { DragState } from '../types';
+export declare function dragEnded(dragState: DragState, canceled: boolean): Promise<void>;

package/dist/editor/drag-drop/dragEnded.js

@@ -0,0 +1,56 @@
+import { getRectData } from '../../editor-preview.main';
+import { tryStartViewTransition } from '../../utils/tryStartViewTransition';
+import { DRAG_MOVE_CLASSNAME } from './dragMove';
+import { DRAG_REORDER_CLASSNAME } from './dragReorder';
+import { removeDropHighlight } from './dropHighlight';
+export async function dragEnded(dragState, canceled) {
+    dragState.destroying = true;
+    const selectedInsertArea = dragState.insertAreas?.[dragState.selectedInsertAreaIndex ?? -1];
+    const siblings = (dragState.mode === 'insert' && !canceled
+        ? selectedInsertArea?.parent
+        : dragState.initialContainer)?.querySelectorAll('[data-id]') ?? [];
+    dragState.element.style.setProperty('view-transition-name', 'dropped-item-self');
+    siblings.forEach((node, i) => {
+        if (node instanceof HTMLElement) {
+            node.style.setProperty('view-transition-name', 'dropped-item-sibling-' + i);
+        }
+    });
+    dragState.repeatedNodes.forEach((node, i) => {
+        node.style.setProperty('view-transition-name', 'dropped-item-repeated-' + i);
+    });
+    await tryStartViewTransition(() => {
+        if (canceled) {
+            dragState.copy?.remove();
+            dragState.initialContainer.insertBefore(dragState.element, dragState.initialNextSibling);
+        }
+        else if (dragState.mode === 'insert') {
+            selectedInsertArea?.parent.insertBefore(dragState.element, selectedInsertArea.parent.childNodes[selectedInsertArea.index]);
+        }
+        dragState.element.classList.remove(DRAG_REORDER_CLASSNAME);
+        dragState.element.classList.remove(DRAG_MOVE_CLASSNAME);
+        dragState.element.style.removeProperty('translate');
+        dragState.repeatedNodes.toReversed().forEach((node) => {
+            dragState.element.insertAdjacentElement('afterend', node);
+            node.classList.remove('drag-repeat-node');
+            node.style.removeProperty('rotate');
+            node.style.removeProperty('--drag-repeat-node-width');
+            node.style.removeProperty('--drag-repeat-node-height');
+            node.style.removeProperty('--drag-repeat-node-translate');
+            node.style.removeProperty('--drag-repeat-node-rotate');
+            node.style.removeProperty('--drag-repeat-node-opacity');
+        });
+        removeDropHighlight();
+        window.parent.postMessage({
+            type: 'selectionRect',
+            rect: getRectData(dragState.element),
+        }, '*');
+    }).finished.then(() => {
+        dragState.element.style.removeProperty('view-transition-name');
+        siblings.forEach((node) => {
+            if (node instanceof HTMLElement) {
+                node.style.removeProperty('view-transition-name');
+            }
+        });
+    });
+}
+//# sourceMappingURL=dragEnded.js.map

package/dist/editor/drag-drop/dragEnded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragEnded.js","sourceRoot":"","sources":["../../../src/editor/drag-drop/dragEnded.ts"],"names":[],"mappings":"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"}

package/dist/editor/drag-drop/dragMove.d.ts

@@ -0,0 +1,3 @@
+import type { DragState } from '../types';
+export declare const DRAG_MOVE_CLASSNAME = "__drag-mode--move";
+export declare function dragMove(dragState: DragState | null, exclude: HTMLElement[]): void;

package/dist/editor/drag-drop/dragMove.js

@@ -0,0 +1,74 @@
+import { findNearestLine } from '../../utils/findNearestLine';
+import { DRAG_REORDER_CLASSNAME } from './dragReorder';
+import { removeDropHighlight, setExternalDropHighlight } from './dropHighlight';
+import { getInsertAreas } from './getInsertAreas';
+export const DRAG_MOVE_CLASSNAME = '__drag-mode--move';
+export function dragMove(dragState, exclude) {
+    if (!dragState) {
+        return;
+    }
+    // If the drag operation was a reorder operation, we need to switch to insert mode and perform some one-time preparation
+    if (dragState.mode === 'reorder') {
+        dragState.mode = 'insert';
+        dragState.element.style.setProperty('display', 'none');
+        // We only calculate insert locations when dragging outside the container to avoid unnecessary calculations
+        dragState.insertAreas ??= getInsertAreas().filter((x) => exclude.every((e) => !e?.contains(x.parent) && e !== x.parent) &&
+            x.parent !== document.body);
+        dragState.element.style.removeProperty('display');
+        const translate = dragState.element.style.getPropertyValue('translate');
+        dragState.element.style.setProperty('translate', '0');
+        const rect = dragState.element.getBoundingClientRect();
+        document.body.appendChild(dragState.element);
+        dragState.element.classList.add(DRAG_MOVE_CLASSNAME);
+        dragState.element.classList.remove(DRAG_REORDER_CLASSNAME);
+        dragState.element.style.setProperty('--drag-mode--move-left', `${rect.left}px`);
+        dragState.element.style.setProperty('--drag-mode--move-top', `${rect.top}px`);
+        dragState.element.style.setProperty('--drag-mode--move-width', `${dragState.initialRect.width}px`);
+        dragState.element.style.setProperty('translate', translate);
+    }
+    dragState.repeatedNodes.forEach((node, i) => {
+        node.style.setProperty('--drag-repeat-node-opacity', i < 3 ? '0.2' : '0');
+    });
+    const lines = dragState.insertAreas?.map((line) => {
+        if (line.layout === 'block') {
+            return {
+                x1: line.center.x - line.size / 2,
+                y1: line.center.y,
+                x2: line.center.x + line.size / 2,
+                y2: line.center.y,
+            };
+        }
+        else {
+            return {
+                x1: line.center.x,
+                y1: line.center.y - line.size / 2,
+                x2: line.center.x,
+                y2: line.center.y + line.size / 2,
+            };
+        }
+    });
+    const { nearestLine, projectionPoint } = findNearestLine(lines ?? [], dragState.lastCursorPosition);
+    if (!nearestLine || !dragState.insertAreas || !lines) {
+        return;
+    }
+    const insertArea = dragState.insertAreas.at(lines.indexOf(nearestLine));
+    if (insertArea) {
+        dragState.selectedInsertAreaIndex =
+            dragState.insertAreas?.indexOf(insertArea);
+        window.parent?.postMessage({
+            type: 'highlight',
+            highlightedNodeId: insertArea.parent.getAttribute('data-id'),
+        }, '*');
+        setExternalDropHighlight({
+            layout: insertArea.layout,
+            center: insertArea.center,
+            length: insertArea.size,
+            color: dragState.elementType === 'component' ? 'D946EF' : '2563EB',
+            projectionPoint,
+        });
+    }
+    else {
+        removeDropHighlight();
+    }
+}
+//# sourceMappingURL=dragMove.js.map

package/dist/editor/drag-drop/dragMove.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragMove.js","sourceRoot":"","sources":["../../../src/editor/drag-drop/dragMove.ts"],"names":[],"mappings":"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"}

package/dist/editor/drag-drop/dragReorder.d.ts

@@ -0,0 +1,3 @@
+import type { DragState } from '../types';
+export declare const DRAG_REORDER_CLASSNAME = "__drag-mode--reorder";
+export declare function dragReorder(dragState: DragState | null): void;

package/dist/editor/drag-drop/dragReorder.js

@@ -0,0 +1,92 @@
+import { tryStartViewTransition } from '../../utils/tryStartViewTransition';
+import { DRAG_MOVE_CLASSNAME } from './dragMove';
+import { setDropHighlight } from './dropHighlight';
+export const DRAG_REORDER_CLASSNAME = '__drag-mode--reorder';
+const OVERLAP_OFFSET_PX = 100;
+export function dragReorder(dragState) {
+    if (!dragState || dragState.isTransitioning) {
+        return;
+    }
+    // If the drag operation was an insert operation, we need to switch to reorder mode and perform some one-time preparation
+    if (dragState.mode === 'insert') {
+        dragState.mode = 'reorder';
+        // Move back to the original container
+        const prevRect = dragState.element.getBoundingClientRect();
+        dragState.element.classList.add(DRAG_REORDER_CLASSNAME);
+        dragState.element.classList.remove(DRAG_MOVE_CLASSNAME);
+        dragState.initialContainer.insertBefore(dragState.element, dragState.initialNextSibling);
+        dragState.repeatedNodes.forEach((node, i) => {
+            node.style.setProperty('--drag-repeat-node-opacity', i < 3 ? '1' : '0');
+        });
+        const nextRect = dragState.element.getBoundingClientRect();
+        dragState.offset.x += nextRect.left - prevRect.left;
+        dragState.offset.y += nextRect.top - prevRect.top;
+        window.parent?.postMessage({
+            type: 'highlight',
+            highlightedNodeId: dragState.initialContainer.getAttribute('data-id'),
+        }, '*');
+        setDropHighlight(dragState.element, dragState.initialContainer, dragState.elementType === 'component' ? 'D946EF' : '2563EB');
+    }
+    const bestPermutation = getBestPermutation(dragState);
+    if (bestPermutation &&
+        dragState.element.nextElementSibling !== bestPermutation.nextSibling) {
+        dragState.isTransitioning = true;
+        const siblings = Array.from(dragState.initialContainer.childNodes);
+        siblings.forEach((sibling, i) => {
+            if (sibling instanceof HTMLElement) {
+                sibling.style.setProperty('view-transition-name', 'item-' + i);
+            }
+        });
+        dragState.element.style.setProperty('view-transition-name', '__drag-item');
+        const prevLeft = dragState.element.offsetLeft;
+        const prevTop = dragState.element.offsetTop;
+        const transition = tryStartViewTransition(() => {
+            if (!dragState) {
+                return;
+            }
+            dragState.initialContainer.insertBefore(dragState.element, bestPermutation.nextSibling);
+            dragState.offset.x += dragState.element.offsetLeft - prevLeft;
+            dragState.offset.y += dragState.element.offsetTop - prevTop;
+            dragState?.element.style.setProperty('translate', `${dragState.lastCursorPosition.x - dragState.offset.x}px ${dragState.lastCursorPosition.y - dragState.offset.y}px`);
+            setDropHighlight(dragState.element, dragState.initialContainer, dragState.elementType === 'component' ? 'D946EF' : '2563EB');
+        });
+        transition.finished
+            .then(() => {
+            siblings.forEach((sibling) => {
+                if (sibling instanceof HTMLElement) {
+                    sibling.style.removeProperty('view-transition-name');
+                }
+            });
+            if (dragState) {
+                dragState.isTransitioning = false;
+            }
+        })
+            .catch(() => { });
+    }
+}
+/**
+ * Return the most likely permutation to move the dragged element to based on the current drag position.
+ * The calculation is based on distance from the center of the dragged element to the center of the potential target element,
+ * but only if the dragged element is overlapping with the target element.
+ */
+function getBestPermutation(dragState) {
+    const { left, top, width, height } = dragState.element.getBoundingClientRect();
+    const dragElementCenterX = left + width / 2;
+    const dragElementCenterY = top + height / 2;
+    return dragState.reorderPermutations.reduce((prev, curr) => {
+        const isOverlapping = Math.abs(curr.rect.left + curr.rect.width / 2 - dragElementCenterX) <
+            curr.rect.width / 2 + OVERLAP_OFFSET_PX &&
+            Math.abs(curr.rect.top + curr.rect.height / 2 - dragElementCenterY) <
+                curr.rect.height / 2 + OVERLAP_OFFSET_PX;
+        if (isOverlapping) {
+            if (!prev) {
+                return curr;
+            }
+            const prevDist = Math.hypot(prev.rect.left + prev.rect.width / 2 - dragElementCenterX, prev.rect.top + prev.rect.height / 2 - dragElementCenterY);
+            const nextDist = Math.hypot(curr.rect.left + curr.rect.width / 2 - dragElementCenterX, curr.rect.top + curr.rect.height / 2 - dragElementCenterY);
+            return prevDist < nextDist ? prev : curr;
+        }
+        return prev;
+    }, null);
+}
+//# sourceMappingURL=dragReorder.js.map

package/dist/editor/drag-drop/dragReorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragReorder.js","sourceRoot":"","sources":["../../../src/editor/drag-drop/dragReorder.ts"],"names":[],"mappings":"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"}

package/dist/editor/drag-drop/dragStarted.d.ts

@@ -0,0 +1,9 @@
+import type { DragState, Point } from '../types';
+export declare function dragStarted({ element, lastCursorPosition, repeatedNodes, asCopy, initialContainer, initialNextSibling, }: {
+    element: HTMLElement;
+    lastCursorPosition: Point;
+    repeatedNodes: HTMLElement[];
+    asCopy: boolean;
+    initialContainer?: HTMLElement;
+    initialNextSibling?: Element | null;
+}): DragState;

package/dist/editor/drag-drop/dragStarted.js

@@ -0,0 +1,100 @@
+import { DRAG_MOVE_CLASSNAME } from './dragMove';
+import { DRAG_REORDER_CLASSNAME } from './dragReorder';
+import { setDropHighlight } from './dropHighlight';
+export function dragStarted({ element, lastCursorPosition, repeatedNodes, asCopy, initialContainer = element.parentElement, initialNextSibling, }) {
+    // Move repeat nodes as a stack below the dragged element
+    repeatedNodes
+        .map((node) => [node, node.getBoundingClientRect()])
+        .forEach(([node, rect], i) => {
+        node.classList.add('drag-repeat-node');
+        node.style.setProperty('--drag-repeat-node-width', `${rect.width}px`);
+        node.style.setProperty('--drag-repeat-node-height', `${rect.height}px`);
+        node.style.setProperty('--drag-repeat-node-translate', `${rect.left}px ${rect.top}px`);
+        node.style.setProperty('--drag-repeat-node-rotate', `${Math.random() * 9 - 4.5}deg`);
+        node.style.setProperty('--drag-repeat-node-opacity', i < 3 ? '1' : '0');
+    });
+    initialNextSibling ??= element.nextElementSibling;
+    const dragState = {
+        destroying: false,
+        elementType: elementIsComponent(element) ? 'component' : 'element',
+        element,
+        offset: lastCursorPosition,
+        lastCursorPosition,
+        initialContainer,
+        initialNextSibling,
+        initialRect: element.getBoundingClientRect(),
+        reorderPermutations: [],
+        isTransitioning: false,
+        repeatedNodes,
+        mode: 'reorder',
+    };
+    if (asCopy) {
+        dragState.copy = element.cloneNode(true);
+        dragState.copy.style.setProperty('opacity', '0.5');
+        dragState.copy.classList.remove(DRAG_REORDER_CLASSNAME);
+        dragState.copy.classList.remove(DRAG_MOVE_CLASSNAME);
+        dragState.initialContainer.insertBefore(dragState.copy, dragState.initialNextSibling);
+    }
+    // Calculate all possible permutations, by iterating over all siblings of the targetContainer
+    // and moving the draggedElement to before each sibling to calculate the rect and then
+    // store it in the dragState.permutations array
+    dragState.initialContainer.childNodes.forEach((sibling) => {
+        if (sibling instanceof Element &&
+            sibling.getAttribute('data-id') &&
+            // Only first item of repeated nodes should be considered
+            !sibling.getAttribute('data-id')?.endsWith(')') &&
+            !sibling.hasAttribute('data-component') &&
+            repeatedNodes.every((node) => node !== sibling)) {
+            dragState?.initialContainer.insertBefore(element, sibling);
+            dragState?.reorderPermutations.push({
+                nextSibling: sibling,
+                rect: element.getBoundingClientRect(),
+            });
+        }
+    });
+    // Test the last position
+    if (!dragState.initialContainer.hasAttribute('data-component')) {
+        dragState.initialContainer.appendChild(element);
+        dragState?.reorderPermutations.push({
+            nextSibling: null,
+            rect: element.getBoundingClientRect(),
+        });
+    }
+    // Restore the initial position of the draggedElement
+    dragState.initialContainer.insertBefore(element, dragState.initialNextSibling);
+    (function followRepeatedNodes() {
+        if (dragState.destroying || !dragState.element.isConnected) {
+            return;
+        }
+        const followRect = dragState.element.getBoundingClientRect();
+        dragState.repeatedNodes.forEach((node, i) => {
+            // Calculate rect without rotation as it expands the rect and makes it difficult to calculate the correct position
+            node.style.setProperty('rotate', '0deg');
+            const fromRect = node.getBoundingClientRect();
+            node.style.removeProperty('rotate');
+            const toX = followRect.left + followRect.width / 2 - fromRect.width / 2;
+            const toY = followRect.top + followRect.height / 2 - fromRect.height / 2;
+            const interpolation = 0.4 / (i + 1);
+            const x = fromRect.left + (toX - fromRect.left) * interpolation;
+            const y = fromRect.top + (toY - fromRect.top) * interpolation;
+            node.style.setProperty('--drag-repeat-node-translate', `${x}px ${y}px`);
+        });
+        requestAnimationFrame(followRepeatedNodes);
+    })();
+    // Highlight container
+    element.classList.add(DRAG_REORDER_CLASSNAME);
+    window.parent?.postMessage({
+        type: 'highlight',
+        highlightedNodeId: dragState.initialContainer.getAttribute('data-id'),
+    }, '*');
+    setDropHighlight(dragState.element, dragState.initialContainer, dragState.elementType === 'component' ? 'D946EF' : '2563EB');
+    return dragState;
+}
+/**
+ * Semi-hacky way to determine if an element is a Toddle component by checking if it is a root node, but not the top-level root node (page).
+ */
+function elementIsComponent(element) {
+    return (element.getAttribute('data-node-id') === 'root' &&
+        element.getAttribute('data-id') !== '0');
+}
+//# sourceMappingURL=dragStarted.js.map

package/dist/editor/drag-drop/dragStarted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragStarted.js","sourceRoot":"","sources":["../../../src/editor/drag-drop/dragStarted.ts"],"names":[],"mappings":"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"}

package/dist/editor/drag-drop/dropHighlight.d.ts

@@ -0,0 +1,16 @@
+import type { Point } from '../types';
+/**
+ * Visual representation of where a dragged node will be dropped.
+ */
+export declare function setDropHighlight(element: HTMLElement, targetContainer: HTMLElement, color: string): void;
+/**
+ * Visual representation of where a dragged node will be dropped outside of its own container.
+ */
+export declare function setExternalDropHighlight({ layout, center, length, color, projectionPoint, }: {
+    layout: 'block' | 'inline';
+    center: Point;
+    length: number;
+    color: string;
+    projectionPoint: number;
+}): void;
+export declare function removeDropHighlight(): void;

package/dist/editor/drag-drop/dropHighlight.js

@@ -0,0 +1,50 @@
+let highlight = null;
+/**
+ * Visual representation of where a dragged node will be dropped.
+ */
+export function setDropHighlight(element, targetContainer, color) {
+    highlight?.remove();
+    if (!element || !targetContainer) {
+        return;
+    }
+    highlight = document.createElement('div');
+    highlight.classList.add('__drop-area');
+    const { top, left } = targetContainer.getBoundingClientRect();
+    highlight.style.setProperty('position', 'fixed');
+    highlight.style.setProperty('--drop-area-left', `${element.offsetLeft + left}px`);
+    highlight.style.setProperty('--drop-area-top', `${element.offsetTop + top}px`);
+    highlight.style.setProperty('--drop-area-width', `${element.offsetWidth}px`);
+    highlight.style.setProperty('--drop-area-height', `${element.offsetHeight}px`);
+    highlight.style.setProperty('--drop-area-outline-color', `#${color}`);
+    highlight.style.setProperty('--drop-area-border-radius', window.getComputedStyle(element).borderRadius);
+    highlight.style.setProperty('--dashed-line-color', `color-mix(in srgb, #${color} 33%, transparent)`);
+    document.body.append(highlight);
+}
+/**
+ * Visual representation of where a dragged node will be dropped outside of its own container.
+ */
+export function setExternalDropHighlight({ layout, center, length, color, projectionPoint, }) {
+    highlight?.remove();
+    highlight = document.createElement('div');
+    highlight.classList.add('__drop-area-line');
+    highlight.style.setProperty('--drop-area-left', `${center.x}px`);
+    highlight.style.setProperty('--drop-area-top', `${center.y}px`);
+    if (layout === 'block') {
+        highlight.style.setProperty('--drop-area-width', `${length}px`);
+        highlight.style.setProperty('--drop-area-height', `4px`);
+        highlight.style.setProperty('--drop-area-translate', '-50% -2px');
+    }
+    else {
+        highlight.style.setProperty('--drop-area-width', `4px`);
+        highlight.style.setProperty('--drop-area-height', `${length}px`);
+        highlight.style.setProperty('--drop-area-translate', '-2px -50%');
+    }
+    const gradient = `radial-gradient(circle at ${projectionPoint * 100}% ${projectionPoint * 100}%, #${color} 0%, #${color}55 max(100%, 75px))`;
+    highlight.style.setProperty('--drop-area-background', gradient);
+    document.body.appendChild(highlight);
+}
+export function removeDropHighlight() {
+    highlight?.remove();
+    highlight = null;
+}
+//# sourceMappingURL=dropHighlight.js.map

package/dist/editor/drag-drop/dropHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropHighlight.js","sourceRoot":"","sources":["../../../src/editor/drag-drop/dropHighlight.ts"],"names":[],"mappings":"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"}

package/dist/editor/drag-drop/getInsertAreas.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Somewhat convoluted function to calculate all possible drop insertion areas, as lines between elements.
+ *
+ * Drop locations follows the following rules:
+ * - All lines for a single container are either horizontal or vertical (block or inline layout)
+ * - If the next sibling of an element follows the expected layout (not wrapped) a line is drawn between the two (taking gap/margin into consideration),
+ * - If the next sibling is wrapped, a line is drawn both after and before the next element. Both lines inserts the dragged element at the same index.
+ */
+export declare function getInsertAreas(): {
+    point: {
+        y: number;
+        x: number;
+    };
+    layout: "block" | "inline";
+    parent: Element;
+    index: number;
+    center: import("../types").Point;
+    size: number;
+    direction: 1 | -1;
+}[];