edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/table/ops.d.ts

@@ -0,0 +1,47 @@
+import type { BlockId } from '../../crdt/placement/model.js';
+import type { DocumentOperations } from '../../crdt/operations.js';
+import type { Prepared } from '../../crdt/doc/types.js';
+/**
+ * Insert a row at `index` among `table`'s rows (`table.insert-row`): one
+ * empty cell per column, in one plan. `ids`: the new row.
+ */
+export declare const insertTableRow: (doc: Omit<DocumentOperations, "transact">, table: BlockId, index: number) => Prepared;
+/**
+ * Delete `rows` with their cells (`table.delete-row`): one plan; a table
+ * left with no row goes with them. `ids`: the rows.
+ */
+export declare const deleteTableRows: (doc: Omit<DocumentOperations, "transact">, rows: readonly BlockId[]) => Prepared;
+/**
+ * Insert a column at `index` among `table`'s listed columns
+ * (`table.insert-column`): a new id in `data.columns` and an empty cell
+ * for it in every row the table shows, in one plan. `width`: the new
+ * column's. `ids`: the table.
+ */
+export declare const insertTableColumn: (doc: Omit<DocumentOperations, "transact">, table: BlockId, index: number, width?: number) => Prepared;
+/**
+ * Delete a column (`table.delete-column`, by id or position among the
+ * grid's): it leaves `data.columns` (every entry naming it) and every
+ * shown cell of it is deleted, in one plan; a table left with no column
+ * goes with it. A column the table shows but no longer lists
+ * (`table.cell`) loses its cells. `ids`: the table.
+ */
+export declare const deleteTableColumn: (doc: Omit<DocumentOperations, "transact">, table: BlockId, column: string | number) => Prepared;
+/**
+ * Move a listed column to position `to` among them (`table.move-column`):
+ * one `order` patch of `data.columns`; no cell moves, every row shows its
+ * cells in the new order. `ids`: the table.
+ */
+export declare const moveTableColumn: (doc: Omit<DocumentOperations, "transact">, table: BlockId, column: string | number, to: number) => Prepared;
+/**
+ * Move rows to position `to` among their table's rows
+ * (`table.move-row`): a move. Refused unless every one is a row of the
+ * same table. `ids`: the rows.
+ */
+export declare const moveTableRows: (doc: Omit<DocumentOperations, "transact">, rows: readonly BlockId[], to: number) => Prepared;
+/**
+ * Create the cell `row` shows none of for `column` (an id, or a
+ * position among the grid's; `table.pad`: the first edit in a padded
+ * cell), empty, in one plan. A column the table shows but no longer
+ * lists (`table.cell`) is listed again, last. `ids`: the new cell.
+ */
+export declare const fillTableCell: (doc: Omit<DocumentOperations, "transact">, row: BlockId, column: string | number) => Prepared;

package/dist/plugins/table/ops.js

