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

package/dist/image/ImageComponent.js

@@ -8,6 +8,8 @@ import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_
 import { ImageCropDialog } from './ImageCropDialog.js';
 import { ImageDialog } from './ImageDialog.js';
 import { useImageOptions } from './ImageOptionsContext.js';
+import { useUiStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
 import { dataUrlBytes, fetchImageAsDataUrl } from './imageEdit.js';
 // A type-only import of ImageNode (ImageNode itself imports this file), so the
 // node is recognised by its type string rather than `instanceof`.
@@ -26,6 +28,8 @@ const MIN_WIDTH = 32;
 export function ImageComponent({ nodeKey, src, altText, caption, linkType, width, height }) {
     const [editor] = useLexicalComposerContext();
     const options = useImageOptions();
+    const strings = useUiStrings();
+    const portalTarget = usePortalTarget();
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
     const imageRef = useRef(null);
     const figureRef = useRef(null);
@@ -82,7 +86,7 @@ export function ImageComponent({ nodeKey, src, altText, caption, linkType, width
         try {
             const dataUrl = await fetchImageAsDataUrl(src, options.fetchImage);
             if (dataUrlBytes(dataUrl) > options.maxSizeMB * 1024 * 1024) {
-                throw new Error(`Image is larger than ${options.maxSizeMB} MB`);
+                throw new Error(strings.imageDialog.errors.largerThan(options.maxSizeMB));
             }
             updateNode((node) => node.setSource(dataUrl, 'embedded'));
         }
@@ -154,10 +158,10 @@ export function ImageComponent({ nodeKey, src, altText, caption, linkType, width
             clearSelection();
             setSelected(true);
             setMenu({ x: e.clientX, y: e.clientY });
-        }, children: [_jsxs("span", { className: "likhari-image-wrap", children: [_jsx("img", { ref: imageRef, className: "likhari-image", src: src, alt: altText, width: shownWidth, draggable: false }), isSelected && linkType === 'embedded' && (_jsx("span", { className: "likhari-image-resize-handle", role: "separator", "aria-label": "Resize image", onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onPointerCancel: onResizeUp }))] }), caption && _jsx("figcaption", { className: "likhari-image-caption", children: caption }), _jsxs(Menu, { opened: menu !== null, onChange: (opened) => {
+        }, children: [_jsxs("span", { className: "likhari-image-wrap", children: [_jsx("img", { ref: imageRef, className: "likhari-image", src: src, alt: altText, width: shownWidth, draggable: false }), isSelected && linkType === 'embedded' && (_jsx("span", { className: "likhari-image-resize-handle", role: "separator", "aria-label": strings.imageMenu.resizeImage, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onPointerCancel: onResizeUp }))] }), caption && _jsx("figcaption", { className: "likhari-image-caption", children: caption }), _jsxs(Menu, { opened: menu !== null, onChange: (opened) => {
                     if (!opened)
                         setMenu(null);
-                }, position: "bottom-start", withinPortal: true, shadow: "sm", width: 200, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: menu?.x ?? -9999, top: menu?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { leftSection: _jsx(IconPhotoEdit, { size: 16, stroke: 1.75 }), onClick: () => setDialog({}), children: "Edit image\u2026" }), linkType === 'linked' && options.allowEmbedded && (_jsx(Menu.Item, { leftSection: _jsx(IconPhotoDown, { size: 16, stroke: 1.75 }), onClick: () => void convertToEmbedded(), children: "Convert to embedded image" })), linkType === 'embedded' && (_jsx(Menu.Item, { leftSection: _jsx(IconCrop, { size: 16, stroke: 1.75 }), onClick: () => setCropDialogOpen(true), children: "Crop & resize\u2026" })), options.allowCaption && (_jsx(Menu.Item, { leftSection: _jsx(IconTextCaption, { size: 16, stroke: 1.75 }), onClick: () => setDialog({ intent: 'caption' }), children: caption ? 'Edit caption…' : 'Add caption…' })), options.allowCaption && caption && (_jsx(Menu.Item, { leftSection: _jsx(IconX, { size: 16, stroke: 1.75 }), onClick: () => updateNode((node) => node.setCaption(null)), children: "Remove caption" })), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconTrash, { size: 16, stroke: 1.75 }), onClick: removeImage, children: "Delete image" })] })] }), _jsx(ImageDialog, { mode: "edit", opened: dialog !== null, initial: { src, altText, caption, linkType }, intent: dialog?.intent, onSubmit: applyEdit, onClose: () => {
+                }, position: "bottom-start", withinPortal: true, portalProps: { target: portalTarget }, shadow: "sm", width: 200, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: menu?.x ?? -9999, top: menu?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { leftSection: _jsx(IconPhotoEdit, { size: 16, stroke: 1.75 }), onClick: () => setDialog({}), children: strings.imageMenu.editImage }), linkType === 'linked' && options.allowEmbedded && (_jsx(Menu.Item, { leftSection: _jsx(IconPhotoDown, { size: 16, stroke: 1.75 }), onClick: () => void convertToEmbedded(), children: strings.imageMenu.convertToEmbedded })), linkType === 'embedded' && (_jsx(Menu.Item, { leftSection: _jsx(IconCrop, { size: 16, stroke: 1.75 }), onClick: () => setCropDialogOpen(true), children: strings.imageMenu.cropResize })), options.allowCaption && (_jsx(Menu.Item, { leftSection: _jsx(IconTextCaption, { size: 16, stroke: 1.75 }), onClick: () => setDialog({ intent: 'caption' }), children: caption ? strings.imageMenu.editCaption : strings.imageMenu.addCaption })), options.allowCaption && caption && (_jsx(Menu.Item, { leftSection: _jsx(IconX, { size: 16, stroke: 1.75 }), onClick: () => updateNode((node) => node.setCaption(null)), children: strings.imageMenu.removeCaption })), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconTrash, { size: 16, stroke: 1.75 }), onClick: removeImage, children: strings.imageMenu.deleteImage })] })] }), _jsx(ImageDialog, { mode: "edit", opened: dialog !== null, initial: { src, altText, caption, linkType }, intent: dialog?.intent, onSubmit: applyEdit, onClose: () => {
                     setDialog(null);
                     editor.focus();
                 } }), linkType === 'embedded' && (_jsx(ImageCropDialog, { opened: cropDialogOpen, initial: { src, width, height }, onSubmit: applyCrop, onClose: () => {

package/dist/image/ImageCropDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCropDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageCropDialog.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB;oEACgE;IAChE,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAqBD;;qEAEqE;AACrE,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,oBAAoB,+BAyJ3F"}
+{"version":3,"file":"ImageCropDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageCropDialog.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB;oEACgE;IAChE,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAqBD;;qEAEqE;AACrE,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,oBAAoB,+BAqK3F"}

package/dist/image/ImageCropDialog.js

@@ -5,6 +5,8 @@ import { normalizeImageUrl } from './imageUrl.js';
 import { dataUrlBytes, dataUrlToFile, fitDimension, mimeFromSrc } from './imageEdit.js';
 import { ImageCropper } from './ImageCropper.js';
 import { useImageOptions } from './ImageOptionsContext.js';
+import { useUiStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
 /** Natural pixel size of an image URL (for the aspect ratio and size presets). */
 function useNaturalSize(src) {
     const [size, setSize] = useState(null);
@@ -29,6 +31,8 @@ function useNaturalSize(src) {
  * its context menu. Edits that change pixels are re-embedded as a data URI,
  * or stored through the host's `onImageUpload` when there is one. */
 export function ImageCropDialog({ opened, initial, onSubmit, onClose }) {
+    const strings = useUiStrings();
+    const portalTarget = usePortalTarget();
     const { maxSizeMB, onImageUpload } = useImageOptions();
     const [pixelSrc, setPixelSrc] = useState(null);
     const [width, setWidth] = useState(null);
@@ -75,7 +79,7 @@ export function ImageCropDialog({ opened, initial, onSubmit, onClose }) {
             let src = effectiveSrc;
             if (pixelSrc) {
                 if (dataUrlBytes(pixelSrc) > maxSizeMB * 1024 * 1024) {
-                    setError(`Image is larger than ${maxSizeMB} MB`);
+                    setError(strings.imageCropDialog.errors.largerThan(maxSizeMB));
                     return;
                 }
                 if (onImageUpload) {
@@ -83,7 +87,7 @@ export function ImageCropDialog({ opened, initial, onSubmit, onClose }) {
                     const ext = mimeFromSrc(pixelSrc).split('/')[1];
                     src = await onImageUpload(dataUrlToFile(pixelSrc, `image.${ext}`));
                     if (!normalizeImageUrl(src)) {
-                        setError('The upload handler returned an unusable image URL');
+                        setError(strings.imageCropDialog.errors.uploadUnusable);
                         return;
                     }
                 }
@@ -91,23 +95,26 @@ export function ImageCropDialog({ opened, initial, onSubmit, onClose }) {
             onSubmit({ src, width, height });
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Could not save the image');
+            // ImageCropper's own pixel-edit error message (imageEdit.ts,
+            // applyPixelOp) is shown as-is when present — see the note in
+            // ImageDialog.tsx for why that pure utility's messages stay English.
+            setError(err instanceof Error ? err.message : strings.imageCropDialog.errors.couldNotSave);
         }
         finally {
             setBusy(false);
         }
     };
-    return (_jsx(Modal, { opened: opened, onClose: onClose, title: "Crop & resize", centered: true, size: "lg", children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "md", children: [_jsx(ImageCropper, { src: effectiveSrc, canReset: pixelSrc !== null, onApply: (edited) => {
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: strings.imageCropDialog.title, centered: true, size: "lg", portalProps: { target: portalTarget }, children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "md", children: [_jsx(ImageCropper, { src: effectiveSrc, canReset: pixelSrc !== null, onApply: (edited) => {
                             setPixelSrc(edited);
                             resetSize();
                         }, onReset: () => {
                             setPixelSrc(null);
                             setWidth(initial.width);
                             setHeight(initial.height);
-                        } }), _jsx(Divider, { label: "Size", labelPosition: "left" }), _jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { grow: true, align: "flex-end", children: [_jsx(NumberInput, { label: "Width (px)", min: 1, max: 10000, hideControls: true, placeholder: natural ? String(natural.width) : 'Auto', value: width ?? '', onChange: (v) => onSizeChange('width', v) }), _jsx(NumberInput, { label: "Height (px)", min: 1, max: 10000, hideControls: true, placeholder: natural ? String(natural.height) : 'Auto', value: height ?? '', onChange: (v) => onSizeChange('height', v) })] }), _jsx(Checkbox, { label: "Keep proportions", checked: lockAspect, onChange: (e) => setLockAspect(e.currentTarget.checked) }), _jsxs(Group, { gap: "xs", children: [[25, 50, 75, 100].map((pct) => (_jsxs(Button, { size: "xs", variant: "default", disabled: !natural, onClick: () => {
+                        } }), _jsx(Divider, { label: strings.imageCropDialog.sizeLabel, labelPosition: "left" }), _jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { grow: true, align: "flex-end", children: [_jsx(NumberInput, { label: strings.imageCropDialog.widthLabel, min: 1, max: 10000, hideControls: true, placeholder: natural ? String(natural.width) : strings.imageCropDialog.autoPlaceholder, value: width ?? '', onChange: (v) => onSizeChange('width', v) }), _jsx(NumberInput, { label: strings.imageCropDialog.heightLabel, min: 1, max: 10000, hideControls: true, placeholder: natural ? String(natural.height) : strings.imageCropDialog.autoPlaceholder, value: height ?? '', onChange: (v) => onSizeChange('height', v) })] }), _jsx(Checkbox, { label: strings.imageCropDialog.keepProportions, checked: lockAspect, onChange: (e) => setLockAspect(e.currentTarget.checked) }), _jsxs(Group, { gap: "xs", children: [[25, 50, 75, 100].map((pct) => (_jsxs(Button, { size: "xs", variant: "default", disabled: !natural, onClick: () => {
                                             if (!natural)
                                                 return;
                                             setWidth(Math.round((natural.width * pct) / 100));
                                             setHeight(Math.round((natural.height * pct) / 100));
-                                        }, children: [pct, "%"] }, pct))), _jsx(Button, { size: "xs", variant: "subtle", onClick: resetSize, children: "Original size" })] }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["You can also drag the corner handle on a selected image. ", natural ? `Original: ${natural.width} × ${natural.height} px.` : ''] })] }), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error })), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", loading: busy, children: "Save" })] })] }) }) }));
+                                        }, children: [pct, "%"] }, pct))), _jsx(Button, { size: "xs", variant: "subtle", onClick: resetSize, children: strings.imageCropDialog.originalSize })] }), _jsx(Text, { size: "xs", c: "dimmed", children: strings.imageCropDialog.dragHint(natural) })] }), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error })), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: strings.common.cancel }), _jsx(Button, { type: "submit", loading: busy, children: strings.common.save })] })] }) }) }));
 }

