@next-buildr/editor 0.0.0-stage → 2.0.0

package/dist/dnd/dnd.test.js

@@ -0,0 +1,327 @@
+import { createRegistryMeta, createSeededIdGenerator, } from '@next-buildr/core';
+import { describe, expect, it, vi } from 'vitest';
+import { flattenTree } from '../panels/layers/flatten.js';
+import { createEditorStore } from '../store/index.js';
+import { moveDestinations } from './destinations.js';
+import { createDragEngine, DRAG_THRESHOLD, } from './engine.js';
+import { fragmentFor } from './fragment.js';
+import { autoscrollDelta, toCanvasPoint } from './geometry.js';
+import { treeDropTarget } from './tree-target.js';
+const base = {
+    type: 'buildr/leaf',
+    version: 1,
+    label: 'Leaf',
+    category: 'content',
+    props: {},
+    contentCategories: ['flow'],
+    styles: { groups: [] },
+    runtime: 'shared',
+};
+const box = {
+    ...base,
+    type: 'buildr/box',
+    label: 'Box',
+    slots: { default: {} },
+};
+const page = {
+    ...box,
+    type: 'buildr/page',
+    label: 'Page',
+    capabilities: { root: true },
+};
+const registry = createRegistryMeta({ components: [page, box, base] });
+const fixture = () => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['boxAAAAAA1', 'leafBBBBB1'] } },
+        boxAAAAAA1: { id: 'boxAAAAAA1', type: 'buildr/box', slots: { default: ['leafCCCCC1'] } },
+        leafBBBBB1: { id: 'leafBBBBB1', type: 'buildr/leaf' },
+        leafCCCCC1: { id: 'leafCCCCC1', type: 'buildr/leaf' },
+    },
+    components: {},
+});
+const newStore = (doc = fixture()) => createEditorStore({
+    doc,
+    registry,
+    generateId: createSeededIdGenerator(7),
+    validationDelayMs: null,
+});
+const ROW = 28;
+const all = (doc) => new Set(Object.keys(doc.nodes));
+describe('fragmentFor', () => {
+    it('stamps the versions of the registry, not 1', () => {
+        const v2 = createRegistryMeta({ components: [page, { ...box, version: 2 }, base] });
+        const fragment = fragmentFor(v2, { kind: 'component', type: 'buildr/box' });
+        expect(fragment?.components).toEqual({ 'buildr/box': 2 });
+    });
+});
+describe('toCanvasPoint', () => {
+    it('subtracts the frame offset and divides by the zoom', () => {
+        const frame = { left: 100, top: 50, width: 640, height: 400 };
+        expect(toCanvasPoint({ x: 100, y: 50 }, frame)).toEqual({ x: 0, y: 0 });
+        expect(toCanvasPoint({ x: 420, y: 250 }, frame, 0.5)).toEqual({ x: 640, y: 400 });
+        expect(toCanvasPoint({ x: 150, y: 90 }, frame, 2)).toEqual({ x: 25, y: 20 });
+    });
+    it('gives nothing for a frame that is not laid out', () => {
+        const frame = { left: 0, top: 0, width: 0, height: 0 };
+        expect(toCanvasPoint({ x: 1, y: 1 }, frame, 0)).toBeUndefined();
+        expect(toCanvasPoint({ x: 1, y: 1 }, frame, Number.NaN)).toBeUndefined();
+    });
+});
+describe('autoscrollDelta', () => {
+    const region = { left: 0, top: 100, width: 200, height: 300 };
+    it('is zero in the middle and grows towards the edges', () => {
+        expect(autoscrollDelta(region, 250)).toBe(0);
+        const near = autoscrollDelta(region, 130);
+        const at = autoscrollDelta(region, 100);
+        expect(near).toBeLessThan(0);
+        expect(at).toBeLessThan(near);
+        expect(autoscrollDelta(region, 380)).toBeGreaterThan(0);
+    });
+    it('keeps scrolling at full speed past the edge', () => {
+        expect(autoscrollDelta(region, 20)).toBe(-24);
+        expect(autoscrollDelta(region, 900)).toBe(24);
+    });
+});
+describe('treeDropTarget', () => {
+    const rows = (doc = fixture()) => flattenTree(doc, all(doc));
+    // Rows: 0 root, 1 box, 2 leafC (in box), 3 leafB.
+    const at = (item, row, within, doc = fixture()) => treeDropTarget({
+        doc,
+        registry,
+        rows: rows(doc),
+        item,
+        y: row * ROW + within * ROW,
+        rowHeight: ROW,
+    });
+    it('drops before, inside and after the row under the pointer', () => {
+        const item = { kind: 'component', type: 'buildr/leaf' };
+        expect(at(item, 3, 0.1)?.target).toEqual({ parentId: 'root', slot: 'default', index: 1 });
+        expect(at(item, 3, 0.9)?.target).toEqual({ parentId: 'root', slot: 'default', index: 2 });
+        expect(at(item, 1, 0.5)?.target).toEqual({ parentId: 'boxAAAAAA1', slot: 'default', index: 1 });
+    });
+    it('falls back to the parent when a leaf cannot hold the item', () => {
+        const result = at({ kind: 'component', type: 'buildr/leaf' }, 3, 0.5);
+        expect(result?.target).toEqual({ parentId: 'root', slot: 'default', index: 2 });
+    });
+    it('only ever drops inside the root row', () => {
+        const result = at({ kind: 'component', type: 'buildr/leaf' }, 0, 0.05);
+        expect(result?.position).toBe('inside');
+        expect(result?.target?.parentId).toBe('root');
+    });
+    it('clamps a pointer past the last row', () => {
+        const result = treeDropTarget({
+            doc: fixture(),
+            registry,
+            rows: rows(),
+            item: { kind: 'component', type: 'buildr/leaf' },
+            y: 10_000,
+            rowHeight: ROW,
+        });
+        expect(result?.rowIndex).toBe(3);
+    });
+    it('refuses moving a node into itself and says why', () => {
+        const result = at({ kind: 'nodes', ids: ['boxAAAAAA1'] }, 2, 0.5);
+        // Inside the leaf is impossible; after it and after the box (its own place) are not offered.
+        expect(result?.target).toBeNull();
+        expect(result?.reason).toBeDefined();
+    });
+    it('refuses an unknown palette item', () => {
+        expect(at({ kind: 'component', type: 'nope/none' }, 3, 0.5)?.target).toBeNull();
+    });
+    it('gives nothing for an empty list', () => {
+        expect(treeDropTarget({
+            doc: fixture(),
+            registry,
+            rows: [],
+            item: { kind: 'nodes', ids: ['leafBBBBB1'] },
+            y: 0,
+            rowHeight: ROW,
+        })).toBeUndefined();
+    });
+});
+describe('moveDestinations', () => {
+    it('lists the slots the rules accept, never inside the moved node', () => {
+        const doc = fixture();
+        const list = moveDestinations(doc, registry, ['boxAAAAAA1']);
+        expect(list.map((d) => d.parentId)).toEqual(['root']);
+        const leaf = moveDestinations(doc, registry, ['leafCCCCC1']).map((d) => d.parentId);
+        expect(leaf).toEqual(['root', 'boxAAAAAA1']);
+    });
+    it('gives nothing for the root or an unknown id', () => {
+        expect(moveDestinations(fixture(), registry, ['root', 'zzzzzzzzzz'])).toEqual([]);
+    });
+});
+describe('createDragEngine', () => {
+    function setup(options = {}) {
+        const store = newStore();
+        const host = { dndOver: vi.fn(), dndLeave: vi.fn() };
+        const frames = [];
+        const canvas = {
+            frame: { left: 300, top: 0, width: 600, height: 600 },
+            scale: options.canvasScale ?? 1,
+        };
+        const rows = flattenTree(store.getState().doc, all(store.getState().doc));
+        const tree = {
+            viewport: { left: 0, top: 0, width: 280, height: 400 },
+            scrollTop: 0,
+            rows,
+            rowHeight: ROW,
+        };
+        const engine = createDragEngine({
+            store,
+            host: () => host,
+            surfaces: { canvas: () => canvas, tree: () => tree },
+            raf: (cb) => frames.push(cb),
+            caf: () => undefined,
+        });
+        const flush = () => {
+            const pending = frames.splice(0);
+            for (const cb of pending)
+                cb();
+        };
+        return { store, host, engine, flush };
+    }
+    const leaf = { kind: 'component', type: 'buildr/leaf' };
+    it('stays a click until the pointer moves past the threshold', () => {
+        const { engine } = setup();
+        engine.press(leaf, 'Leaf', { x: 10, y: 10 });
+        engine.move({ x: 10 + DRAG_THRESHOLD - 1, y: 10 });
+        expect(engine.state.getState().phase).toBe('pending');
+        expect(engine.release()).toBe(false);
+        expect(engine.state.getState().phase).toBe('idle');
+        engine.press(leaf, 'Leaf', { x: 10, y: 10 });
+        engine.move({ x: 10 + DRAG_THRESHOLD, y: 10 });
+        expect(engine.state.getState().phase).toBe('dragging');
+    });
+    it('forwards the pointer to the canvas once per frame, translated for offset and zoom', () => {
+        const { engine, host, flush } = setup({ canvasScale: 0.5 });
+        engine.press(leaf, 'Leaf', { x: 10, y: 10 });
+        engine.move({ x: 320, y: 40 });
+        engine.move({ x: 400, y: 100 });
+        engine.move({ x: 500, y: 200 });
+        expect(host.dndOver).not.toHaveBeenCalled();
+        flush();
+        expect(host.dndOver).toHaveBeenCalledTimes(1);
+        expect(host.dndOver).toHaveBeenCalledWith({ x: 400, y: 400 }, leaf);
+        expect(engine.state.getState().over).toBe('canvas');
+    });
+    it('drops what the canvas chose and selects the new node', () => {
+        const { engine, store } = setup();
+        engine.press(leaf, 'Leaf', { x: 10, y: 10 });
+        engine.move({ x: 400, y: 100 });
+        engine.receiveTarget({ parentId: 'root', slot: 'default', index: 1 });
+        expect(engine.release()).toBe(true);
+        const children = store.getState().doc.nodes['root']?.slots?.['default'] ?? [];
+        expect(children).toHaveLength(3);
+        expect(store.getState().selectedIds).toEqual([children[1]]);
+        expect(engine.state.getState().phase).toBe('idle');
+    });
+    it('tells the canvas the drag is over, also when it is cancelled', () => {
+        const { engine, host, flush } = setup();
+        engine.press(leaf, 'Leaf', { x: 10, y: 10 });
+        engine.move({ x: 400, y: 100 });
+        flush();
+        engine.cancel();
+        expect(host.dndLeave).toHaveBeenCalledTimes(1);
+        expect(engine.state.getState().phase).toBe('idle');
+    });
+    it('does not drop where the canvas refused', () => {
+        const { engine, store } = setup();
+        engine.press(leaf, 'Leaf', { x: 10, y: 10 });
+        engine.move({ x: 400, y: 100 });
+        engine.receiveTarget(null, { code: 'x', message: 'no' });
+        expect(engine.release()).toBe(false);
+        expect(store.getState().doc.nodes['root']?.slots?.['default']).toHaveLength(2);
+    });
+    it('ignores a target that arrives after the drag ended', () => {
+        const { engine } = setup();
+        engine.receiveTarget({ parentId: 'root', slot: 'default', index: 0 });
+        expect(engine.state.getState().target).toBeNull();
+    });
+    it('moves nodes within the tree', () => {
+        const { engine, store } = setup();
+        engine.press({ kind: 'nodes', ids: ['leafBBBBB1'] }, 'Leaf', { x: 20, y: 3 * ROW + 14 });
+        // Over the top edge of the first box row: before it.
+        engine.move({ x: 20, y: 1 * ROW + 2 });
+        expect(engine.state.getState().over).toBe('tree');
+        expect(engine.state.getState().target).toEqual({
+            parentId: 'root',
+            slot: 'default',
+            index: 0,
+        });
+        expect(engine.release()).toBe(true);
+        expect(store.getState().doc.nodes['root']?.slots?.['default']).toEqual([
+            'leafBBBBB1',
+            'boxAAAAAA1',
+        ]);
+    });
+    it('refuses a drop into the node itself and keeps the document', () => {
+        const { engine, store } = setup();
+        const before = store.getState().doc;
+        engine.press({ kind: 'nodes', ids: ['boxAAAAAA1'] }, 'Box', { x: 20, y: 1 * ROW + 14 });
+        engine.move({ x: 20, y: 2 * ROW + 14 });
+        expect(engine.state.getState().target).toBeNull();
+        expect(engine.state.getState().reason).not.toBeNull();
+        expect(engine.release()).toBe(false);
+        expect(store.getState().doc).toBe(before);
+    });
+    it('never drops into a read-only document', () => {
+        const { engine, store } = setup();
+        store.setReadOnly(true);
+        const before = store.getState().doc;
+        engine.press({ kind: 'nodes', ids: ['leafBBBBB1'] }, 'Leaf', { x: 20, y: 3 * ROW + 14 });
+        engine.move({ x: 20, y: 1 * ROW + 2 });
+        expect(engine.release()).toBe(false);
+        expect(store.getState().doc).toBe(before);
+        expect(engine.state.getState().error).toBe('readOnly');
+    });
+    it('moves nodes by a direct drop (the Move to dialog)', () => {
+        const { engine, store } = setup();
+        const result = engine.drop({ kind: 'nodes', ids: ['leafBBBBB1'] }, { parentId: 'boxAAAAAA1', slot: 'default', index: 1 });
+        expect(result.ok).toBe(true);
+        expect(store.getState().doc.nodes['boxAAAAAA1']?.slots?.['default']).toEqual([
+            'leafCCCCC1',
+            'leafBBBBB1',
+        ]);
+    });
+    it('leaves the canvas when the pointer goes to the tree', () => {
+        const { engine, host, flush } = setup();
+        engine.press(leaf, 'Leaf', { x: 10, y: 10 });
+        engine.move({ x: 400, y: 100 });
+        flush();
+        engine.move({ x: 20, y: 3 * ROW + 14 });
+        expect(host.dndLeave).toHaveBeenCalledTimes(1);
+        expect(engine.state.getState().over).toBe('tree');
+    });
+});
+describe('performance', () => {
+    it('finds a drop target in a 1000-node tree well within a frame', () => {
+        const nodes = {};
+        const ids = [];
+        for (let i = 0; i < 999; i++) {
+            const id = `n${String(i).padStart(9, '0')}`;
+            ids.push(id);
+            nodes[id] = { id, type: 'buildr/leaf' };
+        }
+        nodes['root'] = { id: 'root', type: 'buildr/page', slots: { default: ids } };
+        const doc = { schemaVersion: 1, root: 'root', nodes, components: {} };
+        const rows = flattenTree(doc, new Set(['root']));
+        const run = () => treeDropTarget({
+            doc,
+            registry,
+            rows,
+            item: { kind: 'nodes', ids: [ids[10]] },
+            y: 500 * ROW + 20,
+            rowHeight: ROW,
+        });
+        run();
+        const start = performance.now();
+        for (let i = 0; i < 20; i++)
+            run();
+        const each = (performance.now() - start) / 20;
+        // A frame is 16 ms; the budget leaves room for slow CI.
+        expect(each).toBeLessThan(12);
+    });
+});

