@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/dnd/draggable-droppable.js

@@ -0,0 +1,383 @@
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+import { canvas, FEATURE_FLAG, getInstanceEffectivePropText, inheritedMediaAlt, resolveInstanceLeafBinding, REUSABLE_INSTANCE_COMPONENT_ID, REUSABLE_INSTANCE_PROP_VALUES_KEY } from "@aglyn/aglyn";
+import * as Besigner from "@aglyn/besigner";
+import { mergeRefs, useId } from "@aglyn/shared-ui-jsx";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import { CSS as css } from "@dnd-kit/utilities";
+import { mergeProps } from "@react-aria/utils";
+import { observer } from "mobx-react-lite";
+import { Children, cloneElement, useContext, useEffect, useRef } from "react";
+import ComponentPromotionContext from "../../contexts/component-promotion-context.js";
+import { MediaPickerContext } from "../../contexts/media-picker-context.js";
+import { findMarkdownAttributeName, inlineMarkdownEdit } from "../../utils/inline-markdown-edit.store.js";
+import { inlineTextEdit, isInlineEditWithin } from "../../utils/inline-text-edit.store.js";
+import { requestCanvasContextMenu } from "../../utils/canvas-context-menu.js";
+import { findInstanceLeafAtPoint } from "../../utils/instance-leaf-hit.js";
+import { findLeafTextElement } from "../../utils/in-place-edit-surface.js";
+export const DraggableDroppable = observer((props)=>{
+    const { node, type, disableDragging, disableDropping, accept, children, idSuffix } = props;
+    const id = useId(node == null ? void 0 : node.$id);
+    const draggable = useDraggable({
+        id: `${id}:${type}${idSuffix || ''}`,
+        data: {
+            type,
+            node
+        },
+        disabled: disableDragging
+    });
+    const droppable = useDroppable({
+        id: `${id}:${type}${idSuffix || ''}`,
+        data: {
+            type,
+            node,
+            accept
+        },
+        disabled: disableDropping
+    });
+    const transform = draggable.transform;
+    const isTransforming = Boolean(draggable.transform);
+    const child = Children.only(children);
+    const style = _extends({}, child.props.style, {
+        // cursor: 'move',
+        outlineWidth: 2,
+        outlineOffset: -1,
+        outlineColor: 'grey',
+        outlineStyle: 'dotted',
+        // transform: css.Transform.toString(transform),
+        // scale: css.Scale.toString(transform),
+        translate: css.Translate.toString(transform)
+    }, isTransforming ? {
+    } : {}, droppable.isOver ? {
+        outlineColor: 'lime',
+        outlineStyle: 'solid',
+        outlineOffset: '3'
+    } : {}, draggable.isDragging ? {
+        outlineColor: 'grey',
+        outlineStyle: 'double',
+        outlineOffset: -1,
+        opacity: 0.5,
+        cursor: 'move'
+    } : {}, Besigner.pick.isPicking() ? {
+        cursor: 'crosshair'
+    } : {}, Besigner.pick.isPicking() && Besigner.focus.isNodeHovered(node) ? {
+        outlineColor: '#7c4dff',
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineOffset: 2
+    } : {});
+    const ref = useRef(null);
+    // Instance-internals double-click (AGL-1304) needs the component
+    // definitions (hit-test) and the host's media picker (image props).
+    // Read through a ref so the listener effect below keeps its `[node]`
+    // dependency — context updates must not re-register DOM listeners.
+    const { definitions } = useContext(ComponentPromotionContext);
+    const { onPickMedia } = useContext(MediaPickerContext);
+    const instanceEditRef = useRef({
+        definitions,
+        onPickMedia
+    });
+    instanceEditRef.current = {
+        definitions,
+        onPickMedia
+    };
+    useEffect(()=>{
+        Besigner.refs.set(node.$id, ref);
+        return ()=>{
+            Besigner.refs.delete(node.$id);
+        };
+    }, [
+        node == null ? void 0 : node.$id
+    ]);
+    useEffect(()=>{
+        Besigner.handles.set(node.$id, _extends({}, draggable.listeners, {
+            style: isTransforming ? {
+                cursor: 'grab'
+            } : {
+                cursor: 'move'
+            }
+        }));
+        return ()=>{
+            Besigner.handles.delete(node.$id);
+        };
+    }, [
+        node.$id,
+        draggable.listeners,
+        isTransforming
+    ]);
+    useEffect(()=>{
+        const el = ref.current;
+        if (el) {
+            el.addEventListener('mouseover', handleMouseOver);
+            el.addEventListener('pointerover', handleMouseOver);
+            el.addEventListener('mousedown', handleMouseDown);
+            el.addEventListener('pointerdown', handleMouseDown);
+            el.addEventListener('dblclick', handleDoubleClick);
+            el.addEventListener('contextmenu', handleContextMenu);
+            return ()=>{
+                el.removeEventListener('mouseover', handleMouseOver);
+                el.removeEventListener('pointerover', handleMouseOver);
+                el.removeEventListener('mousedown', handleMouseDown);
+                el.removeEventListener('pointerdown', handleMouseDown);
+                el.removeEventListener('dblclick', handleDoubleClick);
+                el.removeEventListener('contextmenu', handleContextMenu);
+            };
+        }
+        /**
+       * Right-click opens this element's ⋮ menu (AGL-1405).
+       *
+       * A native listener like its neighbours, not an `onContextMenu` prop:
+       * React delegates at the root container and the canvas is a closed
+       * shadow root, so a delegated handler never sees the event.
+       *
+       * Selects first. The menu is rendered by the overlay, which only mounts
+       * for a selected or hovered node — and right-clicking an element is a
+       * statement about THAT element, so leaving the previous selection in
+       * place would open the wrong menu.
+       */ function handleContextMenu(e) {
+            if (isInlineEditWithin(el)) {
+                // An open text editor keeps the browser's own menu: cut, paste and
+                // spellcheck are the whole point of a right-click there.
+                e.stopPropagation();
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            Besigner.focus.setSelectedNode(node);
+            requestCanvasContextMenu(node == null ? void 0 : node.$id);
+        }
+        function handleMouseOver(e) {
+            // Same stand-down, same reason to consume it: a hover repaint while
+            // the author is typing is a re-render of the subtree they are
+            // editing, and an ancestor leaf would repaint for them instead.
+            if (isInlineEditWithin(el)) {
+                e.stopPropagation();
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            Besigner.focus.setHoveredNode(node);
+        }
+        function handleMouseDown(e) {
+            // Stand down while an edit is open in this leaf OR ANY LEAF INSIDE
+            // IT (AGL-2486) — but CONSUME the event rather than ignoring it.
+            //
+            // Two different mistakes produced the same symptom, an editor that
+            // was open, styled and completely uninteractive. First, asking only
+            // "is this leaf the node being edited?": a nested run — a Span
+            // typography inside a Typography — silenced its OWN leaf, the event
+            // bubbled to the ancestor leaf, and the ancestor called the
+            // `preventDefault` that suppresses caret placement. Second, standing
+            // down by simply returning: that also skipped `stopPropagation`, so
+            // the gesture carried on up to the viewport, which treats a
+            // mousedown on empty canvas as a deselect — and moving the selection
+            // off the node closes the editor. A drag meant to select three words
+            // tore the editor down instead.
+            //
+            // So: no `preventDefault`, because that is the caret; but still
+            // `stopPropagation`, because nothing else on this canvas should see
+            // a gesture aimed at text being edited. `stopPropagation` does not
+            // suppress a default action, only delivery.
+            if (isInlineEditWithin(el)) {
+                e.stopPropagation();
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            // Element-picker capture (AGL-574): while the interaction builder is
+            // picking, this click resolves the target and exits pick mode —
+            // never the normal select/navigate, so the designer's selection and
+            // the open interaction stay put.
+            if (Besigner.pick.isPicking()) {
+                Besigner.pick.handlePickClick(node.$id);
+                return;
+            }
+            // Canvas multi-selection modifiers (AGL-12), mirroring the
+            // hierarchy panel: Shift ranges, Cmd/Ctrl toggles.
+            const pointer = e;
+            if (pointer.shiftKey) {
+                Besigner.focus.rangeSelectNode(node);
+            } else {
+                Besigner.focus.handleNodeSelection(node, pointer.metaKey || pointer.ctrlKey);
+            }
+        }
+        function handleDoubleClick(e) {
+            var _node_componentSchema_flags, _node_componentSchema, _node_props;
+            // Prop-fed instance internals (AGL-1304): the rendered preview sits
+            // under `pointer-events: none`, so the double-click lands HERE, on
+            // the instance — hit-test the preview geometrically, map the grafted
+            // leaf back to the definition, and if a declared prop feeds it, edit
+            // that prop inline. Leaves the component owns stay locked (the
+            // selection this dblclick's mousedowns already made puts AGL-1303's
+            // "Edit component" in the panel — nothing extra to build).
+            if ((node == null ? void 0 : node.componentId) === REUSABLE_INSTANCE_COMPONENT_ID && Besigner.dnd.canDragNode(node)) {
+                if (handleInstanceDoubleClick(e)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                return;
+            }
+            // Locked nodes (layout chrome in the screen besigner) stay read-only —
+            // same gate the drag system uses — and while the interaction builder
+            // is picking a target, a double-click is two picks, never an edit.
+            if (!Besigner.dnd.canDragNode(node) || Besigner.pick.isPicking()) return;
+            // Inline text editing for components that declare textEditable.
+            const flag = node == null ? void 0 : (_node_componentSchema = node.componentSchema) == null ? void 0 : (_node_componentSchema_flags = _node_componentSchema.flags) == null ? void 0 : _node_componentSchema_flags.textEditable;
+            const editable = typeof flag === 'number' && (flag & FEATURE_FLAG.ENABLED) !== 0;
+            if (editable) {
+                var _findLeafTextElement;
+                e.preventDefault();
+                e.stopPropagation();
+                const root = e.currentTarget;
+                // The node's own `<aglyn-text>` whenever it renders one, and the
+                // root only as a fallback (AGL-2556). In-place editing EMPTIES
+                // whatever it is given, so handing it a composite's root deletes
+                // the chrome that composite built — for Accordion Summary that is
+                // the content div carrying MUI's `textAlign: 'start'`, without
+                // which the UA stylesheet centres the label inside the `<button>`
+                // for as long as the edit is open.
+                const element = (_findLeafTextElement = findLeafTextElement(root)) != null ? _findLeafTextElement : root;
+                const rect = element.getBoundingClientRect();
+                inlineTextEdit.open(node, {
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width,
+                    height: rect.height
+                }, undefined, // The measured element travels with the rect so the overlay can
+                // re-measure on scroll instead of drifting (AGL-1644).
+                element);
+                return;
+            }
+            // In-place markdown editing (AGL-1624): a component whose schema
+            // declares a MARKDOWN attribute — the Markdown element's `content` is
+            // the one that exists — opens the WYSIWYG over the element, editing
+            // the whole document without a trip to the attributes panel.
+            //
+            // `stopPropagation` on the NATIVE event is what keeps the canvas still:
+            // React delegates `onDoubleClick` at the root container, so an event
+            // consumed here never reaches `ZoomablePanningComponent`'s
+            // double-click-to-zoom. That is the same guarantee the textEditable
+            // branch above has always relied on, not a new mechanism.
+            const markdownAttribute = findMarkdownAttributeName(node);
+            if (!markdownAttribute) return;
+            e.preventDefault();
+            e.stopPropagation();
+            const markdownElement = e.currentTarget;
+            const markdownRect = markdownElement.getBoundingClientRect();
+            const stored = (_node_props = node.props) == null ? void 0 : _node_props[markdownAttribute];
+            // The two mousedowns of a double-click TOGGLE selection, so by the time
+            // this fires the node has been selected and then deselected again.
+            // Editing an element is selecting it — the attributes panel should be
+            // showing it — and the editor closes when the selection moves off the
+            // node, so it has to be put back before the editor opens.
+            Besigner.focus.setSelectedNode(node);
+            inlineMarkdownEdit.open(node, {
+                left: markdownRect.left,
+                top: markdownRect.top,
+                width: markdownRect.width,
+                height: markdownRect.height
+            }, markdownAttribute, typeof stored === 'string' ? stored : '', markdownElement);
+        }
+        /** True when the double-click resolved to a prop edit it opened. */ function handleInstanceDoubleClick(pointer) {
+            var _node_props;
+            const { definitions, onPickMedia } = instanceEditRef.current;
+            const refId = node == null ? void 0 : (_node_props = node.props) == null ? void 0 : _node_props.refId;
+            const definition = refId ? definitions == null ? void 0 : definitions[refId] : undefined;
+            const container = ref.current;
+            if (!definition || !container) return false;
+            const hit = findInstanceLeafAtPoint(container, pointer.clientX, pointer.clientY);
+            if (!hit) return false;
+            // Text first: a leaf whose `children` a declared prop feeds opens
+            // the EXISTING inline editor, anchored on the clicked leaf, and the
+            // commit writes propValues[prop] on the instance (one undo entry,
+            // mirrored to peers like any node edit).
+            const text = resolveInstanceLeafBinding(hit.graftedId, node.$id, definition);
+            if (text == null ? void 0 : text.boundProp) {
+                const rect = hit.element.getBoundingClientRect();
+                inlineTextEdit.open(node, {
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width,
+                    height: rect.height
+                }, {
+                    propName: text.boundProp,
+                    initialText: getInstanceEffectivePropText(node.props, definition.props, text.boundProp)
+                }, // The GRAFTED leaf, not the instance node: it is what was measured,
+                // and it is the one anchor `Besigner.refs` could never supply
+                // because it is not a canvas node (AGL-1644).
+                hit.element);
+                return true;
+            }
+            // Image half: `src` fed by a declared prop opens the host's media
+            // picker, committing the picked value to the same propValues slot —
+            // the exact pipeline the Attributes panel's Browse button uses.
+            const src = resolveInstanceLeafBinding(hit.graftedId, node.$id, definition, 'src');
+            if ((src == null ? void 0 : src.boundProp) && onPickMedia) {
+                const propName = src.boundProp;
+                // The SAME leaf's `alt`, if the component author bound one to a
+                // declared prop too (AGL-1896). Resolvable here and nowhere else
+                // in the instance pipeline: this path starts from a concrete leaf
+                // in the definition tree, so "which declared prop feeds this
+                // image's alt" is a lookup rather than a guess. The attributes
+                // panel only ever sees a declared prop's NAME, and no convention
+                // says which other prop is its alt — so it does not try.
+                const altBinding = resolveInstanceLeafBinding(hit.graftedId, node.$id, definition, 'alt');
+                onPickMedia((value, asset)=>{
+                    var _current_props;
+                    // Written through verbatim (media reference or raw URL — the
+                    // host app decides; AGL-1215). Snapshot via toJSON like the
+                    // panel: updateNodeProps REPLACES the props object.
+                    const current = canvas.toJSON().nodes[node.$id];
+                    // What the instance renders for the alt prop TODAY — its own
+                    // override, else the component's default. Not the raw override:
+                    // a component whose default alt is already a real sentence must
+                    // not have it replaced just because this instance never set one.
+                    const altPropName = altBinding == null ? void 0 : altBinding.boundProp;
+                    const effectiveAlt = altPropName ? getInstanceEffectivePropText(current == null ? void 0 : current.props, definition.props, altPropName) : undefined;
+                    const inheritedAlt = altPropName ? inheritedMediaAlt({
+                        placementAlt: effectiveAlt,
+                        assetAlt: asset == null ? void 0 : asset.alt
+                    }) : undefined;
+                    canvas.updateNodeProps(node, _extends({}, current == null ? void 0 : current.props, {
+                        [REUSABLE_INSTANCE_PROP_VALUES_KEY]: _extends({}, current == null ? void 0 : (_current_props = current.props) == null ? void 0 : _current_props[REUSABLE_INSTANCE_PROP_VALUES_KEY], {
+                            [propName]: value
+                        }, inheritedAlt && altPropName ? {
+                            [altPropName]: inheritedAlt
+                        } : {})
+                    }));
+                });
+                return true;
+            }
+            return false;
+        }
+    }, [
+        node
+    ]);
+    return /*#__PURE__*/ cloneElement(child, mergeProps(child.props, draggable.attributes, {
+        ref: mergeRefs(ref, child.props.ref, draggable.setNodeRef, droppable.setNodeRef),
+        style,
+        sx: {
+            '&, &:hover, &:focus': {
+                cursor: draggable.isDragging ? 'move' : 'initial'
+            }
+        }
+    }));
+});
+DraggableDroppable.displayName = 'DraggableDroppable';
+export default DraggableDroppable;
+
+//# sourceMappingURL=draggable-droppable.js.map

package/src/lib/components/dnd/draggable-droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/besigner/feature/designer/src/lib/components/dnd/draggable-droppable.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport {\n  canvas,\n  FEATURE_FLAG,\n  getInstanceEffectivePropText,\n  inheritedMediaAlt,\n  resolveInstanceLeafBinding,\n  REUSABLE_INSTANCE_COMPONENT_ID,\n  REUSABLE_INSTANCE_PROP_VALUES_KEY,\n} from '@aglyn/aglyn'\nimport * as Besigner from '@aglyn/besigner'\nimport { mergeRefs, useId } from '@aglyn/shared-ui-jsx'\nimport { useDraggable, useDroppable } from '@dnd-kit/core'\nimport { CSS as css } from '@dnd-kit/utilities'\nimport { mergeProps } from '@react-aria/utils'\nimport { observer } from 'mobx-react-lite'\nimport {\n  Children,\n  cloneElement,\n  CSSProperties,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react'\nimport ComponentPromotionContext from '../../contexts/component-promotion-context'\nimport { MediaPickerContext } from '../../contexts/media-picker-context'\nimport {\n  findMarkdownAttributeName,\n  inlineMarkdownEdit,\n} from '../../utils/inline-markdown-edit.store'\nimport {\n  inlineTextEdit,\n  isInlineEditWithin,\n} from '../../utils/inline-text-edit.store'\nimport { requestCanvasContextMenu } from '../../utils/canvas-context-menu'\nimport { findInstanceLeafAtPoint } from '../../utils/instance-leaf-hit'\nimport { findLeafTextElement } from '../../utils/in-place-edit-surface'\n\nexport interface DraggableDroppableProps<T extends Aglyn.NodeSchema<any>> {\n  children: JSX.Element\n  node: T\n  type: Besigner.DragType\n  accept: Besigner.DragType[]\n  disableDragging?: boolean\n  disableDropping?: boolean\n  idSuffix?: string\n}\n\nexport const DraggableDroppable = observer(\n  <T extends Aglyn.NodeSchema<any>>(props: DraggableDroppableProps<T>) => {\n    const {\n      node,\n      type,\n      disableDragging,\n      disableDropping,\n      accept,\n      children,\n      idSuffix,\n    } = props\n    const id = useId(node?.$id)\n\n    const draggable = useDraggable({\n      id: `${id}:${type}${idSuffix || ''}`,\n      data: { type, node },\n      disabled: disableDragging,\n    })\n\n    const droppable = useDroppable({\n      id: `${id}:${type}${idSuffix || ''}`,\n      data: { type, node, accept },\n      disabled: disableDropping,\n    })\n\n    const transform = draggable.transform\n    const isTransforming = Boolean(draggable.transform)\n    const child = Children.only(children)\n    const style: CSSProperties = {\n      ...child.props.style,\n      // cursor: 'move',\n      outlineWidth: 2,\n      outlineOffset: -1,\n      outlineColor: 'grey',\n      outlineStyle: 'dotted',\n      // transform: css.Transform.toString(transform),\n      // scale: css.Scale.toString(transform),\n      translate: css.Translate.toString(transform),\n\n      ...(isTransforming\n        ? {\n            // transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n            // cursor: 'grab',\n          }\n        : {}),\n      ...(droppable.isOver\n        ? {\n            outlineColor: 'lime',\n            outlineStyle: 'solid',\n            outlineOffset: '3',\n          }\n        : {}),\n      ...(draggable.isDragging\n        ? {\n            outlineColor: 'grey',\n            outlineStyle: 'double',\n            outlineOffset: -1 as any,\n            opacity: 0.5,\n            cursor: 'move',\n          }\n        : {}),\n      // Element-picker affordance (AGL-574): while the interaction builder\n      // is picking a target, every leaf shows the crosshair and the hovered\n      // one gets a distinct violet ring — deliberately unlike the normal\n      // selection/drop outlines so \"pick this\" reads as its own mode.\n      ...(Besigner.pick.isPicking() ? { cursor: 'crosshair' } : {}),\n      ...(Besigner.pick.isPicking() && Besigner.focus.isNodeHovered(node)\n        ? {\n            outlineColor: '#7c4dff',\n            outlineStyle: 'solid',\n            outlineWidth: 2,\n            outlineOffset: 2 as any,\n          }\n        : {}),\n    }\n\n    const ref = useRef<HTMLElement>(null)\n\n    // Instance-internals double-click (AGL-1304) needs the component\n    // definitions (hit-test) and the host's media picker (image props).\n    // Read through a ref so the listener effect below keeps its `[node]`\n    // dependency — context updates must not re-register DOM listeners.\n    const { definitions } = useContext(ComponentPromotionContext)\n    const { onPickMedia } = useContext(MediaPickerContext)\n    const instanceEditRef = useRef({ definitions, onPickMedia })\n    instanceEditRef.current = { definitions, onPickMedia }\n\n    useEffect(() => {\n      Besigner.refs.set(node.$id, ref)\n      return () => {\n        Besigner.refs.delete(node.$id)\n      }\n    }, [node?.$id])\n\n    useEffect(() => {\n      Besigner.handles.set(node.$id, {\n        ...draggable.listeners,\n        style: isTransforming ? { cursor: 'grab' } : { cursor: 'move' },\n      })\n      return () => {\n        Besigner.handles.delete(node.$id)\n      }\n    }, [node.$id, draggable.listeners, isTransforming])\n\n    useEffect(() => {\n      const el = ref.current\n      if (el) {\n        el.addEventListener('mouseover', handleMouseOver)\n        el.addEventListener('pointerover', handleMouseOver)\n        el.addEventListener('mousedown', handleMouseDown)\n        el.addEventListener('pointerdown', handleMouseDown)\n        el.addEventListener('dblclick', handleDoubleClick)\n        el.addEventListener('contextmenu', handleContextMenu)\n\n        return () => {\n          el.removeEventListener('mouseover', handleMouseOver)\n          el.removeEventListener('pointerover', handleMouseOver)\n          el.removeEventListener('mousedown', handleMouseDown)\n          el.removeEventListener('pointerdown', handleMouseDown)\n          el.removeEventListener('dblclick', handleDoubleClick)\n          el.removeEventListener('contextmenu', handleContextMenu)\n        }\n      }\n      /**\n       * Right-click opens this element's ⋮ menu (AGL-1405).\n       *\n       * A native listener like its neighbours, not an `onContextMenu` prop:\n       * React delegates at the root container and the canvas is a closed\n       * shadow root, so a delegated handler never sees the event.\n       *\n       * Selects first. The menu is rendered by the overlay, which only mounts\n       * for a selected or hovered node — and right-clicking an element is a\n       * statement about THAT element, so leaving the previous selection in\n       * place would open the wrong menu.\n       */\n      function handleContextMenu(e: Event) {\n        if (isInlineEditWithin(el)) {\n          // An open text editor keeps the browser's own menu: cut, paste and\n          // spellcheck are the whole point of a right-click there.\n          e.stopPropagation()\n          return\n        }\n        e.preventDefault()\n        e.stopPropagation()\n        Besigner.focus.setSelectedNode(node)\n        requestCanvasContextMenu(node?.$id)\n      }\n      function handleMouseOver(e: Event) {\n        // Same stand-down, same reason to consume it: a hover repaint while\n        // the author is typing is a re-render of the subtree they are\n        // editing, and an ancestor leaf would repaint for them instead.\n        if (isInlineEditWithin(el)) {\n          e.stopPropagation()\n          return\n        }\n        e.preventDefault()\n        e.stopPropagation()\n        Besigner.focus.setHoveredNode(node)\n      }\n      function handleMouseDown(e: Event) {\n        // Stand down while an edit is open in this leaf OR ANY LEAF INSIDE\n        // IT (AGL-2486) — but CONSUME the event rather than ignoring it.\n        //\n        // Two different mistakes produced the same symptom, an editor that\n        // was open, styled and completely uninteractive. First, asking only\n        // \"is this leaf the node being edited?\": a nested run — a Span\n        // typography inside a Typography — silenced its OWN leaf, the event\n        // bubbled to the ancestor leaf, and the ancestor called the\n        // `preventDefault` that suppresses caret placement. Second, standing\n        // down by simply returning: that also skipped `stopPropagation`, so\n        // the gesture carried on up to the viewport, which treats a\n        // mousedown on empty canvas as a deselect — and moving the selection\n        // off the node closes the editor. A drag meant to select three words\n        // tore the editor down instead.\n        //\n        // So: no `preventDefault`, because that is the caret; but still\n        // `stopPropagation`, because nothing else on this canvas should see\n        // a gesture aimed at text being edited. `stopPropagation` does not\n        // suppress a default action, only delivery.\n        if (isInlineEditWithin(el)) {\n          e.stopPropagation()\n          return\n        }\n        e.preventDefault()\n        e.stopPropagation()\n        // Element-picker capture (AGL-574): while the interaction builder is\n        // picking, this click resolves the target and exits pick mode —\n        // never the normal select/navigate, so the designer's selection and\n        // the open interaction stay put.\n        if (Besigner.pick.isPicking()) {\n          Besigner.pick.handlePickClick(node.$id)\n          return\n        }\n        // Canvas multi-selection modifiers (AGL-12), mirroring the\n        // hierarchy panel: Shift ranges, Cmd/Ctrl toggles.\n        const pointer = e as globalThis.MouseEvent\n        if (pointer.shiftKey) {\n          Besigner.focus.rangeSelectNode(node)\n        } else {\n          Besigner.focus.handleNodeSelection(\n            node,\n            pointer.metaKey || pointer.ctrlKey,\n          )\n        }\n      }\n      function handleDoubleClick(e: Event) {\n        // Prop-fed instance internals (AGL-1304): the rendered preview sits\n        // under `pointer-events: none`, so the double-click lands HERE, on\n        // the instance — hit-test the preview geometrically, map the grafted\n        // leaf back to the definition, and if a declared prop feeds it, edit\n        // that prop inline. Leaves the component owns stay locked (the\n        // selection this dblclick's mousedowns already made puts AGL-1303's\n        // \"Edit component\" in the panel — nothing extra to build).\n        if (\n          node?.componentId === REUSABLE_INSTANCE_COMPONENT_ID &&\n          Besigner.dnd.canDragNode(node)\n        ) {\n          if (handleInstanceDoubleClick(e as globalThis.MouseEvent)) {\n            e.preventDefault()\n            e.stopPropagation()\n          }\n          return\n        }\n        // Locked nodes (layout chrome in the screen besigner) stay read-only —\n        // same gate the drag system uses — and while the interaction builder\n        // is picking a target, a double-click is two picks, never an edit.\n        if (!Besigner.dnd.canDragNode(node) || Besigner.pick.isPicking()) return\n        // Inline text editing for components that declare textEditable.\n        const flag = node?.componentSchema?.flags?.textEditable\n        const editable =\n          typeof flag === 'number' && (flag & FEATURE_FLAG.ENABLED) !== 0\n        if (editable) {\n          e.preventDefault()\n          e.stopPropagation()\n          const root = e.currentTarget as Element\n          // The node's own `<aglyn-text>` whenever it renders one, and the\n          // root only as a fallback (AGL-2556). In-place editing EMPTIES\n          // whatever it is given, so handing it a composite's root deletes\n          // the chrome that composite built — for Accordion Summary that is\n          // the content div carrying MUI's `textAlign: 'start'`, without\n          // which the UA stylesheet centres the label inside the `<button>`\n          // for as long as the edit is open.\n          const element = findLeafTextElement(root) ?? root\n          const rect = element.getBoundingClientRect()\n          inlineTextEdit.open(\n            node,\n            {\n              left: rect.left,\n              top: rect.top,\n              width: rect.width,\n              height: rect.height,\n            },\n            undefined,\n            // The measured element travels with the rect so the overlay can\n            // re-measure on scroll instead of drifting (AGL-1644).\n            element,\n          )\n          return\n        }\n        // In-place markdown editing (AGL-1624): a component whose schema\n        // declares a MARKDOWN attribute — the Markdown element's `content` is\n        // the one that exists — opens the WYSIWYG over the element, editing\n        // the whole document without a trip to the attributes panel.\n        //\n        // `stopPropagation` on the NATIVE event is what keeps the canvas still:\n        // React delegates `onDoubleClick` at the root container, so an event\n        // consumed here never reaches `ZoomablePanningComponent`'s\n        // double-click-to-zoom. That is the same guarantee the textEditable\n        // branch above has always relied on, not a new mechanism.\n        const markdownAttribute = findMarkdownAttributeName(node)\n        if (!markdownAttribute) return\n        e.preventDefault()\n        e.stopPropagation()\n        const markdownElement = e.currentTarget as Element\n        const markdownRect = markdownElement.getBoundingClientRect()\n        const stored = (node.props as Record<string, unknown> | undefined)?.[\n          markdownAttribute\n        ]\n        // The two mousedowns of a double-click TOGGLE selection, so by the time\n        // this fires the node has been selected and then deselected again.\n        // Editing an element is selecting it — the attributes panel should be\n        // showing it — and the editor closes when the selection moves off the\n        // node, so it has to be put back before the editor opens.\n        Besigner.focus.setSelectedNode(node)\n        inlineMarkdownEdit.open(\n          node,\n          {\n            left: markdownRect.left,\n            top: markdownRect.top,\n            width: markdownRect.width,\n            height: markdownRect.height,\n          },\n          markdownAttribute,\n          typeof stored === 'string' ? stored : '',\n          markdownElement,\n        )\n      }\n      /** True when the double-click resolved to a prop edit it opened. */\n      function handleInstanceDoubleClick(pointer: globalThis.MouseEvent) {\n        const { definitions, onPickMedia } = instanceEditRef.current\n        const refId = (node?.props as { refId?: string } | undefined)?.refId\n        const definition = refId ? definitions?.[refId] : undefined\n        const container = ref.current\n        if (!definition || !container) return false\n        const hit = findInstanceLeafAtPoint(\n          container,\n          pointer.clientX,\n          pointer.clientY,\n        )\n        if (!hit) return false\n        // Text first: a leaf whose `children` a declared prop feeds opens\n        // the EXISTING inline editor, anchored on the clicked leaf, and the\n        // commit writes propValues[prop] on the instance (one undo entry,\n        // mirrored to peers like any node edit).\n        const text = resolveInstanceLeafBinding(\n          hit.graftedId,\n          node.$id,\n          definition,\n        )\n        if (text?.boundProp) {\n          const rect = hit.element.getBoundingClientRect()\n          inlineTextEdit.open(\n            node,\n            {\n              left: rect.left,\n              top: rect.top,\n              width: rect.width,\n              height: rect.height,\n            },\n            {\n              propName: text.boundProp,\n              initialText: getInstanceEffectivePropText(\n                node.props,\n                definition.props,\n                text.boundProp,\n              ),\n            },\n            // The GRAFTED leaf, not the instance node: it is what was measured,\n            // and it is the one anchor `Besigner.refs` could never supply\n            // because it is not a canvas node (AGL-1644).\n            hit.element,\n          )\n          return true\n        }\n        // Image half: `src` fed by a declared prop opens the host's media\n        // picker, committing the picked value to the same propValues slot —\n        // the exact pipeline the Attributes panel's Browse button uses.\n        const src = resolveInstanceLeafBinding(\n          hit.graftedId,\n          node.$id,\n          definition,\n          'src',\n        )\n        if (src?.boundProp && onPickMedia) {\n          const propName = src.boundProp\n          // The SAME leaf's `alt`, if the component author bound one to a\n          // declared prop too (AGL-1896). Resolvable here and nowhere else\n          // in the instance pipeline: this path starts from a concrete leaf\n          // in the definition tree, so \"which declared prop feeds this\n          // image's alt\" is a lookup rather than a guess. The attributes\n          // panel only ever sees a declared prop's NAME, and no convention\n          // says which other prop is its alt — so it does not try.\n          const altBinding = resolveInstanceLeafBinding(\n            hit.graftedId,\n            node.$id,\n            definition,\n            'alt',\n          )\n          onPickMedia((value, asset) => {\n            // Written through verbatim (media reference or raw URL — the\n            // host app decides; AGL-1215). Snapshot via toJSON like the\n            // panel: updateNodeProps REPLACES the props object.\n            const current = (canvas.toJSON().nodes as Record<string, any>)[\n              node.$id\n            ]\n            // What the instance renders for the alt prop TODAY — its own\n            // override, else the component's default. Not the raw override:\n            // a component whose default alt is already a real sentence must\n            // not have it replaced just because this instance never set one.\n            const altPropName = altBinding?.boundProp\n            const effectiveAlt = altPropName\n              ? getInstanceEffectivePropText(\n                  current?.props,\n                  definition.props,\n                  altPropName,\n                )\n              : undefined\n            const inheritedAlt = altPropName\n              ? inheritedMediaAlt({\n                  placementAlt: effectiveAlt,\n                  assetAlt: asset?.alt,\n                })\n              : undefined\n            canvas.updateNodeProps(node, {\n              ...current?.props,\n              [REUSABLE_INSTANCE_PROP_VALUES_KEY]: {\n                ...current?.props?.[REUSABLE_INSTANCE_PROP_VALUES_KEY],\n                [propName]: value,\n                ...(inheritedAlt && altPropName\n                  ? { [altPropName]: inheritedAlt }\n                  : {}),\n              },\n            })\n          })\n          return true\n        }\n        return false\n      }\n    }, [node])\n\n    return cloneElement(\n      child,\n      mergeProps(child.props, draggable.attributes, {\n        ref: mergeRefs(\n          ref,\n          child.props.ref,\n          draggable.setNodeRef,\n          droppable.setNodeRef,\n        ),\n        style,\n        sx: {\n          '&, &:hover, &:focus': {\n            cursor: draggable.isDragging ? 'move' : 'initial',\n          },\n        },\n      }),\n    )\n  },\n)\n\nDraggableDroppable.displayName = 'DraggableDroppable'\n\nexport default DraggableDroppable\n"],"names":["canvas","FEATURE_FLAG","getInstanceEffectivePropText","inheritedMediaAlt","resolveInstanceLeafBinding","REUSABLE_INSTANCE_COMPONENT_ID","REUSABLE_INSTANCE_PROP_VALUES_KEY","Besigner","mergeRefs","useId","useDraggable","useDroppable","CSS","css","mergeProps","observer","Children","cloneElement","useContext","useEffect","useRef","ComponentPromotionContext","MediaPickerContext","findMarkdownAttributeName","inlineMarkdownEdit","inlineTextEdit","isInlineEditWithin","requestCanvasContextMenu","findInstanceLeafAtPoint","findLeafTextElement","DraggableDroppable","props","node","type","disableDragging","disableDropping","accept","children","idSuffix","id","$id","draggable","data","disabled","droppable","transform","isTransforming","Boolean","child","only","style","outlineWidth","outlineOffset","outlineColor","outlineStyle","translate","Translate","toString","isOver","isDragging","opacity","cursor","pick","isPicking","focus","isNodeHovered","ref","definitions","onPickMedia","instanceEditRef","current","refs","set","delete","handles","listeners","el","addEventListener","handleMouseOver","handleMouseDown","handleDoubleClick","handleContextMenu","removeEventListener","e","stopPropagation","preventDefault","setSelectedNode","setHoveredNode","handlePickClick","pointer","shiftKey","rangeSelectNode","handleNodeSelection","metaKey","ctrlKey","componentId","dnd","canDragNode","handleInstanceDoubleClick","flag","componentSchema","flags","textEditable","editable","ENABLED","root","currentTarget","element","rect","getBoundingClientRect","open","left","top","width","height","undefined","markdownAttribute","markdownElement","markdownRect","stored","refId","definition","container","hit","clientX","clientY","text","graftedId","boundProp","propName","initialText","src","altBinding","value","asset","toJSON","nodes","altPropName","effectiveAlt","inheritedAlt","placementAlt","assetAlt","alt","updateNodeProps","attributes","setNodeRef","sx","displayName"],"mappings":"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"}

package/src/lib/components/dnd/draggable.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as Besigner from '@aglyn/besigner';
+import { useDraggable } from '@dnd-kit/core';
+import { CSSProperties, MutableRefObject } from 'react';
+export interface DraggableChildProps<T extends {
+    $id?: string;
+}> extends Omit<DraggableProps<T>, 'children'> {
+    draggable: ReturnType<typeof useDraggable>;
+    style: CSSProperties;
+    forwardRef: MutableRefObject<any>;
+}
+export type DraggableChild<T extends {
+    $id?: string;
+}> = (props: DraggableChildProps<T>) => JSX.Element;
+export interface DraggableProps<T extends {
+    $id?: string;
+}> {
+    children: JSX.Element | DraggableChild<T>;
+    node: T;
+    type: Besigner.DragType;
+    disabled?: boolean;
+    idSuffix?: string;
+}
+declare const Draggable: import("react").FunctionComponent<DraggableProps<{
+    $id?: string;
+}> & import("react").RefAttributes<unknown>>;
+export default Draggable;

package/src/lib/components/dnd/draggable.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { mergeRefs, useId } from "@aglyn/shared-ui-jsx";
+import { useDraggable } from "@dnd-kit/core";
+import { mergeProps } from "@react-aria/utils";
+import { observer } from "mobx-react-lite";
+import { Children, cloneElement, forwardRef } from "react";
+const Draggable = observer(/*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children } = props, rest = _object_without_properties_loose(props, [
+        "children"
+    ]);
+    const { node, type, disabled, idSuffix } = rest;
+    const id = useId(node == null ? void 0 : node.$id);
+    const draggable = useDraggable({
+        id: `${id}:${type}${idSuffix || ''}`,
+        data: {
+            type,
+            node
+        },
+        disabled
+    });
+    const transform = draggable.transform;
+    const style = _extends({
+        cursor: 'move'
+    }, draggable.isDragging ? {
+        outlineColor: 'grey',
+        outlineStyle: 'double',
+        outlineOffset: '-1px',
+        opacity: 0.5,
+        cursor: 'move'
+    } : {}, transform ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        cursor: 'grab'
+    } : {});
+    if (typeof children === 'function') {
+        return children(_extends({}, rest, {
+            style,
+            draggable,
+            forwardRef: ref
+        }));
+    }
+    const child = Children.only(children);
+    return /*#__PURE__*/ cloneElement(child, mergeProps(child.props, _extends({
+        ref: mergeRefs(ref, child.props.ref, draggable.setNodeRef),
+        style
+    }, draggable.listeners, draggable.attributes)));
+}));
+Draggable.displayName = 'Draggable';
+export default Draggable;
+
+//# sourceMappingURL=draggable.js.map

package/src/lib/components/dnd/draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/besigner/feature/designer/src/lib/components/dnd/draggable.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport * as Besigner from '@aglyn/besigner'\nimport { mergeRefs, useId } from '@aglyn/shared-ui-jsx'\nimport { useDraggable } from '@dnd-kit/core'\nimport { mergeProps } from '@react-aria/utils'\nimport { observer } from 'mobx-react-lite'\nimport {\n  Children,\n  cloneElement,\n  CSSProperties,\n  forwardRef,\n  MutableRefObject,\n} from 'react'\n\nexport interface DraggableChildProps<T extends { $id?: string }>\n  extends Omit<DraggableProps<T>, 'children'> {\n  draggable: ReturnType<typeof useDraggable>\n  style: CSSProperties\n  forwardRef: MutableRefObject<any>\n}\nexport type DraggableChild<T extends { $id?: string }> = (\n  props: DraggableChildProps<T>,\n) => JSX.Element\n\nexport interface DraggableProps<T extends { $id?: string }> {\n  children: JSX.Element | DraggableChild<T>\n  node: T\n  type: Besigner.DragType\n  disabled?: boolean\n  idSuffix?: string\n}\n\nconst Draggable = observer(\n  forwardRef(<T extends { $id?: string }>(props: DraggableProps<T>, ref) => {\n    const { children, ...rest } = props\n    const { node, type, disabled, idSuffix } = rest\n    const id = useId(node?.$id)\n\n    const draggable = useDraggable({\n      id: `${id}:${type}${idSuffix || ''}`,\n      data: { type, node },\n      disabled,\n    })\n\n    const transform = draggable.transform\n    const style: CSSProperties = {\n      cursor: 'move',\n      ...(draggable.isDragging\n        ? {\n            outlineColor: 'grey',\n            outlineStyle: 'double',\n            outlineOffset: '-1px',\n            opacity: 0.5,\n            cursor: 'move',\n          }\n        : {}),\n      ...(transform\n        ? {\n            transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n            cursor: 'grab',\n          }\n        : {}),\n    }\n\n    if (typeof children === 'function') {\n      return children({\n        ...rest,\n        style,\n        draggable,\n        forwardRef: ref,\n      })\n    }\n\n    const child = Children.only(children)\n    return cloneElement(\n      child,\n      mergeProps(child.props, {\n        ref: mergeRefs(ref, child.props.ref, draggable.setNodeRef),\n        style,\n        ...draggable.listeners,\n        ...draggable.attributes,\n      }),\n    )\n  }),\n)\nDraggable.displayName = 'Draggable'\n\nexport default Draggable\n"],"names":["mergeRefs","useId","useDraggable","mergeProps","observer","Children","cloneElement","forwardRef","Draggable","props","ref","children","rest","node","type","disabled","idSuffix","id","$id","draggable","data","transform","style","cursor","isDragging","outlineColor","outlineStyle","outlineOffset","opacity","x","y","child","only","setNodeRef","listeners","attributes","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC;;AAGD,SAASA,SAAS,EAAEC,KAAK,QAAQ,uBAAsB;AACvD,SAASC,YAAY,QAAQ,gBAAe;AAC5C,SAASC,UAAU,QAAQ,oBAAmB;AAC9C,SAASC,QAAQ,QAAQ,kBAAiB;AAC1C,SACEC,QAAQ,EACRC,YAAY,EAEZC,UAAU,QAEL,QAAO;AAoBd,MAAMC,YAAYJ,uBAChBG,WAAW,CAA6BE,OAA0BC;IAChE,MAAM,EAAEC,QAAQ,EAAW,GAAGF,OAATG,wCAASH;;;IAC9B,MAAM,EAAEI,IAAI,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGJ;IAC3C,MAAMK,KAAKhB,MAAMY,wBAAAA,KAAMK,GAAG;IAE1B,MAAMC,YAAYjB,aAAa;QAC7Be,IAAI,GAAGA,GAAG,CAAC,EAAEH,OAAOE,YAAY,IAAI;QACpCI,MAAM;YAAEN;YAAMD;QAAK;QACnBE;IACF;IAEA,MAAMM,YAAYF,UAAUE,SAAS;IACrC,MAAMC,QAAuB;QAC3BC,QAAQ;OACJJ,UAAUK,UAAU,GACpB;QACEC,cAAc;QACdC,cAAc;QACdC,eAAe;QACfC,SAAS;QACTL,QAAQ;IACV,IACA,CAAC,GACDF,YACA;QACEA,WAAW,CAAC,YAAY,EAAEA,UAAUQ,CAAC,CAAC,IAAI,EAAER,UAAUS,CAAC,CAAC,MAAM,CAAC;QAC/DP,QAAQ;IACV,IACA,CAAC;IAGP,IAAI,OAAOZ,aAAa,YAAY;QAClC,OAAOA,SAAS,aACXC;YACHU;YACAH;YACAZ,YAAYG;;IAEhB;IAEA,MAAMqB,QAAQ1B,SAAS2B,IAAI,CAACrB;IAC5B,qBAAOL,aACLyB,OACA5B,WAAW4B,MAAMtB,KAAK,EAAE;QACtBC,KAAKV,UAAUU,KAAKqB,MAAMtB,KAAK,CAACC,GAAG,EAAES,UAAUc,UAAU;QACzDX;OACGH,UAAUe,SAAS,EACnBf,UAAUgB,UAAU;AAG7B;AAEF3B,UAAU4B,WAAW,GAAG;AAExB,eAAe5B,UAAS"}

package/src/lib/components/dnd/drop-indicator.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as Besigner from '@aglyn/besigner';
+import { type ClientRect } from '@dnd-kit/core';
+import type { ComponentProps } from 'react';
+declare const Indicator: import("@emotion/styled").StyledComponent<Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    variant?: "vertical" | "horizontal";
+    className?: string;
+}, {}, {}>;
+export interface DropIndicatorProps extends ComponentProps<typeof Indicator> {
+    visible?: boolean;
+    rect: ClientRect;
+    region: Besigner.DropRegion;
+    className?: string;
+}
+export declare const DropIndicator: import("react").ForwardRefExoticComponent<Omit<DropIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default DropIndicator;