package/dist/image/ImageCropper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCropper.d.ts","sourceRoot":"","sources":["../../src/image/ImageCropper.tsx"],"names":[],"mappings":"AA+CA,MAAM,WAAW,iBAAiB;IAChC,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;0BAG0B;AAC1B,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,iBAAiB,+BAyOnB"}
+{"version":3,"file":"ImageCropper.d.ts","sourceRoot":"","sources":["../../src/image/ImageCropper.tsx"],"names":[],"mappings":"AAgDA,MAAM,WAAW,iBAAiB;IAChC,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;0BAG0B;AAC1B,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,iBAAiB,+BA0OnB"}

package/dist/image/ImageCropper.js

@@ -4,6 +4,7 @@ import { ActionIcon, Alert, Button, Group, SegmentedControl, Stack, Text, Toolti
 import { IconCrop, IconFlipHorizontal, IconFlipVertical, IconRestore, IconRotate2, IconRotateClockwise2, } from "@tabler/icons-react";
 import { applyPixelOp } from "./imageEdit.js";
 import { MIN_CROP, moveRect, rectFromDrag, resizeRect, } from "./cropMath.js";
+import { usePortalTarget } from "../PortalTargetContext.js";
 const ASPECTS = {
     free: null,
     "1:1": 1,
@@ -17,6 +18,7 @@ const clamp = (v) => Math.min(Math.max(v, 0), 1);
  * Each operation re-renders the pixels, so it needs an image the canvas may read
  * (an embedded image). */
 export function ImageCropper({ src, onApply, canReset, onReset, }) {
+    const portalTarget = usePortalTarget();
     const imgRef = useRef(null);
     const drag = useRef(null);
     const [rect, setRect] = useState(null);
@@ -92,7 +94,7 @@ export function ImageCropper({ src, onApply, canReset, onReset, }) {
     const selectionSize = rect && natural && rect.w > 0 && rect.h > 0
         ? `${Math.max(1, Math.round(rect.w * natural.width))} × ${Math.max(1, Math.round(rect.h * natural.height))} px`
         : null;
-    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { gap: "xs", children: [_jsx(Tooltip, { label: "Rotate left", children: _jsx(ActionIcon, { variant: "default", "aria-label": "Rotate left", disabled: busy, onClick: () => run({ type: "rotate", direction: "ccw" }), children: _jsx(IconRotate2, { size: 16 }) }) }), _jsx(Tooltip, { label: "Rotate right", children: _jsx(ActionIcon, { variant: "default", "aria-label": "Rotate right", disabled: busy, onClick: () => run({ type: "rotate", direction: "cw" }), children: _jsx(IconRotateClockwise2, { size: 16 }) }) }), _jsx(Tooltip, { label: "Flip horizontally", children: _jsx(ActionIcon, { variant: "default", "aria-label": "Flip horizontally", disabled: busy, onClick: () => run({ type: "flip", axis: "horizontal" }), children: _jsx(IconFlipHorizontal, { size: 16 }) }) }), _jsx(Tooltip, { label: "Flip vertically", children: _jsx(ActionIcon, { variant: "default", "aria-label": "Flip vertically", disabled: busy, onClick: () => run({ type: "flip", axis: "vertical" }), children: _jsx(IconFlipVertical, { size: 16 }) }) }), _jsx(Button, { ml: "auto", size: "xs", variant: "subtle", leftSection: _jsx(IconRestore, { size: 14 }), disabled: !canReset || busy, onClick: () => {
+    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { gap: "xs", children: [_jsx(Tooltip, { label: "Rotate left", portalProps: { target: portalTarget }, children: _jsx(ActionIcon, { variant: "default", "aria-label": "Rotate left", disabled: busy, onClick: () => run({ type: "rotate", direction: "ccw" }), children: _jsx(IconRotate2, { size: 16 }) }) }), _jsx(Tooltip, { label: "Rotate right", portalProps: { target: portalTarget }, children: _jsx(ActionIcon, { variant: "default", "aria-label": "Rotate right", disabled: busy, onClick: () => run({ type: "rotate", direction: "cw" }), children: _jsx(IconRotateClockwise2, { size: 16 }) }) }), _jsx(Tooltip, { label: "Flip horizontally", portalProps: { target: portalTarget }, children: _jsx(ActionIcon, { variant: "default", "aria-label": "Flip horizontally", disabled: busy, onClick: () => run({ type: "flip", axis: "horizontal" }), children: _jsx(IconFlipHorizontal, { size: 16 }) }) }), _jsx(Tooltip, { label: "Flip vertically", portalProps: { target: portalTarget }, children: _jsx(ActionIcon, { variant: "default", "aria-label": "Flip vertically", disabled: busy, onClick: () => run({ type: "flip", axis: "vertical" }), children: _jsx(IconFlipVertical, { size: 16 }) }) }), _jsx(Button, { ml: "auto", size: "xs", variant: "subtle", leftSection: _jsx(IconRestore, { size: 14 }), disabled: !canReset || busy, onClick: () => {
                             setRect(null);
                             setError(null);
                             onReset();

package/dist/image/ImageDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB;gFAC4E;IAC5E,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qFAAqF;IACrF,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,EAAE,aAAa,CAAA;KAAE,CAAC;IAC5F;4CACwC;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAaD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BAmPjG"}
+{"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB;gFAC4E;IAC5E,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qFAAqF;IACrF,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,EAAE,aAAa,CAAA;KAAE,CAAC;IAC5F;4CACwC;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAaD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BAwQjG"}

package/dist/image/ImageDialog.js

@@ -5,11 +5,13 @@ import { IconPhotoDown } from '@tabler/icons-react';
 import { ACCEPTED_IMAGE_TYPES, normalizeImageUrl, validateImageFile } from './imageUrl.js';
 import { dataUrlBytes, dataUrlToFile, fetchImageAsDataUrl, mimeFromSrc } from './imageEdit.js';
 import { useImageOptions } from './ImageOptionsContext.js';
+import { useUiStrings } from '../i18n/useStrings.js';
+import { usePortalTarget } from '../PortalTargetContext.js';
 function readAsDataUrl(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () => resolve(String(reader.result));
-        reader.onerror = () => reject(reader.error ?? new Error('Could not read the file'));
+        reader.onerror = () => reject(new Error('READ_FAILED'));
         reader.readAsDataURL(file);
     });
 }
@@ -21,6 +23,8 @@ function readAsDataUrl(file) {
  * image's context menu once it has pixels of its own to edit.
  */
 export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }) {
+    const strings = useUiStrings();
+    const portalTarget = usePortalTarget();
     const { allowLinked, allowEmbedded, allowCaption, maxSizeMB, onImageUpload, fetchImage } = useImageOptions();
     const editing = mode === 'edit' && initial !== undefined;
     const defaultSource = editing ? 'keep' : allowLinked ? 'linked' : 'embedded';
@@ -74,8 +78,8 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
         try {
             setFileSrc(await readAsDataUrl(next));
         }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Could not read the file');
+        catch {
+            setError(strings.imageDialog.errors.couldNotReadFile);
         }
     };
     /** Downloads a linked image and switches the dialog to its embedded copy. */
@@ -87,13 +91,17 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
         try {
             const dataUrl = await fetchImageAsDataUrl(src, fetchImage);
             if (dataUrlBytes(dataUrl) > maxSizeMB * 1024 * 1024)
-                throw new Error(`Image is larger than ${maxSizeMB} MB`);
+                throw new Error(strings.imageDialog.errors.largerThan(maxSizeMB));
             setSource('embedded');
             setFile(null);
             setFileSrc(dataUrl);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Could not convert the image');
+            // fetchImageAsDataUrl's own errors (network/CORS failures, unsupported
+            // type) are English (packages/react/src/image/imageEdit.ts) — shown
+            // as-is since threading locale into that pure utility isn't worth the
+            // refactor here; only the size-limit message above is ours to localize.
+            setError(err instanceof Error ? err.message : strings.imageDialog.errors.couldNotConvert);
         }
         finally {
             setConverting(false);
@@ -103,7 +111,11 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
         e.preventDefault();
         setError(null);
         if (!baseSrc) {
-            setError(source === 'linked' ? 'Enter an http(s) or relative image URL' : source === 'embedded' ? 'Choose an image file' : 'No image');
+            setError(source === 'linked'
+                ? strings.imageDialog.errors.enterUrl
+                : source === 'embedded'
+                    ? strings.imageDialog.errors.chooseFile
+                    : strings.imageDialog.errors.noImage);
             return;
         }
         try {
@@ -119,7 +131,7 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
             }
             if (newPixels) {
                 if (dataUrlBytes(newPixels) > maxSizeMB * 1024 * 1024) {
-                    setError(`Image is larger than ${maxSizeMB} MB`);
+                    setError(strings.imageDialog.errors.largerThan(maxSizeMB));
                     return;
                 }
                 linkType = 'embedded';
@@ -129,7 +141,7 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
                     const upload = !file ? dataUrlToFile(newPixels, `image.${ext}`) : file;
                     src = await onImageUpload(upload);
                     if (!normalizeImageUrl(src)) {
-                        setError('The upload handler returned an unusable image URL');
+                        setError(strings.imageDialog.errors.uploadUnusable);
                         return;
                     }
                 }
@@ -146,17 +158,19 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
             });
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Could not save the image');
+            // fetchImageAsDataUrl's own network/CORS error message (imageEdit.ts)
+            // is shown as-is when present — see note in `convert` above.
+            setError(err instanceof Error ? err.message : strings.imageDialog.errors.couldNotSave);
         }
         finally {
             setBusy(false);
         }
     };
-    const convertButton = (_jsx(Button, { size: "xs", variant: "light", leftSection: _jsx(IconPhotoDown, { size: 14 }), loading: converting, disabled: !baseSrc, onClick: () => convert(baseSrc), children: "Convert to embedded image" }));
-    return (_jsx(Modal, { opened: opened, onClose: onClose, title: editing ? 'Edit image' : 'Insert image', centered: true, size: "sm", children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "sm", children: [(editing || (allowLinked && allowEmbedded)) && (_jsx(SegmentedControl, { fullWidth: true, value: source, onChange: (v) => changeSource(v), data: [
-                            ...(editing ? [{ value: 'keep', label: 'Current image' }] : []),
-                            ...(allowLinked ? [{ value: 'linked', label: 'From URL' }] : []),
-                            ...(allowEmbedded ? [{ value: 'embedded', label: 'Upload' }] : []),
-                        ] })), source === 'keep' && (_jsxs(Stack, { gap: 6, children: [_jsx(Text, { size: "sm", c: "dimmed", lineClamp: 2, style: { wordBreak: 'break-all' }, children: initial?.linkType === 'embedded' ? 'Embedded in the document' : `Linked from ${initial?.src}` }), initial?.linkType === 'linked' && allowEmbedded && (_jsxs(Group, { gap: "xs", children: [convertButton, _jsx(Text, { size: "xs", c: "dimmed", children: "Downloads a copy into the document, so it can be cropped, rotated and resized." })] }))] })), source === 'linked' && (_jsxs(_Fragment, { children: [_jsx(TextInput, { label: "Image URL", placeholder: "https://example.com/photo.jpg", value: url, onChange: (e) => setUrl(e.currentTarget.value), "data-autofocus": intent !== 'caption' ? true : undefined }), allowEmbedded && (_jsx(Checkbox, { label: "Embed a copy in the document", description: "Downloads the image so it can be edited and no longer depends on the URL.", checked: embedCopy, onChange: (e) => setEmbedCopy(e.currentTarget.checked) }))] })), source === 'embedded' &&
-                        (convertedFromUrl ? (_jsx(Text, { size: "sm", c: "dimmed", children: "Converted from the URL: a copy will be embedded in the document." })) : (_jsx(FileInput, { label: "Image file", placeholder: "Choose an image", accept: ACCEPTED_IMAGE_TYPES.join(','), value: file, onChange: changeFile, description: `Up to ${maxSizeMB} MB${onImageUpload ? '' : '; stored inside the document'}` }))), _jsx(TextInput, { label: "Alt text", description: "Describes the image for screen readers", value: altText, onChange: (e) => setAltText(e.currentTarget.value) }), allowCaption && (_jsx(TextInput, { label: "Caption", description: "Shown under the image. Leave empty for none.", value: caption, onChange: (e) => setCaption(e.currentTarget.value), "data-autofocus": intent === 'caption' ? true : undefined })), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error })), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", loading: busy, children: editing ? 'Save' : 'Insert' })] })] }) }) }));
+    const convertButton = (_jsx(Button, { size: "xs", variant: "light", leftSection: _jsx(IconPhotoDown, { size: 14 }), loading: converting, disabled: !baseSrc, onClick: () => convert(baseSrc), children: strings.imageDialog.convertButton }));
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: editing ? strings.imageDialog.titleEdit : strings.imageDialog.titleInsert, centered: true, size: "sm", portalProps: { target: portalTarget }, children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "sm", children: [(editing || (allowLinked && allowEmbedded)) && (_jsx(SegmentedControl, { fullWidth: true, value: source, onChange: (v) => changeSource(v), data: [
+                            ...(editing ? [{ value: 'keep', label: strings.imageDialog.currentImage }] : []),
+                            ...(allowLinked ? [{ value: 'linked', label: strings.imageDialog.fromUrl }] : []),
+                            ...(allowEmbedded ? [{ value: 'embedded', label: strings.imageDialog.upload }] : []),
+                        ] })), source === 'keep' && (_jsxs(Stack, { gap: 6, children: [_jsx(Text, { size: "sm", c: "dimmed", lineClamp: 2, style: { wordBreak: 'break-all' }, children: initial?.linkType === 'embedded' ? strings.imageDialog.embeddedInDocument : strings.imageDialog.linkedFrom(initial?.src ?? '') }), initial?.linkType === 'linked' && allowEmbedded && (_jsxs(Group, { gap: "xs", children: [convertButton, _jsx(Text, { size: "xs", c: "dimmed", children: strings.imageDialog.convertHint })] }))] })), source === 'linked' && (_jsxs(_Fragment, { children: [_jsx(TextInput, { label: strings.imageDialog.imageUrlLabel, placeholder: strings.imageDialog.imageUrlPlaceholder, value: url, onChange: (e) => setUrl(e.currentTarget.value), "data-autofocus": intent !== 'caption' ? true : undefined }), allowEmbedded && (_jsx(Checkbox, { label: strings.imageDialog.embedCopyLabel, description: strings.imageDialog.embedCopyDescription, checked: embedCopy, onChange: (e) => setEmbedCopy(e.currentTarget.checked) }))] })), source === 'embedded' &&
+                        (convertedFromUrl ? (_jsx(Text, { size: "sm", c: "dimmed", children: strings.imageDialog.convertedFromUrl })) : (_jsx(FileInput, { label: strings.imageDialog.fileLabel, placeholder: strings.imageDialog.filePlaceholder, accept: ACCEPTED_IMAGE_TYPES.join(','), value: file, onChange: changeFile, description: strings.imageDialog.fileDescription(maxSizeMB, !onImageUpload) }))), _jsx(TextInput, { label: strings.imageDialog.altTextLabel, description: strings.imageDialog.altTextDescription, value: altText, onChange: (e) => setAltText(e.currentTarget.value) }), allowCaption && (_jsx(TextInput, { label: strings.imageDialog.captionLabel, description: strings.imageDialog.captionDescription, value: caption, onChange: (e) => setCaption(e.currentTarget.value), "data-autofocus": intent === 'caption' ? true : undefined })), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error })), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: strings.common.cancel }), _jsx(Button, { type: "submit", loading: busy, children: editing ? strings.common.save : strings.common.insert })] })] }) }) }));
 }

