edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/blockHandles/BlockHandles.svelte

@@ -10,6 +10,7 @@
 	import type { BlockHandleController } from './BlockHandleController.svelte.js';
 	import { gapBefore, handleSpan } from '../columns/gaps.js';
 	import { renderSkipped, rendered } from '../../surface/overlay.js';
+	import { getOwnRowBottom } from './geometry.js';
 
 	/**
 	 * The handles, in the overlay: one per registered movable block that
@@ -33,8 +34,8 @@
 		near: ReadonlySet<string>;
 		/** Blocks under the pointer; reactive. */
 		hovered: ReadonlySet<string>;
-		/** A custom handle (`BlockHandlesOptions.handle`). */
-		handle?: Snippet<[BlockHandleSnippetPayload]>;
+		/** The app's handle (`BlockHandlesOptions.handle`). */
+		handle: Snippet<[BlockHandleSnippetPayload]>;
 	} = $props();
 
 	/** The block whose handle holds focus: its handle stays while focused. */
@@ -47,20 +48,27 @@
 			if (change.order.size || change.added.size || change.removed.size) structure++;
 		})
 	);
+	/**
+	 * The few blocks that show a handle, sorted into document order: never a
+	 * walk of the whole document (a structural commit on a long page).
+	 */
 	const ids = $derived.by(() => {
 		void structure;
-		const selected = edytor.selection.selectedBlocks;
-		return edytor.facade
-			.order()
-			.filter(
-				(id) =>
-					blocks.has(id) &&
-					(near.has(id) ||
-						hovered.has(id) ||
-						id === focused ||
-						id === controller.dragging ||
-						selected.has(blocks.get(id)!))
-			);
+		const shown = new Set([...near, ...hovered]);
+		for (const block of edytor.selection.selectedBlocks) shown.add(block.id);
+		if (focused !== null) shown.add(focused);
+		if (controller.dragging) shown.add(controller.dragging);
+		// Document order by index paths (O(depth) each): no whole-document order is rebuilt.
+		const paths = new Map<string, number[]>();
+		for (const id of shown) {
+			const path = blocks.has(id) ? edytor.facade.pathOf(id) : null;
+			if (path) paths.set(id, path);
+		}
+		const before = (a: number[], b: number[]) => {
+			for (let i = 0; i < Math.min(a.length, b.length); i++) if (a[i] !== b[i]) return a[i] - b[i];
+			return a.length - b.length;
+		};
+		return [...paths.keys()].sort((a, b) => before(paths.get(a)!, paths.get(b)!));
 	});
 
 	/** The blocks whose handle sits over a gap between two columns (`overGap`, measured). */
@@ -78,16 +86,6 @@
 		return gapBefore(column);
 	};
 
-	/** Where a block's own row ends: where its first shown child begins, else its box's bottom. */
-	const ownRowBottom = (node: HTMLElement, rect: DOMRect) => {
-		const child = node
-			.querySelector<HTMLElement>('[data-edytor-block="true"]')
-			?.getBoundingClientRect();
-		return child && child.height > 0 && child.top >= rect.top && child.top < rect.bottom
-			? child.top
-			: rect.bottom;
-	};
-
 	const firstRowCenter = (node: HTMLElement, block: Block): number => {
 		if (block.definition.island) {
 			const header = node.querySelector<HTMLElement>(':scope > [data-edytor-void="true"]');
@@ -131,7 +129,7 @@
 			// the host's top, which is centered on the first line.
 			const span = gap ? `${handleSpan(gap, rect.left)}px` : '';
 			const row = gap
-				? `${rect.top - (center - host.offsetHeight / 2)}px ${ownRowBottom(node, rect) - rect.top}px`
+				? `${rect.top - (center - host.offsetHeight / 2)}px ${getOwnRowBottom(node, rect) - rect.top}px`
 				: '';
 			const next = shown ? `${left} ${top} ${row} ${span}` : 'none';
 			if (next === at) return;
@@ -218,10 +216,6 @@
 		padding-inline-end: 0;
 	}
 
-	[data-edytor-block-handle-host][data-over-gap='true'] :global(.edytor-block-add) {
-		width: 18px;
-	}
-
 	[data-edytor-block-handle-host][data-over-gap='true']::before {
 		content: '';
 		position: absolute;
@@ -244,4 +238,27 @@
 			padding-inline-end: 0;
 		}
 	}
