@kerebron/editor-kits 0.4.3 → 0.4.5

package/esm/editor-kits/src/StarterKit.d.ts

@@ -1,8 +1,5 @@
 import "../../_dnt.polyfills.js";
 import { Extension } from '../../editor/src/mod.js';
-import { ExtensionBasicEditor } from '../../extension-basic-editor/src/ExtensionBasicEditor.js';
-import { ExtensionMarkdown } from '../../extension-markdown/src/ExtensionMarkdown.js';
-import { ExtensionCustomMenu } from '../../extension-menu/src/mod.js';
 /**
  * StarterKit is a collection of commonly used extensions that provide
  * basic functionality like paragraphs, headings, bold, italic, and more.
@@ -26,7 +23,7 @@ import { ExtensionCustomMenu } from '../../extension-menu/src/mod.js';
  */
 export declare class StarterKit extends Extension {
     name: string;
-    requires: (ExtensionBasicEditor | ExtensionMarkdown | ExtensionCustomMenu)[];
+    requires: any[];
 }
 declare const _default: StarterKit;
 export default _default;

package/esm/editor-kits/src/StarterKit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StarterKit.d.ts","sourceRoot":"","sources":["../../../src/editor-kits/src/StarterKit.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0DAA0D,CAAC;AAChG,OAAO,EAAE,iBAAiB,EAAE,MAAM,mDAAmD,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,UAAW,SAAQ,SAAS;IAC9B,IAAI,SAAiB;IAC9B,QAAQ,qEAIN;CACH;;AAGD,wBAAgC"}
+{"version":3,"file":"StarterKit.d.ts","sourceRoot":"","sources":["../../../src/editor-kits/src/StarterKit.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAKpD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,UAAW,SAAQ,SAAS;IAC9B,IAAI,SAAiB;IAC9B,QAAQ,QAIN;CACH;;AAGD,wBAAgC"}

package/esm/extension-lsp/src/LspStatus.d.ts

@@ -0,0 +1,34 @@
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import type { MenuElement } from '../../extension-menu/src/mod.js';
+import type { ExtensionLsp } from './ExtensionLsp.js';
+export type LspConnectionStatus = 'connected' | 'connecting' | 'disconnected';
+export interface LspStatusOptions {
+    /** The LSP extension instance to monitor */
+    lspExtension: ExtensionLsp;
+    /** Optional label to show (e.g., 'LSP' or language name) */
+    label?: string;
+}
+/**
+ * A menu element that displays LSP connection status.
+ * Shows a status indicator dot with an optional label.
+ */
+export declare class LspStatusElement implements MenuElement {
+    private lspExtension;
+    private label;
+    private dom;
+    private statusDot;
+    private labelEl;
+    private status;
+    private statusCheckInterval;
+    constructor(options: LspStatusOptions);
+    render(_view: EditorView): {
+        dom: HTMLElement;
+        update: (state: EditorState) => boolean;
+    };
+    private getClient;
+    private updateStatusFromClient;
+    private setStatus;
+    destroy(): void;
+}
+//# sourceMappingURL=LspStatus.d.ts.map

package/esm/extension-lsp/src/LspStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LspStatus.d.ts","sourceRoot":"","sources":["../../../src/extension-lsp/src/LspStatus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,YAAY,EAAE,YAAY,CAAC;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,qBAAa,gBAAiB,YAAW,WAAW;IAClD,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,GAAG,CAA4B;IACvC,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,MAAM,CAAuC;IACrD,OAAO,CAAC,mBAAmB,CAA+C;gBAE9D,OAAO,EAAE,gBAAgB;IAKrC,MAAM,CACJ,KAAK,EAAE,UAAU,GAChB;QAAE,GAAG,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAA;KAAE;IAyChE,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,SAAS;IAoBjB,OAAO;CAMR"}

package/esm/extension-lsp/src/LspStatus.js

@@ -0,0 +1,127 @@
+const CSS_PREFIX = 'kb-lsp-status';
+/**
+ * A menu element that displays LSP connection status.
+ * Shows a status indicator dot with an optional label.
+ */
+export class LspStatusElement {
+    constructor(options) {
+        Object.defineProperty(this, "lspExtension", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "label", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "statusDot", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "labelEl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'disconnected'
+        });
+        Object.defineProperty(this, "statusCheckInterval", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.lspExtension = options.lspExtension;
+        this.label = options.label ?? 'LSP';
+    }
+    render(_view) {
+        // Create main container
+        this.dom = document.createElement('div');
+        this.dom.className = CSS_PREFIX;
+        this.dom.setAttribute('role', 'status');
+        this.dom.setAttribute('aria-live', 'polite');
+        // Create status indicator
+        const indicator = document.createElement('div');
+        indicator.className = `${CSS_PREFIX}__indicator`;
+        // Status dot
+        this.statusDot = document.createElement('span');
+        this.statusDot.className =
+            `${CSS_PREFIX}__dot ${CSS_PREFIX}__dot--disconnected`;
+        indicator.appendChild(this.statusDot);
+        // Label
+        this.labelEl = document.createElement('span');
+        this.labelEl.className = `${CSS_PREFIX}__label`;
+        this.labelEl.textContent = this.label;
+        indicator.appendChild(this.labelEl);
+        this.dom.appendChild(indicator);
+        // Set initial status based on client state
+        this.updateStatusFromClient();
+        // Poll for status changes since the client is created lazily
+        this.statusCheckInterval = setInterval(() => {
+            this.updateStatusFromClient();
+        }, 1000);
+        const update = (_state) => {
+            // Always visible
+            return true;
+        };
+        return { dom: this.dom, update };
+    }
+    getClient() {
+        const mainLang = this.lspExtension.mainLang || 'markdown';
+        return this.lspExtension.getClient(mainLang);
+    }
+    updateStatusFromClient() {
+        const client = this.getClient();
+        // Check if the client has server capabilities (meaning it's connected and initialized)
+        if (client?.serverCapabilities) {
+            this.setStatus('connected');
+        }
+        else if (client?.active) {
+            this.setStatus('connecting');
+        }
+        else {
+            this.setStatus('disconnected');
+        }
+    }
+    setStatus(status) {
+        if (this.status === status)
+            return; // No change
+        this.status = status;
+        if (this.statusDot) {
+            this.statusDot.className =
+                `${CSS_PREFIX}__dot ${CSS_PREFIX}__dot--${status}`;
+        }
+        if (this.dom) {
+            this.dom.setAttribute('data-status', status);
+            const statusLabels = {
+                connected: 'LSP Connected',
+                connecting: 'LSP Connecting...',
+                disconnected: 'LSP Disconnected',
+            };
+            this.dom.title = statusLabels[status];
+            this.dom.setAttribute('aria-label', statusLabels[status]);
+        }
+    }
+    destroy() {
+        if (this.statusCheckInterval) {
+            clearInterval(this.statusCheckInterval);
+            this.statusCheckInterval = null;
+        }
+    }
+}

package/esm/extension-menu/src/CustomMenuPlugin.d.ts

@@ -1,7 +1,6 @@
 import { EditorState, Plugin } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import type { CoreEditor } from '../../editor/src/mod.js';
-import { CustomMenuOptions } from './ExtensionCustomMenu.js';
 import type { MenuElement } from './menu.js';
 interface ToolItem {
     id: string;
@@ -19,6 +18,7 @@ export declare class CustomMenuView {
     pinnedDropdownMenu: HTMLElement | null;
     modal: HTMLElement | null;
     tools: ToolItem[];
+    trailingElements: MenuElement[];
     root: Document | ShadowRoot;
     resizeHandle: HTMLElement;
     editorContainer: HTMLElement;
@@ -26,7 +26,7 @@ export declare class CustomMenuView {
     private closePinnedDropdownHandler;
     private submenuStack;
     private pinnedDropdownStack;
-    constructor(editorView: EditorView, editor: CoreEditor, content: readonly (readonly MenuElement[])[]);
+    constructor(editorView: EditorView, editor: CoreEditor, content: readonly (readonly MenuElement[])[], trailingElements?: readonly MenuElement[]);
     private initializeTools;
     /**
      * Generate a stable ID from a label by converting it to a kebab-case slug.
@@ -54,8 +54,12 @@ export declare class CustomMenuView {
     update(view: EditorView, prevState: EditorState): void;
     destroy(): void;
 }
+export interface CustomMenuPluginOptions {
+    content: readonly (readonly MenuElement[])[];
+    trailingElements?: readonly MenuElement[];
+}
 export declare class CustomMenuPlugin extends Plugin {
-    constructor(editor: CoreEditor, options: CustomMenuOptions);
+    constructor(editor: CoreEditor, options: CustomMenuPluginOptions);
 }
 export {};
 //# sourceMappingURL=CustomMenuPlugin.d.ts.map

package/esm/extension-menu/src/CustomMenuPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomMenuPlugin.d.ts","sourceRoot":"","sources":["../../../src/extension-menu/src/CustomMenuPlugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAuB7C,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,cAAc;IAkBvB,QAAQ,CAAC,UAAU,EAAE,UAAU;IAC/B,QAAQ,CAAC,MAAM,EAAE,UAAU;IAC3B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE;IAnBvD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,YAAY,EAAE,WAAW,CAAC;IAC1B,kBAAkB,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,WAAW,GAAG,IAAI,CAAQ;IACjC,KAAK,EAAE,QAAQ,EAAE,CAAM;IACvB,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC5B,YAAY,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,WAAW,CAAC;IAC7B,OAAO,CAAC,oBAAoB,CAA0C;IACtE,OAAO,CAAC,0BAA0B,CAA0C;IAC5E,OAAO,CAAC,YAAY,CAAmD;IACvE,OAAO,CAAC,mBAAmB,CAEpB;gBAGI,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE;IAgEvD,OAAO,CAAC,eAAe;IAgCvB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAyBxB;;OAEG;IACH,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,YAAY;IAyBpB,OAAO,CAAC,eAAe;IAsCvB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,kBAAkB;IA0C1B,OAAO,CAAC,oBAAoB;IAsB5B,OAAO,CAAC,yBAAyB;IAuCjC,OAAO,CAAC,oBAAoB;IA8J5B,OAAO,CAAC,kBAAkB;IA6R1B,OAAO,CAAC,MAAM;IAyLd,OAAO,CAAC,eAAe;IAyHvB,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,WAAW;IAgDnB,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW;IAQ/C,OAAO;CA8BR;AAED,qBAAa,gBAAiB,SAAQ,MAAM;gBAC9B,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,iBAAiB;CAO3D"}
+{"version":3,"file":"CustomMenuPlugin.d.ts","sourceRoot":"","sources":["../../../src/extension-menu/src/CustomMenuPlugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAuB7C,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,qBAAa,cAAc;IAmBvB,QAAQ,CAAC,UAAU,EAAE,UAAU;IAC/B,QAAQ,CAAC,MAAM,EAAE,UAAU;IAC3B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE;IApBvD,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,YAAY,EAAE,WAAW,CAAC;IAC1B,kBAAkB,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,WAAW,GAAG,IAAI,CAAQ;IACjC,KAAK,EAAE,QAAQ,EAAE,CAAM;IACvB,gBAAgB,EAAE,WAAW,EAAE,CAAM;IACrC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC5B,YAAY,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,WAAW,CAAC;IAC7B,OAAO,CAAC,oBAAoB,CAA0C;IACtE,OAAO,CAAC,0BAA0B,CAA0C;IAC5E,OAAO,CAAC,YAAY,CAAmD;IACvE,OAAO,CAAC,mBAAmB,CAEpB;gBAGI,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE,EACrD,gBAAgB,CAAC,EAAE,SAAS,WAAW,EAAE;IAmE3C,OAAO,CAAC,eAAe;IAgCvB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAyBxB;;OAEG;IACH,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,YAAY;IAyBpB,OAAO,CAAC,eAAe;IAsCvB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,kBAAkB;IA0C1B,OAAO,CAAC,oBAAoB;IAsB5B,OAAO,CAAC,yBAAyB;IAuCjC,OAAO,CAAC,oBAAoB;IA8L5B,OAAO,CAAC,kBAAkB;IA6R1B,OAAO,CAAC,MAAM;IAuMd,OAAO,CAAC,eAAe;IAyHvB,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,WAAW;IAgDnB,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW;IAQ/C,OAAO;CA8BR;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;CAC3C;AAED,qBAAa,gBAAiB,SAAQ,MAAM;gBAC9B,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,uBAAuB;CAYjE"}

package/esm/extension-menu/src/CustomMenuPlugin.js

@@ -20,7 +20,7 @@ function debug(...args) {
     }
 }
 export class CustomMenuView {
-    constructor(editorView, editor, content) {
+    constructor(editorView, editor, content, trailingElements) {
         Object.defineProperty(this, "editorView", {
             enumerable: true,
             configurable: true,
@@ -75,6 +75,12 @@ export class CustomMenuView {
             writable: true,
             value: []
         });
+        Object.defineProperty(this, "trailingElements", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
         Object.defineProperty(this, "root", {
             enumerable: true,
             configurable: true,
@@ -120,6 +126,8 @@ export class CustomMenuView {
         debug('CustomMenuView constructor called');
         debug('Content groups:', content.length);
         this.root = editorView.root;
+        // Store trailing elements
+        this.trailingElements = trailingElements ? [...trailingElements] : [];
         // Create wrapper
         this.wrapper = document.createElement('div');
         this.wrapper.classList.add(CSS_PREFIX + '__wrapper');
@@ -434,6 +442,37 @@ export class CustomMenuView {
         // Create dropdown menu
         this.pinnedDropdownMenu = document.createElement('div');
         this.pinnedDropdownMenu.classList.add(CSS_PREFIX + '__pinned-dropdown');
+        // Inherit theme CSS variables from editor container
+        // This ensures dropdowns match the editor's theme even when appended to body
+        const editorContainer = this.editorView.dom.closest('.kb-component') ||
+            this.editorView.dom.parentElement;
+        if (editorContainer) {
+            const computedStyle = getComputedStyle(editorContainer);
+            const themeVars = [
+                // New unified naming
+                '--kb-menu-dropdown-bg',
+                '--kb-menu-dropdown-border',
+                '--kb-menu-dropdown-text',
+                // Legacy naming (for backwards compatibility)
+                '--kb-menu-dropdown-dark-bg',
+                '--kb-menu-dropdown-dark-border',
+                '--kb-menu-dropdown-dark-text',
+                // General theme colors
+                '--kb-color-surface',
+                '--kb-color-surface-elevated',
+                '--kb-color-surface-hover',
+                '--kb-color-border',
+                '--kb-color-border-strong',
+                '--kb-color-text',
+                '--kb-color-text-muted',
+            ];
+            themeVars.forEach((varName) => {
+                const value = computedStyle.getPropertyValue(varName).trim();
+                if (value) {
+                    this.pinnedDropdownMenu.style.setProperty(varName, value);
+                }
+            });
+        }
         // Position it below the trigger element
         const rect = triggerElement.getBoundingClientRect();
         this.pinnedDropdownMenu.style.position = 'absolute';
@@ -933,10 +972,27 @@ export class CustomMenuView {
             });
             this.toolbar.appendChild(overflowToggle);
         }
+        // Render trailing elements (always visible, not pinnable)
+        if (this.trailingElements.length > 0) {
+            // Add separator before trailing elements
+            const separator = document.createElement('div');
+            separator.classList.add(CSS_PREFIX + '__separator');
+            separator.classList.add(CSS_PREFIX + '__separator--trailing');
+            this.toolbar.appendChild(separator);
+            // Create a trailing group container
+            const trailingGroup = document.createElement('div');
+            trailingGroup.classList.add(CSS_PREFIX + '__trailing-group');
+            this.trailingElements.forEach((element) => {
+                const { dom, update } = element.render(this.editorView);
+                const wrapper = document.createElement('span');
+                wrapper.classList.add(CSS_PREFIX + '__trailing-item');
+                wrapper.appendChild(dom);
+                trailingGroup.appendChild(wrapper);
+            });
+            this.toolbar.appendChild(trailingGroup);
+        }
         // Render overflow menu content
         this.renderOverflowMenu();
-        console.log('[kb-custom-menu] render() complete. Toolbar children:', this.toolbar.children.length);
-        console.log('[kb-custom-menu] Toolbar HTML:', this.toolbar.innerHTML.substring(0, 200));
     }
     openManageModal() {
         // Close overflow menu
@@ -1123,7 +1179,7 @@ export class CustomMenuPlugin extends Plugin {
     constructor(editor, options) {
         super({
             view(editorView) {
-                return new CustomMenuView(editorView, editor, options.content);
+                return new CustomMenuView(editorView, editor, options.content, options.trailingElements);
             },
         });
     }

package/esm/extension-menu/src/ExtensionCustomMenu.d.ts

@@ -2,9 +2,12 @@ import { Plugin } from 'prosemirror-state';
 import { Extension } from '../../editor/src/mod.js';
 import { type MenuElement } from './menu.js';
 export interface CustomMenuOptions {
-    content: readonly (readonly MenuElement[])[];
+    content?: readonly (readonly MenuElement[])[];
+    trailingElements?: readonly MenuElement[];
+    autoAddCollaborationStatus?: boolean;
+    autoAddLspStatus?: boolean;
 }
-export declare class ExtensionCustomMenu extends Extension {
+export declare class ExtensionCustomMenu extends Extension<CustomMenuOptions> {
     name: string;
     getProseMirrorPlugins(): Plugin[];
 }

package/esm/extension-menu/src/ExtensionCustomMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExtensionCustomMenu.d.ts","sourceRoot":"","sources":["../../../src/extension-menu/src/ExtensionCustomMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,MAAM,WAAW,iBAAiB;IAEhC,OAAO,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE,CAAC;CAC9C;AAGD,qBAAa,mBAAoB,SAAQ,SAAS;IAChD,IAAI,SAAgB;IAEX,qBAAqB,IAAI,MAAM,EAAE;CAS3C"}
+{"version":3,"file":"ExtensionCustomMenu.d.ts","sourceRoot":"","sources":["../../../src/extension-menu/src/ExtensionCustomMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAM7C,MAAM,WAAW,iBAAiB;IAEhC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,WAAW,EAAE,CAAC,EAAE,CAAC;IAG9C,gBAAgB,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IAG1C,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAGrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAGD,qBAAa,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,IAAI,SAAgB;IAEX,qBAAqB,IAAI,MAAM,EAAE;CA2C3C"}

package/esm/extension-menu/src/ExtensionCustomMenu.js

@@ -1,6 +1,8 @@
 import { Extension } from '../../editor/src/mod.js';
 import { buildMenu } from './buildMenu.js';
 import { CustomMenuPlugin } from './CustomMenuPlugin.js';
+import { CollaborationStatusElement } from '../../extension-yjs/src/CollaborationStatus.js';
+import { LspStatusElement } from '../../extension-lsp/src/LspStatus.js';
 /// Extension for a customizable menu with pinned items
 export class ExtensionCustomMenu extends Extension {
     constructor() {
@@ -13,10 +15,42 @@ export class ExtensionCustomMenu extends Extension {
         });
     }
     getProseMirrorPlugins() {
-        const content = buildMenu(this.editor, this.editor.schema);
+        const content = this.config?.content ??
+            buildMenu(this.editor, this.editor.schema);
+        const trailingElements = this.config?.trailingElements
+            ? [...this.config.trailingElements]
+            : [];
+        // Auto-add collaboration status if YJS extension is present
+        const autoAdd = this.config?.autoAddCollaborationStatus ?? true;
+        if (autoAdd) {
+            const yjsExtension = this.editor.getExtension('yjs');
+            if (yjsExtension) {
+                const yjsConfig = yjsExtension.config;
+                if (yjsConfig?.provider?.awareness) {
+                    const collabStatus = new CollaborationStatusElement({
+                        awareness: yjsConfig.provider.awareness,
+                        provider: yjsConfig.provider,
+                    });
+                    trailingElements.push(collabStatus);
+                }
+            }
+        }
+        // Auto-add LSP status if LSP extension is present
+        const autoAddLsp = this.config?.autoAddLspStatus ?? true;
+        if (autoAddLsp) {
+            const lspExtension = this.editor.getExtension('lsp');
+            if (lspExtension) {
+                const lspStatus = new LspStatusElement({
+                    lspExtension: lspExtension,
+                    label: 'LSP',
+                });
+                trailingElements.push(lspStatus);
+            }
+        }
         return [
             new CustomMenuPlugin(this.editor, {
                 content,
+                trailingElements,
             }),
         ];
     }

package/esm/extension-yjs/src/CollaborationStatus.d.ts

@@ -0,0 +1,59 @@
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import type * as awarenessProtocol from 'y-protocols/awareness';
+import type { MenuElement } from '../../extension-menu/src/mod.js';
+export interface CollaborationUser {
+    clientId: number;
+    name: string;
+    color: string;
+    colorLight?: string;
+}
+export interface CollaborationStatusOptions {
+    /** The Yjs awareness instance */
+    awareness: awarenessProtocol.Awareness;
+    /** Called when connection status changes */
+    onStatusChange?: (status: 'connected' | 'connecting' | 'disconnected') => void;
+}
+/**
+ * Plugin key for accessing collaboration status state
+ */
+export declare const collaborationStatusPluginKey: PluginKey<CollaborationStatusState>;
+export interface CollaborationStatusState {
+    status: 'connected' | 'connecting' | 'disconnected';
+    users: CollaborationUser[];
+}
+/**
+ * Creates a ProseMirror plugin that tracks collaboration status and user presence.
+ * This plugin maintains state that can be accessed by other components.
+ */
+export declare function collaborationStatusPlugin(awareness: awarenessProtocol.Awareness, options?: {
+    onStatusChange?: (status: 'connected' | 'connecting' | 'disconnected') => void;
+}): Plugin;
+/**
+ * A menu element that displays collaboration status, user count, and a dropdown of users.
+ */
+export declare class CollaborationStatusElement implements MenuElement {
+    private awareness;
+    private provider;
+    private dom;
+    private statusDot;
+    private userCount;
+    private dropdown;
+    private userList;
+    private isOpen;
+    private status;
+    constructor(options: {
+        awareness: awarenessProtocol.Awareness;
+        provider: any;
+    });
+    render(view: EditorView): {
+        dom: HTMLElement;
+        update: (state: EditorState) => boolean;
+    };
+    private setStatus;
+    private updateUserList;
+    private toggleDropdown;
+    private openDropdown;
+    private closeDropdown;
+}
+//# sourceMappingURL=CollaborationStatus.d.ts.map

package/esm/extension-yjs/src/CollaborationStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollaborationStatus.d.ts","sourceRoot":"","sources":["../../../src/extension-yjs/src/CollaborationStatus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAInE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,0BAA0B;IACzC,iCAAiC;IACjC,SAAS,EAAE,iBAAiB,CAAC,SAAS,CAAC;IACvC,4CAA4C;IAC5C,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,WAAW,GAAG,YAAY,GAAG,cAAc,KAChD,IAAI,CAAC;CACX;AAED;;GAEG;AACH,eAAO,MAAM,4BAA4B,qCAEhB,CAAC;AAE1B,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;IACpD,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,iBAAiB,CAAC,SAAS,EACtC,OAAO,GAAE;IACP,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,WAAW,GAAG,YAAY,GAAG,cAAc,KAChD,IAAI,CAAC;CACN,GACL,MAAM,CAsCR;AAiBD;;GAEG;AACH,qBAAa,0BAA2B,YAAW,WAAW;IAC5D,OAAO,CAAC,SAAS,CAA8B;IAC/C,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,GAAG,CAA4B;IACvC,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAA6D;gBAGzE,OAAO,EAAE;QAAE,SAAS,EAAE,iBAAiB,CAAC,SAAS,CAAC;QAAC,QAAQ,EAAE,GAAG,CAAA;KAAE;IAMpE,MAAM,CACJ,IAAI,EAAE,UAAU,GACf;QAAE,GAAG,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAA;KAAE;IA+FhE,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,cAAc;IAuDtB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,aAAa;CAOtB"}

package/esm/extension-yjs/src/CollaborationStatus.js

@@ -0,0 +1,286 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+const CSS_PREFIX = 'kb-collab-status';
+/**
+ * Plugin key for accessing collaboration status state
+ */
+export const collaborationStatusPluginKey = new PluginKey('collaboration-status');
+/**
+ * Creates a ProseMirror plugin that tracks collaboration status and user presence.
+ * This plugin maintains state that can be accessed by other components.
+ */
+export function collaborationStatusPlugin(awareness, options = {}) {
+    return new Plugin({
+        key: collaborationStatusPluginKey,
+        state: {
+            init() {
+                return {
+                    status: 'connecting',
+                    users: getUsers(awareness),
+                };
+            },
+            apply(tr, value) {
+                const meta = tr.getMeta(collaborationStatusPluginKey);
+                if (meta) {
+                    return { ...value, ...meta };
+                }
+                return value;
+            },
+        },
+        view(editorView) {
+            const updateUsers = () => {
+                const users = getUsers(awareness);
+                editorView.dispatch(editorView.state.tr.setMeta(collaborationStatusPluginKey, { users }));
+            };
+            awareness.on('change', updateUsers);
+            return {
+                destroy() {
+                    awareness.off('change', updateUsers);
+                },
+            };
+        },
+    });
+}
+function getUsers(awareness) {
+    const users = [];
+    awareness.getStates().forEach((state, clientId) => {
+        if (state.user) {
+            users.push({
+                clientId,
+                name: state.user.name || `User ${clientId}`,
+                color: state.user.color || '#888888',
+                colorLight: state.user.colorLight,
+            });
+        }
+    });
+    return users;
+}
+/**
+ * A menu element that displays collaboration status, user count, and a dropdown of users.
+ */
+export class CollaborationStatusElement {
+    constructor(options) {
+        Object.defineProperty(this, "awareness", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "provider", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "statusDot", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "userCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "dropdown", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "userList", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "isOpen", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'connecting'
+        });
+        this.awareness = options.awareness;
+        this.provider = options.provider;
+    }
+    render(view) {
+        // Create main container
+        this.dom = document.createElement('div');
+        this.dom.className = `${CSS_PREFIX}`;
+        this.dom.setAttribute('role', 'button');
+        this.dom.setAttribute('aria-haspopup', 'true');
+        this.dom.setAttribute('aria-expanded', 'false');
+        // Create status indicator button
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `${CSS_PREFIX}__button`;
+        button.title = 'Collaboration status';
+        button.setAttribute('aria-label', 'Collaboration status');
+        // Status dot
+        this.statusDot = document.createElement('span');
+        this.statusDot.className =
+            `${CSS_PREFIX}__dot ${CSS_PREFIX}__dot--connecting`;
+        button.appendChild(this.statusDot);
+        // User count badge
+        this.userCount = document.createElement('span');
+        this.userCount.className = `${CSS_PREFIX}__count`;
+        this.userCount.textContent = '0';
+        button.appendChild(this.userCount);
+        // Dropdown chevron
+        const chevron = document.createElement('span');
+        chevron.className = `${CSS_PREFIX}__chevron`;
+        chevron.innerHTML =
+            `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>`;
+        button.appendChild(chevron);
+        this.dom.appendChild(button);
+        // Create dropdown
+        this.dropdown = document.createElement('div');
+        this.dropdown.className = `${CSS_PREFIX}__dropdown`;
+        this.dropdown.style.display = 'none';
+        // Dropdown header
+        const header = document.createElement('div');
+        header.className = `${CSS_PREFIX}__header`;
+        header.textContent = 'Collaborators';
+        this.dropdown.appendChild(header);
+        // User list
+        this.userList = document.createElement('div');
+        this.userList.className = `${CSS_PREFIX}__users`;
+        this.dropdown.appendChild(this.userList);
+        this.dom.appendChild(this.dropdown);
+        // Event handlers
+        button.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.toggleDropdown();
+        });
+        // Close on outside click
+        const closeHandler = (e) => {
+            if (this.isOpen && this.dom && !this.dom.contains(e.target)) {
+                this.closeDropdown();
+            }
+        };
+        document.addEventListener('click', closeHandler);
+        // Listen for awareness changes
+        const awarenessChangeHandler = () => {
+            this.updateUserList();
+        };
+        this.awareness.on('change', awarenessChangeHandler);
+        // Listen for provider status changes
+        if (this.provider && typeof this.provider.on === 'function') {
+            this.provider.on('status', (event) => {
+                this.setStatus(event.status);
+            });
+        }
+        // Initial update
+        this.updateUserList();
+        const update = (_state) => {
+            // Always visible
+            return true;
+        };
+        return { dom: this.dom, update };
+    }
+    setStatus(status) {
+        this.status = status;
+        if (this.statusDot) {
+            this.statusDot.className =
+                `${CSS_PREFIX}__dot ${CSS_PREFIX}__dot--${status}`;
+        }
+        if (this.dom) {
+            this.dom.setAttribute('data-status', status);
+            const button = this.dom.querySelector('button');
+            if (button) {
+                const statusLabels = {
+                    connected: 'Connected',
+                    connecting: 'Connecting...',
+                    disconnected: 'Disconnected',
+                };
+                button.title = `${statusLabels[status]} - Click to see collaborators`;
+            }
+        }
+    }
+    updateUserList() {
+        if (!this.userList || !this.userCount)
+            return;
+        const users = getUsers(this.awareness);
+        const currentClientId = this.awareness.clientID;
+        // Update count (including self)
+        this.userCount.textContent = String(users.length);
+        // Clear and rebuild user list
+        this.userList.innerHTML = '';
+        if (users.length === 0) {
+            const emptyMessage = document.createElement('div');
+            emptyMessage.className = `${CSS_PREFIX}__empty`;
+            emptyMessage.textContent = 'No users connected';
+            this.userList.appendChild(emptyMessage);
+            return;
+        }
+        // Sort users: current user first, then alphabetically
+        const sortedUsers = [...users].sort((a, b) => {
+            if (a.clientId === currentClientId)
+                return -1;
+            if (b.clientId === currentClientId)
+                return 1;
+            return a.name.localeCompare(b.name);
+        });
+        sortedUsers.forEach((user) => {
+            const userItem = document.createElement('div');
+            userItem.className = `${CSS_PREFIX}__user`;
+            // Color indicator
+            const colorDot = document.createElement('span');
+            colorDot.className = `${CSS_PREFIX}__user-color`;
+            colorDot.style.backgroundColor = user.color;
+            userItem.appendChild(colorDot);
+            // User name
+            const userName = document.createElement('span');
+            userName.className = `${CSS_PREFIX}__user-name`;
+            userName.textContent = user.name;
+            userItem.appendChild(userName);
+            // "You" badge for current user
+            if (user.clientId === currentClientId) {
+                const youBadge = document.createElement('span');
+                youBadge.className = `${CSS_PREFIX}__you-badge`;
+                youBadge.textContent = '(you)';
+                userItem.appendChild(youBadge);
+            }
+            this.userList.appendChild(userItem);
+        });
+    }
+    toggleDropdown() {
+        if (this.isOpen) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        if (!this.dropdown || !this.dom)
+            return;
+        this.isOpen = true;
+        this.dropdown.style.display = 'block';
+        this.dom.setAttribute('aria-expanded', 'true');
+        this.dom.classList.add(`${CSS_PREFIX}--open`);
+        this.updateUserList(); // Refresh on open
+    }
+    closeDropdown() {
+        if (!this.dropdown || !this.dom)
+            return;
+        this.isOpen = false;
+        this.dropdown.style.display = 'none';
+        this.dom.setAttribute('aria-expanded', 'false');
+        this.dom.classList.remove(`${CSS_PREFIX}--open`);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerebron/editor-kits",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "license": "MIT",
   "module": "./esm/editor-kits/src/mod.js",
   "exports": {