@memorysmithapp/markdown-renderer 0.3.2 → 0.5.0

package/dist/remark-ring.js

@@ -125,26 +125,36 @@ export function remarkMathDollarRule() {
                 const { start, end } = child.position ?? {};
                 if (start?.offset === undefined || end?.offset === undefined)
                     return child;
-                const raw = source.slice(start.offset, end.offset);
-                const inner = raw.replace(/^\$+/, '').replace(/\$+$/, '');
-                if (inner.length === 0)
-                    return { type: 'text', value: raw };
-                // The outside edges: what sits just inside each delimiter.
-                if (/^\s/.test(inner) || /\s$/.test(inner))
-                    return { type: 'text', value: raw };
-                // The inside edges: what sits just OUTSIDE each delimiter, which is
-                // the half `R$100 e o frete R$200` is decided by.
-                const before = start.offset > 0 ? (source[start.offset - 1] ?? '') : '';
-                const after = source[end.offset] ?? '';
-                if (before !== '' && /[0-9A-Za-z]/.test(before))
-                    return { type: 'text', value: raw };
-                if (after !== '' && /[0-9]/.test(after))
-                    return { type: 'text', value: raw };
+                if (breaksDollarRule(source, start.offset, end.offset)) {
+                    return { type: 'text', value: source.slice(start.offset, end.offset) };
+                }
                 return child;
             });
         });
     };
 }