+
+	/* Where a handle's drag lands (`DropIndicator`): the bar (4px) and the nest
+	 * backdrop, placed in the overlay and shown (`data-shown`) by the plugin;
+	 * their look is a theme's (`edytor/themes/notion.css`). */
+	:global([data-edytor-drop-indicator]),
+	:global([data-edytor-drop-backdrop]) {
+		position: absolute;
+		pointer-events: none;
+	}
+
+	:global([data-edytor-drop-indicator]) {
+		z-index: 100;
+		box-sizing: border-box;
+		height: 4px;
+	}
+
+	:global([data-edytor-drop-backdrop]) {
+		z-index: 99;
+	}
+
+	:global([data-edytor-drop-backdrop]:not([data-shown='true'])) {
+		visibility: hidden;
+	}
 </style>

package/dist/plugins/blockHandles/BlockHandles.svelte.d.ts

@@ -12,8 +12,8 @@ type $$ComponentProps = {
     near: ReadonlySet<string>;
     /** Blocks under the pointer; reactive. */
     hovered: ReadonlySet<string>;
-    /** A custom handle (`BlockHandlesOptions.handle`). */
-    handle?: Snippet<[BlockHandleSnippetPayload]>;
+    /** The app's handle (`BlockHandlesOptions.handle`). */
+    handle: Snippet<[BlockHandleSnippetPayload]>;
 };
 declare const BlockHandles: import("svelte").Component<$$ComponentProps, {}, "">;
 type BlockHandles = ReturnType<typeof BlockHandles>;

package/dist/plugins/blockHandles/blockHandlesPlugin.d.ts

@@ -1,50 +1,56 @@
 import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
 import type { Block } from '../../block/block.svelte.js';
-import { type PartialLabels } from '../../labels.js';
-export type BlockHandleActivation = {
-    block: Block;
-    anchor: HTMLElement;
-};
+import type { Attachment } from 'svelte/attachments';
 /** What a `handle` snippet receives. */
 export type BlockHandleSnippetPayload = {
     block: Block;
     /** The block's kind as people read it ("Heading 1", its preset's label): name your controls with it. */
     label: string;
-    /** An action: `use:grip` makes an element the drag grip, menu button and Alt+arrow target. */
-    grip: (node: HTMLElement) => {
-        destroy(): void;
-    };
+    /**
+     * The grip's attachment (`{@attach handle.grip}`): the drag source, a
+     * click that opens the block's menu, the Alt+arrow moves
+     * (`aria-keyshortcuts`), and the ARIA of the menu it opened
+     * (`aria-expanded`, `aria-controls`, `aria-haspopup`).
+     */
+    grip: Attachment<HTMLElement>;
+    /**
+     * The `+`'s attachment (`{@attach handle.plus}`): a click calls `add`
+     * (Alt+click with `true`) with the `+` as the anchor, a press keeps the
+     * editor's focus, and the ARIA of the menu it opened.
+     */
+    plus: Attachment<HTMLElement>;
     /**
      * The `+`: the slash menu offers what to add below; with `true` (Alt+click)
      * above, or, for a block directly in a layout's column, in a new column
-     * right of its column. Nothing is added until a row is picked.
+     * right of its column. Nothing is added until a row is picked. The menu
+     * opens under `anchor` (your `+`: `event.currentTarget`), else under the
+     * block.
+     */
+    add: (alt?: boolean, anchor?: HTMLElement | null) => void;
+    /**
+     * Alt+click on the `+` adds a column right of the block's (a block
+     * directly in a layout's column): name your `+` with it.
      */
-    add: (alt?: boolean) => void;
-    /** Whether the block takes a `+`: always `true` (a block in a column too, as Notion). */
-    addable: boolean;
+    beside: boolean;
     readonly: boolean;
     draggable: boolean;
 };
 export type BlockHandlesOptions = {
     /** Keep the handle and its keyboard actions, but omit pointer dragging and drop targets. */
     draggable?: boolean;
-    onActivate?: (activation: BlockHandleActivation) => void;
-    /** Replace the `+` and ⋮⋮ beside each block; placement and hover stay the plugin's. */
+    /**
+     * The `+` and ⋮⋮ beside each block, and their words (without it, no
+     * handle shows and no block drags); placement and hover are the plugin's.
+     */
     handle?: Snippet<[BlockHandleSnippetPayload]>;
-    /** The handles' accessible names and tooltips, over the English ones. */
-    labels?: PartialLabels<'blockHandles'>;
 };