@@ -0,0 +1,233 @@
+/**
+ * The table ops (`table.*`), prepared over any document's public
+ * operations (a view's `edytor.document`, a headless document, a room's
+ * `transact`): each answers one plan composed of the document's own
+ * (`patchData`, `insertBlocks`, `deleteBlocks`, `moveBlocks`), which
+ * `document.apply(…)` writes (`document.apply(insertTableRow(document,
+ * 'T', 0))`), or a refusal. A table (a kind whose role says `table`) holds
+ * rows, a row cells, each cell names its column (`data.column`) and the
+ * table lists its columns in order (`data.columns`: `{ id, width? }`). The
+ * columns are data: inserting, deleting or moving one writes the table's
+ * `columns` array (and the cells of the rows it shows) in one plan, and
+ * the index shows every row's cells in that order (`table.columns`); a
+ * cell of no listed column does not display (`table.cell`), and the view
+ * pads a row that shows fewer cells than the table's columns
+ * (`table.pad`). Rows are blocks: a row moves among its table's rows by
+ * placement. No core code references these: the table plugin's commands
+ * dispatch them (`table.ts`).
+ */
+import { id as newId } from '../../utils.js';
+import { columnIds } from '../../crdt/tables.js';
+import { ref, refused } from '../../crdt/doc/plan.js';
+const REFUSED = refused(null);
+/**
+ * The table's columns and grid. A table listing none gets one column
+ * per column of its widest row, with ids from their positions (`c1`,
+ * `c2`, … as `tableBlock`'s), and `adopt` names each shown cell's column:
+ * two peers adopting one table write the same array items and the same
+ * cells' columns. The op then writes that array first, in its plan
+ * ({@link columnsParts}).
+ */
+const adopted = (doc, table) => {
+    const grid = doc.tableGrid(table);
+    const head = grid?.rows[0];
+    const sample = head?.cells.find((cell) => cell !== null);
+    if (!grid || !head || !sample)
+        return null;
+    const kinds = { row: doc.blockTypeOf(head.id), cell: doc.blockTypeOf(sample) };
+    const listed = doc.tableColumns(table);
+    if (listed !== null)
+        return {
+            columns: listed,
+            raw: columnIds(doc.blockDataOf(table)),
+            adopt: [],
+            first: [],
+            grid,
+            ...kinds
+        };
+    const columns = grid.columns.map((_, i) => ({ id: `c${i + 1}` }));
+    return {
+        columns,
+        raw: columns.map((col) => col.id),
+        adopt: grid.rows.flatMap((row) => row.cells.flatMap((cell, i) => cell === null
+            ? []
+            : [doc.prepare.patchData(cell, [{ path: ['column'], value: columns[i].id }])])),
+        first: [{ path: ['columns'], value: columns }],
+        grid: { columns: columns.map((col) => col.id), rows: grid.rows },
+        ...kinds
+    };
+};
+/** The adoption's plans, then `patches` of the table's `data.columns` (one plan, empty without any). */
+const columnsParts = (doc, table, a, patches = []) => [...a.adopt, doc.prepare.patchData(table, [...a.first, ...patches])];
+/** `parts` as one plan answering `ids` (a composed plan answers its parts'). */
+const planOf = (doc, ids, parts) => {
+    const p = doc.compose(...parts);
+    return 'writes' in p ? { ...p, ids } : p;
+};
+const cellSpec = (a, column) => ({
+    id: newId('b'),
+    type: a.cell,
+    data: { column }
+});
+/**
+ * The position among the grid's columns of `column`: a position, or an
+ * id (a table listing no columns names them by position until it adopts
+ * them); `-1` when none.
+ */
+const positionIn = (a, listed, column) => {
+    const at = typeof column === 'number' ? column : listed ? a.grid.columns.indexOf(column) : Number(column);
+    return Number.isInteger(at) && at >= 0 && at < a.grid.columns.length ? at : -1;
+};
+/**
+ * The stored entry (its index in `data.columns`) the listed column at
+ * position `at` is: the first naming it; the array's length past them.
+ */
+const rawIndex = (a, at) => {
+    const id = a.columns[at]?.id;
+    const i = id === undefined ? -1 : a.raw.indexOf(id);
+    return i < 0 ? a.raw.length : i;
+};
+/** Where among `row`'s children a new cell at grid position `at` goes. */
+const slotOf = (doc, cells, row, at) => Math.min(cells.slice(0, at).filter((x) => x !== null).length, doc.childrenIds(row).length);
+/**
+ * Insert a row at `index` among `table`'s rows (`table.insert-row`): one
+ * empty cell per column, in one plan. `ids`: the new row.
+ */
+export const insertTableRow = (doc, table, index) => {
+    table = ref(table);
+    const a = adopted(doc, table);
+    if (a === null)
+        return REFUSED;
+    const at = Math.max(0, Math.min(Math.trunc(index) || 0, doc.childrenIds(table).length));
+    const row = {
+        id: newId('b'),
+        type: a.row,
+        data: {},
+        children: a.columns.map((col) => cellSpec(a, col.id))
+    };
+    return planOf(doc, [row.id], [...columnsParts(doc, table, a), doc.prepare.insertBlocks({ parent: table, index: at }, [row])]);
+};
+/**
+ * Delete `rows` with their cells (`table.delete-row`): one plan; a table
+ * left with no row goes with them. `ids`: the rows.
+ */
+export const deleteTableRows = (doc, rows) => {
+    const ids = [...new Set(rows.map(ref))];
+    if (ids.length === 0 || ids.some((id) => !doc.isVisibleBlock(id) || !doc.isTableRow(id)))
+        return REFUSED;
+    return doc.prepare.deleteBlocks(ids);
+};
+/**
+ * Insert a column at `index` among `table`'s listed columns
+ * (`table.insert-column`): a new id in `data.columns` and an empty cell
+ * for it in every row the table shows, in one plan. `width`: the new
+ * column's. `ids`: the table.
+ */
+export const insertTableColumn = (doc, table, index, width) => {
+    table = ref(table);
+    const a = adopted(doc, table);
+    if (a === null)
+        return REFUSED;
+    const at = Math.max(0, Math.min(Math.trunc(index) || 0, a.columns.length));
+    const column = typeof width === 'number' && Number.isFinite(width) && width > 0
+        ? { id: newId('c'), width }
+        : { id: newId('c') };
+    return planOf(doc, [table], [
+        ...columnsParts(doc, table, a, [{ path: ['columns'], splice: [rawIndex(a, at), 0, column] }]),
+        ...a.grid.rows.map((row) => doc.prepare.insertBlocks({ parent: row.id, index: slotOf(doc, row.cells, row.id, at) }, [
+            cellSpec(a, column.id)
+        ]))
+    ]);
+};
+/**
+ * Delete a column (`table.delete-column`, by id or position among the
+ * grid's): it leaves `data.columns` (every entry naming it) and every
+ * shown cell of it is deleted, in one plan; a table left with no column
+ * goes with it. A column the table shows but no longer lists
+ * (`table.cell`) loses its cells. `ids`: the table.
+ */
+export const deleteTableColumn = (doc, table, column) => {
+    table = ref(table);
+    const listed = doc.tableColumns(table) !== null;
+    const a = adopted(doc, table);
+    if (a === null)
+        return REFUSED;
+    const at = positionIn(a, listed, column);
+    if (at < 0)
+        return REFUSED;
+    if (a.grid.columns.length === 1)
+        return doc.prepare.deleteBlock(table, { keepChildren: false });
+    const id = a.grid.columns[at];
+    const items = listed ? doc.dataItemIds(table, ['columns']) : [];
+    const gone = a.grid.rows.flatMap((row) => row.cells[at] ?? []);
+    return planOf(doc, [table], [
+        ...columnsParts(doc, table, a, listed
+            ? a.raw.flatMap((c, i) => c === id && items[i] ? [{ path: ['columns', items[i]] }] : [])
+            : [{ path: ['columns'], splice: [at, 1] }]),
+        doc.prepare.deleteBlocks(gone)
+    ]);
+};
+/**
+ * Move a listed column to position `to` among them (`table.move-column`):
+ * one `order` patch of `data.columns`; no cell moves, every row shows its
+ * cells in the new order. `ids`: the table.
+ */
+export const moveTableColumn = (doc, table, column, to) => {
+    table = ref(table);
+    const listed = doc.tableColumns(table) !== null;
+    const a = adopted(doc, table);
+    if (a === null)
+        return REFUSED;
+    const from = positionIn(a, listed, column);
+    const dest = Math.trunc(to);
+    if (from < 0 || from >= a.columns.length || !(dest >= 0 && dest < a.columns.length))
+        return REFUSED;
+    if (from === dest)
+        return planOf(doc, [table], columnsParts(doc, table, a));
+    const moved = a.columns.map((_, i) => i);
+    moved.splice(from, 1);
+    moved.splice(dest, 0, from);
+    // Over the stored entries: the listed ones in their new order, then the rest as they were.
+    const firsts = moved.map((i) => rawIndex(a, i));
+    const rest = a.raw.map((_, i) => i).filter((i) => !firsts.includes(i));
+    return planOf(doc, [table], columnsParts(doc, table, a, [{ path: ['columns'], order: [...firsts, ...rest] }]));
+};
+/**
+ * Move rows to position `to` among their table's rows
+ * (`table.move-row`): a move. Refused unless every one is a row of the
+ * same table. `ids`: the rows.
+ */
+export const moveTableRows = (doc, rows, to) => {
+    const ids = rows.map(ref);
+    const table = ids.length > 0 ? doc.parentOf(ids[0]) : null;
+    if (table === null || ids.some((id) => !doc.isTableRow(id) || doc.parentOf(id) !== table))
+        return REFUSED;
+    const at = Math.max(0, Math.min(Math.trunc(to) || 0, doc.childrenIds(table).length));
+    return doc.prepare.moveBlocks(ids, { parent: table, index: at });
+};
+/**
+ * Create the cell `row` shows none of for `column` (an id, or a
+ * position among the grid's; `table.pad`: the first edit in a padded
+ * cell), empty, in one plan. A column the table shows but no longer
+ * lists (`table.cell`) is listed again, last. `ids`: the new cell.
+ */
+export const fillTableCell = (doc, row, column) => {
+    row = ref(row);
+    if (!doc.isTableRow(row))
+        return REFUSED;
+    const table = doc.parentOf(row);
+    const listed = doc.tableColumns(table) !== null;
+    const a = adopted(doc, table);
+    if (a === null)
+        return REFUSED;
+    const at = positionIn(a, listed, column);
+    const shown = a.grid.rows.find((r) => r.id === row);
+    if (at < 0 || shown === undefined || shown.cells[at] !== null)
+        return REFUSED;
+    const id = a.grid.columns[at];
+    const spec = cellSpec(a, id);
+    return planOf(doc, [spec.id], [
+        ...columnsParts(doc, table, a, at < a.columns.length ? [] : [{ path: ['columns'], splice: [a.raw.length, 0, { id }] }]),
+        doc.prepare.insertBlocks({ parent: row, index: slotOf(doc, shown.cells, row, at) }, [spec])
+    ]);
+};

