@inshapardaz/likhari-react 0.1.3 → 0.1.4-dev.25

package/dist/EditorRoot.d.ts

@@ -2,6 +2,7 @@ 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';
+import { type FontOption } from './fonts/index.js';
 export interface EditorInitialContent {
     format: Extract<FormatId, 'lexical-json' | 'plain-text'>;
     value: string;
@@ -25,7 +26,26 @@ export interface EditorRootProps {
      */
     height?: string | number;
     onChange?: (state: SerializedEditorState) => void;
+    /**
+     * Handler for the toolbar's Save button. Receives the serialized content
+     * (plain text when that format is enabled, otherwise Lexical JSON).
+     */
     onSave?: (content: string, format: FormatId) => void;
+    /**
+     * Whether the Save button (icon-only) is shown. Defaults to `true` when
+     * `onSave` is provided and `false` otherwise, i.e. the previous behavior.
+     * Set explicitly to show the button without a handler (saving still clears
+     * the unsaved-changes state) or to hide it while keeping `onSave`.
+     */
+    showSave?: boolean;
+    /**
+     * Entries for the toolbar's font-family dropdown. Defaults to
+     * `DEFAULT_FONT_OPTIONS` (generic Latin faces plus the Urdu/Arabic-script
+     * collection from inshapardaz/urdu-web-fonts, the same source qari uses).
+     * Spread the defaults to add your own, e.g.
+     * `[...DEFAULT_FONT_OPTIONS, { name: 'Mine', family: '"Mine", serif' }]`.
+     */
+    fontOptions?: FontOption[];
 }
 export interface EditorRef {
     getContent(format: FormatId): string;

package/dist/EditorRoot.d.ts.map

@@ -1 +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"}
+{"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;AAKzH,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjE,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;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;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,uGA4HrB,CAAC"}

package/dist/EditorRoot.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -14,14 +14,21 @@ import { EDITOR_NODES } from './nodes.js';
 import { editorTheme } from './theme/editorTheme.js';
 import { EditorThemeProvider } from './theme/EditorThemeProvider.js';
 import { Toolbar } from './components/Toolbar.js';
+import { injectUrduWebFontsCss } from './fonts/index.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) {
+export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, locale = 'en', placeholder = 'Start writing…', height = '480px', onChange, onSave, showSave = Boolean(onSave), fontOptions, }, ref) {
     const config = useMemo(() => resolveFeatureConfig(featureConfig, featurePreset), [featureConfig, featurePreset]);
+    // The urdu-web-fonts stylesheets are needed for the font dropdown and for
+    // RTL content, whose canvas font (editor.css) is one of those families.
+    useEffect(() => {
+        if (config.font.family || locale !== 'en')
+            injectUrduWebFontsCss();
+    }, [config.font.family, locale]);
     const editorStateRef = useRef(null);
     const lastSavedJsonRef = useRef(null);
     const [isDirty, setIsDirty] = useState(false);
@@ -84,5 +91,5 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
         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 })] }) }) }));
+    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: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions }), _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

@@ -1,9 +1,12 @@
 import type { ResolvedEditorFeatureConfig } from '@inshapardaz/likhari-core';
+import { type FontOption } from '../fonts/index.js';
 export interface ToolbarProps {
     config: ResolvedEditorFeatureConfig;
     onSave?: () => void;
     isDirty?: boolean;
     showSave?: boolean;
+    /** Font-family dropdown entries; defaults to DEFAULT_FONT_OPTIONS. */
+    fontOptions?: FontOption[];
 }
-export declare function Toolbar({ config, onSave, isDirty, showSave }: ToolbarProps): import("react").JSX.Element;
+export declare function Toolbar({ config, onSave, isDirty, showSave, fontOptions }: ToolbarProps): import("react").JSX.Element;
 //# sourceMappingURL=Toolbar.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAuC,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAuLhF,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;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAkC,EAAE,EAAE,YAAY,+BAwa9G"}

package/dist/components/Toolbar.js

@@ -1,18 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Menu, Select } from '@mantine/core';
 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 { $getSelection, $isRangeSelection, $isElementNode, $setSelection, $getRoot, 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 { $getSelectionStyleValueForProperty, $patchStyleText, $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 { DEFAULT_FONT_OPTIONS, FONT_SIZES_PX } from '../fonts/index.js';
+import { setStyleProperty } from '../utils/style.js';
 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,
+    fontFamily: '',
+    fontSize: '',
     canUndo: false,
     canRedo: false,
 };
@@ -26,8 +31,8 @@ const ALIGN_ICONS = {
     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 }) }));
