@mp-lb/mdkit 0.0.1-main.4.1 → 0.1.0-main.5.1

package/dist/document/MdKitConflictPanel.js

@@ -33,9 +33,9 @@ export const MdKitConflictPanel = ({ className, document, title = "Document conf
     ];
     const activePreviewOption = previewOptions.find((option) => option.id === activePreview) ??
         previewOptions[0];
-    return (_jsxs("section", { className: joinClassNames("mdkit-conflict-panel", className), children: [_jsxs("div", { className: "mdkit-conflict-panel-content", children: [_jsx("h2", { children: title }), _jsx("p", { children: "Remote changes conflict with local edits. Choose the remote document, or keep your local document by overwriting the remote copy." }), document.error ? (_jsx("p", { className: "mdkit-conflict-panel-error", children: document.error })) : null, conflictDetails ? (_jsxs("p", { className: "mdkit-conflict-panel-meta", children: ["Remote version ", String(conflictDetails.remoteVersion ?? "none"), conflictDetails.remoteUpdatedAt
+    return (_jsxs("section", { className: joinClassNames("mp-lb-mdkit-conflict-panel", className), children: [_jsxs("div", { className: "mp-lb-mdkit-conflict-panel-content", children: [_jsx("h2", { children: title }), _jsx("p", { children: "Remote changes conflict with local edits. Choose the remote document, or keep your local document by overwriting the remote copy." }), document.error ? (_jsx("p", { className: "mp-lb-mdkit-conflict-panel-error", children: document.error })) : null, conflictDetails ? (_jsxs("p", { className: "mp-lb-mdkit-conflict-panel-meta", children: ["Remote version ", String(conflictDetails.remoteVersion ?? "none"), conflictDetails.remoteUpdatedAt
                                 ? ` saved ${new Date(conflictDetails.remoteUpdatedAt).toLocaleTimeString()}`
-                                : ""] })) : null] }), _jsxs("div", { className: "mdkit-conflict-panel-preview", children: [_jsx("div", { className: "mdkit-conflict-panel-tabs", role: "tablist", children: previewOptions.map((option) => (_jsx("button", { type: "button", "aria-selected": activePreviewOption.id === option.id, className: activePreviewOption.id === option.id
-                                ? "mdkit-conflict-panel-tab mdkit-conflict-panel-tab-active"
-                                : "mdkit-conflict-panel-tab", role: "tab", onClick: () => setActivePreview(option.id), children: option.label }, option.id))) }), _jsx("textarea", { "aria-label": `${activePreviewOption.label} conflict content`, readOnly: true, value: activePreviewOption.value })] }), _jsxs("div", { className: "mdkit-conflict-panel-action-row", children: [_jsx("button", { type: "button", className: "mdkit-panel-secondary-action", disabled: isBusy, onClick: () => void runAction("reload", document.resync), children: pendingAction === "reload" ? "Keeping remote..." : "Keep remote" }), _jsx("button", { type: "button", className: "mdkit-panel-secondary-action", disabled: isBusy, onClick: () => void runAction("overwrite", document.forceSave), children: pendingAction === "overwrite" ? "Keeping local..." : "Keep local" })] })] }));
+                                : ""] })) : null] }), _jsxs("div", { className: "mp-lb-mdkit-conflict-panel-preview", children: [_jsx("div", { className: "mp-lb-mdkit-conflict-panel-tabs", role: "tablist", children: previewOptions.map((option) => (_jsx("button", { type: "button", "aria-selected": activePreviewOption.id === option.id, className: activePreviewOption.id === option.id
+                                ? "mp-lb-mdkit-conflict-panel-tab mp-lb-mdkit-conflict-panel-tab-active"
+                                : "mp-lb-mdkit-conflict-panel-tab", role: "tab", onClick: () => setActivePreview(option.id), children: option.label }, option.id))) }), _jsx("textarea", { "aria-label": `${activePreviewOption.label} conflict content`, readOnly: true, value: activePreviewOption.value })] }), _jsxs("div", { className: "mp-lb-mdkit-conflict-panel-action-row", children: [_jsx("button", { type: "button", className: "mp-lb-mdkit-panel-secondary-action", disabled: isBusy, onClick: () => void runAction("reload", document.resync), children: pendingAction === "reload" ? "Keeping remote..." : "Keep remote" }), _jsx("button", { type: "button", className: "mp-lb-mdkit-panel-secondary-action", disabled: isBusy, onClick: () => void runAction("overwrite", document.forceSave), children: pendingAction === "overwrite" ? "Keeping local..." : "Keep local" })] })] }));
 };

package/dist/document/MdKitDocumentToolbar.js

