@inshapardaz/likhari-react 0.1.0-dev.7

package/dist/EditorRoot.d.ts

@@ -0,0 +1,38 @@
+import type { MantineThemeOverride } from '@mantine/core';
+import type { SerializedEditorState } from 'lexical';
+import { type FormatId } from '@inshapardaz/likhari-converters';
+import { type EditorFeatureConfig, type FeatureConfigPresetName } from '@inshapardaz/likhari-core';
+export interface EditorInitialContent {
+    format: Extract<FormatId, 'lexical-json' | 'plain-text'>;
+    value: string;
+}
+export interface EditorRootProps {
+    documentId?: string;
+    initialContent?: EditorInitialContent;
+    featureConfig?: EditorFeatureConfig;
+    featurePreset?: FeatureConfigPresetName;
+    theme?: MantineThemeOverride;
+    colorScheme?: 'light' | 'dark';
+    locale?: 'en' | 'ur' | 'pa-shahmukhi';
+    placeholder?: string;
+    /**
+     * CSS height for the editor box (toolbar + canvas together) — accepts any
+     * CSS length, e.g. '100%' to fill a sized parent, '60vh', or a number of
+     * pixels. The canvas scrolls internally once its content exceeds this,
+     * rather than the editor (and the page around it) growing without bound.
+     * Defaults to a fixed height so the editor has a sane size out of the box
+     * even when the host hasn't given its container an explicit height.
+     */
+    height?: string | number;
+    onChange?: (state: SerializedEditorState) => void;
+    onSave?: (content: string, format: FormatId) => void;
+}
+export interface EditorRef {
+    getContent(format: FormatId): string;
+    setContent(value: string, format: FormatId): void;
+    hasUnsavedChanges(): boolean;
+    confirmDiscard(): Promise<boolean>;
+    focus(): void;
+}
+export declare const EditorRoot: import("react").ForwardRefExoticComponent<EditorRootProps & import("react").RefAttributes<EditorRef>>;
+//# sourceMappingURL=EditorRoot.d.ts.map

package/dist/EditorRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAS1D,OAAO,KAAK,EAAe,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACvF,OAAO,EAAwB,KAAK,mBAAmB,EAAE,KAAK,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAMzH,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC,QAAQ,EAAE,cAAc,GAAG,YAAY,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IAClD,iBAAiB,IAAI,OAAO,CAAC;IAC7B,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACnC,KAAK,IAAI,IAAI,CAAC;CACf;AAQD,eAAO,MAAM,UAAU,uGAoHrB,CAAC"}

