@inshapardaz/likhari-react 0.1.6-dev.60 → 0.1.6-dev.64

package/dist/EditorRoot.d.ts

@@ -3,6 +3,7 @@ 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';
+import { type Locale } from './i18n/index.js';
 export interface EditorInitialContent {
     format: Extract<FormatId, 'lexical-json' | 'plain-text'>;
     value: string;
@@ -14,7 +15,15 @@ export interface EditorRootProps {
     featurePreset?: FeatureConfigPresetName;
     theme?: MantineThemeOverride;
     colorScheme?: 'light' | 'dark';
-    locale?: 'en' | 'ur' | 'pa-shahmukhi';
+    /**
+     * A CSS color (e.g. `'#2B6E6E'`) overriding the editor's default accent —
+     * both Mantine's own primary color (buttons, portaled dropdowns' active-item
+     * highlight, etc.) and the `--editor-accent` / `--editor-accent-soft` CSS
+     * variables the toolbar/canvas use directly. Omit to use the built-in
+     * default tokens (packages/core/src/theme/tokens.ts).
+     */
+    accentColor?: string;
+    locale?: Locale;
     placeholder?: string;
     /**
      * CSS height for the editor box (toolbar + canvas together) — accepts any

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;AAU1D,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;AAIjE,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;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C;;;;;;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,uGA8IrB,CAAC"}
+{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAU1D,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;AAIjE,OAAO,EAAgC,KAAK,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEnE,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;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,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;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C;;;;;;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,uGAkKrB,CAAC"}

package/dist/EditorRoot.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -18,14 +18,18 @@ import { Toolbar } from './components/Toolbar.js';
 import { injectUrduWebFontsCss } from './fonts/index.js';
 import { LinkPastePlugin } from './plugins/LinkPastePlugin.js';
 import { ImageOptionsContext } from './image/ImageOptionsContext.js';
+import { PortalTargetContext } from './PortalTargetContext.js';
+import { UiStringsContext, getStrings } from './i18n/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, showSave = Boolean(onSave), onImageUpload, fetchImage, fontOptions, }, ref) {
+export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialContent, featureConfig, featurePreset, theme, colorScheme, accentColor, locale = 'en', placeholder, height = '480px', onChange, onSave, showSave = Boolean(onSave), onImageUpload, fetchImage, fontOptions, }, ref) {
     const config = useMemo(() => resolveFeatureConfig(featureConfig, featurePreset), [featureConfig, featurePreset]);
+    const strings = useMemo(() => getStrings(locale), [locale]);
+    const resolvedPlaceholder = placeholder ?? strings.editor.placeholder;
     // 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(() => {
@@ -78,12 +82,12 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
                 return true;
             if (typeof window === 'undefined')
                 return true;
-            return window.confirm('You have unsaved changes. Discard them?');
+            return window.confirm(strings.editor.confirmDiscard);
         },
         focus() {
             rootElementRef.current?.focus();
         },
-    }), [isDirty]);
+    }), [isDirty, strings]);
     const rootElementRef = useRef(null);
     const handleChange = (state) => {
         editorStateRef.current = state;
@@ -102,5 +106,10 @@ 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: _jsx(ImageOptionsContext.Provider, { value: imageOptions, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, direction: dir }), _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.lists.check && _jsx(CheckListPlugin, {}), config.links && _jsx(LinkPlugin, {}), config.links && _jsx(LinkPastePlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }) }));
+    // A stable per-instance id for the portal-anchor div below, so multiple
+    // EditorRoot instances on one page each get their own portal target
+    // rather than colliding on a shared one.
+    const portalTargetId = useId();
+    const portalTargetSelector = `#${CSS.escape(portalTargetId)}`;
+    return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, accentColor: accentColor, children: _jsxs("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: [_jsx("div", { id: portalTargetId, className: "likhari-portal-target" }), _jsx(PortalTargetContext.Provider, { value: portalTargetSelector, children: _jsx(UiStringsContext.Provider, { value: strings, children: _jsx(ImageOptionsContext.Provider, { value: imageOptions, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, direction: dir, locale: locale }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": strings.editor.contentLabel }), placeholder: _jsx("div", { className: "likhari-placeholder", children: resolvedPlaceholder }), ErrorBoundary: LexicalErrorBoundary }) }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.lists.check && _jsx(CheckListPlugin, {}), config.links && _jsx(LinkPlugin, {}), config.links && _jsx(LinkPastePlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }) })] }) }));
 });

package/dist/PortalTargetContext.d.ts

@@ -0,0 +1,16 @@
+/**
+ * CSS selector for the portal-anchor `<div>` `EditorRoot` renders as the
+ * first child of `.likhari-root` (see EditorRoot.tsx). Mantine's `Menu`,
+ * `Modal`, `Select`'s combobox and `Tooltip` all default to portaling their
+ * content to `document.body` — outside the DOM subtree that carries the
+ * `--editor-*` CSS custom properties (`.likhari-theme-scope`) and the `dir`
+ * attribute (`.likhari-root`), so none of that styling/direction reaches
+ * them. Passing this selector as the target fixes that by portaling into a
+ * genuine descendant of both instead.
+ *
+ * `undefined` (the default, outside any `EditorRoot`, or before it has
+ * mounted) falls back to Mantine's own default portal behavior.
+ */
+export declare const PortalTargetContext: import("react").Context<string | undefined>;
+export declare function usePortalTarget(): string | undefined;
+//# sourceMappingURL=PortalTargetContext.d.ts.map

package/dist/PortalTargetContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalTargetContext.d.ts","sourceRoot":"","sources":["../src/PortalTargetContext.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,6CAA+C,CAAC;AAEhF,wBAAgB,eAAe,IAAI,MAAM,GAAG,SAAS,CAEpD"}

package/dist/PortalTargetContext.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+/**
+ * CSS selector for the portal-anchor `<div>` `EditorRoot` renders as the
+ * first child of `.likhari-root` (see EditorRoot.tsx). Mantine's `Menu`,
+ * `Modal`, `Select`'s combobox and `Tooltip` all default to portaling their
+ * content to `document.body` — outside the DOM subtree that carries the
+ * `--editor-*` CSS custom properties (`.likhari-theme-scope`) and the `dir`
+ * attribute (`.likhari-root`), so none of that styling/direction reaches
+ * them. Passing this selector as the target fixes that by portaling into a
+ * genuine descendant of both instead.
+ *
+ * `undefined` (the default, outside any `EditorRoot`, or before it has
+ * mounted) falls back to Mantine's own default portal behavior.
+ */
+export const PortalTargetContext = createContext(undefined);
+export function usePortalTarget() {
+    return useContext(PortalTargetContext);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"LinkDialog.d.ts","sourceRoot":"","sources":["../../src/components/LinkDialog.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;gDACgD;AAChD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,eAAe,+BAgE7G"}
+{"version":3,"file":"LinkDialog.d.ts","sourceRoot":"","sources":["../../src/components/LinkDialog.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAC;IACnB,wFAAwF;IACxF,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxD,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;gDACgD;AAChD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,eAAe,+BAyE7G"}

package/dist/components/LinkDialog.js

@@ -2,9 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Button, Group, Modal, TextInput } from '@mantine/core';
 import { normalizeLinkUrl } from '../utils/linkUrl.js';
+import { useUiStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
 /** Insert/edit-link dialog (UI spec §6). Mantine Modal supplies focus
  * trapping, Escape-to-close and the overlay. */
 export function LinkDialog({ opened, initialUrl, showTextField, onSubmit, onRemove, onClose }) {
+    const strings = useUiStrings();
+    const portalTarget = usePortalTarget();
     const [url, setUrl] = useState(initialUrl);
     const [text, setText] = useState('');
     const [error, setError] = useState(null);
@@ -19,13 +23,13 @@ export function LinkDialog({ opened, initialUrl, showTextField, onSubmit, onRemo
         e.preventDefault();
         const normalized = normalizeLinkUrl(url);
         if (!normalized) {
-            setError('Enter a valid http(s), mailto, tel or relative URL');
+            setError(strings.linkDialog.invalidUrl);
             return;
         }
         onSubmit({ url: normalized, text: text.trim() || normalized });
     };
-    return (_jsx(Modal, { opened: opened, onClose: onClose, title: onRemove ? 'Edit link' : 'Insert link', centered: true, size: "sm", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextInput, { label: "URL", placeholder: "https://example.com", value: url, onChange: (e) => {
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: onRemove ? strings.linkDialog.titleEdit : strings.linkDialog.titleInsert, centered: true, size: "sm", portalProps: { target: portalTarget }, children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextInput, { label: strings.linkDialog.urlLabel, placeholder: strings.linkDialog.urlPlaceholder, value: url, onChange: (e) => {
                         setUrl(e.currentTarget.value);
                         setError(null);
-                    }, error: error, "data-autofocus": true }), showTextField && (_jsx(TextInput, { mt: "sm", label: "Text", placeholder: "Link text (defaults to the URL)", value: text, onChange: (e) => setText(e.currentTarget.value) })), _jsxs(Group, { justify: "space-between", mt: "md", children: [onRemove ? (_jsx(Button, { variant: "subtle", color: "red", onClick: onRemove, children: "Remove link" })) : (_jsx("span", {})), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", children: "Apply" })] })] })] }) }));
+                    }, error: error, "data-autofocus": true }), showTextField && (_jsx(TextInput, { mt: "sm", label: strings.linkDialog.textLabel, placeholder: strings.linkDialog.textPlaceholder, value: text, onChange: (e) => setText(e.currentTarget.value) })), _jsxs(Group, { justify: "space-between", mt: "md", children: [onRemove ? (_jsx(Button, { variant: "subtle", color: "red", onClick: onRemove, children: strings.link.removeLink })) : (_jsx("span", {})), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: strings.common.cancel }), _jsx(Button, { type: "submit", children: strings.linkDialog.apply })] })] })] }) }));
 }

