edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/code/languages.js

@@ -8,132 +8,48 @@
 import { createHighlighter } from '@tanstack/highlight/core';
 import { jsx } from '@tanstack/highlight/languages/jsx';
 import { SvelteMap } from 'svelte/reactivity';
-import { englishLabels } from '../../labels.js';
-const scripts = () => Promise.all([
-    import('@tanstack/highlight/languages/css'),
-    import('@tanstack/highlight/languages/js'),
-    import('@tanstack/highlight/languages/ts')
-]).then(([{ css }, { js }, { ts }]) => [css, js, ts]);
-/** A markup grammar with the style and script grammars it embeds. */
-const markup = (grammar) => () => Promise.all([grammar(), scripts()]).then(([own, embedded]) => [own, ...embedded]);
+/** The grammars more than one language loads. */
+const css = () => import('@tanstack/highlight/languages/css');
+const ts = () => import('@tanstack/highlight/languages/ts');
+const html = () => import('@tanstack/highlight/languages/html');
+const scripts = () => Promise.all([css(), import('@tanstack/highlight/languages/js'), ts()]).then(([{ css }, { js }, { ts }]) => [css, js, ts]);
+/**
+ * A listed language: its lines are tokenized with `grammar` (its id unless
+ * named), the definition the module `load` imports exports by that name; a
+ * markup grammar (`embeds`) also loads the style and script grammars it embeds.
+ */
+const language = (id, label, load, grammar = id, embeds = false) => ({
+    id,
+    label,
+    grammar,
+    load: () => Promise.all([load(), embeds ? scripts() : []]).then(([module, embedded]) => [
+        module[grammar],
+        ...embedded
+    ])
+});
 /** The default languages, after Notion's list, sorted by label (Plain text first). */
 export const CODE_LANGUAGES = [
     { id: 'plaintext', label: 'Plain text' },
-    {
-        id: 'bash',
-        label: 'Bash',
-        grammar: 'shell',
-        load: () => import('@tanstack/highlight/languages/shell').then((m) => [m.shell])
-    },
-    {
-        id: 'cpp',
-        label: 'C++',
-        grammar: 'cpp',
-        load: () => import('@tanstack/highlight/languages/cpp').then((m) => [m.cpp])
-    },
-    {
-        id: 'css',
-        label: 'CSS',
-        grammar: 'css',
-        load: () => import('@tanstack/highlight/languages/css').then((m) => [m.css])
-    },
-    {
-        id: 'diff',
-        label: 'Diff',
-        grammar: 'diff',
-        load: () => import('@tanstack/highlight/languages/diff').then((m) => [m.diff])
-    },
-    {
-        id: 'docker',
-        label: 'Docker',
-        grammar: 'dockerfile',
-        load: () => import('@tanstack/highlight/languages/dockerfile').then((m) => [m.dockerfile])
-    },
-    {
-        id: 'go',
-        label: 'Go',
-        grammar: 'go',
-        load: () => import('@tanstack/highlight/languages/go').then((m) => [m.go])
-    },
-    {
-        id: 'html',
-        label: 'HTML',
-        grammar: 'html',
-        load: markup(() => import('@tanstack/highlight/languages/html').then((m) => m.html))
-    },
+    language('bash', 'Bash', () => import('@tanstack/highlight/languages/shell'), 'shell'),
+    language('cpp', 'C++', () => import('@tanstack/highlight/languages/cpp')),
+    language('css', 'CSS', css),
+    language('diff', 'Diff', () => import('@tanstack/highlight/languages/diff')),
+    language('docker', 'Docker', () => import('@tanstack/highlight/languages/dockerfile'), 'dockerfile'),
+    language('go', 'Go', () => import('@tanstack/highlight/languages/go')),
+    language('html', 'HTML', html, 'html', true),
     { id: 'javascript', label: 'JavaScript', grammar: 'jsx', load: async () => [jsx] },
-    {
-        id: 'json',
-        label: 'JSON',
-        grammar: 'json',
-        load: () => import('@tanstack/highlight/languages/json').then((m) => [m.json])
-    },
-    {
-        id: 'markdown',
-        label: 'Markdown',
-        grammar: 'markdown',
-        load: () => import('@tanstack/highlight/languages/markdown').then((m) => [m.markdown])
-    },
-    {
-        id: 'mermaid',
-        label: 'Mermaid',
-        grammar: 'mermaid',
-        load: () => import('@tanstack/highlight/languages/mermaid').then((m) => [m.mermaid])
-    },
-    {
-        id: 'php',
-        label: 'PHP',
-        grammar: 'php',
-        load: () => import('@tanstack/highlight/languages/php').then((m) => [m.php])
-    },
-    {
-        id: 'python',
-        label: 'Python',
-        grammar: 'python',
-        load: () => import('@tanstack/highlight/languages/python').then((m) => [m.python])
-    },
-    {
-        id: 'sql',
-        label: 'SQL',
-        grammar: 'sql',
-        load: () => import('@tanstack/highlight/languages/sql').then((m) => [m.sql])
-    },
-    {
-        id: 'svelte',
-        label: 'Svelte',
-        grammar: 'svelte',
-        load: markup(() => import('@tanstack/highlight/languages/svelte').then((m) => m.svelte))
-    },
-    {
-        id: 'toml',
-        label: 'TOML',
-        grammar: 'toml',
-        load: () => import('@tanstack/highlight/languages/toml').then((m) => [m.toml])
-    },
-    {
-        id: 'typescript',
-        label: 'TypeScript',
-        grammar: 'ts',
-        load: () => import('@tanstack/highlight/languages/ts').then((m) => [m.ts])
-    },
-    {
-        id: 'vue',
-        label: 'Vue',
-        grammar: 'vue',
-        load: markup(() => import('@tanstack/highlight/languages/vue').then((m) => m.vue))
-    },
-    {
-        id: 'xml',
-        label: 'XML',
-        grammar: 'html',
-        load: () => import('@tanstack/highlight/languages/html').then((m) => [m.html])
-    },
-    {
-        id: 'yaml',
-        label: 'YAML',
-        grammar: 'yaml',
-        load: () => import('@tanstack/highlight/languages/yaml').then((m) => [m.yaml])
-    }
+    language('json', 'JSON', () => import('@tanstack/highlight/languages/json')),
+    language('markdown', 'Markdown', () => import('@tanstack/highlight/languages/markdown')),
+    language('mermaid', 'Mermaid', () => import('@tanstack/highlight/languages/mermaid')),
+    language('php', 'PHP', () => import('@tanstack/highlight/languages/php')),
+    language('python', 'Python', () => import('@tanstack/highlight/languages/python')),
+    language('sql', 'SQL', () => import('@tanstack/highlight/languages/sql')),
+    language('svelte', 'Svelte', () => import('@tanstack/highlight/languages/svelte'), 'svelte', true),
+    language('toml', 'TOML', () => import('@tanstack/highlight/languages/toml')),
+    language('typescript', 'TypeScript', ts, 'ts'),
+    language('vue', 'Vue', () => import('@tanstack/highlight/languages/vue'), 'vue', true),
+    language('xml', 'XML', html, 'html'),
+    language('yaml', 'YAML', () => import('@tanstack/highlight/languages/yaml'))
 ];
 /**
  * The grammars loaded so far, by name, shared by every editor (a grammar is
@@ -181,12 +97,7 @@ export const tokenizeCode = (code, language) => {
 };
 export const DEFAULT_CODE_SETTINGS = {
     languages: CODE_LANGUAGES,
-    defaultLanguage: 'javascript',
-    labels: englishLabels.code
+    defaultLanguage: 'javascript'
 };
-/** A language's label as shown: the labels' `languages` entry for its id, else its own. */
-export const languageLabel = (language, { labels }) => labels.languages[language.id] ?? language.label;
-/** Each view's code options, for its code blocks' header (which reads them through its view). */
-export const codeSettings = new WeakMap();
 /** A code block's language id: its `data.language`, else the default. */
 export const languageOf = (data, { defaultLanguage }) => (typeof data?.language === 'string' && data.language ? data.language : defaultLanguage);

