@spatika/editor 1.5.0

package/README.md

@@ -0,0 +1,43 @@
+# @spatika/editor
+
+Tiptap-powered rich text editor with Spatika glass theming, slash commands, @mentions, AI hooks, and an extensible toolbar.
+
+## Install
+
+```bash
+npm install @spatika/editor @spatika/tokens
+```
+
+Peer dependencies: `react` and `react-dom` (^18 or ^19).
+
+## Bootstrap
+
+```tsx
+import "@spatika/tokens/styles.css";
+import "@spatika/editor/styles.css";
+import { SpatikaThemeProvider } from "@spatika/react";
+import { SpatikaEditor } from "@spatika/editor";
+```
+
+`SpatikaEditor` is also re-exported from `@spatika/react`.
+
+## Usage
+
+```tsx
+<SpatikaEditor
+  value={html}
+  onChange={setHtml}
+  placeholder="Start writing…"
+  mentions={[{ id: "1", label: "Asha Verma" }]}
+  onAiCommand={async (context) => rewrite(context.actionId, context.selectedText)}
+  toolbar={{ layout: "ribbon" }}
+/>
+```
+
+## Headless
+
+Use `useSpatikaEditor` when you need full control over chrome while keeping Spatika's default extensions.
+
+## License
+
+MIT — uses MIT-licensed Tiptap packages only.

package/dist/composites/AiCommandDock.d.ts

@@ -0,0 +1,13 @@
+import type { Editor } from "@tiptap/core";
+import type { AiActionDefinition, AiCommandMenuConfig } from "../lib/types";
+import type { AiCommandRunRequest } from "./AiCommandMenu";
+type AiCommandDockProps = {
+    editor: Editor | null;
+    config?: AiCommandMenuConfig;
+    actions?: AiActionDefinition[];
+    onRun: (request: AiCommandRunRequest) => void;
+    className?: string;
+};
+export declare function AiCommandDock({ editor, config, actions, onRun, className }: AiCommandDockProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=AiCommandDock.d.ts.map

package/dist/composites/AiCommandDock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiCommandDock.d.ts","sourceRoot":"","sources":["../../src/composites/AiCommandDock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAgB3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAI5E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAoB3D,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,KAAK,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,kBAAkB,sCAwF9F"}

package/dist/composites/AiCommandDock.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowUp, MessageSquarePlus, PenLine, Plus, Search, Sparkles, Table2, } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { resolveAiCommandActions, resolveAiPromptConfig, } from "../lib/ai-command-menu";
+import { AI_PROMPT_ACTION_ID } from "../lib/types";
+import { cn } from "../lib/cn";
+import { AiCommandPanel } from "./AiCommandPanel";
+const DEFAULT_ACTION_ICONS = {
+    proofread: _jsx(Search, { className: "size-4" }),
+    rewrite: _jsx(PenLine, { className: "size-4" }),
+    shorten: _jsx(ArrowLeft, { className: "size-4" }),
+    improve: _jsx(Sparkles, { className: "size-4" }),
+    expand: _jsx(Plus, { className: "size-4" }),
+    continue: _jsx(Plus, { className: "size-4" }),
+    table: _jsx(Table2, { className: "size-4" }),
+    comment: _jsx(MessageSquarePlus, { className: "size-4" }),
+};
+function withDefaultIcons(actions) {
+    return actions.map((action) => ({
+        ...action,
+        icon: action.icon ?? DEFAULT_ACTION_ICONS[action.id],
+    }));
+}
+export function AiCommandDock({ editor, config, actions, onRun, className }) {
+    const [open, setOpen] = useState(false);
+    const [prompt, setPrompt] = useState("");
+    const rootRef = useRef(null);
+    const panelId = useId();
+    const title = config?.title ?? "AI Toolkit examples";
+    const commandActions = withDefaultIcons(resolveAiCommandActions(config, actions));
+    const promptConfig = resolveAiPromptConfig(config?.prompt);
+    const hasSelection = Boolean(editor?.state?.selection && !editor.state.selection.empty);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", onPointerDown);
+        return () => document.removeEventListener("mousedown", onPointerDown);
+    }, [open]);
+    const runAction = (actionId, userPrompt) => {
+        onRun({ actionId, prompt: userPrompt });
+        setOpen(false);
+        setPrompt("");
+    };
+    const submitPrompt = () => {
+        const trimmed = prompt.trim();
+        if (!trimmed)
+            return;
+        runAction(AI_PROMPT_ACTION_ID, trimmed);
+    };
+    if (!editor)
+        return null;
+    return (_jsxs("div", { ref: rootRef, className: cn("spk-editor-ai-dock", className), children: [open ? (_jsx(AiCommandPanel, { id: panelId, title: title, actions: commandActions, hasSelection: hasSelection, onSelect: (actionId) => runAction(actionId), className: "spk-editor-ai-dock-panel" })) : null, promptConfig.enabled ? (_jsxs("div", { className: "spk-editor-ai-dock-bar", role: "search", children: [_jsx("button", { type: "button", className: cn("spk-editor-ai-dock-trigger", open && "spk-editor-ai-dock-trigger--active"), "aria-label": "AI commands", "aria-expanded": open, "aria-controls": open ? panelId : undefined, onClick: () => setOpen((value) => !value), children: _jsx(Sparkles, { className: "size-4" }) }), _jsxs("label", { className: "spk-editor-ai-dock-field", children: [_jsx("span", { className: "sr-only", children: promptConfig.placeholder }), _jsx("input", { type: "text", className: "spk-editor-ai-dock-input", value: prompt, placeholder: promptConfig.placeholder, onFocus: () => setOpen(true), onChange: (event) => setPrompt(event.target.value), onKeyDown: (event) => {
+                                    if (event.key === "Enter")
+                                        submitPrompt();
+                                    if (event.key === "Escape")
+                                        setOpen(false);
+                                } })] }), _jsx("button", { type: "button", className: "spk-editor-ai-dock-submit", "aria-label": promptConfig.submitLabel, disabled: !prompt.trim(), onClick: submitPrompt, children: _jsx(ArrowUp, { className: "size-4" }) })] })) : null] }));
+}

