npm - @synclineapi/mdx-editor - Versions diffs - 0.1.1 → 1.0.0 - Mend

@synclineapi/mdx-editor 0.1.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/README.md +320 -140
package/dist/core/config/EditorConfig.d.ts +5 -0
package/dist/core/config/defaults.d.ts +33 -0
package/dist/core/config/index.d.ts +2 -0
package/dist/core/dom/editor-pane.d.ts +7 -0
package/dist/core/dom/editor-root.d.ts +8 -0
package/dist/core/dom/index.d.ts +11 -0
package/dist/core/dom/preview-pane.d.ts +5 -0
package/dist/core/dom/skip-link.d.ts +1 -0
package/dist/core/dom/status-bar.d.ts +13 -0
package/dist/core/dom/toolbar-dom.d.ts +5 -0
package/dist/core/editor.d.ts +99 -6
package/dist/core/mdx-themes.d.ts +3 -0
package/dist/core/platform.d.ts +31 -0
package/dist/core/plugin-manager.d.ts +1 -24
package/dist/core/plugins/PluginContext.d.ts +24 -0
package/dist/core/plugins/PluginManager.d.ts +33 -0
package/dist/core/plugins/index.d.ts +3 -0
package/dist/core/renderer/CodeRenderer.d.ts +4 -0
package/dist/core/renderer/ListRenderer.d.ts +5 -0
package/dist/core/renderer/MarkdownRenderer.d.ts +7 -0
package/dist/core/renderer/MdxValidator.d.ts +3 -0
package/dist/core/renderer/Renderer.d.ts +10 -0
package/dist/core/renderer/TableRenderer.d.ts +4 -0
package/dist/core/renderer/index.d.ts +7 -0
package/dist/core/renderer/sanitize.d.ts +1 -0
package/dist/core/renderer.d.ts +6 -28
package/dist/core/toolbar.d.ts +1 -0
package/dist/core/types.d.ts +72 -2
package/dist/core/ui/AutocompleteController.d.ts +58 -0
package/dist/core/ui/DropdownController.d.ts +8 -0
package/dist/core/ui/FindReplaceController.d.ts +60 -0
package/dist/core/ui/LineNumberController.d.ts +218 -0
package/dist/core/ui/ModeController.d.ts +9 -0
package/dist/core/ui/PreviewController.d.ts +13 -0
package/dist/core/ui/ResponsiveController.d.ts +30 -0
package/dist/core/ui/SplitterController.d.ts +31 -0
package/dist/core/ui/StatusBarController.d.ts +16 -0
package/dist/core/ui/ThemeController.d.ts +8 -0
package/dist/core/ui/ToolbarController.d.ts +10 -0
package/dist/core/ui/UIController.d.ts +43 -0
package/dist/core/ui/index.d.ts +12 -0
package/dist/index.d.ts +28 -1
package/dist/plugins/basic-formatting/index.d.ts +1 -0
package/dist/plugins/callouts/index.d.ts +1 -0
package/dist/plugins/diagrams/index.d.ts +1 -0
package/dist/plugins/index.d.ts +1 -11
package/dist/plugins/layout/index.d.ts +3 -0
package/dist/plugins/lists/index.d.ts +1 -0
package/dist/plugins/media/index.d.ts +2 -0
package/dist/plugins/utilities/index.d.ts +5 -0
package/dist/style.css +1 -1
package/dist/syncline-mdx-editor.js +8468 -1812
package/dist/syncline-mdx-editor.umd.cjs +958 -87
package/package.json +6 -12

package/dist/core/dom/index.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export { createEditorRoot } from './editor-root';
+export type { EditorRootElements } from './editor-root';
+export { createEditorPane } from './editor-pane';
+export type { EditorPaneElements } from './editor-pane';
+export { createPreviewPane } from './preview-pane';
+export type { PreviewPaneElements } from './preview-pane';
+export { createToolbarDOM } from './toolbar-dom';
+export type { ToolbarDOMElements } from './toolbar-dom';
+export { createStatusBar } from './status-bar';
+export type { StatusBarConfig, StatusBarElements } from './status-bar';
+export { createSkipLink } from './skip-link';