package/dist/plugins/columns/ColumnResize.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { GUIDE, type ColumnResize } from './resize.svelte.js';
+	import type { ColumnResize } from './resize.svelte.js';
 
 	/**
 	 * The resize bands of the hovered layout and the guide of a drag
-	 * (`ColumnResize`), in the overlay: each band the gap's left part, above
-	 * the block handles (their `+` and grip together right of it, `gaps.ts`);
+	 * (`ColumnResize`), in the overlay: each band centered in its gap, above
+	 * the block handles (their `+` and grip flush with the
+	 * column, `gaps.ts`);
 	 * hovered, it shows a gray guide in its middle: where the guide shows, a
 	 * press resizes. A band is a focusable separator: its arrows resize
 	 * (`resize.key`), focused it shows its guide in the resize color.
@@ -13,7 +14,7 @@
 
 	// The view turning readonly mid-drag drops the preview at once (round 4).
 	$effect(() => {
-		if (resize.readonly) resize.lock();
+		if (resize.readonly) resize.band.lock();
 	});
 </script>
 
@@ -39,11 +40,9 @@
 				style:width="{strip.width}px"
 				style:height="{strip.height}px"
 				style:cursor="col-resize"
-				style:--edytor-column-resize-guide-width="{GUIDE}px"
-				data-dragging={resize.drag ? 'true' : undefined}
-				data-selecting={resize.selecting ? 'true' : undefined}
-				onpointerdown={(event) => resize.start(event, strip)}
-				onmousedown={(event) => resize.mousedown(event, strip)}
+				data-dragging={resize.band.drag ? 'true' : undefined}
+				data-selecting={resize.band.selecting ? 'true' : undefined}
+				{@attach resize.band.press((event) => resize.start(event, strip))}
 				onkeydown={(event) => resize.key(event, strip)}
 				onfocus={() => resize.focus(strip, true)}
 				onblur={() => resize.focus(strip, false)}
@@ -72,38 +71,28 @@
 		pointer-events: none;
 	}
 
-	/* Notion's hover guide: a thin gray rule in the band's middle. */
+	/* The hover guide: a 2px rule in the band's middle, shown on hover (not while
+	 * it drags) and on a keyboard focus. Painted by a theme (`edytor/themes/notion.css`). */
 	[data-edytor-column-resize]::after {
 		content: '';
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		left: calc(50% - var(--edytor-column-resize-guide-width) / 2);
-		width: var(--edytor-column-resize-guide-width);
-		background: var(--edytor-columns-resize-color, rgba(55, 53, 47, 0.16));
-		opacity: 0;
+		left: calc(50% - 1px);
+		width: 2px;
 		pointer-events: none;
-		transition: opacity 80ms ease;
-	}
-
-	[data-edytor-column-resize]:hover:not([data-dragging='true'])::after {
-		opacity: 1;
+		visibility: hidden;
 	}
 