package/dist/dnd/engine.d.ts

@@ -0,0 +1,85 @@
+import type { DragItem, DropTarget, Reason } from '@next-buildr/core';
+import { type StoreApi } from 'zustand/vanilla';
+import type { LayerRow } from '../panels/layers/flatten.ts';
+import type { EditorStore } from '../store/index.ts';
+import { type Point, type Rect } from './geometry.ts';
+import { type TreeDropResult } from './tree-target.ts';
+/** The pointer moves this far (pixels) before a press becomes a drag: a click stays a click. */
+export declare const DRAG_THRESHOLD = 4;
+/** The part of the canvas host a drag talks to. */
+export interface DragHost {
+    dndOver(point: Point, item: DragItem): void;
+    dndLeave(): void;
+}
+/** The canvas as the pointer sees it: where its frame is in the window and how far it is zoomed. */
+export interface CanvasSurface {
+    readonly frame: Rect;
+    readonly scale: number;
+}
+/** The layers tree as the pointer sees it. */
+export interface TreeSurface {
+    /** The scrolling viewport of the list, in window coordinates. */
+    readonly viewport: Rect;
+    readonly scrollTop: number;
+    readonly rows: readonly LayerRow[];
+    readonly rowHeight: number;
+}
+export interface DragSurfaces {
+    canvas(): CanvasSurface | undefined;
+    tree(): TreeSurface | undefined;
+}
+export type DragPhase = 'idle' | 'pending' | 'dragging';
+export type DragOver = 'canvas' | 'tree' | null;
+export interface DragState {
+    readonly phase: DragPhase;
+    readonly item: DragItem | null;
+    /** What the ghost says (a component's name, the number of nodes). */
+    readonly label: string;
+    readonly pointer: Point | null;
+    readonly over: DragOver;
+    /** The gap the item would land in, or `null` where it may not be dropped. */
+    readonly target: DropTarget | null;
+    readonly reason: Reason | null;
+    /** Set while over the tree: which row and side the indicator is drawn on. */
+    readonly tree: Pick<TreeDropResult, 'rowIndex' | 'position'> | null;
+    /** The message of the last drop the commands refused. */
+    readonly error: string | null;
+}
+export interface DragEngineOptions {
+    readonly store: EditorStore;
+    readonly host: () => DragHost | undefined;
+    readonly surfaces: DragSurfaces;
+    readonly raf?: (callback: () => void) => number;
+    readonly caf?: (handle: number) => void;
+}
+export interface DragEngine {
+    readonly state: StoreApi<DragState>;
+    /** A pointer went down on something draggable; nothing happens until it moves. */
+    press(item: DragItem, label: string, at: Point): void;
+    move(at: Point): void;
+    /** The pointer went up: drops where the drag stands. Returns whether something was dropped. */
+    release(): boolean;
+    cancel(): void;
+    /** The canvas answered a `dnd:over` (protocol `dnd:target`). */
+    receiveTarget(target: DropTarget | null, reason?: Reason): void;
+    /** Applies a drop directly (the "Move to…" dialog and the keyboard use it). */
+    drop(item: DragItem, target: DropTarget): {
+        ok: true;
+    } | {
+        ok: false;
+        message: string;
+    };
+    dispose(): void;
+}
+export declare const IDLE_STATE: DragState;
+/**
+ * The drag-and-drop engine (docs/editor.md#drag-and-drop-pb-086), free of React: a small state
+ * machine (idle → pending → dragging), a hit-test of the pointer against the two drop surfaces, and
+ * the drop itself. Over the canvas the pointer is translated into the canvas' coordinates (the frame
+ * offset and the zoom) and forwarded once per animation frame; the canvas answers with the target
+ * (`dnd:target`, computed by `computeDropTarget` where the layout is). Over the tree the target comes
+ * from `treeDropTarget` right here. A drop always goes through the commands, `node.insert` or
+ * `node.move`, which check the rules again, so a stale or hostile target can do no harm.
+ */
+export declare function createDragEngine(options: DragEngineOptions): DragEngine;
+//# sourceMappingURL=engine.d.ts.map

package/dist/dnd/engine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../../src/dnd/engine.ts"],"names":[],"mappings":"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"}

package/dist/dnd/engine.js

@@ -0,0 +1,185 @@
+import { createStore } from 'zustand/vanilla';
+import { fragmentFor } from './fragment.js';
+import { rectContains, toCanvasPoint } from './geometry.js';
+import { treeDropTarget } from './tree-target.js';
+/** The pointer moves this far (pixels) before a press becomes a drag: a click stays a click. */
+export const DRAG_THRESHOLD = 4;
+export const IDLE_STATE = {
+    phase: 'idle',
+    item: null,
+    label: '',
+    pointer: null,
+    over: null,
+    target: null,
+    reason: null,
+    tree: null,
+    error: null,
+};
+/**
+ * The drag-and-drop engine (docs/editor.md#drag-and-drop-pb-086), free of React: a small state
+ * machine (idle → pending → dragging), a hit-test of the pointer against the two drop surfaces, and
+ * the drop itself. Over the canvas the pointer is translated into the canvas' coordinates (the frame
+ * offset and the zoom) and forwarded once per animation frame; the canvas answers with the target
+ * (`dnd:target`, computed by `computeDropTarget` where the layout is). Over the tree the target comes
+ * from `treeDropTarget` right here. A drop always goes through the commands, `node.insert` or
+ * `node.move`, which check the rules again, so a stale or hostile target can do no harm.
+ */
+export function createDragEngine(options) {
+    const { store, surfaces } = options;
+    const raf = options.raf ?? ((cb) => requestAnimationFrame(cb));
+    const caf = options.caf ?? ((handle) => cancelAnimationFrame(handle));
+    const state = createStore(() => IDLE_STATE);
+    let origin = null;
+    let frame = null;
+    let pendingOver = null;
+    let forwarding = false;
+    const set = (patch) => state.setState(patch);
+    function stopForwarding() {
+        if (frame !== null) {
+            caf(frame);
+            frame = null;
+        }
+        pendingOver = null;
+        if (forwarding) {
+            forwarding = false;
+            options.host()?.dndLeave();
+        }
+    }
+    function reset() {
+        stopForwarding();
+        origin = null;
+        state.setState(IDLE_STATE, true);
+    }
+    function forward(point, item) {
+        pendingOver = { point, item };
+        forwarding = true;
+        if (frame !== null)
+            return;
+        frame = raf(() => {
+            frame = null;
+            const next = pendingOver;
+            pendingOver = null;
+            if (next !== null)
+                options.host()?.dndOver(next.point, next.item);
+        });
+    }
+    function hover(at) {
+        const current = state.getState();
+        const item = current.item;
+        if (item === null)
+            return;
+        const canvas = surfaces.canvas();
+        if (canvas !== undefined && rectContains(canvas.frame, at)) {
+            const point = toCanvasPoint(at, canvas.frame, canvas.scale);
+            if (point !== undefined) {
+                // The canvas decides the target; what was there stays until it answers.
+                forward(point, item);
+                set({
+                    pointer: at,
+                    over: 'canvas',
+                    tree: null,
+                    ...(current.over === 'canvas' ? {} : { target: null, reason: null }),
+                });
+                return;
+            }
+        }
+        const tree = surfaces.tree();
+        if (tree !== undefined && rectContains(tree.viewport, at)) {
+            if (forwarding) {
+                stopForwarding();
+            }
+            const { doc } = store.getState();
+            const result = treeDropTarget({
+                doc,
+                registry: store.registry,
+                rows: tree.rows,
+                item,
+                y: at.y - tree.viewport.top + tree.scrollTop,
+                rowHeight: tree.rowHeight,
+            });
+            set({
+                pointer: at,
+                over: 'tree',
+                target: result?.target ?? null,
+                reason: result?.reason ?? null,
+                tree: result === undefined ? null : { rowIndex: result.rowIndex, position: result.position },
+            });
+            return;
+        }
+        stopForwarding();
+        set({ pointer: at, over: null, target: null, reason: null, tree: null });
+    }
+    function drop(item, target) {
+        const snapshot = store.getState();
+        if (snapshot.readOnly)
+            return { ok: false, message: 'readOnly' };
+        if (item.kind === 'nodes') {
+            const ids = item.ids.filter((id) => id !== snapshot.doc.root && Object.hasOwn(snapshot.doc.nodes, id));
+            if (ids.length === 0)
+                return { ok: false, message: 'nothingToMove' };
+            const result = store.dispatch({ type: 'node.move', payload: { ids, ...target } });
+            return result.ok ? { ok: true } : { ok: false, message: result.error.message };
+        }
+        const fragment = fragmentFor(store.registry, item);
+        if (fragment === undefined)
+            return { ok: false, message: 'unknownItem' };
+        const result = store.dispatch({ type: 'node.insert', payload: { ...target, fragment } });
+        if (!result.ok)
+            return { ok: false, message: result.error.message };
+        // The command gives the fragment fresh ids; the new node is the one now at the target position.
+        const created = store.getState().doc.nodes[target.parentId]?.slots?.[target.slot]?.[target.index];
+        if (created !== undefined)
+            store.select(created);
+        return { ok: true };
+    }
+    return {
+        state,
+        press(item, label, at) {
+            reset();
+            origin = at;
+            state.setState({ ...IDLE_STATE, phase: 'pending', item, label, pointer: at }, true);
+        },
+        move(at) {
+            const current = state.getState();
+            if (current.phase === 'idle' || origin === null)
+                return;
+            if (current.phase === 'pending') {
+                if (Math.hypot(at.x - origin.x, at.y - origin.y) < DRAG_THRESHOLD)
+                    return;
+                set({ phase: 'dragging' });
+            }
+            hover(at);
+        },
+        release() {
+            const current = state.getState();
+            const { item, target, phase } = current;
+            if (phase !== 'dragging' || item === null) {
+                reset();
+                return false;
+            }
+            // A drop is applied before the canvas is told the drag is over.
+            let dropped = false;
+            let error = null;
+            if (target !== null) {
+                const result = drop(item, target);
+                dropped = result.ok;
+                if (!result.ok)
+                    error = result.message;
+            }
+            reset();
+            if (error !== null)
+                set({ error });
+            return dropped;
+        },
+        cancel: reset,
+        receiveTarget(target, reason) {
+            // Answers that arrive after the drag ended or while over the tree are stale.
+            const current = state.getState();
+            if (current.phase !== 'dragging' || current.over !== 'canvas')
+                return;
+            set({ target, reason: reason === undefined ? null : reason });
+        },
+        drop,
+        dispose: reset,
+    };
+}