@@ -33,7 +33,7 @@ export const MdKitDocumentToolbar = ({ className, collaboration, document, onOpe
                         : document.saveStatus === "saved"
                             ? "Saved"
                             : "Idle";
-    return (_jsxs("div", { className: joinClassNames("mdkit-document-toolbar", className), "data-conflict": document.conflict ? "true" : undefined, "data-dirty": document.isDirty ? "true" : undefined, "data-save-status": document.saveStatus, "data-status": status.toLowerCase().replace(/\s+/g, "-"), children: [_jsxs("div", { className: "mdkit-document-toolbar-status", children: [_jsx("strong", { children: status }), _jsx("span", { children: formatUpdatedAt(document.updatedAt) }), _jsxs("span", { children: ["Collaboration ", collaboration ? collaboration.status : "off"] })] }), document.error && !document.conflict ? (_jsx("div", { className: "mdkit-document-toolbar-error", children: document.error })) : null, _jsxs("div", { className: "mdkit-document-toolbar-actions", children: [_jsx("button", { type: "button", disabled: isBusy ||
+    return (_jsxs("div", { className: joinClassNames("mp-lb-mdkit-document-toolbar", className), "data-conflict": document.conflict ? "true" : undefined, "data-dirty": document.isDirty ? "true" : undefined, "data-save-status": document.saveStatus, "data-status": status.toLowerCase().replace(/\s+/g, "-"), children: [_jsxs("div", { className: "mp-lb-mdkit-document-toolbar-status", children: [_jsx("strong", { children: status }), _jsx("span", { children: formatUpdatedAt(document.updatedAt) }), _jsxs("span", { children: ["Collaboration ", collaboration ? collaboration.status : "off"] })] }), document.error && !document.conflict ? (_jsx("div", { className: "mp-lb-mdkit-document-toolbar-error", children: document.error })) : null, _jsxs("div", { className: "mp-lb-mdkit-document-toolbar-actions", children: [_jsx("button", { type: "button", disabled: isBusy ||
                             document.conflict ||
                             !hasVersionHistory ||
                             versions?.isLoading ||
@@ -42,7 +42,7 @@ export const MdKitDocumentToolbar = ({ className, collaboration, document, onOpe
                             await onOpenVersionHistory?.();
                         }), children: versions?.isLoading
                             ? "Loading versions..."
-                            : `Version ${String(document.version ?? "none")}` }), document.conflict && onOpenConflict ? (_jsx("button", { type: "button", className: "mdkit-document-toolbar-conflict-trigger", disabled: isBusy, onClick: () => void runAction("conflict", async () => {
+                            : `Version ${String(document.version ?? "none")}` }), document.conflict && onOpenConflict ? (_jsx("button", { type: "button", className: "mp-lb-mdkit-document-toolbar-conflict-trigger", disabled: isBusy, onClick: () => void runAction("conflict", async () => {
                             await onOpenConflict();
-                        }), children: "Resolve conflict" })) : null] }), document.conflict && showConflictActions ? (_jsxs("div", { className: "mdkit-document-toolbar-conflict", children: [_jsx("span", { children: "Remote changes conflict with local edits." }), _jsx("button", { type: "button", disabled: isBusy, onClick: () => void runAction("reload", document.resync), children: "Keep remote" }), _jsx("button", { type: "button", disabled: isBusy, onClick: () => void runAction("overwrite", document.forceSave), children: "Keep local" })] })) : null] }));
+                        }), children: "Resolve conflict" })) : null] }), document.conflict && showConflictActions ? (_jsxs("div", { className: "mp-lb-mdkit-document-toolbar-conflict", children: [_jsx("span", { children: "Remote changes conflict with local edits." }), _jsx("button", { type: "button", disabled: isBusy, onClick: () => void runAction("reload", document.resync), children: "Keep remote" }), _jsx("button", { type: "button", disabled: isBusy, onClick: () => void runAction("overwrite", document.forceSave), children: "Keep local" })] })) : null] }));
 };

package/dist/markdown/MarkdownBubbleMenu.d.ts

@@ -1,4 +1,4 @@
-import type { Editor } from "@tiptap/react";
+import { type Editor } from "@tiptap/react";
 type MarkdownBubbleMenuProps = {
     editor: Editor;
 };

package/dist/markdown/MarkdownBubbleMenu.js

@@ -1,7 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditorState } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { Bold, Code2, Heading1, Heading2, Italic, Link2, List, ListOrdered, Quote, Strikethrough, } from "lucide-react";
 import { joinClassNames } from "../ui/joinClassNames";