-	/* Focused from the keyboard: the guide shows in the resize color. */
-	[data-edytor-column-resize]:focus-visible {
-		outline: none;
-	}
+	[data-edytor-column-resize]:hover:not([data-dragging='true'])::after,
 	[data-edytor-column-resize]:focus-visible::after {
-		opacity: 1;
-		background: var(--edytor-column-resize-color, rgba(35, 131, 226, 0.43));
+		visibility: visible;
 	}
 
-	/* Notion's resize line: a thin blue rule where the gap will be. */
+	/* The resize line where the gap will be, while a band drags. */
 	[data-edytor-column-resize-guide] {
 		position: absolute;
 		width: 2px;
-		background: var(--edytor-column-resize-color, rgba(35, 131, 226, 0.43));
 		pointer-events: none;
 	}
 </style>

package/dist/plugins/columns/ColumnResize.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ColumnResize } from './resize.svelte.js';
+import type { ColumnResize } from './resize.svelte.js';
 type $$ComponentProps = {
     resize: ColumnResize;
 };

package/dist/plugins/columns/ColumnsPlugin.svelte

@@ -11,7 +11,9 @@
 	} from '../../selection/replaceSelection.js';
 	import ColumnResizeStrips from './ColumnResize.svelte';
 	import { ColumnResize, weightOf } from './resize.svelte.js';
-	import { keywordsOf, labelsWith, type PartialLabels } from '../../labels.js';
+	import { hoverChrome } from '../bands.svelte.js';
+	import { all, listen } from '../../utils/listen.js';
+	import { columnsEnglish, keywordsOf, labelsOf } from '../../labels.js';
 
 	export type ColumnsPluginOptions = {
 		/**
@@ -19,20 +21,8 @@
 		 * width (default `0.1`). View-only: the document stores weights.
 		 */
 		minWidth?: number;
-		/** The words the layout commands and the resize bands say, over the English ones. */
-		labels?: PartialLabels<'columns'>;
-		/**
-		 * The slash menu's keywords of a layout command, by id (`columns.2` to
-		 * `columns.5`), which replace its own.
-		 */
-		keywords?: Partial<Record<string, string[]>>;
 	};
 
