edytor 2.0.0 → 4.0.0

package/dist/export/markdownWriter.js

@@ -0,0 +1,133 @@
+import { isTextPart } from '../block/contentRange.js';
+import { contentOf } from '../clipboard/serializeClipboardFragment.js';
+/** Characters markdown reads as syntax inside a line: escaped in exported text. */
+const MD_SPECIAL = /[\\`*_[\]~<]/g;
+/** A line start markdown reads as a block (a heading, a list item, a quote, a rule): escaped. */
+const MD_LINE_START = /^(\s*)(#{1,6}(?=\s|$)|[-+](?=\s)|\d+(?=[.)]\s)|>|=+\s*$|-{3,}\s*$)/;
+/** Text as markdown: its syntax characters escaped, a soft break a hard break (`\` + newline). */
+const escapeMarkdown = (text) => text.replace(MD_SPECIAL, (c) => `\\${c}`).replace(/\n/g, '\\\n');
+/** The delimiters a mark's value exports as, or none. */
+const delimitersOf = (mark, value) => typeof mark.markdown === 'function' ? mark.markdown(value) : mark.markdown;
+/** A code span's fence: one backtick more than the longest run inside it. */
+const codeFence = (text) => '`'.repeat(Math.max(0, ...[...text.matchAll(/`+/g)].map((m) => m[0].length)) + 1);
+/**
+ * Rich text as inline markdown. Marks open in their registration order
+ * reversed (the first registered innermost, as HTML wraps them), a mark
+ * spanning several runs opens once (`**a *b***`), a mark without a
+ * `markdown` form is left out, and a delimiter never sits on a space
+ * (`** x**` is no emphasis): the spaces move outside it.
+ */
+const inlineMarkdown = (content = [], kinds) => {
+    // A code span holds no markup: it opens last, innermost.
+    const order = [...kinds.marks.keys()]
+        .reverse()
+        .sort((a, b) => Number(a === 'code') - Number(b === 'code'));
+    /** The open marks, outermost first: name, value key and closing delimiter. */
+    const open = [];
+    let out = '';
+    const closeTo = (depth) => {
+        // A delimiter closes after the text's last non-space: trailing spaces move out.
+        const spaces = /[ \t]*$/.exec(out)[0];
+        out = out.slice(0, out.length - spaces.length);
+        while (open.length > depth)
+            out += open.pop().close;
+        out += spaces;
+    };
+    for (const part of content) {
+        if (!isTextPart(part)) {
+            closeTo(0);
+            const atom = kinds.inlineBlocks.get(part.type);
+            out += atom?.markdown?.(part.data) ?? escapeMarkdown(atom?.plain?.(part.data) ?? '');
+            continue;
+        }
+        const wanted = order
+            .map((name) => {
+            const mark = kinds.marks.get(name);
+            const value = part.marks?.[name];
+            const delimiters = value ? delimitersOf(mark, value) : undefined;
+            return delimiters && { name, key: JSON.stringify(value), delimiters };
+        })
+            .filter((m) => !!m);
+        // Keep the open marks this run still has, in order; close from the first it lacks.
+        let keep = 0;
+        while (keep < open.length &&
+            wanted.some((m) => m.name === open[keep].name && m.key === open[keep].key))
+            keep++;
+        // A mark opening inside an open code span would be literal: the span closes first.
+        const opening = wanted.some((m) => !open.slice(0, keep).some((o) => o.name === m.name));
+        const span = open.findIndex((m) => m.name === 'code');
+        if (opening && span !== -1 && span < keep)
+            keep = span;
+        closeTo(keep);
+        const code = wanted.some((m) => m.name === 'code');
+        const raw = part.text;
+        const lead = /^[ \t]*/.exec(raw)[0];
+        const body = raw.slice(lead.length);
+        out += lead;
+        if (!body)
+            continue;
+        for (const mark of wanted)
+            if (!open.some((m) => m.name === mark.name)) {
+                const [start, end] = mark.delimiters;
+                const fence = mark.name === 'code' ? codeFence(body) : '';
+                const pad = fence && /^`|`$/.test(body) ? ' ' : '';
+                out += fence ? fence + pad : start;
+                open.push({ name: mark.name, key: mark.key, close: fence ? pad + fence : end });
+            }
+        out += code ? body : escapeMarkdown(body);
+    }
+    closeTo(0);
+    return out;
+};
+/** Every line of `text` prefixed with `prefix` (an empty line with its trimmed form). */
+const indent = (text, prefix) => text
+    .split('\n')
+    .map((line) => (line ? prefix + line : prefix.trimEnd()))
+    .join('\n');
+/** A list item's markdown (`- `, `1. `, `- [ ] `): its block's first line starts one. */
+const LIST_LINE = /^(?:[-*+]|\d+[.)])\s/;
+/**
+ * Sibling blocks as markdown: a blank line between blocks, a single
+ * newline between items of one list (a tight list).
+ */
+const siblingsMarkdown = (blocks, kinds) => {
+    let out = '';
+    let previous = null;
+    let run = 0;
+    let type = null;
+    for (const block of blocks) {
+        run = block.type === type ? run + 1 : 1;
+        type = block.type;
+        const md = blockMarkdown(block, kinds, run);
+        if (!md)
+            continue;
+        if (previous !== null)
+            out += LIST_LINE.test(previous) && LIST_LINE.test(md) ? '\n' : '\n\n';
+        out += md;
+        previous = md;
+    }
+    return out;
+};
+/** A block and its subtree as markdown, by its kind's form. */
+const blockMarkdown = (block, kinds, index) => {
+    const kind = kinds.blocks.get(block.type);
+    const content = inlineMarkdown(block.content, kinds);
+    const children = siblingsMarkdown(block.children ?? [], kinds);
+    if (kind?.markdown) {
+        const context = {
+            index,
+            indent,
+            inline: (parts) => inlineMarkdown(parts, kinds)
+        };
+        return kind.markdown(block, content, children, context);
+    }
+    if (kind?.plain) {
+        const plain = kind.plain(block, contentOf(block.content, kinds, false), '');
+        return [plain && escapeMarkdown(plain), children].filter(Boolean).join('\n\n');
+    }
+    // A paragraph: its text, a leading block marker escaped (`\# not a heading`).
+    const text = content.replace(MD_LINE_START, (_, space, marker) => /^\d/.test(marker) ? `${space}${marker}\\` : `${space}\\${marker}`);
+    return [text, children].filter(Boolean).join('\n\n');
+};
+/** Blocks as markdown (`toMarkdown`), by each kind's, mark's and atom's `markdown` form. */
+export const blocksToMarkdown = (blocks, kinds) => siblingsMarkdown(blocks, kinds);

package/dist/export/mdx.d.ts

@@ -0,0 +1,15 @@
+/**
+ * MDX-lite tags as markdown (`toMarkdown`): a block written as
+ * `<Name a="x" n={1} on={true} />`, the tag `fromMarkdown` reads back.
+ */
+import type { SerializableContent } from '../utils/json.js';
+/**
+ * A component tag, for a kind's `markdown` form: `mdxComponent('Endpoint',
+ * block.data, content, children)`. Each data value that has a literal is an
+ * attribute (a string `"x"`, a number `{1}`, a boolean `{true}`); others
+ * (objects, arrays, `null`, a string holding a newline or both quotes) are
+ * left out. No text and no children: a self-closing tag. Text only: the
+ * text inside the tag on one line. Children: the tag on its own lines, the
+ * text first (a paragraph), then the children.
+ */
+export declare const mdxComponent: (name: string, data?: Record<string, SerializableContent> | undefined, content?: string, children?: string) => string;

package/dist/export/mdx.js

@@ -0,0 +1,33 @@
+const ATTRIBUTE = /^[A-Za-z_][\w:-]*$/;
+/** A data value as an attribute, or `null` when MDX-lite has no literal for it. */
+const attribute = (name, value) => {
+    if (!ATTRIBUTE.test(name))
+        return null;
+    if (typeof value === 'boolean' || (typeof value === 'number' && Number.isFinite(value)))
+        return `${name}={${value}}`;
+    if (typeof value !== 'string' || /\n/.test(value))
+        return null;
+    if (!value.includes('"'))
+        return `${name}="${value}"`;
+    return value.includes("'") ? null : `${name}='${value}'`;
+};
+/**
+ * A component tag, for a kind's `markdown` form: `mdxComponent('Endpoint',
+ * block.data, content, children)`. Each data value that has a literal is an
+ * attribute (a string `"x"`, a number `{1}`, a boolean `{true}`); others
+ * (objects, arrays, `null`, a string holding a newline or both quotes) are
+ * left out. No text and no children: a self-closing tag. Text only: the
+ * text inside the tag on one line. Children: the tag on its own lines, the
+ * text first (a paragraph), then the children.
+ */
+export const mdxComponent = (name, data = {}, content = '', children = '') => {
+    const attributes = Object.entries(data)
+        .map(([key, value]) => attribute(key, value))
+        .filter((part) => part !== null);
+    const open = `<${[name, ...attributes].join(' ')}`;
+    if (!content && !children)
+        return `${open} />`;
+    if (!children)
+        return `${open}>${content}</${name}>`;
+    return `${open}>\n${[content, children].filter(Boolean).join('\n\n')}\n</${name}>`;
+};

package/dist/index.d.ts

@@ -35,17 +35,17 @@ export { InlineBlock } from './block/inlineBlock.svelte.js';
 export { Text } from './text/text.svelte.js';
 export type { BlockMoveDirection, BlockMovePosition, BlockMoveRequest } from './session/moves.js';
 export type { HotKey, HotKeyCombination } from './session/keymap.js';