package/dist/plugins/table/table.css

@@ -1,17 +1,21 @@
 /*
- * Tables (`table.*` in the delete contract): Notion's simple table. The
- * table's grid is a CSS grid of its columns' widths (the template the kind
- * sets from `data.columns`); each row is a subgrid of it, its cells and its
+ * Tables (`table.*` in the delete contract): the table's grid is a CSS
+ * grid of its columns' widths (the template the kind sets from
+ * `data.columns`); each row is a subgrid of it, its cells and its
  * placeholders (`table.pad`) items of that row: a placeholder sits at its
- * column, the cells fill the others in order. Neither the grid nor a row is
- * a nesting step: their indent is zeroed. Wider than the page, the table
- * scrolls sideways.
+ * column, the cells fill the others in order. Neither the grid nor a cell
+ * is a nesting step: their indent is zeroed. Wider than the page, the
+ * table scrolls sideways. The look (borders, the cells' padding, a header
+ * cell's shade) is a theme's: `edytor/themes/notion.css`.
  */
-[data-edytor-block][data-edytor-table][data-edytor-type] {
-	padding-inline: 0;
-	--edytor-table-border-color: var(--edytor-table-border, rgb(233, 233, 231));
-}
 [data-edytor-table-scroll] {
+	/*
+	 * The table's place sizes the box, never its columns (`table.overflow`):
+	 * its content gives it no intrinsic width, so a page laying the editor out
+	 * by its content (a grid or flex item, a float) does not grow with a wide
+	 * table; the grid scrolls inside.
+	 */
+	contain: inline-size;
 	overflow-x: auto;
 	overflow-y: hidden;
 	/* Room for the `+` under it (the chrome's), so it never covers the next block. */
@@ -21,16 +25,11 @@
 	display: grid;
 	width: max-content;
 	padding-inline-start: 0;
-	border-top: 1px solid var(--edytor-table-border-color);
-	border-left: 1px solid var(--edytor-table-border-color);
 }
 [data-edytor-block][data-edytor-table-row][data-edytor-type] {
 	display: grid;
 	grid-column: 1 / -1;
 	grid-template-columns: subgrid;
-	margin: 0;
-	padding: 0;
-	border-radius: 0;
 }
 [data-edytor-table-row] > [data-edytor-children][data-edytor-table-cells] {
 	display: contents;
@@ -39,12 +38,6 @@
 [data-edytor-table-pad] {
 	grid-row: 1;
 	min-width: 0;
-	min-height: 33px;
-	margin: 0;
-	padding: 7px 9px;
-	border-radius: 0;
-	border-right: 1px solid var(--edytor-table-border-color);
-	border-bottom: 1px solid var(--edytor-table-border-color);
 	white-space: pre-wrap;
 	overflow-wrap: anywhere;
 	box-sizing: border-box;
@@ -54,18 +47,33 @@
 	user-select: none;
 	-webkit-user-select: none;
 }
-/* A header row's or header column's cells: Notion's gray, a little bolder. */
-[data-edytor-block][data-edytor-table-cell][data-edytor-table-header='true'] {
-	background: var(--edytor-table-header-background, rgb(247, 246, 243));
-	font-weight: 600;
-}
 [data-edytor-table-row] [data-edytor-table-cell] > [data-edytor-children] {
 	padding-inline-start: 0;
 }
 
 /* ── The chrome (overlay): grips, `+` bars, resize bands, menus ─────── */
-[data-edytor-table-chrome] button[data-edytor-table-grip],
-[data-edytor-table-chrome] button[data-edytor-table-add],
+/* Where a grip stands (a point: the app's grip centered on it), a `+`, a menu. */
+[data-edytor-table-chrome] [data-edytor-table-grip-host] {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 0;
+	height: 0;
+}
+[data-edytor-table-chrome] [data-edytor-table-add-host],
+[data-edytor-table-chrome] [data-edytor-table-menu-host] {
+	position: absolute;
+}
+[data-edytor-table-chrome] [data-edytor-table-menu-host] {
+	z-index: 1;
+}
+[data-edytor-table-chrome] [data-edytor-table-grip-host] > *,
+[data-edytor-table-chrome] [data-edytor-table-add-host] > * {
+	flex: none;
+	pointer-events: auto;
+	touch-action: none;
+}
 [data-edytor-table-chrome] [data-edytor-table-resize] {
 	position: absolute;
 	margin: 0;
@@ -74,56 +82,25 @@
 	pointer-events: auto;
 	touch-action: none;
 }
-[data-edytor-table-chrome][data-selecting='true'] > * {
+[data-edytor-table-chrome][data-selecting='true'] > *,
+[data-edytor-table-chrome][data-selecting='true'] [data-edytor-table-grip-host] > *,
+[data-edytor-table-chrome][data-selecting='true'] [data-edytor-table-add-host] > * {
 	pointer-events: none;
 }
-[data-edytor-table-chrome] button[data-edytor-table-grip] {
-	width: 18px;
-	height: 24px;
-	border-radius: 4px;
-	background: var(--edytor-table-grip-background, #fff);
-	box-shadow:
-		0 0 0 1px rgba(15, 15, 15, 0.1),
-		0 2px 4px rgba(15, 15, 15, 0.1);
-	color: rgba(55, 53, 47, 0.45);
-	cursor: grab;
-}
-[data-edytor-table-chrome] button[data-edytor-table-grip='column'] {
-	width: 24px;
-	height: 18px;
-}
-[data-edytor-table-chrome] button[data-edytor-table-grip]::before {
-	content: '⋮⋮';
-	font-size: 10px;
-	letter-spacing: -2px;
-	line-height: 24px;
-}
-[data-edytor-table-chrome] button[data-edytor-table-grip='column']::before {
-	content: '⋯';
-	font-size: 14px;
-	letter-spacing: 0;
-	line-height: 18px;
-}
-[data-edytor-table-chrome] button[data-edytor-table-add] {
-	height: 16px;
-	border-radius: 3px;
-	background: rgba(55, 53, 47, 0.04);
-	color: rgba(55, 53, 47, 0.45);
-	cursor: pointer;
-	opacity: 0;
-	transition: opacity 80ms ease;
-}
-[data-edytor-table-chrome] button[data-edytor-table-add='column'] {
-	width: 16px;
-}
-[data-edytor-table-chrome] button[data-edytor-table-add]::before {
-	content: '+';
-	font-size: 14px;
-}
-[data-edytor-table-chrome] button[data-edytor-table-add]:hover,
-[data-edytor-table-chrome] button[data-edytor-table-add]:focus-visible {
-	opacity: 1;
-	background: rgba(55, 53, 47, 0.08);
+/*
+ * A grip's drag (`table.drag`): the drop line between two rows or two
+ * columns, and a band's guide; placed here, painted by a theme
+ * (`edytor/themes/notion.css`: Notion's blue line).
+ */
+[data-edytor-table-chrome] [data-edytor-table-drop] {
+	position: absolute;
+	pointer-events: none;
+}
+[data-edytor-table-chrome] [data-edytor-table-drop='row'] {
+	height: 4px;
+}
+[data-edytor-table-chrome] [data-edytor-table-drop='column'] {
+	width: 4px;
 }
 [data-edytor-table-chrome] [data-edytor-table-resize] {
 	width: 8px;
@@ -136,67 +113,11 @@
 	bottom: 0;
 	left: 3px;
 	width: 2px;
-	background: var(--edytor-table-resize-color, rgba(35, 131, 226, 0.43));
-	opacity: 0;
 	pointer-events: none;
+	visibility: hidden;
 }
 [data-edytor-table-chrome] [data-edytor-table-resize]:hover::after,
 [data-edytor-table-chrome] [data-edytor-table-resize]:focus-visible::after,
 [data-edytor-table-chrome] [data-edytor-table-resize][data-dragging='true']::after {
-	opacity: 1;
-}
-[data-edytor-table-chrome] [data-edytor-table-resize]:focus-visible {
-	outline: none;
-}
-.edytor-table-menu {
-	position: absolute;
-	z-index: 1;
-	min-width: 180px;
-	padding: 6px;
-	border-radius: 10px;
-	background: var(--edytor-menu-background, #fff);
-	box-shadow:
-		0 0 0 1px rgba(15, 15, 15, 0.05),
-		0 3px 6px rgba(15, 15, 15, 0.1),
-		0 9px 24px rgba(15, 15, 15, 0.2);
-	pointer-events: auto;
-}
-.edytor-table-menu-row {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	width: 100%;
-	padding: 4px 8px;
-	border: none;
-	border-radius: 6px;
-	background: transparent;
-	color: rgb(55, 53, 47);
-	font: inherit;
-	font-size: 14px;
-	text-align: start;
-	cursor: pointer;
-}
-.edytor-table-menu-row::before {
-	content: '';
-	flex: none;
-	width: 20px;
-	height: 20px;
-	background: #383836;
-	-webkit-mask: var(--table-menu-icon) center / 20px no-repeat;
-	mask: var(--table-menu-icon) center / 20px no-repeat;
-}
-.edytor-table-menu-row:hover:not(:disabled),
-.edytor-table-menu-row:focus-visible {
-	background: rgba(33, 27, 23, 0.06);
-	outline: none;
-}
-.edytor-table-menu-row:disabled {
-	opacity: 0.4;
-	cursor: default;
-}
-.edytor-table-menu-row.danger:hover:not(:disabled) {
-	color: #cf5148;
-}
-.edytor-table-menu-row.danger:hover:not(:disabled)::before {
-	background: #cf5148;
+	visibility: visible;
 }

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

@@ -1,15 +1,16 @@
 /**
- * The table plugin's commands and reads over the document's table ops
- * (`table.*` in the delete contract): each command is one dispatched plan
+ * The table plugin's commands and reads over its table ops (`ops.ts`,
+ * `table.*` in the delete contract): each command is one dispatched plan
  * (hooks see it by its name: `insertTableRow`, `deleteTableRows`,
  * `insertTableColumn`, `deleteTableColumn`, `moveTableColumn`,
  * `moveTableRows`, `fillTableCell`), its own undo step, refused in a
  * readonly view. The grid is the document's (`facade.tableGrid`): a padded
  * cell is `null` there, and the first edit in it creates it.
  */
+import type { Snippet } from 'svelte';
 import type { Block } from '../../block/block.svelte.js';
+import type { TableAddPayload, TableChrome, TableGripPayload } from './chrome.svelte.js';
 import type { Edytor } from '../../edytor.svelte.js';
-import type { PartialLabels } from '../../labels.js';
 export type TablePluginOptions = {
     /** The rows a new table has (default 3). */
     rows?: number;
@@ -19,10 +20,26 @@ export type TablePluginOptions = {
     columnWidth?: number;
     /** The narrowest a column may be resized to, in pixels (default 48). */
     minColumnWidth?: number;
-    /** The words the table's command and controls say, over the English ones. */
-    labels?: PartialLabels<'table'>;
-    /** The slash menu's keywords of the table command (`block.table`), which replace its own. */
-    keywords?: Partial<Record<string, string[]>>;
+    /**
+     * A row's or a column's grip: it renders centered where the grip stands
+     * (left of the hovered row, above the hovered column; without it, no
+     * grip). Put
+     * `{@attach payload.grip}` on its element: the drag, the click that
+     * opens its menu, its keys and its ARIA.
+     */
+    grip?: Snippet<[TableGripPayload]>;
+    /**
+     * A grip's menu: it renders under its grip while `chrome.menu` is set
+     * (without it, nothing shows). Put `{@attach chrome.popup}` and
+     * `{@attach chrome.keys}` on its element and `{@attach item.option}` on
+     * each row of `chrome.items` (its highlight from `item.selected`).
+     */
+    menu?: Snippet<[TableChrome]>;
+    /**
+     * The `+` under the table (a row) and beside it (a column): it renders
+     * along that edge (without it, no `+`).
+     */
+    add?: Snippet<[TableAddPayload]>;
 };
 /** A table's grid as the document shows it (`facade.tableGrid`). */
 export type TableGrid = {
@@ -71,6 +88,8 @@ export declare const moveRows: (table: Block, rows: readonly Block[], to: number
 export declare const fillCell: (table: Block, row: string, column: string | number) => Block | null;
 /** Toggle `flag` (`headerRow` or `headerColumn`) of `table`'s data (`table.header`). */
 export declare const toggleHeader: (table: Block, flag: "headerRow" | "headerColumn") => void;
+/** A label key as a row id: `insertRowAbove` → `insert-row-above`. */
+export declare const kebab: (key: string) => string;
 /** A cell's width as set, else `fallback`: `data.columns[i].width`. */
 export declare const widthOf: (column: unknown, fallback: number) => number;
 /**