@sciflow/editor-start 0.0.1-beta → 0.0.2

package/dist/lib/format-bar.js

@@ -17,17 +17,31 @@ import { __decorate } from "tslib";
  *
  * The component code below is annotated to map those steps to specific hooks.
  */
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { t, LOCALE_CHANGE_EVENT } from '@sciflow/editor-core';
+import { materialIcons } from './icons-generated.js';
 import formatBarCss from './format-bar.css?inline';
 import { applyThemeStylesToRoot, subscribeToSciFlowTheme } from './theme.js';
+/* Inline SVG icons for each style option (16×16). */
+const styleIcons = {
+    paragraph: html `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><rect x="2" y="3" width="12" height="1.5" rx=".75"/><rect x="2" y="7" width="10" height="1.5" rx=".75"/><rect x="2" y="11" width="8" height="1.5" rx=".75"/></svg>`,
+    'heading-1': html `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><text x="1" y="13" font-size="13" font-weight="700" font-family="system-ui,sans-serif">H<tspan font-size="10">1</tspan></text></svg>`,
+    'heading-2': html `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><text x="1" y="13" font-size="13" font-weight="700" font-family="system-ui,sans-serif">H<tspan font-size="10">2</tspan></text></svg>`,
+    'heading-3': html `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><text x="1" y="13" font-size="13" font-weight="700" font-family="system-ui,sans-serif">H<tspan font-size="10">3</tspan></text></svg>`,
+    blockquote: html `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.5 4C2.67 4 2 4.67 2 5.5v2C2 8.33 2.67 9 3.5 9H5l-1 3h1.6l1-3h.4V5.5C7 4.67 6.33 4 5.5 4h-2zm6 0C8.67 4 8 4.67 8 5.5v2C8 8.33 8.67 9 9.5 9H11l-1 3h1.6l1-3h.4V5.5c0-.83-.67-1.5-1.5-1.5h-2z"/></svg>`,
+};
 const STYLE_OPTIONS = [
-    { label: 'Paragraph', value: 'paragraph' },
-    { label: 'Heading 1', value: 'heading-1', level: 1 },
-    { label: 'Heading 2', value: 'heading-2', level: 2 },
-    { label: 'Heading 3', value: 'heading-3', level: 3 },
+    { get label() { return t('formatBar.styleParagraph'); }, value: 'paragraph', cssClass: 'style-option--paragraph' },
+    { get label() { return t('formatBar.styleHeading1'); }, value: 'heading-1', level: 1, cssClass: 'style-option--h1' },
+    { get label() { return t('formatBar.styleHeading2'); }, value: 'heading-2', level: 2, cssClass: 'style-option--h2' },
+    { get label() { return t('formatBar.styleHeading3'); }, value: 'heading-3', level: 3, cssClass: 'style-option--h3' },
+    { get label() { return t('cmd.toggleBlockquote.label'); }, value: 'blockquote', cssClass: 'style-option--blockquote', command: 'toggleBlockquote' },
 ];
+/** SVG chevron shared by dropdown triggers. */
+const chevronSvg = html `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>`;
 /**
  * Custom element that renders the demo formatting toolbar.
  *
@@ -46,6 +60,8 @@ let SciFlowFormatBarElement = class SciFlowFormatBarElement extends LitElement {
         /** Reference to the editor element. May be passed directly via property binding. */
         this.editor = null;
         this.selectionVersion = 0;
+        this.styleMenuOpen = false;
+        this.insertMenuOpen = false;
         this.resolvedEditor = null;
         this.themeStyleElements = [];
     }
@@ -53,14 +69,27 @@ let SciFlowFormatBarElement = class SciFlowFormatBarElement extends LitElement {
     /** Subscribe to editor events once the toolbar attaches to the DOM. */
     connectedCallback() {
         super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'toolbar');
+        }
+        if (!this.hasAttribute('aria-label')) {
+            this.setAttribute('aria-label', t('formatBar.toolbarAriaLabel'));
+        }
         this.themeUnsub = subscribeToSciFlowTheme((cssTexts) => {
             this.themeStyleElements = applyThemeStylesToRoot(this.renderRoot, this.themeStyleElements, cssTexts);
         });
