edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/slashMenu/slashMenuPlugin.d.ts

@@ -1,34 +1,17 @@
 import type { Snippet } from 'svelte';
-import type { EditorCommand, Plugin } from '../../plugins.js';
+import type { Plugin } from '../../plugins.js';
 import { SlashMenuController } from './SlashMenuController.svelte.js';
-import { type PartialLabels } from '../../labels.js';
-import type { MenuItemPayload } from '../chrome.js';
-/**
- * One row, for an `item` snippet: the row shape every menu shares (`item`
- * is the command, `label` its label, `run` runs it, removing the `/query`
- * first; set `id`, or spread `option`, so the keyboard's owner names the
- * highlighted row), with the command again and its icon.
- */
-export type SlashMenuItem = MenuItemPayload<EditorCommand> & {
-    /** The command (the same as `item`). */
-    command: EditorCommand;
-    /** The built-in line icon as a CSS `mask-image` value, when the command has one. */
-    icon: string | undefined;
-};
 export type SlashMenuOptions = {
     /**
-     * Replace the whole menu; it renders while `controller.isOpen`. Keys and
-     * placement stay the plugin's. Keep its ARIA with `{@attach
-     * controller.popup}` on the list and `{...controller.option(index)}` on
-     * each row; in a `+`'s menu, `{@attach controller.keys}` on your field.
+     * The menu's markup and its words; it renders while `controller.isOpen`
+     * (without it, nothing shows). Keys and placement stay the plugin's. Keep
+     * its ARIA with `{@attach controller.popup}` on the list (name it) and
+     * `{...controller.option(index)}` on each row; in a `+`'s menu (while
+     * `controller.addition`), `{@attach controller.keys}` on the element that
+     * holds the keyboard (your field, or the menu itself: typing then edits
+     * the query).
      */
     menu?: Snippet<[SlashMenuController]>;
-    /** Replace each row of the default menu. */
-    item?: Snippet<[SlashMenuItem]>;
-    /** The words the menu shows (its field, headings, empty state), over the English ones. */
-    labels?: PartialLabels<'slashMenu'>;
 };
-/** The slash menu, with your own markup through `menu` or `item` snippets. */
+/** The slash menu, drawn by your `menu` snippet. */
 export declare const createSlashMenuPlugin: (options?: SlashMenuOptions) => Plugin;
-/** The Notion-style slash menu. */
-export declare const slashMenuPlugin: Plugin;

package/dist/plugins/slashMenu/slashMenuPlugin.js

@@ -1,12 +1,11 @@
-import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from '../blockHandles/BlockHandleController.svelte.js';
-import { onPress } from '../../events/onFocus.js';
-import SlashMenu from './SlashMenu.svelte';
-import { caretRect, placeBelow } from '../triggers/place.js';
+import { caretRect } from '../triggers/place.js';
+import { placeNear } from '../../surface/overlay.js';
 import { SlashMenuController } from './SlashMenuController.svelte.js';