+function ToolbarButton({ icon: Icon, title, active, dirty, disabled, onClick, }) {
+    return (_jsx("button", { type: "button", className: "likhari-toolbar-button", "data-active": active ? 'true' : 'false', "data-dirty": dirty === undefined ? undefined : dirty ? '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
@@ -36,16 +41,21 @@ function ToolbarButton({ icon: Icon, title, active, disabled, onClick, }) {
 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 }) }));
+/** Mantine Select (combobox) for the toolbar's dropdown controls. The icon
+ * labels the control itself, since a dropdown can't show one per option in
+ * its closed state. The dropdown portals to <body>, so it is not clipped by
+ * the editor's `overflow: hidden` frame. */
+function ToolbarSelect({ icon: Icon, label, value, data, width, disabled, placeholder, searchable, renderOption, onChange }) {
+    return (_jsx(Select, { size: "xs", w: width, "aria-label": label, title: disabled ? `${label} (coming soon)` : label, data: data, value: value, placeholder: placeholder, disabled: disabled, searchable: searchable, renderOption: renderOption, nothingFoundMessage: searchable ? 'No match' : undefined, allowDeselect: false, leftSection: _jsx(Icon, { size: 15, stroke: ICON_STROKE }), comboboxProps: { withinPortal: true, position: 'bottom-start', middlewares: { flip: true, shift: true } }, classNames: { input: 'likhari-toolbar-select-input', dropdown: 'likhari-toolbar-select-dropdown' }, onChange: (v) => v && onChange?.(v) }));
 }
-export function Toolbar({ config, onSave, isDirty, showSave }) {
+function OverflowItem({ icon: Icon, label, active, onClick, }) {
+    return (_jsx(Menu.Item, { leftSection: _jsx(Icon, { size: ICON_SIZE, stroke: ICON_STROKE }), "data-active": active ? 'true' : 'false', className: "likhari-overflow-item", 
+        // Keep the editor's selection: a mousedown here would blur the canvas.
+        onMouseDown: (e) => e.preventDefault(), onClick: onClick, children: label }));
+}
+export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAULT_FONT_OPTIONS }) {
     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();
@@ -62,6 +72,8 @@ export function Toolbar({ config, onSave, isDirty, showSave }) {
             else if ($isQuoteNode(element)) {
                 blockType = 'quote';
             }
+            const fontFamily = $getSelectionStyleValueForProperty(selection, 'font-family', '');
+            const fontSize = $getSelectionStyleValueForProperty(selection, 'font-size', '');
             const activeFormats = new Set();
             ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript'].forEach((format) => {
                 if (selection.hasFormat(format))
@@ -78,6 +90,8 @@ export function Toolbar({ config, onSave, isDirty, showSave }) {
                 activeFormats,
                 elementFormat,
                 listType,
+                fontFamily,
+                fontSize,
             }));
         });
     }, [editor]);
@@ -99,25 +113,6 @@ export function Toolbar({ config, onSave, isDirty, showSave }) {
             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();
@@ -151,6 +146,47 @@ export function Toolbar({ config, onSave, isDirty, showSave }) {
         }
         setBlockType(value);
     };