-export type { Plugin, KindPreset, KindMenuAction, EditorCommand, BlockDefinition, MarkDefinition, InlineBlockDefinition, BlockSnippetPayload, MarkSnippetPayload, InlineBlockSnippetPayload, Placeholder, PlaceholderView, ChangePayload, Commands, AfterOperationPayload, Prevent, InputRule, InputRuleContext, Trigger, TriggerContext, TextRuleContext } from './plugins.js';
+export type { Plugin, KindPreset, KindMenuAction, EditorCommand, BlockDefinition, MarkdownContext, MarkDefinition, InlineBlockDefinition, BlockSnippetPayload, MarkSnippetPayload, InlineBlockSnippetPayload, Placeholder, PlaceholderView, ChangePayload, Commands, AfterOperationPayload, Prevent, InputRule, InputRuleContext, Trigger, TriggerContext, TextRuleContext } from './plugins.js';
 export type { Caret } from './selection/selection.svelte.js';
 export { PreventionError, isPrevention } from './utils.js';
 export type { CommandResult } from './session/commands.js';
 export { convertToKind, turnCommands, wrapBlocks, wrappable, type KindRow } from './kinds.js';
 export { textToBlocks, type TextToBlocksOptions } from './clipboard/textBlocks.js';
 export type { Suggestion, Suggestions, SuggestionAt, SuggestionContent, SuggestionOptions, SuggestionRange, SuggestionStatus, SuggestionsAt, ResolvedAt } from './session/suggestions.svelte.js';
-export { createRichTextPlugin, richTextOperations, richTextPlaceholder, CALLOUT_ICONS, createCalloutIconsPlugin, type CalloutIconPicker, type CalloutIconsOptions, type RichTextPluginOptions, type TodoCheckboxPayload, type CalloutIconPayload, type EmptyBodyPayload, createArrowMovePlugin, createCodePlugin, CODE_LANGUAGES, loadCodeLanguage, type CodeLanguage, type CodePluginOptions, type CodeHeader, type LanguageMenu, type LanguageMenuItem, type LanguageRow, createMarkdownShortcutsPlugin, createMentionPlugin, type MentionItem, type MentionData, type MentionPluginOptions, createPageLinkPlugin, type PageLinkItem, type PageLinkData, type PageLinkPluginOptions, type TriggerMenuController, withRulesAndTriggers, BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT, type BlockActivation, type BlockAddition, createBlockHandlesPlugin, type BlockHandlesOptions, type BlockHandleSnippetPayload, type BlockHandleController, createSlashMenuPlugin, type SlashMenuOptions, type SlashMenuController, createToolbarPlugin, type ToolbarOptions, type ToolbarController, createBlockMenuPlugin, type BlockMenuOptions, type BlockMenuController, type BlockMenuAction, type BlockMenuColor, createSuggestionsPlugin, createSuggestionBarPlugin, type SuggestionBarOptions, type SuggestionBarPayload, createImagePlugin, type ImagePluginOptions, safeImageSrc, storableImageSrc, MAX_INLINE_IMAGE_BYTES, createColumnsPlugin, type ColumnsPluginOptions, createEmbedPlugin, EMBED_PROVIDERS, EMBED_SANDBOX, EMBED_ALLOW, embedSourceOf, type EmbedProvider, type EmbedPluginOptions, type EmbedFallbackPayload, createBookmarkPlugin, type BookmarkPluginOptions, type BookmarkPreview, type BookmarkCardPayload, createFilePlugin, type FilePluginOptions, type FileRowPayload, createVideoPlugin, type VideoPluginOptions, createAudioPlugin, type AudioPluginOptions, safeWebUrl, safeMediaSrc, type MediaKind, createMediaEmptyPlugin, type MediaEmptyOptions, createImageToolbarPlugin, type ImageToolbar, type ImageToolbarOptions, type MediaEmptyController, type MediaEmptyFailure, type UrlPasteController, type UrlPasteOffer, type UrlPasteOption, type ImageControls, type ImageBox, type MenuItemPayload, createFindPlugin, findController, findMatches, type FindPluginOptions, type FindController, type ReplaceMatches, type FindMatch, type FindOptions, createMarqueePlugin, type MarqueePluginOptions, type MarqueeBoxPayload, createCommentsPlugin, commentsController, type CommentsPluginOptions, type CommentCardPayload, type CommentsController, type CommentDraft, type CommentNotice, type CommentUser, type PlacedThread, createPagePlugin, type PagePluginOptions, type PageBlockLinkPayload, createTocPlugin, type TocPluginOptions, type TocHeadingLevel, type TocEntryPayload, type TocEmptyPayload, createTablePlugin, type TablePluginOptions, insertTableRow, deleteTableRows, insertTableColumn, deleteTableColumn, moveTableColumn, moveTableRows, fillTableCell, type TableChrome, type TableMenu, type TableMenuRow, type TableMenuItem, type TableGripPayload, type TableAddPayload, tableBlock, type TableBlockOptions, createEquationPlugin, KATEX_CDN, KATEX_VERSION, type EquationPluginOptions, type EquationData, type EquationEditor, type EquationErrorPayload, type EquationPlaceholderPayload, type EquationTarget, type KatexLike, type KatexLoader } from './plugins/index.js';
+export { createRichTextPlugin, richTextOperations, richTextPlaceholder, CALLOUT_ICONS, createCalloutIconsPlugin, type CalloutIconPicker, type CalloutIconsOptions, type RichTextPluginOptions, type TodoCheckboxPayload, type CalloutIconPayload, type EmptyBodyPayload, createArrowMovePlugin, createCodePlugin, CODE_LANGUAGES, loadCodeLanguage, type CodeLanguage, type CodePluginOptions, type CodeHeader, type LanguageMenu, type LanguageMenuItem, type LanguageRow, createMarkdownShortcutsPlugin, createMentionPlugin, type MentionItem, type MentionData, type MentionPluginOptions, createPageLinkPlugin, type PageLinkItem, type PageLinkData, type PageLinkPluginOptions, type TriggerMenuController, withRulesAndTriggers, BLOCK_ACTIVATE_EVENT, BLOCK_ADD_EVENT, type BlockActivation, type BlockAddition, createBlockHandlesPlugin, type BlockHandlesOptions, type BlockHandleSnippetPayload, type BlockHandleController, createSlashMenuPlugin, type SlashMenuOptions, type SlashMenuController, createToolbarPlugin, type ToolbarOptions, type ToolbarController, createBlockMenuPlugin, type BlockMenuOptions, type BlockMenuController, type BlockMenuAction, type BlockMenuColor, createSuggestionsPlugin, createSuggestionBarPlugin, type SuggestionBarOptions, type SuggestionBarPayload, createImagePlugin, type ImagePluginOptions, safeImageSrc, storableImageSrc, MAX_INLINE_IMAGE_BYTES, createColumnsPlugin, type ColumnsPluginOptions, createEmbedPlugin, EMBED_PROVIDERS, EMBED_SANDBOX, EMBED_ALLOW, embedSourceOf, type EmbedProvider, type EmbedPluginOptions, type EmbedFallbackPayload, createBookmarkPlugin, type BookmarkPluginOptions, type BookmarkPreview, type BookmarkCardPayload, createFilePlugin, type FilePluginOptions, type FileRowPayload, createVideoPlugin, type VideoPluginOptions, createAudioPlugin, type AudioPluginOptions, safeWebUrl, safeMediaSrc, type MediaKind, createMediaEmptyPlugin, type MediaEmptyOptions, createImageToolbarPlugin, type ImageToolbar, type ImageToolbarOptions, type MediaEmptyController, type MediaEmptyFailure, type UrlPasteController, type UrlPasteOffer, type UrlPasteOption, type ImageControls, type ImageBox, type ChromeAnchor, type MenuItemPayload, createFindPlugin, findController, findMatches, type FindPluginOptions, type FindController, type ReplaceMatches, type FindMatch, type FindOptions, createMarqueePlugin, type MarqueePluginOptions, type MarqueeBoxPayload, createCommentsPlugin, commentsController, type CommentsPluginOptions, type CommentCardPayload, type CommentsController, type CommentDraft, type CommentNotice, type CommentUser, type PlacedThread, createPagePlugin, type PagePluginOptions, type PageBlockLinkPayload, createTocPlugin, type TocPluginOptions, type TocHeadingLevel, type TocEntryPayload, type TocEmptyPayload, createTablePlugin, type TablePluginOptions, insertTableRow, deleteTableRows, insertTableColumn, deleteTableColumn, moveTableColumn, moveTableRows, fillTableCell, type TableChrome, type TableMenu, type TableMenuRow, type TableMenuItem, type TableGripPayload, type TableAddPayload, tableBlock, type TableBlockOptions, createEquationPlugin, KATEX_CDN, KATEX_VERSION, type EquationPluginOptions, type EquationData, type EquationEditor, type EquationErrorPayload, type EquationPlaceholderPayload, type EquationTarget, type KatexLike, type KatexLoader } from './plugins/index.js';
 export { BLOCK_COLORS, setBlockColor, type BlockColorField } from './block/colors.js';
 export { englishLabels, type Labels, type PartialLabels } from './labels.js';