+const toolbarActiveStateIsEqual = (left, right) => {
+    if (!right) {
+        return false;
+    }
+    return (left.blockquote === right.blockquote &&
+        left.bold === right.bold &&
+        left.bulletList === right.bulletList &&
+        left.codeBlock === right.codeBlock &&
+        left.heading1 === right.heading1 &&
+        left.heading2 === right.heading2 &&
+        left.italic === right.italic &&
+        left.link === right.link &&
+        left.orderedList === right.orderedList &&
+        left.strike === right.strike);
+};
+const useToolbarActiveState = (editor) => useEditorState({
+    editor,
+    selector: ({ editor: currentEditor }) => ({
+        blockquote: currentEditor.isActive("blockquote"),
+        bold: currentEditor.isActive("bold"),
+        bulletList: currentEditor.isActive("bulletList"),
+        codeBlock: currentEditor.isActive("codeBlock"),
+        heading1: currentEditor.isActive("heading", { level: 1 }),
+        heading2: currentEditor.isActive("heading", { level: 2 }),
+        italic: currentEditor.isActive("italic"),
+        link: currentEditor.isActive("link"),
+        orderedList: currentEditor.isActive("orderedList"),
+        strike: currentEditor.isActive("strike"),
+    }),
+    equalityFn: toolbarActiveStateIsEqual,
+});
 const setLink = (editor) => {
     const previousUrl = editor.getAttributes("link").href;
     const nextUrl = window.prompt("URL", previousUrl);
@@ -19,11 +51,29 @@ const setLink = (editor) => {
         .setLink({ href: nextUrl })
         .run();
 };
-const ToolbarButton = ({ ariaLabel, children, isActive, onClick, }) => (_jsx("button", { type: "button", className: joinClassNames("hsk-toolbar-button", isActive && "hsk-toolbar-button-active"), "aria-label": ariaLabel, onClick: onClick, onMouseDown: (event) => event.preventDefault(), children: children }));
-export const MarkdownBubbleMenu = ({ editor }) => (_jsxs(BubbleMenu, { appendTo: () => document.body, className: "hsk-toolbar", editor: editor, options: {
-        placement: "top",
-        strategy: "fixed",
-    }, shouldShow: ({ editor: currentEditor, state }) => {
-        const { empty } = state.selection;
-        return currentEditor.isEditable && !empty;
-    }, children: [_jsx(ToolbarButton, { ariaLabel: "Bold", isActive: editor.isActive("bold"), onClick: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, {}) }), _jsx(ToolbarButton, { ariaLabel: "Italic", isActive: editor.isActive("italic"), onClick: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, {}) }), _jsx(ToolbarButton, { ariaLabel: "Strikethrough", isActive: editor.isActive("strike"), onClick: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, {}) }), _jsx(ToolbarButton, { ariaLabel: "Code block", isActive: editor.isActive("codeBlock"), onClick: () => editor.chain().focus().toggleCodeBlock().run(), children: _jsx(Code2, {}) }), _jsx("div", { className: "hsk-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Heading 1", isActive: editor.isActive("heading", { level: 1 }), onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: _jsx(Heading1, {}) }), _jsx(ToolbarButton, { ariaLabel: "Heading 2", isActive: editor.isActive("heading", { level: 2 }), onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: _jsx(Heading2, {}) }), _jsx("div", { className: "hsk-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Bullet list", isActive: editor.isActive("bulletList"), onClick: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, {}) }), _jsx(ToolbarButton, { ariaLabel: "Ordered list", isActive: editor.isActive("orderedList"), onClick: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, {}) }), _jsx(ToolbarButton, { ariaLabel: "Blockquote", isActive: editor.isActive("blockquote"), onClick: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, {}) }), _jsx("div", { className: "hsk-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Link", isActive: editor.isActive("link"), onClick: () => setLink(editor), children: _jsx(Link2, {}) })] }));
+const ToolbarButton = ({ ariaLabel, children, isActive, onAction, }) => {
+    const runPointerAction = (event) => {
+        if (event.pointerType === "mouse" && event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onAction();
+    };
+    const runKeyboardAction = (event) => {
+        if (event.detail !== 0) {
+            return;
+        }
+        onAction();
+    };
+    return (_jsx("button", { type: "button", className: joinClassNames("mp-lb-mdkit-toolbar-button", isActive && "mp-lb-mdkit-toolbar-button-active"), "aria-label": ariaLabel, "aria-pressed": isActive, onClick: runKeyboardAction, onPointerDown: runPointerAction, children: children }));
+};
+export const MarkdownBubbleMenu = ({ editor }) => {
+    const activeState = useToolbarActiveState(editor);
+    return (_jsxs(BubbleMenu, { className: "mp-lb-mdkit-toolbar", editor: editor, options: {
+            placement: "top",
+        }, shouldShow: ({ editor: currentEditor, state }) => {
+            const { empty } = state.selection;
+            return currentEditor.isEditable && !empty;
+        }, children: [_jsx(ToolbarButton, { ariaLabel: "Bold", isActive: activeState.bold, onAction: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, {}) }), _jsx(ToolbarButton, { ariaLabel: "Italic", isActive: activeState.italic, onAction: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, {}) }), _jsx(ToolbarButton, { ariaLabel: "Strikethrough", isActive: activeState.strike, onAction: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, {}) }), _jsx(ToolbarButton, { ariaLabel: "Code block", isActive: activeState.codeBlock, onAction: () => editor.chain().focus().toggleCodeBlock().run(), children: _jsx(Code2, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Heading 1", isActive: activeState.heading1, onAction: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: _jsx(Heading1, {}) }), _jsx(ToolbarButton, { ariaLabel: "Heading 2", isActive: activeState.heading2, onAction: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: _jsx(Heading2, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Bullet list", isActive: activeState.bulletList, onAction: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, {}) }), _jsx(ToolbarButton, { ariaLabel: "Ordered list", isActive: activeState.orderedList, onAction: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, {}) }), _jsx(ToolbarButton, { ariaLabel: "Blockquote", isActive: activeState.blockquote, onAction: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, {}) }), _jsx("div", { className: "mp-lb-mdkit-toolbar-divider" }), _jsx(ToolbarButton, { ariaLabel: "Link", isActive: activeState.link, onAction: () => setLink(editor), children: _jsx(Link2, {}) })] }));
+};

package/dist/markdown/MdKitEditor.js

@@ -3,5 +3,5 @@ import { joinClassNames } from "../ui/joinClassNames";
 import { TiptapMarkdownSurface } from "./TiptapMarkdownSurface";
 export const MdKitEditor = (props) => {
     const { className, fillHeight = false, readOnly = false, style, ...surfaceProps } = props;
-    return (_jsx("div", { className: joinClassNames("mdkit-markdown-editor", fillHeight && "mdkit-markdown-editor-fill-height", className), "data-read-only": readOnly ? "true" : undefined, style: style, children: _jsx(TiptapMarkdownSurface, { readOnly: readOnly, ...surfaceProps }, props.instanceKey) }));
+    return (_jsx("div", { className: joinClassNames("mp-lb-mdkit-markdown-editor", fillHeight && "mp-lb-mdkit-markdown-editor-fill-height", className), "data-read-only": readOnly ? "true" : undefined, style: style, children: _jsx(TiptapMarkdownSurface, { readOnly: readOnly, ...surfaceProps }, props.instanceKey) }));
 };

package/dist/markdown/TiptapMarkdownSurface.js