+    /** Runs a toolbar-select action, then returns focus to the canvas — the
+     * combobox otherwise keeps it, so typing after picking would go nowhere. */
+    // Opening the overflow Menu moves focus into its dropdown, which makes
+    // Lexical drop the canvas selection — so snapshot it on open and restore it
+    // before an item's action runs.
+    const menuSelectionRef = useRef(null);
+    const snapshotSelection = () => {
+        editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            menuSelectionRef.current = selection ? selection.clone() : null;
+        });
+    };
+    const runOverflowAction = (action) => () => {
+        const saved = menuSelectionRef.current;
+        if (saved)
+            editor.update(() => $setSelection(saved.clone()), { discrete: true });
+        action();
+        editor.focus();
+    };
+    /** Applies a font property per `config.font.scope`: to the selection, to
+     * every text node in the document, or (for 'both') to the selection when
+     * there is a range and to the whole document when there isn't. */
+    const applyFont = (property, value) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            const scope = config.font.scope;
+            const wholeDocument = scope === 'document' || (scope === 'both' && (!$isRangeSelection(selection) || selection.isCollapsed()));
+            if (wholeDocument) {
+                for (const node of $getRoot().getAllTextNodes()) {
+                    node.setStyle(setStyleProperty(node.getStyle(), property, value));
+                }
+            }
+            else if ($isRangeSelection(selection)) {
+                $patchStyleText(selection, { [property]: value });
+            }
+        });
+    };
+    const withRefocus = (fn) => (value) => {
+        fn(value);
+        editor.focus();
+    };
     const formatText = (format) => editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
     const formatElement = (format) => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, format);
     const applyCaseTransform = (transform) => {
@@ -198,7 +234,43 @@ export function Toolbar({ config, onSave, isDirty, showSave }) {
     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;
+    // Grouped for the dropdown when options declare groups (Latin / Urdu).
+    const fontData = (() => {
+        const data = [];
+        const groups = new Map();
+        for (const f of fontOptions) {
+            const item = { value: f.family, label: f.name };
+            if (!f.group) {
+                data.push(item);
+                continue;
+            }
+            let group = groups.get(f.group);
+            if (!group) {
+                group = { group: f.group, items: [] };
+                groups.set(f.group, group);
+                data.push(group);
+            }
+            group.items.push(item);
+        }
+        return data;
+    })();
+    const formattingOptions = [
+        { value: 'paragraph', label: 'Paragraph' },
+        ...headingLevels.map((level) => ({ value: `h${level}`, label: `Heading ${level}` })),
+        ...(config.lists.numbered ? [{ value: 'number', label: 'Numbered list' }] : []),
+        ...(config.lists.bullet ? [{ value: 'bullet', label: 'Bullet list' }] : []),
+        ...(config.lists.check ? [{ value: 'check', label: 'Task list' }] : []),
+        ...(config.blocks.quote ? [{ value: 'quote', label: 'Quote' }] : []),
+    ];
+    const alignOptions = [
+        ...(config.alignment.start ? [{ value: 'start', label: 'Align start' }] : []),
+        ...(config.alignment.center ? [{ value: 'center', label: 'Align center' }] : []),
+        ...(config.alignment.start ? [{ value: 'end', label: 'Align end' }] : []),
+        ...(config.alignment.justify ? [{ value: 'justify', label: 'Justify' }] : []),
+        ...(config.alignment.left ? [{ value: 'left', label: 'Align left' }] : []),
+        ...(config.alignment.right ? [{ value: 'right', label: 'Align right' }] : []),
+    ];
     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) })] }))] }))] }))] }));
+    return (_jsxs("div", { className: "likhari-toolbar", role: "toolbar", "aria-label": "Formatting", children: [showSave && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarButton, { icon: IconDeviceFloppy, title: "Save", dirty: Boolean(isDirty), onClick: onSave }) })), 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 && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: IconPilcrow, label: "Formatting", width: 148, value: formattingValue, data: formattingOptions, onChange: withRefocus((v) => applyFormatting(v)) }) })), 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", children: [config.font.family && (_jsx(ToolbarSelect, { icon: IconTypography, label: "Font family", width: 150, value: fontOptions.some((f) => f.family === state.fontFamily) ? state.fontFamily : null, placeholder: "Font", data: fontData, searchable: true, renderOption: ({ option }) => _jsx("span", { style: { fontFamily: option.value }, children: option.label }), onChange: withRefocus((v) => applyFont('font-family', v)) })), config.font.size && (_jsx(ToolbarSelect, { icon: IconTextSize, label: "Font size", width: 84, value: FONT_SIZES_PX.some((px) => `${px}px` === state.fontSize) ? state.fontSize : null, placeholder: "Size", data: FONT_SIZES_PX.map((px) => ({ value: `${px}px`, label: String(px) })), onChange: withRefocus((v) => applyFont('font-size', v)) }))] })), showAlignGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: AlignIcon, label: "Alignment", width: 138, value: state.elementFormat || 'start', data: alignOptions, onChange: withRefocus((v) => formatElement(v)) }) })), 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(Menu, { position: "bottom-end", withinPortal: true, shadow: "sm", width: 210, closeOnItemClick: true, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "aria-label": "More formatting", title: "More formatting", onMouseDown: (e) => e.preventDefault(), children: _jsx(IconDots, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsxs(Menu.Dropdown, { children: [fmt.strikethrough && (_jsx(OverflowItem, { icon: IconStrikethrough, label: "Strikethrough", active: state.activeFormats.has('strikethrough'), onClick: runOverflowAction(() => formatText('strikethrough')) })), fmt.superscript && (_jsx(OverflowItem, { icon: IconSuperscript, label: "Superscript", active: state.activeFormats.has('superscript'), onClick: runOverflowAction(() => formatText('superscript')) })), fmt.subscript && (_jsx(OverflowItem, { icon: IconSubscript, label: "Subscript", active: state.activeFormats.has('subscript'), onClick: runOverflowAction(() => formatText('subscript')) })), fmt.caseTransforms && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconLetterCaseUpper, label: "UPPERCASE", onClick: runOverflowAction(() => applyCaseTransform('upper')) }), _jsx(OverflowItem, { icon: IconLetterCaseLower, label: "lowercase", onClick: runOverflowAction(() => applyCaseTransform('lower')) }), _jsx(OverflowItem, { icon: IconLetterCase, label: "Capitalize", onClick: runOverflowAction(() => applyCaseTransform('capitalize')) })] })), fmt.clearFormatting && _jsx(OverflowItem, { icon: IconClearFormatting, label: "Clear formatting", onClick: runOverflowAction(clearFormatting) }), config.indent && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconIndentDecrease, label: "Outdent", onClick: runOverflowAction(() => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)) }), _jsx(OverflowItem, { icon: IconIndentIncrease, label: "Indent", onClick: runOverflowAction(() => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)) })] }))] })] }))] }));
 }