package/dist/composites/AiCommandMenu.d.ts

@@ -0,0 +1,16 @@
+import type { Editor } from "@tiptap/core";
+import type { AiActionDefinition, AiCommandMenuConfig } from "../lib/types";
+export type AiCommandRunRequest = {
+    actionId: string;
+    prompt?: string;
+};
+type AiCommandMenuProps = {
+    editor: Editor | null;
+    config?: AiCommandMenuConfig;
+    actions?: AiActionDefinition[];
+    onRun: (request: AiCommandRunRequest) => void;
+    className?: string;
+};
+export declare function AiCommandMenu({ editor, config, actions, onRun, className }: AiCommandMenuProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=AiCommandMenu.d.ts.map

package/dist/composites/AiCommandMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiCommandMenu.d.ts","sourceRoot":"","sources":["../../src/composites/AiCommandMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAO3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAM5E,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,KAAK,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,kBAAkB,sCA6F9F"}

package/dist/composites/AiCommandMenu.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUp, Sparkles } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { resolveAiCommandActions, resolveAiPromptConfig, } from "../lib/ai-command-menu";
+import { AI_PROMPT_ACTION_ID } from "../lib/types";
+import { cn } from "../lib/cn";
+import { AiCommandPanel } from "./AiCommandPanel";
+import { ToolbarButton } from "./ToolbarButton";
+export function AiCommandMenu({ editor, config, actions, onRun, className }) {
+    const [open, setOpen] = useState(false);
+    const [prompt, setPrompt] = useState("");
+    const rootRef = useRef(null);
+    const titleId = useId();
+    const title = config?.title ?? "AI Toolkit examples";
+    const commandActions = resolveAiCommandActions(config, actions);
+    const promptConfig = resolveAiPromptConfig(config?.prompt);
+    const hasSelection = Boolean(editor?.state?.selection && !editor.state.selection.empty);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", onPointerDown);
+        return () => document.removeEventListener("mousedown", onPointerDown);
+    }, [open]);
+    const close = () => {
+        setOpen(false);
+        setPrompt("");
+    };
+    const runAction = (actionId, userPrompt) => {
+        onRun({ actionId, prompt: userPrompt });
+        close();
+    };
+    const submitPrompt = () => {
+        const trimmed = prompt.trim();
+        if (!trimmed)
+            return;
+        runAction(AI_PROMPT_ACTION_ID, trimmed);
+    };
+    if (!editor)
+        return null;
+    return (_jsxs("div", { ref: rootRef, className: cn("spk-editor-ai-menu", className), children: [_jsx(ToolbarButton, { "aria-label": "AI commands", "aria-expanded": open, "aria-haspopup": "dialog", "aria-controls": open ? titleId : undefined, active: open, onClick: () => setOpen((value) => !value), children: _jsx(Sparkles, { className: "size-4" }) }), open ? (_jsxs("div", { className: "spk-editor-ai-menu-shell", onMouseDown: (event) => event.stopPropagation(), children: [_jsx(AiCommandPanel, { id: titleId, title: title, actions: commandActions, hasSelection: hasSelection, onSelect: (actionId) => runAction(actionId) }), promptConfig.enabled ? (_jsxs("div", { className: "spk-editor-ai-menu-prompt", children: [_jsxs("label", { className: "spk-editor-ai-menu-prompt-field", children: [_jsx("span", { className: "sr-only", children: promptConfig.placeholder }), _jsx("input", { type: "text", className: "spk-editor-ai-menu-prompt-input", value: prompt, placeholder: promptConfig.placeholder, onChange: (event) => setPrompt(event.target.value), onKeyDown: (event) => {
+                                            if (event.key === "Enter")
+                                                submitPrompt();
+                                            if (event.key === "Escape")
+                                                close();
+                                        }, autoFocus: true })] }), _jsx("button", { type: "button", className: "spk-editor-ai-menu-prompt-submit", "aria-label": promptConfig.submitLabel, disabled: !prompt.trim(), onClick: submitPrompt, children: _jsx(ArrowUp, { className: "size-4" }) })] })) : null] })) : null] }));
+}