package/dist/components/Toolbar.d.ts

@@ -1,5 +1,6 @@
 import type { ResolvedEditorFeatureConfig } from '@inshapardaz/likhari-core';
 import { type FontOption } from '../fonts/index.js';
+import type { Locale } from '../i18n/strings.js';
 export interface ToolbarProps {
     config: ResolvedEditorFeatureConfig;
     onSave?: () => void;
@@ -9,6 +10,8 @@ export interface ToolbarProps {
     fontOptions?: FontOption[];
     /** Text direction of the canvas; picks which default font and size are pre-selected. */
     direction?: 'ltr' | 'rtl';
+    /** UI locale — picks the translated strings for labels, tooltips and menu items. */
+    locale?: Locale;
 }
-export declare function Toolbar({ config, onSave, isDirty, showSave, fontOptions, direction }: ToolbarProps): import("react").JSX.Element;
+export declare function Toolbar({ config, onSave, isDirty, showSave, fontOptions, direction, locale }: 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":"AA4CA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAA6D,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAmPtG,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;IAC3B,wFAAwF;IACxF,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAC3B;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAkC,EAAE,SAAiB,EAAE,EAAE,YAAY,+BAgoBjI"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAA6D,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAItG,OAAO,KAAK,EAAE,MAAM,EAAW,MAAM,iBAAiB,CAAC;AAsRvD,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;IAC3B,wFAAwF;IACxF,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,oFAAoF;IACpF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAkC,EAAE,SAAiB,EAAE,MAAa,EAAE,EAAE,YAAY,+BA4wBhJ"}

package/dist/components/Toolbar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Menu, Select } from '@mantine/core';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getSelection, $isRangeSelection, $isElementNode, $setSelection, $getRoot, $getNearestNodeFromDOMNode, $createTextNode, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_NORMAL, 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';
@@ -15,6 +15,8 @@ import { LinkDialog } from './LinkDialog.js';
 import { normalizeLinkUrl } from '../utils/linkUrl.js';
 import { CANVAS_FONT_DEFAULTS, DEFAULT_FONT_OPTIONS, FONT_SIZES_PX } from '../fonts/index.js';
 import { setStyleProperty } from '../utils/style.js';
