docblocks-react-ui 0.0.0-stage → 0.1.1

package/dist/motion/index.mjs

@@ -0,0 +1,1009 @@
+import { $t as ENUM_OPTION_PALETTE, At as Plus, C as deriveFlat, D as visibleRows, E as isEmptyChainText, It as Button, M as EnumOptionsMotionSlot, Mt as GripVertical, S as collapseEmptyTextChains, St as Card, T as indentOf$1, _ as useMentionMenu, _n as ensureTrailingParagraph, a as BlockNodeView, an as Input, b as BlockContext, bt as ColorSwatches, d as FormatPaletteContext, f as useFormatToolbar, ht as PopoverContent, i as CanvasView, j as useSlashMenu, k as useEditorContext, kt as X, mn as editorRootOf, n as PresenceCaretOverlay, o as FlatBlockView, on as useBlock, p as FORMAT_PALETTE, pn as SlashMenuContext, pt as Popover, r as useEditing, v as MentionMenuContext, vn as moveSegmentInSequence, w as entrySequenceParent, x as useBlockContext, y as insertParagraphAfter, yn as segmentRange, yt as PopoverTrigger } from "../Editor-CiJY5R4v.mjs";
+import { c as cn } from "../constants-D4FTL0ph.mjs";
+import { useStore } from "zustand";
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { BLOCK_REGISTRY, InvalidAttrsError, InvalidOperationError } from "docblocks-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, Reorder, useDragControls } from "framer-motion";
+//#region src/motion/constants.ts
+/** The motion editor's constants: the enter/exit geometry (the spacing
+* margin collapses on exit so a leaving row does not keep its gap), the
+* enter/exit and layout-slide transition (one snappy ease — the
+* between-rows reflow while a drag runs runs the layout arm of this
+* transition, gated per-value: 0 while the slide is disarmed), the slide
+* settle window (how long the layout slide stays armed after a structural
+* render — the slide itself runs 0.18s), the drag affordance style (the
+* handle shows the grab cursor in this view only — the rule is scoped to
+* the root attribute, so the base editor keeps the stylesheet's plain
+* pointer cursor), the text-row gutter types (the text types whose
+* built-in renderer renders the row's gutter handle — the row-level one
+* stands for every other type). */
+/**
+* The enter/exit geometry of a row. The spacing margin collapses on exit
+* so a leaving row does not keep its gap.
+*/
+const ENTER = {
+	opacity: 0,
+	height: 0
+};
+const ANIMATE = {
+	opacity: 1,
+	height: "auto"
+};
+const EXIT = {
+	opacity: 0,
+	height: 0,
+	marginBottom: 0
+};
+/**
+* The enter/exit and layout-slide transition (one snappy ease). The
+* between-rows reflow while a drag runs (the rows slide into each crossed
+* slot) runs the layout arm of this transition (gated per-value: 0 while
+* the slide is disarmed).
+*/
+const TRANSITION = {
+	duration: .18,
+	ease: "easeOut"
+};
+/**
+* The drag affordance: the handle shows the grab cursor in this view
+* only — the rule is scoped to the root attribute below, so the base
+* editor keeps the stylesheet's plain pointer cursor.
+*/
+const HANDLE_GRAB_STYLE = "[data-docblocks-motion] [data-slot=\"docblocks/gutter\"] { cursor: grab; }";
+/** The text types whose built-in renderer renders the row's gutter handle (the row-level one stands for every other type). */
+const TEXT_ROW_TYPES = /* @__PURE__ */ new Set([
+	"paragraph",
+	"quote",
+	"heading",
+	"callout",
+	"list-item",
+	"code"
+]);
+//#endregion
+//#region src/motion/MotionEnumOptionsEditor.tsx
+/** The motion's enum's options editor: the framer `Reorder`'s rows (the
+* grip's press-drag stands the live reorder with the layout's slide — the
+* rows' positions animate over the drag / the commit). The base's stand
+* stands the plain editor (the pointer's session — no animation); this
+* variant is provided over the `EnumOptionsMotionSlot`'s context by the
+* `MotionEditor` (the framer's import stands this subpath only — the
+* subpath's boundary's contract). */
+/** One option's row as a `Reorder.Item` (the grip's press starts the
+*  framer's drag through the row's `dragControls` — the grip is the only
+*  drag trigger, the row's own drag is disarmed). */
+function MotionEnumOptionRow({ option, colorOpen, onColorOpen, onSet, onRemove }) {
+	const dragControls = useDragControls();
+	const onGripPointerDown = (event) => {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		dragControls.start(event);
+	};
+	const onSelectColor = (hex) => {
+		onSet({ color: hex });
+		onColorOpen(false);
+	};
+	const onSelectNone = () => {
+		onSet({ color: null });
+		onColorOpen(false);
+	};
+	const onNameChange = (event) => onSet({ name: event.target.value });
+	return /* @__PURE__ */ jsxs(Reorder.Item, {
+		as: "div",
+		"data-slot": "docblocks/database-enum-option-row",
+		value: option,
+		dragListener: false,
+		dragControls,
+		whileDrag: { zIndex: 10 },
+		layout: "position",
+		transition: { layout: TRANSITION },
+		className: "relative flex h-8 items-center gap-1",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "docblocks/database-enum-option-grip",
+				onPointerDown: onGripPointerDown,
+				className: "\n          flex size-5 shrink-0 cursor-grab touch-none items-center justify-center text-muted-foreground\n          active:cursor-grabbing\n        ",
+				children: /* @__PURE__ */ jsx(GripVertical, { className: "size-3.5" })
+			}),
+			/* @__PURE__ */ jsxs(Popover, {
+				open: colorOpen,
+				onOpenChange: onColorOpen,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						"data-slot": "docblocks/database-enum-option-color",
+						variant: "ghost",
+						"data-color": option.color ?? "",
+						title: "Option's color",
+						className: "size-4 shrink-0 cursor-pointer rounded-full border border-border p-0 focus-visible:ring-0",
+						style: option.color !== null ? { backgroundColor: option.color } : void 0
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					className: "flex items-center p-2",
+					children: /* @__PURE__ */ jsx(ColorSwatches, {
+						colors: ENUM_OPTION_PALETTE,
+						current: option.color ?? void 0,
+						label: "option color",
+						allowNone: true,
+						noneActive: option.color === null,
+						onSelect: onSelectColor,
+						onSelectNone
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				size: "sm",
+				type: "text",
+				"data-slot": "docblocks/database-enum-option-name",
+				placeholder: "Option",
+				className: "min-w-0 flex-1 cursor-text text-foreground focus:bg-muted/60",
+				value: option.name,
+				onChange: onNameChange
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"data-slot": "docblocks/database-enum-option-delete",
+				variant: "ghost",
+				size: "icon",
+				className: "\n          size-5 shrink-0 cursor-pointer text-muted-foreground\n          hover:bg-transparent hover:text-foreground\n          dark:hover:bg-transparent\n        ",
+				onClick: onRemove,
+				children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+			})
+		]
+	});
+}
+/** The motion's options' editor (the create / the edit's form's stand):
+*  the `Reorder.Group`'s live reorder over the draft (the release stands
+*  nothing extra — the draft IS the order; the form's commit stands the
+*  bridge's write over the system's table). */
+function MotionEnumOptionsEditor({ options, onChange }) {
+	const [colorOpen, setColorOpen] = useState(null);
+	const setOption = (index, patch) => {
+		onChange(options.map((option, i) => i === index ? {
+			...option,
+			...patch
+		} : option));
+	};
+	const colorOpenChange = (index) => (open) => setColorOpen(open ? index : null);
+	const setOptionAt = (index) => (patch) => setOption(index, patch);
+	const optionRemove = (index) => () => onChange(options.filter((_, i) => i !== index));
+	const addOption = () => onChange([...options, {
+		name: "",
+		color: null,
+		uid: Math.random().toString(36).slice(2)
+	}]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "docblocks/database-enum-options",
+		className: "flex flex-col gap-1",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-sm text-foreground",
+				children: "Options"
+			}),
+			/* @__PURE__ */ jsx(Reorder.Group, {
+				axis: "y",
+				values: options,
+				onReorder: onChange,
+				className: "flex flex-col gap-1",
+				children: options.map((option, index) => /* @__PURE__ */ jsx(MotionEnumOptionRow, {
+					option,
+					colorOpen: colorOpen === index,
+					onColorOpen: colorOpenChange(index),
+					onSet: setOptionAt(index),
+					onRemove: optionRemove(index)
+				}, option.rowId ?? option.uid ?? `draft-${index}`))
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"data-slot": "docblocks/database-enum-option-add",
+				variant: "ghost",
+				size: "sm",
+				className: "h-auto cursor-pointer self-start rounded-sm px-1 py-0.5 font-normal text-muted-foreground",
+				onClick: addOption,
+				children: "+ Add option"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/motion/RowItem.tsx
+/** The motion editor's flat row: a page block as a `Reorder.Item` (the
+*  gutter handle's drag trigger, the indent steps' padding, the
+*  enter/exit geometry, the position-only layout slide). */
+/**
+* One flat row: a page block as a `Reorder.Item`. The drag is pure framer
+* (the row's `dragControls`, started from the gutter handle's pointerdown
+* — the handle is the only drag trigger, so a press without movement
+* stays the plain block selection). Every page row is a drag source: the
+* text types' built-in renderer renders the handle inside its own
+* wrapper, every other row carries the row-level handle. The row's left
+* padding is the `indent`'s per-level steps (a list item's extra step is
+* its marker gutter — the base view's list padding), so the nesting is
+* the data, not a wrapper.
+*/
+const RowItem = memo(function RowItem({ node, layoutSlide, isDragged, animated, previewIndent, onDragStart, onDragEnd, onDragMove }) {
+	const dragControls = useDragControls();
+	const rowRef = useRef(null);
+	const { doc, store, selection: selectionRef, viewMode } = useEditorContext();
+	const blockContext = useBlockContext();
+	const isList = node.kind !== void 0;
+	const block = useBlock(node.id);
+	const selected = useStore(store, (state) => state.selection.kind === "blocks" && state.selection.ids.includes(node.id));
+	const caretRow = useStore(store, (state) => {
+		if (state.selection.kind !== "text") return false;
+		return (state.selection.to !== null ? state.selection.to : state.selection.from).blockId === node.id;
+	});
+	const needsRowGutter = block !== void 0 && !TEXT_ROW_TYPES.has(block.type) && !viewMode;
+	/** The gutter handle's pointerdown starts this row's framer drag. */
+	const onRowPointerDown = useCallback((event) => {
+		const target = event.target instanceof HTMLElement ? event.target : null;
+		if (target === null) return;
+		if (target.closest("[data-slot=\"docblocks/gutter\"]") === null) return;
+		dragControls.start(event);
+	}, [dragControls]);
+	/** Gutter click: a blocks selection on this row's block (Shift extends from the anchor). */
+	const onGutterClick = useCallback((event) => {
+		event.preventDefault();
+		const view = selectionRef.view;
+		if (view === null) return;
+		const id = node.id;
+		const current = view.get();
+		if (event.shiftKey && current.kind === "blocks") {
+			const siblings = doc.getChildren(blockContext.parentId);
+			const anchorIndex = siblings.indexOf(current.anchorId);
+			const hereIndex = siblings.indexOf(id);
+			if (anchorIndex !== -1 && hereIndex !== -1) {
+				const [low, high] = anchorIndex <= hereIndex ? [anchorIndex, hereIndex] : [hereIndex, anchorIndex];
+				view.set({
+					kind: "blocks",
+					ids: siblings.slice(low, high + 1),
+					anchorId: current.anchorId
+				});
+			} else view.set({
+				kind: "blocks",
+				ids: [id],
+				anchorId: id
+			});
+		} else view.set({
+			kind: "blocks",
+			ids: [id],
+			anchorId: id
+		});
+		rowRef.current?.focus();
+	}, [
+		blockContext,
+		doc,
+		node.id,
+		selectionRef
+	]);
+	/** Keep a mousedown on the handle from moving the text caret. */
+	const onHandleMouseDown = useCallback((event) => {
+		event.preventDefault();
+	}, []);
+	/** Gutter plus: an empty paragraph under this row's block (one transact), the caret at its start. */
+	const onGutterPlusClick = useCallback((event) => {
+		event.preventDefault();
+		const id = node.id;
+		insertParagraphAfter(doc, id, blockContext.parentId, indentOf$1(block), editorRootOf(rowRef.current ?? document));
+	}, [
+		block,
+		blockContext,
+		doc,
+		node.id,
+		rowRef
+	]);
+	return /* @__PURE__ */ jsxs(Reorder.Item, {
+		as: "div",
+		ref: rowRef,
+		"data-slot": "docblocks/row",
+		"data-selected": selected ? "true" : void 0,
+		value: node.id,
+		tabIndex: 0,
+		initial: animated ? ENTER : false,
+		animate: ANIMATE,
+		exit: EXIT,
+		transition: {
+			opacity: TRANSITION,
+			height: TRANSITION,
+			marginBottom: TRANSITION,
+			layout: layoutSlide && !caretRow ? TRANSITION : { duration: 0 }
+		},
+		layout: "position",
+		dragListener: false,
+		dragControls,
+		onDragStart,
+		onDragEnd,
+		onDrag: onDragMove,
+		onPointerDown: onRowPointerDown,
+		className: cn(needsRowGutter && "group", "outline-none"),
+		style: {
+			position: "relative",
+			paddingLeft: `calc(${previewIndent ?? node.indent} * var(--docblocks-nested-indent) + ${isList ? "var(--docblocks-marker-width)" : "0px"})`,
+			...isDragged ? { zIndex: 30 } : void 0
+		},
+		children: [
+			needsRowGutter && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				"data-slot": "docblocks/gutter",
+				"aria-label": "Select block",
+				variant: "ghost",
+				size: "icon",
+				onClick: onGutterClick,
+				onMouseDown: onHandleMouseDown,
+				className: cn("absolute top-[calc((var(--docblocks-line-box-height)-var(--docblocks-gutter-size))/2)]", "cursor-pointer rounded-full opacity-0 group-hover:opacity-100", "text-(--docblocks-gutter-color)", "size-5", selected && "opacity-100"),
+				style: { left: `calc(${previewIndent ?? node.indent} * var(--docblocks-nested-indent) + var(--docblocks-gutter-left))` },
+				children: /* @__PURE__ */ jsx(GripVertical, {})
+			}),
+			needsRowGutter && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				"data-slot": "docblocks/gutter-plus",
+				"aria-label": "Add block below",
+				variant: "ghost",
+				size: "icon",
+				onClick: onGutterPlusClick,
+				onMouseDown: onHandleMouseDown,
+				className: cn("absolute top-[calc((var(--docblocks-line-box-height)-var(--docblocks-gutter-plus-size))/2)]", "cursor-pointer rounded-full opacity-0 group-hover:opacity-100", "text-(--docblocks-gutter-color)", "size-5", selected && "opacity-100"),
+				style: { left: `calc(
+                ${previewIndent ?? node.indent} * var(--docblocks-nested-indent) +
+                var(--docblocks-gutter-left) + var(--docblocks-gutter-size) + var(--docblocks-gutter-gap)
+              )` },
+				children: /* @__PURE__ */ jsx(Plus, {})
+			}),
+			/* @__PURE__ */ jsx(BlockNodeView, {
+				node,
+				flat: true,
+				renderBlock: FlatBlockView
+			})
+		]
+	});
+}, (prev, next) => prev.node === next.node && prev.layoutSlide === next.layoutSlide && prev.isDragged === next.isDragged && prev.previewIndent === next.previewIndent);
+//#endregion
+//#region src/motion/RowList.tsx
+/**
+* The motion editor's row list: the `Reorder.Group` + the flat rows, the
+* memo boundary that keeps framer's `ReorderContext` value (collected per
+* Group render, its fresh closures un-memoizable by the consumer) from
+* propagating into the rows on parent churn: a text-only change re-renders
+* nothing here (the rows' props stand), so the framer fibers and the
+* rows' context consumers stand as well.
+*/
+const RowList = memo(function RowList({ order, nodesById, layoutSlide, draggingKey, previewIndent, animated, onReorder, onDragStart, onDragMove, onDragEnd }) {
+	const handleReorder = (next) => onReorder(next);
+	const rowDragStart = (id) => () => onDragStart(id);
+	const rowDragEnd = (id) => (event) => onDragEnd(id, event);
+	const rowDragMove = (id) => (event) => onDragMove(id, event);
+	return /* @__PURE__ */ jsx(Reorder.Group, {
+		as: "div",
+		"data-slot": "docblocks/rows",
+		axis: "y",
+		values: order,
+		onReorder: handleReorder,
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "sync",
+			children: order.map((id) => {
+				const node = nodesById.get(id);
+				if (node === void 0) return null;
+				return /* @__PURE__ */ jsx(RowItem, {
+					node,
+					layoutSlide,
+					isDragged: draggingKey === id,
+					animated,
+					previewIndent: draggingKey === id ? previewIndent : null,
+					onDragStart: rowDragStart(id),
+					onDragEnd: rowDragEnd(id),
+					onDragMove: rowDragMove(id)
+				}, id);
+			})
+		})
+	});
+});
+//#endregion
+//#region src/motion/hooks.ts
+/** The motion editor's imperative root attributes: the grip typing flag
+*  (hidden while the editor content is typed) and the enter-animation
+*  gate (rows that mount before the first text input stand up instantly).
+*/
+/**
+* The grip typing flag: the editor root holds `data-docblocks-typing` from
+* the first text keypress in its own content until the first pointer move
+* or the focus leaving the editor — the stylesheet's unlayered rule hides
+* the hover grip while the attribute stands (a selected block's grip is a
+* selection indicator and stays visible). The attribute is imperative: a
+* React state would re-render every row per keypress.
+*/
+function useTypingFlag(rootRef) {
+	useEffect(() => {
+		const root = rootRef.current;
+		if (root === null) return;
+		const setTyping = (typing) => {
+			if (typing) root.setAttribute("data-docblocks-typing", "");
+			else root.removeAttribute("data-docblocks-typing");
+		};
+		const onKeydown = (event) => {
+			const target = event.target instanceof Element ? event.target : null;
+			if (target === null || target.closest("[data-slot=\"docblocks/editor\"]") !== root) return;
+			if (target.closest("[data-slot=\"docblocks/block-content\"]") === null) return;
+			if (event.key.length !== 1 || event.key === "	" || event.metaKey || event.ctrlKey || event.altKey) return;
+			setTyping(true);
+		};
+		const onPointerMove = () => setTyping(false);
+		const onFocusOut = () => {
+			const active = document.activeElement;
+			if (active instanceof Node && root.contains(active)) return;
+			setTyping(false);
+		};
+		document.addEventListener("keydown", onKeydown);
+		window.addEventListener("pointermove", onPointerMove);
+		document.addEventListener("focusout", onFocusOut);
+		return () => {
+			document.removeEventListener("keydown", onKeydown);
+			window.removeEventListener("pointermove", onPointerMove);
+			document.removeEventListener("focusout", onFocusOut);
+		};
+	}, [rootRef]);
+}
+/**
+* The enter-animation gate: the latch stands on the first text input in
+* this editor (a printable keydown or an input event in the editor's
+* contenteditable) — rows that mount before it (the mount and the sync
+* load) stand up instantly (`initial={false}`: the animate
+* values, no height-growth animation); a row that appears after it is an
+* insert in progress and runs the enter animation. The gate never clears
+* (a load window is a start window, not a session state).
+*/
+function useEnterAnimationGate(rootRef) {
+	const gateRef = useRef(false);
+	useEffect(() => {
+		const root = rootRef.current;
+		if (root === null) return;
+		const inThisEditorText = (event) => {
+			const target = event.target instanceof Element ? event.target : null;
+			if (target === null) return false;
+			if (target.closest("[data-slot=\"docblocks/editor\"]") !== root) return false;
+			return target.closest("[data-slot=\"docblocks/block-content\"]") !== null;
+		};
+		const onKeydown = (event) => {
+			if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) return;
+			if (!inThisEditorText(event)) return;
+			gateRef.current = true;
+		};
+		const onInput = (event) => {
+			if (!inThisEditorText(event)) return;
+			gateRef.current = true;
+		};
+		document.addEventListener("keydown", onKeydown);
+		document.addEventListener("input", onInput);
+		return () => {
+			document.removeEventListener("keydown", onKeydown);
+			document.removeEventListener("input", onInput);
+		};
+	}, [rootRef]);
+	return gateRef;
+}
+//#endregion
+//#region src/motion/reorder/seam.ts
+function dropCandidateIndent(rows, pointerY, segmentIds, headId) {
+	const rest = rows.filter((row) => !segmentIds.has(row.id));
+	if (rest.length === 0) {
+		const head = rows.find((row) => row.id === headId);
+		return head === void 0 ? 0 : head.indent;
+	}
+	const over = rest.find((row) => pointerY >= row.top && pointerY < row.bottom);
+	if (over !== void 0) return over.indent;
+	const belowLocal = rows.find((row) => row.top >= pointerY);
+	const aboveLocal = [...rows].reverse().find((row) => row.bottom <= pointerY);
+	if (belowLocal !== void 0 && aboveLocal !== void 0) return (pointerY < (aboveLocal.bottom + belowLocal.top) / 2 ? belowLocal : aboveLocal).indent;
+	if (belowLocal !== void 0) return segmentIds.has(belowLocal.id) ? rest[0]?.indent ?? 0 : belowLocal.indent;
+	const last = aboveLocal?.indent ?? 0;
+	return aboveLocal !== void 0 && segmentIds.has(aboveLocal.id) ? rest[rest.length - 1]?.indent ?? 0 : last;
+}
+//#endregion
+//#region src/motion/reorder/commit.ts
+/** Same ids in the same order (order matters). */
+function sameIds(a, b) {
+	return a.length === b.length && a.every((id, i) => id === b[i]);
+}
+/** The block's effective indent (absent is 0). */
+function indentOf(doc, id) {
+	const block = doc.getBlock(id);
+	if (block === null || !("attrs" in block)) return 0;
+	const indent = block.attrs?.indent;
+	return typeof indent === "number" && Number.isInteger(indent) && indent >= 0 ? indent : 0;
+}
+/**
+* A collapsed list item's hidden segment rows (in scope order): the
+* contiguous stretch after the item with `indent` deeper than the item's
+* own, up to the first block with `indent` <= the item's (the segment
+* minus the item itself). Absent when the item is not in the scope. The
+* scope is a superset of the item's segment (its followers are deeper than
+* the item, hence inside the scope), so the scoped scan equals the
+* full-sequence one.
+*/
+function hiddenSegmentRows(doc, sequence, itemId) {
+	const start = sequence.indexOf(itemId);
+	if (start === -1) return [];
+	const indent = indentOf(doc, itemId);
+	const rows = [];
+	for (let i = start + 1; i < sequence.length; i += 1) {
+		const id = sequence[i];
+		if (id === void 0) break;
+		if (indentOf(doc, id) <= indent) break;
+		rows.push(id);
+	}
+	return rows;
+}
+/**
+* The commit of a flat-row drag (the scope and the visible-order mapping:
+* the module header). `contextId` is the provider's entry root: the commit
+* resolves its sequence container and runs over its SCOPE — the full
+* sequence for a sequence-container entry root, the entry root's derived
+* segment (in the container's sequence) for a page-block one — and issues
+* the range move of the dragged block's derived subtree within the
+* CONTAINER's sequence (the scope's indices translated by the scope's
+* offset — the scope's membership stands, so a valid permutation of the
+* scope always commits: the segment's internal adjacencies and the
+* boundary neighbors are unchanged, and the indent-jump rule holds) plus
+* the seam's indent assignment (the `candidateIndent`, the module
+* header's seam rule).
+*
+* Returns true when the drag landed (a command issued or a no-op — the
+* local order already matches the store); false when the commit was
+* dropped (stale — the caller resyncs the local order to the store).
+*/
+function commitFlatDrag(doc, contextId, draggedId, visibleFinalOrder, collapsedIds, candidateIndent) {
+	const containerId = entrySequenceParent(doc, contextId);
+	const containerSequence = doc.getChildren(containerId);
+	let scopeOffset = 0;
+	let sequence = containerSequence;
+	if (containerId !== contextId) {
+		const entry = segmentRange(doc, containerId, contextId);
+		if (entry === null) return false;
+		scopeOffset = entry.start;
+		sequence = containerSequence.slice(entry.start, entry.end);
+	}
+	const start = sequence.indexOf(draggedId);
+	if (start === -1) return false;
+	const segment = segmentRange(doc, containerId, draggedId);
+	if (segment === null) return false;
+	if (segment.start < scopeOffset || segment.end > scopeOffset + sequence.length) return false;
+	const segmentLength = segment.end - segment.start;
+	const segmentRows = sequence.slice(start, start + segmentLength);
+	const segmentOthers = segmentRows.filter((id) => id !== draggedId);
+	const collapsed = new Set(collapsedIds);
+	const hiddenByItem = /* @__PURE__ */ new Map();
+	for (const id of sequence) {
+		if (id === draggedId) continue;
+		const block = doc.getBlock(id);
+		if (block === null || block.type !== "list-item") continue;
+		if (!collapsed.has(id)) continue;
+		const rows = hiddenSegmentRows(doc, sequence, id);
+		if (rows.length > 0) hiddenByItem.set(id, rows);
+	}
+	const hiddenRowSet = /* @__PURE__ */ new Set();
+	for (const rows of hiddenByItem.values()) for (const row of rows) hiddenRowSet.add(row);
+	const isFixed = (id) => doc.getBlock(id)?.type === "surface" || hiddenRowSet.has(id);
+	const scopeVisible = sequence.filter((id) => !isFixed(id));
+	const scopeVisibleSet = new Set(scopeVisible);
+	const headLanding = visibleFinalOrder.indexOf(draggedId);
+	if (headLanding === -1) return false;
+	if (visibleFinalOrder.length !== scopeVisible.length) return false;
+	if (!visibleFinalOrder.every((id) => scopeVisibleSet.has(id))) return false;
+	const segmentSet = new Set(segmentRows);
+	const restNow = [...sequence.slice(0, start), ...sequence.slice(start + segmentLength)];
+	const restVisible = restNow.filter((id) => !isFixed(id));
+	if (!sameIds(visibleFinalOrder.filter((id) => !segmentSet.has(id)), restVisible)) return false;
+	if (headLanding === scopeVisible.indexOf(draggedId)) return true;
+	let restVisibleBeforeHead = 0;
+	for (let i = 0; i < headLanding; i += 1) if (!segmentSet.has(visibleFinalOrder[i])) restVisibleBeforeHead += 1;
+	const restIndexOf = /* @__PURE__ */ new Map();
+	restNow.forEach((id, i) => restIndexOf.set(id, i));
+	const precedingVisible = restVisible[restVisibleBeforeHead - 1];
+	const spliceAt = precedingVisible === void 0 ? 0 : (restIndexOf.get(precedingVisible) ?? 0) + 1;
+	const finalFull = [
+		...restNow.slice(0, spliceAt),
+		...segmentRows,
+		...restNow.slice(spliceAt)
+	];
+	const target = spliceAt;
+	let t = target < start ? target : target + segmentLength;
+	if (target >= start && containerId === doc.meta.id && scopeOffset === 0 && t === sequence.length) {
+		const segmentLast = segmentRows[segmentRows.length - 1];
+		const segmentLastBlock = segmentLast === void 0 ? null : doc.getBlock(segmentLast);
+		const trailingId = containerSequence[containerSequence.length - 1];
+		const trailingBlock = trailingId === void 0 ? null : doc.getBlock(trailingId);
+		if (segmentLastBlock !== null && trailingId !== void 0 && trailingBlock !== null && trailingId !== segmentLast && !BLOCK_REGISTRY[segmentLastBlock.type].content && BLOCK_REGISTRY[trailingBlock.type].content && indentOf(doc, trailingId) === 0) t -= 1;
+	}
+	let before;
+	for (let i = target - 1; i >= 0; i -= 1) {
+		const id = finalFull[i];
+		if (id !== void 0 && !isFixed(id)) {
+			before = id;
+			break;
+		}
+	}
+	let after;
+	for (let i = target + segmentLength; i < finalFull.length; i += 1) {
+		const id = finalFull[i];
+		if (id !== void 0 && !isFixed(id)) {
+			after = id;
+			break;
+		}
+	}
+	if (!(before !== void 0 && candidateIndent === indentOf(doc, before) || after !== void 0 && candidateIndent === indentOf(doc, after))) return false;
+	const delta = candidateIndent - indentOf(doc, draggedId);
+	const followers = segmentOthers.map((id) => ({
+		id,
+		indent: indentOf(doc, id) + delta
+	}));
+	if (delta === 0) return moveSegmentInSequence(doc, containerId, scopeOffset + start, segmentLength, scopeOffset + t);
+	const applyIndents = () => {
+		doc.updateBlock(draggedId, { indent: candidateIndent });
+		for (const follower of followers) doc.updateBlock(follower.id, { indent: follower.indent });
+	};
+	try {
+		doc.transact(() => {
+			if (delta < 0) applyIndents();
+			const blockIds = doc.getChildren(containerId).slice(scopeOffset + start, scopeOffset + start + segmentLength);
+			for (let i = 0; i < segmentLength; i += 1) {
+				const landing = target < start ? scopeOffset + t + i : scopeOffset + t;
+				doc.moveBlock(blockIds[i], containerId, landing);
+			}
+			if (delta > 0) applyIndents();
+			if (containerId === doc.meta.id) ensureTrailingParagraph(doc, doc.meta.id);
+		});
+	} catch (error) {
+		if (error instanceof InvalidAttrsError || error instanceof InvalidOperationError) return false;
+		throw error;
+	}
+	return true;
+}
+/**
+* The tail seat's clamp (the preview side of the commit's tail landing):
+* framer's own reorder lets the dragged row cross the full-doc root's
+* trailing text paragraph (the pointer beyond the last row stands it
+* last). The commit stands the segment above the seat (the doc's tail
+* contract), so the preview stands the crossing too — the dragged row
+* clamps to the seat's slot, and the release settles at the preview's
+* stand. The seat's own drag stands unclamped (it is a real block — the
+* guarantee stands its own stand on release).
+*/
+function clampTailSeatCrossing(next, draggedId, seatId) {
+	if (seatId === void 0 || draggedId === seatId) return [...next];
+	const draggedAt = next.indexOf(draggedId);
+	const seatAt = next.indexOf(seatId);
+	if (draggedAt < 0 || seatAt < 0 || draggedAt <= seatAt) return [...next];
+	const rest = next.filter((id) => id !== draggedId);
+	const seatAfter = rest.indexOf(seatId);
+	return [
+		...rest.slice(0, seatAfter),
+		draggedId,
+		...rest.slice(seatAfter)
+	];
+}
+//#endregion
+//#region src/motion/utils.ts
+/** The motion editor's pure helpers: the drag event's pointer Y (the
+*  seam measurement's input) and the tail seat's id (the drag's preview
+*  clamp). */
+/**
+* The drag's pointer Y (the seam measurement's input): the pointer/mouse
+* event's clientY, or the last changed touch's (the touch release event
+* carries no coordinate of its own). Null when the event stands no
+* usable coordinate (the measurement is stale — the caller keeps the
+* preview or skips the commit).
+*/
+function pointerYOf(event) {
+	if (event instanceof TouchEvent) {
+		const touch = event.changedTouches[event.changedTouches.length - 1];
+		return touch === null || touch === void 0 ? null : touch.clientY;
+	}
+	return event.clientY;
+}
+/**
+* The tail seat's id for the drag's preview clamp (or undefined when the
+* clamp does not stand): the seat is the full-doc root's trailing row
+* (the guaranteed trailing text paragraph), and it stands for a dragged
+* row whose derived segment is NON-TEXT-terminated (a text-terminated
+* segment lands its text tail last — the doc's tail invariant stands and
+* the crossing is clean — no clamp, the end landing is the preview's
+* stand). The seat's own drag stands unclamped too (it is a real block).
+*/
+function tailSeatId(doc, rootBlockId, draggedId, trailingRowId) {
+	if (trailingRowId === void 0 || draggedId === trailingRowId) return void 0;
+	const segment = segmentRange(doc, rootBlockId, draggedId);
+	if (segment === null) return void 0;
+	const lastId = doc.getChildren(rootBlockId)[segment.end - 1];
+	if (lastId === void 0) return void 0;
+	const lastBlock = doc.getBlock(lastId);
+	if (lastBlock === null) return void 0;
+	if (BLOCK_REGISTRY[lastBlock.type].content) return void 0;
+	const trailingBlock = doc.getBlock(trailingRowId);
+	if (trailingBlock === null || trailingRowId === lastId) return void 0;
+	if (!BLOCK_REGISTRY[trailingBlock.type].content) return void 0;
+	const trailingAttrs = "attrs" in trailingBlock ? trailingBlock.attrs : void 0;
+	return (typeof trailingAttrs?.indent === "number" ? trailingAttrs.indent : 0) === 0 ? trailingRowId : void 0;
+}
+//#endregion
+//#region src/motion/use-motion-drag.ts
+/** The motion editor's drag-reorder session (pure framer `Reorder` — one
+* drag = one range move of the dragged block's derived subtree): the local
+* row order (live during a drag, locked to the store otherwise) + the
+* committed order's ref + the framer drag key + the in-flight seam
+* candidate + the layout slide's arm. The 2 resyncs (the drag's row
+* vanished — a peer deleted it mid-drag; a store change (remote or local,
+* drag-free) resyncs the local order) + the 3 drag handlers (the row's
+* drag start, the drag's live seam candidate, the row's release) + the
+* framer reorder's live preview (the tail seat's clamp). The seam
+* candidate at the pointer's Y (the drag's live preview and the release's
+* commit input share it) — the visible rows' viewport boxes against the
+* seam rule. */
+/** The local row order: live during a drag (framer's reorder), locked to the store otherwise. */
+function useMotionDrag({ doc, rootBlockId, store, rootRef, rowKeys, nodesById }) {
+	const [order, setOrder] = useState(rowKeys);
+	const orderRef = useRef(order);
+	const [draggingKey, setDraggingKey] = useState(null);
+	const [previewIndent, setPreviewIndent] = useState(null);
+	const [layoutSlide, setLayoutSlide] = useState(false);
+	const slideTimerRef = useRef(null);
+	const prevKeysRef = useRef(rowKeys);
+	const entryContainerRef = useRef(null);
+	/**
+	* Keep the layout slide armed for the settle window after a drag or a
+	* structural change, then release it so in-place content changes
+	* reflow instantly again (the zero-duration layout transition).
+	*/
+	const armSlide = useCallback(() => {
+		if (slideTimerRef.current !== null) window.clearTimeout(slideTimerRef.current);
+		slideTimerRef.current = window.setTimeout(() => {
+			slideTimerRef.current = null;
+			setLayoutSlide(false);
+		}, 400);
+		setLayoutSlide(true);
+	}, []);
+	useEffect(() => () => {
+		if (slideTimerRef.current !== null) window.clearTimeout(slideTimerRef.current);
+	}, []);
+	useLayoutEffect(() => {
+		orderRef.current = order;
+	}, [order]);
+	if (draggingKey !== null && !rowKeys.includes(draggingKey)) {
+		setDraggingKey(null);
+		setPreviewIndent(null);
+	}
+	if (draggingKey === null && !sameIds(order, rowKeys)) setOrder(rowKeys);
+	if (prevKeysRef.current !== rowKeys) {
+		const prev = prevKeysRef.current;
+		const removed = prev.some((key) => !rowKeys.includes(key));
+		const reordered = !sameIds(prev.filter((key) => rowKeys.includes(key)), rowKeys.filter((key) => prev.includes(key)));
+		if (removed || reordered) armSlide();
+		prevKeysRef.current = rowKeys;
+	}
+	/**
+	* The seam candidate at the pointer's Y (the drag's live preview and
+	* the release's commit input share it): the visible rows' viewport
+	* boxes against the seam rule (`reorder.ts`). Null when the measurement
+	* is stale (the segment vanished, or the rows are gone) — the caller
+	* keeps the preview (move) or skips the commit (release, the
+	* render-phase resync snaps the order back to the store).
+	*/
+	const seamCandidateAt = useCallback((id, pointerY) => {
+		const root = rootRef.current;
+		if (root === null) return null;
+		const session = entryContainerRef.current;
+		const containerId = session !== null && session.rootBlockId === rootBlockId ? session.value : entrySequenceParent(doc, rootBlockId);
+		const segment = segmentRange(doc, containerId, id);
+		if (segment === null) return null;
+		const segmentIds = new Set(doc.getChildren(containerId).slice(segment.start, segment.end));
+		const rows = [];
+		for (const el of Array.from(root.querySelectorAll("[data-slot=\"docblocks/row\"]"))) {
+			const wrapperId = el.querySelector("[data-block-id]")?.getAttribute("data-block-id") ?? null;
+			if (wrapperId === null) continue;
+			const node = nodesById.get(wrapperId);
+			if (node === void 0) continue;
+			let top = 0;
+			for (let ancestor = el; ancestor !== null; ancestor = ancestor.offsetParent) top += ancestor.offsetTop;
+			top -= window.scrollY;
+			rows.push({
+				id: wrapperId,
+				top,
+				bottom: top + el.offsetHeight,
+				indent: node.indent
+			});
+		}
+		if (rows.length === 0) return null;
+		return dropCandidateIndent(rows, pointerY, segmentIds, id);
+	}, [
+		doc,
+		nodesById,
+		rootBlockId,
+		rootRef
+	]);
+	return {
+		order,
+		draggingKey,
+		previewIndent,
+		layoutSlide,
+		onRowDragStart: useCallback((id) => {
+			armSlide();
+			setDraggingKey(id);
+			setPreviewIndent(null);
+			entryContainerRef.current = {
+				rootBlockId,
+				value: entrySequenceParent(doc, rootBlockId)
+			};
+		}, [
+			armSlide,
+			doc,
+			rootBlockId
+		]),
+		onRowDragMove: useCallback((id, event) => {
+			const pointerY = pointerYOf(event);
+			if (pointerY === null) return;
+			const candidate = seamCandidateAt(id, pointerY);
+			if (candidate === null) return;
+			setPreviewIndent(candidate);
+		}, [seamCandidateAt]),
+		onRowDragEnd: useCallback((id, event) => {
+			armSlide();
+			setDraggingKey(null);
+			rootRef.current?.focus({ preventScroll: true });
+			const pointerY = pointerYOf(event);
+			setPreviewIndent(null);
+			if (pointerY === null) return;
+			const candidate = seamCandidateAt(id, pointerY);
+			if (candidate === null) return;
+			commitFlatDrag(doc, rootBlockId, id, orderRef.current, store.getState().collapsedIds, candidate);
+		}, [
+			armSlide,
+			doc,
+			orderRef,
+			rootBlockId,
+			rootRef,
+			seamCandidateAt,
+			store
+		]),
+		onRowReorder: useCallback((next) => {
+			setOrder(clampTailSeatCrossing(next, draggingKey ?? "", rootBlockId === doc.meta.id && draggingKey !== null ? tailSeatId(doc, rootBlockId, draggingKey, rowKeys[rowKeys.length - 1]) : void 0));
+		}, [
+			doc,
+			draggingKey,
+			rootBlockId,
+			rowKeys
+		])
+	};
+}
+//#endregion
+//#region src/motion/MotionEditor.tsx
+/**
+* `MotionEditor` — the animated editor view, a drop-in replacement for the
+* base `Editor` under the same `EditorProvider`: the same root element
+* (the focus/keyboard scope), the same block rendering and editing
+* wiring, and the same presence overlay. The page view renders the FLAT
+* page sequence (every page block is its own `Reorder.Item` row), the
+* top-level rows render through `AnimatePresence` (`sync`), and the
+* drag-reorder is pure framer `Reorder` (one drag = one range move of the
+* dragged block's derived subtree).
+*/
+function MotionEditor({ view = "page", formatPalette = FORMAT_PALETTE }) {
+	const { doc, store, rootBlockId, viewMode } = useEditorContext();
+	const rootChildren = useStore(store, (state) => state.rootChildren);
+	const seqStamp = useStore(store, (state) => state.seqStamp);
+	const collapsedIds = useStore(store, (state) => state.collapsedIds);
+	const pageChildren = useMemo(() => rootChildren.filter((id) => store.getState().blocks[id]?.type !== "surface"), [
+		rootChildren,
+		seqStamp,
+		store
+	]);
+	const rootContext = useMemo(() => ({
+		parentId: entrySequenceParent(doc, rootBlockId),
+		siblings: rootChildren
+	}), [
+		doc,
+		rootBlockId,
+		rootChildren
+	]);
+	const { rootRef, onKeyDown, onCopy, onPointerDown: onCrossDragPointerDown } = useEditing();
+	const slash = useSlashMenu(rootRef);
+	const mention = useMentionMenu(rootRef);
+	const format = useFormatToolbar(rootRef, formatPalette);
+	useTypingFlag(rootRef);
+	const enterGate = useEnterAnimationGate(rootRef);
+	const prevRef = useRef(null);
+	const derivation = useMemo(() => {
+		const result = deriveFlat(pageChildren, store.getState().blocks, prevRef.current ?? void 0);
+		prevRef.current = result.byId;
+		return result;
+	}, [
+		pageChildren,
+		seqStamp,
+		store
+	]);
+	const rowKeys = useMemo(() => visibleRows(pageChildren, derivation.byId, collapsedIds), [
+		pageChildren,
+		derivation,
+		collapsedIds
+	]);
+	const nodesById = derivation.byId;
+	const emptyKey = useStore(store, (state) => viewMode ? pageChildren.map((id) => {
+		const block = state.blocks[id];
+		return isEmptyChainText(block) ? "o" : block === void 0 ? "-" : ".";
+	}).join("") : "");
+	const { order, draggingKey, previewIndent, layoutSlide, onRowDragStart, onRowDragMove, onRowDragEnd, onRowReorder } = useMotionDrag({
+		doc,
+		rootBlockId,
+		store,
+		rootRef,
+		rowKeys: useMemo(() => {
+			if (!viewMode) return rowKeys;
+			const nodes = [];
+			for (const id of rowKeys) {
+				const node = nodesById.get(id);
+				if (node !== void 0) nodes.push(node);
+			}
+			return collapseEmptyTextChains(nodes, (id) => isEmptyChainText(store.getState().blocks[id])).map((node) => node.id);
+		}, [
+			rowKeys,
+			viewMode,
+			emptyKey,
+			nodesById,
+			store
+		]),
+		nodesById
+	});
+	const onRootPointerDown = (event) => {
+		onCrossDragPointerDown(event);
+	};
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn(view === "canvas" && "min-h-0 flex-1"),
+		children: /* @__PURE__ */ jsx(EnumOptionsMotionSlot.Provider, {
+			value: MotionEnumOptionsEditor,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: rootRef,
+				"data-slot": "docblocks/editor",
+				"data-docblocks-motion": "",
+				"data-view": view,
+				"data-readonly": viewMode ? "true" : void 0,
+				tabIndex: -1,
+				className: cn("relative min-h-0 flex-1 selection:bg-(--docblocks-selection-background)", "font-(family-name:--docblocks-font-family) text-(length:--docblocks-font-size)", "leading-(--docblocks-line-height) text-(--docblocks-text-color)"),
+				onKeyDown,
+				onCopy,
+				onPointerDown: onRootPointerDown,
+				children: [
+					/* @__PURE__ */ jsx("style", { children: HANDLE_GRAB_STYLE }),
+					/* @__PURE__ */ jsx(MentionMenuContext.Provider, {
+						value: mention.api,
+						children: /* @__PURE__ */ jsx(SlashMenuContext.Provider, {
+							value: slash.api,
+							children: /* @__PURE__ */ jsx(FormatPaletteContext.Provider, {
+								value: formatPalette,
+								children: /* @__PURE__ */ jsxs(BlockContext.Provider, {
+									value: rootContext,
+									children: [view === "canvas" ? /* @__PURE__ */ jsx(CanvasView, {}) : /* @__PURE__ */ jsx("div", {
+										"data-slot": "docblocks/page",
+										className: "\n                        mx-auto w-full max-w-(--docblocks-page-column-max-width) px-(--docblocks-page-padding-x)\n                      ",
+										children: /* @__PURE__ */ jsx(RowList, {
+											order,
+											nodesById,
+											layoutSlide: layoutSlide || draggingKey !== null,
+											draggingKey,
+											previewIndent,
+											animated: enterGate.current,
+											onReorder: onRowReorder,
+											onDragStart: onRowDragStart,
+											onDragMove: onRowDragMove,
+											onDragEnd: onRowDragEnd
+										})
+									}), viewMode ? null : /* @__PURE__ */ jsx(PresenceCaretOverlay, { rootRef })]
+								})
+							})
+						})
+					}),
+					slash.menuNode,
+					mention.menuNode,
+					viewMode ? null : format.toolbarNode
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { MotionEditor };