package/dist/EditorRoot.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { defaultFormatRegistry } from '@inshapardaz/likhari-converters';
+import { resolveFeatureConfig } from '@inshapardaz/likhari-core';
+import { EDITOR_NODES } from './nodes.js';
+import { editorTheme } from './theme/editorTheme.js';
+import { EditorThemeProvider } from './theme/EditorThemeProvider.js';
+import { Toolbar } from './components/Toolbar.js';
+function initialEditorStateJson(initialContent) {
+    if (!initialContent)
+        return undefined;
+    const state = defaultFormatRegistry.parse(initialContent.format, initialContent.value);
+    return JSON.stringify(state);
+}
+export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, locale = 'en', placeholder = 'Start writing…', height = '480px', onChange, onSave, }, ref) {
+    const config = useMemo(() => resolveFeatureConfig(featureConfig, featurePreset), [featureConfig, featurePreset]);
+    const editorStateRef = useRef(null);
+    const lastSavedJsonRef = useRef(null);
+    const [isDirty, setIsDirty] = useState(false);
+    const initialConfig = useMemo(() => ({
+        namespace: `likhari-editor-${documentId ?? 'anonymous'}`,
+        nodes: EDITOR_NODES,
+        theme: editorTheme,
+        editorState: initialEditorStateJson(initialContent),
+        onError(error) {
+            throw error;
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    useImperativeHandle(ref, () => ({
+        getContent(format) {
+            if (!editorStateRef.current)
+                return '';
+            const json = editorStateRef.current.toJSON();
+            return defaultFormatRegistry.serialize(format, json);
+        },
+        setContent(value, format) {
+            // Applied on next render via editorState prop is not supported for
+            // an already-mounted LexicalComposer; hosts needing this before
+            // Phase 2's controlled-mode support should remount with a new
+            // `initialContent`/`documentId` in the meantime.
+            void value;
+            void format;
+            throw new Error('@inshapardaz/likhari-react: EditorRef.setContent is not implemented yet — controlled mode is Phase 2 work (docs/editor-architecture-design.md §5).');
+        },
+        hasUnsavedChanges() {
+            return isDirty;
+        },
+        async confirmDiscard() {
+            if (!isDirty)
+                return true;
+            if (typeof window === 'undefined')
+                return true;
+            return window.confirm('You have unsaved changes. Discard them?');
+        },
+        focus() {
+            rootElementRef.current?.focus();
+        },
+    }), [isDirty]);
+    const rootElementRef = useRef(null);
+    const handleChange = (state) => {
+        editorStateRef.current = state;
+        const json = JSON.stringify(state.toJSON());
+        setIsDirty(json !== lastSavedJsonRef.current);
+        onChange?.(state.toJSON());
+    };
+    const handleSave = () => {
+        if (!editorStateRef.current)
+            return;
+        const json = editorStateRef.current.toJSON();
+        const format = config.formats.plainText ? 'plain-text' : 'lexical-json';
+        const content = defaultFormatRegistry.serialize(format, json);
+        lastSavedJsonRef.current = JSON.stringify(json);
+        setIsDirty(false);
+        onSave?.(content, format);
+    };
+    const dir = locale === 'en' ? 'ltr' : 'rtl';
+    return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, children: _jsx("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: onSave ? handleSave : undefined, isDirty: isDirty, showSave: Boolean(onSave) }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": "Editor content" }), placeholder: _jsx("div", { className: "likhari-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.links && _jsx(LinkPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }));
+});

package/dist/components/Toolbar.d.ts

@@ -0,0 +1,9 @@
+import type { ResolvedEditorFeatureConfig } from '@inshapardaz/likhari-core';
+export interface ToolbarProps {
+    config: ResolvedEditorFeatureConfig;
+    onSave?: () => void;
+    isDirty?: boolean;
+    showSave?: boolean;
+}
+export declare function Toolbar({ config, onSave, isDirty, showSave }: ToolbarProps): import("react").JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/components/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAsH7E,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,2BAA2B,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAgY1E"}

package/dist/components/Toolbar.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, $isElementNode, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, UNDO_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, COMMAND_PRIORITY_LOW, } from 'lexical';
+import { $setBlocksType } from '@lexical/selection';
+import { $createParagraphNode } from 'lexical';
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import { $isListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, } from '@lexical/list';
+import { $findMatchingParent } from '@lexical/utils';
+import { IconAbc, IconAlignCenter, IconAlignJustified, IconAlignLeft, IconAlignRight, IconArrowBackUp, IconArrowForwardUp, IconBold, IconClearFormatting, IconDeviceFloppy, IconDots, IconFeather, IconIndentDecrease, IconIndentIncrease, IconItalic, IconLetterCase, IconLetterCaseLower, IconLetterCaseUpper, IconLink, IconPhoto, IconPilcrow, IconSparkles, IconStrikethrough, IconSubscript, IconSuperscript, IconTextSize, IconTypography, IconUnderline, IconWand, } from '@tabler/icons-react';
+const INITIAL_STATE = {
+    blockType: 'paragraph',
+    activeFormats: new Set(),
+    elementFormat: 'start',
+    listType: null,
+    canUndo: false,
+    canRedo: false,
+};
+const ICON_SIZE = 17;
+const ICON_STROKE = 1.75;
+const ALIGN_ICONS = {
+    start: IconAlignLeft,
+    left: IconAlignLeft,
+    center: IconAlignCenter,
+    end: IconAlignRight,
+    right: IconAlignRight,
+    justify: IconAlignJustified,
+};
+function ToolbarButton({ icon: Icon, title, active, disabled, onClick, }) {
+    return (_jsx("button", { type: "button", className: "likhari-toolbar-button", "data-active": active ? 'true' : 'false', disabled: disabled, "aria-pressed": active, "aria-label": title, title: title, onMouseDown: (e) => e.preventDefault(), onClick: onClick, children: _jsx(Icon, { size: ICON_SIZE, stroke: ICON_STROKE }) }));
+}
+/** A disabled placeholder for a feature whose config flag is on but that
+ * isn't implemented yet (link/image/poetry/font/language-tooling — see
+ * docs/lexical-editor-spec.md §13's phasing). Renders so the toolbar's
+ * layout is final now and only needs its onClick wired up later. */
+function StubButton({ icon, title }) {
+    return _jsx(ToolbarButton, { icon: icon, title: `${title} (coming soon)`, disabled: true, onClick: undefined });
+}
+/** Icon shown to the left of a <select> — native selects can't render icons
+ * per-option, so this labels the control itself instead. */
+function SelectIcon({ icon: Icon }) {
+    return (_jsx("span", { className: "likhari-toolbar-select-icon", "aria-hidden": "true", children: _jsx(Icon, { size: 15, stroke: ICON_STROKE }) }));
+}
+export function Toolbar({ config, onSave, isDirty, showSave }) {
+    const [editor] = useLexicalComposerContext();
+    const [state, setState] = useState(INITIAL_STATE);
+    const [overflowOpen, setOverflowOpen] = useState(false);
+    const overflowRef = useRef(null);
+    const updateToolbar = useCallback(() => {
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection))
+                return;
+            const anchorNode = selection.anchor.getNode();
+            const element = anchorNode.getKey() === 'root' ? anchorNode : (anchorNode.getTopLevelElement() ?? anchorNode);
+            const listParent = $findMatchingParent(anchorNode, $isListNode);
+            const listType = listParent && $isListNode(listParent) ? listParent.getListType() : null;
+            let blockType = 'paragraph';
+            if ($isHeadingNode(element)) {
+                blockType = element.getTag();
+            }
+            else if ($isQuoteNode(element)) {
+                blockType = 'quote';
+            }
+            const activeFormats = new Set();
+            ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript'].forEach((format) => {
+                if (selection.hasFormat(format))
+                    activeFormats.add(format);
+            });
+            // Computed eagerly, inside the active read() callback — React calls the
+            // setState updater lazily during its own reconciliation, by which point
+            // Lexical's read/update context has already closed, so any $-prefixed
+            // node method (getFormatType() included) must not be deferred into it.
+            const elementFormat = ($isElementNode(element) ? element.getFormatType() : 'start') || 'start';
+            setState((s) => ({
+                ...s,
+                blockType,
+                activeFormats,
+                elementFormat,
+                listType,
+            }));
+        });
+    }, [editor]);
+    useEffect(() => {
+        return editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateToolbar();
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor, updateToolbar]);
+    useEffect(() => {
+        return editor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
+            setState((s) => ({ ...s, canUndo: payload }));
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    useEffect(() => {
+        return editor.registerCommand(CAN_REDO_COMMAND, (payload) => {
+            setState((s) => ({ ...s, canRedo: payload }));
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    // Close the overflow panel on outside click or Escape.
+    useEffect(() => {
+        if (!overflowOpen)
+            return;
+        const handlePointerDown = (e) => {
+            if (overflowRef.current && !overflowRef.current.contains(e.target))
+                setOverflowOpen(false);
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                setOverflowOpen(false);
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [overflowOpen]);
+    const setBlockType = (type) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection))
+                return;
+            if (type === 'paragraph') {
+                $setBlocksType(selection, () => $createParagraphNode());
+            }
+            else if (type === 'quote') {
+                $setBlocksType(selection, () => $createQuoteNode());
+            }
+            else {
+                $setBlocksType(selection, () => $createHeadingNode(type));
+            }
+        });
+    };
+    const insertList = (type) => {
+        const command = type === 'bullet' ? INSERT_UNORDERED_LIST_COMMAND : type === 'number' ? INSERT_ORDERED_LIST_COMMAND : INSERT_CHECK_LIST_COMMAND;
+        editor.dispatchCommand(command, undefined);
+    };
+    /** Handler for the single "Formatting" dropdown — unifies block type and
+     * list type into one control (Heading 1-6 / Numbered / Bullet / Task /
+     * Quote / Paragraph), matching the requested compact toolbar layout. */
+    const applyFormatting = (value) => {
+        if (value === 'bullet' || value === 'number' || value === 'check') {
+            insertList(value);
+            return;
+        }
+        if (state.listType) {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+        setBlockType(value);
+    };
+    const formatText = (format) => editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+    const formatElement = (format) => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, format);
+    const applyCaseTransform = (transform) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection))
+                return;
+            const nodes = selection.getNodes();
+            for (const node of nodes) {
+                if (node.getType() !== 'text')
+                    continue;
+                const textNode = node;
+                const text = textNode.getTextContent();
+                // Arabic-script (Urdu/Punjabi) has no case concept — skip RTL runs (spec §4.1).
+                if (/[؀-ۿ]/.test(text))
+                    continue;
+                const next = transform === 'upper'
+                    ? text.toUpperCase()
+                    : transform === 'lower'
+                        ? text.toLowerCase()
+                        : text.replace(/\b\w/g, (c) => c.toUpperCase());
+                textNode.setTextContent(next);
+            }
+        });
+    };
+    const clearFormatting = () => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection))
+                return;
+            selection.getNodes().forEach((node) => {
+                if (node.getType() !== 'text')
+                    return;
+                const textNode = node;
+                textNode.setFormat(0);
+                textNode.setStyle('');
+            });
+        });
+    };
+    const headingLevels = config.blocks.headingLevels ?? [];
+    const fmt = config.formatting;
+    const showFormattingGroup = headingLevels.length > 0 || config.lists.bullet || config.lists.numbered || config.lists.check || config.blocks.quote;
+    const showInlineGroup = fmt.bold || fmt.italic || fmt.underline;
+    const showAlignGroup = config.alignment.start || config.alignment.center || config.alignment.justify || config.alignment.left || config.alignment.right;
+    const showInsertPoetryGroup = config.links || config.images.linked || config.images.embedded || config.poetry.enabled;
+    const showLanguageGroup = config.language.autocorrect || config.language.textCleanup || config.language.spellCheck;
+    const showOverflowMenu = fmt.strikethrough || fmt.superscript || fmt.subscript || fmt.caseTransforms || fmt.clearFormatting || config.indent;
+    const formattingValue = state.listType ?? state.blockType;
+    const AlignIcon = ALIGN_ICONS[state.elementFormat] ?? IconAlignLeft;
+    return (_jsxs("div", { className: "likhari-toolbar", role: "toolbar", "aria-label": "Formatting", children: [showSave && (_jsxs("button", { type: "button", className: "likhari-save-button", "data-dirty": isDirty ? 'true' : 'false', onClick: onSave, children: [_jsx(IconDeviceFloppy, { size: 16, stroke: ICON_STROKE }), "Save"] })), config.history && (_jsxs("div", { className: "likhari-toolbar-group", children: [_jsx(ToolbarButton, { icon: IconArrowBackUp, title: "Undo", disabled: !state.canUndo, onClick: () => editor.dispatchCommand(UNDO_COMMAND, undefined) }), _jsx(ToolbarButton, { icon: IconArrowForwardUp, title: "Redo", disabled: !state.canRedo, onClick: () => editor.dispatchCommand(REDO_COMMAND, undefined) })] })), showFormattingGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-select-group", children: [_jsx(SelectIcon, { icon: IconPilcrow }), _jsxs("select", { className: "likhari-toolbar-select", "aria-label": "Formatting", value: formattingValue, onChange: (e) => applyFormatting(e.target.value), children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), headingLevels.map((level) => (_jsxs("option", { value: `h${level}`, children: ["Heading ", level] }, level))), config.lists.numbered && _jsx("option", { value: "number", children: "Numbered list" }), config.lists.bullet && _jsx("option", { value: "bullet", children: "Bullet list" }), config.lists.check && _jsx("option", { value: "check", children: "Task list" }), config.blocks.quote && _jsx("option", { value: "quote", children: "Quote" })] })] })), showInlineGroup && (_jsxs("div", { className: "likhari-toolbar-group", children: [fmt.bold && (_jsx(ToolbarButton, { icon: IconBold, title: "Bold", active: state.activeFormats.has('bold'), onClick: () => formatText('bold') })), fmt.italic && (_jsx(ToolbarButton, { icon: IconItalic, title: "Italic", active: state.activeFormats.has('italic'), onClick: () => formatText('italic') })), fmt.underline && (_jsx(ToolbarButton, { icon: IconUnderline, title: "Underline", active: state.activeFormats.has('underline'), onClick: () => formatText('underline') }))] })), (config.font.family || config.font.size) && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet likhari-toolbar-select-group", children: [config.font.family && (_jsxs(_Fragment, { children: [_jsx(SelectIcon, { icon: IconTypography }), _jsx("select", { className: "likhari-toolbar-select", "aria-label": "Font family", disabled: true, title: "Font family (coming soon)", children: _jsx("option", { children: "Font" }) })] })), config.font.size && (_jsxs(_Fragment, { children: [_jsx(SelectIcon, { icon: IconTextSize }), _jsx("select", { className: "likhari-toolbar-select", "aria-label": "Font size", disabled: true, title: "Font size (coming soon)", children: _jsx("option", { children: "Size" }) })] }))] })), showAlignGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-select-group", children: [_jsx(SelectIcon, { icon: AlignIcon }), _jsxs("select", { className: "likhari-toolbar-select", "aria-label": "Alignment", value: state.elementFormat || 'start', onChange: (e) => formatElement(e.target.value), children: [config.alignment.start && _jsx("option", { value: "start", children: "Align start" }), config.alignment.center && _jsx("option", { value: "center", children: "Align center" }), config.alignment.start && _jsx("option", { value: "end", children: "Align end" }), config.alignment.justify && _jsx("option", { value: "justify", children: "Justify" }), config.alignment.left && _jsx("option", { value: "left", children: "Align left" }), config.alignment.right && _jsx("option", { value: "right", children: "Align right" })] })] })), showInsertPoetryGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.links && _jsx(StubButton, { icon: IconLink, title: "Insert link" }), (config.images.linked || config.images.embedded) && _jsx(StubButton, { icon: IconPhoto, title: "Insert image" }), config.poetry.enabled && _jsx(StubButton, { icon: IconFeather, title: "Poetry blocks" })] })), showLanguageGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.language.autocorrect && _jsx(StubButton, { icon: IconWand, title: "Auto-correct" }), config.language.textCleanup && _jsx(StubButton, { icon: IconSparkles, title: "Text cleanup" }), config.language.spellCheck && _jsx(StubButton, { icon: IconAbc, title: "Spell-checker" })] })), showOverflowMenu && (_jsxs("div", { className: "likhari-toolbar-overflow", ref: overflowRef, children: [_jsx(ToolbarButton, { icon: IconDots, title: "More formatting", active: overflowOpen, onClick: () => setOverflowOpen((o) => !o) }), overflowOpen && (_jsxs("div", { className: "likhari-toolbar-overflow-panel", role: "menu", children: [fmt.strikethrough && (_jsx(ToolbarButton, { icon: IconStrikethrough, title: "Strikethrough", active: state.activeFormats.has('strikethrough'), onClick: () => formatText('strikethrough') })), fmt.superscript && (_jsx(ToolbarButton, { icon: IconSuperscript, title: "Superscript", active: state.activeFormats.has('superscript'), onClick: () => formatText('superscript') })), fmt.subscript && (_jsx(ToolbarButton, { icon: IconSubscript, title: "Subscript", active: state.activeFormats.has('subscript'), onClick: () => formatText('subscript') })), fmt.caseTransforms && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { icon: IconLetterCaseUpper, title: "UPPERCASE", onClick: () => applyCaseTransform('upper') }), _jsx(ToolbarButton, { icon: IconLetterCaseLower, title: "lowercase", onClick: () => applyCaseTransform('lower') }), _jsx(ToolbarButton, { icon: IconLetterCase, title: "Capitalize", onClick: () => applyCaseTransform('capitalize') })] })), fmt.clearFormatting && _jsx(ToolbarButton, { icon: IconClearFormatting, title: "Clear formatting", onClick: clearFormatting }), config.indent && (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { icon: IconIndentDecrease, title: "Outdent", onClick: () => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined) }), _jsx(ToolbarButton, { icon: IconIndentIncrease, title: "Indent", onClick: () => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined) })] }))] }))] }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { EditorRoot } from './EditorRoot.js';
+export type { EditorRootProps, EditorRef, EditorInitialContent } from './EditorRoot.js';
+export { defaultMantineTheme } from './theme/mantineTheme.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { EditorRoot } from './EditorRoot.js';
+export { defaultMantineTheme } from './theme/mantineTheme.js';

package/dist/nodes.d.ts

@@ -0,0 +1,12 @@
+import type { Klass, LexicalNode } from 'lexical';
+/**
+ * Node types registered on the editor at construction time. Per
+ * editor-architecture-design.md §2, node registration cannot be conditional
+ * on EditorFeatureConfig — Lexical throws on an unregistered node type
+ * during parseEditorState. This list is Phase 1's set (built-ins only);
+ * Phase 3's custom nodes (poetry, footnote, layout, page break, image) join
+ * this list unconditionally once implemented — the feature config will then
+ * control their toolbar/insert availability, not whether they're registered.
+ */
+export declare const EDITOR_NODES: Klass<LexicalNode>[];
+//# sourceMappingURL=nodes.d.ts.map

package/dist/nodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../src/nodes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAMlD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,EAO5C,CAAC"}

package/dist/nodes.js

@@ -0,0 +1,21 @@
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { LinkNode } from '@lexical/link';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+/**
+ * Node types registered on the editor at construction time. Per
+ * editor-architecture-design.md §2, node registration cannot be conditional
+ * on EditorFeatureConfig — Lexical throws on an unregistered node type
+ * during parseEditorState. This list is Phase 1's set (built-ins only);
+ * Phase 3's custom nodes (poetry, footnote, layout, page break, image) join
+ * this list unconditionally once implemented — the feature config will then
+ * control their toolbar/insert availability, not whether they're registered.
+ */
+export const EDITOR_NODES = [
+    HeadingNode,
+    QuoteNode,
+    ListNode,
+    ListItemNode,
+    LinkNode,
+    HorizontalRuleNode,
+];

package/dist/theme/EditorThemeProvider.d.ts

@@ -0,0 +1,10 @@
+import { type MantineThemeOverride } from '@mantine/core';
+import '@mantine/core/styles.css';
+import './editor.css';
+export interface EditorThemeProviderProps {
+    theme?: MantineThemeOverride;
+    colorScheme?: 'light' | 'dark';
+    children: React.ReactNode;
+}
+export declare function EditorThemeProvider({ theme, colorScheme, children }: EditorThemeProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=EditorThemeProvider.d.ts.map

package/dist/theme/EditorThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/EditorThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,0BAA0B,CAAC;AAGlC,OAAO,cAAc,CAAC;AAsBtB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BAa7F"}

package/dist/theme/EditorThemeProvider.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MantineProvider } from '@mantine/core';
+import '@mantine/core/styles.css';
+import { buildThemeCss } from '@inshapardaz/likhari-core';
+import { defaultMantineTheme } from './mantineTheme.js';
+import './editor.css';
+let cssInjected = false;
+// Scopes the --editor-* variables to the wrapper div below, which is what
+// actually carries `data-editor-color-scheme` per instance — buildThemeCss's
+// default (':root') would only work if that attribute were on <html>, which
+// it isn't, so a light/dark toggle would silently do nothing (and any OS
+// dark preference would win unconditionally via the media-query fallback).
+const THEME_SCOPE_SELECTOR = '.likhari-theme-scope';
+/** Injects the --editor-* custom property block into <head> exactly once per page. */
+function useThemeCssInjection() {
+    if (typeof document !== 'undefined' && !cssInjected) {
+        const style = document.createElement('style');
+        style.setAttribute('data-likhari-theme', '');
+        style.textContent = buildThemeCss(THEME_SCOPE_SELECTOR);
+        document.head.appendChild(style);
+        cssInjected = true;
+    }
+}
+export function EditorThemeProvider({ theme, colorScheme, children }) {
+    useThemeCssInjection();
+    return (
+    // display: contents keeps this wrapper out of the layout tree — CSS
+    // custom properties still cascade to children through it (inheritance
+    // doesn't depend on layout), but it doesn't sit between EditorRoot's own
+    // element and the host's actual parent, so EditorRoot's `height` prop
+    // (e.g. '100%') resolves against the host's container as if this div
+    // weren't there at all.
+    _jsx("div", { className: "likhari-theme-scope", "data-editor-color-scheme": colorScheme, style: { display: 'contents' }, children: _jsx(MantineProvider, { theme: theme ?? defaultMantineTheme, children: children }) }));
+}

package/dist/theme/editor.css

@@ -0,0 +1,265 @@
+/* Canvas + toolbar styling built on the --editor-* custom properties
+   injected by <EditorThemeProvider> (packages/core design tokens). */
+
+.likhari-root {
+  /* Actual height comes from EditorRoot's `height` prop (inline style) —
+     this class only defines the internal flex layout that makes the
+     toolbar stay fixed-height while the canvas absorbs whatever's left. */
+  display: flex;
+  flex-direction: column;
+  background: var(--editor-paper);
+  color: var(--editor-ink);
+  border: 1px solid var(--editor-line);
+  border-radius: 8px;
+  overflow: hidden;
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
+}
+
+/* Toolbar — editor-ui-design-spec.md §3.2. flex-shrink: 0 keeps it pinned at
+   its own height so only the canvas below scrolls. */
+.likhari-toolbar {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+  min-height: 46px;
+  padding: 0 8px;
+  background: var(--editor-paper-dim);
+  border-bottom: 1px solid var(--editor-line);
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+.likhari-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 6px;
+  border-right: 0.5px solid var(--editor-line);
+}
+
+.likhari-toolbar-group:last-child {
+  border-right: none;
+}
+
+.likhari-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 6px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--editor-ink);
+  cursor: pointer;
+}
+
+.likhari-toolbar-button svg {
+  display: block;
+}
+
+.likhari-toolbar-button:hover {
+  background: var(--editor-line);
+}
+
+.likhari-toolbar-button[data-active='true'] {
+  background: var(--editor-accent-soft);
+  color: var(--editor-accent);
+}
+
+.likhari-toolbar-button:focus-visible {
+  outline: 2px solid var(--editor-accent);
+  outline-offset: 1px;
+}
+
+.likhari-toolbar-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.likhari-toolbar-select {
+  height: 30px;
+  max-width: 116px;
+  font-size: 12px;
+  border-radius: 6px;
+  border: 1px solid var(--editor-line-strong);
+  background: var(--editor-paper);
+  color: var(--editor-ink);
+  padding: 0 6px;
+}
+
+.likhari-toolbar-select:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Icon shown to the left of a <select> — native selects can't render an
+   icon per-option, so the control itself is labeled this way instead. */
+.likhari-toolbar-select-group {
+  gap: 4px;
+}
+
+.likhari-toolbar-select-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--editor-ink-soft);
+}
+
+/* Overflow menu ("⋯") — houses less-frequent formatting (strikethrough,
+   super/subscript, case transforms, clear formatting, indent/outdent) so
+   the primary row stays compact on small/mobile viewports. */
+.likhari-toolbar-overflow {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.likhari-toolbar-overflow-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  inset-inline-end: 0;
+  z-index: 20;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  width: 168px;
+  padding: 6px;
+  background: var(--editor-paper);
+  border: 0.5px solid var(--editor-line);
+  border-radius: 8px;
+}
+
+/* Responsive collapse — editor-ui-design-spec.md §3.3. These groups hold
+   only not-yet-implemented placeholders, so hiding them below the tablet
+   breakpoint costs nothing functional while keeping the primary row usable
+   on small screens; the toolbar's horizontal scroll (below) remains the
+   fallback if the still-visible controls alone overflow a narrow viewport. */
+@media (max-width: 900px) {
+  .likhari-toolbar-group--collapse-tablet {
+    display: none;
+  }
+}
+
+.likhari-save-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 6px;
+  border: 1px solid var(--editor-accent);
+  background: var(--editor-accent);
+  color: var(--editor-paper);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.likhari-save-button[data-dirty='false'] {
+  background: transparent;
+  color: var(--editor-accent);
+}
+
+/* Canvas — editor-ui-design-spec.md §4. flex: 1 1 auto + min-height: 0 lets
+   this pane absorb the root's height and scroll internally instead of the
+   editor (and the page around it) growing to fit the content. */
+.likhari-canvas {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
+
+.likhari-content-editable {
+  /* Fills the canvas so a click anywhere in the visible area — not just on
+     existing text — focuses the editor and places the caret, matching how
+     a text editor's empty space is expected to behave. */
+  height: 100%;
+  min-height: 100%;
+  outline: none;
+  font-family: 'IBM Plex Serif', Georgia, serif;
+  font-size: 15px;
+  line-height: 1.75;
+}
+
+.likhari-content-editable[dir='rtl'] {
+  font-family: 'Noto Nastaliq Urdu', serif;
+  font-size: 20px;
+  line-height: 2.3;
+}
+
+.likhari-placeholder {
+  position: absolute;
+  top: 20px;
+  inset-inline-start: 24px;
+  color: var(--editor-ink-soft);
+  pointer-events: none;
+  user-select: none;
+}
+
+.likhari-paragraph {
+  margin: 0 0 1em 0;
+}
+
+.likhari-quote {
+  margin: 0 0 1em 0;
+  padding-inline-start: 1em;
+  border-inline-start: 3px solid var(--editor-line-strong);
+  color: var(--editor-ink-soft);
+}
+
+.likhari-h1,
+.likhari-h2,
+.likhari-h3,
+.likhari-h4,
+.likhari-h5,
+.likhari-h6 {
+  font-weight: 600;
+  margin: 0.6em 0 0.4em 0;
+}
+
+.likhari-h1 { font-size: 1.8em; }
+.likhari-h2 { font-size: 1.5em; }
+.likhari-h3 { font-size: 1.3em; }
+.likhari-h4 { font-size: 1.2em; }
+.likhari-h5 { font-size: 1.1em; }
+.likhari-h6 { font-size: 1.05em; }
+
+.likhari-ul,
+.likhari-ol {
+  margin: 0 0 1em 0;
+  padding-inline-start: 1.5em;
+}
+
+.likhari-listitem {
+  margin: 0.2em 0;
+}
+
+.likhari-listitem-checked,
+.likhari-listitem-unchecked {
+  list-style: none;
+  padding-inline-start: 1.5em;
+  position: relative;
+}
+
+.likhari-link {
+  color: var(--editor-accent);
+  text-decoration: underline;
+}
+
+.likhari-text-bold { font-weight: 600; }
+.likhari-text-italic { font-style: italic; }
+.likhari-text-underline { text-decoration: underline; }
+.likhari-text-strikethrough { text-decoration: line-through; }
+.likhari-text-underline.likhari-text-strikethrough { text-decoration: underline line-through; }
+.likhari-text-subscript { vertical-align: sub; font-size: 0.8em; }
+.likhari-text-superscript { vertical-align: super; font-size: 0.8em; }
+
+.likhari-hr {
+  border: none;
+  border-top: 1px solid var(--editor-line);
+  margin: 1.5em 0;
+}

package/dist/theme/editorTheme.d.ts

@@ -0,0 +1,8 @@
+import type { EditorThemeClasses } from 'lexical';
+/**
+ * Maps Lexical node/format kinds to the CSS classes defined in editor.css.
+ * Class names are prefixed `likhari-` to stay collision-free in a host page
+ * (the "headless + default theme" requirement, UI spec §10).
+ */
+export declare const editorTheme: EditorThemeClasses;
+//# sourceMappingURL=editorTheme.d.ts.map

package/dist/theme/editorTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../src/theme/editorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,kBA6BzB,CAAC"}

package/dist/theme/editorTheme.js

@@ -0,0 +1,35 @@
+/**
+ * Maps Lexical node/format kinds to the CSS classes defined in editor.css.
+ * Class names are prefixed `likhari-` to stay collision-free in a host page
+ * (the "headless + default theme" requirement, UI spec §10).
+ */
+export const editorTheme = {
+    paragraph: 'likhari-paragraph',
+    quote: 'likhari-quote',
+    heading: {
+        h1: 'likhari-h1',
+        h2: 'likhari-h2',
+        h3: 'likhari-h3',
+        h4: 'likhari-h4',
+        h5: 'likhari-h5',
+        h6: 'likhari-h6',
+    },
+    list: {
+        listitem: 'likhari-listitem',
+        listitemChecked: 'likhari-listitem-checked',
+        listitemUnchecked: 'likhari-listitem-unchecked',
+        nested: { listitem: 'likhari-nested-listitem' },
+        olDepth: ['likhari-ol'],
+        ul: 'likhari-ul',
+    },
+    link: 'likhari-link',
+    text: {
+        bold: 'likhari-text-bold',
+        italic: 'likhari-text-italic',
+        underline: 'likhari-text-underline',
+        strikethrough: 'likhari-text-strikethrough',
+        subscript: 'likhari-text-subscript',
+        superscript: 'likhari-text-superscript',
+    },
+    hr: 'likhari-hr',
+};

package/dist/theme/mantineTheme.d.ts

@@ -0,0 +1,9 @@
+import { type MantineThemeOverride } from '@mantine/core';
+/**
+ * Default Mantine theme (headless mode, UI spec §10) — supplies structure/
+ * behavior while the app's own --editor-* CSS variables (theme.css) carry
+ * the actual visual tokens, so a host restyling the editor overrides CSS
+ * variables rather than fighting Mantine's default visuals.
+ */
+export declare const defaultMantineTheme: MantineThemeOverride;
+//# sourceMappingURL=mantineTheme.d.ts.map

package/dist/theme/mantineTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mantineTheme.d.ts","sourceRoot":"","sources":["../../src/theme/mantineTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAGvE;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,oBAkBhC,CAAC"}

package/dist/theme/mantineTheme.js

@@ -0,0 +1,27 @@
+import { createTheme } from '@mantine/core';
+import { LIGHT_TOKENS } from '@inshapardaz/likhari-core';
+/**
+ * Default Mantine theme (headless mode, UI spec §10) — supplies structure/
+ * behavior while the app's own --editor-* CSS variables (theme.css) carry
+ * the actual visual tokens, so a host restyling the editor overrides CSS
+ * variables rather than fighting Mantine's default visuals.
+ */
+export const defaultMantineTheme = createTheme({
+    fontFamily: `'IBM Plex Sans', system-ui, sans-serif`,
+    primaryColor: 'likhariAccent',
+    colors: {
+        likhariAccent: [
+            LIGHT_TOKENS.accentSoft,
+            LIGHT_TOKENS.accentSoft,
+            LIGHT_TOKENS.accent,
+            LIGHT_TOKENS.accent,
+            LIGHT_TOKENS.accent,
+            LIGHT_TOKENS.accent,
+            LIGHT_TOKENS.accent,
+            LIGHT_TOKENS.accent,
+            LIGHT_TOKENS.accent,
+            LIGHT_TOKENS.accent,
+        ],
+    },
+    defaultRadius: 'sm',
+});

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@inshapardaz/likhari-react",
+  "version": "0.1.0-dev.7",
+  "description": "React implementation of the Likhari editor, built on @lexical/react.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/inshapardaz/likhari"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node ../../scripts/fix-esm-extensions.mjs ./dist && node ../../scripts/copy-assets.mjs src dist \"**/*.css\"",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@lexical/link": "^0.20.0",
+    "@lexical/list": "^0.20.0",
+    "@lexical/react": "^0.20.0",
+    "@lexical/rich-text": "^0.20.0",
+    "@lexical/selection": "^0.20.0",
+    "@lexical/utils": "^0.20.0",
+    "@inshapardaz/likhari-converters": "^0.1.0",
+    "@inshapardaz/likhari-core": "^0.1.0",
+    "@mantine/core": "^7.13.5",
+    "@mantine/hooks": "^7.13.5",
+    "@tabler/icons-react": "^3.46.0",
+    "lexical": "^0.20.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}