package/dist/fonts/index.d.ts

@@ -0,0 +1,7 @@
+import { type FontOption } from './urduWebFonts.js';
+export { URDU_WEB_FONT_OPTIONS, injectUrduWebFontsCss, type FontOption } from './urduWebFonts.js';
+/** Three generic Latin faces plus the full urdu-web-fonts collection. */
+export declare const DEFAULT_FONT_OPTIONS: FontOption[];
+/** Sizes offered by the toolbar's font-size dropdown, in px. */
+export declare const FONT_SIZES_PX: number[];
+//# sourceMappingURL=index.d.ts.map

package/dist/fonts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fonts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAExE,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE/F,yEAAyE;AACzE,eAAO,MAAM,oBAAoB,EAAE,UAAU,EAK5C,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,aAAa,UAAmD,CAAC"}

package/dist/fonts/index.js

@@ -0,0 +1,11 @@
+import { URDU_WEB_FONT_OPTIONS } from './urduWebFonts.js';
+export { URDU_WEB_FONT_OPTIONS, injectUrduWebFontsCss } from './urduWebFonts.js';
+/** Three generic Latin faces plus the full urdu-web-fonts collection. */
+export const DEFAULT_FONT_OPTIONS = [
+    { name: 'Serif', family: `'IBM Plex Serif', Georgia, serif`, group: 'Latin' },
+    { name: 'Sans', family: `'IBM Plex Sans', system-ui, sans-serif`, group: 'Latin' },
+    { name: 'Mono', family: `ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace`, group: 'Latin' },
+    ...URDU_WEB_FONT_OPTIONS,
+];
+/** Sizes offered by the toolbar's font-size dropdown, in px. */
+export const FONT_SIZES_PX = [12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 36, 48];

package/dist/fonts/urduWebFonts.d.ts

@@ -0,0 +1,14 @@
+/** One entry in the toolbar's font-family dropdown. */
+export interface FontOption {
+    /** Label shown in the dropdown */
+    name: string;
+    /** CSS font-family value stored on the selected text, e.g. `"Amiri", serif` */
+    family: string;
+    /** Optional dropdown group heading */
+    group?: string;
+}
+export declare const URDU_WEB_FONT_OPTIONS: FontOption[];
+/** Registers every urdu-web-fonts @font-face via a <link> per family. Safe to
+ * call repeatedly and from several editors: it injects once per page. */
+export declare function injectUrduWebFontsCss(): void;
+//# sourceMappingURL=urduWebFonts.d.ts.map

package/dist/fonts/urduWebFonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"urduWebFonts.d.ts","sourceRoot":"","sources":["../../src/fonts/urduWebFonts.ts"],"names":[],"mappings":"AAqDA,uDAAuD;AACvD,MAAM,WAAW,UAAU;IACzB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,UAAU,EAI3C,CAAC;AAIJ;yEACyE;AACzE,wBAAgB,qBAAqB,IAAI,IAAI,CAc5C"}

package/dist/fonts/urduWebFonts.js

