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

package/dist/theme/EditorThemeProvider.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { MantineProvider } from '@mantine/core';
-import '@mantine/core/styles.css';
+// Mantine is a peer dependency (docs/mantine-headless-theming.md §4 rule 1):
+// the host imports '@mantine/core/styles.css' itself, once, in its own entry
+// point, so it controls load order. This package must not import it itself.
 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 +25,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 +54,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.73",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {
@@ -13,8 +13,10 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
       "import": "./dist/index.js"
     },
+    "./styles.css": "./dist/theme/editor.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -39,13 +41,17 @@
     "@lexical/utils": "^0.20.0",
     "@inshapardaz/likhari-converters": "^0.1.0",
     "@inshapardaz/likhari-core": "^0.1.0",
-    "@mantine/core": "^9.6.3",
-    "@mantine/hooks": "^9.6.3",
     "@tabler/icons-react": "^3.46.0",
     "lexical": "^0.20.0"
   },
   "peerDependencies": {
+    "@mantine/core": "^9.6.3",
+    "@mantine/hooks": "^9.6.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@mantine/core": "^9.6.3",
+    "@mantine/hooks": "^9.6.3"
   }
 }