package/dist/index.d.ts

@@ -5,4 +5,6 @@ export { ImageNode, $createImageNode, $isImageNode } from './image/ImageNode.js'
 export type { ImagePayload, ImageLinkType, SerializedImageNode } from './image/ImageNode.js';
 export { DEFAULT_FONT_OPTIONS, URDU_WEB_FONT_OPTIONS, FONT_SIZES_PX } from './fonts/index.js';
 export type { FontOption } from './fonts/index.js';
+export { STRINGS, getStrings, useStrings, useUiStrings, UiStringsContext } from './i18n/index.js';
+export type { Locale, Strings } from './i18n/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;AAC3D,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9E,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACrF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,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,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC9E,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACrF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AACzF,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -2,3 +2,4 @@ export { EditorRoot } from './EditorRoot.js';
 export { defaultMantineTheme } from './theme/mantineTheme.js';
 export { ImageNode, $createImageNode, $isImageNode } from './image/ImageNode.js';
 export { DEFAULT_FONT_OPTIONS, URDU_WEB_FONT_OPTIONS, FONT_SIZES_PX } from './fonts/index.js';
+export { STRINGS, getStrings, useStrings, useUiStrings, UiStringsContext } from './i18n/index.js';

package/dist/theme/EditorThemeProvider.d.ts

