edytor 1.0.0-rc.2 → 1.0.0

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,22 +1,43 @@
+<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 }>>({});
 
 	onMount(() =>
 		edytor.overlay.add((origin) => {
+			// No suggestion listed, no preview: nothing to find in the page (a long
+			// page would be searched every frame) and nothing to place.
+			if (!edytor.suggestions.list.length)
+				return Object.keys(places).length ? () => (places = {}) : undefined;
 			const next: typeof places = {};
 			for (const node of edytor.node?.querySelectorAll<HTMLElement>('[data-edytor-suggestion]') ??
 				[]) {
@@ -44,19 +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
+		readonly: edytor.readonly,
+		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}
@@ -65,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}
 
@@ -104,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 } from '../../labels.js';
 /** What a `bar` snippet receives: one block suggestion and its actions. */
 export type SuggestionBarPayload = {
     suggestion: Suggestion;
@@ -11,21 +10,16 @@ export type SuggestionBarPayload = {
     /** Ask for another answer (`onRetry`); `undefined` without one. */
     retry: (() => void) | undefined;
     readonly: boolean;
+    /** 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,153 +1,122 @@
 <script lang="ts">
-	import { iconOf } from '../icons.js';
-	import type { TableChrome } from './chrome.svelte.js';
+	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';
 
 	/**
 	 * The table's chrome in the overlay (`TableChrome`): the `+` under and
-	 * beside the hovered table, the grips of its hovered row and column, their
-	 * menus, and a resize band on each column's right edge.
+	 * beside the hovered table, the grips of its hovered row and column (drag
+	 * sources, `table.drag`, opening their menus on a click), their menus,
+	 * 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 (none without them): placed by the hosts
+	 * here, their keys and ARIA the controller's attachments.
 	 */
-	let { chrome }: { chrome: TableChrome } = $props();
+	let {
+		chrome,
+		grip,
+		menu,
+		add
+	}: {
+		chrome: TableChrome;
+		grip?: Snippet<[TableGripPayload]>;
+		menu?: Snippet<[TableChrome]>;
+		add?: Snippet<[TableAddPayload]>;
+	} = $props();
 
+	const labels = $derived(labelsOf(chrome.edytor, 'table', tableEnglish));
 	const layout = $derived(chrome.layout);
-	const labels = $derived(chrome.labels);
-	const hoveredRow = $derived(
-		layout?.rows.find(
-			(row) => row.id === (chrome.menu?.kind === 'row' ? chrome.menu.row : chrome.hovered?.row)
-		)
-	);
-	const hoveredColumn = $derived.by(() => {
-		const index =
-			chrome.menu?.kind === 'column' ? chrome.menu.column : (chrome.hovered?.column ?? null);
-		return index === null
-			? undefined
-			: layout?.columns[index] && { index, ...layout.columns[index] };
-	});
-	/** Where the open menu stands: under its grip. */
-	const menuAt = $derived.by(() => {
-		const menu = chrome.menu;
-		if (!menu || !layout) return null;
-		if (menu.kind === 'row') {
-			const row = layout.rows.find((r) => r.id === menu.row);
-			return row ? { left: layout.left - 9, top: row.top + Math.min(row.height, 28) } : null;
-		}
-		const column = layout.columns[menu.column];
-		return column ? { left: column.left + column.width / 2 - 12, top: layout.top + 10 } : null;
-	});
+	const line = $derived(chrome.line);
+	const menuPlace = $derived(chrome.menuPlace);
 
 	// The view turning readonly mid-drag drops the preview at once.
 	$effect(() => {
-		if (chrome.readonly) chrome.lock();
+		if (chrome.readonly) chrome.band.lock();
 	});
 
-	const onkeydown = (event: KeyboardEvent) => {
-		if (event.key !== 'Escape') return;
-		event.preventDefault();
-		event.stopPropagation();
-		chrome.close();
-	};
+	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}
-		{#if hoveredRow}
-			<button
-				type="button"
-				data-edytor-table-grip="row"
-				aria-label={labels.rowMenu}
-				aria-haspopup="menu"
-				aria-expanded={chrome.menu?.kind === 'row'}
-				style:left="{layout.left - 9}px"
-				style:top="{hoveredRow.top + hoveredRow.height / 2 - 12}px"
-				onmousedown={(event) => event.preventDefault()}
-				onclick={() => chrome.open({ kind: 'row', table: layout.table, row: hoveredRow.id })}
-			></button>
-		{/if}
-		{#if hoveredColumn}
-			<button
-				type="button"
-				data-edytor-table-grip="column"
-				aria-label={labels.columnMenu}
-				aria-haspopup="menu"
-				aria-expanded={chrome.menu?.kind === 'column'}
-				style:left="{hoveredColumn.left + hoveredColumn.width / 2 - 12}px"
-				style:top="{layout.top - 9}px"
-				onmousedown={(event) => event.preventDefault()}
-				onclick={() =>
-					chrome.open({ kind: 'column', table: layout.table, column: hoveredColumn.index })}
-			></button>
-		{/if}
-		<button
-			type="button"
-			data-edytor-table-add="row"
-			aria-label={labels.addRow}
-			title={labels.addRow}
-			style:left="{layout.left}px"
-			style:top="{layout.top + layout.height + 2}px"
-			style:width="{layout.width}px"
-			onmousedown={(event) => event.preventDefault()}
-			onclick={() => chrome.addRow()}
-		></button>
-		<button
-			type="button"
-			data-edytor-table-add="column"
-			aria-label={labels.addColumn}
-			title={labels.addColumn}
-			style:left="{layout.left + layout.width + 2}px"
-			style:top="{layout.top}px"
-			style:height="{layout.height}px"
-			onmousedown={(event) => event.preventDefault()}
-			onclick={() => chrome.addColumn()}
-		></button>
-		{#each layout.columns as column, index (column.id)}
-			<!-- A focusable separator is a widget (WAI-ARIA window splitter): its keys resize. -->
-			<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+		{#each grip ? chrome.grips : [] as place (place.kind)}
+			<!-- Centered on where the grip stands: its flex host is a point. -->
 			<div
-				data-edytor-table-resize={index}
-				role="separator"
-				tabindex="0"
-				aria-label={labels.resize}
-				aria-orientation="vertical"
-				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)}
-				onkeydown={(event) => chrome.key(event, index)}
+				data-edytor-table-grip-host={place.kind}
+				style:left={px(place.x)}
+				style:top={px(place.y)}
+			>
+				{#if grip}
+					{@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}
+		{#if line}
+			<div
+				data-edytor-table-drop={line.kind}
+				data-gap={line.gap}
+				aria-hidden="true"
+				style:left={px(line.left)}
+				style:top={px(line.top)}
+				style:width={px(line.width)}
+				style:height={px(line.height)}
 			></div>
+		{/if}
+		{#each add ? chrome.bars : [] as bar (bar.kind)}
+			<div
+				data-edytor-table-add-host={bar.kind}
+				role="presentation"
+				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({ kind: bar.kind, add: () => chrome.add(bar.kind) })}
+				{/if}
+			</div>
+		{/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. -->
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+				<div
+					data-edytor-table-resize={index}
+					role="separator"
+					tabindex="0"
+					aria-label={labels.resize}
+					aria-orientation="vertical"
+					aria-valuenow={Math.round(column.width)}
+					aria-keyshortcuts="ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight"
+					data-dragging={chrome.drag?.column === index ? 'true' : undefined}
+					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 && menuAt}
-		<div
-			class="edytor-table-menu"
-			role="menu"
-			tabindex="-1"
-			aria-label={chrome.menu.kind === 'row' ? labels.rowMenu : labels.columnMenu}
-			data-edytor-table-menu={chrome.menu.kind}
-			style:left="{menuAt.left}px"
-			style:top="{menuAt.top}px"
-			{onkeydown}
-		>
-			{#each chrome.rows as row (row.id)}
-				<button
-					type="button"
-					role="menuitem"
-					class="edytor-table-menu-row"
-					class:danger={row.danger}
-					disabled={!row.isEnabled()}
-					data-testid={`table-menu-${row.id}`}
-					style:--table-menu-icon={iconOf(row.icon)}
-					onmousedown={(event) => event.preventDefault()}
-					onclick={() => chrome.runRow(row)}>{row.label}</button
-				>
-			{/each}
+	{#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>

package/dist/plugins/table/TableChrome.svelte.d.ts

@@ -1,6 +1,10 @@
-import type { TableChrome } from './chrome.svelte.js';
+import type { Snippet } from 'svelte';
+import type { TableAddPayload, TableChrome, TableGripPayload } from './chrome.svelte.js';
 type $$ComponentProps = {
     chrome: TableChrome;
+    grip?: Snippet<[TableGripPayload]>;
+    menu?: Snippet<[TableChrome]>;
+    add?: Snippet<[TableAddPayload]>;
 };
 declare const TableChrome: import("svelte").Component<$$ComponentProps, {}, "">;
 type TableChrome = ReturnType<typeof TableChrome>;