@@ -91,10 +91,10 @@ export const TiptapMarkdownSurface = (props) => {
                 provider: collaborationProvider,
                 render: (user) => {
                     const cursor = document.createElement("span");
-                    cursor.classList.add("hsk-collaboration-caret");
+                    cursor.classList.add("mp-lb-mdkit-collaboration-caret");
                     cursor.style.borderColor = user.color;
                     const label = document.createElement("div");
-                    label.classList.add("hsk-collaboration-caret-label");
+                    label.classList.add("mp-lb-mdkit-collaboration-caret-label");
                     label.style.backgroundColor = user.color;
                     label.textContent = user.name;
                     cursor.appendChild(label);
@@ -118,7 +118,7 @@ export const TiptapMarkdownSurface = (props) => {
         editable: !readOnly,
         editorProps: {
             attributes: {
-                class: "hsk-tiptap",
+                class: "mp-lb-mdkit-tiptap",
                 spellcheck: "false",
             },
         },
@@ -215,7 +215,7 @@ export const TiptapMarkdownSurface = (props) => {
         });
     }, [editor, markdownValue]);
     if (!editor) {
-        return (_jsx("div", { className: "hsk-editor-shell", children: _jsx("div", { className: "hsk-editor-empty", children: collaboration
+        return (_jsx("div", { className: "mp-lb-mdkit-editor-shell", children: _jsx("div", { className: "mp-lb-mdkit-editor-empty", children: collaboration
                     ? "Connecting collaboration session..."
                     : "Loading editor..." }) }));
     }
@@ -426,5 +426,5 @@ export const TiptapMarkdownSurface = (props) => {
         });
         queueEditorFocusAtPosition(getEditorPositionAtClientPoint(event.clientX, event.clientY, event.target));
     };
-    return (_jsx("div", { className: "hsk-editor-shell", children: _jsxs("div", { ref: editorSurfaceRef, className: "hsk-editor-surface", onPointerDownCapture: focusEditorBackgroundOnPointerDown, onPointerUpCapture: focusEditorBackgroundOnPointerUp, children: [_jsx(MarkdownBubbleMenu, { editor: editor }), _jsx(EditorContent, { editor: editor })] }) }));
+    return (_jsx("div", { className: "mp-lb-mdkit-editor-shell", children: _jsxs("div", { ref: editorSurfaceRef, className: "mp-lb-mdkit-editor-surface", onPointerDownCapture: focusEditorBackgroundOnPointerDown, onPointerUpCapture: focusEditorBackgroundOnPointerUp, children: [_jsx(MarkdownBubbleMenu, { editor: editor }), _jsx(EditorContent, { editor: editor })] }) }));
 };

package/dist/theme/MdKitThemeEditor.js

@@ -6,7 +6,7 @@ export const MdKitThemeEditor = ({ className, onChange, onReset, theme, }) => {
             ...patch,
         });
     };