@@ -4,7 +4,10 @@ import './editor.css';
 export interface EditorThemeProviderProps {
     theme?: MantineThemeOverride;
     colorScheme?: 'light' | 'dark';
+    /** Overrides both Mantine's primary color and the `--editor-accent` /
+     * `--editor-accent-soft` CSS variables — see EditorRootProps.accentColor. */
+    accentColor?: string;
     children: React.ReactNode;
 }
-export declare function EditorThemeProvider({ theme, colorScheme, children }: EditorThemeProviderProps): import("react").JSX.Element;
+export declare function EditorThemeProvider({ theme, colorScheme, accentColor, children }: EditorThemeProviderProps): import("react").JSX.Element;
 //# sourceMappingURL=EditorThemeProvider.d.ts.map

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

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

package/dist/theme/EditorThemeProvider.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { MantineProvider } from '@mantine/core';
 import '@mantine/core/styles.css';
 import { buildThemeCss } from '@inshapardaz/likhari-core';
 import { defaultMantineTheme } from './mantineTheme.js';
+import { generateAccentCssVars, generateAccentShades } from './accentColor.js';
 import './editor.css';
 let cssInjected = false;
 // Scopes the --editor-* variables to the wrapper div below, which is what
@@ -21,8 +23,28 @@ function useThemeCssInjection() {
         cssInjected = true;
     }
 }