@@ -0,0 +1,66 @@
+/**
+ * Loads the Urdu/Arabic-script font collection from the
+ * inshapardaz/urdu-web-fonts GitHub repository through jsDelivr's GitHub
+ * CDN — the same source, and the same pinned commit, that the qari EPUB
+ * reader uses, so both apps offer an identical font set. Nothing is bundled
+ * or added as an npm dependency.
+ *
+ * Pinned to a commit (not a branch) so the fonts served don't change under
+ * consumers unexpectedly; bump URDU_WEB_FONTS_COMMIT to pick up upstream
+ * additions. Each family's stylesheet only registers its @font-face rules —
+ * the browser downloads a font file when that font is actually used.
+ */
+const URDU_WEB_FONTS_COMMIT = '571e360d5c272252efb0b0b21af54d1f63457521';
+const URDU_WEB_FONTS_BASE_URL = `https://cdn.jsdelivr.net/gh/inshapardaz/urdu-web-fonts@${URDU_WEB_FONTS_COMMIT}/src/fonts`;
+const URDU_WEB_FONTS = [
+    { dir: 'adobe-arabic', name: 'Adobe Arabic', family: 'AdobeArabic' },
+    { dir: 'alvi-lahori-nastalique', name: 'Alvi Lahori Nastaleeq', family: 'AlviLahoriNastaleeq' },
+    { dir: 'amiri', name: 'Amiri', family: 'Amiri' },
+    { dir: 'aref-ruqqa', name: 'Aref Ruqaa', family: 'Aref Ruqaa' },
+    { dir: 'dehalvi-khushkhat', name: 'Dehalvi Khush Khat', family: 'DehalviKhushKhat' },
+    { dir: 'dubai', name: 'Dubai', family: 'Dubai' },
+    { dir: 'emad-nastaleeq', name: 'Emad Nastaleeq', family: 'EmadNastaleeq' },
+    { dir: 'fajer-noori-nastalique', name: 'Fajer Noori Nastalique', family: 'FajerNooriNastalique' },
+    { dir: 'gulzar-nastalique', name: 'Gulzar Nastalique', family: 'gulzar-nastalique' },
+    { dir: 'jameel-khushkhati', name: 'Jameel Khushkhati', family: 'jameel-khushkhati' },
+    { dir: 'jameel-noori-kasheeda', name: 'Jameel Noori Nastaleeq Kasheeda', family: 'JameelNooriNastaleeqKasheeda' },
+    { dir: 'jameel-noori-nastalique', name: 'Jameel Noori Nastaleeq', family: 'JameelNooriNastaleeq' },
+    { dir: 'lalezar', name: 'Lalezar', family: 'Lalezar' },
+    { dir: 'lateef', name: 'Lateef', family: 'Lateef' },
+    { dir: 'mada', name: 'Mada', family: 'Mada' },
+    { dir: 'mehr-nastalique', name: 'Mehr Nastaleeq', family: 'MehrNastaleeq' },
+    { dir: 'mehr-nastalique-2', name: 'Mehr Nastaliq Web', family: 'Mehr Nastaliq Web' },
+    { dir: 'nafees-nastaleeq', name: 'Nafees Nastaleeq', family: 'NafeesNastaleeq' },
+    { dir: 'Nafees-web-naskh', name: 'Nafees Web Naskh', family: 'NafeesWebNaskh' },
+    { dir: 'noto-naskh', name: 'Noto Naskh Arabic', family: 'Noto Naskh Arabic' },
+    { dir: 'noto-nastalique', name: 'Noto Nastaliq Urdu', family: 'Noto Nastaliq Urdu' },
+    { dir: 'pak-nastaleeq', name: 'Pak Nastaleeq', family: 'PakNastaleeq' },
+    { dir: 'qahiri', name: 'Qahiri', family: 'Qahiri' },
+    { dir: 'reem-kufi', name: 'Reem Kufi', family: 'Reem Kufi' },
+    { dir: 'sameer-khashab-bold', name: 'Sameer Khashab Bold', family: 'sameer-khashab' },
+    { dir: 'scheherazade', name: 'Scheherazade New', family: 'Scheherazade New' },
+];
+export const URDU_WEB_FONT_OPTIONS = URDU_WEB_FONTS.map((font) => ({
+    name: font.name,
+    family: `"${font.family}", serif`,
+    group: 'Urdu / Arabic script',
+}));
+let injected = false;
+/** Registers every urdu-web-fonts @font-face via a <link> per family. Safe to
+ * call repeatedly and from several editors: it injects once per page. */
+export function injectUrduWebFontsCss() {
+    if (injected || typeof document === 'undefined')
+        return;
+    if (document.querySelector('link[data-likhari-urdu-fonts]')) {
+        injected = true;
+        return;
+    }
+    for (const font of URDU_WEB_FONTS) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = `${URDU_WEB_FONTS_BASE_URL}/${font.dir}/stylesheet.css`;
+        link.setAttribute('data-likhari-urdu-fonts', font.dir);
+        document.head.appendChild(link);
+    }
+    injected = true;
+}

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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;AAC3D,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACrF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export { EditorRoot } from './EditorRoot.js';
 export { defaultMantineTheme } from './theme/mantineTheme.js';