package/dist/core/dom/preview-pane.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export interface PreviewPaneElements {
+    pane: HTMLDivElement;
+    content: HTMLDivElement;
+}
+export declare function createPreviewPane(id: string): PreviewPaneElements;

package/dist/core/dom/skip-link.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function createSkipLink(targetId: string): HTMLAnchorElement;

package/dist/core/dom/status-bar.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+export interface StatusBarConfig {
+    showWordCount?: boolean;
+    showLineCount?: boolean;
+    showModeSwitcher?: boolean;
+}
+export interface StatusBarElements {
+    bar: HTMLDivElement;
+    wordCount: HTMLSpanElement;
+    lineCount: HTMLSpanElement;
+    charCount: HTMLSpanElement;
+    modeSwitcher: HTMLDivElement;
+}
+export declare function createStatusBar(config?: StatusBarConfig): StatusBarElements;

package/dist/core/dom/toolbar-dom.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export interface ToolbarDOMElements {
+    container: HTMLDivElement;
+    toolbar: HTMLDivElement;
+}
+export declare function createToolbarDOM(): ToolbarDOMElements;

package/dist/core/editor.d.ts CHANGED Viewed

@@ -1,33 +1,116 @@
 import { EditorConfig, EditorAPI, EditorPlugin, EditorMode, SelectionState } from './types';