-/** Recognize both the default and configured handle plugins during component composition. */
-export declare const isBlockHandlesPlugin: (plugin: Plugin) => boolean;
 /**
  * Block handles in the overlay, created lazily: a handle mounts
- * for a block near the viewport (`nearTop` and the blocks inside them, not
- * hidden; every block without layout),
+ * for a block near the viewport (the overlay's `near` top-level blocks and
+ * the blocks inside them, not hidden; every block without layout),
  * under the pointer, selected, focused or dragged; drop targets exist only
  * during our own drag. Hover is one delegated listener on the editor and
  * one on the overlay (a block's handle keeps it hovered).
  */
 export declare const createBlockHandlesPlugin: (options?: BlockHandlesOptions) => Plugin;
-/** Default handles for consumers that add the plugin directly. */
-export declare const blockHandlesPlugin: Plugin;

package/dist/plugins/blockHandles/blockHandlesPlugin.js

@@ -2,180 +2,148 @@ import { mount, unmount } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import BlockHandles from './BlockHandles.svelte';
 import { BlockHandleController } from './BlockHandleController.svelte.js';
-import { labelsWith } from '../../labels.js';
 import { hidden } from '../../selection/visibility.js';
-const handlePlugins = new WeakSet();
-/** Recognize both the default and configured handle plugins during component composition. */
-export const isBlockHandlesPlugin = (plugin) => handlePlugins.has(plugin);
-/**
- * Where a handle mounts: a block within one screen of the viewport, above or
- * below. Without layout (no `IntersectionObserver`: a DOM without a
- * renderer), every block is near.
- */
-const NEAR_SCREENS = 1;
-/**
- * The top-level blocks near the viewport, by a binary search over their
- * boxes (document order is vertical order at the top level): reads
- * O(log n) boxes a frame, where an observer of every block computed them all
- * after each layout change.
- */
-const nearTop = (blocks, screen) => {
-    const top = -NEAR_SCREENS * screen;
-    const bottom = (1 + NEAR_SCREENS) * screen;
-    const box = (block) => block.node?.getBoundingClientRect();
-    let lo = 0;
-    let hi = blocks.length;
-    while (lo < hi) {
-        const mid = (lo + hi) >> 1;
-        const at = box(blocks[mid]);
-        if (!at || at.bottom < top)
-            lo = mid + 1;
-        else
-            hi = mid;
-    }
-    const first = lo;
-    hi = blocks.length;
-    while (lo < hi) {
-        const mid = (lo + hi) >> 1;
-        const at = box(blocks[mid]);
-        if (!at || at.top <= bottom)
-            lo = mid + 1;
-        else
-            hi = mid;
-    }
-    return blocks.slice(first, lo);
-};
+import { all, listen } from '../../utils/listen.js';
 /**
  * Block handles in the overlay, created lazily: a handle mounts
- * for a block near the viewport (`nearTop` and the blocks inside them, not
- * hidden; every block without layout),
+ * for a block near the viewport (the overlay's `near` top-level blocks and
+ * the blocks inside them, not hidden; every block without layout),
  * under the pointer, selected, focused or dragged; drop targets exist only
  * during our own drag. Hover is one delegated listener on the editor and
  * one on the overlay (a block's handle keeps it hovered).
  */