package/dist/composites/AiCommandPanel.d.ts

@@ -0,0 +1,12 @@
+import type { AiActionDefinition } from "../lib/types";
+type AiCommandPanelProps = {
+    title: string;
+    actions: AiActionDefinition[];
+    hasSelection: boolean;
+    onSelect: (actionId: string) => void;
+    className?: string;
+    id?: string;
+};
+export declare function AiCommandPanel({ title, actions, hasSelection, onSelect, className, id, }: AiCommandPanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AiCommandPanel.d.ts.map

package/dist/composites/AiCommandPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiCommandPanel.d.ts","sourceRoot":"","sources":["../../src/composites/AiCommandPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIvD,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAMF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,EAAE,GACH,EAAE,mBAAmB,+BA+BrB"}

package/dist/composites/AiCommandPanel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sparkles } from "lucide-react";
+import { cn } from "../lib/cn";
+function actionDisabled(action, hasSelection) {
+    return Boolean(action.requiresSelection && !hasSelection);
+}
+export function AiCommandPanel({ title, actions, hasSelection, onSelect, className, id, }) {
+    return (_jsxs("div", { id: id, className: cn("spk-editor-ai-panel", className), role: "dialog", "aria-label": title, children: [_jsx("div", { className: "spk-editor-ai-panel-title", children: title }), _jsx("ul", { className: "spk-editor-ai-panel-list", "aria-label": title, children: actions.map((action) => {
+                    const disabled = actionDisabled(action, hasSelection);
+                    return (_jsx("li", { children: _jsxs("button", { type: "button", className: "spk-editor-ai-panel-item", disabled: disabled, onClick: () => onSelect(action.id), children: [_jsx("span", { className: "spk-editor-ai-panel-item-icon", "aria-hidden": "true", children: action.icon ?? _jsx(Sparkles, { className: "size-4" }) }), _jsxs("span", { className: "spk-editor-ai-panel-item-copy", children: [_jsx("span", { className: "spk-editor-ai-panel-item-label", children: action.label }), action.description ? (_jsx("span", { className: "spk-editor-ai-panel-item-desc", children: action.description })) : null] })] }) }, action.id));
+                }) })] }));
+}