-import { labelsWith } from '../../labels.js';
-/** The slash menu, with your own markup through `menu` or `item` snippets. */
+import { handleMenuEvents, mountChrome } from '../chrome.js';
+import { withTriggerMenus } from '../triggers/triggers.js';
+/** The slash menu, drawn by your `menu` snippet. */
 export const createSlashMenuPlugin = (options = {}) => (edytor) => {
-    const controller = new SlashMenuController(edytor, labelsWith('slashMenu', options.labels));
+    const controller = new SlashMenuController(edytor);
     /**
      * Beside the caret (below a `+` it was opened from), kept in the
      * viewport; measured in the overlay's frame, written after, as
@@ -22,68 +21,28 @@ export const createSlashMenuPlugin = (options = {}) => (edytor) => {
         const anchor = addition?.anchor?.isConnected ? addition.anchor : addition?.block.node;
         const box = anchor?.getBoundingClientRect();
         const rect = box && (box.width || box.height) ? box : caretRect(edytor);
-        return rect && placeBelow(host, rect, { width: 310, height: 350 });
+        return rect && placeNear(host, rect, [310, 350]);
     };
-    return {
-        hotkeys: {
-            arrowdown: ({ prevent }) => {
-                if (controller.moveSelection(1))
-                    prevent();
-            },
-            arrowup: ({ prevent }) => {
-                if (controller.moveSelection(-1))
-                    prevent();
-            },
-            enter: ({ prevent }) => {
-                if (controller.isOpen && controller.commands.length)
-                    prevent(() => void controller.runSelected());
-            },
-            escape: ({ prevent }) => {
-                if (controller.isOpen)
-                    prevent(() => controller.dismiss());
-            }
-        },
-        onAfterOperation: (change) => {
-            if (change.operation !== 'insertText' || !('text' in change))
-                return;
-            controller.handleTextInsertion(change.text, change.block, change.payload);
+    const plugin = {
+        onEdytorAttached: ({ node }) => handleMenuEvents(edytor, node, 
+        // A grip's menu takes over (one menu at a time).
+        () => {
+            if (controller.addition)
+                controller.close();
+        }, 
+        // A `+` offers its block: nothing is added until a row is picked.
+        (event) => {
+            event.preventDefault();
+            controller.offer(event.detail);
             edytor.overlay.invalidate();
-        },
-        onSelectionChange: () => {
-            controller.reconcileSelection();
-            edytor.overlay.invalidate();
-        },
-        onEdytorAttached: ({ node }) => {
-            // A `+` offers its block: nothing is added until a row is picked.
-            const offer = (event) => {
-                event.preventDefault();
-                controller.offer(event.detail);
-                edytor.overlay.invalidate();
-            };
-            const outside = (event) => {
-                const target = event.target;
-                // The selection as it was; a press in the editor then places its caret.
-                if (controller.addition && !target?.closest?.('[data-edytor-slash-menu-host]'))
-                    controller.dismiss(false);
-            };
-            // A grip's menu takes over (one menu at a time).
-            const activate = () => {
-                if (controller.addition)
-                    controller.close();
-            };
-            node.addEventListener(BLOCK_ADD_EVENT, offer);
-            node.addEventListener(BLOCK_ACTIVATE_EVENT, activate);
-            // Every press, WebKit's lone `mousedown` after a drag too (`onPress`).
-            const offPress = onPress(edytor, node.ownerDocument, outside, true);
-            const unmount = edytor.overlay.mount(SlashMenu, { controller, menu: options.menu, item: options.item }, 'edytor-slash-menu-host', 50, positionMenu);
-            return () => {
-                node.removeEventListener(BLOCK_ADD_EVENT, offer);
-                node.removeEventListener(BLOCK_ACTIVATE_EVENT, activate);
-                offPress();
-                unmount();
-            };
-        }
+        }, '[data-edytor-slash-menu-host]', 
+        // The selection as it was; a press in the editor then places its caret.
+        () => controller.addition && controller.dismiss(false))
     };
+    // The `/` trigger, wired as a plugin's triggers are.
+    return withTriggerMenus(edytor, plugin, [controller], () => ({
+        move: controller.move,
+        pick: controller.commands.length ? () => void controller.runSelected() : undefined,
+        close: () => controller.dismiss()
+    }), () => mountChrome(edytor, options.menu, controller, () => controller.isOpen, { name: 'edytor-slash-menu-host', zIndex: 50, measure: positionMenu }, () => controller.dismiss(false)));
 };
-/** The Notion-style slash menu. */
-export const slashMenuPlugin = createSlashMenuPlugin();

package/dist/plugins/suggestions/SuggestionBars.svelte

@@ -1,16 +1,33 @@
+<script lang="ts" module>
+	import { mount, unmount } from 'svelte';
+	import type { Plugin } from '../../plugins.js';
+	import type { SuggestionBarOptions } from './suggestionsPlugin.js';
+	import Self from './SuggestionBars.svelte';
+
+	/**
+	 * The suggestion bar (Notion AI's): your `bar` under each block
+	 * suggestion (Accept, Discard, and Try again when the app passed
+	 * `onRetry`); its keys are the suggestions plugin's.
+	 */
+	export const createSuggestionBarPlugin =
+		({ bar }: SuggestionBarOptions): Plugin =>
+		(edytor) => ({
+			onEdytorAttached: () => {
+				const bars = mount(Self, { target: edytor.overlay.layer!, props: { edytor, bar } });
+				return () => void unmount(bars);
+			}
+		});
+</script>
+
 <script lang="ts">
+	import { takeKeys } from '../../events/onFocus.js';
 	import { onMount, type Snippet } from 'svelte';
 	import type { Edytor } from '../../edytor.svelte.js';
 	import type { Suggestion } from '../../session/suggestions.svelte.js';
 	import type { SuggestionBarPayload } from './suggestionsPlugin.js';
-	import type { SuggestionsLabels } from '../../labels.js';
 
-	let {
-		edytor,
-		bar,
-		labels
-	}: { edytor: Edytor; bar?: Snippet<[SuggestionBarPayload]>; labels: SuggestionsLabels } =
-		$props();
+	/** The plugin's `bar` under each block suggestion's preview, placed once per frame. */
+	let { edytor, bar }: { edytor: Edytor; bar: Snippet<[SuggestionBarPayload]> } = $props();
 
 	/** Each bar's place under its preview, layer-relative, measured once per frame. */
 	let places = $state<Record<string, { left: number; top: number; width: number }>>({});
@@ -48,20 +65,17 @@
 		suggestion,
 		accept: () => {
 			suggestion.accept();
-			edytor.expectInternalFocus();
-			edytor.node?.focus({ preventScroll: true });
+			takeKeys(edytor);
 		},
 		discard: suggestion.discard,
 		retry: suggestion.retryable ? suggestion.retry : undefined,
 		readonly: edytor.readonly,
-		labels
+		mac: edytor.keymap.isMac
 	});