+import { useStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
 import { IconAbc, IconAlignCenter, IconAlignJustified, IconAlignLeft, IconAlignRight, IconArrowBackUp, IconArrowForwardUp, IconBold, IconClearFormatting, IconDeviceFloppy, IconDots, IconExternalLink, IconFeather, IconIndentDecrease, IconIndentIncrease, IconItalic, IconLetterCase, IconLetterCaseLower, IconLetterCaseUpper, IconLink, IconLinkOff, IconPencil, IconPhoto, IconPilcrow, IconSparkles, IconStrikethrough, IconSubscript, IconSuperscript, IconTextSize, IconTypography, IconUnderline, IconWand, } from '@tabler/icons-react';
 /** Sentinel for "no inline style": Lexical returns the default it is given when
  * the selection has none, so this tells "unstyled" (show the canvas default)
@@ -49,15 +51,30 @@ function ToolbarButton({ icon: Icon, title, active, dirty, disabled, onClick, })
  * 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 });
+function StubButton({ icon, title, comingSoon }) {
+    return _jsx(ToolbarButton, { icon: icon, title: comingSoon(title), disabled: true, onClick: undefined });
 }
 /** 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) }));
+function ToolbarSelect({ icon: Icon, label, value, data, width, disabled, placeholder, searchable, renderOption, onChange, comingSoon, noMatchMessage }) {
+    const portalTarget = usePortalTarget();
+    return (_jsx(Select, { size: "xs", w: width, "aria-label": label, title: disabled && comingSoon ? comingSoon(label) : label, data: data, value: value, placeholder: placeholder, disabled: disabled, searchable: searchable, renderOption: renderOption, nothingFoundMessage: searchable ? noMatchMessage : undefined, allowDeselect: false, leftSection: _jsx(Icon, { size: 15, stroke: ICON_STROKE }), comboboxProps: { withinPortal: true, position: 'bottom-start', middlewares: { flip: true, shift: true }, portalProps: { target: portalTarget } }, classNames: { input: 'likhari-toolbar-select-input', dropdown: 'likhari-toolbar-select-dropdown' }, onChange: (v) => v && onChange?.(v) }));
+}
+const EMPTY_OVERFLOW = new Set();
+function setsEqual(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const v of a)
+        if (!b.has(v))
+            return false;
+    return true;
+}
+/** Renders a movable group's items as normal inline toolbar buttons (used
+ * both in the real toolbar and in the hidden width-measuring clone). */
+function MovableGroupButtons({ group }) {
+    return (_jsx("div", { className: "likhari-toolbar-group", "data-group-key": group.key, children: group.items.map((item) => (_jsx(ToolbarButton, { icon: item.icon, title: item.label, active: item.active, onClick: item.onClick }, item.key))) }));
 }
 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", 
@@ -66,16 +83,27 @@ function OverflowItem({ icon: Icon, label, active, onClick, }) {
 }
 /** The link menu's contents — shared by the toolbar button and the right-click
  * menu: the URL (opens in a new tab), Edit link, Remove link. */
-function LinkMenuItems({ url, onEdit, onRemove }) {
+function LinkMenuItems({ url, onEdit, onRemove, strings }) {
     // Only offer the link as clickable if it's a URL the editor would have accepted.
     const safeUrl = normalizeLinkUrl(url);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu.Label, { children: "Link" }), safeUrl ? (_jsx(Menu.Item, { component: "a", href: safeUrl, target: "_blank", rel: "noopener noreferrer", leftSection: _jsx(IconExternalLink, { size: ICON_SIZE, stroke: ICON_STROKE }), title: url, className: "likhari-link-menu-url", children: url })) : (
+    return (_jsxs(_Fragment, { children: [_jsx(Menu.Label, { children: strings.link.menuLabel }), safeUrl ? (_jsx(Menu.Item, { component: "a", href: safeUrl, target: "_blank", rel: "noopener noreferrer", leftSection: _jsx(IconExternalLink, { size: ICON_SIZE, stroke: ICON_STROKE }), title: url, className: "likhari-link-menu-url", children: url })) : (
             // Not a URL the editor would accept (e.g. loaded from a document): show it, don't make it clickable.
-            _jsx(Menu.Item, { disabled: true, title: url, className: "likhari-link-menu-url", children: url || '(no URL)' })), _jsx(Menu.Item, { leftSection: _jsx(IconPencil, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onEdit, children: "Edit link" }), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconLinkOff, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onRemove, children: "Remove link" })] }));
+            _jsx(Menu.Item, { disabled: true, title: url, className: "likhari-link-menu-url", children: url || strings.link.noUrl })), _jsx(Menu.Item, { leftSection: _jsx(IconPencil, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onEdit, children: strings.link.editLink }), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconLinkOff, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onRemove, children: strings.link.removeLink })] }));
 }