-export function EditorThemeProvider({ theme, colorScheme, children }) {
+export function EditorThemeProvider({ theme, colorScheme, accentColor, children }) {
     useThemeCssInjection();
+    // Mantine wants a 10-shade array; a host only supplies one color, so a
+    // small local helper (accentColor.ts) mixes it towards white/black for
+    // the rest of the ramp. If `theme` is ALSO supplied, its own `colors`
+    // still wins for anything it explicitly sets (shallow-merged per color
+    // key) — the accent override alone isn't worth a generic deep-merge here.
+    const resolvedTheme = useMemo(() => {
+        const shades = accentColor ? generateAccentShades(accentColor) : null;
+        const base = shades ? { ...defaultMantineTheme, colors: { ...defaultMantineTheme.colors, likhariAccent: shades } } : defaultMantineTheme;
+        if (!theme)
+            return base;
+        return { ...base, ...theme, colors: { ...base.colors, ...theme.colors } };
+    }, [accentColor, theme]);
+    // Inline style wins over the injected stylesheet rule (same element, same
+    // specificity otherwise) — only set when accentColor is actually given,
+    // so the default static tokens keep applying via the stylesheet the rest
+    // of the time.
+    const accentVars = accentColor ? generateAccentCssVars(accentColor, colorScheme === 'dark' ? 'dark' : 'light') : null;
+    const accentStyle = accentVars
+        ? { '--editor-accent': accentVars.accent, '--editor-accent-soft': accentVars.accentSoft }
+        : {};
     return (
     // display: contents keeps this wrapper out of the layout tree — CSS
     // custom properties still cascade to children through it (inheritance
@@ -30,5 +52,5 @@ export function EditorThemeProvider({ theme, colorScheme, children }) {
     // element and the host's actual parent, so EditorRoot's `height` prop
     // (e.g. '100%') resolves against the host's container as if this div
     // weren't there at all.
-    _jsx("div", { className: "likhari-theme-scope", "data-editor-color-scheme": colorScheme, style: { display: 'contents' }, children: _jsx(MantineProvider, { theme: theme ?? defaultMantineTheme, children: children }) }));
+    _jsx("div", { className: "likhari-theme-scope", "data-editor-color-scheme": colorScheme, style: { display: 'contents', ...accentStyle }, children: _jsx(MantineProvider, { theme: resolvedTheme, children: children }) }));
 }

package/dist/theme/accentColor.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Derives Mantine's 10-shade color array and the editor's own
+ * `--editor-accent` / `--editor-accent-soft` pair from a single
+ * host-supplied accent color (EditorRootProps.accentColor). No color
+ * library needed — a few lines of hex parsing plus RGB lerp is enough for a
+ * usable (not professionally calibrated) ramp.
+ */
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** Parses a `#rgb` or `#rrggbb` hex color. Returns null for anything else —
+ * callers fall back to the static default tokens rather than throwing on a
+ * bad host-supplied value. */
+export declare function hexToRgb(hex: string): Rgb | null;
+export declare function rgbToHex({ r, g, b }: Rgb): string;
+/** Linear-interpolates two colors; t=0 -> a, t=1 -> b. */
+export declare function mix(a: Rgb, b: Rgb, t: number): Rgb;
+/** Mantine's color-tuple shape: exactly 10 shades. */
+export type AccentShades = readonly [string, string, string, string, string, string, string, string, string, string];
+/**
+ * A 10-shade Mantine color array for `theme.colors.likhariAccent`, mixing
+ * the base color towards white for the lighter shades (0-4ish) and towards
+ * black for the darker ones (6-9ish) — shade 6 (Mantine's default "filled"
+ * shade) is the exact input color, matching what the static
+ * `likhariAccent` ramp already did for the default tokens.
+ */
+export declare function generateAccentShades(hex: string): AccentShades | null;
+/**
+ * The editor canvas/toolbar's own `--editor-accent` / `--editor-accent-soft`
+ * pair for a host-supplied accent color, mirroring the relationship between
+ * `LIGHT_TOKENS`/`DARK_TOKENS`'s `accent`/`accentSoft` (packages/core/src/theme/tokens.ts):
+ * light mode keeps the accent as given and derives a light tint for "soft";
+ * dark mode lightens the accent itself (for contrast against a dark canvas)
+ * and derives a dark tint for "soft".
+ */
+export declare function generateAccentCssVars(hex: string, mode: 'light' | 'dark'): {
+    accent: string;
+    accentSoft: string;
+} | null;
+export {};
+//# sourceMappingURL=accentColor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accentColor.d.ts","sourceRoot":"","sources":["../../src/theme/accentColor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,UAAU,GAAG;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;8BAE8B;AAC9B,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,GAAG,IAAI,CAehD;AAQD,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAEjD;AAED,0DAA0D;AAC1D,wBAAgB,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,CAMlD;AAKD,sDAAsD;AACtD,MAAM,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAErH;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAQrE;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAaxH"}

package/dist/theme/accentColor.js

@@ -0,0 +1,84 @@
+/**
+ * Derives Mantine's 10-shade color array and the editor's own
+ * `--editor-accent` / `--editor-accent-soft` pair from a single
+ * host-supplied accent color (EditorRootProps.accentColor). No color
+ * library needed — a few lines of hex parsing plus RGB lerp is enough for a
+ * usable (not professionally calibrated) ramp.
+ */
+/** Parses a `#rgb` or `#rrggbb` hex color. Returns null for anything else —
+ * callers fall back to the static default tokens rather than throwing on a
+ * bad host-supplied value. */
+export function hexToRgb(hex) {
+    const cleaned = hex.trim().replace(/^#/, '');
+    const full = cleaned.length === 3
+        ? cleaned
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : cleaned;
+    if (!/^[0-9a-fA-F]{6}$/.test(full))
+        return null;
+    return {
+        r: parseInt(full.slice(0, 2), 16),
+        g: parseInt(full.slice(2, 4), 16),
+        b: parseInt(full.slice(4, 6), 16),
+    };
+}
+function toHex(n) {
+    return Math.round(Math.min(255, Math.max(0, n)))
+        .toString(16)
+        .padStart(2, '0');
+}
+export function rgbToHex({ r, g, b }) {
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/** Linear-interpolates two colors; t=0 -> a, t=1 -> b. */
+export function mix(a, b, t) {
+    return {
+        r: a.r + (b.r - a.r) * t,
+        g: a.g + (b.g - a.g) * t,
+        b: a.b + (b.b - a.b) * t,
+    };
+}
+const WHITE = { r: 255, g: 255, b: 255 };
+const BLACK = { r: 0, g: 0, b: 0 };
+/**
+ * A 10-shade Mantine color array for `theme.colors.likhariAccent`, mixing
+ * the base color towards white for the lighter shades (0-4ish) and towards
+ * black for the darker ones (6-9ish) — shade 6 (Mantine's default "filled"
+ * shade) is the exact input color, matching what the static
+ * `likhariAccent` ramp already did for the default tokens.
+ */
+export function generateAccentShades(hex) {
+    const base = hexToRgb(hex);
+    if (!base)
+        return null;
+    // How far to mix towards white (positive) or black (negative) per shade,
+    // relative to shade 6 = the exact input color.
+    const mixAmount = [0.88, 0.72, 0.56, 0.4, 0.22, 0.1, 0, -0.14, -0.28, -0.42];
+    const shades = mixAmount.map((t) => rgbToHex(mix(base, t >= 0 ? WHITE : BLACK, Math.abs(t))));
+    return shades;
+}
+/**
+ * The editor canvas/toolbar's own `--editor-accent` / `--editor-accent-soft`
+ * pair for a host-supplied accent color, mirroring the relationship between
+ * `LIGHT_TOKENS`/`DARK_TOKENS`'s `accent`/`accentSoft` (packages/core/src/theme/tokens.ts):
+ * light mode keeps the accent as given and derives a light tint for "soft";
+ * dark mode lightens the accent itself (for contrast against a dark canvas)
+ * and derives a dark tint for "soft".
+ */
+export function generateAccentCssVars(hex, mode) {
+    const base = hexToRgb(hex);
+    if (!base)
+        return null;
+    if (mode === 'dark') {
+        return {
+            accent: rgbToHex(mix(base, WHITE, 0.45)),
+            accentSoft: rgbToHex(mix(base, BLACK, 0.75)),
+        };
+    }
+    return {
+        accent: hex,
+        accentSoft: rgbToHex(mix(base, WHITE, 0.88)),
+    };
+}

package/dist/theme/editor.css

@@ -19,6 +19,12 @@
    its own height so only the canvas below scrolls. */
 .likhari-toolbar {
   display: flex;
+  /* Containing block for the hidden width-measuring clone (Toolbar.tsx):
+     without this, its position: absolute would resolve against the
+     viewport instead, and its intentionally-unwrapped (possibly very wide)
+     content could inflate the host page's scroll area instead of being
+     clipped by .likhari-root's overflow: hidden. */
+  position: relative;
   flex-shrink: 0;
   align-items: center;
   gap: 8px;
@@ -33,6 +39,18 @@
   row-gap: 4px;
 }
 
+/* Empty portal-anchor (EditorRoot.tsx) — exists only so Mantine's portaled
+   Menu/Modal/Select-combobox/Tooltip content has a DOM ancestor inside
+   .likhari-root/.likhari-theme-scope to inherit --editor-* vars and `dir`
+   from; it must take up no space and never intercept pointer events. */
+.likhari-portal-target {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
 .likhari-toolbar-group {
   display: flex;
   align-items: center;

package/package.json

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