+export { DEFAULT_FONT_OPTIONS, URDU_WEB_FONT_OPTIONS, FONT_SIZES_PX } from './fonts/index.js';

package/dist/theme/editor.css

@@ -23,11 +23,14 @@
   align-items: center;
   gap: 8px;
   min-height: 46px;
-  padding: 0 8px;
+  padding: 4px 8px;
   background: var(--editor-paper-dim);
   border-bottom: 1px solid var(--editor-line);
-  flex-wrap: nowrap;
-  overflow-x: auto;
+  /* Wrap instead of scroll: an overflow container would clip menus and grow
+     a scrollbar. Dropdowns (Select/Menu) portal out, so nothing needs to
+     escape this box. */
+  flex-wrap: wrap;
+  row-gap: 4px;
 }
 
 .likhari-toolbar-group {
@@ -35,11 +38,11 @@
   align-items: center;
   gap: 2px;
   padding: 0 6px;
-  border-right: 0.5px solid var(--editor-line);
+  border-inline-end: 0.5px solid var(--editor-line);
 }
 
 .likhari-toolbar-group:last-child {
-  border-right: none;
+  border-inline-end: none;
 }
 
 .likhari-toolbar-button {
@@ -79,86 +82,54 @@
   cursor: not-allowed;
 }
 
-.likhari-toolbar-select {
+/* Mantine Select inside the toolbar — sized to the 30px control height and
+   themed from the --editor-* tokens (the closed input only; the dropdown is
+   portaled to <body>, outside the token scope, so it uses Mantine's own
+   variables, which the editor's MantineProvider already maps to the accent). */
+.likhari-toolbar-select-input {
   height: 30px;
-  max-width: 116px;
+  min-height: 30px;
   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 {
+.likhari-toolbar-select-input: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;
+.likhari-overflow-item[data-active='true'] {
+  background: var(--mantine-primary-color-light);
+  color: var(--mantine-primary-color-filled);
 }
 
 /* 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. */
+   on small screens; the toolbar wraps onto a second row 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);
+/* Save (icon-only ToolbarButton): filled accent while there are unsaved
+   changes, back to the plain outline once saved — editor-ui-design-spec.md §7. */
+.likhari-toolbar-button[data-dirty='true'] {
   background: var(--editor-accent);
   color: var(--editor-paper);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
 }
 
-.likhari-save-button[data-dirty='false'] {
-  background: transparent;
+.likhari-toolbar-button[data-dirty='true']:hover {
+  background: var(--editor-accent);
+  filter: brightness(1.1);
+}
+
+.likhari-toolbar-button[data-dirty='false'] {
   color: var(--editor-accent);
 }
 

package/dist/utils/style.d.ts

@@ -0,0 +1,4 @@
+/** Sets (or replaces) one property in an inline CSS string like Lexical's
+ * TextNode style, keeping every other property as-is. */
+export declare function setStyleProperty(css: string, property: string, value: string): string;
+//# sourceMappingURL=style.d.ts.map

package/dist/utils/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/utils/style.ts"],"names":[],"mappings":"AAAA;yDACyD;AACzD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYrF"}

package/dist/utils/style.js

@@ -0,0 +1,15 @@
+/** Sets (or replaces) one property in an inline CSS string like Lexical's
+ * TextNode style, keeping every other property as-is. */
+export function setStyleProperty(css, property, value) {
+    const entries = css
+        .split(';')
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .map((part) => {
+        const i = part.indexOf(':');
+        return [part.slice(0, i).trim(), part.slice(i + 1).trim()];
+    })
+        .filter(([name]) => name !== property);
+    entries.push([property, value]);
+    return entries.map(([name, val]) => `${name}: ${val};`).join(' ');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.3",
+  "version": "0.1.4-dev.25",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {