@liminis/editor 0.1.0 → 0.2.0

package/dist/app/editor/SelectionContextMenuPlugin.js

@@ -36,10 +36,10 @@ const itemStyle = {
 function SelectionContextMenu({ visible, x, y, selectedText, onChatAboutThis, annotationAffordances, onCreateAnnotation, onClose, }) {
     const menuRef = useRef(null);
     const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
-    const bgColor = `var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'})`;
-    const borderColor = `var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'})`;
-    const textColor = `var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'})`;
-    const hoverBg = `var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'})`;
+    const bgColor = `var(--liminis-editor-menu-background, var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'}))`;
+    const borderColor = `var(--liminis-editor-menu-border, var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'}))`;
+    const textColor = `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'}))`;
+    const hoverBg = `var(--liminis-editor-menu-selectionBackground, var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'}))`;
     useEffect(() => {
         if (!visible)
             return;

package/dist/app/editor/annotation-marks.d.ts

@@ -157,6 +157,26 @@ export declare function markElementsForId(editor: LexicalEditor, id: string): HT
  * are in document order, and ids with no live mark are simply absent.
  */
 export declare function markElementsByAnnotationId(editor: LexicalEditor, ids: ReadonlySet<string>): Map<string, HTMLElement[]>;
+/**
+ * Current on-screen geometry (#73) for every live mark of the requested
+ * annotations, keyed by annotation id — one `DOMRect` per constituent
+ * `MarkNode`, in document order, computed fresh at call time via
+ * `getBoundingClientRect()` (viewport-relative, matching the only existing
+ * precedent for rect delivery in this package, `AnnotationCreateEvent.rect`
+ * in `AnnotationPlugin.tsx`). Ids with no currently live mark are simply
+ * absent from the result, never an error.
+ *
+ * `ids` omitted (or `undefined`) returns geometry for every annotation that
+ * currently has at least one live mark, mirroring
+ * {@link collectLiveAnchorSnapshots}'s own "no ids given -> collect every
+ * live id" behavior.
+ *
+ * Two different annotation ids can legitimately return an identical rect:
+ * overlapping annotations may share one `MarkNode` (`MarkNode.getIDs()` can
+ * hold more than one id), and that shared element's rect is reported under
+ * each id it carries. That is expected, not a bug.
+ */
+export declare function getMarkRects(editor: LexicalEditor, ids?: readonly string[]): Map<string, DOMRect[]>;
 /**
  * Removes every `MarkNode` wrapping `id` (annotation deleted, or composer
  * cancelled before submit). A mark shared with other annotation ids

package/dist/app/editor/annotation-marks.js

@@ -710,6 +710,46 @@ export function markElementsByAnnotationId(editor, ids) {
     });
     return byId;
 }
+/**
+ * Current on-screen geometry (#73) for every live mark of the requested
+ * annotations, keyed by annotation id — one `DOMRect` per constituent
+ * `MarkNode`, in document order, computed fresh at call time via
+ * `getBoundingClientRect()` (viewport-relative, matching the only existing
+ * precedent for rect delivery in this package, `AnnotationCreateEvent.rect`
+ * in `AnnotationPlugin.tsx`). Ids with no currently live mark are simply
+ * absent from the result, never an error.
+ *
+ * `ids` omitted (or `undefined`) returns geometry for every annotation that
+ * currently has at least one live mark, mirroring
+ * {@link collectLiveAnchorSnapshots}'s own "no ids given -> collect every
+ * live id" behavior.
+ *
+ * Two different annotation ids can legitimately return an identical rect:
+ * overlapping annotations may share one `MarkNode` (`MarkNode.getIDs()` can
+ * hold more than one id), and that shared element's rect is reported under
+ * each id it carries. That is expected, not a bug.
+ */
+export function getMarkRects(editor, ids) {
+    return editor.getEditorState().read(() => {
+        let targetIds;
+        if (ids === undefined) {
+            targetIds = new Set();
+            for (const markNode of collectMarkNodesInOrder($getRoot())) {
+                for (const id of markNode.getIDs())
+                    targetIds.add(id);
+            }
+        }
+        else {
+            targetIds = new Set(ids);
+        }
+        const elementsById = markElementsByAnnotationId(editor, targetIds);
+        const rectsById = new Map();
+        for (const [id, elements] of elementsById) {
+            rectsById.set(id, elements.map((element) => element.getBoundingClientRect()));
+        }
+        return rectsById;
+    });
+}
 /**
  * Removes every `MarkNode` wrapping `id` (annotation deleted, or composer
  * cancelled before submit). A mark shared with other annotation ids

package/dist/app/editor/documentOutlineHandle.d.ts

@@ -0,0 +1,87 @@
+/**
+ * The controller shared between one `<Editor documentOutlineHandle={…}>` and
+ * one `<DocumentOutline handle={…}>`. `OutlinePlugin` feeds it from inside the
+ * Lexical tree; `DocumentOutline` reads it via `useSyncExternalStore`.
+ *
+ * A plain `MutableRefObject` (the pattern `annotationEditorHandleRef` uses)
+ * does not fit here: `DocumentOutline` must re-render live as the reader
+ * scrolls and the document changes, and mutating a ref's `.current` does not
+ * propagate to a sibling component reading the same ref. An external-store
+ * object solves that, and — because the consumer creates one per editor
+ * instance — it is naturally scoped to that instance, so mounting more than
+ * one editor at once never aggregates headings across them.
+ */
+/** A single heading captured for display. */
+export interface OutlineEntry {
+    /**
+     * Position within the document's H1–H5 heading order. Identity for
+     * selection and active-tracking is by this index, not by `text`, so
+     * duplicate heading titles are handled correctly.
+     */
+    index: number;
+    /** Heading level. H6 is out of scope — the editor theme has no class for it. */
+    level: 1 | 2 | 3 | 4 | 5;
+    /** Heading text with inline content (including inline code) reduced to plain text. */
+    text: string;
+}
+export interface DocumentOutlineSnapshot {
+    entries: OutlineEntry[];
+    /** Index of the entry whose heading is at the top of the viewport, or `null` when there is no active heading (e.g. no headings at all). */
+    activeIndex: number | null;
+}
+/**
+ * Not exported, so nothing outside this module can reference it. Its only
+ * purpose is to make `DocumentOutlineHandle` nominal instead of structural:
+ * without it, any object with matching method names would type-check as a
+ * handle, and `OutlinePlugin`'s cast to `OutlineHandleImpl` (to reach
+ * `connect`/`disconnect`/`publish`) would throw at runtime for a hand-rolled
+ * one. Only `OutlineHandleImpl`, constructed exclusively by
+ * `createDocumentOutlineHandle()`, can supply this property.
+ */
+declare const HANDLE_BRAND: unique symbol;
+/**
+ * The public surface a consumer reads and passes around. Create one with
+ * `createDocumentOutlineHandle()` and pass the same instance to both
+ * `<Editor documentOutlineHandle>` and `<DocumentOutline handle>`.
+ */
+export interface DocumentOutlineHandle {
+    /** Brand only, not a real property to read — see `HANDLE_BRAND`. */
+    readonly [HANDLE_BRAND]: true;
+    /** React external-store subscription — see `useSyncExternalStore`. */
+    subscribe(onStoreChange: () => void): () => void;
+    /** React external-store snapshot. Stable by reference until the outline actually changes. */
+    getSnapshot(): DocumentOutlineSnapshot;
+    /** Scroll the editor to the heading at `index`. No-ops if no editor is currently connected, or `index` is out of range. */
+    scrollToHeading(index: number): void;
+}
+/**
+ * The concrete object `createDocumentOutlineHandle()` returns. Consumers only
+ * ever see the `DocumentOutlineHandle` surface above; `OutlinePlugin` — the
+ * only other reader of an instance, always produced by
+ * `createDocumentOutlineHandle()` — reaches `connect`/`disconnect`/`publish`
+ * directly on this class.
+ */
+export declare class OutlineHandleImpl implements DocumentOutlineHandle {
+    readonly [HANDLE_BRAND]: true;
+    private snapshot;
+    private readonly listeners;
+    private scrollImpl;
+    subscribe: (onStoreChange: () => void) => (() => void);
+    getSnapshot: () => DocumentOutlineSnapshot;
+    scrollToHeading: (index: number) => void;
+    /** Called by `OutlinePlugin` while its editor is mounted. */
+    connect(scrollImpl: (index: number) => void): void;
+    /** Called by `OutlinePlugin` on unmount, so a stale handle no-ops rather than scrolling a torn-down editor. */
+    disconnect(): void;
+    /** Called by `OutlinePlugin` whenever headings or the active heading change. */
+    publish(next: DocumentOutlineSnapshot): void;
+}
+/**
+ * Create a controller shared between one `<Editor documentOutlineHandle={…}>`
+ * and one `<DocumentOutline handle={…}>`. Create it once per editor instance
+ * (e.g. via `useState(() => createDocumentOutlineHandle())`) and pass the
+ * same object to both — that is what scopes the outline to that editor, even
+ * when a consumer mounts several editors at once.
+ */
+export declare function createDocumentOutlineHandle(): DocumentOutlineHandle;
+export {};

package/dist/app/editor/documentOutlineHandle.js

@@ -0,0 +1,86 @@
+/**
+ * The controller shared between one `<Editor documentOutlineHandle={…}>` and
+ * one `<DocumentOutline handle={…}>`. `OutlinePlugin` feeds it from inside the
+ * Lexical tree; `DocumentOutline` reads it via `useSyncExternalStore`.
+ *
+ * A plain `MutableRefObject` (the pattern `annotationEditorHandleRef` uses)
+ * does not fit here: `DocumentOutline` must re-render live as the reader
+ * scrolls and the document changes, and mutating a ref's `.current` does not
+ * propagate to a sibling component reading the same ref. An external-store
+ * object solves that, and — because the consumer creates one per editor
+ * instance — it is naturally scoped to that instance, so mounting more than
+ * one editor at once never aggregates headings across them.
+ */
+/**
+ * Not exported, so nothing outside this module can reference it. Its only
+ * purpose is to make `DocumentOutlineHandle` nominal instead of structural:
+ * without it, any object with matching method names would type-check as a
+ * handle, and `OutlinePlugin`'s cast to `OutlineHandleImpl` (to reach
+ * `connect`/`disconnect`/`publish`) would throw at runtime for a hand-rolled
+ * one. Only `OutlineHandleImpl`, constructed exclusively by
+ * `createDocumentOutlineHandle()`, can supply this property.
+ */
+const HANDLE_BRAND = Symbol('DocumentOutlineHandle');
+const EMPTY_SNAPSHOT = { entries: [], activeIndex: null };
+function snapshotsEqual(a, b) {
+    if (a.activeIndex !== b.activeIndex)
+        return false;
+    if (a.entries.length !== b.entries.length)
+        return false;
+    for (let i = 0; i < a.entries.length; i++) {
+        const x = a.entries[i];
+        const y = b.entries[i];
+        if (x.index !== y.index || x.level !== y.level || x.text !== y.text)
+            return false;
+    }
+    return true;
+}
+/**
+ * The concrete object `createDocumentOutlineHandle()` returns. Consumers only
+ * ever see the `DocumentOutlineHandle` surface above; `OutlinePlugin` — the
+ * only other reader of an instance, always produced by
+ * `createDocumentOutlineHandle()` — reaches `connect`/`disconnect`/`publish`
+ * directly on this class.
+ */
+export class OutlineHandleImpl {
+    [HANDLE_BRAND] = true;
+    snapshot = EMPTY_SNAPSHOT;
+    listeners = new Set();
+    scrollImpl = null;
+    subscribe = (onStoreChange) => {
+        this.listeners.add(onStoreChange);
+        return () => {
+            this.listeners.delete(onStoreChange);
+        };
+    };
+    getSnapshot = () => this.snapshot;
+    scrollToHeading = (index) => {
+        this.scrollImpl?.(index);
+    };
+    /** Called by `OutlinePlugin` while its editor is mounted. */
+    connect(scrollImpl) {
+        this.scrollImpl = scrollImpl;
+    }
+    /** Called by `OutlinePlugin` on unmount, so a stale handle no-ops rather than scrolling a torn-down editor. */
+    disconnect() {
+        this.scrollImpl = null;
+    }
+    /** Called by `OutlinePlugin` whenever headings or the active heading change. */
+    publish(next) {
+        if (snapshotsEqual(this.snapshot, next))
+            return;
+        this.snapshot = next;
+        for (const listener of this.listeners)
+            listener();
+    }
+}
+/**
+ * Create a controller shared between one `<Editor documentOutlineHandle={…}>`
+ * and one `<DocumentOutline handle={…}>`. Create it once per editor instance
+ * (e.g. via `useState(() => createDocumentOutlineHandle())`) and pass the
+ * same object to both — that is what scopes the outline to that editor, even
+ * when a consumer mounts several editors at once.
+ */
+export function createDocumentOutlineHandle() {
+    return new OutlineHandleImpl();
+}

package/dist/app/editor/nodes/C4Component.js

@@ -181,11 +181,11 @@ function C4DiagramDisplay({ code, nodeKey, onDoubleClick, isEditable, }) {
                             border: 'none',
                             cursor: 'pointer',
                             backgroundColor: isEditingLayout
-                                ? 'var(--color-primary-100, rgba(59, 130, 246, 0.1))'
-                                : 'var(--color-muted-100, rgba(128, 128, 128, 0.1))',
+                                ? 'var(--liminis-editor-primary-100, var(--color-primary-100, rgba(59, 130, 246, 0.1)))'
+                                : 'var(--liminis-editor-muted-100, var(--color-muted-100, rgba(128, 128, 128, 0.1)))',
                             color: isEditingLayout
-                                ? 'var(--color-primary, #3b82f6)'
-                                : 'var(--color-muted-foreground, #6b7280)',
+                                ? 'var(--liminis-editor-primary, var(--color-primary, #3b82f6))'
+                                : 'var(--liminis-editor-muted-foreground, var(--color-muted-foreground, #6b7280))',
                         }, children: _jsx(Move, { size: 16 }) }), manualLayout && (_jsx("button", { type: "button", onClick: (e) => {
                             e.stopPropagation();
                             handleResetLayout();
@@ -198,8 +198,8 @@ function C4DiagramDisplay({ code, nodeKey, onDoubleClick, isEditable, }) {
                             borderRadius: '4px',
                             border: 'none',
                             cursor: 'pointer',
-                            backgroundColor: 'var(--color-muted-100, rgba(128, 128, 128, 0.1))',
-                            color: 'var(--color-muted-foreground, #6b7280)',
+                            backgroundColor: 'var(--liminis-editor-muted-100, var(--color-muted-100, rgba(128, 128, 128, 0.1)))',
+                            color: 'var(--liminis-editor-muted-foreground, var(--color-muted-foreground, #6b7280))',
                         }, children: _jsx(RotateCcw, { size: 16 }) }))] })), isEditingLayout && parseResult.diagram ? (_jsx(C4InteractiveRenderer, { diagram: parseResult.diagram, isDarkMode: isDarkMode, isEditMode: isEditingLayout, manualPositions: manualPositions, onPositionChange: handlePositionChange })) : (_jsx(C4Renderer, { layout: layout, isDarkMode: isDarkMode })), _jsx(DiagramContextMenu, { ...contextMenu.props, onEditText: isEditable ? onDoubleClick : undefined, onEditLayout: isEditable ? () => setIsEditingLayout(prev => !prev) : undefined, onResetLayout: isEditable ? handleResetLayout : undefined, isEditingLayout: isEditingLayout, hasManualLayout: !!manualLayout })] }));
 }
 // =============================================================================