-export const createBlockHandlesPlugin = (options = {}) => {
-    const plugin = (edytor) => {
-        const controller = new BlockHandleController(edytor, {
-            draggable: options.draggable !== false,
-            onActivate: options.onActivate,
-            labels: labelsWith('blockHandles', options.labels)
-        });
-        const blocks = new SvelteMap();
-        const near = new SvelteSet();
-        const hovered = new SvelteSet();
-        const ids = new WeakMap();
-        /** Layout is computed (a browser): the near band is measured, else every block is near. */
-        const measured = typeof IntersectionObserver !== 'undefined';
-        /** The near band, measured on the overlay's frames (a scroll, a resize, a commit). */
-        const measureNear = () => {
-            const view = edytor.node?.ownerDocument.defaultView;
-            const tops = edytor.root?.children;
-            if (!view || !tops)
-                return;
-            const next = new Set();
-            const visit = (block) => {
-                if (blocks.has(block.id) && !hidden(block))
-                    next.add(block.id);
-                for (const child of block.children)
-                    visit(child);
-            };
-            for (const block of nearTop(tops, view.innerHeight))
-                visit(block);
-            return () => {
-                for (const id of near)
-                    if (!next.has(id))
-                        near.delete(id);
-                for (const id of next)
-                    if (!near.has(id))
-                        near.add(id);
-            };
+export const createBlockHandlesPlugin = (options = {}) => (edytor) => {
+    const controller = new BlockHandleController(edytor, {
+        draggable: options.draggable !== false
+    });
+    const blocks = new SvelteMap();
+    const near = new SvelteSet();
+    const hovered = new SvelteSet();
+    /** Layout is computed (a browser): the near band is measured, else every block is near. */
+    const measured = typeof IntersectionObserver !== 'undefined';
+    /** The blocks the band gained, mounted after the frame's paint (`afterPaint`). */
+    let gained = null;
+    let afterPaint;
+    /**
+     * Browser rule `handles.after-paint` (one named timer): a handle the band
+     * gains mounts in a task queued from the overlay's frame, so after that
+     * frame's paint: a key that adds a block (Enter, a paste) paints its text
+     * first, the new blocks' handles a frame later. A handle the band loses
+     * goes at once; hovered, selected and focused handles do not wait.
+     */
+    const mountGained = () => {
+        afterPaint = undefined;
+        const ids = gained;
+        gained = null;
+        if (ids)
+            for (const id of ids)
+                if (blocks.has(id) && !near.has(id))
+                    near.add(id);
+    };
+    /** The near band, measured on the overlay's frames (a scroll, a resize, a commit). */
+    const measureNear = () => {
+        const next = new Set();
+        const visit = (block) => {
+            if (blocks.has(block.id) && !hidden(block))
+                next.add(block.id);
+            for (const child of block.children)
+                visit(child);
         };
-        /**
-         * The blocks under the pointer that have a handle: the hovered block and
-         * its handled ancestors (a layout and its columns have none). Over a
-         * block's handle (in the overlay), that block: a block stays hovered
-         * while the pointer goes from its text to its handle and stays there.
-         */
-        const hover = (event) => {
-            const target = event.target;
-            const handle = target?.closest?.('[data-edytor-block-handle-host]');
-            const start = handle
-                ? blocks.get(handle.dataset.blockId ?? '')?.node
-                : target?.closest?.('[data-edytor-block="true"]');
-            const next = new Set();
-            for (let node = start; node; node = node.parentElement?.closest('[data-edytor-block="true"]')) {
-                const id = ids.get(node);
-                if (id)
-                    next.add(id);
-            }
-            for (const id of hovered)
+        for (const node of edytor.overlay.near) {
+            const block = edytor.idToBlock.get(node.dataset.edytorId ?? '');
+            if (block?.node === node)
+                visit(block);
+        }
+        return () => {
+            for (const id of near)
                 if (!next.has(id))
-                    hovered.delete(id);
-            for (const id of next)
-                hovered.add(id);
-        };
-        /** In the overlay, only a handle names a block; other chrome (a resize strip, a menu) keeps the hover. */
-        const hoverOverlay = (event) => {
-            if (event.target?.closest?.('[data-edytor-block-handle-host]'))
-                hover(event);
+                    near.delete(id);
+            const add = [...next].filter((id) => !near.has(id));
+            gained = add.length ? new Set(add) : null;
+            if (gained)
+                afterPaint ??= setTimeout(mountGained);
         };
-        /** The pointer left the editor and its overlay (not one for the other): nothing is hovered. */
-        const unhover = (event) => {
-            const to = event.relatedTarget;
-            if (to && (edytor.node?.contains(to) || edytor.overlay.layer?.contains(to)))
-                return;
-            hovered.clear();
-        };
-        return {
-            onEdytorAttached: ({ node }) => {
-                const layer = edytor.overlay.layer;
-                node.addEventListener('pointerover', hover);
-                node.addEventListener('pointerleave', unhover);
-                layer.addEventListener('pointerover', hoverOverlay);
-                layer.addEventListener('pointerleave', unhover);
-                const offNear = measured ? edytor.overlay.add(measureNear) : undefined;
-                const component = mount(BlockHandles, {
+    };
+    /**
+     * The blocks under the pointer that have a handle: the hovered block and
+     * its handled ancestors (a layout and its columns have none). Over a
+     * block's handle (in the overlay), that block: a block stays hovered
+     * while the pointer goes from its text to its handle and stays there.
+     */
+    const hover = (event) => {
+        const target = event.target;
+        const handle = target?.closest?.('[data-edytor-block-handle-host]');
+        const start = handle
+            ? blocks.get(handle.dataset.blockId ?? '')?.node
+            : target?.closest?.('[data-edytor-block="true"]');
+        const next = new Set();
+        for (let node = start; node; node = node.parentElement?.closest('[data-edytor-block="true"]')) {
+            const id = node.dataset.edytorId ?? '';
+            if (blocks.get(id)?.node === node)
+                next.add(id);
+        }
+        for (const id of hovered)
+            if (!next.has(id))
+                hovered.delete(id);
+        for (const id of next)
+            hovered.add(id);
+    };
+    /** In the overlay, only a handle names a block; other chrome (a resize strip, a menu) keeps the hover. */
+    const hoverOverlay = (event) => {
+        if (event.target?.closest?.('[data-edytor-block-handle-host]'))
+            hover(event);
+    };
+    /** The pointer left the editor and its overlay (not one for the other): nothing is hovered. */
+    const unhover = (event) => {
+        const to = event.relatedTarget;
+        if (to && (edytor.node?.contains(to) || edytor.overlay.layer?.contains(to)))
+            return;
+        hovered.clear();
+    };
+    return {
+        onEdytorAttached: ({ node }) => {
+            const layer = edytor.overlay.layer;
+            const offPointer = all(listen(node, 'pointerover', hover), listen(node, 'pointerleave', unhover), listen(layer, 'pointerover', hoverOverlay), listen(layer, 'pointerleave', unhover));
+            const offNear = measured ? edytor.overlay.add(measureNear) : undefined;
+            const { handle } = options;
+            const component = handle &&
+                mount(BlockHandles, {
                     target: layer,
-                    props: { edytor, controller, blocks, near, hovered, handle: options.handle }
+                    props: { edytor, controller, blocks, near, hovered, handle }
                 });
-                return () => {
-                    node.removeEventListener('pointerover', hover);
-                    node.removeEventListener('pointerleave', unhover);
-                    layer.removeEventListener('pointerover', hoverOverlay);
-                    layer.removeEventListener('pointerleave', unhover);
-                    offNear?.();
+            return () => {
+                offPointer();
+                offNear?.();
+                clearTimeout(afterPaint);
+                afterPaint = undefined;
+                gained = null;
+                if (component)
                     void unmount(component);
-                };
-            },
-            onBlockAttached: ({ node, block }) => {
-                // A table's rows move by its own row menus, its cells never (`table.fits`).
-                if (!block.movable || edytor.facade.isTableRow(block.id))
-                    return;
-                const offDropTarget = controller.addDropTarget(node, block);
-                // A layout and its columns are drop targets but have no handle (as
-                // Notion): a block selection covering a layout stands for it.
-                const { facade } = edytor;
-                if (facade.isLayout(block.id) || facade.isLayoutItem(block.id))
-                    return offDropTarget;
-                ids.set(node, block.id);
-                blocks.set(block.id, block);
-                if (measured)
-                    edytor.overlay.invalidate();
-                else
-                    near.add(block.id);
-                return () => {
-                    offDropTarget();
-                    if (block.node === node || block.node === undefined) {
-                        blocks.delete(block.id);
-                        near.delete(block.id);
-                        hovered.delete(block.id);
-                    }
-                };
-            }
-        };
+            };
+        },
+        onBlockAttached: ({ node, block }) => {
+            // A table's rows move by its own row menus, its cells never (`table.fits`).
+            if (!block.movable || edytor.facade.isTableRow(block.id))
+                return;
+            const offDropTarget = controller.addDropTarget(node, block);
+            // A layout and its columns are drop targets but have no handle (as
+            // Notion): a block selection covering a layout stands for it.
+            const { facade } = edytor;
+            if (facade.isLayout(block.id) || facade.isLayoutItem(block.id))
+                return offDropTarget;
+            blocks.set(block.id, block);
+            if (measured)
+                edytor.overlay.invalidate();
+            else
+                near.add(block.id);
+            return () => {
+                offDropTarget();
+                if (block.node === node || block.node === undefined) {
+                    blocks.delete(block.id);
+                    near.delete(block.id);
+                    hovered.delete(block.id);
+                }
+            };
+        }
     };
-    handlePlugins.add(plugin);
-    return plugin;
 };
-/** Default handles for consumers that add the plugin directly. */
-export const blockHandlesPlugin = createBlockHandlesPlugin();

package/dist/plugins/blockHandles/dragPreview.d.ts

@@ -21,13 +21,15 @@ export type DragPreview = {
 /**
  * The ghost of `nodes` (the dragged blocks' elements, in document order),
  * grabbed at `pointer`: a copy of each block laid out at its own width (the
- * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`.
- * Nothing is added (no card, background, shadow, opacity, fade or count
- * badge): the blocks' own look. The pointer
- * keeps its place on the first block (a handle is left of it: a transparent
- * gutter keeps the offset positive, which every browser supports).
+ * widest of them; `MAX_WIDTH` when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`.
+ * With `columns` (a table row's or column's cells, `table.drag`), the copies
+ * are laid out in a grid of columns that wide, row after row. Nothing is
+ * added (no card, background, shadow, opacity, fade or count badge): the
+ * blocks' own look. The pointer keeps its place on the first block (a
+ * handle is left of it: a transparent gutter keeps the offset positive,
+ * which every browser supports).
  */
 export declare const dragPreview: (root: HTMLElement, nodes: HTMLElement[], pointer: {
     clientX: number;
     clientY: number;
-}) => DragPreview;
+}, columns?: number[]) => DragPreview;

package/dist/plugins/blockHandles/dragPreview.js

@@ -11,9 +11,10 @@ const MAX_WIDTH = 600;
 const MAX_HEIGHT = 300;
 /** The ghost is the blocks' own look, only smaller. */
 const SCALE = 0.8;
-/** View-only nodes a clone drops: render anchors, suggestions, peers' carets, handles and overlay. */
+/** View-only nodes a clone drops: render anchors, empty-body hints, suggestions, peers' carets, handles and overlay. */
 const VIEW_ONLY = [
     '[data-edytor-render-anchor]',
+    '[data-edytor-empty-body]',
     '[data-edytor-text-suggestion]',
     '[data-edytor-suggestion]',
     '[data-edytor-remote-cursor]',
@@ -148,31 +149,33 @@ const themed = (root, content) => {
     scope.append(shell);
     return scope;
 };
-/** The root's content width, capped (`MAX_WIDTH`). */
-const contentWidth = (root) => {
-    const style = root.ownerDocument.defaultView?.getComputedStyle(root);
-    const padding = style ? parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) : 0;
-    const width = root.clientWidth - (padding || 0);
-    return width > 0 ? Math.min(width, MAX_WIDTH) : MAX_WIDTH;
-};
 /**
  * The ghost of `nodes` (the dragged blocks' elements, in document order),
  * grabbed at `pointer`: a copy of each block laid out at its own width (the
- * widest of them; the editor's content width when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`.
- * Nothing is added (no card, background, shadow, opacity, fade or count
- * badge): the blocks' own look. The pointer
- * keeps its place on the first block (a handle is left of it: a transparent
- * gutter keeps the offset positive, which every browser supports).
+ * widest of them; `MAX_WIDTH` when none is laid out), scaled by `SCALE` from its top left, cut at `MAX_HEIGHT`.
+ * With `columns` (a table row's or column's cells, `table.drag`), the copies
+ * are laid out in a grid of columns that wide, row after row. Nothing is
+ * added (no card, background, shadow, opacity, fade or count badge): the
+ * blocks' own look. The pointer keeps its place on the first block (a
+ * handle is left of it: a transparent gutter keeps the offset positive,
+ * which every browser supports).
  */
-export const dragPreview = (root, nodes, pointer) => {
+export const dragPreview = (root, nodes, pointer, columns) => {
     const { ownerDocument: document } = root;
     const first = nodes[0]?.getBoundingClientRect();
     const dx = first ? pointer.clientX - first.left : 0;
     const dy = first ? pointer.clientY - first.top : 0;
-    // Each block at its own width (a column's block at its column's), capped.
-    const own = Math.max(0, ...nodes.map((node) => node.getBoundingClientRect().width));
-    const width = own > 0 ? Math.min(own, MAX_WIDTH) : contentWidth(root);
+    // Each block at its own width (a column's block at its column's), capped (the cap where none is laid out).
+    const own = columns
+        ? columns.reduce((sum, w) => sum + w, 0)
+        : Math.max(0, ...nodes.map((node) => node.getBoundingClientRect().width));
+    const width = Math.min(own || MAX_WIDTH, MAX_WIDTH);
     const list = document.createElement('div');
+    if (columns)
+        Object.assign(list.style, {
+            display: 'grid',
+            gridTemplateColumns: columns.map((w) => `${w}px`).join(' ')
+        });
     let shown = 0;
     for (const node of nodes) {
         // Past the cap nothing more shows: the rest is not cloned.