package/dist/dnd/fragment.d.ts

@@ -0,0 +1,6 @@
+import { type BuilderFragment, type DragItem, type RegistryMeta } from '@next-buildr/core';
+/** What dropping a palette item inserts: a template's tree, or a component with its defaults. */
+export declare function fragmentFor(registry: RegistryMeta, item: Exclude<DragItem, {
+    kind: 'nodes';
+}>): BuilderFragment | undefined;
+//# sourceMappingURL=fragment.d.ts.map

package/dist/dnd/fragment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fragment.d.ts","sourceRoot":"","sources":["../../src/dnd/fragment.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,QAAQ,EAGb,KAAK,YAAY,EAElB,MAAM,mBAAmB,CAAC;AAE3B,iGAAiG;AACjG,wBAAgB,WAAW,CACzB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,OAAO,CAAC,QAAQ,EAAE;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GACzC,eAAe,GAAG,SAAS,CAkB7B"}

package/dist/dnd/fragment.js

@@ -0,0 +1,18 @@
+import { fromTree, instantiateTemplate, registryVersions, } from '@next-buildr/core';
+/** What dropping a palette item inserts: a template's tree, or a component with its defaults. */
+export function fragmentFor(registry, item) {
+    const versions = registryVersions(registry);
+    if (item.kind === 'template') {
+        const definition = registry.getTemplate(item.id);
+        return definition === undefined
+            ? undefined
+            : instantiateTemplate(definition, undefined, undefined, versions);
+    }
+    const meta = registry.get(item.type);
+    if (meta === undefined)
+        return undefined;
+    return fromTree({
+        type: meta.type,
+        ...(meta.defaults?.slots !== undefined ? { slots: meta.defaults.slots } : {}),
+    }, undefined, versions);
+}