-    return (_jsxs("div", { className: ["hsk-theme-editor", className].filter(Boolean).join(" "), children: [_jsxs("label", { children: [_jsx("span", { children: "Background" }), _jsx("input", { type: "color", value: theme.background, onChange: (event) => updateTheme({ background: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Text" }), _jsx("input", { type: "color", value: theme.foreground, onChange: (event) => updateTheme({ foreground: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Link" }), _jsx("input", { type: "color", value: theme.link, onChange: (event) => updateTheme({ link: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Code" }), _jsx("input", { type: "color", value: theme.codeBackground, onChange: (event) => updateTheme({
+    return (_jsxs("div", { className: ["mp-lb-mdkit-theme-editor", className].filter(Boolean).join(" "), children: [_jsxs("label", { children: [_jsx("span", { children: "Background" }), _jsx("input", { type: "color", value: theme.background, onChange: (event) => updateTheme({ background: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Text" }), _jsx("input", { type: "color", value: theme.foreground, onChange: (event) => updateTheme({ foreground: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Link" }), _jsx("input", { type: "color", value: theme.link, onChange: (event) => updateTheme({ link: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Code" }), _jsx("input", { type: "color", value: theme.codeBackground, onChange: (event) => updateTheme({
                             codeBackground: event.target.value,
                             muted: event.target.value,
                         }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Font size" }), _jsx("input", { type: "range", min: "13", max: "22", value: Number.parseInt(theme.fontSize, 10), onChange: (event) => updateTheme({ fontSize: `${event.target.value}px` }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Font" }), _jsxs("select", { value: theme.fontFamily, onChange: (event) => updateTheme({ fontFamily: event.target.value }), children: [_jsx("option", { value: "inherit", children: "App default" }), _jsx("option", { value: "ui-serif, Georgia, Cambria, serif", children: "Serif" }), _jsx("option", { value: "ui-sans-serif, system-ui, sans-serif", children: "Sans" }), _jsx("option", { value: "ui-monospace, SFMono-Regular, Menlo, monospace", children: "Mono" })] })] }), _jsxs("label", { children: [_jsx("span", { children: "Line height" }), _jsx("input", { type: "range", min: "1.2", max: "2.2", step: "0.1", value: theme.lineHeight, onChange: (event) => updateTheme({ lineHeight: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Padding" }), _jsx("input", { type: "range", min: "0", max: "32", value: Number.parseInt(theme.surfacePadding, 10), onChange: (event) => updateTheme({ surfacePadding: `${event.target.value}px` }) })] }), _jsxs("label", { children: [_jsx("span", { children: "Code radius" }), _jsx("input", { type: "range", min: "0", max: "16", value: Number.parseInt(theme.codeRadius, 10), onChange: (event) => updateTheme({ codeRadius: `${event.target.value}px` }) })] }), onReset ? (_jsx("button", { type: "button", onClick: onReset, children: "Reset style" })) : null] }));

package/dist/theme/editorTheme.d.ts

@@ -14,7 +14,7 @@ export type MdKitEditorTheme = {
     mutedForeground: string;
     surfacePadding: string;
 };
-export type MdKitEditorThemeStyle = CSSProperties & Record<`--hsk-${string}`, string>;
+export type MdKitEditorThemeStyle = CSSProperties & Record<`--mp-lb-mdkit-${string}`, string>;
 export declare const defaultMdKitEditorTheme: MdKitEditorTheme;
 export declare const darkMdKitEditorTheme: MdKitEditorTheme;
 export declare const createMdKitEditorThemeStyle: (theme: MdKitEditorTheme) => MdKitEditorThemeStyle;

package/dist/theme/editorTheme.js

@@ -29,19 +29,19 @@ export const darkMdKitEditorTheme = {
     surfacePadding: "1rem",
 };
 export const createMdKitEditorThemeStyle = (theme) => ({
-    "--hsk-background": theme.background,
-    "--hsk-block-gap": theme.blockGap,
-    "--hsk-border": theme.border,
-    "--hsk-code-background": theme.codeBackground,
-    "--hsk-code-radius": theme.codeRadius,
-    "--hsk-code-block-radius": theme.codeRadius,
-    "--hsk-font-family": theme.fontFamily,
-    "--hsk-font-size": theme.fontSize,
-    "--hsk-foreground": theme.foreground,
-    "--hsk-line-height": theme.lineHeight,
-    "--hsk-link": theme.link,
-    "--hsk-muted": theme.muted,
-    "--hsk-muted-foreground": theme.mutedForeground,
-    "--hsk-quote-border-color": theme.border,
-    "--hsk-surface-padding": theme.surfacePadding,
+    "--mp-lb-mdkit-background": theme.background,
+    "--mp-lb-mdkit-block-gap": theme.blockGap,
+    "--mp-lb-mdkit-border": theme.border,
+    "--mp-lb-mdkit-code-background": theme.codeBackground,
+    "--mp-lb-mdkit-code-radius": theme.codeRadius,
+    "--mp-lb-mdkit-code-block-radius": theme.codeRadius,
+    "--mp-lb-mdkit-font-family": theme.fontFamily,
+    "--mp-lb-mdkit-font-size": theme.fontSize,
+    "--mp-lb-mdkit-foreground": theme.foreground,
+    "--mp-lb-mdkit-line-height": theme.lineHeight,
+    "--mp-lb-mdkit-link": theme.link,
+    "--mp-lb-mdkit-muted": theme.muted,
+    "--mp-lb-mdkit-muted-foreground": theme.mutedForeground,
+    "--mp-lb-mdkit-quote-border-color": theme.border,
+    "--mp-lb-mdkit-surface-padding": theme.surfacePadding,
 });

package/dist/versioning/VersionHistoryPanel.js

@@ -24,6 +24,6 @@ export const VersionHistoryPanel = ({ className, controller, onRestoreVersion, t
             setIsRestoring(false);
         }
     };
-    return (_jsxs("aside", { className: joinClassNames("mdkit-version-history-panel", className), children: [_jsx("div", { className: "mdkit-version-history-header", children: _jsxs("div", { children: [_jsx("h2", { className: "mdkit-version-history-title", children: title }), _jsx("p", { className: "mdkit-version-history-subtitle", children: "Browse saved revisions and restore one when you need it." })] }) }), !controller.hasVersioning ? (_jsx("div", { className: "mdkit-version-history-empty", children: "This adapter does not expose version history." })) : null, controller.error ? (_jsx("div", { className: "mdkit-version-history-error", children: controller.error })) : null, controller.hasVersioning ? (_jsxs("div", { className: "mdkit-version-history-layout", children: [_jsx("div", { className: "mdkit-version-history-list", role: "list", children: controller.versions.length === 0 ? (_jsx("div", { className: "mdkit-version-history-empty", children: "No revisions have been recorded for this document yet." })) : (controller.versions.map((version) => (_jsxs("button", { type: "button", className: joinClassNames("mdkit-version-history-item", controller.selectedVersionId === version.id &&
-                                "mdkit-version-history-item-active"), onClick: () => void controller.openVersion(version.id), children: [_jsx("span", { className: "mdkit-version-history-item-title", children: getVersionLabel(version) }), _jsx("span", { className: "mdkit-version-history-item-meta", children: new Date(version.createdAt).toLocaleString() })] }, version.id)))) }), _jsx("div", { className: "mdkit-version-history-preview", children: controller.selectedVersion ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mdkit-version-history-preview-header", children: [_jsxs("div", { children: [_jsx("h3", { className: "mdkit-version-history-preview-title", children: getVersionLabel(controller.selectedVersion) }), _jsx("p", { className: "mdkit-version-history-item-meta", children: new Date(controller.selectedVersion.createdAt).toLocaleString() })] }), onRestoreVersion ? (_jsx("button", { type: "button", className: "mdkit-panel-primary-action", disabled: isRestoring, onClick: () => void restoreSelectedVersion(), children: isRestoring ? "Restoring..." : "Restore" })) : null] }), _jsx("pre", { className: "mdkit-version-history-code", children: controller.selectedVersion.content })] })) : (_jsx("div", { className: "mdkit-version-history-empty", children: "Select a saved revision to preview it here." })) })] })) : null, controller.isLoading ? (_jsx("div", { className: "mdkit-version-history-meta", children: "Loading version data..." })) : null] }));
+    return (_jsxs("aside", { className: joinClassNames("mp-lb-mdkit-version-history-panel", className), children: [_jsx("div", { className: "mp-lb-mdkit-version-history-header", children: _jsxs("div", { children: [_jsx("h2", { className: "mp-lb-mdkit-version-history-title", children: title }), _jsx("p", { className: "mp-lb-mdkit-version-history-subtitle", children: "Browse saved revisions and restore one when you need it." })] }) }), !controller.hasVersioning ? (_jsx("div", { className: "mp-lb-mdkit-version-history-empty", children: "This adapter does not expose version history." })) : null, controller.error ? (_jsx("div", { className: "mp-lb-mdkit-version-history-error", children: controller.error })) : null, controller.hasVersioning ? (_jsxs("div", { className: "mp-lb-mdkit-version-history-layout", children: [_jsx("div", { className: "mp-lb-mdkit-version-history-list", role: "list", children: controller.versions.length === 0 ? (_jsx("div", { className: "mp-lb-mdkit-version-history-empty", children: "No revisions have been recorded for this document yet." })) : (controller.versions.map((version) => (_jsxs("button", { type: "button", className: joinClassNames("mp-lb-mdkit-version-history-item", controller.selectedVersionId === version.id &&
+                                "mp-lb-mdkit-version-history-item-active"), onClick: () => void controller.openVersion(version.id), children: [_jsx("span", { className: "mp-lb-mdkit-version-history-item-title", children: getVersionLabel(version) }), _jsx("span", { className: "mp-lb-mdkit-version-history-item-meta", children: new Date(version.createdAt).toLocaleString() })] }, version.id)))) }), _jsx("div", { className: "mp-lb-mdkit-version-history-preview", children: controller.selectedVersion ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mp-lb-mdkit-version-history-preview-header", children: [_jsxs("div", { children: [_jsx("h3", { className: "mp-lb-mdkit-version-history-preview-title", children: getVersionLabel(controller.selectedVersion) }), _jsx("p", { className: "mp-lb-mdkit-version-history-item-meta", children: new Date(controller.selectedVersion.createdAt).toLocaleString() })] }), onRestoreVersion ? (_jsx("button", { type: "button", className: "mp-lb-mdkit-panel-primary-action", disabled: isRestoring, onClick: () => void restoreSelectedVersion(), children: isRestoring ? "Restoring..." : "Restore" })) : null] }), _jsx("pre", { className: "mp-lb-mdkit-version-history-code", children: controller.selectedVersion.content })] })) : (_jsx("div", { className: "mp-lb-mdkit-version-history-empty", children: "Select a saved revision to preview it here." })) })] })) : null, controller.isLoading ? (_jsx("div", { className: "mp-lb-mdkit-version-history-meta", children: "Loading version data..." })) : null] }));
 };

package/docs/api.md

@@ -51,7 +51,7 @@ end. Leave it off when the host application owns sizing and scrolling.
 
 The package stylesheet includes reset-resistant markdown rules for headings,
 lists, code blocks, blockquotes, and links. Styling is controlled with CSS
-variables on `.mdkit-markdown-editor`. See [Styling](./styling.md) for setup,
+variables on `.mp-lb-mdkit-markdown-editor`. See [Styling](./styling.md) for setup,
 dark mode, fonts, sizing, and theme customization.
 
 ## Document Persistence

package/docs/shadcn.md

@@ -107,7 +107,7 @@ If you do not use shadcn, use the base panels from the npm package:
 - `VersionHistoryPanel`
 - `MdKitConflictPanel`
 
-They render plain semantic HTML with stable `mdkit-*` classes. Import
+They render plain semantic HTML with stable `mp-lb-mdkit-*` classes. Import
 `@mp-lb/mdkit/styles.css` for generic fallback styling, or
 replace the CSS entirely. See [Styling](./styling.md#component-styling).
 

package/docs/styling.md

@@ -15,7 +15,7 @@ blockquotes, code blocks, spacing, and focus areas are left to your app's CSS.
 
 Many app frameworks include CSS resets. Tailwind Preflight, for example, removes
 default margins and list styling. The package stylesheet restores markdown
-editor defaults under `.mdkit-markdown-editor`, including:
+editor defaults under `.mp-lb-mdkit-markdown-editor`, including:
 
 - heading sizes and spacing
 - paragraph spacing
@@ -65,21 +65,21 @@ can override them with a class:
 
 ```css
 .my-markdown-editor {
-  --hsk-background: #ffffff;
-  --hsk-foreground: #172033;
-  --hsk-muted: #eef1f4;
-  --hsk-muted-foreground: #5b6472;
-  --hsk-border: #d8dee8;
-  --hsk-link: #4f46e5;
-  --hsk-font-family: Inter, system-ui, sans-serif;
-  --hsk-font-size: 16px;
-  --hsk-line-height: 1.7;
-  --hsk-surface-padding: 1rem;
-  --hsk-block-gap: 0.75rem;
-  --hsk-list-item-gap: 0.125rem;
-  --hsk-code-background: #eef1f4;
-  --hsk-code-radius: 0.35rem;
-  --hsk-code-block-radius: 0.75rem;
+  --mp-lb-mdkit-background: #ffffff;
+  --mp-lb-mdkit-foreground: #172033;
+  --mp-lb-mdkit-muted: #eef1f4;
+  --mp-lb-mdkit-muted-foreground: #5b6472;
+  --mp-lb-mdkit-border: #d8dee8;
+  --mp-lb-mdkit-link: #4f46e5;
+  --mp-lb-mdkit-font-family: Inter, system-ui, sans-serif;
+  --mp-lb-mdkit-font-size: 16px;
+  --mp-lb-mdkit-line-height: 1.7;
+  --mp-lb-mdkit-surface-padding: 1rem;
+  --mp-lb-mdkit-block-gap: 0.75rem;
+  --mp-lb-mdkit-list-item-gap: 0.125rem;
+  --mp-lb-mdkit-code-background: #eef1f4;
+  --mp-lb-mdkit-code-radius: 0.35rem;
+  --mp-lb-mdkit-code-block-radius: 0.75rem;
 }
 ```
 
@@ -97,9 +97,9 @@ runtime:
 ```tsx
 <MdKitEditor
   style={{
-    "--hsk-font-family": "ui-serif, Georgia, serif",
-    "--hsk-font-size": "18px",
-    "--hsk-line-height": "1.8",
+    "--mp-lb-mdkit-font-family": "ui-serif, Georgia, serif",
+    "--mp-lb-mdkit-font-size": "18px",
+    "--mp-lb-mdkit-line-height": "1.8",
   }}
   value={markdown}
   onChange={setMarkdown}
@@ -109,21 +109,65 @@ runtime:
 See [`MdKitEditorProps`](./api.md#mdkiteditorprops) for the full component
 props.
 
-## Component Styling
+## Class Hooks
 
-Editor styling and workflow component styling are separate.
+The package uses stable `mp-lb-mdkit-*` class names for all package-owned
+markup. These classes are a supported integration point for product-specific
+styling. Prefer CSS variables for theme-level changes, and use class hooks when
+you need structural changes, component-specific spacing, or state styling.
 
-`MdKitEditor` is styled through CSS variables on `.mdkit-markdown-editor`.
-Workflow panels such as `MdKitDocumentToolbar`, `MdKitConflictPanel`, and
-`VersionHistoryPanel` are intentionally design-system agnostic. They render raw
-semantic markup with stable `mdkit-*` class names. Without this stylesheet they
-are plain HTML; with this stylesheet they get generic fallback styling: square
-corners, one-pixel borders, clear spacing, and basic buttons.
+### Editor
 
-Style them in your app when you want them to match your product:
+`MdKitEditor` renders the markdown editing surface and the selection bubble
+toolbar.
+
+- `.mp-lb-mdkit-markdown-editor`: root element rendered by `MdKitEditor`
+- `.mp-lb-mdkit-markdown-editor-fill-height`: added to the root when
+  `fillHeight` is enabled
+- `.mp-lb-mdkit-editor-shell`: internal editor layout wrapper
+- `.mp-lb-mdkit-editor-surface`: scroll and background surface around the
+  ProseMirror editor
+- `.mp-lb-mdkit-editor-empty`: loading or connecting placeholder
+- `.mp-lb-mdkit-tiptap`: ProseMirror editable element
+- `.mp-lb-mdkit-toolbar`: selection bubble toolbar
+- `.mp-lb-mdkit-toolbar-button`: toolbar button
+- `.mp-lb-mdkit-toolbar-button-active`: added to active toolbar buttons
+- `.mp-lb-mdkit-toolbar-divider`: toolbar divider
+- `.mp-lb-mdkit-collaboration-caret`: remote collaboration caret
+- `.mp-lb-mdkit-collaboration-caret-label`: remote collaborator label
+
+The editor root exposes `data-read-only="true"` when `readOnly` is enabled.
+
+### Theme Editor
+
+`MdKitThemeEditor` renders controls for editing a theme object.
+
+- `.mp-lb-mdkit-theme-editor`: root element rendered by `MdKitThemeEditor`
+
+### Document Toolbar
+
+`MdKitDocumentToolbar` renders document save, restore, and conflict controls.
+
+- `.mp-lb-mdkit-document-toolbar`: root element
+- `.mp-lb-mdkit-document-toolbar-status`: status text group
+- `.mp-lb-mdkit-document-toolbar-error`: non-conflict error message
+- `.mp-lb-mdkit-document-toolbar-actions`: action button group
+- `.mp-lb-mdkit-document-toolbar-conflict-trigger`: button that opens external
+  conflict UI
+- `.mp-lb-mdkit-document-toolbar-conflict`: inline conflict action row
+
+The root exposes these state attributes:
+
+- `data-conflict`: `"true"` when a document conflict exists
+- `data-dirty`: `"true"` when local edits are unsaved
+- `data-save-status`: raw save status from the document controller
+- `data-status`: display status normalized for CSS selectors, such as
+  `"saved"`, `"unsaved-changes"`, `"autosave-pending"`, or `"conflict"`
+
+Example:
 
 ```css
-.mdkit-document-toolbar {
+.mp-lb-mdkit-document-toolbar {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -131,42 +175,117 @@ Style them in your app when you want them to match your product:
   padding: 0.5rem 0;
 }
 
-.mdkit-document-toolbar-status,
-.mdkit-document-toolbar-actions,
-.mdkit-document-toolbar-conflict {
+.mp-lb-mdkit-document-toolbar-status,
+.mp-lb-mdkit-document-toolbar-actions,
+.mp-lb-mdkit-document-toolbar-conflict {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
 
-.mdkit-document-toolbar[data-conflict="true"] {
+.mp-lb-mdkit-document-toolbar[data-conflict="true"] {
   color: #991b1b;
 }
 ```
 
-The toolbar class hooks are:
-
-- `.mdkit-document-toolbar`
-- `.mdkit-document-toolbar-status`
-- `.mdkit-document-toolbar-actions`
-- `.mdkit-document-toolbar-error`
-- `.mdkit-document-toolbar-conflict`
-
-It also exposes `data-conflict`, `data-dirty`, and `data-save-status`
-attributes for state-based styling.
-
-Version history and conflict panels use the same fallback panel CSS and expose:
-
-- `.mdkit-version-history-panel`
-- `.mdkit-version-history-header`
-- `.mdkit-version-history-list`
-- `.mdkit-version-history-item`
-- `.mdkit-version-history-preview`
-- `.mdkit-conflict-panel`
-- `.mdkit-conflict-panel-content`
-- `.mdkit-conflict-panel-action-row`
-- `.mdkit-panel-primary-action`
-- `.mdkit-panel-secondary-action`
+### Conflict Panel
+
+`MdKitConflictPanel` renders conflict details, previews, and conflict actions.
+
+- `.mp-lb-mdkit-conflict-panel`: root element
+- `.mp-lb-mdkit-conflict-panel-content`: title, explanatory text, and metadata
+- `.mp-lb-mdkit-conflict-panel-error`: error text
+- `.mp-lb-mdkit-conflict-panel-meta`: remote version metadata
+- `.mp-lb-mdkit-conflict-panel-preview`: preview area
+- `.mp-lb-mdkit-conflict-panel-tabs`: preview tab list
+- `.mp-lb-mdkit-conflict-panel-tab`: preview tab button
+- `.mp-lb-mdkit-conflict-panel-tab-active`: active preview tab button
+- `.mp-lb-mdkit-conflict-panel-action-row`: action button row
+- `.mp-lb-mdkit-panel-secondary-action`: secondary panel action button
+
+The preview tabs also use `aria-selected` for state-aware styling.
+
+### Version History Panel
+
+`VersionHistoryPanel` renders a version list, selected version preview, restore
+action, and empty/error states.
+
+- `.mp-lb-mdkit-version-history-panel`: root element
+- `.mp-lb-mdkit-version-history-header`: panel header
+- `.mp-lb-mdkit-version-history-title`: panel title
+- `.mp-lb-mdkit-version-history-subtitle`: panel subtitle
+- `.mp-lb-mdkit-version-history-layout`: list and preview layout
+- `.mp-lb-mdkit-version-history-list`: version list
+- `.mp-lb-mdkit-version-history-item`: version list item button
+- `.mp-lb-mdkit-version-history-item-active`: selected version list item
+- `.mp-lb-mdkit-version-history-item-title`: list item title
+- `.mp-lb-mdkit-version-history-item-meta`: list item or selected version metadata
+- `.mp-lb-mdkit-version-history-preview`: selected version preview area
+- `.mp-lb-mdkit-version-history-preview-header`: preview header
+- `.mp-lb-mdkit-version-history-preview-title`: preview title
+- `.mp-lb-mdkit-version-history-code`: markdown preview code block
+- `.mp-lb-mdkit-version-history-empty`: empty state text
+- `.mp-lb-mdkit-version-history-error`: error state text
+- `.mp-lb-mdkit-version-history-meta`: footer metadata
+- `.mp-lb-mdkit-panel-primary-action`: primary panel action button
+
+### Shared Panel Actions
+
+Conflict and version panels share generic action classes:
+
+- `.mp-lb-mdkit-panel-primary-action`: primary action button
+- `.mp-lb-mdkit-panel-secondary-action`: secondary action button
+
+## CSS Variables
+
+The package stylesheet defines variables on component roots so consumers can
+override broad styling without depending on internal element structure.
+
+### Editor Variables
+
+Set these on `.mp-lb-mdkit-markdown-editor`, a custom `className` passed to
+`MdKitEditor`, or the inline `style` prop:
+
+- `--mp-lb-mdkit-background`
+- `--mp-lb-mdkit-foreground`
+- `--mp-lb-mdkit-muted`
+- `--mp-lb-mdkit-muted-foreground`
+- `--mp-lb-mdkit-border`
+- `--mp-lb-mdkit-accent`
+- `--mp-lb-mdkit-accent-foreground`
+- `--mp-lb-mdkit-link`
+- `--mp-lb-mdkit-font-family`
+- `--mp-lb-mdkit-font-size`
+- `--mp-lb-mdkit-line-height`
+- `--mp-lb-mdkit-surface-padding`
+- `--mp-lb-mdkit-block-gap`
+- `--mp-lb-mdkit-list-item-gap`
+- `--mp-lb-mdkit-heading-font-weight`
+- `--mp-lb-mdkit-heading-1-size`
+- `--mp-lb-mdkit-heading-2-size`
+- `--mp-lb-mdkit-code-background`
+- `--mp-lb-mdkit-code-radius`
+- `--mp-lb-mdkit-code-block-radius`
+- `--mp-lb-mdkit-code-font-family`
+- `--mp-lb-mdkit-quote-border-color`
+
+### Panel Variables
+
+Set these on `.mp-lb-mdkit-document-toolbar`,
+`.mp-lb-mdkit-conflict-panel`, `.mp-lb-mdkit-version-history-panel`, or a
+wrapper around those components:
+
+- `--mp-lb-mdkit-panel-background`
+- `--mp-lb-mdkit-panel-surface`
+- `--mp-lb-mdkit-panel-foreground`
+- `--mp-lb-mdkit-panel-muted`
+- `--mp-lb-mdkit-panel-muted-foreground`
+- `--mp-lb-mdkit-panel-border`
+- `--mp-lb-mdkit-panel-strong-border`
+- `--mp-lb-mdkit-panel-danger`
+- `--mp-lb-mdkit-panel-success`
+- `--mp-lb-mdkit-panel-action-background`
+- `--mp-lb-mdkit-panel-action-foreground`
 
 ## Theme Helpers
 
@@ -197,23 +316,23 @@ For class-based dark mode, scope variable overrides to your dark selector:
 
 ```css
 .my-markdown-editor {
-  --hsk-background: #ffffff;
-  --hsk-foreground: #172033;
-  --hsk-muted: #eef1f4;
-  --hsk-muted-foreground: #5b6472;
-  --hsk-border: #d8dee8;
-  --hsk-link: #4f46e5;
-  --hsk-code-background: #eef1f4;
+  --mp-lb-mdkit-background: #ffffff;
+  --mp-lb-mdkit-foreground: #172033;
+  --mp-lb-mdkit-muted: #eef1f4;
+  --mp-lb-mdkit-muted-foreground: #5b6472;
+  --mp-lb-mdkit-border: #d8dee8;
+  --mp-lb-mdkit-link: #4f46e5;
+  --mp-lb-mdkit-code-background: #eef1f4;
 }
 
 .dark .my-markdown-editor {
-  --hsk-background: #0b1220;
-  --hsk-foreground: #e5edf7;
-  --hsk-muted: #172033;
-  --hsk-muted-foreground: #94a3b8;
-  --hsk-border: #314158;
-  --hsk-link: #38bdf8;
-  --hsk-code-background: #111827;
+  --mp-lb-mdkit-background: #0b1220;
+  --mp-lb-mdkit-foreground: #e5edf7;
+  --mp-lb-mdkit-muted: #172033;
+  --mp-lb-mdkit-muted-foreground: #94a3b8;
+  --mp-lb-mdkit-border: #314158;
+  --mp-lb-mdkit-link: #38bdf8;
+  --mp-lb-mdkit-code-background: #111827;
 }
 ```
 
@@ -240,7 +359,7 @@ const style = createMdKitEditorThemeStyle(
 ## What Not To Customize First
 
 Prefer changing CSS variables before overriding internal selectors like
-`.hsk-tiptap p` or `.hsk-editor-surface`. Direct selector overrides are still an
+`.mp-lb-mdkit-tiptap p` or `.mp-lb-mdkit-editor-surface`. Direct selector overrides are still an
 escape hatch, but they couple your app to mdkit's internal DOM.
 
 Use `MdKitThemeEditor` for theme builders, documentation, and debug tooling. It