-export { EdytorDocument, createDocument, loadDocument, attachDocument, defaultSemantics, semanticsOf, mergeSemantics, SemanticConflictError, DocumentNotReadyError, DocumentDestroyedError, SchemaMismatchError, UndecodableUpdateError, UnsupportedDocError, SyncRefusedError, type CreateDocumentOptions, type LoadDocumentOptions, type DocumentActor, type DocumentReadiness, type KindSemantics, type JSONDoc, type JSONBlock, type JSONText, type JSONInlineBlock, type OpResult, type Plan, type Prepared, type DocChange } from './crdt/index.js';
+export { EdytorDocument, createDocument, loadDocument, attachDocument, defaultSemantics, semanticsOf, mergeSemantics, SemanticConflictError, DocumentNotReadyError, DocumentDestroyedError, SchemaMismatchError, UndecodableUpdateError, SyncRefusedError, type CreateDocumentOptions, type LoadDocumentOptions, type DocumentActor, type DocumentReadiness, type KindSemantics, type JSONDoc, type JSONBlock, type JSONText, type JSONInlineBlock, type OpResult, type Plan, type Prepared, type DocChange } from './crdt/index.js';
 export { createIndexeddbSync, createWebsocketSync, clearDocument, prefetch, lastUpdated, documentSnapshot, DEFAULT_PRESENCE_THROTTLE, type EdytorSync, type EdytorSyncPayload, type IndexeddbSyncOptions, type WebsocketSync, type WebsocketSyncOptions, type PresenceOptions, type PresenceShare } from './collaboration/index.js';
 export { createCommentsClient, createMemoryCommentsClient, CommentRequestError, commentAnchors, type CommentDocument, type CommentFeed, type CommentResult, type CommentsClient, type CommentsClientOptions, type MemoryCommentsClient, type MemoryCommentsClientOptions, type CommentChange, type CommentRequest, type CommentRun, type CommentSnapshot, type CommentThread, type ThreadComment } from './collaboration/comments/index.js';
 export { VersionHistory, createHistoryClient, HistoryRequestError, versionDiff, type HistoryClient, type HistoryClientOptions, type HistoryRestoreResult, type HistoryUndoResult, type HistoryVersion, type VersionHistoryStatus, type VersionHistoryOptions, type VersionChange, type VersionDiff } from './collaboration/history/index.js';