-	const keep = (event: MouseEvent) => event.preventDefault();
 </script>
 
 {#each shown as suggestion (suggestion.id)}
 	{@const place = places[suggestion.id]}
-	{@const actions = payload(suggestion)}
 	<div
 		data-edytor-suggestion-bar={suggestion.id}
 		data-status={suggestion.status}
@@ -70,38 +84,7 @@
 		style:top={`${place?.top ?? 0}px`}
 		style:visibility={place ? undefined : 'hidden'}
 	>
-		{#if bar}
-			{@render bar(actions)}
-		{:else}
-			<span data-edytor-suggestion-label
-				>{suggestion.status === 'streaming'
-					? labels.writing(suggestion.label)
-					: (suggestion.label ?? labels.suggestion)}</span
-			>
-			{#if !actions.readonly}
-				<button
-					type="button"
-					data-edytor-suggestion-accept
-					onmousedown={keep}
-					onclick={actions.accept}
-					>{labels.accept} <kbd>{edytor.keymap.isMac ? '⌘↵' : `${labels.ctrl}+↵`}</kbd></button
-				>
-			{/if}
-			<button
-				type="button"
-				data-edytor-suggestion-discard
-				onmousedown={keep}
-				onclick={actions.discard}>{labels.discard} <kbd>{labels.escape}</kbd></button
-			>
-			{#if actions.retry && !actions.readonly}
-				<button
-					type="button"
-					data-edytor-suggestion-retry
-					onmousedown={keep}
-					onclick={actions.retry}>{labels.retry}</button
-				>
-			{/if}
-		{/if}
+		{@render bar(payload(suggestion))}
 	</div>
 {/each}
 
@@ -109,45 +92,5 @@
 	[data-edytor-suggestion-bar] {
 		position: absolute;
 		z-index: 30;
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 4px;
-		border-radius: 8px;
-		background: var(--edytor-suggestion-bar-background, #fff);
-		box-shadow:
-			0 0 0 1px rgb(15 15 15 / 0.05),
-			0 3px 6px rgb(15 15 15 / 0.1),
-			0 9px 24px rgb(15 15 15 / 0.2);
-		font-size: 13px;
-		line-height: 1.2;
-		white-space: nowrap;
-		user-select: none;
-	}
-	[data-edytor-suggestion-label] {
-		padding: 0 6px;
-		color: var(--edytor-suggestion-accent, #2383e2);
-		font-weight: 500;
-	}
-	[data-edytor-suggestion-bar] button {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		height: 26px;
-		padding: 0 8px;
-		border: 0;
-		border-radius: 6px;
-		background: transparent;
-		color: inherit;
-		font: inherit;
-		cursor: pointer;
-	}
-	[data-edytor-suggestion-bar] button:hover {
-		background: rgb(55 53 47 / 0.08);
-	}
-	[data-edytor-suggestion-bar] kbd {
-		color: rgb(55 53 47 / 0.5);
-		font: inherit;
-		font-size: 11px;
 	}
 </style>

package/dist/plugins/suggestions/SuggestionBars.svelte.d.ts

@@ -1,11 +1,17 @@
+import type { Plugin } from '../../plugins.js';
+import type { SuggestionBarOptions } from './suggestionsPlugin.js';
+/**
+ * The suggestion bar (Notion AI's): your `bar` under each block
+ * suggestion (Accept, Discard, and Try again when the app passed
+ * `onRetry`); its keys are the suggestions plugin's.
+ */
+export declare const createSuggestionBarPlugin: ({ bar }: SuggestionBarOptions) => Plugin;
 import { type Snippet } from 'svelte';
 import type { Edytor } from '../../edytor.svelte.js';
 import type { SuggestionBarPayload } from './suggestionsPlugin.js';
-import type { SuggestionsLabels } from '../../labels.js';
 type $$ComponentProps = {
     edytor: Edytor;
-    bar?: Snippet<[SuggestionBarPayload]>;
-    labels: SuggestionsLabels;
+    bar: Snippet<[SuggestionBarPayload]>;
 };
 declare const SuggestionBars: import("svelte").Component<$$ComponentProps, {}, "">;
 type SuggestionBars = ReturnType<typeof SuggestionBars>;

package/dist/plugins/suggestions/suggestionsPlugin.d.ts

@@ -1,7 +1,6 @@
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 import type { Plugin } from '../../plugins.js';
 import type { Suggestion } from '../../session/suggestions.svelte.js';
-import { type PartialLabels, type SuggestionsLabels } from '../../labels.js';
 /** What a `bar` snippet receives: one block suggestion and its actions. */
 export type SuggestionBarPayload = {
     suggestion: Suggestion;
@@ -11,23 +10,16 @@ export type SuggestionBarPayload = {
     /** Ask for another answer (`onRetry`); `undefined` without one. */
     retry: (() => void) | undefined;
     readonly: boolean;
-    /** The words the built-in bar shows (the plugin's `labels`), for yours. */
-    labels: SuggestionsLabels;
+    /** The view's keys are a Mac's: Mod is ⌘ (name the Accept key with it). */
+    mac: boolean;
 };
-export type SuggestionsOptions = {
-    /** Replace the bar under each block suggestion; placement and keys stay the plugin's. */
-    bar?: Snippet<[SuggestionBarPayload]>;
-    /** The words the bar shows, over the English ones. */
-    labels?: PartialLabels<'suggestions'>;
+export type SuggestionBarOptions = {
+    /** The bar under each block suggestion and its words; its placement is the plugin's. */
+    bar: Snippet<[SuggestionBarPayload]>;
 };
-/** Recognize any suggestions plugin instance (the component's default yields to yours). */
-export declare const isSuggestionsPlugin: (plugin: Plugin) => boolean;
 /**
- * The default UI of `edytor.suggestions` (Notion AI's): a bar under each
- * block suggestion (Accept, Discard, and Try again when the app passed
- * `onRetry`), and keys for the latest one: Mod+Enter accepts, Escape
- * discards; Tab accepts an `end` suggestion at the caret.
+ * The keys of `edytor.suggestions` (Notion AI's), a default plugin: for the
+ * latest one, Mod+Enter accepts and Escape discards; Tab accepts an `end`
+ * suggestion at the caret. Its bar is `createSuggestionBarPlugin`'s.
  */
-export declare const createSuggestionsPlugin: (options?: SuggestionsOptions) => Plugin;
-/** The default suggestion UI. */
-export declare const suggestionsPlugin: Plugin;
+export declare const createSuggestionsPlugin: () => Plugin;

package/dist/plugins/suggestions/suggestionsPlugin.js

@@ -1,27 +1,22 @@
-import { mount, unmount } from 'svelte';
-import SuggestionBars from './SuggestionBars.svelte';
-import { labelsWith } from '../../labels.js';
-const suggestionPlugins = new WeakSet();
-/** Recognize any suggestions plugin instance (the component's default yields to yours). */
-export const isSuggestionsPlugin = (plugin) => suggestionPlugins.has(plugin);
+import { branded } from '../brand.js';
 /**
  * The `end` suggestion a Tab at the caret accepts: a collapsed caret in its
  * block, unless that block indents with Tab (a list-like kind or a list's item).
  */
 const endAtCaret = (edytor) => {
-    const { startBlock, isCollapsed } = edytor.selection.state;
+    const { startText } = edytor.selection.textRange();
+    const { isCollapsed } = edytor.selection.projection;
+    const startBlock = startText?.parent;
     if (!startBlock || !isCollapsed || startBlock.definition.continues || startBlock.list)
         return;
     return edytor.suggestions.at(startBlock.id).end.at(-1);
 };
 /**
- * The default UI of `edytor.suggestions` (Notion AI's): a bar under each
- * block suggestion (Accept, Discard, and Try again when the app passed
- * `onRetry`), and keys for the latest one: Mod+Enter accepts, Escape
- * discards; Tab accepts an `end` suggestion at the caret.
+ * The keys of `edytor.suggestions` (Notion AI's), a default plugin: for the
+ * latest one, Mod+Enter accepts and Escape discards; Tab accepts an `end`
+ * suggestion at the caret. Its bar is `createSuggestionBarPlugin`'s.
  */
-export const createSuggestionsPlugin = (options = {}) => {
-    const labels = labelsWith('suggestions', options.labels);
+export const createSuggestionsPlugin = () => {
     const plugin = (edytor) => ({
         hotkeys: {
             'mod+enter': ({ prevent }) => {
@@ -39,17 +34,7 @@ export const createSuggestionsPlugin = (options = {}) => {
                 if (suggestion)
                     prevent(() => suggestion.accept());
             }
-        },
-        onEdytorAttached: () => {
-            const bars = mount(SuggestionBars, {
-                target: edytor.overlay.layer,
-                props: { edytor, bar: options.bar, labels }
-            });
-            return () => void unmount(bars);
         }
     });
-    suggestionPlugins.add(plugin);
-    return plugin;
+    return branded('suggestions', plugin);
 };
-/** The default suggestion UI. */
-export const suggestionsPlugin = createSuggestionsPlugin();

package/dist/plugins/table/TableChrome.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { keepFocus } from '../chrome.js';
+	import { labelsOf, tableEnglish } from '../../labels.js';
 	import type { TableAddPayload, TableChrome, TableGripPayload } from './chrome.svelte.js';
 
 	/**
@@ -10,8 +11,8 @@
 	 * the drop line of a grip's drag, and a resize band on each column's
 	 * right edge. Over a table wider than its box, only what its box shows
 	 * (`table.overflow`). A grip, a menu and a `+` are the plugin's `grip`,
-	 * `menu` and `add` snippets when it has them: placed by the hosts here,
-	 * their keys and ARIA the controller's attachments, as this markup's.
+	 * `menu` and `add` snippets (none without them): placed by the hosts
+	 * here, their keys and ARIA the controller's attachments.
 	 */
 	let {
 		chrome,
@@ -25,80 +26,43 @@
 		add?: Snippet<[TableAddPayload]>;
 	} = $props();
 
+	const labels = $derived(labelsOf(chrome.edytor, 'table', tableEnglish));
 	const layout = $derived(chrome.layout);
-	const labels = $derived(chrome.labels);
-	const grips = $derived([chrome.rowGrip, chrome.columnGrip].filter((place) => place !== null));
-	const bars = $derived(chrome.bars);
+	const line = $derived(chrome.line);
 	const menuPlace = $derived(chrome.menuPlace);
-	/** The drop line of a grip's drag: between two rows (columns), where the drop would land. */
-	const line = $derived.by(() => {
-		const move = chrome.moving;
-		const gap = move?.gap ?? null;
-		if (!move || gap === null || !layout) return null;
-		if (move.kind === 'row') {
-			const row = layout.rows[gap];
-			const last = layout.rows[layout.rows.length - 1];
-			const y = row ? row.top : last ? last.top + last.height : null;
-			const { left, width } = chrome.span;
-			return y === null ? null : { kind: 'row', gap, left, top: y, width };
-		}
-		const column = layout.columns[gap];
-		const last = layout.columns[layout.columns.length - 1];
-		const x = column ? column.left : last ? last.left + last.width : null;
-		if (x === null || !chrome.inView(x)) return null;
-		return { kind: 'column', gap, left: x, top: layout.top, height: layout.height };
-	});
 
 	// The view turning readonly mid-drag drops the preview at once.
 	$effect(() => {
-		if (chrome.readonly) chrome.lock();
-	});
-
-	/** A grip's snippet payload. */
-	const gripPayload = (place: NonNullable<TableChrome['rowGrip']>): TableGripPayload => ({
-		kind: place.kind,
-		id: place.id,
-		index: place.index,
-		expanded: chrome.menu?.kind === place.kind,
-		dragging: chrome.moving?.kind === place.kind,
-		label: place.kind === 'row' ? labels.rowMenu : labels.columnMenu,
-		toggle: () => chrome.toggle(place.kind),
-		grip: chrome.gripOf(place.kind),
-		labels,
-		chrome
+		if (chrome.readonly) chrome.band.lock();
 	});
 
-	/** A `+`'s snippet payload. */
-	const addPayload = (kind: 'row' | 'column'): TableAddPayload => ({
-		kind,
-		label: kind === 'row' ? labels.addRow : labels.addColumn,
-		add: kind === 'row' ? chrome.addRow : chrome.addColumn,
-		labels
-	});
+	const px = (value: number | undefined) => (value === undefined ? undefined : `${value}px`);
 </script>
 
 <div
 	role="presentation"
 	data-edytor-table-chrome
-	data-selecting={chrome.selecting ? 'true' : undefined}
+	data-selecting={chrome.band.selecting ? 'true' : undefined}
 >
 	{#if chrome.shown && layout}
-		{#each grips as place (place.kind)}
+		{#each grip ? chrome.grips : [] as place (place.kind)}
 			<!-- Centered on where the grip stands: its flex host is a point. -->
 			<div
 				data-edytor-table-grip-host={place.kind}
-				style:left="{place.x}px"
-				style:top="{place.y}px"
+				style:left={px(place.x)}
+				style:top={px(place.y)}
 			>
 				{#if grip}
-					{@render grip(gripPayload(place))}
-				{:else}
-					<button
-						type="button"
-						data-edytor-table-grip={place.kind}
-						aria-label={place.kind === 'row' ? labels.rowMenu : labels.columnMenu}
-						{@attach chrome.gripOf(place.kind)}
-					></button>
+					{@render grip({
+						kind: place.kind,
+						id: place.id,
+						index: place.index,
+						expanded: chrome.menu?.kind === place.kind,
+						dragging: chrome.moving?.kind === place.kind,
+						toggle: () => chrome.toggle(place.kind),
+						grip: chrome.gripOf(place.kind),
+						chrome
+					})}
 				{/if}
 			</div>
 		{/each}
@@ -107,56 +71,27 @@
 				data-edytor-table-drop={line.kind}
 				data-gap={line.gap}
 				aria-hidden="true"
-				style:left="{line.kind === 'row' ? line.left : line.left - 2}px"
-				style:top="{line.kind === 'row' ? line.top - 2 : line.top}px"
-				style:width={line.kind === 'row' ? `${line.width}px` : undefined}
-				style:height={line.kind === 'column' ? `${line.height}px` : undefined}
+				style:left={px(line.left)}
+				style:top={px(line.top)}
+				style:width={px(line.width)}
+				style:height={px(line.height)}
 			></div>
 		{/if}
-		{#if bars.row}
+		{#each add ? chrome.bars : [] as bar (bar.kind)}
 			<div
-				data-edytor-table-add-host="row"
+				data-edytor-table-add-host={bar.kind}
 				role="presentation"
-				style:left="{bars.row.left}px"
-				style:top="{bars.row.top}px"
-				style:width="{bars.row.width}px"
+				style:left={px(bar.left)}
+				style:top={px(bar.top)}
+				style:width={px(bar.width)}
+				style:height={px(bar.height)}
 				onmousedown={keepFocus}
 			>
 				{#if add}
-					{@render add(addPayload('row'))}
-				{:else}
-					<button
-						type="button"
-						data-edytor-table-add="row"
-						aria-label={labels.addRow}
-						title={labels.addRow}
-						onclick={() => chrome.addRow()}
-					></button>
+					{@render add({ kind: bar.kind, add: () => chrome.add(bar.kind) })}
 				{/if}
 			</div>
-		{/if}
-		{#if bars.column}
-			<div
-				data-edytor-table-add-host="column"
-				role="presentation"
-				style:left="{bars.column.left}px"
-				style:top="{bars.column.top}px"
-				style:height="{bars.column.height}px"
-				onmousedown={keepFocus}
-			>
-				{#if add}
-					{@render add(addPayload('column'))}
-				{:else}
-					<button
-						type="button"
-						data-edytor-table-add="column"
-						aria-label={labels.addColumn}
-						title={labels.addColumn}
-						onclick={() => chrome.addColumn()}
-					></button>
-				{/if}
-			</div>
-		{/if}
+		{/each}
 		{#each layout.columns as column, index (column.id)}
 			{#if chrome.inView(column.left + column.width)}
 				<!-- A focusable separator is a widget (WAI-ARIA window splitter): its keys resize. -->
@@ -170,37 +105,18 @@
 					aria-valuenow={Math.round(column.width)}
 					aria-keyshortcuts="ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight"
 					data-dragging={chrome.drag?.column === index ? 'true' : undefined}
-					style:left="{column.left + column.width - 4}px"
-					style:top="{layout.top}px"
-					style:height="{layout.height}px"
-					onpointerdown={(event) => chrome.start(event, index)}
-					onmousedown={(event) => chrome.mousedown(event, index)}
+					style:left={px(column.left + column.width - 4)}
+					style:top={px(layout.top)}
+					style:height={px(layout.height)}
+					{@attach chrome.band.press((event) => chrome.start(event, index))}
 					onkeydown={(event) => chrome.key(event, index)}
 				></div>
 			{/if}
 		{/each}
 	{/if}
-	{#if chrome.menu && menuPlace}
-		<div data-edytor-table-menu-host style:left="{menuPlace.left}px" style:top="{menuPlace.top}px">
-			{#if menu}
-				{@render menu(chrome)}
-			{:else}
-				<div class="edytor-table-menu" {@attach chrome.popup} {@attach chrome.keys}>
-					{#each chrome.items as item (item.item.id)}
-						<button
-							type="button"
-							class="edytor-table-menu-row"
-							class:danger={item.danger}
-							{...item.option}
-							disabled={item.disabled}
-							data-testid={`table-menu-${item.item.id}`}
-							style:--table-menu-icon={item.icon}
-							onmousemove={item.select}
-							onclick={item.run}>{item.label}</button
-						>
-					{/each}
-				</div>
-			{/if}
+	{#if menu && chrome.menu && menuPlace}
+		<div data-edytor-table-menu-host style:left={px(menuPlace.left)} style:top={px(menuPlace.top)}>
+			{@render menu(chrome)}
 		</div>
 	{/if}
 </div>