package/dist/composites/AiOverlay.d.ts

@@ -0,0 +1,7 @@
+type AiOverlayProps = {
+    visible: boolean;
+    className?: string;
+};
+export declare function AiOverlay({ visible, className }: AiOverlayProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=AiOverlay.d.ts.map

package/dist/composites/AiOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiOverlay.d.ts","sourceRoot":"","sources":["../../src/composites/AiOverlay.tsx"],"names":[],"mappings":"AAGA,KAAK,cAAc,GAAG;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,cAAc,sCAS/D"}

package/dist/composites/AiOverlay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sparkles } from "lucide-react";
+import { cn } from "../lib/cn";
+export function AiOverlay({ visible, className }) {
+    if (!visible)
+        return null;
+    return (_jsxs("div", { className: cn("spk-editor-ai-overlay", className), "aria-hidden": "true", children: [_jsx(Sparkles, { className: "spk-editor-ai-overlay-icon size-5" }), _jsx("span", { children: "AI is working\u2026" })] }));
+}

package/dist/composites/EditorBubbleMenu.d.ts

@@ -0,0 +1,10 @@
+import type { Editor } from "@tiptap/core";
+import type { AiActionDefinition } from "../lib/types";
+type EditorBubbleMenuProps = {
+    editor: Editor | null;
+    aiActions?: AiActionDefinition[];
+    onAiAction?: (actionId: string) => void;
+};
+export declare function EditorBubbleMenu({ editor, aiActions, onAiAction }: EditorBubbleMenuProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=EditorBubbleMenu.d.ts.map

package/dist/composites/EditorBubbleMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorBubbleMenu.d.ts","sourceRoot":"","sources":["../../src/composites/EditorBubbleMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGvD,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,qBAAqB,sCA4DxF"}

package/dist/composites/EditorBubbleMenu.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { Bold, Code, Italic, Sparkles, Strikethrough, Underline as UnderlineIcon } from "lucide-react";
+import { ToolbarButton } from "./ToolbarButton";
+export function EditorBubbleMenu({ editor, aiActions, onAiAction }) {
+    if (!editor)
+        return null;
+    return (_jsxs(BubbleMenu, { editor: editor, className: "spk-editor-bubble-menu", shouldShow: ({ editor: ed, state }) => {
+            const { selection } = state;
+            if (selection.empty)
+                return false;
+            if (ed.isActive("image"))
+                return false;
+            return true;
+        }, children: [_jsx(ToolbarButton, { "aria-label": "Bold", active: editor.isActive("bold"), onClick: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Italic", active: editor.isActive("italic"), onClick: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Underline", active: editor.isActive("underline"), onClick: () => editor.chain().focus().toggleUnderline().run(), children: _jsx(UnderlineIcon, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Strikethrough", active: editor.isActive("strike"), onClick: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Inline code", active: editor.isActive("code"), onClick: () => editor.chain().focus().toggleCode().run(), children: _jsx(Code, { className: "size-4" }) }), aiActions?.map((action) => (_jsx(ToolbarButton, { "aria-label": action.label, onClick: () => onAiAction?.(action.id), children: action.icon ?? _jsx(Sparkles, { className: "size-4" }) }, action.id)))] }));
+}

package/dist/composites/EditorToolbar.d.ts

@@ -0,0 +1,20 @@
+import type { Editor } from "@tiptap/core";
+import type { ReactNode } from "react";
+import type { AiActionDefinition, AiCommandMenuConfig, ImageInsertConfig, SpatikaEditorToolbarConfig } from "../lib/types";
+import { type AiCommandRunRequest } from "./AiCommandMenu";
+type EditorToolbarProps = {
+    editor: Editor | null;
+    config?: SpatikaEditorToolbarConfig;
+    toolbarActions?: ReactNode;
+    aiActions?: AiActionDefinition[];
+    aiCommandMenu?: AiCommandMenuConfig | false;
+    useAiCommandMenu?: boolean;
+    onAiCommand?: (request: AiCommandRunRequest) => void;
+    onAiAction?: (actionId: string) => void;
+    onInsertImage?: () => void;
+    imageInsert?: ImageInsertConfig;
+    className?: string;
+};
+export declare function EditorToolbar({ editor, config, toolbarActions, aiActions, aiCommandMenu, useAiCommandMenu, onAiCommand, onAiAction, onInsertImage, imageInsert, className, }: EditorToolbarProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=EditorToolbar.d.ts.map

package/dist/composites/EditorToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["../../src/composites/EditorToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAgC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAG3H,OAAO,EAAiB,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,mBAAmB,GAAG,KAAK,CAAC;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,MAAM,EACN,cAAc,EACd,SAAS,EACT,aAAa,EACb,gBAAwB,EACxB,WAAW,EACX,UAAU,EACV,aAAa,EACb,WAAW,EACX,SAAS,GACV,EAAE,kBAAkB,sCAgSpB"}

package/dist/composites/EditorToolbar.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Code, Heading1, Heading2, Heading3, Highlighter, ImageIcon, Italic, Link2, List, ListOrdered, ListTodo, Minus, Palette, Pilcrow, Quote, Redo2, Sparkles, SquareCode, Strikethrough, Subscript, Superscript, Table2, Underline as UnderlineIcon, Undo2, } from "lucide-react";
+import { useEffect, useState } from "react";
+import { DEFAULT_TOOLBAR } from "../lib/types";
+import { cn } from "../lib/cn";
+import { AiCommandMenu } from "./AiCommandMenu";
+import { ToolbarButton } from "./ToolbarButton";
+import { ImageInsertPanel, LinkInsertPanel, TableInsertPanel } from "./ToolbarInsertPanels";
+import { HighlightColorPanel, TextColorPanel } from "./ToolbarFormatPanels";
+import { ToolbarPopover } from "./ToolbarPopover";
+function ToolbarGroup({ children, className }) {
+    return _jsx("div", { className: cn("spk-editor-toolbar-group", className), children: children });
+}
+export function EditorToolbar({ editor, config, toolbarActions, aiActions, aiCommandMenu, useAiCommandMenu = false, onAiCommand, onAiAction, onInsertImage, imageInsert, className, }) {
+    const toolbar = { ...DEFAULT_TOOLBAR, ...config };
+    const [, setRevision] = useState(0);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const refresh = () => setRevision((value) => value + 1);
+        editor.on("transaction", refresh);
+        return () => {
+            editor.off("transaction", refresh);
+        };
+    }, [editor]);
+    if (!editor)
+        return null;
+    const historyGroup = toolbar.history ? (_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { "aria-label": "Undo", disabled: !editor.can().undo(), onClick: () => editor.chain().focus().undo().run(), children: _jsx(Undo2, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Redo", disabled: !editor.can().redo(), onClick: () => editor.chain().focus().redo().run(), children: _jsx(Redo2, { className: "size-4" }) })] })) : null;
+    const textStyleGroup = toolbar.textStyle ? (_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { "aria-label": "Paragraph", active: editor.isActive("paragraph"), onClick: () => editor.chain().focus().setParagraph().run(), children: _jsx(Pilcrow, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Heading 1", active: editor.isActive("heading", { level: 1 }), onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), children: _jsx(Heading1, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Heading 2", active: editor.isActive("heading", { level: 2 }), onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), children: _jsx(Heading2, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Heading 3", active: editor.isActive("heading", { level: 3 }), onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), children: _jsx(Heading3, { className: "size-4" }) })] })) : null;
+    const inlineGroup = toolbar.inlineFormat ? (_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { "aria-label": "Bold", active: editor.isActive("bold"), onClick: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Italic", active: editor.isActive("italic"), onClick: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Underline", active: editor.isActive("underline"), onClick: () => editor.chain().focus().toggleUnderline().run(), children: _jsx(UnderlineIcon, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Strikethrough", active: editor.isActive("strike"), onClick: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Inline code", active: editor.isActive("code"), onClick: () => editor.chain().focus().toggleCode().run(), children: _jsx(Code, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Subscript", active: editor.isActive("subscript"), onClick: () => editor.chain().focus().toggleSubscript().run(), children: _jsx(Subscript, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Superscript", active: editor.isActive("superscript"), onClick: () => editor.chain().focus().toggleSuperscript().run(), children: _jsx(Superscript, { className: "size-4" }) }), _jsx(ToolbarPopover, { label: "Text color", title: "Text color", icon: _jsx(Palette, { className: "size-4" }), active: Boolean(editor.getAttributes("textStyle").color), children: ({ close }) => _jsx(TextColorPanel, { editor: editor, close: close }) }), _jsx(ToolbarPopover, { label: "Highlight", title: "Highlight color", icon: _jsx(Highlighter, { className: "size-4" }), active: editor.isActive("highlight"), children: ({ close }) => _jsx(HighlightColorPanel, { editor: editor, close: close }) }), _jsx(ToolbarButton, { "aria-label": "Blockquote", active: editor.isActive("blockquote"), onClick: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, { className: "size-4" }) })] })) : null;
+    const listGroup = toolbar.lists ? (_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { "aria-label": "Bullet list", active: editor.isActive("bulletList"), onClick: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Numbered list", active: editor.isActive("orderedList"), onClick: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Task list", active: editor.isActive("taskList"), onClick: () => editor.chain().focus().toggleTaskList().run(), children: _jsx(ListTodo, { className: "size-4" }) })] })) : null;
+    const alignGroup = toolbar.alignment ? (_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { "aria-label": "Align left", active: editor.isActive({ textAlign: "left" }), onClick: () => editor.chain().focus().setTextAlign("left").run(), children: _jsx(AlignLeft, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Align center", active: editor.isActive({ textAlign: "center" }), onClick: () => editor.chain().focus().setTextAlign("center").run(), children: _jsx(AlignCenter, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Align right", active: editor.isActive({ textAlign: "right" }), onClick: () => editor.chain().focus().setTextAlign("right").run(), children: _jsx(AlignRight, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Justify", active: editor.isActive({ textAlign: "justify" }), onClick: () => editor.chain().focus().setTextAlign("justify").run(), children: _jsx(AlignJustify, { className: "size-4" }) })] })) : null;
+    const insertGroup = toolbar.insert ? (_jsxs(ToolbarGroup, { children: [_jsx(ToolbarPopover, { label: "Insert link", title: "Insert link", icon: _jsx(Link2, { className: "size-4" }), children: ({ close }) => _jsx(LinkInsertPanel, { editor: editor, close: close }) }), _jsx(ToolbarButton, { "aria-label": "Insert divider", onClick: () => editor.chain().focus().setHorizontalRule().run(), children: _jsx(Minus, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Code block", active: editor.isActive("codeBlock"), onClick: () => editor.chain().focus().toggleCodeBlock().run(), children: _jsx(SquareCode, { className: "size-4" }) }), _jsx(ToolbarPopover, { label: "Insert table", title: "Insert table", icon: _jsx(Table2, { className: "size-4" }), children: ({ close }) => _jsx(TableInsertPanel, { editor: editor, close: close }) }), onInsertImage ? (_jsx(ToolbarButton, { "aria-label": "Insert image", onClick: onInsertImage, children: _jsx(ImageIcon, { className: "size-4" }) })) : (_jsx(ToolbarPopover, { label: "Insert image", title: "Insert image", icon: _jsx(ImageIcon, { className: "size-4" }), children: ({ close }) => _jsx(ImageInsertPanel, { editor: editor, close: close, config: imageInsert }) }))] })) : null;
+    const aiGroup = toolbar.ai && useAiCommandMenu && onAiCommand ? (_jsx(ToolbarGroup, { children: _jsx(AiCommandMenu, { editor: editor, config: typeof aiCommandMenu === "object" ? aiCommandMenu : undefined, actions: aiActions, onRun: onAiCommand }) })) : toolbar.ai && aiActions?.length ? (_jsx(ToolbarGroup, { children: aiActions.map((action) => (_jsx(ToolbarButton, { "aria-label": action.label, onClick: () => onAiAction?.(action.id), children: action.icon ?? _jsx(Sparkles, { className: "size-4" }) }, action.id))) })) : null;
+    const groupNodes = [
+        { id: "history", node: historyGroup },
+        { id: "text-style", node: textStyleGroup },
+        { id: "inline", node: inlineGroup },
+        { id: "lists", node: listGroup },
+        { id: "align", node: alignGroup },
+        { id: "insert", node: insertGroup },
+        { id: "ai", node: aiGroup },
+    ].filter((entry) => entry.node);
+    return (_jsxs("div", { className: cn("spk-editor-toolbar", toolbar.layout === "compact" && "spk-editor-toolbar--compact", className), role: "toolbar", "aria-label": "Editor formatting", children: [_jsx("div", { className: "spk-editor-toolbar-row", children: groupNodes.map((entry) => (_jsx("div", { children: entry.node }, entry.id))) }), toolbarActions ? _jsx("div", { className: "spk-editor-toolbar-actions", children: toolbarActions }) : null] }));
+}

package/dist/composites/ImageBubbleMenu.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from "@tiptap/core";
+type ImageBubbleMenuProps = {
+    editor: Editor | null;
+};
+export declare function ImageBubbleMenu({ editor }: ImageBubbleMenuProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=ImageBubbleMenu.d.ts.map

package/dist/composites/ImageBubbleMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBubbleMenu.d.ts","sourceRoot":"","sources":["../../src/composites/ImageBubbleMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAM3C,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE,oBAAoB,sCAwC/D"}

package/dist/composites/ImageBubbleMenu.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { AlignCenter, AlignLeft, AlignRight, Trash2 } from "lucide-react";
+import { ToolbarButton } from "./ToolbarButton";
+export function ImageBubbleMenu({ editor }) {
+    if (!editor)
+        return null;
+    const setAlign = (align) => {
+        editor.chain().focus().updateAttributes("image", { align }).run();
+    };
+    const setWidth = (width) => {
+        editor.chain().focus().updateAttributes("image", { width }).run();
+    };
+    return (_jsxs(BubbleMenu, { editor: editor, className: "spk-editor-bubble-menu", shouldShow: ({ editor: ed }) => ed.isActive("image"), children: [_jsx(ToolbarButton, { "aria-label": "Align image left", onClick: () => setAlign("left"), children: _jsx(AlignLeft, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Align image center", onClick: () => setAlign("center"), children: _jsx(AlignCenter, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Align image right", onClick: () => setAlign("right"), children: _jsx(AlignRight, { className: "size-4" }) }), _jsx(ToolbarButton, { "aria-label": "Image width 50%", onClick: () => setWidth("50%"), children: "50%" }), _jsx(ToolbarButton, { "aria-label": "Image width 100%", onClick: () => setWidth("100%"), children: "100%" }), _jsx(ToolbarButton, { "aria-label": "Delete image", onClick: () => editor.chain().focus().deleteSelection().run(), children: _jsx(Trash2, { className: "size-4" }) })] }));
+}

package/dist/composites/MentionMenu.d.ts

@@ -0,0 +1,11 @@
+import type { MentionContact } from "../lib/types";
+type MentionMenuProps = {
+    contacts: MentionContact[];
+    query: string;
+    activeIndex: number;
+    open: boolean;
+    onSelect: (contact: MentionContact) => void;
+};
+export declare function MentionMenu({ contacts, query, activeIndex, open, onSelect }: MentionMenuProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=MentionMenu.d.ts.map

package/dist/composites/MentionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionMenu.d.ts","sourceRoot":"","sources":["../../src/composites/MentionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,gBAAgB,sCAkC7F"}

package/dist/composites/MentionMenu.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+export function MentionMenu({ contacts, query, activeIndex, open, onSelect }) {
+    if (!open || contacts.length === 0)
+        return null;
+    return (_jsxs("div", { className: "spk-editor-suggestion", role: "listbox", "aria-label": "Mentions", children: [_jsx("div", { className: "spk-editor-suggestion-header", children: query ? `People matching “@${query}”` : "Mention someone" }), _jsx("ul", { className: "spk-editor-suggestion-list", children: contacts.map((contact, index) => (_jsx("li", { children: _jsxs("button", { type: "button", role: "option", "aria-selected": index === activeIndex, className: cn("spk-editor-suggestion-item", index === activeIndex && "spk-editor-suggestion-item--active"), onMouseDown: (event) => {
+                            event.preventDefault();
+                            onSelect(contact);
+                        }, children: [_jsx("span", { className: "spk-editor-suggestion-title", children: contact.label }), contact.subtitle ? (_jsx("span", { className: "spk-editor-suggestion-desc", children: contact.subtitle })) : null] }) }, contact.id))) })] }));
+}

package/dist/composites/SlashCommandMenu.d.ts

@@ -0,0 +1,13 @@
+import type { Editor } from "@tiptap/core";
+import type { SlashCommandItem } from "../lib/types";
+type SlashCommandMenuProps = {
+    editor: Editor | null;
+    items: SlashCommandItem[];
+    query: string;
+    activeIndex: number;
+    open: boolean;
+    onSelect: (item: SlashCommandItem) => void;
+};
+export declare function SlashCommandMenu({ items, query, activeIndex, open, onSelect, }: SlashCommandMenuProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=SlashCommandMenu.d.ts.map

package/dist/composites/SlashCommandMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashCommandMenu.d.ts","sourceRoot":"","sources":["../../src/composites/SlashCommandMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGrD,KAAK,qBAAqB,GAAG;IAC3B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,GACT,EAAE,qBAAqB,sCAkCvB"}

package/dist/composites/SlashCommandMenu.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+export function SlashCommandMenu({ items, query, activeIndex, open, onSelect, }) {
+    if (!open || items.length === 0)
+        return null;
+    return (_jsxs("div", { className: "spk-editor-suggestion", role: "listbox", "aria-label": "Slash commands", children: [_jsx("div", { className: "spk-editor-suggestion-header", children: query ? `Results for “/${query}”` : "Insert block" }), _jsx("ul", { className: "spk-editor-suggestion-list", children: items.map((item, index) => (_jsx("li", { children: _jsxs("button", { type: "button", role: "option", "aria-selected": index === activeIndex, className: cn("spk-editor-suggestion-item", index === activeIndex && "spk-editor-suggestion-item--active"), onMouseDown: (event) => {
+                            event.preventDefault();
+                            onSelect(item);
+                        }, children: [_jsx("span", { className: "spk-editor-suggestion-title", children: item.title }), item.description ? (_jsx("span", { className: "spk-editor-suggestion-desc", children: item.description })) : null] }) }, item.id))) })] }));
+}

package/dist/composites/SpatikaEditor.d.ts

@@ -0,0 +1,14 @@
+import type { SpatikaEditorHandle } from "../lib/types";
+export declare const SpatikaEditor: import("react").ForwardRefExoticComponent<import("..").UseSpatikaEditorOptions & {
+    className?: string;
+    heightClassName?: string;
+    toolbar?: import("..").SpatikaEditorToolbarConfig;
+    toolbarActions?: import("react").ReactNode;
+    isAiProcessing?: boolean;
+    aiActions?: import("..").AiActionDefinition[];
+    aiCommandMenu?: import("..").AiCommandMenuConfig | false;
+    imageInsert?: import("..").ImageInsertConfig;
+    onInsertImage?: () => void;
+    mobileFullscreen?: boolean;
+} & import("react").RefAttributes<SpatikaEditorHandle>>;
+//# sourceMappingURL=SpatikaEditor.d.ts.map

package/dist/composites/SpatikaEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatikaEditor.d.ts","sourceRoot":"","sources":["../../src/composites/SpatikaEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAsB,MAAM,cAAc,CAAC;AAmB5E,eAAO,MAAM,aAAa;;;;;;;;;;;uDA2QzB,CAAC"}