package/dist/index.js

@@ -44,7 +44,7 @@ export { englishLabels } from './labels.js';
 // The application names of `edytor/crdt/edytor`: a Svelte app builds,
 // loads and catches its documents from here. The facade's full vocabulary
 // stays on that entry.
-export { EdytorDocument, createDocument, loadDocument, attachDocument, defaultSemantics, semanticsOf, mergeSemantics, SemanticConflictError, DocumentNotReadyError, DocumentDestroyedError, SchemaMismatchError, UndecodableUpdateError, UnsupportedDocError, SyncRefusedError } from './crdt/index.js';
+export { EdytorDocument, createDocument, loadDocument, attachDocument, defaultSemantics, semanticsOf, mergeSemantics, SemanticConflictError, DocumentNotReadyError, DocumentDestroyedError, SchemaMismatchError, UndecodableUpdateError, SyncRefusedError } from './crdt/index.js';
 // ── Sync and presence ──────────────────────────────────────────────────
 export { createIndexeddbSync, createWebsocketSync, clearDocument, prefetch, lastUpdated, documentSnapshot, DEFAULT_PRESENCE_THROTTLE } from './collaboration/index.js';
 // ── Comment threads ────────────────────────────────────────────────────

package/dist/kinds.js

@@ -209,7 +209,7 @@ export const convertToKind = (edytor, block, row, caret = row.replaces) => {
         let line = kind.children?.length ? at?.children[0] : at;
         while (line && !line.rendersContent && !line.definition.void && line.children[0])
             line = line.children[0];
-        edytor.dispatcher.caret(line?.firstText, 0);
+        edytor.dispatcher.caretIn(line?.firstText, 0);
     }
     return true;
 };

package/dist/plugins/anchored.svelte.d.ts

@@ -1,47 +1,43 @@
 /**
- * A panel the overlay draws under an element of the page (the code
- * language list under its button, the equation editor under its
- * equation): the anchor's box, measured on the overlay's frames, and the
- * one rule that closes the panel without moving the keys: its anchor gone,
- * a press or a focus outside the panel and its anchor, the view turning
- * readonly.
+ * A panel the app draws by an element of the page (the code language list
+ * by its button, the callout icon picker by its icon, the equation editor
+ * by its equation): that element as the panel's `anchor`, which the app's
+ * markup places itself by, and the one rule that closes the panel without
+ * moving the keys: its anchor gone, a press or a focus outside the panel
+ * and its anchor, the view turning readonly.
  */
-import type { Component } from 'svelte';
+import type { Snippet } from 'svelte';
 import type { Edytor } from '../edytor.svelte.js';
-import { type LayerBox } from '../surface/overlay.js';
 export declare class Anchored {
     #private;
     private edytor;
     /** The overlay host's name: its element is `[data-<name>]`. */
     private name;
-    /** The element the panel stands under: `null` when it left the page, `undefined` while closed. */
-    private anchor;
+    /** The element the panel stands by: `null` when it left the page, `undefined` while closed. */
+    private element;
     /** Close the panel, the keys where they are. */
     private dismiss;
-    /** The anchor's box in the overlay's frame while the panel is open, else `null` (reactive). */
-    box: LayerBox | null;
     constructor(edytor: Edytor, 
     /** The overlay host's name: its element is `[data-<name>]`. */
     name: string, 
-    /** The element the panel stands under: `null` when it left the page, `undefined` while closed. */
-    anchor: () => Element | null | undefined, 
+    /** The element the panel stands by: `null` when it left the page, `undefined` while closed. */
+    element: () => Element | null | undefined, 
     /** Close the panel, the keys where they are. */
     dismiss: () => void);
-    /** Where the panel stands: `gap` under its anchor, from its middle with `center`, layer-relative. */
-    place: (gap: number, center?: boolean) => {
-        left: number;
-        top: number;
-    } | null;
+    /** Where the panel stands: its element's box, read on every call (`ChromeAnchor`). */
+    readonly anchor: import("./chrome.js").ChromeAnchor;
     /**
      * Focus left a field of the panel (its `focusout`): for somewhere outside
-     * the panel and its anchor, it closes; with no new focus (the window went
-     * to the background), it stays.
+     * the panel and its element, it closes; with no new focus (the window
+     * went to the background), it stays.
      */
     blurred: (event: FocusEvent) => void;
     /**
-     * Mount the panel in the overlay at `zIndex` (above the block handles, 5,
-     * by default), with a press listener (capture) on `node`'s document and
-     * the readonly rule. Answers the teardown, which closes it.
+     * Mount the app's `snippet` with `payload` in the overlay at `zIndex`
+     * (above the block handles, 5, by default) while `shown` holds, with a
+     * press listener (capture) on `node`'s document, the anchor-gone rule
+     * (on the overlay's frames) and the readonly rule. Answers the teardown,
+     * which closes it.
      */
-    mount: <Props extends Record<string, unknown>>(node: HTMLElement, component: Component<Props>, props: Props, zIndex?: number) => () => void;
+    mount: <T>(node: HTMLElement, snippet: Snippet<[T]>, payload: T, shown: () => unknown, zIndex?: number) => () => void;
 }