-export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAULT_FONT_OPTIONS, direction = 'ltr' }) {
+export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAULT_FONT_OPTIONS, direction = 'ltr', locale = 'en' }) {
     const [editor] = useLexicalComposerContext();
     const [state, setState] = useState(INITIAL_STATE);
+    const strings = useStrings(locale);
+    const portalTarget = usePortalTarget();
+    // Responsive "priority+" overflow: the toolbar's outer container and a
+    // hidden nowrap clone (rendered with every movable group forced inline)
+    // are both measured; whenever the clone's natural width exceeds the
+    // container's available width, the lowest-priority movable groups are
+    // moved into the "..." menu, lowest-priority first, until what remains
+    // inline fits (or there's nothing left to move).
+    const toolbarContainerRef = useRef(null);
+    const toolbarMeasureRef = useRef(null);
+    const [overflowGroupKeys, setOverflowGroupKeys] = useState(EMPTY_OVERFLOW);
     const updateToolbar = useCallback(() => {
         editor.getEditorState().read(() => {
             const selection = $getSelection();
@@ -371,7 +399,112 @@ export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAU
     const showAlignGroup = config.alignment.start || config.alignment.center || config.alignment.justify || config.alignment.left || config.alignment.right;
     const showStubInsertGroup = 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;
+    // The "script & cleanup" and "indent/outdent" groups (UI spec §3.3) render
+    // as normal inline toolbar groups whenever there's room, and only move
+    // into the "..." overflow menu when the measured toolbar content doesn't
+    // fit the available width (see the ResizeObserver effect below) — this
+    // replaces the old always-on overflow menu, which was driven purely by
+    // these config flags regardless of actual space.
+    const scriptCleanupItems = [];
+    if (fmt.strikethrough) {
+        scriptCleanupItems.push({
+            key: 'strikethrough',
+            icon: IconStrikethrough,
+            label: strings.toolbar.strikethrough,
+            active: state.activeFormats.has('strikethrough'),
+            onClick: () => formatText('strikethrough'),
+        });
+    }
+    if (fmt.superscript) {
+        scriptCleanupItems.push({
+            key: 'superscript',
+            icon: IconSuperscript,
+            label: strings.toolbar.superscript,
+            active: state.activeFormats.has('superscript'),
+            onClick: () => formatText('superscript'),
+        });
+    }
+    if (fmt.subscript) {
+        scriptCleanupItems.push({
+            key: 'subscript',
+            icon: IconSubscript,
+            label: strings.toolbar.subscript,
+            active: state.activeFormats.has('subscript'),
+            onClick: () => formatText('subscript'),
+        });
+    }
+    if (fmt.caseTransforms) {
+        scriptCleanupItems.push({ key: 'upper', icon: IconLetterCaseUpper, label: strings.toolbar.uppercase, onClick: () => applyCaseTransform('upper') }, { key: 'lower', icon: IconLetterCaseLower, label: strings.toolbar.lowercase, onClick: () => applyCaseTransform('lower') }, { key: 'capitalize', icon: IconLetterCase, label: strings.toolbar.capitalize, onClick: () => applyCaseTransform('capitalize') });
+    }
+    if (fmt.clearFormatting) {
+        scriptCleanupItems.push({ key: 'clear', icon: IconClearFormatting, label: strings.toolbar.clearFormatting, onClick: clearFormatting });
+    }
+    const indentItems = config.indent
+        ? [
+            {
+                key: 'outdent',
+                icon: IconIndentDecrease,
+                label: strings.toolbar.outdent,
+                onClick: () => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined),
+            },
+            {
+                key: 'indent',
+                icon: IconIndentIncrease,
+                label: strings.toolbar.indent,
+                onClick: () => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined),
+            },
+        ]
+        : [];
+    // Low to high priority: the first group here is the first one pushed into
+    // overflow once content stops fitting (UI spec §3.3).
+    const movableGroups = [
+        { key: 'scriptCleanup', items: scriptCleanupItems },
+        { key: 'indentOutdent', items: indentItems },
+    ].filter((g) => g.items.length > 0);
+    const movableGroupKeys = useMemo(() => movableGroups.map((g) => g.key).join(','), [movableGroups]);
+    // Re-measure whenever the container is resized, or whenever the set of
+    // movable groups (and so the hidden clone's content) changes.
+    useLayoutEffect(() => {
+        const container = toolbarContainerRef.current;
+        const measure = toolbarMeasureRef.current;
+        if (!container || !measure)
+            return;
+        // Rough width of the "..." button itself (icon button + its gap) —
+        // only charged against the budget once something has actually moved
+        // into it, since it isn't rendered at all otherwise.
+        const OVERFLOW_BUTTON_WIDTH = 38;
+        const recompute = () => {
+            const available = container.clientWidth;
+            const total = measure.scrollWidth;
+            if (total <= available) {
+                setOverflowGroupKeys((prev) => (prev.size === 0 ? prev : EMPTY_OVERFLOW));
+                return;
+            }
+            const widths = new Map();
+            measure.querySelectorAll('[data-group-key]').forEach((el) => {
+                widths.set(el.dataset.groupKey, el.getBoundingClientRect().width);
+            });
+            let remaining = total;
+            const next = new Set();
+            for (const key of movableGroupKeys.split(',').filter(Boolean)) {
+                if (remaining <= available)
+                    break;
+                const w = widths.get(key);
+                if (w === undefined)
+                    continue;
+                remaining -= w;
+                next.add(key);
+            }
+            if (next.size > 0)
+                remaining += OVERFLOW_BUTTON_WIDTH;
+            setOverflowGroupKeys((prev) => (setsEqual(prev, next) ? prev : next));
+        };
+        recompute();
+        const ro = new ResizeObserver(recompute);
+        ro.observe(container);
+        ro.observe(measure);
+        return () => ro.disconnect();
+    });
     // Grouped for the dropdown when options declare groups (Latin / Urdu).
     const fontData = (() => {
         const data = [];
@@ -397,33 +530,63 @@ export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAU
     const shownFontFamily = state.fontFamily === UNSET_STYLE ? canvasDefaults.family : state.fontFamily;
     const shownFontSize = state.fontSize === UNSET_STYLE ? canvasDefaults.size : state.fontSize;
     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' }] : []),
+        { value: 'paragraph', label: strings.toolbar.formattingOptions.paragraph },
+        ...headingLevels.map((level) => ({ value: `h${level}`, label: strings.toolbar.formattingOptions.heading(level) })),
+        ...(config.lists.numbered ? [{ value: 'number', label: strings.toolbar.formattingOptions.numberedList }] : []),
+        ...(config.lists.bullet ? [{ value: 'bullet', label: strings.toolbar.formattingOptions.bulletList }] : []),
+        ...(config.lists.check ? [{ value: 'check', label: strings.toolbar.formattingOptions.taskList }] : []),
+        ...(config.blocks.quote ? [{ value: 'quote', label: strings.toolbar.formattingOptions.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' }] : []),
+        ...(config.alignment.start ? [{ value: 'start', label: strings.toolbar.alignOptions.start }] : []),
+        ...(config.alignment.center ? [{ value: 'center', label: strings.toolbar.alignOptions.center }] : []),
+        ...(config.alignment.start ? [{ value: 'end', label: strings.toolbar.alignOptions.end }] : []),
+        ...(config.alignment.justify ? [{ value: 'justify', label: strings.toolbar.alignOptions.justify }] : []),
+        ...(config.alignment.left ? [{ value: 'left', label: strings.toolbar.alignOptions.left }] : []),
+        ...(config.alignment.right ? [{ value: 'right', label: strings.toolbar.alignOptions.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 && (_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 === shownFontFamily) ? shownFontFamily : 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` === shownFontSize) ? shownFontSize : 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)) }) })), config.links && (_jsx("div", { className: "likhari-toolbar-group", children: state.isLink ? (
-                // Caret is in a link: the button opens a menu to see, edit or remove it.
-                _jsxs(Menu, { position: "bottom-start", withinPortal: true, shadow: "sm", width: 240, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "data-active": "true", "aria-pressed": "true", "aria-haspopup": "menu", "aria-label": "Link options", title: "Link options", onMouseDown: (e) => e.preventDefault(), children: _jsx(IconLink, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: state.linkUrl, onEdit: () => {
-                                    restoreSelection();
-                                    openLinkDialog();
-                                }, onRemove: removeLink }) })] })) : (_jsx(ToolbarButton, { icon: IconLink, title: "Insert link (Ctrl+K)", onClick: openLinkDialog })) })), config.links && (_jsxs(Menu, { opened: linkContext !== null, onChange: (opened) => {
+    // The toolbar's "always inline" groups (UI spec §3.3's Desktop tier) —
+    // built as an array so the exact same elements can be rendered both in
+    // the visible toolbar and in the hidden width-measuring clone below,
+    // without duplicating the JSX. The link right-click context menu is kept
+    // out of this list: it's a zero-size, fixed-position anchor, not part of
+    // the toolbar's own layout width.
+    const fixedGroups = [
+        showSave && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarButton, { icon: IconDeviceFloppy, title: strings.toolbar.save, dirty: Boolean(isDirty), onClick: onSave }) }, "save")),
+        config.history && (_jsxs("div", { className: "likhari-toolbar-group", children: [_jsx(ToolbarButton, { icon: IconArrowBackUp, title: strings.toolbar.undo, disabled: !state.canUndo, onClick: () => editor.dispatchCommand(UNDO_COMMAND, undefined) }), _jsx(ToolbarButton, { icon: IconArrowForwardUp, title: strings.toolbar.redo, disabled: !state.canRedo, onClick: () => editor.dispatchCommand(REDO_COMMAND, undefined) })] }, "history")),
+        showFormattingGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: IconPilcrow, label: strings.toolbar.formattingLabel, width: 148, value: formattingValue, data: formattingOptions, comingSoon: strings.toolbar.comingSoon, onChange: withRefocus((v) => applyFormatting(v)) }) }, "formatting")),
+        showInlineGroup && (_jsxs("div", { className: "likhari-toolbar-group", children: [fmt.bold && (_jsx(ToolbarButton, { icon: IconBold, title: strings.toolbar.bold, active: state.activeFormats.has('bold'), onClick: () => formatText('bold') })), fmt.italic && (_jsx(ToolbarButton, { icon: IconItalic, title: strings.toolbar.italic, active: state.activeFormats.has('italic'), onClick: () => formatText('italic') })), fmt.underline && (_jsx(ToolbarButton, { icon: IconUnderline, title: strings.toolbar.underline, active: state.activeFormats.has('underline'), onClick: () => formatText('underline') }))] }, "inline")),
+        (config.font.family || config.font.size) && (_jsxs("div", { className: "likhari-toolbar-group", children: [config.font.family && (_jsx(ToolbarSelect, { icon: IconTypography, label: strings.toolbar.fontFamily, width: 150, value: fontOptions.some((f) => f.family === shownFontFamily) ? shownFontFamily : null, placeholder: strings.toolbar.fontFamilyPlaceholder, data: fontData, searchable: true, noMatchMessage: strings.toolbar.noMatch, 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: strings.toolbar.fontSize, width: 84, value: FONT_SIZES_PX.some((px) => `${px}px` === shownFontSize) ? shownFontSize : null, placeholder: strings.toolbar.fontSizePlaceholder, data: FONT_SIZES_PX.map((px) => ({ value: `${px}px`, label: String(px) })), onChange: withRefocus((v) => applyFont('font-size', v)) }))] }, "font")),
+        showAlignGroup && (_jsx("div", { className: "likhari-toolbar-group", children: _jsx(ToolbarSelect, { icon: AlignIcon, label: strings.toolbar.alignment, width: 138, value: state.elementFormat || 'start', data: alignOptions, onChange: withRefocus((v) => formatElement(v)) }) }, "align")),
+        config.links && (_jsx("div", { className: "likhari-toolbar-group", children: state.isLink ? (
+            // Caret is in a link: the button opens a menu to see, edit or remove it.
+            _jsxs(Menu, { position: "bottom-start", withinPortal: true, portalProps: { target: portalTarget }, shadow: "sm", width: 240, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "data-active": "true", "aria-pressed": "true", "aria-haspopup": "menu", "aria-label": strings.toolbar.linkOptions, title: strings.toolbar.linkOptions, onMouseDown: (e) => e.preventDefault(), children: _jsx(IconLink, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: state.linkUrl, onEdit: () => {
+                                restoreSelection();
+                                openLinkDialog();
+                            }, onRemove: removeLink, strings: strings }) })] })) : (_jsx(ToolbarButton, { icon: IconLink, title: strings.toolbar.insertLink, onClick: openLinkDialog })) }, "link")),
+        showStubInsertGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [(config.images.linked || config.images.embedded) && (_jsx(ToolbarButton, { icon: IconPhoto, title: strings.toolbar.insertImage, onClick: openImageDialog })), config.poetry.enabled && _jsx(StubButton, { icon: IconFeather, title: strings.toolbar.poetryBlocks, comingSoon: strings.toolbar.comingSoon })] }, "stubInsert")),
+        showLanguageGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.language.autocorrect && _jsx(StubButton, { icon: IconWand, title: strings.toolbar.autocorrect, comingSoon: strings.toolbar.comingSoon }), config.language.textCleanup && _jsx(StubButton, { icon: IconSparkles, title: strings.toolbar.textCleanup, comingSoon: strings.toolbar.comingSoon }), config.language.spellCheck && _jsx(StubButton, { icon: IconAbc, title: strings.toolbar.spellChecker, comingSoon: strings.toolbar.comingSoon })] }, "language")),
+    ];
+    return (_jsxs("div", { className: "likhari-toolbar", role: "toolbar", "aria-label": strings.toolbar.ariaLabel, ref: toolbarContainerRef, children: [fixedGroups, movableGroups
+                .filter((group) => !overflowGroupKeys.has(group.key))
+                .map((group) => (_jsx(MovableGroupButtons, { group: group }, group.key))), overflowGroupKeys.size > 0 && (_jsxs(Menu, { position: "bottom-end", withinPortal: true, portalProps: { target: portalTarget }, shadow: "sm", width: 210, closeOnItemClick: true, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "aria-label": strings.toolbar.moreFormatting, title: strings.toolbar.moreFormatting, onMouseDown: (e) => e.preventDefault(), children: _jsx(IconDots, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsx(Menu.Dropdown, { children: movableGroups
+                            .filter((group) => overflowGroupKeys.has(group.key))
+                            .flatMap((group) => group.items.map((item) => (_jsx(OverflowItem, { icon: item.icon, label: item.label, active: item.active, onClick: runOverflowAction(item.onClick) }, item.key)))) })] })), config.links && (_jsxs(Menu, { opened: linkContext !== null, onChange: (opened) => {
                     if (!opened)
                         setLinkContext(null);
-                }, position: "bottom-start", withinPortal: true, shadow: "sm", width: 240, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: linkContext?.x ?? -9999, top: linkContext?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: linkContext?.url ?? '', onEdit: () => {
+                }, position: "bottom-start", withinPortal: true, portalProps: { target: portalTarget }, shadow: "sm", width: 240, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: linkContext?.x ?? -9999, top: linkContext?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: linkContext?.url ?? '', onEdit: () => {
                                 restoreSelection();
                                 openLinkDialog();
-                            }, onRemove: removeLink }) })] })), showStubInsertGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [(config.images.linked || config.images.embedded) && (_jsx(ToolbarButton, { icon: IconPhoto, title: "Insert image", onClick: openImageDialog })), 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)) })] }))] })] })), (config.images.linked || config.images.embedded) && (_jsx(ImageDialog, { mode: "insert", opened: imageDialogOpen, onSubmit: insertImage, onClose: closeImageDialog })), config.links && (_jsx(LinkDialog, { opened: linkDialogOpen, initialUrl: state.linkUrl, showTextField: linkNeedsText, onSubmit: applyLink, onRemove: state.isLink ? removeLink : undefined, onClose: closeLinkDialog }))] }));
+                            }, onRemove: removeLink, strings: strings }) })] })), _jsxs("div", { "aria-hidden": "true", ref: toolbarMeasureRef, style: {
+                    position: 'absolute',
+                    visibility: 'hidden',
+                    pointerEvents: 'none',
+                    top: 0,
+                    left: 0,
+                    display: 'flex',
+                    flexWrap: 'nowrap',
+                    gap: 8,
+                }, children: [fixedGroups, movableGroups.map((group) => (_jsx(MovableGroupButtons, { group: group }, group.key)))] }), (config.images.linked || config.images.embedded) && (_jsx(ImageDialog, { mode: "insert", opened: imageDialogOpen, onSubmit: insertImage, onClose: closeImageDialog })), config.links && (_jsx(LinkDialog, { opened: linkDialogOpen, initialUrl: state.linkUrl, showTextField: linkNeedsText, onSubmit: applyLink, onRemove: state.isLink ? removeLink : undefined, onClose: closeLinkDialog }))] }));
 }

package/dist/i18n/index.d.ts

@@ -0,0 +1,4 @@
+export type { Locale, Strings } from './strings.js';
+export { STRINGS, getStrings } from './strings.js';
+export { useStrings, useUiStrings, UiStringsContext } from './useStrings.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/i18n/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/dist/i18n/index.js

@@ -0,0 +1,2 @@
+export { STRINGS, getStrings } from './strings.js';
+export { useStrings, useUiStrings, UiStringsContext } from './useStrings.js';