docblocks-react-ui 0.1.0 → 0.2.0

package/dist/motion/index.mjs

@@ -1,1009 +0,0 @@
-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 };