-	const columnsPlugins = new WeakSet<Plugin>();
-
-	/** Recognize any columns plugin instance (the component's default yields to yours). */
-	export const isColumnsPlugin = (plugin: Plugin) => columnsPlugins.has(plugin);
-
 	/** A weight read back from HTML (`data-width`), when it is one. */
 	const parsedWidth = (element: HTMLElement): Record<string, number> => {
 		const width = Number(element.getAttribute('data-width'));
@@ -51,19 +41,22 @@
 	};
 
 	/** The kind row of a layout of `n` columns, each holding one empty block of the column's default kind. */
-	const layoutRow = (edytor: Edytor, n: number, options: ColumnsPluginOptions): KindRow => {
+	const layoutRow = (edytor: Edytor, n: number): KindRow => {
 		const kid = edytor.document.defaultChild('column');
 		const id = `columns.${n}`;
 		return {
 			id,
-			label: labelsWith('columns', options.labels).columns(n),
+			label: labelsOf(edytor, 'columns', columnsEnglish).columns(n),
 			group: 'Layout',
 			// Notion's `/col3`, `/columns3` and `/column 3` too (query words match in order).
-			keywords: keywordsOf(
-				id,
-				['columns', 'layout', 'side by side', `col${n}`, `columns${n}`, `column ${n}`],
-				options.keywords
-			),
+			keywords: keywordsOf(edytor, id, [
+				'columns',
+				'layout',
+				'side by side',
+				`col${n}`,
+				`columns${n}`,
+				`column ${n}`
+			]),
 			value: {
 				type: 'columns',
 				data: {},
@@ -88,12 +81,8 @@
 	 * block column 1 of `n`, each other column holding an empty paragraph
 	 * (`wrapBlocks`, `layout.wrap`, Notion); the blocks stay selected.
 	 */
-	const layoutCommand = (
-		edytor: Edytor,
-		n: number,
-		options: ColumnsPluginOptions
-	): EditorCommand => {
-		const { id, label, group, keywords } = layoutRow(edytor, n, options);
+	const layoutCommand = (edytor: Edytor, n: number): EditorCommand => {
+		const { id, label, group, keywords } = layoutRow(edytor, n);
 		return {
 			id,
 			label,
@@ -101,7 +90,7 @@
 			keywords,
 			// Asked of the view given (a `+`'s menu asks it of the block it adds).
 			isEnabled: (view = edytor) => {
-				const block = view.selection.state.startBlock;
+				const block = view.selection.textRange().startText?.parent;
 				return Boolean(block?.convertible) && !inColumn(block);
 			},
 			// Turn into: one block, or `n` sibling blocks, in `n` columns (`layout.wrap`, Notion).
@@ -114,12 +103,12 @@
 					(selected.length === 1 || selected.length === n)
 				)
 					return wrapBlocks(edytor, selected, 'columns', n);
-				const block = edytor.selection.state.startBlock;
+				const block = edytor.selection.textRange().startText?.parent;
 				if (inColumn(block)) {
 					edytor.dispatcher.record({ operation: 'setBlock', status: 'refused' });
 					return false;
 				}
-				return convertToKind(edytor, block, layoutRow(edytor, n, options));
+				return convertToKind(edytor, block, layoutRow(edytor, n));
 			}
 		};
 	};
@@ -148,57 +137,40 @@
 	 */
 	export const createColumnsPlugin = (options: ColumnsPluginOptions = {}): Plugin => {
 		const plugin: Plugin = (edytor) => {
-			const resize = new ColumnResize(
-				edytor,
-				options.minWidth ?? 0.1,
-				labelsWith('columns', options.labels)
-			);
+			const resize = new ColumnResize(edytor, options.minWidth ?? 0.1);
 			return {
-				commands: [2, 3, 4, 5].map((n) => layoutCommand(edytor, n, options)),
+				commands: [2, 3, 4, 5].map((n) => layoutCommand(edytor, n)),
 				// The layout holding the caret shows its bands (the keyboard's way to them).
 				onSelectionChange: () => edytor.overlay.invalidate(),
 				// The resize bands: in the overlay, for the layout under the pointer.
 				onEdytorAttached: ({ node }) => {
-					const over = (event: PointerEvent) => resize.hover(event.target);
-					const leave = (event: PointerEvent) => !resize.drag && resize.leave(event.relatedTarget);
-					// The overlay (a band, a handle in a gap) keeps the bands while the pointer is on it.
-					const layer = edytor.overlay.layer;
-					// A block drag owns the pointer: no strip takes it meanwhile.
-					const drag = (event: Event) => (resize.dragging = event.type === 'dragstart');
-					const document = node.ownerDocument;
-					node.addEventListener('pointerover', over);
-					node.addEventListener('pointerleave', leave);
-					layer?.addEventListener('pointerleave', leave);
-					// A column block's handle in a gap stands for its block (the bands show over its layout).
-					const overHandle = (event: PointerEvent) => {
-						const handle = (event.target as Element | null)?.closest?.<HTMLElement>(
-							'[data-edytor-block-handle-host][data-block-id]'
-						);
-						const id = handle?.dataset.blockId;
-						if (id) resize.hover(edytor.idToBlock.get(id)?.node ?? null);
-					};
-					layer?.addEventListener('pointerover', overHandle);
-					document.addEventListener('dragstart', drag, true);
-					document.addEventListener('dragend', drag, true);
-					document.addEventListener('drop', drag, true);
-					const unmount = edytor.overlay.mount(
-						ColumnResizeStrips,
-						{ resize },
-						'edytor-column-resizers',
-						// Above the block handles (5): the band is the gap's left part at every height.
-						6,
-						resize.measure
+					const off = all(
+						// The overlay (a band, a handle in a gap) keeps the bands while the pointer is on
+						// it; a block drag owns the pointer: no strip takes it meanwhile.
+						hoverChrome(
+							edytor,
+							node,
+							resize.hover,
+							resize.leave,
+							(event) => (resize.dragging = event.type === 'dragstart')
+						),
+						// A column block's handle in a gap stands for its block (the bands show over its layout).
+						listen(edytor.overlay.layer, 'pointerover', (event) => {
+							const id = (event.target as Element | null)?.closest?.<HTMLElement>(
+								'[data-edytor-block-handle-host][data-block-id]'
+							)?.dataset.blockId;
+							if (id) resize.hover(edytor.idToBlock.get(id)?.node ?? null);
+						}),
+						edytor.overlay.mount(
+							ColumnResizeStrips,
+							{ resize },
+							'edytor-column-resizers',
+							// Above the block handles (5): the band centered in the gap at every height.
+							6,
+							resize.measure
+						)
 					);
-					return () => {
-						node.removeEventListener('pointerover', over);
-						node.removeEventListener('pointerleave', leave);
-						layer?.removeEventListener('pointerleave', leave);
-						layer?.removeEventListener('pointerover', overHandle);
-						document.removeEventListener('dragstart', drag, true);
-						document.removeEventListener('dragend', drag, true);
-						document.removeEventListener('drop', drag, true);
-						unmount();
-					};
+					return off;
 				},
 				blocks: {
 					columns: {
@@ -229,12 +201,8 @@
 				}
 			};
 		};
-		columnsPlugins.add(plugin);
 		return plugin;
 	};
-
-	/** Columns with the default options. */
-	export const columnsPlugin = createColumnsPlugin();
 </script>
 
 <!--

package/dist/plugins/columns/ColumnsPlugin.svelte.d.ts

@@ -1,22 +1,12 @@
 import './columns.css';
 import type { Plugin } from '../../plugins.js';
-import { type PartialLabels } from '../../labels.js';
 export type ColumnsPluginOptions = {
     /**
      * The narrowest a column may be resized to, as a fraction of its layout's
      * width (default `0.1`). View-only: the document stores weights.
      */
     minWidth?: number;
-    /** The words the layout commands and the resize bands say, over the English ones. */
-    labels?: PartialLabels<'columns'>;
-    /**
-     * The slash menu's keywords of a layout command, by id (`columns.2` to
-     * `columns.5`), which replace its own.
-     */
-    keywords?: Partial<Record<string, string[]>>;
 };
-/** Recognize any columns plugin instance (the component's default yields to yours). */
-export declare const isColumnsPlugin: (plugin: Plugin) => boolean;
 /**
  * Notion's columns (docs/columns-plan.md): a `columns` layout shows its
  * `column`s side by side, each holding any blocks; a column grows by its
@@ -26,8 +16,6 @@ export declare const isColumnsPlugin: (plugin: Plugin) => boolean;
  * out and stacks them below a 480px wide layout.
  */
 export declare const createColumnsPlugin: (options?: ColumnsPluginOptions) => Plugin;
-/** Columns with the default options. */
-export declare const columnsPlugin: Plugin;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/plugins/columns/columns.css

@@ -1,9 +1,11 @@
 /*
- * Columns (`docs/columns-plan.md`): a layout lays its columns out side by
- * side in its one children container, each column growing by its weight
- * (`flex: <width> 1 0`, set on the column by the kind's element), with
- * `--edytor-columns-gap` between them. Neither container is a nesting step:
- * their indent is zeroed. Below a 480px wide layout the columns stack.
+ * Columns: a layout lays its columns out side by side in its one children
+ * container, each column growing by its weight (`flex: <width> 1 0`, set on
+ * the column by the kind's element), with `--edytor-columns-gap` between
+ * them (the gap the resize bands and the handles share, `gaps.ts`).
+ * Neither container is a nesting step: their indent is zeroed. Below a
+ * 480px wide layout the columns stack. The look (a selected layout's
+ * highlight, the columns' edges) is a theme's.
  */
 [data-edytor-block][data-edytor-columns] {
 	container-type: inline-size;
@@ -19,13 +21,6 @@
 [data-edytor-block][data-edytor-column] > [data-edytor-children] {
 	padding-inline-start: 0;
 }
-/* A column's first and last blocks sit flush with the layout's edges. */
-[data-edytor-column] > [data-edytor-children] > [data-edytor-block]:first-child {
-	margin-top: 0;
-}
-[data-edytor-column] > [data-edytor-children] > [data-edytor-block]:last-child {
-	margin-bottom: 0;
-}
 @container (max-width: 480px) {
 	[data-edytor-block][data-edytor-columns] > [data-edytor-children] {
 		flex-direction: column;
@@ -36,17 +31,3 @@
 		flex: 0 0 auto !important;
 	}
 }
-
-/*
- * A block selection standing for the whole layout: one highlight over
- * the layout, none on its blocks.
- */
-[data-edytor-block][data-edytor-columns] > [data-edytor-children][data-edytor-columns-selected] {
-	border-radius: 4px;
-	background: var(--edytor-block-selection, rgba(35, 131, 226, 0.14));
-}
-[data-edytor-block][data-edytor-columns]
-	> [data-edytor-children][data-edytor-columns-selected]
-	[data-edytor-block] {
-	background: transparent;
-}

package/dist/plugins/columns/gaps.d.ts

@@ -19,11 +19,13 @@ export type Gap = {
  */
 export declare const gapBefore: (column: Block) => Gap | null;
 /**
- * The resize band of `gap`: its left part, `BAND` px (the gap's width when
- * narrower) from the column before it, where the guide shows. The handle of
- * a column's block takes the rest (`handleSpan`): its `+` and grip together
- * flush with the block (Notion's "+ ⋮⋮"), so at the default 46px gap
- * (`--edytor-columns-gap`: 10 + 18 + 18) neither is under the band.
+ * The resize band of `gap`: `BAND` px (the gap's width when narrower)
+ * centered in it, its guide on the gap's middle line (Notion's). The handle
+ * of a column's block takes the gap's right part (`handleSpan`): its box
+ * from the band to the block, its `+` and grip flush with the block
+ * (Notion's "+ ⋮⋮", over the band where the gap is narrower than they are).
+ * At the default 46px gap (`--edytor-columns-gap`): the band 18–28, the
+ * handle's box 28–46.
  */
 export declare const bandOf: ({ left, right }: Gap) => {
     left: number;

package/dist/plugins/columns/gaps.js

@@ -27,13 +27,18 @@ export const gapBefore = (column) => {
     return null;
 };
 /**
- * The resize band of `gap`: its left part, `BAND` px (the gap's width when
- * narrower) from the column before it, where the guide shows. The handle of
- * a column's block takes the rest (`handleSpan`): its `+` and grip together
- * flush with the block (Notion's "+ ⋮⋮"), so at the default 46px gap
- * (`--edytor-columns-gap`: 10 + 18 + 18) neither is under the band.
+ * The resize band of `gap`: `BAND` px (the gap's width when narrower)
+ * centered in it, its guide on the gap's middle line (Notion's). The handle
+ * of a column's block takes the gap's right part (`handleSpan`): its box
+ * from the band to the block, its `+` and grip flush with the block
+ * (Notion's "+ ⋮⋮", over the band where the gap is narrower than they are).
+ * At the default 46px gap (`--edytor-columns-gap`): the band 18–28, the
+ * handle's box 28–46.
  */
-export const bandOf = ({ left, right }) => ({ left, width: Math.min(BAND, right - left) });
+export const bandOf = ({ left, right }) => {
+    const width = Math.min(BAND, right - left);
+    return { left: left + (right - left - width) / 2, width };
+};
 /** The width a column block's handle spans in `gap`: from the band's right edge to the block at `blockLeft`. */
 export const handleSpan = (gap, blockLeft) => {
     const band = bandOf(gap);