package/dist/dnd/geometry.d.ts

@@ -0,0 +1,30 @@
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+export interface Rect {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+}
+export declare const rectContains: (rect: Rect, point: Point) => boolean;
+/**
+ * A pointer position in the window (`clientX/Y`) as the canvas sees it: relative to the frame's
+ * top-left corner and divided by the zoom the frame is shown at (`scale` 0.5 means the page is drawn
+ * at half size). A frame that is not laid out (zero scale) gives `undefined` rather than infinity.
+ */
+export declare function toCanvasPoint(client: Point, frame: Rect, scale?: number): Point | undefined;
+export interface AutoscrollOptions {
+    /** How close to an edge, in pixels, scrolling starts. */
+    readonly edge?: number;
+    /** Pixels per frame at the very edge. */
+    readonly maxSpeed?: number;
+}
+/**
+ * How far to scroll a region this frame while a drag is near its top or bottom edge: 0 in the
+ * middle, growing linearly to `maxSpeed` at the edge (and past it, so a pointer that left the
+ * region keeps scrolling), negative upwards.
+ */
+export declare function autoscrollDelta(region: Rect, pointerY: number, { edge, maxSpeed }?: AutoscrollOptions): number;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/dnd/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/dnd/geometry.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,SAAU,IAAI,SAAS,KAAK,KAAG,OAItB,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,SAAI,GAAG,KAAK,GAAG,SAAS,CAGtF;AAED,MAAM,WAAW,iBAAiB;IAChC,yDAAyD;IACzD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,MAAM,EAChB,EAAE,IAAS,EAAE,QAAa,EAAE,GAAE,iBAAsB,GACnD,MAAM,CAQR"}