package/dist/plugins/anchored.svelte.js

@@ -1,71 +1,55 @@
 import { onPress } from '../events/onFocus.js';
-import { layerBox, pin, sameValues } from '../surface/overlay.js';
+import { mountChrome, virtualAnchor } from './chrome.js';
 export class Anchored {
     edytor;
     name;
-    anchor;
+    element;
     dismiss;
-    /** The anchor's box in the overlay's frame while the panel is open, else `null` (reactive). */
-    box = $state.raw(null);
     constructor(edytor, 
     /** The overlay host's name: its element is `[data-<name>]`. */
     name, 
-    /** The element the panel stands under: `null` when it left the page, `undefined` while closed. */
-    anchor, 
+    /** The element the panel stands by: `null` when it left the page, `undefined` while closed. */
+    element, 
     /** Close the panel, the keys where they are. */
     dismiss) {
         this.edytor = edytor;
         this.name = name;
-        this.anchor = anchor;
+        this.element = element;
         this.dismiss = dismiss;
     }
-    /** Where the panel stands: `gap` under its anchor, from its middle with `center`, layer-relative. */
-    place = (gap, center = false) => {
-        const box = this.box;
-        return box && { left: box.x + (center ? box.width / 2 : 0), top: box.y + box.height + gap };
-    };
-    /** `at` is outside the panel's host and its anchor: the panel closes. */
+    /** Where the panel stands: its element's box, read on every call (`ChromeAnchor`). */
+    anchor = virtualAnchor(() => this.element()?.getBoundingClientRect(), () => this.element());
+    /** `at` is outside the panel's host and its element: the panel closes. */
     #outside = (at, host) => {
         if (!(at instanceof Node))
             return;
-        if (!host?.contains(at) && !this.anchor()?.contains(at))
+        if (!host?.contains(at) && !this.element()?.contains(at))
             this.dismiss();
     };
     /**
      * Focus left a field of the panel (its `focusout`): for somewhere outside
-     * the panel and its anchor, it closes; with no new focus (the window went
-     * to the background), it stays.
+     * the panel and its element, it closes; with no new focus (the window
+     * went to the background), it stays.
      */
     blurred = (event) => this.#outside(event.relatedTarget, event.currentTarget?.closest(`[data-${this.name}]`));
     /**
-     * Mount the panel in the overlay at `zIndex` (above the block handles, 5,
-     * by default), with a press listener (capture) on `node`'s document and
-     * the readonly rule. Answers the teardown, which closes it.
+     * Mount the app's `snippet` with `payload` in the overlay at `zIndex`
+     * (above the block handles, 5, by default) while `shown` holds, with a
+     * press listener (capture) on `node`'s document, the anchor-gone rule
+     * (on the overlay's frames) and the readonly rule. Answers the teardown,
+     * which closes it.
      */
