@inshapardaz/likhari-react 0.1.6 → 0.1.7-dev.75

package/dist/persistence/draftStorage.js

@@ -0,0 +1,71 @@
+/**
+ * Autosave-to-localStorage drafts (lexical-editor-spec.md §6.2), namespaced
+ * by `documentId` (§6.1). Every function is a no-op (never throws) when
+ * `localStorage` is unavailable (SSR, privacy mode) or the stored value is
+ * corrupt — autosave is best-effort, never a hard dependency.
+ */
+const KEY_PREFIX = 'likhari:draft:';
+export function draftKey(documentId) {
+    return `${KEY_PREFIX}${documentId}`;
+}
+function getLocalStorage() {
+    try {
+        return typeof localStorage === 'undefined' ? null : localStorage;
+    }
+    catch {
+        // Some browsers throw on accessing localStorage in certain privacy modes.
+        return null;
+    }
+}
+export function readDraft(documentId) {
+    const storage = getLocalStorage();
+    if (!storage)
+        return null;
+    try {
+        const raw = storage.getItem(draftKey(documentId));
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        if (typeof parsed.json !== 'string' || typeof parsed.savedAt !== 'number' || parsed.version !== 1)
+            return null;
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Best-effort debounced write. Silently skips (rather than throwing) when
+ * `json` exceeds `maxBytes` — localStorage has a shared ~5-10MB per-origin
+ * ceiling (§6.2), so a single large document (e.g. embedded base64 images)
+ * must not be allowed to autosave past a caller-configured limit — or when
+ * the write itself fails (quota exceeded, privacy mode).
+ */
+export function writeDraft(documentId, json, maxBytes) {
+    const storage = getLocalStorage();
+    if (!storage)
+        return;
+    // .length (UTF-16 code units) over-estimates UTF-8 byte size for any
+    // non-Latin text, which only makes this check more conservative — fine
+    // for a soft cap that doesn't need to be exact.
+    if (json.length > maxBytes)
+        return;
+    const draft = { json, savedAt: Date.now(), version: 1 };
+    try {
+        storage.setItem(draftKey(documentId), JSON.stringify(draft));
+    }
+    catch {
+        // Quota exceeded or similar — autosave is best-effort.
+    }
+}
+export function clearDraft(documentId) {
+    const storage = getLocalStorage();
+    if (!storage)
+        return;
+    try {
+        storage.removeItem(draftKey(documentId));
+    }
+    catch {
+        // ignore
+    }
+}

package/dist/plugins/AutosaveRestorePlugin.d.ts

@@ -0,0 +1,16 @@
+export interface AutosaveRestorePluginProps {
+    documentId?: string;
+    enabled: boolean;
+    /** The Lexical JSON the editor was constructed with (stringified), or
+     * undefined for a blank document — compared against a stored draft so an
+     * identical draft doesn't trigger a pointless prompt. */
+    initialJson?: string;
+    confirmMessage: string;
+}
+/**
+ * On mount, offers to restore a newer localStorage draft over the initial
+ * content passed in (lexical-editor-spec.md §6.2) — data-loss prevention is
+ * the explicit goal, so this never silently picks one over the other.
+ */
+export declare function AutosaveRestorePlugin({ documentId, enabled, initialJson, confirmMessage }: AutosaveRestorePluginProps): null;
+//# sourceMappingURL=AutosaveRestorePlugin.d.ts.map

package/dist/plugins/AutosaveRestorePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutosaveRestorePlugin.d.ts","sourceRoot":"","sources":["../../src/plugins/AutosaveRestorePlugin.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,0BAA0B;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB;;6DAEyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,0BAA0B,QAwBrH"}

package/dist/plugins/AutosaveRestorePlugin.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { readDraft } from '../persistence/draftStorage.js';
+/**
+ * On mount, offers to restore a newer localStorage draft over the initial
+ * content passed in (lexical-editor-spec.md §6.2) — data-loss prevention is
+ * the explicit goal, so this never silently picks one over the other.
+ */
+export function AutosaveRestorePlugin({ documentId, enabled, initialJson, confirmMessage }) {
+    const [editor] = useLexicalComposerContext();
+    const checked = useRef(false);
+    useEffect(() => {
+        if (checked.current || !enabled || !documentId)
+            return;
+        checked.current = true;
+        const draft = readDraft(documentId);
+        if (!draft || draft.json === initialJson)
+            return;
+        if (typeof window === 'undefined' || !window.confirm(confirmMessage))
+            return;
+        try {
+            const parsed = editor.parseEditorState(draft.json);
+            editor.setEditorState(parsed);
+        }
+        catch {
+            // Corrupt or incompatible draft (e.g. from a much older node schema) —
+            // ignore it and keep the initial content rather than crashing.
+        }
+        // Deliberately runs once on mount only.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+}

package/dist/theme/EditorThemeProvider.d.ts

@@ -4,7 +4,23 @@ 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;
+    /**
+     * The id of the portal-anchor element EditorRoot renders inside
+     * `.likhari-root` (see PortalTargetContext.tsx). Scopes Mantine's OWN
+     * `data-mantine-color-scheme` attribute and CSS variables to that single
+     * element instead of the default `document.documentElement` — without
+     * this, Mantine's Modal/Menu/Select/Tooltip surfaces (background, text,
+     * border colors) would always render in Mantine's global light scheme
+     * regardless of `colorScheme`, since nothing ever told MantineProvider
+     * which scheme to use; forcing it at `document.documentElement` instead
+     * would work but would leak dark mode onto the rest of the host page and
+     * collide between multiple EditorRoot instances with different schemes.
+     */
+    scopeElementId?: string;
     children: React.ReactNode;
 }
-export declare function EditorThemeProvider({ theme, colorScheme, children }: EditorThemeProviderProps): import("react").JSX.Element;
+export declare function EditorThemeProvider({ theme, colorScheme, accentColor, scopeElementId, 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;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,wBAAwB,+BA+C1H"}

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, scopeElementId, 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, forceColorScheme: colorScheme, defaultColorScheme: "auto", getRootElement: scopeElementId ? () => document.getElementById(scopeElementId) ?? undefined : undefined, cssVariablesSelector: scopeElementId ? `#${CSS.escape(scopeElementId)}` : undefined, 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;
@@ -235,6 +253,113 @@
   margin: 1.5em 0;
 }
 
+/* Images — block-level figure; the caption is static text (edited in the
+   image's dialog), and a selected image gets a corner resize handle. */
+.likhari-image-block {
+  margin: 0 0 1em 0;
+}
+
+.likhari-image-figure {
+  display: block;
+  margin: 0;
+  text-align: center;
+}
+
+.likhari-image-wrap {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+
+.likhari-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  cursor: default;
+}
+
+.likhari-image-figure[data-selected='true'] .likhari-image {
+  outline: 2px solid var(--editor-accent);
+  outline-offset: 2px;
+}
+
+.likhari-image-resize-handle {
+  position: absolute;
+  right: -6px;
+  bottom: -6px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--editor-paper);
+  border-radius: 3px;
+  background: var(--editor-accent);
+  cursor: nwse-resize;
+  touch-action: none;
+}
+
+.likhari-image-caption {
+  margin-top: 6px;
+  color: var(--editor-ink-soft);
+  font-size: 0.85em;
+  line-height: 1.4;
+  text-align: center;
+}
+
+/* Image dialog — crop stage. The selection dims everything outside it. */
+.likhari-cropper-stage {
+  position: relative;
+  display: inline-block;
+  align-self: center;
+  max-width: 100%;
+  padding: 8px;
+  overflow: hidden;
+  line-height: 0;
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+}
+
+.likhari-cropper-frame {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.likhari-cropper-image {
+  display: block;
+  max-width: 100%;
+  max-height: 320px;
+}
+
+.likhari-cropper-selection {
+  position: absolute;
+  border: 2px solid #fff;
+  outline: 1px solid rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  cursor: move;
+}
+
+.likhari-cropper-handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  border-radius: 2px;
+  background: #fff;
+  /* 12px handles on small selections would overlap; keep them on the border. */
+  transform: translate(-50%, -50%);
+}
+
+.likhari-cropper-handle[data-handle='nw'] { left: 0; top: 0; cursor: nwse-resize; }
+.likhari-cropper-handle[data-handle='n'] { left: 50%; top: 0; cursor: ns-resize; }
+.likhari-cropper-handle[data-handle='ne'] { left: 100%; top: 0; cursor: nesw-resize; }
+.likhari-cropper-handle[data-handle='e'] { left: 100%; top: 50%; cursor: ew-resize; }
+.likhari-cropper-handle[data-handle='se'] { left: 100%; top: 100%; cursor: nwse-resize; }
+.likhari-cropper-handle[data-handle='s'] { left: 50%; top: 100%; cursor: ns-resize; }
+.likhari-cropper-handle[data-handle='sw'] { left: 0; top: 100%; cursor: nesw-resize; }
+.likhari-cropper-handle[data-handle='w'] { left: 0; top: 50%; cursor: ew-resize; }
+
 /* Link menu: the URL item shows one truncated line. */
 .likhari-link-menu-url {
   max-width: 100%;

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

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

package/dist/theme/editorTheme.js

@@ -32,4 +32,5 @@ export const editorTheme = {
         superscript: 'likhari-text-superscript',
     },
     hr: 'likhari-hr',
+    image: 'likhari-image-block',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.6",
+  "version": "0.1.7-dev.75",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {
@@ -13,6 +13,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
       "import": "./dist/index.js"
     },
     "./package.json": "./package.json"