+        this.localeListener = () => this.requestUpdate();
+        document.addEventListener(LOCALE_CHANGE_EVENT, this.localeListener);
         this.resolveEditorReference();
     }
     /** Remove listeners when the toolbar is detached. */
     disconnectedCallback() {
         this.detachEditorListeners();
+        this.removeOutsideClickHandler();
+        if (this.localeListener) {
+            document.removeEventListener(LOCALE_CHANGE_EVENT, this.localeListener);
+            this.localeListener = undefined;
+        }
         this.themeUnsub?.();
         this.themeUnsub = undefined;
         super.disconnectedCallback();
@@ -80,47 +109,290 @@ let SciFlowFormatBarElement = class SciFlowFormatBarElement extends LitElement {
      */
     render() {
         const runner = this.getCommandRunner();
-        const availableCommands = runner?.available?.() ?? null;
-        const headingCommandsAvailable = typeof availableCommands?.setHeading === 'function' || typeof availableCommands?.setParagraph === 'function';
-        const activeStyle = this.getActiveBlockStyle();
-        const selectDisabled = !runner || !headingCommandsAvailable;
         const commandMetadata = runner?.commandsMeta?.() ?? {};
         const commandGroups = this.getCommandGroups(commandMetadata);
         const tableGroup = 'table';
-        const primaryGroups = commandGroups.filter((group) => group !== tableGroup);
+        const mediaGroup = 'media';
+        const insertGroup = 'insert';
+        const blockGroup = 'block';
+        const primaryGroups = commandGroups.filter((group) => group !== tableGroup && group !== mediaGroup && group !== insertGroup && group !== blockGroup);
         const tableGroups = commandGroups.filter((group) => group === tableGroup);
+        const selectionInTable = this.isSelectionInTable();
         return html `
-      <select
-        class="style-select"
-        aria-label="Text style"
-        .value=${activeStyle}
-        ?disabled=${selectDisabled}
-        @change=${this.handleStyleChange}
-      >
-        ${STYLE_OPTIONS.map((option) => html `
-            <option
-              value=${option.value}
-              ?selected=${option.value === activeStyle}
-              ?disabled=${!this.canUseStyleOption(option, availableCommands)}
-            >
-              ${option.label}
-            </option>
-          `)}
-      </select>
-      <div class="command-rows">
-        ${primaryGroups.length
-            ? html `<div class="command-row">
-              ${primaryGroups.map((group) => this.renderCommandGroup(runner, commandMetadata, group))}
-            </div>`
-            : null}
-        ${tableGroups.length
-            ? html `<div class="command-row table-row">
-              ${tableGroups.map((group) => this.renderCommandGroup(runner, commandMetadata, group))}
-            </div>`
-            : null}
+      <div class="command-group">
+        ${this.renderStyleDropdown(runner)}
+        ${this.renderInsertDropdown(runner, commandMetadata)}
+      </div>
+      ${primaryGroups.map((group) => html `
+        <div class="command-group">
+          ${this.renderCommandGroup(runner, commandMetadata, group)}
+        </div>
+      `)}
+      <div class="command-group">
+        ${this.renderFixedCommandButton(runner, 'undo', 'undo', t('formatBar.undo'), t('formatBar.undoDescription'))}
+        ${this.renderFixedCommandButton(runner, 'redo', 'redo', t('formatBar.redo'), t('formatBar.redoDescription'))}
+      </div>
+      ${tableGroups.length && selectionInTable
+            ? html `<div class="table-row" role="toolbar" aria-label=${t('formatBar.tableAriaLabel')}>
+            <span class="table-row-label">${t('formatBar.tableLabel')}</span>
+            ${this.renderTableSubGroups(runner, commandMetadata)}
+          </div>`
+            : nothing}
+    `;
+    }
+    /* --------------------------------------------------------- */
+    /*  Style dropdown (Paragraph / Heading 1–3)                 */
+    /* --------------------------------------------------------- */
+    renderStyleDropdown(runner) {
+        const availableCommands = runner?.available?.() ?? null;
+        const headingCommandsAvailable = typeof availableCommands?.setHeading === 'function' || typeof availableCommands?.setParagraph === 'function';
+        const activeStyle = this.getActiveBlockStyle();
+        const selectDisabled = !runner || !headingCommandsAvailable;
+        const activeLabel = STYLE_OPTIONS.find((o) => o.value === activeStyle)?.label ?? t('formatBar.styleParagraph');
+        return html `
+      <div class="style-dropdown">
+        <button
+          type="button"
+          class="style-dropdown-trigger"
+          aria-label=${t('formatBar.textStyleAriaLabel')}
+          aria-haspopup="listbox"
+          aria-expanded=${this.styleMenuOpen ? 'true' : 'false'}
+          ?disabled=${selectDisabled}
+          @click=${this.toggleStyleMenu}
+        >
+          ${activeLabel}
+          <span class="dropdown-chevron">${chevronSvg}</span>
+        </button>
+        ${this.styleMenuOpen
+            ? html `
+            <div class="style-dropdown-menu" role="listbox" aria-label=${t('formatBar.textStyleAriaLabel')}>
+              ${STYLE_OPTIONS.map((option) => {
+                const isActive = option.command
+                    ? this.isBlockquoteActive()
+                    : option.value === activeStyle;
+                const canUse = option.command
+                    ? this.canUseCommand(option.command, runner)
+                    : this.canUseStyleOption(option, availableCommands);
+                return html `
+                  <button
+                    type="button"
+                    role="option"
+                    class=${classMap({
+                    'style-option': true,
+                    [option.cssClass]: true,
+                    active: isActive,
+                })}
+                    aria-selected=${isActive ? 'true' : 'false'}
+                    ?disabled=${!canUse}
+                    @click=${() => this.selectStyle(option, runner)}
+                  >
+                    <span class="style-option-icon">${styleIcons[option.value]}</span>
+                    ${option.label}
+                  </button>
+                `;
+            })}
+            </div>
+          `
+            : nothing}
+      </div>
+    `;
+    }
+    toggleStyleMenu(e) {
+        e.stopPropagation();
+        this.insertMenuOpen = false;
+        this.styleMenuOpen = !this.styleMenuOpen;
+        if (this.styleMenuOpen) {
+            this.installOutsideClickHandler();
+        }
+        else {
+            this.removeOutsideClickHandler();
+        }
+    }
+    selectStyle(option, runner) {
+        this.styleMenuOpen = false;
+        this.removeOutsideClickHandler();
+        if (option.command) {
+            const command = runner?.commands?.[option.command];
+            if (typeof command === 'function') {
+                const result = command();
+                if (result) {
+                    this.selectionVersion++;
+                    this.requestUpdate();
+                }
+            }
+        }
+        else if (option.value === 'paragraph') {
+            this.handleSetParagraph();
+        }
+        else if (option.level) {
+            this.handleSetHeading(option.level);
+        }
+    }
+    isBlockquoteActive() {
+        const state = this.resolvedEditor?.editorView?.state;
+        if (!state)
+            return false;
+        const bqType = state.schema.nodes.blockquote;
+        if (!bqType)
+            return false;
+        const { from, to } = state.selection;
+        let found = false;
+        state.doc.nodesBetween(from, to, (node) => {
+            if (node.type === bqType) {
+                found = true;
+                return false;
+            }
+            return true;
+        });
+        return found;
+    }
+    canUseCommand(commandName, runner) {
+        const availability = runner?.available?.();
+        if (availability?.[commandName])
+            return availability[commandName]();
+        return typeof runner?.commands?.[commandName] === 'function';
+    }
+    /* --------------------------------------------------------- */
+    /*  Insert dropdown (icon + chevron → popover)               */
+    /* --------------------------------------------------------- */
+    renderInsertDropdown(runner, metadata) {
+        const availability = runner?.available?.() ?? null;
+        // Collect block-level insert commands (media group + table insert + footnote)
+        const insertCommands = Object.entries(metadata)
+            .filter(([name, meta]) => meta && (meta.group === 'media' || name === 'insertNativeTableFigure' || name === 'insertFootnote'))
+            .sort(([, a], [, b]) => (a?.order ?? 0) - (b?.order ?? 0));
+        if (insertCommands.length === 0) {
+            return null;
+        }
+        return html `
+      <div class="insert-dropdown">
+        <button
+          type="button"
+          class="insert-dropdown-trigger"
+          aria-label=${t('formatBar.insert')}
+          aria-haspopup="menu"
+          aria-expanded=${this.insertMenuOpen ? 'true' : 'false'}
+          @click=${this.toggleInsertMenu}
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+          <span class="dropdown-chevron">${chevronSvg}</span>
+        </button>
+        ${this.insertMenuOpen
+            ? html `
+            <div class="insert-dropdown-menu" role="menu">
+              ${insertCommands.map(([name, meta]) => {
+                const canExecute = availability?.[name] ? availability[name]() : true;
+                return html `
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="insert-menu-item"
+                    ?disabled=${!canExecute}
+                    @click=${() => this.executeInsertCommand(name, runner)}
+                  >
+                    ${meta?.icon && materialIcons[meta.icon]
+                    ? html `<span class="cmd-icon" aria-hidden="true">${unsafeHTML(materialIcons[meta.icon])}</span>`
+                    : nothing}
+                    ${meta?.label ?? name}
+                  </button>
+                `;
+            })}
+            </div>
+          `
+            : nothing}
       </div>
     `;
     }
+    toggleInsertMenu(e) {
+        e.stopPropagation();
+        this.styleMenuOpen = false;
+        this.insertMenuOpen = !this.insertMenuOpen;
+        if (this.insertMenuOpen) {
+            this.installOutsideClickHandler();
+        }
+        else {
+            this.removeOutsideClickHandler();
+        }
+    }
+    executeInsertCommand(commandName, runner) {
+        this.insertMenuOpen = false;
+        this.removeOutsideClickHandler();
+        if (!runner)
+            return;
+        const command = runner.commands?.[commandName];
+        if (typeof command === 'function') {
+            const result = command();
+            if (result) {
+                this.selectionVersion++;
+                this.requestUpdate();
+            }
+        }
+    }
+    /* --------------------------------------------------------- */
+    /*  Shared dropdown close-on-outside-click                   */
+    /* --------------------------------------------------------- */
+    installOutsideClickHandler() {
+        this.removeOutsideClickHandler();
+        this.outsideClickHandler = (e) => {
+            const path = e.composedPath();
+            if (!path.includes(this)) {
+                this.styleMenuOpen = false;
+                this.insertMenuOpen = false;
+                this.removeOutsideClickHandler();
+            }
+        };
+        // Use capture + next frame so the current click doesn't immediately close.
+        requestAnimationFrame(() => {
+            if (this.outsideClickHandler) {
+                document.addEventListener('click', this.outsideClickHandler, true);
+            }
+        });
+    }
+    removeOutsideClickHandler() {
+        if (this.outsideClickHandler) {
+            document.removeEventListener('click', this.outsideClickHandler, true);
+            this.outsideClickHandler = undefined;
+        }
+    }
+    /* --------------------------------------------------------- */
+    /*  Fixed command buttons (undo / redo)                      */
+    /* --------------------------------------------------------- */
+    /**
+     * Render fixed toolbar commands that are not driven by metadata groups.
+     */
+    renderFixedCommandButton(runner, commandName, icon, label, description) {
+        const command = runner?.commands?.[commandName];
+        if (typeof command !== 'function') {
+            return null;
+        }
+        const availability = runner?.available?.();
+        const canExecute = availability?.[commandName] ? availability[commandName]() : true;
+        const handleClick = () => {
+            if (!canExecute) {
+                return;
+            }
+            const result = command();
+            if (result) {
+                this.selectionVersion++;
+                this.requestUpdate();
+            }
+        };
+        return html `
+      <button
+        type="button"
+        aria-label=${label}
+        title=${description}
+        ?disabled=${!canExecute}
+        data-tooltip=${description}
+        @click=${handleClick}
+      >
+        <span class="cmd-icon" aria-hidden="true">${unsafeHTML(materialIcons[icon] ?? '')}</span>
+      </button>
+    `;
+    }
+    /* --------------------------------------------------------- */
+    /*  Editor resolution & event wiring                         */
+    /* --------------------------------------------------------- */
     /**
      * Find the target editor element and attach listeners for selection changes.
      * This mirrors the wiring a framework component would perform in `useEffect`.
@@ -186,20 +458,9 @@ let SciFlowFormatBarElement = class SciFlowFormatBarElement extends LitElement {
     getCommandRunner() {
         return this.resolvedEditor?.commands ?? null;
     }
-    /** Interpret the block-style dropdown and trigger the relevant commands. */
-    handleStyleChange(event) {
-        const select = event.target;
-        const value = select.value;
-        if (value === 'paragraph') {
-            this.handleSetParagraph();
-            return;
-        }
-        const parsed = Number.parseInt(value.split('-')[1] ?? '', 10);
-        if (!Number.isInteger(parsed)) {
-            return;
-        }
-        this.handleSetHeading(parsed);
-    }
+    /* --------------------------------------------------------- */
+    /*  Heading / paragraph commands                             */
+    /* --------------------------------------------------------- */
     /** Apply a specific heading level after ensuring the editor can handle it. */
     handleSetHeading(level) {
         const runner = this.getCommandRunner();
@@ -306,13 +567,59 @@ let SciFlowFormatBarElement = class SciFlowFormatBarElement extends LitElement {
         }
         return commands.setHeading?.(level) ?? false;
     }
+    /** True if the current selection is inside a table (cell or header). */
+    isSelectionInTable() {
+        const state = this.resolvedEditor?.editorView?.state;
+        if (!state) {
+            return false;
+        }
+        const { table, table_cell, table_header } = state.schema.nodes;
+        if (!table || !table_cell || !table_header) {
+            return false;
+        }
+        const { $from } = state.selection;
+        for (let d = $from.depth; d > 0; d--) {
+            const node = $from.node(d);
+            if (node.type === table || node.type === table_cell || node.type === table_header) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Render table commands split into logical sub-groups (columns, rows,
+     * merge/split, header toggles, navigation/delete) separated visually.
+     */
+    renderTableSubGroups(runner, metadata) {
+        const subGroups = [
+            ['insertNativeTableFigure'],
+            ['addColumnBefore', 'addColumnAfter', 'deleteColumn'],
+            ['addRowBefore', 'addRowAfter', 'deleteRow'],
+            ['mergeCells', 'splitCell'],
+            ['toggleHeaderRow', 'toggleHeaderColumn'],
+            ['goToNextCell', 'deleteTable'],
+        ];
+        return subGroups.map((names) => {
+            const buttons = this.renderCommandGroup(runner, metadata, 'table', names);
+            return html `<div class="command-group">${buttons}</div>`;
+        });
+    }
     /**
      * Render a set of command buttons that share the same metadata group.
      * Groups are sorted by each command's declared order so feature authors control layout.
+     * When onlyCommandNames is set, only those commands in the group are rendered.
      */
-    renderCommandGroup(runner, metadata, group) {
+    renderCommandGroup(runner, metadata, group, onlyCommandNames) {
         return Object.entries(metadata)
-            .filter(([, meta]) => meta?.group === group && (meta.icon || meta.label))
+            .filter(([name, meta]) => {
+            if (meta?.group !== group || !(meta.icon || meta.label)) {
+                return false;
+            }
+            if (onlyCommandNames !== undefined && !onlyCommandNames.includes(name)) {
+                return false;
+            }
+            return true;
+        })
             .sort(([, a], [, b]) => (a?.order ?? 0) - (b?.order ?? 0))
             .map(([name, meta]) => this.renderCommandButton(name, meta, runner));
     }
@@ -345,13 +652,13 @@ let SciFlowFormatBarElement = class SciFlowFormatBarElement extends LitElement {
         class=${classMap({ active: isActive })}
         aria-label=${meta.label ?? name}
         title=${meta.description ?? meta.label ?? name}
-        ?aria-pressed=${meta.isActive ? (isActive ? 'true' : 'false') : undefined}
+        aria-pressed=${meta.isActive ? (isActive ? 'true' : 'false') : undefined}
         ?disabled=${!canExecute}
         data-tooltip=${meta.description ?? meta.label ?? name}
         @click=${handleClick}
       >
         ${meta.icon
-            ? html `<span class="material-symbols-rounded" aria-hidden="true">${meta.icon}</span>`
+            ? html `<span class="cmd-icon" aria-hidden="true">${unsafeHTML(materialIcons[meta.icon] ?? '')}</span>`
             : meta.label ?? name}
       </button>
     `;
@@ -395,6 +702,12 @@ __decorate([
 __decorate([
     state()
 ], SciFlowFormatBarElement.prototype, "selectionVersion", void 0);
+__decorate([
+    state()
+], SciFlowFormatBarElement.prototype, "styleMenuOpen", void 0);
+__decorate([
+    state()
+], SciFlowFormatBarElement.prototype, "insertMenuOpen", void 0);
 SciFlowFormatBarElement = __decorate([
     customElement('sciflow-formatbar')
 ], SciFlowFormatBarElement);

package/dist/lib/ghost-cursor.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @module ghost-cursor
+ *
+ * ProseMirror feature that keeps the cursor position visible when the editor
+ * loses focus. A thin blue bar is rendered at the last cursor position so
+ * the user always knows where the next insertion (e.g. Cite, Insert ref) will land.
+ */
+import type { Feature } from '@sciflow/editor-core';
+export declare const ghostCursorFeature: Feature;
+//# sourceMappingURL=ghost-cursor.d.ts.map

package/dist/lib/ghost-cursor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ghost-cursor.d.ts","sourceRoot":"","sources":["../../src/lib/ghost-cursor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAsDpD,eAAO,MAAM,kBAAkB,EAAE,OAKhC,CAAC"}

package/dist/lib/ghost-cursor.js

@@ -0,0 +1,59 @@
+/**
+ * @module ghost-cursor
+ *
+ * ProseMirror feature that keeps the cursor position visible when the editor
+ * loses focus. A thin blue bar is rendered at the last cursor position so
+ * the user always knows where the next insertion (e.g. Cite, Insert ref) will land.
+ */
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+const ghostCursorKey = new PluginKey('ghostCursor');
+const ghostCursorPlugin = new Plugin({
+    key: ghostCursorKey,
+    state: {
+        init: () => true,
+        apply(tr, focused) {
+            const next = tr.getMeta(ghostCursorKey);
+            return typeof next === 'boolean' ? next : focused;
+        },
+    },
+    props: {
+        handleDOMEvents: {
+            blur(view) {
+                view.dispatch(view.state.tr.setMeta(ghostCursorKey, false));
+                return false;
+            },
+            focus(view) {
+                view.dispatch(view.state.tr.setMeta(ghostCursorKey, true));
+                return false;
+            },
+        },
+        decorations(state) {
+            const focused = ghostCursorKey.getState(state);
+            if (focused !== false)
+                return DecorationSet.empty;
+            const { selection } = state;
+            // For a range selection, highlight the selected text instead of showing a caret
+            if (!selection.empty) {
+                return DecorationSet.create(state.doc, [
+                    Decoration.inline(selection.from, selection.to, {
+                        class: 'prosemirror-ghost-selection',
+                    }),
+                ]);
+            }
+            // For a collapsed cursor, insert a widget caret marker
+            const el = document.createElement('span');
+            el.className = 'prosemirror-ghost-cursor';
+            el.setAttribute('aria-hidden', 'true');
+            return DecorationSet.create(state.doc, [
+                Decoration.widget(selection.head, el, { side: 0, key: 'ghost-cursor' }),
+            ]);
+        },
+    },
+});
+export const ghostCursorFeature = {
+    name: 'ghost-cursor',
+    addPlugins() {
+        return [ghostCursorPlugin];
+    },
+};

package/dist/lib/icons-generated.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Auto-generated – do not edit.
+ * Run `node scripts/generate-icons.mjs` to regenerate.
+ *
+ * Icons: Material Symbols Rounded, weight 400, unfilled.
+ * Source: @material-symbols/svg-400 (Apache License 2.0, Copyright Google LLC)
+ * https://github.com/google/material-design-icons
+ */
+/**
+ * Map of icon names (as used in CommandMetadata.icon) → inline SVG markup.
+ * Only the icons actually used by the editor are included (~29 icons).
+ */
+export declare const materialIcons: Record<string, string>;
+//# sourceMappingURL=icons-generated.d.ts.map

package/dist/lib/icons-generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons-generated.d.ts","sourceRoot":"","sources":["../../src/lib/icons-generated.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAWH;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwChD,CAAC"}