+/**
+ * Whether the inline formula the source holds between these offsets, delimiters included, breaks
+ * the dollar rule of §7.8 and is text: the reading surface and the editor decide it alike.
+ */
+export function breaksDollarRule(source, start, end) {
+    const raw = source.slice(start, end);
+    const inner = raw.replace(/^\$+/, '').replace(/\$+$/, '');
+    if (inner.length === 0)
+        return true;
+    // The outside edges: what sits just inside each delimiter.
+    if (/^\s/.test(inner) || /\s$/.test(inner))
+        return true;
+    // The inside edges: what sits just OUTSIDE each delimiter, which is
+    // the half `R$100 e o frete R$200` is decided by.
+    const before = start > 0 ? (source[start - 1] ?? '') : '';
+    const after = source[end] ?? '';
+    if (before !== '' && /[0-9A-Za-z]/.test(before))
+        return true;
+    if (after !== '' && /[0-9]/.test(after))
+        return true;
+    return false;
+}
 /** Cuts a text node on a pattern, keeping the parts between the matches. */
 function split(value, pattern, make) {
     const parts = [];

package/dist/slots.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * interpreted when the theme fills it. Nothing a slot is given lets it reach
  * the source: what it draws is decided before it is called.
  */
-import { Children, createContext, createElement, Fragment, isValidElement, useContext, } from 'react';
+import { Children, createContext, createElement, Fragment, isValidElement, useContext, useState, } from 'react';
 import { useHost } from './host.js';
 /** The slot a theme fills, or `undefined`. */
 export function useSlot(name) {
@@ -55,8 +55,24 @@ function Callout({ kind, fold, children }) {
         const body = parts.filter((_, index) => index !== at);
         return drawSlot(slot, { kind, fold, title, icon, children: body });
     }
+    if (fold) {
+        const body = parts.filter((_, index) => index !== at);
+        return (_jsx(FoldingCallout, { kind: kind, fold: fold, icon: icon, body: body, children: title }));
+    }
     return (_jsx("div", { className: "callout", "data-callout": kind, ...(fold ? { 'data-fold': fold } : {}), children: parts.map((part, index) => (index === at ? _jsx(Fragment, { children: titled }, "title") : part)) }));
 }
+/**
+ * A callout marked `+` or `-`, which the default theme folds (§7, #83): a disclosure whose title
+ * is its control, open at first for `+` and closed for `-`, where only the title shows. A callout
+ * with no mark keeps MemorySmith's markup, which draws every callout open.
+ */
+function FoldingCallout({ kind, fold, icon, body, children }) {
+    const { strings } = useHost();
+    const [open, setOpen] = useState(fold === '+');
+    // A callout with no title is named by its type's word, so the control always says what it opens.
+    const words = children ?? strings.callouts[kind.toLowerCase()] ?? kind;
+    return (_jsxs("details", { className: "callout", "data-callout": kind, "data-fold": fold, open: open, onToggle: (event) => setOpen(event.currentTarget.open), children: [_jsxs("summary", { className: icon === null ? 'callout-title' : 'callout-title has-icon', children: [icon !== null && (_jsx("span", { className: "callout-icon", "aria-hidden": "true", children: icon })), _jsx(CalloutTitleText, { children: words })] }), body] }));
+}
 /** A `div` of the tree: a callout or its title, which `remarkCallouts` marks, or any other. */
 export function MarkdownDiv({ className, children, node: _node, ...rest }) {
     const classes = className?.split(/\s+/) ?? [];

package/dist/strings.d.ts

@@ -25,6 +25,11 @@ export interface NoteStrings {
     readonly refusedLink: string;
     /** The title of an embed naming a file the notebook does not keep. */
     readonly attachmentMissing: string;
+    /** A card's ways to a file: open it where a browser shows it, and save it (#77). */
+    readonly attachmentOpen: string;
+    readonly attachmentDownload: string;
+    /** What each type MemorySmith keeps is called, by media type; a type left out is named by its media type. */
+    readonly fileKinds: Readonly<Record<string, string>>;
     /** The verb of the button that copies a block of code. */
     readonly copy: string;
     /** What that button says once the block is copied. */
@@ -47,6 +52,20 @@ export interface NoteStrings {
     readonly embedSectionMissing: (section: string) => string;
     /** The caption of a note that has no name. */
     readonly unnamedNote: string;
+    /** What a task item says while the host saves its tick. */
+    readonly updating: string;
+    /** What is said, to whoever hears the page, once a tick is saved. */
+    readonly saved: string;
+    /** What a task item says for a moment when the host failed to save its tick. */
+    readonly notSaved: string;
+    /** The switch to edit mode, which says the action. */
+    readonly edit: string;
+    /** The switch back to reading, which says the action. */
+    readonly view: string;
+    /** What edit mode says of a note it cannot keep byte for byte, and so opens read-only. */
+    readonly editUnavailable: string;
+    /** The words of the editor: its toolbar, its forms and its controls. */
+    readonly editor: EditorWords;
     /** What a region says while it waits for the host. */
     readonly loading: string;
     /** What a region says when the host failed to answer. */
@@ -56,7 +75,116 @@ export interface NoteStrings {
     /** The button that dismisses the choice. */
     readonly cancel: string;
 }
+/** The words of the editor (`./edit`), each a label a control shows or is named by. */
+export interface EditorWords {
+    readonly toolbar: string;
+    /** The control that gives back the note as edit mode opened it (#67). */
+    readonly revert: string;
+    readonly undo: string;
+    readonly redo: string;
+    readonly paragraph: string;
+    readonly heading: string;
+    readonly bold: string;
+    readonly italic: string;
+    readonly strikethrough: string;
+    readonly highlight: string;
+    readonly code: string;
+    readonly link: string;
+    readonly wikilink: string;
+    readonly bulletList: string;
+    readonly orderedList: string;
+    readonly taskList: string;
+    readonly quote: string;
+    readonly callout: string;
+    readonly table: string;
+    readonly codeBlock: string;
+    readonly math: string;
+    readonly diagram: string;
+    readonly rule: string;
+    readonly footnote: string;
+    readonly comment: string;
+    /** The toolbar's button that attaches a file, and what it says while the host keeps it or failed (#75). */
+    readonly attach: string;
+    readonly attaching: string;
+    readonly attachFailed: string;
+    /** Said after the host's step while more files wait their turn (#88). */
+    readonly attachQueued: (count: number) => string;
+    /** A code block's language, chosen at its top right (#84). */
+    readonly language: string;
+    readonly plainText: string;
+    readonly mermaidDiagram: string;
+    readonly searchLanguages: string;
+    readonly noLanguage: string;
+    readonly notHighlighted: string;
+    /** The editing menu of a right-click (#81): its name, its groups, and the clipboard's verbs. */
+    readonly menu: string;
+    readonly menuFormat: string;
+    readonly menuInsert: string;
+    readonly menuEdit: string;
+    readonly cut: string;
+    readonly paste: string;
+    /** The attach dialog (#78): its title, its three ways in, and what each one asks and says. */
+    readonly attachTitle: string;
+    readonly fromComputer: string;
+    readonly fromNotebook: string;
+    readonly fromWeb: string;
+    readonly chooseFiles: string;
+    readonly fileName: string;
+    readonly fileDescription: string;
+    readonly attachConfirm: string;
+    readonly searchFiles: string;
+    readonly noFiles: string;
+    readonly noMatch: string;
+    readonly webAddress: string;
+    readonly webName: string;
+    readonly webInsert: string;
+    readonly webInvalid: string;
+    /** The control that shows a block as the text it is written in. */
+    readonly source: string;
+    readonly title: string;
+    readonly addProperties: string;
+    readonly addProperty: string;
+    readonly removeProperty: string;
+    readonly propertyKey: string;
+    readonly propertyValue: string;
+    /** The type of a property, chosen at its key, and each type's word (#70, #71). */
+    readonly propertyType: string;
+    readonly typeText: string;
+    readonly typeList: string;
+    readonly typeBoolean: string;
+    readonly typeDate: string;
+    readonly addItem: string;
+    readonly removeItem: string;
+    readonly calloutType: string;
+    readonly fold: string;
+    readonly foldNone: string;
+    readonly foldOpen: string;
+    readonly foldClosed: string;
+    readonly addRow: string;
+    readonly addColumn: string;
+    readonly removeRow: string;
+    readonly removeColumn: string;
+    readonly alignLeft: string;
+    readonly alignCenter: string;
+    readonly alignRight: string;
+    /** The buttons beside the switch that show the note's Markdown and copy it, and the dialog (#63, #76). */
+    readonly showMarkdown: string;
+    readonly copyMarkdown: string;
+    readonly sourceTitle: string;
+    readonly copy: string;
+    readonly copied: string;
+    readonly copyFailed: string;
+    /** Where the save of the last change stands (#64); `saved` and `notSaved` are the page's own. */
+    readonly saving: string;
+    readonly retry: string;
+    /** Said when the author asked to go back to reading and the last change is not saved. */
+    readonly stayInEdit: string;
+}
 /** The words MemorySmith shows in English, used for every word a host does not give. */
 export declare const ENGLISH: NoteStrings;
 /** The host's words over the English ones, key by key. */
-export declare function withDefaults(strings: Partial<NoteStrings> | undefined): NoteStrings;
+export declare function withDefaults(strings: NoteStringsInput | undefined): NoteStrings;
+/** The words a host gives: any of them, and any of the editor's. */
+export type NoteStringsInput = Partial<Omit<NoteStrings, 'editor'>> & {
+    readonly editor?: Partial<EditorWords>;
+};

package/dist/strings.js

@@ -40,6 +40,26 @@ export const ENGLISH = {
     pendingLink: 'Pending link: the target note does not exist yet.',
     refusedLink: 'This address is not one the reading surface follows, so the text stays and the link does not.',
     attachmentMissing: 'This notebook keeps no file under that name.',
+    attachmentOpen: 'Open',
+    attachmentDownload: 'Download',
+    fileKinds: {
+        'image/png': 'PNG image',
+        'image/jpeg': 'JPEG image',
+        'image/webp': 'WebP image',
+        'image/gif': 'GIF image',
+        'image/svg+xml': 'SVG image',
+        'application/pdf': 'PDF document',
+        'audio/mpeg': 'MP3 audio',
+        'audio/wav': 'WAV audio',
+        'audio/ogg': 'Ogg audio',
+        'audio/webm': 'WebM audio',
+        'video/mp4': 'MP4 video',
+        'video/webm': 'WebM video',
+        'video/quicktime': 'QuickTime video',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word document',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel spreadsheet',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PowerPoint presentation',
+    },
     copy: 'Copy',
     copied: 'Copied',
     remoteImages: (hosts) => hosts.length === 1
@@ -57,6 +77,105 @@ export const ENGLISH = {
         : `No note is named “${target}”, so it matched ${count} notes that carry it as an alias — and one of them gives the link up the day somebody writes a note under this name.`,
     embedSectionMissing: (section) => `The section "${section}" is not in this note.`,
     unnamedNote: 'Unnamed note',
+    updating: 'Updating…',
+    saved: 'Saved',
+    notSaved: 'Not saved',
+    edit: 'Edit',
+    view: 'View',
+    editUnavailable: 'This note mixes line endings, which the editor cannot keep byte for byte, so it opens read-only.',
+    editor: {
+        toolbar: 'Formatting',
+        revert: 'Undo all changes',
+        undo: 'Undo',
+        redo: 'Redo',
+        paragraph: 'Paragraph',
+        heading: 'Heading',
+        bold: 'Bold',
+        italic: 'Italic',
+        strikethrough: 'Strikethrough',
+        highlight: 'Highlight',
+        code: 'Code',
+        link: 'Link',
+        wikilink: 'Link to a note',
+        bulletList: 'Bulleted list',
+        orderedList: 'Numbered list',
+        taskList: 'Task list',
+        quote: 'Quotation',
+        callout: 'Callout',
+        table: 'Table',
+        codeBlock: 'Code block',
+        math: 'Formula',
+        diagram: 'Diagram',
+        rule: 'Divider',
+        footnote: 'Footnote',
+        comment: 'Comment',
+        attach: 'Attach a file',
+        attaching: 'Attaching…',
+        attachFailed: 'The file was not attached',
+        attachQueued: (count) => (count === 1 ? '1 more file waiting' : `${count} more files waiting`),
+        language: 'Language',
+        plainText: 'Plain text',
+        mermaidDiagram: 'Mermaid diagram',
+        searchLanguages: 'Search languages',
+        noLanguage: 'No language matches.',
+        notHighlighted: 'not highlighted',
+        menu: 'Editing',
+        menuFormat: 'Format',
+        menuInsert: 'Insert',
+        menuEdit: 'Edit',
+        cut: 'Cut',
+        paste: 'Paste',
+        attachTitle: 'Attach',
+        fromComputer: 'From the computer',
+        fromNotebook: 'From the notebook',
+        fromWeb: 'From the web',
+        chooseFiles: 'Choose files',
+        fileName: 'Name',
+        fileDescription: 'Description',
+        attachConfirm: 'Attach',
+        searchFiles: "Search the notebook's files",
+        noFiles: 'The notebook keeps no file yet.',
+        noMatch: 'No file matches.',
+        webAddress: 'Address',
+        webName: 'Name',
+        webInsert: 'Insert',
+        webInvalid: 'An address on the web starts with https:// or http://.',
+        source: 'Source',
+        title: 'Title',
+        addProperties: 'Add properties',
+        addProperty: 'Add a property',
+        removeProperty: 'Remove the property',
+        propertyKey: 'Key',
+        propertyValue: 'Value',
+        propertyType: 'Type',
+        typeText: 'Text',
+        typeList: 'List',
+        typeBoolean: 'Yes or no',
+        typeDate: 'Date',
+        addItem: 'Add',
+        removeItem: 'Remove',
+        calloutType: 'Type',
+        fold: 'Folding',
+        foldNone: 'Not foldable',
+        foldOpen: 'Folds, open',
+        foldClosed: 'Folds, closed',
+        addRow: 'Add a row',
+        addColumn: 'Add a column',
+        removeRow: 'Remove the row',
+        removeColumn: 'Remove the column',
+        alignLeft: 'Align left',
+        alignCenter: 'Center',
+        alignRight: 'Align right',
+        showMarkdown: 'Show Markdown',
+        copyMarkdown: 'Copy Markdown',
+        sourceTitle: 'The note in Markdown',
+        copy: 'Copy',
+        copied: 'Copied',
+        copyFailed: 'Could not copy',
+        saving: 'Saving…',
+        retry: 'Try again',
+        stayInEdit: 'Not saved: the note stays in edit',
+    },
     loading: 'Loading…',
     failed: 'Something went wrong.',
     close: 'Close',
@@ -64,5 +183,12 @@ export const ENGLISH = {
 };
 /** The host's words over the English ones, key by key. */
 export function withDefaults(strings) {
-    return { ...ENGLISH, ...strings };
+    // The editor's words and the names of the file types are merged one by one too, so a host may
+    // translate some and keep the rest.
+    return {
+        ...ENGLISH,
+        ...strings,
+        editor: { ...ENGLISH.editor, ...strings?.editor },
+        fileKinds: { ...ENGLISH.fileKinds, ...strings?.fileKinds },
+    };
 }

package/dist/task-saves.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The saves of the task boxes a reader ticks, as the page shows them.
+ *
+ * A tick only exists once the host has saved it, and a reader who cannot see
+ * that cannot tell which state was kept. So when the host answers a tick with
+ * a promise, the item is locked under "Updating…" until it settles: resolved,
+ * the lock lifts and the box is what the host's new bytes say; rejected, the
+ * box returns to the state its source still holds and the item says "Not
+ * saved" for a moment. A host that answers with nothing keeps today's page.
+ *
+ * The calls are queued: a second tick reaches the host only once the first
+ * settled, so a host that applies `toggleTaskAt` to its latest bytes never
+ * has two writes of the same note in flight.
+ */
+/** Where the save of one box stands, by its ordinal in the note. */
+export type TaskSave = {
+    readonly kind: 'pending';
+    readonly checked: boolean;
+} | {
+    readonly kind: 'failed';
+};
+/** What the host answers a tick with: the promise of its save, or anything else, which locks nothing. */
+export type TaskToggleResult = unknown;
+/** How long "Not saved" stays on an item, in milliseconds. */
+export declare const FAILED_NOTICE_MS = 2500;
+export interface TaskSaves {
+    /** The save of the box at this ordinal, or `null` when nothing is in flight or just failed. */
+    readonly stateOf: (ordinal: number) => TaskSave | null;
+    /** Reports a tick; `checked` is the state the box is being set to. */
+    readonly toggle: (ordinal: number, checked: boolean) => void;
+    /** What the page last said about a save, for a polite live region; empty when it has nothing to say. */
+    readonly announcement: 'updating' | 'saved' | 'notSaved' | '';
+}
+export declare function isThenable(value: unknown): value is PromiseLike<unknown>;
+export declare function useTaskSaves(onToggleTask: ((ordinal: number) => TaskToggleResult) | undefined): TaskSaves;

package/dist/task-saves.js

@@ -0,0 +1,86 @@
+/**
+ * The saves of the task boxes a reader ticks, as the page shows them.
+ *
+ * A tick only exists once the host has saved it, and a reader who cannot see
+ * that cannot tell which state was kept. So when the host answers a tick with
+ * a promise, the item is locked under "Updating…" until it settles: resolved,
+ * the lock lifts and the box is what the host's new bytes say; rejected, the
+ * box returns to the state its source still holds and the item says "Not
+ * saved" for a moment. A host that answers with nothing keeps today's page.
+ *
+ * The calls are queued: a second tick reaches the host only once the first
+ * settled, so a host that applies `toggleTaskAt` to its latest bytes never
+ * has two writes of the same note in flight.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+/** How long "Not saved" stays on an item, in milliseconds. */
+export const FAILED_NOTICE_MS = 2500;
+export function isThenable(value) {
+    return typeof value === 'object' && value !== null && typeof value.then === 'function';
+}
+export function useTaskSaves(onToggleTask) {
+    const [states, setStates] = useState(() => new Map());
+    const [announcement, setAnnouncement] = useState('');
+    // Every save still in flight, and the end of the queue: a settled promise, whatever the outcome.
+    const inFlight = useRef(0);
+    const tail = useRef(Promise.resolve());
+    const timers = useRef(new Set());
+    // The latest callback, so a queued tick reaches the host's current one and not the one of its render.
+    const latest = useRef(onToggleTask);
+    latest.current = onToggleTask;
+    useEffect(() => {
+        const pending = timers.current;
+        return () => {
+            for (const timer of pending)
+                clearTimeout(timer);
+        };
+    }, []);
+    const put = (ordinal, save) => setStates((all) => {
+        const next = new Map(all);
+        if (save)
+            next.set(ordinal, save);
+        else
+            next.delete(ordinal);
+        return next;
+    });
+    const track = (ordinal, checked, save) => {
+        inFlight.current += 1;
+        put(ordinal, { kind: 'pending', checked });
+        setAnnouncement('updating');
+        tail.current = save.then(() => {
+            inFlight.current -= 1;
+            put(ordinal, null);
+            setAnnouncement('saved');
+        }, () => {
+            inFlight.current -= 1;
+            put(ordinal, { kind: 'failed' });
+            setAnnouncement('notSaved');
+            const timer = setTimeout(() => {
+                timers.current.delete(timer);
+                setStates((all) => {
+                    if (all.get(ordinal)?.kind !== 'failed')
+                        return all;
+                    const next = new Map(all);
+                    next.delete(ordinal);
+                    return next;
+                });
+            }, FAILED_NOTICE_MS);
+            timers.current.add(timer);
+        });
+    };
+    const toggle = useCallback((ordinal, checked) => {
+        const call = () => latest.current?.(ordinal);
+        if (inFlight.current === 0) {
+            // Nothing ahead of it: the host is asked now, and an answer of nothing draws no lock.
+            const result = call();
+            if (isThenable(result))
+                track(ordinal, checked, Promise.resolve(result));
+            return;
+        }
+        // Something is in flight: the box locks at once, and the host is asked once the queue reaches it.
+        track(ordinal, checked, tail.current.then(() => call()));
+        // `track` reads only refs and state setters, so the one made on the first render serves every tick.
+    }, []);
+    const stateOf = useCallback((ordinal) => states.get(ordinal) ?? null, [states]);
+    return { stateOf, toggle, announcement };
+}

package/dist/theme.d.ts

@@ -21,6 +21,8 @@
  * is read by the default theme's rules.
  */
 import type { ReactNode } from 'react';
+import type { FileShape } from './file-types.js';
+import type { KeptFile } from './host.js';
 import type { PropertyEntry } from './properties.js';
 export type Scheme = 'light' | 'dark';
 /**
@@ -66,6 +68,8 @@ export interface ThemeProperties {
     readonly iconDanger?: string;
     readonly iconExample?: string;
     readonly iconQuote?: string;
+    /** The chevron of a callout that folds (#83), a CSS image used as a mask. */
+    readonly iconChevron?: string;
     readonly fontSans?: string;
     readonly fontDisplay?: string;
     readonly fontMono?: string;
@@ -194,6 +198,10 @@ export interface TaskBoxSlotProps {
     readonly enabled: boolean;
     /** Reports the tick to the host; does nothing when the box is not enabled. */
     readonly toggle: () => void;
+    /** The host is saving a tick of this box: `checked` is the state being written, and the box is not enabled. */
+    readonly pending: boolean;
+    /** The host failed to save the last tick: `checked` is back to what the source holds. */
+    readonly failed: boolean;
 }
 /** A wikilink to a note (§5.2). */
 export interface WikilinkSlotProps {
@@ -232,6 +240,43 @@ export interface PropertiesSlotProps {
      */
     readonly value: (text: string) => ReactNode;
 }
+/**
+ * The switch between reading and editing a note, at its top right (#51). It is drawn only when the
+ * host made the note `editable`; a theme decides how it looks, never whether editing is allowed.
+ */
+export interface ModeSwitchSlotProps {
+    /** The mode the note is in. */
+    readonly mode: 'view' | 'edit';
+    /** The word of the action the switch takes, in the reader's language: `strings.edit` or `strings.view`. */
+    readonly label: string;
+    /** The default theme's icon of that action: a pencil to edit, an eye to read. */
+    readonly icon: ReactNode;
+    /** Whether the host asked for the icon alone or the icon and its word. */
+    readonly display: 'icon' | 'label';
+    /** Switches to the other mode. */
+    readonly toggle: () => void;
+}
+/**
+ * A file the notebook keeps, where a note embedded it, described by the host's `fileOf` (#77): the
+ * slot decides how it looks, the package what it is.
+ */
+export interface AttachmentSlotProps {
+    /** The name it is kept under, as the embed wrote it. */
+    readonly name: string;
+    /** What the host said of it, its addresses already through the package's filter. */
+    readonly file: KeptFile;
+    /** The shape its media type is drawn in: `image`, `audio`, `video` or `card`. */
+    readonly shape: FileShape;
+    /** Its type in the reader's words, or its media type. */
+    readonly kind: string;
+    /** Its size in the reader's locale. */
+    readonly size: string;
+    /** Whether a browser shows it on its own, so a card may offer to open it. */
+    readonly opens: boolean;
+    /** The dimensions the embed declared (§3.14), in CSS pixels, or `null`. */
+    readonly width: number | null;
+    readonly height: number | null;
+}
 /** The slots a theme may fill. Each one left out is drawn as the default theme draws it. */
 export interface ThemeComponents {
     readonly callout: (props: CalloutSlotProps) => ReactNode;
@@ -244,11 +289,13 @@ export interface ThemeComponents {
     readonly heading: (props: HeadingSlotProps) => ReactNode;
     readonly blockquote: (props: BlockquoteSlotProps) => ReactNode;
     readonly embed: (props: EmbedSlotProps) => ReactNode;
+    readonly attachment: (props: AttachmentSlotProps) => ReactNode;
     readonly footnotes: (props: FootnotesSlotProps) => ReactNode;
     readonly taskBox: (props: TaskBoxSlotProps) => ReactNode;
     readonly wikilink: (props: WikilinkSlotProps) => ReactNode;
     readonly diagram: (props: DiagramSlotProps) => ReactNode;
     readonly properties: (props: PropertiesSlotProps) => ReactNode;
+    readonly modeSwitch: (props: ModeSwitchSlotProps) => ReactNode;
 }
 /** The names of the slots, in the order the documentation lists them. */
 export declare const THEME_SLOTS: (keyof ThemeComponents)[];

package/dist/theme.js

@@ -28,7 +28,7 @@ export const THEME_PROPERTIES = Object.keys({
     calloutInfo: 1, calloutIdea: 1, calloutDone: 1, calloutWarn: 1, calloutStop: 1, calloutAside: 1, calloutQuote: 1,
     calloutTitleLinkDecoration: 1, calloutTitleLinkOffset: 1,
     iconNote: 1, iconInfo: 1, iconSummary: 1, iconTip: 1, iconSuccess: 1, iconQuestion: 1, iconWarning: 1,
-    iconFailure: 1, iconDanger: 1, iconExample: 1, iconQuote: 1,
+    iconFailure: 1, iconDanger: 1, iconExample: 1, iconQuote: 1, iconChevron: 1,
     fontSans: 1, fontDisplay: 1, fontMono: 1, fontHeading: 1,
     radius: 1, radiusLarge: 1,
     fontSize: 1, lineHeight: 1, lineHeightTight: 1, rootLineHeight: 1, paragraphSpacing: 1, headingSpacing: 1,
@@ -50,7 +50,7 @@ export function customPropertyOf(name) {
 /** The names of the slots, in the order the documentation lists them. */
 export const THEME_SLOTS = Object.keys({
     callout: 1, calloutIcon: 1, table: 1, codeBlock: 1, inlineCode: 1, heading: 1, blockquote: 1,
-    embed: 1, footnotes: 1, taskBox: 1, wikilink: 1, diagram: 1, properties: 1,
+    embed: 1, attachment: 1, footnotes: 1, taskBox: 1, wikilink: 1, diagram: 1, properties: 1, modeSwitch: 1,
 });
 const NAME = /^[a-z][a-z0-9-]*$/;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memorysmithapp/markdown-renderer",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "A React component that draws a MemorySmith note exactly as MemorySmith's reading page does.",
   "keywords": [
     "markdown",
@@ -30,6 +30,8 @@
   "files": [
     "dist/*.js",
     "dist/*.d.ts",
+    "dist/edit/*.js",
+    "dist/edit/*.d.ts",
     "styles.css",
     "structure.css",
     "theme-default.css",
@@ -46,6 +48,10 @@
       "types": "./dist/diagnose.d.ts",
       "default": "./dist/diagnose.js"
     },
+    "./edit": {
+      "types": "./dist/edit/index.d.ts",
+      "default": "./dist/edit/index.js"
+    },
     "./styles.css": "./styles.css",
     "./structure.css": "./structure.css",
     "./theme-default.css": "./theme-default.css"
@@ -56,6 +62,12 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "6.20.3",
+    "@codemirror/commands": "6.11.1",
+    "@codemirror/lang-markdown": "6.5.2",
+    "@codemirror/language": "6.12.4",
+    "@codemirror/state": "6.7.6",
+    "@codemirror/view": "6.43.13",
     "hast-util-to-jsx-runtime": "2.3.6",
     "mermaid": "11.17.0",
     "react-markdown": "9.1.0",
@@ -67,7 +79,7 @@
     "unified": "11.0.5"
   },
   "devDependencies": {
-    "@memorysmithapp/markdown-spec": "0.3.2",
+    "@memorysmithapp/markdown-spec": "0.5.0",
     "@types/hast": "3.0.5",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",