+import { CompletionItem } from '@synclineapi/editor';
 export declare class SynclineMDXEditor implements EditorAPI {
     private root;
     private toolbarEl;
+    private toolbarLeft;
+    private modeArea;
+    /** Container div where SynclineEditor mounts its DOM. */
+    private editorHost;
+    /** Hidden textarea kept for getTextarea() API compatibility. */
+    private textarea;
     private editorPane;
     private previewPane;
-    private textarea;
     private previewContent;
     private statusBar;
+    private tocContainer;
+    private tocCollapsed;
+    private splitterController;
+    /** The SynclineEditor instance (from editor/ folder). */
+    private codeEditor;
+    /** Watches .smdx-dark class changes to swap the code-editor theme in real time. */
+    private themeObserver;
     private events;
     private pluginManager;
     private toolbar;
     private renderer;
-    private history;
     private mode;
     private config;
     private renderTimer;
-    private historyTimer;
     private _destroyed;
     constructor(config: EditorConfig);
     private init;
+    /**
+     * Returns true only when an explicit `smdx-dark` class is present on the
+     * editor root, a parent element, or the document/body.
+     * Deliberately ignores OS-level prefers-color-scheme so that the theme
+     * follows the toolbar toggle button, not the system setting.
+     */
+    private isDarkMode;
+    /**
+     * Apply the correct light/dark code-editor theme AND token colours.
+     * Called automatically whenever the `.smdx-dark` class changes on any
+     * ancestor element. Can also be called programmatically when the host app
+     * switches themes via means other than a CSS class toggle (e.g. data-theme
+     * attribute, CSS variable override, or a custom theme API).
+     */
+    syncCodeEditorTheme(): void;
+    /** Observe class / data-theme mutations on the root / document so we can
+     * swap code-editor themes live.
+     *
+     * Walks every ancestor from `this.root` up to `<html>` inclusive so that
+     * toggling `.smdx-dark` OR `data-theme` on ANY containing element is caught
+     * and forwarded to `syncCodeEditorTheme()`. This covers:
+     *   - CSS class toggles  (.smdx-dark on root, body, or html)
+     *   - data-theme attribute patterns  (Next.js, Nuxt, Tailwind dark-mode)
+     *   - app-shell / modal wrapper patterns
+     */
+    private setupThemeObserver;
+    /** Completions registered directly by the consumer via `registerAutoComplete()`. */
+    private _userCompletions;
+    private mountCodeEditor;
+    /**
+     * Rebuilds the full completions list pushed into the SynclineEditor.
+     *
+     * Merge order:
+     *   1. Built-in MDX completions  — tags, attributes
+     *   2. Built-in MDX snippets     — toolbar-matched snippet bodies
+     *   3. Plugin completions        — each registered plugin's items
+     *   4. User completions          — items added via `registerAutoComplete()`
+     *
+     * Called automatically after every `registerPlugin` / `unregisterPlugin`
+     * and every `registerAutoComplete()` call.
+     */
+    private _refreshCompletions;
+    /**
+     * Register one or more custom autocomplete items on top of the built-in
+     * MDX completions. Items appear in the popup immediately and persist for
+     * the lifetime of the editor instance.
+     *
+     * Use `kind: 'snip'` with a `body` template for snippet expansion — Tab
+     * or clicking the item inserts the full body with the cursor placed at
+     * the first `$1` tab stop.
+     *
+     * @example
+     * ```ts
+     * editor.registerAutoComplete([
+     *   {
+     *     label: 'mycard',
+     *     kind: 'snip',
+     *     detail: '<MyCard> component',
+     *     description: 'Inserts a custom card block.',
+     *     body: '<MyCard title="$1">\n  $2\n</MyCard>',
+     *   },
+     *   { label: 'MyCard', kind: 'cls', detail: 'component' },
+     * ]);
+     * ```
+     */
+    registerAutoComplete(items: CompletionItem | CompletionItem[]): void;
     private buildDOM;
+    /** Convert a flat character offset to { row, col } in the document. */
+    private offsetToPos;
+    /** Convert { row, col } to a flat character offset. */
+    private posToOffset;
     private registerPlugins;
     private getDefaultToolbar;
-    private onInput;
-    private onKeyDown;
     private matchShortcut;
-    private onSelectionChange;
     private scheduleRender;
+    private getCursorPosition;
     private updateStatusBar;
+    private updateModeButtons;
+    private buildTocPanel;
+    refreshToc(): void;
+    toggleToc(): void;
     getValue(): string;
     setValue(value: string): void;
     insertText(text: string): void;
@@ -57,5 +140,15 @@ export declare class SynclineMDXEditor implements EditorAPI {
     insertAt(position: number, text: string): void;
     getWordCount(): number;
     getLineCount(): number;
+    setLineNumbers(enabled: boolean): void;
+    jumpToLine(lineNumber: number): void;
     private applyTheme;
+    /**
+     * Directly set a `ThemeDefinition` on the embedded code editor.
+     * Use this when you need to apply a theme that cannot be expressed via
+     * CSS class toggles — e.g. a fully custom colour palette loaded at runtime.
+     * Passing `null` reverts the code editor to the default MDX light/dark theme
+     * derived from the current `.smdx-dark` class state.
+     */
+    setCodeEditorTheme(theme: import('@synclineapi/editor').ThemeDefinition | null): void;
 }

package/dist/core/mdx-themes.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { ThemeDefinition } from '@synclineapi/editor';
+export declare const THEME_MDX_DARK: ThemeDefinition;
+export declare const THEME_MDX_LIGHT: ThemeDefinition;

package/dist/core/platform.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+/**
+ * Platform detection utilities for cross-platform shortcut label formatting.
+ *
+ * Shortcut labels are stored in Mac notation (⌘, ⇧, ⌥).
+ * On Windows/Linux these Unicode symbols are converted to readable text
+ * (Ctrl+, Shift+, Alt+) so users see the correct key names for their OS.
+ */
+/**
+ * Returns true when running on macOS.
+ * Tries the modern `navigator.userAgentData.platform` first, then falls back
+ * to the legacy `navigator.platform` and `navigator.userAgent`.
+ */
+export declare function isMac(): boolean;
+/**
+ * Converts a shortcut label to the correct format for the current platform.
+ *
+ * On macOS, text modifiers are converted to Unicode symbols (e.g. "Ctrl+B" → "⌘B").
+ * On Windows/Linux, Unicode symbols are replaced with their keyboard text
+ * equivalents (e.g. "⌘B" → "Ctrl+B", "⌘⇧X" → "Ctrl+Shift+X").
+ *
+ * Substitutions applied on macOS (case-insensitive):
+ *   Ctrl+   →  ⌘
+ *   Shift+  →  ⇧
+ *   Alt+    →  ⌥
+ *
+ * Substitutions applied on Windows/Linux:
+ *   ⌘  →  Ctrl+
+ *   ⇧  →  Shift+
+ *   ⌥  →  Alt+
+ */
+export declare function formatShortcutLabel(label: string): string;

package/dist/core/plugin-manager.d.ts CHANGED Viewed

@@ -1,24 +1 @@
-import { EditorPlugin, ToolbarItemConfig, ShortcutConfig, RendererConfig, ParserConfig, EditorAPI } from './types';
-import { EventEmitter } from './events';
-export declare class PluginManager {
-    private editorApi;
-    private plugins;
-    private toolbarItems;
-    private shortcuts;
-    private renderers;
-    private parsers;
-    private styleElements;
-    private events;
-    constructor(editorApi: EditorAPI, events: EventEmitter);
-    register(plugin: EditorPlugin): Promise<void>;
-    unregister(name: string): void;
-    getToolbarItem(id: string): ToolbarItemConfig | undefined;
-    getAllToolbarItems(): Map<string, ToolbarItemConfig>;
-    getShortcuts(): ShortcutConfig[];
-    getRenderers(): RendererConfig[];
-    getParsers(): ParserConfig[];
-    hasPlugin(name: string): boolean;
-    private createContext;
-    private injectStyles;
-    destroy(): void;
-}
+export { PluginManager } from './plugins/PluginManager';

package/dist/core/plugins/PluginContext.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { EditorAPI, ToolbarItemConfig, ShortcutConfig, RendererConfig, ParserConfig, EventHandler } from '../types';
+export interface PluginContextOptions {
+    editor: EditorAPI;
+    registerToolbarItem: (item: ToolbarItemConfig) => void;
+    registerShortcut: (shortcut: ShortcutConfig) => void;
+    registerRenderer: (renderer: RendererConfig) => void;
+    registerParser: (parser: ParserConfig) => void;
+    injectStyles: (css: string) => void;
+    emit: (event: string, data?: unknown) => void;
+    on: (event: string, handler: EventHandler) => void;
+    off: (event: string, handler: EventHandler) => void;
+}
+export declare class PluginContext {
+    readonly editor: EditorAPI;
+    readonly registerToolbarItem: (item: ToolbarItemConfig) => void;
+    readonly registerShortcut: (shortcut: ShortcutConfig) => void;
+    readonly registerRenderer: (renderer: RendererConfig) => void;
+    readonly registerParser: (parser: ParserConfig) => void;
+    readonly injectStyles: (css: string) => void;
+    readonly emit: (event: string, data?: unknown) => void;
+    readonly on: (event: string, handler: EventHandler) => void;
+    readonly off: (event: string, handler: EventHandler) => void;
+    constructor(options: PluginContextOptions);
+}

package/dist/core/plugins/PluginManager.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { EditorPlugin, ToolbarItemConfig, ShortcutConfig, RendererConfig, ParserConfig, EditorAPI, CompletionItem } from '../types';
+import { EventEmitter } from '../events';
+export declare class PluginManager {
+    private editorApi;
+    private plugins;
+    private toolbarItems;
+    private shortcuts;
+    private renderers;
+    private parsers;
+    private styleElements;
+    private events;
+    /** All completion items contributed by plugins, keyed by plugin name. */
+    private completionsByPlugin;
+    constructor(editorApi: EditorAPI, events: EventEmitter);
+    register(plugin: EditorPlugin): Promise<void>;
+    unregister(name: string): void;
+    getToolbarItem(id: string): ToolbarItemConfig | undefined;
+    getAllToolbarItems(): Map<string, ToolbarItemConfig>;
+    getShortcuts(): ShortcutConfig[];
+    getRenderers(): RendererConfig[];
+    getParsers(): ParserConfig[];
+    /**
+     * Returns the flat list of all completion items contributed by every
+     * currently-registered plugin (both static `completions` declarations and
+     * items added dynamically via `ctx.registerCompletion()`).
+     */
+    getCompletions(): CompletionItem[];
+    hasPlugin(name: string): boolean;
+    getPlugin(name: string): EditorPlugin | undefined;
+    private createContext;
+    private injectStyles;
+    destroy(): void;
+}

package/dist/core/plugins/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { PluginManager } from './PluginManager';
+export { PluginContext } from './PluginContext';
+export type { PluginContextOptions } from './PluginContext';

package/dist/core/renderer/CodeRenderer.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare class CodeRenderer {
+    private escapeHtml;
+    renderBlock(lang: string, filename: string | undefined, code: string): string;
+}

package/dist/core/renderer/ListRenderer.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare class ListRenderer {
+    private isListItem;
+    private buildNestedList;
+    render(text: string): string;
+}

package/dist/core/renderer/MarkdownRenderer.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare class MarkdownRenderer {
+    private codeRenderer;
+    private tableRenderer;
+    private listRenderer;
+    private escapeHtml;
+    render(source: string): string;
+}

package/dist/core/renderer/MdxValidator.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare class MdxValidator {
+    validate(source: string): string[];
+}

package/dist/core/renderer/Renderer.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { RendererConfig, ParserConfig } from '../types';
+export declare class Renderer {
+    private renderers;
+    private parsers;
+    private markdownRenderer;
+    private mdxValidator;
+    setRenderers(renderers: RendererConfig[]): void;
+    setParsers(parsers: ParserConfig[]): void;
+    render(source: string): Promise<string>;
+}

package/dist/core/renderer/TableRenderer.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare class TableRenderer {
+    private parseTableRow;
+    render(html: string): string;
+}

package/dist/core/renderer/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export { Renderer } from './Renderer';
+export { MarkdownRenderer } from './MarkdownRenderer';
+export { CodeRenderer } from './CodeRenderer';
+export { TableRenderer } from './TableRenderer';
+export { ListRenderer } from './ListRenderer';
+export { MdxValidator } from './MdxValidator';
+export { sanitizeHtml } from './sanitize';

package/dist/core/renderer/sanitize.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { sanitizeHtml } from '../sanitize';

package/dist/core/renderer.d.ts CHANGED Viewed

@@ -1,28 +1,6 @@
-import { RendererConfig, ParserConfig } from './types';
-/**
- * The Renderer transforms markdown+MDX source into preview HTML.
- * It runs custom parsers first, then applies marked for standard markdown,
- * then runs custom renderers for extended blocks.
- */
-export declare class Renderer {
-    private renderers;
-    private parsers;
-    setRenderers(renderers: RendererConfig[]): void;
-    setParsers(parsers: ParserConfig[]): void;
-    render(source: string): Promise<string>;
-    private applyParsers;
-    private applyRenderers;
-    /**
-     * Lightweight built-in markdown renderer.
-     * Handles standard markdown without external deps.
-     */
-    private renderMarkdown;
-    private renderTables;
-    private parseTableRow;
-    private escapeHtml;
-    /**
-     * Validate MDX component tags — detect unclosed or mismatched tags.
-     * Only checks PascalCase tags (MDX components), not standard HTML.
-     */
-    private validateMdxTags;
-}
+export { Renderer } from './renderer/Renderer';
+export { MarkdownRenderer } from './renderer/MarkdownRenderer';
+export { CodeRenderer } from './renderer/CodeRenderer';
+export { TableRenderer } from './renderer/TableRenderer';
+export { ListRenderer } from './renderer/ListRenderer';
+export { MdxValidator } from './renderer/MdxValidator';

package/dist/core/toolbar.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ export declare class Toolbar {
     private renderGroup;
     private renderDropdownGroup;
     private renderDropdownItem;
+    private positionMenu;
     private renderSubmenu;
     private createButton;
     private createMenuButton;

package/dist/core/types.d.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+import { CompletionItem, CompletionKind } from '@synclineapi/editor';
+export type { CompletionItem, CompletionKind };
 export interface EditorConfig {
     container: HTMLElement | string;
     /** Initial markdown content */
@@ -14,8 +16,6 @@ export interface EditorConfig {
     placeholder?: string;
     /** Read-only mode */
     readOnly?: boolean;
-    /** Enable scroll sync between editor and preview */
-    scrollSync?: boolean;
     /** Custom renderer overrides */
     renderers?: Record<string, RendererFn>;
     /** Locale / i18n overrides */
@@ -47,6 +47,29 @@ export interface EditorPlugin {
     styles?: string;
     /** Plugin dependencies (names) */
     dependencies?: string[];
+    /**
+     * Autocomplete items this plugin contributes to the code editor.
+     *
+     * These are merged with the built-in MDX completions so that anything
+     * a plugin can insert via the toolbar is also reachable via autocomplete.
+     *
+     * Use `kind: 'snip'` with a `body` template to get Tab-trigger snippet
+     * expansion that matches the toolbar insertion exactly.
+     *
+     * @example
+     * ```ts
+     * completions: [
+     *   {
+     *     label: 'myblock',
+     *     kind: 'snip',
+     *     detail: '<MyBlock> component',
+     *     description: 'Inserts a MyBlock component with optional title.',
+     *     body: '<MyBlock title="$1Title">\n  $2Content here\n</MyBlock>',
+     *   },
+     * ]
+     * ```
+     */
+    completions?: CompletionItem[];
 }
 export interface PluginContext {
     /** The editor instance */
@@ -61,6 +84,22 @@ export interface PluginContext {
     registerParser(parser: ParserConfig): void;
     /** Inject CSS */
     injectStyles(css: string): void;
+    /**
+     * Register an autocomplete completion item for the code editor.
+     * Equivalent to declaring `completions` on the plugin definition, but
+     * useful when the items are built dynamically inside `init()`.
+     *
+     * @example
+     * ```ts
+     * ctx.registerCompletion({
+     *   label: 'myblock',
+     *   kind: 'snip',
+     *   detail: '<MyBlock> component',
+     *   body: '<MyBlock title="$1">\n  $2\n</MyBlock>',
+     * });
+     * ```
+     */
+    registerCompletion(item: CompletionItem): void;
     /** Emit a plugin event */
     emit(event: string, data?: unknown): void;
     /** Listen to events */
@@ -166,6 +205,37 @@ export interface EditorAPI {
     getWordCount(): number;
     /** Get line count */
     getLineCount(): number;
+    /** Show or hide the line-number gutter (virtual rendering) */
+    setLineNumbers(enabled: boolean): void;
+    /** Scroll the editor to make the given 1-indexed line visible */
+    jumpToLine(lineNumber: number): void;
+    /**
+     * Register one or more custom autocomplete items on top of the built-in
+     * MDX completions. Items are merged immediately and appear in the popup
+     * the next time the user types.
+     *
+     * Use `kind: 'snip'` with a `body` template for snippet expansion — the
+     * Tab key or clicking the item inserts the full body with cursor placed
+     * at the first `$1` tab stop.
+     *
+     * Call multiple times to accumulate items. The full list (built-ins +
+     * plugin items + items registered here) is always deduplicated by label.
+     *
+     * @example
+     * ```ts
+     * editor.registerAutoComplete([
+     *   {
+     *     label: 'mycard',
+     *     kind: 'snip',
+     *     detail: '<MyCard> component',
+     *     description: 'Inserts a custom card block.',
+     *     body: '<MyCard title="$1">\n  $2\n</MyCard>',
+     *   },
+     *   { label: 'MyCard', kind: 'cls', detail: 'component' },
+     * ]);
+     * ```
+     */
+    registerAutoComplete(items: CompletionItem | CompletionItem[]): void;
 }
 export interface SelectionState {
     start: number;

package/dist/core/ui/AutocompleteController.d.ts ADDED Viewed

@@ -0,0 +1,58 @@
+/**
+ * AutocompleteController — MDX/Markdown-aware autocomplete popup.
+ *
+ * Adapted from the vreditor.html autocomplete system. Shows suggestions for:
+ * - MDX component tags (Accordion, Card, Tabs, etc.)
+ * - Markdown syntax (headings, bold, lists, code blocks, etc.)
+ * - HTML tags
+ * - Document-based word completions (words already present in the editor)
+ *
+ * The popup is positioned relative to the cursor and supports keyboard
+ * navigation (Arrow Up/Down, Tab/Enter to accept, Escape to dismiss).
+ */
+/** A single autocomplete suggestion. */
+export interface AutocompleteItem {
+    /** Display label shown in the popup */
+    label: string;
+    /** Category kind — drives the badge icon */
+    kind: 'tag' | 'md' | 'html' | 'var' | 'snippet';
+    /** Short description shown next to label */
+    detail: string;
+    /** Text to insert (defaults to label if omitted) */
+    insertText?: string;
+}
+export declare class AutocompleteController {
+    private popup;
+    private items;
+    private selected;
+    private prefix;
+    private startPos;
+    private textarea;
+    private editorRoot;
+    private _onAccept;
+    /** Additional items registered at runtime by plugins. */
+    private extraItems;
+    constructor(textarea: HTMLTextAreaElement, editorRoot: HTMLElement);
+    /** Register additional completion items (e.g. from plugins). */
+    registerItems(items: AutocompleteItem[]): void;
+    /** Whether the popup is currently visible. */
+    isVisible(): boolean;
+    /** Trigger autocomplete based on current cursor context. */
+    trigger(): void;
+    /** Move selection up or down. */
+    move(dir: number): void;
+    /** Accept the current selection. */
+    accept(): void;
+    /** Set a callback to fire after an item is accepted (for triggering onInput). */
+    onAccept(fn: () => void): void;
+    /** Handle keyboard events. Returns true if the event was consumed. */
+    handleKeyDown(e: KeyboardEvent): boolean;
+    /** Hide the autocomplete popup. */
+    hide(): void;
+    /** Render the popup items. */
+    private render;
+    /** Position the popup near the cursor. */
+    private position;
+    /** Clean up DOM. */
+    destroy(): void;
+}

package/dist/core/ui/DropdownController.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare class DropdownController {
+    private activeDropdown;
+    private documentClickHandler;
+    constructor();
+    toggle(menu: HTMLElement, wrapper: HTMLElement): void;
+    closeAll(): void;
+    destroy(): void;
+}

package/dist/core/ui/FindReplaceController.d.ts ADDED Viewed

@@ -0,0 +1,60 @@
+/**
+ * FindReplaceController — Find & Replace panel for the editor.
+ *
+ * Adapted from the vreditor.html find/replace system. Provides:
+ * - Ctrl+F to open find, Ctrl+H to open find+replace
+ * - Case-sensitive toggle
+ * - Regex search toggle
+ * - Whole-word match toggle
+ * - Navigate between matches (Enter / Shift+Enter or arrows)
+ * - Replace current / Replace all
+ * - Escape to close
+ */
+export declare class FindReplaceController {
+    private panel;
+    private findInput;
+    private replaceInput;
+    private replaceRow;
+    private countLabel;
+    private caseSensitiveBtn;
+    private regexBtn;
+    private wholeWordBtn;
+    private textarea;
+    private editorRoot;
+    private matches;
+    private currentMatch;
+    private caseSensitive;
+    private useRegex;
+    private wholeWord;
+    private showReplace;
+    private _onInputCallback;
+    constructor(textarea: HTMLTextAreaElement, editorRoot: HTMLElement);
+    /** Set a callback to fire after a replace operation (for triggering onInput). */
+    onInput(fn: () => void): void;
+    /** Open the find panel. If `withReplace` is true, also show the replace row. */
+    open(withReplace?: boolean): void;
+    /** Close the find panel. */
+    close(): void;
+    /** Whether the panel is open. */
+    isOpen(): boolean;
+    /** Run the search. */
+    private search;
+    /** Go to next match. */
+    private next;
+    /** Go to previous match. */
+    private prev;
+    /** Select the current match in the textarea. */
+    private highlightCurrent;
+    /** Update the match count label. */
+    private updateCount;
+    /** Replace the current match. */
+    private replaceCurrent;
+    /** Replace all matches. */
+    private replaceAll;
+    /** Create a toggle button. */
+    private createToggle;
+    /** Create an action button. */
+    private createActionBtn;
+    /** Clean up. */
+    destroy(): void;
+}