-    mount = (node, component, props, zIndex = 7) => {
+    mount = (node, snippet, payload, shown, zIndex = 7) => {
         const { edytor } = this;
-        const offPress = onPress(edytor, node.ownerDocument, (event) => this.anchor() !== undefined &&
+        const offPress = onPress(edytor, node.ownerDocument, (event) => this.element() !== undefined &&
             this.#outside(event.target, event.target?.closest?.(`[data-${this.name}]`)), true);
-        const unmount = edytor.overlay.mount(component, props, this.name, zIndex, (host, origin) => {
-            const anchor = this.anchor();
-            const box = layerBox(anchor, origin);
-            return () => {
-                pin(host);
-                if (anchor === null)
-                    return this.dismiss();
-                if (!sameValues(box, this.box))
-                    this.box = box;
-            };
-        });
-        const offLock = $effect.root(() => {
-            $effect(() => {
-                if (edytor.readonly)
-                    this.dismiss();
-            });
-        });
+        const unmount = mountChrome(edytor, snippet, payload, shown, {
+            name: this.name,
+            zIndex,
+            measure: () => (this.element() === null ? this.dismiss : undefined)
+        }, this.dismiss);
         return () => {
             offPress();
-            offLock();
             unmount();
             this.dismiss();
         };

package/dist/plugins/blockHandles/BlockHandleController.svelte.js

@@ -1,13 +1,12 @@
 import { untrack } from 'svelte';
 import { autoScrollFor } from '../../dnd/autoScroll.js';
 import { blockSelection, noSelection, project } from '../../session/selection.js';
-import { draggable, dropTargetForElements, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
+import { dropTargetForElements, elementScrollers } from '../../dnd/pragmatic.js';
 import { getSelectionBlocks, holdsBlocks, movable, outermost, selectMoved, shownText } from '../../selection/replaceSelection.js';
 import { takeKeys } from '../../events/onFocus.js';
-import { EDYTOR_BLOCK_DRAG_MIME } from '../../events/onDrop.js';
 import { kindLabel } from '../../kinds.js';
 import { siblingSlot } from '../../session/handles.js';
-import { dragPreview } from './dragPreview.js';
+import { dragSource, ghost } from './dragPreview.js';
 import { DropIndicator } from '../../dnd/dropIndicator.js';
 import { DropResolver, SLOP_X, SLOP_Y } from '../../dnd/placement.js';
 import { getOwnRowBottom, ownRow } from '../../dnd/geometry.js';
@@ -226,7 +225,7 @@ export class BlockHandleController {
                         edytor.move({ blocks: [target], target: block, position: 'right' });
                     // The caret is the model's: the projector shows it once the block mounts.
                     if (target?.firstText)
-                        dispatcher.caret(target.firstText, 0);
+                        dispatcher.caretIn(target.firstText, 0);
                     if (!target || !then)
                         return;
                     const [added, before] = [facade.version, dispatcher.last];
@@ -283,21 +282,20 @@ export class BlockHandleController {
         const text = grip && shownText(grip, 'first');
         // A block with no text (a divider): no selection, as before the grip.
         if (text)
-            this.edytor.dispatcher.caret(text, 0);
+            this.edytor.dispatcher.caretIn(text, 0);
         else
             selection.select(noSelection);
     }
     registerHandle(element, block) {
         if (!this.options.draggable)
             return () => { };
-        return draggable({
-            element,
+        return dragSource(element, {
             canDrag: () => !this.edytor.readonly && block.movable,
-            getInitialData: () => ({ owner: this.owner, blockId: block.id }),
-            getInitialDataForExternal: () => ({ [EDYTOR_BLOCK_DRAG_MIME]: block.id }),
+            data: () => ({ owner: this.owner, blockId: block.id }),
+            id: () => block.id,
             // The moved blocks are known, and drop targets exist, from the start of
             // our drag (before any target is looked up).
-            onGenerateDragPreview: ({ nativeSetDragImage, location }) => {
+            begin: (pointer, setImage) => {
                 this.dragging = block.id;
                 this.handle = element.closest('[data-edytor-block-handle-host]') ?? element;
                 const group = (this.group = this.dragBlocks(block));
@@ -305,36 +303,30 @@ export class BlockHandleController {
                 // removed with the drag library's container once the drag starts.
                 const root = this.edytor.node;
                 const nodes = group.flatMap((moved) => (moved.node ? [moved.node] : []));
-                if (nativeSetDragImage && root && nodes.length) {
-                    const preview = dragPreview(root, nodes, location.current.input);
-                    setCustomNativeDragPreview({
-                        nativeSetDragImage,
-                        getOffset: preview.offset,
-                        render: ({ container }) => container.append(preview.element)
-                    });
-                }
+                ghost(setImage, root, nodes, pointer);
                 for (const [node, target] of this.targets)
                     this.#registerDropTarget(node, target);
                 this.#registerDropTarget(element.ownerDocument.body, null);
                 this.scrolling?.();
-                this.scrolling = root ? autoScrollFor(root, (data) => data.owner === this.owner) : null;
+                this.scrolling = root
+                    ? autoScrollFor(root, elementScrollers((data) => data.owner === this.owner))
+                    : null;
                 this.indicator.begin(element.ownerDocument);
             },
             // The moved blocks show selected while they move (a text range becomes their
             // block selection); the drop's undo step restores the selection held before.
-            onDragStart: () => {
+            start: () => {
                 const { selectedBlocks, value } = this.edytor.selection;
                 if (holdsBlocks(selectedBlocks, this.group))
                     return;
                 this.held = value;
                 this.select(block);
             },
-            // PDD notifies the source before drop targets. Keep the shown
-            // placement and the targets until the target has committed its move.
-            // A drop on one of ours gives the keys to the editor (Notion: Mod+Z
-            // right after a drag), whatever it selected.
-            onDrop: ({ location }) => queueMicrotask(() => {
-                if (location.current.dropTargets.length)
+            // Kept the shown placement and the targets until the target has
+            // committed its move. A drop on one of ours gives the keys to the
+            // editor (Notion: Mod+Z right after a drag), whatever it selected.
+            end: (dropped) => {
+                if (dropped)
                     takeKeys(this.edytor);
                 this.indicator.end();
                 this.scrolling?.();
@@ -346,7 +338,7 @@ export class BlockHandleController {
                 this.handle = null;
                 this.group = [];
                 this.held = null;
-            })
+            }
         });
     }
     /** A candidate drop target; registered at once when our drag is in progress. */
@@ -390,14 +382,14 @@ export class BlockHandleController {
                 const dragSource = this.#getDragSource(source.data);
                 if (!dragSource)
                     return false;
+                const drag = this.#drag(dragSource);
                 if (!target)
-                    return Boolean(this.drop.margin(this.#drag(dragSource), input));
+                    return Boolean(this.drop.margin(drag, input));
                 if (this.drop.inHandleColumn(input.clientX))
                     return false;
-                const row = this.drop.rowAt(this.#drag(dragSource), target, node, input);
-                const { before, after } = this.drop.zones(this.#drag(dragSource), row, input);
-                return ([...before, ...after].some(this.#drag(dragSource).fits) ||
-                    Boolean(this.drop.beside(this.#drag(dragSource), row, input)));
+                const row = this.drop.rowAt(drag, target, node, input);
+                const { before, after } = this.drop.zones(drag, row, input);
+                return [...before, ...after].some(drag.fits) || Boolean(this.drop.beside(drag, row, input));
             },
             // The row at the pointer and the half of its own row (not its subtree's)
             // the pointer is in: held while the target is sticky (the drag library

package/dist/plugins/blockHandles/dragPreview.d.ts

@@ -1,10 +1,3 @@
-/**
- * Notion's drag ghost: a copy of the dragged blocks, rendered as they look in
- * the editor, scaled down, that follows the pointer (the browser adds its own
- * drag-image translucency). Cloned once when the drag starts and mounted by
- * the drag library for the frame the browser takes its picture
- * (`setCustomNativeDragPreview`), then removed with it.
- */
 export type DragPreview = {
     /** The ghost, `[data-edytor-drag-preview]`, to mount in the drag library's container. */
     element: HTMLElement;
@@ -33,3 +26,29 @@ export declare const dragPreview: (root: HTMLElement, nodes: HTMLElement[], poin
     clientX: number;
     clientY: number;
 }, columns?: number[]) => DragPreview;
+type Pointer = {
+    clientX: number;
+    clientY: number;
+};
+/**
+ * One of the editor's own drags from `element` (a block's handle, a table's
+ * grip): `canDrag` asks whether it may start, `data` is what its targets
+ * read, `id` the block another view sees it carry (no view takes it as a
+ * foreign drop); `begin` runs as it starts (the ghost and the targets),
+ * `start` once it has, and `end` after the drop target's own drop (the drag
+ * library tells the source first).
+ */
+export declare const dragSource: (element: HTMLElement, { canDrag, data, id, begin, start, end }: {
+    canDrag: () => boolean;
+    data: () => Record<string | symbol, unknown>;
+    id: () => string;
+    begin: (pointer: Pointer, setImage: DataTransfer["setDragImage"] | null) => void;
+    start?: () => void;
+    end: (dropped: boolean) => void;
+}) => import("../../dnd/vendor/pragmatic/pragmatic-drag-and-drop/internal-types").CleanupFn;
+/**
+ * The drag's ghost (`dragPreview` of `nodes` under `root`), mounted for the
+ * browser's picture of it, when the drag has an image to set.
+ */
+export declare const ghost: (setImage: DataTransfer["setDragImage"] | null, root: HTMLElement | null | undefined, nodes: HTMLElement[], pointer: Pointer, columns?: number[]) => void;
+export {};

package/dist/plugins/blockHandles/dragPreview.js

@@ -1,3 +1,5 @@
+import { draggable, setCustomNativeDragPreview } from '../../dnd/pragmatic.js';
+import { EDYTOR_BLOCK_DRAG_MIME } from '../../events/onDrop.js';
 /**
  * Notion's drag ghost: a copy of the dragged blocks, rendered as they look in
  * the editor, scaled down, that follows the pointer (the browser adds its own
@@ -227,3 +229,34 @@ export const dragPreview = (root, nodes, pointer, columns) => {
     };
     return { element, offset };
 };
+/**
+ * One of the editor's own drags from `element` (a block's handle, a table's
+ * grip): `canDrag` asks whether it may start, `data` is what its targets
+ * read, `id` the block another view sees it carry (no view takes it as a
+ * foreign drop); `begin` runs as it starts (the ghost and the targets),
+ * `start` once it has, and `end` after the drop target's own drop (the drag
+ * library tells the source first).
+ */
+export const dragSource = (element, { canDrag, data, id, begin, start, end }) => draggable({
+    element,
+    canDrag,
+    getInitialData: data,
+    getInitialDataForExternal: () => ({ [EDYTOR_BLOCK_DRAG_MIME]: id() }),
+    onGenerateDragPreview: ({ nativeSetDragImage, location }) => begin(location.current.input, nativeSetDragImage),
+    onDragStart: start,
+    onDrop: ({ location }) => queueMicrotask(() => end(location.current.dropTargets.length > 0))
+});
+/**
+ * The drag's ghost (`dragPreview` of `nodes` under `root`), mounted for the
+ * browser's picture of it, when the drag has an image to set.
+ */
+export const ghost = (setImage, root, nodes, pointer, columns) => {
+    if (!setImage || !root || !nodes.length)
+        return;
+    const preview = dragPreview(root, nodes, pointer, columns);
+    setCustomNativeDragPreview({
+        nativeSetDragImage: setImage,
+        getOffset: preview.offset,
+        render: ({ container }) => container.append(preview.element)
+    });
+};

package/dist/plugins/blockMenu/BlockMenuController.svelte.d.ts

@@ -69,6 +69,11 @@ export declare class BlockMenuController {
      * after). Delete and Turn into act on their `members`, its items too.
      */
     blocks: Block[];
+    /**
+     * Where the menu stands: the handle that opened it (a `ChromeAnchor`:
+     * your `menu` places itself beside it, its flyout beside the menu);
+     * `null` while closed.
+     */
     anchor: HTMLElement | null;
     query: string;
     /** The keyboard's row. */