edytor 1.0.0-rc.3 → 2.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 '../../dnd/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. */
@@ -85,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"]');
@@ -138,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;
@@ -210,14 +201,15 @@
 		pointer-events: none;
 	}
 
-	/* Over a gap between two columns (one hit rule, the handles'): the handle
-	 * spans the gap right of the column resize band, its `+` (compact) and its
-	 * grip together flush with its block (Notion's "+ ⋮⋮"), and its box takes
-	 * the pointer at its block's whole row, shown or not — a pointer there
-	 * hovers the block, so its grip is reached from any side. The band is the
-	 * gap's left part (`columns/gaps.ts`, one measurement): at the default
-	 * 46px gap (10 + 18 + 18) neither button is under it, and where its guide
-	 * shows a press resizes. */
+	/* Over a gap between two columns (one hit rule, the handles'): the handle's
+	 * box spans the gap right of the column resize band, centered in the gap
+	 * (`columns/gaps.ts`, one measurement), and takes the pointer at its
+	 * block's whole row, shown or not — a pointer there hovers the block, so
+	 * its grip is reached from any side. Its `+` (compact) and grip stand
+	 * together flush with its block (Notion's "+ ⋮⋮"), never shrunk: wider
+	 * than the box, the `+` reaches left under the band (the resizers' layer
+	 * is above the handles'): where the band's guide shows, at every height,
+	 * a press resizes; the `+`'s part left of the band takes its own. */
 	[data-edytor-block-handle-host][data-over-gap='true'] {
 		box-sizing: border-box;
 		width: var(--edytor-handle-gap-width, auto);
@@ -225,8 +217,8 @@
 		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'] > :global(*) {
+		flex-shrink: 0;
 	}
 
 	[data-edytor-block-handle-host][data-over-gap='true']::before {

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,20 +1,25 @@
 import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
 import type { Block } from '../../block/block.svelte.js';
-import { type BlockHandlesLabels, 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
@@ -23,48 +28,29 @@ export type BlockHandleSnippetPayload = {
      * block.
      */
     add: (alt?: boolean, anchor?: HTMLElement | null) => void;
-    /** Whether the block takes a `+`: always `true` (a block in a column too, as Notion). */
-    addable: boolean;
-    readonly: boolean;
-    draggable: boolean;
-    /**
-     * Whether the menu the `+` (`add`) or the grip (`grip`) opened is open
-     * (reactive): their `aria-expanded`.
-     */
-    expanded: {
-        add: boolean;
-        grip: boolean;
-    };
     /**
-     * The id of the menu the `+` or the grip opened, while it is open: their
-     * `aria-controls`.
+     * Alt+click on the `+` adds a column right of the block's (a block
+     * directly in a layout's column): name your `+` with it.
      */
-    controls: {
-        add: string | undefined;
-        grip: string | undefined;
-    };
-    /** The handles' words (`add(label)`, `grip(label)`, their hints). */
-    labels: BlockHandlesLabels;
+    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,204 +2,149 @@ 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, handle, screen) => {
-    const top = -NEAR_SCREENS * screen;
-    const bottom = (1 + NEAR_SCREENS) * screen;
-    // Ids, a handle only for each box read: no handle for every top-level block.
-    const box = (id) => handle(id).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).map(handle);
-};
+import { isDropTarget } from '../../dnd/placement.js';
+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 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);
+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 near band, measured on the overlay's frames (a scroll, a resize, a commit). */
-        const measureNear = () => {
-            const view = edytor.node?.ownerDocument.defaultView;
-            if (!view || !edytor.root)
-                return;
-            const tops = edytor.facade.childrenIds(null);
-            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, edytor.idToBlock.block, view.innerHeight))
+        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))
-                        near.delete(id);
-                const add = [...next].filter((id) => !near.has(id));
-                gained = add.length ? new Set(add) : null;
-                if (gained)
-                    afterPaint ??= setTimeout(mountGained);
-            };
-        };
-        /**
-         * 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)
+        }
+        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?.();
-                    clearTimeout(afterPaint);
-                    afterPaint = undefined;
-                    gained = null;
+            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 (!isDropTarget(edytor, block))
+                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

@@ -149,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.