edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/blockMenu/BlockMenuController.svelte.js

@@ -1,8 +1,13 @@
+import { blockSelection } from '../../session/selection.js';
 import { convertBlocks, convertedBlocks, convertibleKinds, convertToKind, matchesQuery, rowOf, turnCommands } from '../../kinds.js';
 import { deleteSelectedBlocks, getSelectedBlocksInDocumentOrder, liftLayouts, outermost, shownText } from '../../selection/replaceSelection.js';
 import { selectedMembers } from '../../selection/visibility.js';
-import { labelsWith } from '../../labels.js';
+import { blockMenuEnglish, labelsOf } from '../../labels.js';
 import { BLOCK_COLORS, colorable, setBlockColor } from '../../block/colors.js';
+import { attribute, identify, keepFocus } from '../chrome.js';
+import { holdKeys, listPopup, optionAttachment, stepRow } from '../list.svelte.js';
+import { listen } from '../../utils/listen.js';
+import { takeKeys } from '../../events/onFocus.js';
 /** The Color flyout's rows in `labels`: the text colours, then the backgrounds, each from the default. */
 const colorRows = (labels) => ['color', 'background'].flatMap((field) => [null, ...BLOCK_COLORS].map((value) => {
     const name = labels.colors[value ?? 'default'] ?? value ?? 'default';
@@ -26,18 +31,18 @@ export const colorQueryRow = (row) => ({
  * listed once a query names them (`searchOnly`): each paints the caret's
  * block, as the block menu's Color does (`setBlockColor`).
  */
-export const colorCommands = (edytor, labels) => colorRows(labels).map((row) => ({
+export const colorCommands = (edytor) => colorRows(labelsOf(edytor, 'blockMenu', blockMenuEnglish)).map((row) => ({
     id: row.id,
     ...colorQueryRow(row),
     icon: 'A',
     group: 'Color',
     searchOnly: true,
     isEnabled: (view = edytor) => {
-        const block = view.selection.state.startBlock;
+        const block = view.selection.textRange().startText?.parent;
         return Boolean(block && colorable(block));
     },
     run: () => {
-        const block = edytor.selection.state.startBlock;
+        const block = edytor.selection.textRange().startText?.parent;
         if (!block || !colorable(block))
             return false;
         if (setBlockColor(edytor, [block], row.field, row.value))
@@ -60,20 +65,25 @@ export class BlockMenuController {
     blocks = $state([]);
     anchor = null;
     query = $state('');
-    selectedIndex = $state(0);
+    /** The keyboard's row. */
+    index = $state(0);
     /** The open flyout: the kinds (`turn`), the colours (`color`), or none. */
     flyout = $state(false);
     /** The keyboard's row in the open flyout. */
     flyoutIndex = $state(0);
-    /** The words the menu shows (the plugin's `labels`): read them in a custom `menu`. */
-    labels;
-    /** The Color flyout's rows, in `labels`. */
+    /** The actions' words: the view's `blockMenu` labels. */
+    #labels;
+    /** The Color flyout's rows, in those words. */
     #colors;
     constructor(edytor, options = {}) {
         this.edytor = edytor;
         this.options = options;
-        this.labels = labelsWith('blockMenu', options.labels);
-        this.#colors = colorRows(this.labels);
+        this.#labels = labelsOf(edytor, 'blockMenu', blockMenuEnglish);
+        this.#colors = colorRows(this.#labels);
+        this.popup = listPopup(edytor, 'block-menu', 'menu', () => {
+            const { block } = this;
+            return block && { opener: { block: block.id, control: 'grip' } };
+        });
     }
     get isOpen() {
         return this.block !== null;
@@ -91,8 +101,106 @@ export class BlockMenuController {
     }
     /** A row's element id (page-unique; a flyout's with `flyout`), for `aria-activedescendant`. */
     rowId = (row, flyout = false) => this.edytor.popups.idOf(`block-menu-${flyout ? 'flyout-' : ''}${'field' in row ? 'color-' : 'value' in row ? 'kind-' : ''}${row.id}`);
-    /** Publish the open menu to the view's root (`edytor.popups`), or withdraw it with `null`. */
-    publish = (popup) => this.edytor.popups.set('block-menu', popup);
+    /**
+     * The menu element (`{@attach controller.popup}`, the one with the rows):
+     * it takes the menu's id, its `menu` role and name unless it has its
+     * own, keeps the focus where it is on a press (a field takes its own),
+     * and is published to the view's root (`edytor.popups`) while it is in
+     * the page, the grip that opened it told so.
+     */
+    popup;
+    /**
+     * An open flyout (`{@attach controller.flyoutMenu}`, named by your
+     * markup): its id, `menu` role, the overlay's placement beside the menu,
+     * and presses that keep the focus.
+     */
+    flyoutMenu = (node) => {
+        identify(node, this.flyoutId, 'menu');
+        node.setAttribute('data-edytor-block-menu-flyout', '');
+        return listen(node, 'mousedown', keepFocus);
+    };
+    /**
+     * The element that holds the keyboard (`{@attach controller.keys}`: the
+     * search field): focused when it mounts, it takes every key of the menu
+     * (the arrows, Home and End walk the rows, → opens a row's flyout and ←
+     * closes it, Enter runs the row, Delete removes the blocks while the
+     * query is empty, Escape closes the flyout, then the menu), and names
+     * the open menu and its highlighted row (`aria-controls`,
+     * `aria-activedescendant`, once that row is in the page).
+     */
+    keys = (node) => {
+        $effect(() => attribute(node, 'aria-controls', this.flyout ? this.flyoutId : this.menuId));
+        return holdKeys(node, this.#keydown, () => {
+            const flyout = Boolean(this.flyout);
+            const row = flyout ? this.flyoutRows[this.flyoutIndex] : this.rows[this.index];
+            return row && this.rowId(row, flyout);
+        });
+    };
+    /**
+     * The attachment of the row at `index` (of the open flyout's rows with
+     * `flyout`): `{@attach controller.option(index)}` on its element.
+     * Its id, its role (`menuitem`, a switch's `menuitemcheckbox`, a colour's
+     * `menuitemradio` with its ✓ as `aria-checked`, a flyout's opener with
+     * `aria-haspopup` and `aria-expanded`); the keyboard's row scrolls into
+     * view. Its look is the markup's (`index`, `flyoutIndex`).
+     */
+    option = (index, flyout = false) => {
+        const row = (flyout ? this.flyoutRows : this.rows)[index];
+        // Only an action has `checked` and `submenu`, only a colour `field`.
+        const { checked, submenu } = (row ?? {});
+        const color = row && 'field' in row;
+        const on = color ? this.isCurrentColor(row) : checked;
+        return optionAttachment(row
+            ? this.rowId(row, flyout)
+            : this.edytor.popups.idOf(`block-menu-${flyout ? 'flyout-' : ''}${index}`), color ? 'menuitemradio' : on === undefined ? 'menuitem' : 'menuitemcheckbox', (flyout ? this.flyoutIndex : this.index) === index, {
+            ...(on === undefined ? {} : { 'aria-checked': on }),
+            ...(submenu
+                ? { 'aria-haspopup': 'menu', 'aria-expanded': this.flyout === submenu }
+                : {})
+        });
+    };
+    /** The search field typed in: the rows match `query`, the first one highlighted, no flyout open. */
+    search(query) {
+        this.query = query;
+        this.index = 0;
+        this.flyout = false;
+    }
+    /** The menu's keys, on the element that holds the keyboard (`keys`). */
+    #keydown = (event) => {
+        if (event.defaultPrevented || event.isComposing)
+            return;
+        const { key } = event;
+        const { flyout, rows } = this;
+        const row = rows[this.index];
+        const submenu = row && 'submenu' in row ? row.submenu : undefined;
+        const to = stepRow(key, this.index, rows.length, { ends: true });
+        if (key === 'Escape') {
+            if (flyout)
+                this.flyout = false;
+            else
+                this.close();
+        }
+        else if (flyout && (key === 'ArrowDown' || key === 'ArrowUp'))
+            // In a flyout, the arrows walk its rows.
+            this.flyoutIndex = stepRow(key, this.flyoutIndex, this.flyoutRows.length);
+        else if (flyout && key === 'Enter')
+            this.run(this.flyoutRows[this.flyoutIndex]);
+        else if (key === 'Delete' && !this.query)
+            this.remove();
+        else if (to !== undefined) {
+            this.index = to;
+            this.flyout = false;
+        }
+        else if (key === 'ArrowRight' && submenu)
+            this.openFlyout(submenu);
+        else if (key === 'ArrowLeft' && flyout)
+            this.flyout = false;
+        else if (key === 'Enter')
+            this.run(row);
+        else
+            return;
+        event.preventDefault();
+    };
     /** What Delete and Turn into act on: `blocks`, a list or a code block with its subtree (`selectedMembers`). */
     get members() {
         return selectedMembers(this.edytor, this.blocks);
@@ -124,38 +232,34 @@ export class BlockMenuController {
         return rowOf(this.edytor, this.block);
     }
     get actions() {
-        const { block, blocks } = this;
+        const { block, blocks, edytor } = this;
+        const labels = this.#labels;
         if (!block)
             return [];
-        const canMove = (direction) => () => this.edytor.canMoveBlocks({ blocks: outermost(blocks), direction });
-        const { labels } = this;
-        const [mod, shift] = this.edytor.keymap.isMac
-            ? ['⌘', '⇧']
-            : [`${labels.ctrl}+`, `${labels.shift}+`];
+        const [mod, shift] = edytor.keymap.isMac ? ['⌘', '⇧'] : [`${labels.ctrl}+`, `${labels.shift}+`];
+        /** An action row, its icon named by its id. */
+        const action = (id, label, more) => ({
+            id,
+            label,
+            icon: `action.${id}`,
+            ...more
+        });
+        const move = (direction, label, arrow) => action(direction, label, {
+            hint: `${mod}${shift}${arrow}`,
+            isEnabled: () => edytor.canMove({ blocks: outermost(blocks), direction }),
+            run: () => this.move(direction)
+        });
         const all = [
-            {
-                id: 'turn',
-                label: labels.turnInto,
-                icon: 'action.turn',
+            action('turn', labels.turnInto, {
                 submenu: 'turn',
                 isEnabled: () => convertedBlocks(this.members).length > 0
-            },
-            {
-                id: 'color',
-                label: labels.color,
-                icon: 'action.color',
+            }),
+            action('color', labels.color, {
                 submenu: 'color',
                 isEnabled: () => this.colorable.length > 0
-            },
+            }),
             ...(this.options.linkTo && this.linked
-                ? [
-                    {
-                        id: 'link',
-                        label: labels.copyLink,
-                        icon: 'action.link',
-                        run: () => this.copyLink()
-                    }
-                ]
+                ? [action('link', labels.copyLink, { run: () => this.copyLink() })]
                 : []),
             // The kind's own rows, on its block alone (a table's rows and switches). A
             // switch keeps the menu open; any other row closes it, the caret its
@@ -173,37 +277,17 @@ export class BlockMenuController {
                         : row.run
                 }))
                 : []),
-            {
-                id: 'duplicate',
-                label: labels.duplicate,
-                icon: 'action.duplicate',
+            action('duplicate', labels.duplicate, {
                 hint: `${mod}D`,
-                run: () => (blocks.length > 1 ? this.duplicateAll(blocks) : this.duplicate(block))
-            },
-            {
-                id: 'up',
-                label: labels.moveUp,
-                icon: 'action.up',
-                hint: `${mod}${shift}↑`,
-                isEnabled: canMove('up'),
-                run: () => this.move('up')
-            },
-            {
-                id: 'down',
-                label: labels.moveDown,
-                icon: 'action.down',
-                hint: `${mod}${shift}↓`,
-                isEnabled: canMove('down'),
-                run: () => this.move('down')
-            },
-            {
-                id: 'delete',
-                label: labels.delete,
-                icon: 'action.delete',
+                run: () => this.duplicate(blocks, blocks.length > 1)
+            }),
+            move('up', labels.moveUp, '↑'),
+            move('down', labels.moveDown, '↓'),
+            action('delete', labels.delete, {
                 hint: labels.deleteKey,
                 danger: true,
                 run: () => this.remove()
-            }
+            })
         ];
         return all.filter((action) => matchesQuery(action, this.query) && action.isEnabled?.() !== false);
     }
@@ -211,12 +295,13 @@ export class BlockMenuController {
      * With a query, the kinds it names join the list (Notion's "Turn into"
      * results), matched as the slash menu matches them (`matchesQuery`).
      */
-    get matchingKinds() {
+    get #matchingKinds() {
         if (!this.query.trim())
             return [];
-        if (!convertedBlocks(this.members).length)
-            return turnCommands(this.edytor, this.blocks).filter((kind) => matchesQuery(kind, this.query));
-        return this.kinds.filter((kind) => matchesQuery(kind, this.query));
+        const kinds = convertedBlocks(this.members).length
+            ? this.kinds
+            : turnCommands(this.edytor, this.blocks);
+        return kinds.filter((kind) => matchesQuery(kind, this.query));
     }
     /**
      * With a query, the colours it names join the list after the kinds
@@ -230,7 +315,7 @@ export class BlockMenuController {
     }
     /** Every keyboard row: actions, then the matching kinds, then the matching colours. */
     get rows() {
-        return [...this.actions, ...this.matchingKinds, ...this.matchingColors];
+        return [...this.actions, ...this.#matchingKinds, ...this.matchingColors];
     }
     open(block, anchor) {
         const selected = getSelectedBlocksInDocumentOrder(this.edytor);
@@ -238,7 +323,7 @@ export class BlockMenuController {
         this.block = block;
         this.anchor = anchor;
         this.query = '';
-        this.selectedIndex = 0;
+        this.index = 0;
         this.flyout = false;
         this.flyoutIndex = 0;
     }
@@ -254,7 +339,7 @@ export class BlockMenuController {
     move(direction) {
         if (!this.blocks.length)
             return;
-        this.edytor.moveBlocks({ blocks: outermost(this.blocks), direction });
+        this.edytor.move({ blocks: outermost(this.blocks), direction });
         this.close();
     }
     /**
@@ -290,26 +375,24 @@ export class BlockMenuController {
         setBlockColor(this.edytor, painted, row.field, row.value);
         const live = blocks.flatMap((block) => this.edytor.idToBlock.get(block.id) ?? []);
         if (live.length)
-            this.edytor.selection.selectBlocks(...live);
+            this.edytor.selection.select(blockSelection(live.map((block) => block.id)));
         this.focus();
     }
-    duplicate(block) {
-        const copy = block.duplicateBlock();
-        this.close(false);
-        this.caret(copy ?? block);
-    }
     /**
-     * Duplicate several blocks as one undo step, each copy after its block (a
-     * block inside another of them is copied with it; a vetoed one is skipped,
-     * `dispatcher.each`); the copies are selected.
+     * Duplicate `blocks` as one undo step, each copy after its block (a
+     * block inside another of them is copied with it; a vetoed one is
+     * skipped, `dispatcher.each`); the copies are selected (`select`), else
+     * the first copy takes the caret (refused: its block keeps it).
      */
-    duplicateAll(blocks) {
+    duplicate(blocks, select) {
         const copies = this.edytor.dispatcher
-            .each('insertBlock', outermost(blocks), (block) => block.duplicateBlock())
-            .filter((copy) => copy != null);
+            .each('duplicateBlock', outermost(blocks), (block) => this.edytor.duplicateBlock(block.id))
+            .flatMap((copy) => (copy?.status === 'applied' ? copy.ids : []));
         this.close(false);
-        if (copies.length)
-            this.edytor.selection.selectBlocks(...copies);
+        if (!select)
+            this.caret(this.edytor.idToBlock.get(copies[0] ?? '') ?? blocks[0]);
+        else if (copies.length)
+            this.edytor.selection.select(blockSelection(copies));
     }
     /**
      * Delete the open blocks' `members` (a list with its items) as the
@@ -343,30 +426,23 @@ export class BlockMenuController {
             await navigator.clipboard?.writeText(options.linkTo(linked));
         this.close();
     }
-    /** Run the keyboard row (or open its flyout). */
-    runSelected() {
-        const row = this.rows[this.selectedIndex];
+    /**
+     * Run a row of the menu or of its open flyout (a click; Enter runs the
+     * keyboard's): paint a colour, convert to a kind, open an action's
+     * flyout or run it.
+     */
+    run(row) {
         if (!row)
             return;
         if ('field' in row)
-            return this.paint(row);
-        if ('value' in row)
-            return this.turnInto(row);
-        if (row.submenu)
+            this.paint(row);
+        else if ('value' in row)
+            this.turnInto(row);
+        else if (row.submenu)
             this.openFlyout(row.submenu);
         else
             row.run?.();
     }
-    /** Run the open flyout's keyboard row: convert to its kind, or paint its colour. */
-    runFlyout() {
-        const row = this.flyoutRows[this.flyoutIndex];
-        if (!row)
-            return;
-        if ('field' in row)
-            this.paint(row);
-        else
-            this.turnInto(row);
-    }
     /**
      * Open a flyout on its first row (keyboard or mouse): the "Turn into"
      * kinds (default) or the colours; that flyout already open stays as it
@@ -382,7 +458,7 @@ export class BlockMenuController {
     restore(blocks) {
         const live = blocks.flatMap((block) => this.edytor.idToBlock.get(block.id) ?? []);
         if (live.length > 1) {
-            this.edytor.selection.selectBlocks(...live);
+            this.edytor.selection.select(blockSelection(live.map((block) => block.id)));
             this.focus();
         }
         else if (live[0]?.node?.isConnected)
@@ -399,12 +475,11 @@ export class BlockMenuController {
         if (text || !block?.isInTree)
             this.edytor.dispatcher.caret(text, 0);
         else
-            this.edytor.selection.selectBlocks(block);
+            this.edytor.selection.select(blockSelection([block.id]));
         this.focus();
     }
     /** Back to the editor: its own focus, not a user gesture (as its selection writes). */
     focus() {
-        this.edytor.expectInternalFocus();
-        this.edytor.node?.focus({ preventScroll: true });
+        takeKeys(this.edytor);
     }
 }

package/dist/plugins/blockMenu/blockMenuPlugin.d.ts

@@ -1,12 +1,10 @@
 import type { Plugin } from '../../plugins.js';
 import { type BlockMenuOptions } from './BlockMenuController.svelte.js';
 /**
- * Notion's block menu: a handle click (without an `onActivate` of your own)
+ * Notion's block menu: a handle click
  * opens it beside the handle — search, Turn into, Color, Duplicate, Move,
  * Delete, and Copy link when `linkTo` is given. Also binds Mod+D (duplicate
  * the selected blocks, or the caret's block), and adds the colours to the
  * slash menu by name (`/red`: "Red text", "Red background").
  */
 export declare const createBlockMenuPlugin: (options?: BlockMenuOptions) => Plugin;
-/** The block menu without a block link. */
-export declare const blockMenuPlugin: Plugin;

package/dist/plugins/blockMenu/blockMenuPlugin.js

@@ -1,10 +1,8 @@
-import { BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT } from '../blockHandles/BlockHandleController.svelte.js';
-import { onPress } from '../../events/onFocus.js';
+import { handleMenuEvents, mountChrome } from '../chrome.js';
 import { getSelectedBlocksInDocumentOrder } from '../../selection/replaceSelection.js';
-import BlockMenu from './BlockMenu.svelte';
 import { BlockMenuController, colorCommands } from './BlockMenuController.svelte.js';
 /**
- * Notion's block menu: a handle click (without an `onActivate` of your own)
+ * Notion's block menu: a handle click
  * opens it beside the handle — search, Turn into, Color, Duplicate, Move,
  * Delete, and Copy link when `linkTo` is given. Also binds Mod+D (duplicate
  * the selected blocks, or the caret's block), and adds the colours to the
@@ -76,48 +74,33 @@ export const createBlockMenuPlugin = (options = {}) => (edytor) => {
     };
     return {
         // Colours by name in the slash menu (`/red`), as in Notion.
-        commands: colorCommands(edytor, controller.labels),
+        commands: colorCommands(edytor),
         hotkeys: {
             'mod+d': ({ prevent }) => {
                 if (edytor.readonly)
                     return;
                 const selected = getSelectedBlocksInDocumentOrder(edytor).filter((b) => b.movable);
                 if (selected.length)
-                    return prevent(() => controller.duplicateAll(selected));
-                const block = edytor.selection.state.startBlock;
+                    return prevent(() => controller.duplicate(selected, true));
+                const block = edytor.selection.textRange().startText?.parent;
                 if (block?.movable)
-                    prevent(() => controller.duplicate(block));
+                    prevent(() => controller.duplicate([block], false));
             }
         },
         onEdytorAttached: ({ node }) => {
-            const activate = (event) => {
+            const off = handleMenuEvents(edytor, node, (event) => {
                 // The menu takes the keyboard (its search field).
                 event.preventDefault();
-                const { block, anchor } = event.detail;
-                controller.open(block, anchor);
+                controller.open(event.detail.block, event.detail.anchor);
                 edytor.overlay.invalidate();
-            };
-            const outside = (event) => {
-                const target = event.target;
-                if (controller.isOpen &&
-                    !target?.closest?.('[data-edytor-block-menu-host], [data-edytor-block-handle-host]'))
-                    controller.close(false);
-            };
+            }, 
             // A `+` opens its own menu: this one closes.
-            const add = () => controller.close(false);
-            node.addEventListener(BLOCK_ACTIVATE_EVENT, activate);
-            node.addEventListener(BLOCK_ADD_EVENT, add);
-            // Every press, WebKit's lone `mousedown` after a drag too (`onPress`).
-            const offPress = onPress(edytor, node.ownerDocument, outside, true);
-            const unmount = edytor.overlay.mount(BlockMenu, { controller, menu: options.menu }, 'edytor-block-menu-host', 70, place);
+            close, '[data-edytor-block-menu-host], [data-edytor-block-handle-host]', () => controller.isOpen && close());
+            const unmount = mountChrome(edytor, options.menu, controller, () => controller.isOpen, { name: 'edytor-block-menu-host', zIndex: 70, measure: place }, close);
             return () => {
-                node.removeEventListener(BLOCK_ACTIVATE_EVENT, activate);
-                node.removeEventListener(BLOCK_ADD_EVENT, add);
-                offPress();
+                off();
                 unmount();
             };
         }
     };
 };
-/** The block menu without a block link. */
-export const blockMenuPlugin = createBlockMenuPlugin();

package/dist/plugins/brand.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from '../plugins.js';
+/**
+ * `plugin`, known as a `name` plugin: `<Edytor>`'s default plugin of that
+ * name yields to any instance listed (`brandOf`).
+ */
+export declare const branded: (name: string, plugin: Plugin) => Plugin;
+/** The name `plugin` was branded with, if any. */
+export declare const brandOf: (plugin: Plugin) => string | undefined;

package/dist/plugins/brand.js

@@ -0,0 +1,8 @@
+const brands = new WeakMap();
+/**
+ * `plugin`, known as a `name` plugin: `<Edytor>`'s default plugin of that
+ * name yields to any instance listed (`brandOf`).
+ */
+export const branded = (name, plugin) => (brands.set(plugin, name), plugin);
+/** The name `plugin` was branded with, if any. */
+export const brandOf = (plugin) => brands.get(plugin);

package/dist/plugins/chrome.d.ts

@@ -0,0 +1,79 @@
+/**
+ * What every chrome surface shares with the markup that renders it, the
+ * app's snippet: the one host (`mountChrome`), the row payload a controller
+ * builds, a row's attributes (`option(index)`), and the small DOM rules the
+ * controllers' attachments apply (a press that keeps the focus, an
+ * element given its id, role and name).
+ */
+import type { Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import type { Edytor } from '../edytor.svelte.js';
+import { type BlockActivation, type BlockAddition } from './blockHandles/BlockHandleController.svelte.js';
+/**
+ * Mount the app's `snippet` for a chrome surface in a fixed host of the
+ * overlay (`data-<name>`, placed by `measure`), rendered with `payload`
+ * while `shown` holds and closed (`close`) when the view turns readonly.
+ * Without a snippet the surface renders nothing (its controller still
+ * works): nothing is mounted. Answers the teardown.
+ */
+export declare const mountChrome: <T>(edytor: Edytor, snippet: Snippet<[T]> | undefined, payload: T, shown: () => unknown, place: {
+    name: string;
+    zIndex: number;
+    measure: (host: HTMLElement, origin: DOMRect) => (() => void) | void;
+}, close?: () => void) => () => void;
+/**
+ * One row of a chrome list a controller builds for the app's markup: the
+ * same shape in every menu (a table grip's, the code language list's).
+ */
+export type MenuItemPayload<T> = {
+    /** What the row stands for: a command, a trigger's row, a version. */
+    item: T;
+    /** The row's element id (page-unique): the keyboard's owner names the highlighted row by it. */
+    id: string;
+    /** It is the keyboard's row. */
+    selected: boolean;
+    /** Run it (pick the row). */
+    run: () => void;
+    /** Make it the keyboard's row (hover). */
+    select: () => void;
+    /**
+     * The row's attachment (`{@attach item.option}`): its `id`, `role`,
+     * `aria-selected` (or `aria-checked`) and `tabindex`, and the keyboard's
+     * row scrolled into view. Its look is yours, from `selected`.
+     */
+    option: Attachment<HTMLElement>;
+};
+/** An attribute's value as an attachment writes it: `undefined` or `null` removes it. */
+type AttributeValue = string | number | boolean | null | undefined;
+/**
+ * The attachment of an element the package needs something of (a row, a
+ * control inside a block): it writes `attributes` (see `write`) and
+ * listens for `on`'s events until it is torn down. Read in a template,
+ * a new attachment replaces the last one when what it reads changes: the
+ * attributes it no longer gives (`undefined`) are removed.
+ */
+export declare const attach: (attributes: Record<string, AttributeValue>, on?: { [K in keyof HTMLElementEventMap]?: (event: HTMLElementEventMap[K]) => void; }) => Attachment<HTMLElement>;
+/** A text field: it takes the focus a press gives it. */
+export declare const isField: (target: EventTarget | null) => boolean;
+/**
+ * A press on chrome keeps the focus where it is (the editor's caret, or the
+ * menu's field): every press but one on a field, which takes its own.
+ */
+export declare const keepFocus: (event: MouseEvent) => void;
+/** A press on a control inside a block keeps the editor's selection (and its focus). */
+export declare const keepSelection: (event: MouseEvent) => void;
+/** Give `node` the id the controller names it by (`aria-controls`), and the role it lacks. */
+export declare const identify: (node: HTMLElement, id: string, role?: string) => void;
+/** Set or remove (`undefined`) an attribute the keyboard's owner carries. */
+export declare const attribute: (node: HTMLElement, name: string, value: string | undefined) => void;
+/** Whether `node` may name a highlighted row (`aria-activedescendant`): a field, or an element with a role. */
+export declare const namesRows: (node: HTMLElement) => boolean;
+/**
+ * A handle menu's events on the editor `node` (the block menu, the `+`'s
+ * menu): a grip's activation (`BLOCK_ACTIVATE_EVENT`), a `+`'s offer
+ * (`BLOCK_ADD_EVENT`), and every press outside the elements `inside`
+ * matches (WebKit's lone `mousedown` after a drag too, `onPress`). Answers
+ * the teardown.
+ */
+export declare const handleMenuEvents: (edytor: Edytor, node: HTMLElement, activate: (event: CustomEvent<BlockActivation>) => void, add: (event: CustomEvent<BlockAddition>) => void, inside: string, outside: () => void) => () => void;
+export {};