package/dist/app/editor/nodes/DiagramContextMenu.js

@@ -75,11 +75,11 @@ const separatorStyle = {
 export function DiagramContextMenu({ visible, x, y, onCopyImage, onClose, onEditText, onEditLayout, onResetLayout, isEditingLayout, hasManualLayout, }) {
     const menuRef = useRef(null);
     const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
-    const bgColor = `var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'})`;
-    const borderColor = `var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'})`;
-    const textColor = `var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'})`;
-    const hoverBg = `var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'})`;
-    const separatorColor = `var(--vscode-menu-separatorBackground, ${isDark ? '#454545' : '#d4d4d4'})`;
+    const bgColor = `var(--liminis-editor-menu-background, var(--vscode-menu-background, ${isDark ? '#252526' : '#ffffff'}))`;
+    const borderColor = `var(--liminis-editor-menu-border, var(--vscode-menu-border, ${isDark ? '#454545' : '#d4d4d4'}))`;
+    const textColor = `var(--liminis-editor-menu-foreground, var(--vscode-menu-foreground, ${isDark ? '#cccccc' : '#333333'}))`;
+    const hoverBg = `var(--liminis-editor-menu-selectionBackground, var(--vscode-menu-selectionBackground, ${isDark ? '#094771' : '#e8e8e8'}))`;
+    const separatorColor = `var(--liminis-editor-menu-separatorBackground, var(--vscode-menu-separatorBackground, ${isDark ? '#454545' : '#d4d4d4'}))`;
     // Close on click outside or Escape
     useEffect(() => {
         if (!visible)

package/dist/app/editor/scrollContainer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Shared DOM helpers for locating an editor's scroll container and scrolling
+ * an element into view within it. `AnchorScrollPlugin` (anchor-link
+ * navigation) and `OutlinePlugin` (table-of-contents navigation) both need to
+ * find "the nearest thing that actually scrolls" without the host declaring
+ * one explicitly (FR-006) — this is the one place that logic lives.
+ */
+/**
+ * Find the scrollable container for an element: the known editor scroll ids
+ * first, then the nearest ancestor that actually scrolls (robust to host
+ * markup).
+ */
+export declare function scrollContainerFor(element: HTMLElement): HTMLElement | null;
+/**
+ * Scroll `target` into view within its scroll container (or the viewport, if
+ * none is found), positioning it near the top rather than flush against it.
+ */
+export declare function scrollElementIntoView(target: HTMLElement, margin?: number): void;

package/dist/app/editor/scrollContainer.js

@@ -0,0 +1,47 @@
+/**
+ * Shared DOM helpers for locating an editor's scroll container and scrolling
+ * an element into view within it. `AnchorScrollPlugin` (anchor-link
+ * navigation) and `OutlinePlugin` (table-of-contents navigation) both need to
+ * find "the nearest thing that actually scrolls" without the host declaring
+ * one explicitly (FR-006) — this is the one place that logic lives.
+ */
+/**
+ * Find the scrollable container for an element: the known editor scroll ids
+ * first, then the nearest ancestor that actually scrolls (robust to host
+ * markup).
+ */
+export function scrollContainerFor(element) {
+    // Assumes the two known ids are never nested inside one another; neither
+    // known host does. If that ever changes, the closer one should win instead.
+    const byId = element.closest('#editor-scroll-container') ||
+        element.closest('#editor-panel-scroll-container');
+    if (byId)
+        return byId;
+    let el = element.parentElement;
+    while (el) {
+        const overflowY = getComputedStyle(el).overflowY;
+        if (/(auto|scroll)/.test(overflowY) && el.scrollHeight > el.clientHeight)
+            return el;
+        el = el.parentElement;
+    }
+    return null;
+}
+/**
+ * Scroll `target` into view within its scroll container (or the viewport, if
+ * none is found), positioning it near the top rather than flush against it.
+ */
+export function scrollElementIntoView(target, margin = 16) {
+    const container = scrollContainerFor(target);
+    if (container) {
+        // rect-based offset is robust regardless of the target's offsetParent;
+        // leave a small margin so it sits near the top, not flush against it.
+        const top = Math.max(0, target.getBoundingClientRect().top -
+            container.getBoundingClientRect().top +
+            container.scrollTop -
+            margin);
+        container.scrollTo({ top, behavior: 'smooth' });
+    }
+    else {
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}

package/dist/index.d.ts

@@ -18,6 +18,10 @@ export type { CursorState } from './app/App.js';
 export { Editor } from './app/editor/index.js';
 export type { SweepFn } from './app/editor/AmbientCorrectionPlugin.js';
 export type { SelectionContextMenuEvent } from './app/editor/SelectionContextMenuPlugin.js';
+export { DocumentOutline } from './app/editor/DocumentOutline.js';
+export type { DocumentOutlineProps } from './app/editor/DocumentOutline.js';
+export { createDocumentOutlineHandle } from './app/editor/documentOutlineHandle.js';
+export type { DocumentOutlineHandle, DocumentOutlineSnapshot, OutlineEntry, } from './app/editor/documentOutlineHandle.js';
 export { OPEN_ANNOTATION_COMPOSER_COMMAND } from './app/editor/annotationCommands.js';
 export type { AnnotationCreateEvent } from './app/editor/AnnotationPlugin.js';
 export type { Annotation, AnnotationKind, AnnotationKindConfig, AnnotationKindConfigs, AnnotationCreateAffordance, AnnotationMarkerStyle, AnnotationPresentation, AnnotationEditorHandle, MarkerTarget, } from './annotations/types.js';

package/dist/index.js

@@ -15,6 +15,12 @@ export { createHostMessageApi, useHostMessages } from './host/messages.js';
 // --- Components ------------------------------------------------------------
 export { App } from './app/App.js';
 export { Editor } from './app/editor/index.js';
+// --- Document outline (issue #69) -------------------------------------------
+// `createDocumentOutlineHandle()` makes the controller shared between one
+// `<Editor documentOutlineHandle={…}>` and one `<DocumentOutline handle={…}>`
+// — create it once per editor instance and pass the same object to both.
+export { DocumentOutline } from './app/editor/DocumentOutline.js';
+export { createDocumentOutlineHandle } from './app/editor/documentOutlineHandle.js';
 // --- Annotations, React surface (ADR-077) ---------------------------------
 // The kind-configuration types a host needs to turn the mechanism on, plus the
 // create-event shape. The DOM-free anchor model, resolver and marker-target

package/dist/markdown/stringify.js

@@ -230,6 +230,65 @@ function normalizeWikiLinkNodes(node) {
     }
     return node;
 }
+/**
+ * Widen every GFM table delimiter-row cell mdast-util-to-markdown emits at
+ * its library-enforced minimum (a bare `-`, or `:-`, `-:`, `:-:` with
+ * alignment colons) up to the conventional three-hyphen form GFM,
+ * remark-stringify, and Prettier all produce (`---`, `:---`, `---:`,
+ * `:---:`). `tablePipeAlign: false` (see the gfmToMarkdown() call below) is
+ * the one option controlling both column-width padding and this dash-count
+ * minimum in markdown-table — there is no way to keep the former's "no
+ * cell-width padding" behavior while asking for the latter's wider default
+ * separately, so this text-level post-process patches it after the fact
+ * (#60).
+ *
+ * A GFM table's delimiter row is always exactly the *second* line of a
+ * contiguous run of pipe-led lines (the first is the header row). Widening
+ * is restricted to that position rather than to any line that merely looks
+ * delimiter-shaped — a body row whose cells' entire content happens to be a
+ * bare `-` (e.g. `| - | - |`) renders identically to a delimiter row, and a
+ * shape-only match would silently rewrite that user content instead of
+ * leaving it alone (caught in review — see PR #61). Only the exact
+ * single-dash form the library deterministically emits matches at that
+ * position, so an already-conventional delimiter row (3+ dashes) is left
+ * untouched — idempotence for free. Lines inside fenced code blocks or `$$`
+ * math blocks are excluded from the pipe-line run entirely, mirroring the
+ * intraword-underscore post-process below, so a fenced block that happens
+ * to contain a line shaped like a delimiter row is not rewritten. The
+ * pipe-line check also tolerates a leading run of `>` blockquote markers
+ * (each optionally preceded/followed by spaces or tabs) before the opening
+ * pipe, since a table nested in a blockquote (or a blockquote-wrapped list)
+ * serializes with a `> ` prefix on every line.
+ */
+function widenTableDelimiterDashes(markdown) {
+    const protectedRegionPattern = /^[ \t]*(`{3,}|~{3,})[^\n]*\n[\s\S]*?^[ \t]*\1[ \t]*$|\$\$[\s\S]*?\$\$/gmu;
+    const protectedRanges = [];
+    let region;
+    while ((region = protectedRegionPattern.exec(markdown)) !== null) {
+        protectedRanges.push([region.index, region.index + region[0].length]);
+    }
+    const pipeLinePattern = /^(?:[ \t]*>)*[ \t]*\|/;
+    const delimiterRowPattern = /^(?:[ \t]*>)*[ \t]*\|(?:\s*:?-:?\s*\|)+[ \t]*$/;
+    const lines = markdown.split('\n');
+    let offset = 0;
+    let pipeRunLength = 0;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const lineStart = offset;
+        const lineEnd = lineStart + line.length;
+        offset = lineEnd + 1; // account for the '\n' consumed by split()
+        const inProtectedRegion = protectedRanges.some(([start, end]) => lineStart < end && lineEnd > start);
+        if (inProtectedRegion || !pipeLinePattern.test(line)) {
+            pipeRunLength = 0;
+            continue;
+        }
+        pipeRunLength += 1;
+        if (pipeRunLength === 2 && delimiterRowPattern.test(line)) {
+            lines[i] = line.replace(/-/g, '---');
+        }
+    }
+    return lines.join('\n');
+}
 export function stringifyMarkdown(root, options = {}) {
     // Pre-process: add checkbox text to ordered list items (GFM only outputs for unordered)
     let processedRoot = addCheckboxTextToOrderedLists(root);
@@ -330,6 +389,12 @@ export function stringifyMarkdown(root, options = {}) {
             },
         ],
     });
+    // Post-process: widen table delimiter-row dashes to the conventional
+    // three-hyphen width (#60). Must run first, before any of the other
+    // backslash-stripping/restoring post-processes below, since none of them
+    // touch dashes and this step's own verbatim-region skip logic is simplest
+    // to reason about against toMarkdown()'s raw output.
+    result = widenTableDelimiterDashes(result);
     // Post-process: convert escaped spaces back to regular spaces
     // mdast-util-to-markdown escapes leading/trailing spaces at paragraph
     // boundaries as &#x20; which looks ugly in raw markdown