@olenbetong/synergi-react 2.3.8 → 2.4.0

package/es/components/ImageEditor/useImageHistory.js

@@ -0,0 +1,153 @@
+import { useEffect, useRef, useState } from "react";
+/**
+ * Manages undo/redo history for the image editor using action replay.
+ *
+ * Only action lists are stored — no intermediate blobs. Undo/redo replays
+ * all remaining actions from the source image, keeping memory usage minimal
+ * regardless of history depth. Only one blob is in memory at a time.
+ */
+export function useImageHistory(sourceUrl, registry) {
+    let [history, setHistory] = useState({ past: [], future: [] });
+    let [current, setCurrent] = useState({ url: sourceUrl, blob: null, generated: false });
+    let [replaying, setReplaying] = useState(false);
+    let historyRef = useRef(history);
+    historyRef.current = history;
+    let currentRef = useRef(current);
+    currentRef.current = current;
+    let isReplaying = useRef(false);
+    let replayAbort = useRef(null);
+    // When source changes (e.g. component remount with new image), reset fully.
+    useEffect(() => {
+        replayAbort.current?.abort();
+        isReplaying.current = false;
+        setReplaying(false);
+        setCurrent((prev) => {
+            if (prev.generated)
+                URL.revokeObjectURL(prev.url);
+            return { url: sourceUrl, blob: null, generated: false };
+        });
+        setHistory({ past: [], future: [] });
+    }, [sourceUrl]);
+    useEffect(() => {
+        return () => {
+            if (currentRef.current.generated)
+                URL.revokeObjectURL(currentRef.current.url);
+            replayAbort.current?.abort();
+        };
+    }, []);
+    function applyActions(blob, actions) {
+        // A direct apply always takes priority — abort any in-flight replay.
+        replayAbort.current?.abort();
+        isReplaying.current = false;
+        setReplaying(false);
+        let newUrl = URL.createObjectURL(blob);
+        setCurrent((prev) => {
+            if (prev.generated)
+                URL.revokeObjectURL(prev.url);
+            return { url: newUrl, blob, generated: true };
+        });
+        setHistory((prev) => ({ past: [...prev.past, actions], future: [] }));
+    }
+    async function doReplay(newPast, newFuture) {
+        replayAbort.current?.abort();
+        let abort = new AbortController();
+        replayAbort.current = abort;
+        isReplaying.current = true;
+        setReplaying(true);
+        try {
+            let result = await replayAll(sourceUrl, newPast, registry, abort.signal);
+            if (abort.signal.aborted)
+                return;
+            setCurrent((prev) => {
+                if (prev.generated)
+                    URL.revokeObjectURL(prev.url);
+                if (result)
+                    return { url: result.url, blob: result.blob, generated: true };
+                return { url: sourceUrl, blob: null, generated: false };
+            });
+            setHistory({ past: newPast, future: newFuture });
+        }
+        finally {
+            if (!abort.signal.aborted) {
+                isReplaying.current = false;
+                setReplaying(false);
+            }
+        }
+    }
+    function undo() {
+        if (isReplaying.current)
+            return;
+        let { past, future } = historyRef.current;
+        if (past.length === 0)
+            return;
+        doReplay(past.slice(0, -1), [past.at(-1), ...future]);
+    }
+    function redo() {
+        if (isReplaying.current)
+            return;
+        let { past, future } = historyRef.current;
+        if (future.length === 0)
+            return;
+        doReplay([...past, future[0]], future.slice(1));
+    }
+    function reset() {
+        replayAbort.current?.abort();
+        isReplaying.current = false;
+        setReplaying(false);
+        setCurrent((prev) => {
+            if (prev.generated)
+                URL.revokeObjectURL(prev.url);
+            return { url: sourceUrl, blob: null, generated: false };
+        });
+        setHistory({ past: [], future: [] });
+    }
+    return {
+        currentImageUrl: current.url,
+        currentBlob: current.blob,
+        canUndo: history.past.length > 0,
+        canRedo: history.future.length > 0,
+        replaying,
+        applyActions,
+        undo,
+        redo,
+        reset,
+    };
+}
+/**
+ * Replays a sequence of action groups from a source URL.
+ * Intermediate object URLs are revoked as soon as a new step succeeds.
+ * Returns the final `{ url, blob }` or `null` if there were no actions.
+ */
+async function replayAll(sourceUrl, actionGroups, registry, signal) {
+    let prevUrl = sourceUrl;
+    let prevGenerated = false;
+    let lastBlob = null;
+    for (let group of actionGroups) {
+        for (let action of group) {
+            if (signal.aborted) {
+                if (prevGenerated)
+                    URL.revokeObjectURL(prevUrl);
+                return null;
+            }
+            let apply = registry.get(action.type);
+            if (!apply) {
+                console.warn(`[ImageHistory] No replay handler for action type "${action.type}" — skipping`);
+                continue;
+            }
+            let blob = await apply(prevUrl, action.params);
+            if (signal.aborted) {
+                if (prevGenerated)
+                    URL.revokeObjectURL(prevUrl);
+                return null;
+            }
+            if (prevGenerated)
+                URL.revokeObjectURL(prevUrl);
+            lastBlob = blob;
+            prevUrl = URL.createObjectURL(blob);
+            prevGenerated = true;
+        }
+    }
+    if (!lastBlob || !prevGenerated)
+        return null;
+    return { url: prevUrl, blob: lastBlob };
+}

package/es/components/ImageEditor/useOpenCV.d.ts

@@ -0,0 +1,14 @@
+declare global {
+    interface Window {
+        cv: any;
+    }
+}
+export declare function loadOpenCV(): Promise<unknown>;
+interface UseOpenCVResult {
+    cv: any | null;
+    ready: boolean;
+    error: Error | null;
+}
+/** Lazily loads OpenCV.js from CDN. Starts loading only when `enabled` is true. */
+export declare function useOpenCV(enabled?: boolean): UseOpenCVResult;
+export {};

package/es/components/ImageEditor/useOpenCV.js

@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+let loadPromise = null;
+function waitForCvMat(timeoutMs = 30_000) {
+    return new Promise((resolve, reject) => {
+        let elapsed = 0;
+        let interval = setInterval(() => {
+            console.log("[OpenCV] polling... cv=", typeof window.cv, "cv.Mat=", typeof window.cv?.Mat);
+            // cv.Mat signals that the WASM runtime has fully initialised
+            if (window.cv?.Mat) {
+                clearInterval(interval);
+                console.log("[OpenCV] cv.Mat found — ready!");
+                resolve(); // callers read window.cv directly
+                return;
+            }
+            elapsed += 100;
+            if (elapsed >= timeoutMs) {
+                clearInterval(interval);
+                reject(new Error("OpenCV.js initialisation timed out"));
+            }
+        }, 100);
+    });
+}
+export function loadOpenCV() {
+    if (loadPromise) {
+        console.log("[OpenCV] loadOpenCV() — reusing existing promise");
+        return loadPromise;
+    }
+    // Already initialised (e.g. hot-reload)
+    if (window.cv?.Mat) {
+        console.log("[OpenCV] already initialised on window.cv");
+        loadPromise = Promise.resolve(window.cv);
+        return loadPromise;
+    }
+    console.log("[OpenCV] injecting script tag...");
+    loadPromise = new Promise((resolve, reject) => {
+        let script = document.createElement("script");
+        script.src = "https://docs.opencv.org/4.10.0/opencv.js";
+        script.async = true;
+        script.onload = () => {
+            console.log("[OpenCV] script onload fired. typeof window.cv=", typeof window.cv, "cv?.then=", typeof window.cv?.then, "cv?.Mat=", typeof window.cv?.Mat);
+            if (typeof window.cv?.then === "function") {
+                console.log("[OpenCV] promise-based build detected, awaiting cv...");
+                // Emscripten promise-based build: cv itself is the promise.
+                // IMPORTANT: we must NOT pass `instance` into resolve() — if the resolved
+                // value is itself thenable, Promise will follow it forever and never settle.
+                // Instead we mutate window.cv and signal readiness with undefined.
+                window.cv.then((instance) => {
+                    console.log("[OpenCV] promise resolved, instance=", typeof instance, "hasReadMethod=", typeof instance?.imread);
+                    window.cv = instance;
+                    resolve(undefined); // signal only; callers read window.cv
+                }, (err) => {
+                    console.error("[OpenCV] promise rejected", err);
+                    reject(err);
+                });
+            }
+            else {
+                console.log("[OpenCV] polling-based build, starting waitForCvMat...");
+                // Polling build: WASM initialises asynchronously after script loads
+                waitForCvMat().then(() => resolve(undefined), reject);
+            }
+        };
+        script.onerror = (err) => {
+            console.error("[OpenCV] script load error", err);
+            loadPromise = null;
+            reject(new Error("Failed to load OpenCV.js"));
+        };
+        document.head.appendChild(script);
+    });
+    return loadPromise;
+}
+/** Lazily loads OpenCV.js from CDN. Starts loading only when `enabled` is true. */
+export function useOpenCV(enabled = true) {
+    let [cv, setCv] = useState(null);
+    let [ready, setReady] = useState(false);
+    let [error, setError] = useState(null);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        console.log("[useOpenCV] enabled=true, calling loadOpenCV()");
+        loadOpenCV()
+            .then(() => {
+            console.log("[useOpenCV] loadOpenCV resolved. window.cv=", typeof window.cv, "imread=", typeof window.cv?.imread);
+            setCv(window.cv);
+            setReady(true);
+        })
+            .catch((err) => {
+            console.error("[useOpenCV] loadOpenCV rejected:", err);
+            setError(err);
+        });
+    }, [enabled]);
+    return { cv, ready, error };
+}

package/es/components/MergeProgressDialog/index.d.ts

@@ -0,0 +1,8 @@
+export type MergeProgressDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    /** Called once when the dialog opens; should return the merger ID for the start route */
+    getMergerId: () => Promise<string | number>;
+    mergeType?: "pdf" | "zip";
+};
+export declare function MergeProgressDialog({ open, onClose, getMergerId, mergeType }: MergeProgressDialogProps): import("react/jsx-runtime").JSX.Element;

package/es/components/MergeProgressDialog/index.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, DialogActions, LinearProgress, Link, Typography } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { ResponsiveDialog } from "@olenbetong/appframe-mui";
+import { useEffect, useRef, useState } from "react";
+function formatRemaining(ms) {
+    if (ms < 60_000)
+        return `~${Math.ceil(ms / 1000)}s`;
+    let mins = Math.floor(ms / 60_000);
+    let secs = Math.ceil((ms % 60_000) / 1000);
+    return secs > 0 ? `~${mins}m ${secs}s` : `~${mins}m`;
+}
+export function MergeProgressDialog({ open, onClose, getMergerId, mergeType = "pdf" }) {
+    let [phase, setPhase] = useState({ kind: "preparing" });
+    let [now, setNow] = useState(Date.now);
+    let esRef = useRef(null);
+    let doneRef = useRef(false);
+    // Tick every second while processing to recompute the time estimate
+    useEffect(() => {
+        if (phase.kind !== "processing")
+            return;
+        let timer = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(timer);
+    }, [phase.kind]);
+    // Start the merge job each time the dialog opens
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally only re-runs on open change
+    useEffect(() => {
+        if (!open)
+            return;
+        setPhase({ kind: "preparing" });
+        doneRef.current = false;
+        let cancelled = false;
+        let es = null;
+        async function start() {
+            try {
+                let mergerId = await getMergerId();
+                if (cancelled)
+                    return;
+                let response = await fetch(`/api/ob/merger/start/${mergerId}/${mergeType}`, { method: "POST" });
+                if (!response.ok)
+                    throw new Error(`${response.status} ${response.statusText}`);
+                let { jobId } = await response.json();
+                if (cancelled)
+                    return;
+                es = new EventSource(`/api/ob/merger/events/${jobId}`);
+                esRef.current = es;
+                es.addEventListener("progress", (e) => {
+                    let d = JSON.parse(e.data);
+                    setPhase((prev) => ({
+                        kind: "processing",
+                        completed: d.completed,
+                        total: d.total,
+                        currentFile: d.currentFile ?? "",
+                        startedAt: prev.kind === "processing" ? prev.startedAt : Date.now(),
+                    }));
+                    setNow(Date.now());
+                });
+                es.addEventListener("done", (e) => {
+                    doneRef.current = true;
+                    es?.close();
+                    let d = JSON.parse(e.data);
+                    setPhase({ kind: "completed", jobId, fileName: d.fileName ?? "" });
+                    window.open(`/api/ob/merger/download/${jobId}`);
+                });
+                // Catches both server-sent "event: error" and connection errors.
+                // After a "done" event the server closes the stream, which also fires error —
+                // doneRef guards against treating that as a failure.
+                es.addEventListener("error", (e) => {
+                    if (doneRef.current)
+                        return;
+                    es?.close();
+                    let message = getLocalizedString("Unknown error");
+                    let data = e.data;
+                    if (data) {
+                        try {
+                            message = JSON.parse(data).message ?? message;
+                        }
+                        catch { }
+                    }
+                    setPhase({ kind: "failed", error: message });
+                });
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setPhase({ kind: "failed", error: err?.message ?? String(err) });
+                }
+            }
+        }
+        start();
+        return () => {
+            cancelled = true;
+            es?.close();
+            esRef.current = null;
+        };
+    }, [open]);
+    function handleClose() {
+        esRef.current?.close();
+        esRef.current = null;
+        onClose();
+    }
+    let pct = 0;
+    let remaining = null;
+    if (phase.kind === "processing" && phase.total > 0) {
+        pct = Math.round((phase.completed / phase.total) * 100);
+        if (phase.completed > 0) {
+            let elapsed = now - phase.startedAt;
+            let msPerFile = elapsed / phase.completed;
+            let remainingMs = msPerFile * (phase.total - phase.completed);
+            remaining = formatRemaining(remainingMs);
+        }
+    }
+    let title = phase.kind === "completed"
+        ? getLocalizedString("Merge complete")
+        : phase.kind === "failed"
+            ? getLocalizedString("Merge failed")
+            : getLocalizedString("Merging drawings");
+    let canClose = phase.kind === "completed" || phase.kind === "failed";
+    return (_jsxs(ResponsiveDialog, { open: open, onClose: canClose ? handleClose : undefined, title: title, maxWidth: "sm", fullWidth: true, slotProps: {
+            transition: {
+                mountOnEnter: true,
+                unmountOnExit: true,
+            },
+        }, children: [_jsxs(Box, { sx: { px: 3, pb: 1 }, children: [(phase.kind === "preparing" || phase.kind === "processing") && (_jsx(LinearProgress, { variant: phase.kind === "preparing" || phase.total === 0 ? "indeterminate" : "determinate", value: pct, sx: { mb: 1.5 } })), phase.kind === "preparing" && (_jsx(Typography, { variant: "body2", sx: {
+                            color: "text.secondary",
+                        }, children: getLocalizedString("Starting merge job…") })), phase.kind === "processing" && (_jsxs(_Fragment, { children: [_jsxs(Typography, { variant: "body2", children: [phase.completed, " / ", phase.total, " ", getLocalizedString("files"), remaining && (_jsxs(Typography, { component: "span", variant: "body2", sx: {
+                                            color: "text.secondary",
+                                        }, children: [" ", "\u2014 ", remaining] }))] }), phase.currentFile && (_jsx(Typography, { variant: "body2", noWrap: true, title: phase.currentFile, sx: {
+                                    color: "text.secondary",
+                                    mt: 0.5,
+                                }, children: phase.currentFile }))] })), phase.kind === "completed" && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body2", sx: {
+                                    color: "success.main",
+                                }, children: getLocalizedString("Download started. You can close this dialog.") }), _jsxs(Typography, { variant: "body2", sx: {
+                                    color: "text.secondary",
+                                    mt: 1,
+                                }, children: [getLocalizedString("If the file did not open automatically, "), " ", _jsx(Link, { href: `/api/ob/merger/download/${phase.jobId}`, target: "_blank", rel: "noopener noreferrer", children: getLocalizedString("click here to open it") }), "."] })] })), phase.kind === "failed" && (_jsx(Typography, { variant: "body2", color: "error", children: phase.error }))] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: handleClose, disabled: !canClose, children: getLocalizedString("Close") }) })] }));
+}

package/es/components/PdfViewer/PdfViewer.css

@@ -0,0 +1,12 @@
+.pdfViewerContainer {
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+
+.pdfViewerContent {
+	width: max-content;
+	/* Center the PDF horizontally within the scroll container */
+	margin-left: auto;
+	margin-right: auto;
+}

package/es/components/PdfViewer/PdfViewer.d.ts

@@ -0,0 +1,7 @@
+import "./PdfViewer.css";
+type PdfViewerProps = {
+    url?: string;
+    file?: string | Blob | ArrayBuffer;
+};
+export declare function PdfViewer({ url, file }: PdfViewerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/PdfViewer/PdfViewer.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import "./PdfViewer.css";
+// Use new URL(..., import.meta.url) — understood by Rolldown/Rollup on all platforms,
+// including Windows where ?raw query strings are invalid in file paths.
+pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString();
+export function PdfViewer({ url, file }) {
+    let [numPages, setNumPages] = useState(0);
+    let [error, setError] = useState(null);
+    let containerRef = useRef(null);
+    let [containerWidth, setContainerWidth] = useState(0);
+    let [containerHeight, setContainerHeight] = useState(0);
+    let [scale, setScale] = useState(1);
+    let [naturalPageSize, setNaturalPageSize] = useState(null);
+    const pages = useMemo(() => Array.from({ length: numPages }, (_, i) => i + 1), [numPages]);
+    // Observe container size to support fit-to-page calculations
+    useEffect(() => {
+        let el = containerRef.current;
+        if (!el)
+            return;
+        let ro = new ResizeObserver((entries) => {
+            let cr = entries[0].contentRect;
+            setContainerWidth(Math.max(1, Math.floor(cr.width)));
+            setContainerHeight(Math.max(1, Math.floor(cr.height)));
+        });
+        ro.observe(el);
+        setContainerWidth(Math.max(1, Math.floor(el.clientWidth)));
+        setContainerHeight(Math.max(1, Math.floor(el.clientHeight)));
+        return () => ro.disconnect();
+    }, []);
+    // Intercept browser zoom gestures and zoom the PDF instead
+    useEffect(() => {
+        let el = containerRef.current;
+        if (!el)
+            return;
+        const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+        const zoomBy = (delta) => {
+            // Smooth exponential zoom for trackpads/mice
+            const factor = Math.exp(delta * 0.001);
+            setScale((s) => clamp(s * factor, 0.25, 5));
+        };
+        const onWheel = (e) => {
+            if (e.ctrlKey) {
+                // ctrl+wheel is usually browser zoom; override for PDF zoom
+                e.preventDefault();
+                zoomBy(-e.deltaY);
+            }
+        };
+        const onKeyDown = (e) => {
+            if (!e.ctrlKey)
+                return;
+            const key = e.key;
+            if (key === "+" || key === "=" || key === "Add") {
+                e.preventDefault();
+                setScale((s) => clamp(s * 1.1, 0.25, 5));
+            }
+            else if (key === "-" || key === "_" || key === "Subtract") {
+                e.preventDefault();
+                setScale((s) => clamp(s / 1.1, 0.25, 5));
+            }
+            else if (key === "0") {
+                e.preventDefault();
+                setScale(1);
+            }
+        };
+        el.addEventListener("wheel", onWheel, { passive: false });
+        window.addEventListener("keydown", onKeyDown, { passive: false });
+        return () => {
+            el.removeEventListener("wheel", onWheel);
+            window.removeEventListener("keydown", onKeyDown);
+        };
+    }, []);
+    // When source changes, reset auto-fit baseline
+    useEffect(() => {
+        setNaturalPageSize(null);
+        setScale(1);
+    }, [url, file]);
+    // Compute base width to fit full page into container, then apply zoom scale.
+    // If we don't yet know page's natural size, default to fit-to-width.
+    const fitBaseWidth = useMemo(() => {
+        if (!naturalPageSize)
+            return containerWidth || 1000;
+        const { w, h } = naturalPageSize;
+        if (w <= 0 || h <= 0)
+            return containerWidth || 1000;
+        // width to fit by height: containerHeight * (w/h)
+        const widthByHeight = (containerHeight || 1000) * (w / h);
+        // Fit to page means respecting both constraints
+        return Math.min(Math.max(1, containerWidth || 1000), Math.max(1, widthByHeight));
+    }, [naturalPageSize, containerWidth, containerHeight]);
+    const pageWidth = Math.max(1, Math.round(fitBaseWidth * scale));
+    return (_jsxs("div", { ref: containerRef, className: "pdfViewerContainer", children: [_jsx("div", { className: "pdfViewerContent", children: _jsx(Document, { file: file ?? url, onLoadSuccess: ({ numPages }) => setNumPages(numPages), onLoadError: (e) => setError(e?.message ?? "Failed to load PDF"), children: pages.map((pageNumber) => (_jsx(Page, { pageNumber: pageNumber, renderTextLayer: false, renderAnnotationLayer: false, width: pageWidth, onLoadSuccess: (p) => {
+                            // Capture natural page size once for fit-to-page calculation
+                            try {
+                                // pdf.js viewport at scale 1
+                                const vp = p.getViewport({ scale: 1 });
+                                const w = Number(vp?.width) || Number(p.width) || 0;
+                                const h = Number(vp?.height) || Number(p.height) || 0;
+                                if (w > 0 && h > 0 && !naturalPageSize) {
+                                    setNaturalPageSize({ w, h });
+                                }
+                            }
+                            catch {
+                                // Ignore, fallback to fit-to-width when unknown
+                            }
+                        } }, pageNumber))) }) }), error && _jsxs("div", { style: { color: "#b00020", padding: 8 }, children: ["Error loading PDF: ", error] })] }));
+}

package/es/components/PdfViewer/index.d.ts

@@ -0,0 +1 @@
+export { PdfViewer } from "./PdfViewer.js";

package/es/components/PdfViewer/index.js

@@ -0,0 +1 @@
+export { PdfViewer } from "./PdfViewer.js";

package/es/index.d.ts

@@ -2,8 +2,11 @@ export { Checkbox, type CheckboxProps } from "./components/Checkbox/index.js";
 export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
 export { DateNavigator } from "./components/DateNavigator/index.js";
 export * from "./components/FilePond.js";
+export * from "./components/ImageEditor/index.js";
 export { Card, LinkedList, LinkedListItem } from "./components/LinkedCardList/index.js";
+export { MergeProgressDialog, type MergeProgressDialogProps } from "./components/MergeProgressDialog/index.js";
 export { BannerImage as PageBannerImage, type BannerImageProps, PageBanner, type PageBannerProps, Tab as PageBannerTab, TabList as PageBannerTabList, type TabListProps as PageBannerTabListProps, type TabProps as PageBannerTabProps, Title as PageBannerTitle, type TitleProps as PageBannerTitleProps, } from "./components/PageBanner/index.js";
+export * from "./components/PdfViewer/index.js";
 export { Portal } from "./components/Portal/index.js";
 export { ProgressBar } from "./components/ProgressBar/index.js";
 export { Sidebar, type SidebarProps } from "./components/Sidebar/index.js";

package/es/index.js

@@ -2,8 +2,11 @@ export { Checkbox } from "./components/Checkbox/index.js";
 export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
 export { DateNavigator } from "./components/DateNavigator/index.js";
 export * from "./components/FilePond.js";
+export * from "./components/ImageEditor/index.js";
 export { Card, LinkedList, LinkedListItem } from "./components/LinkedCardList/index.js";
+export { MergeProgressDialog } from "./components/MergeProgressDialog/index.js";
 export { BannerImage as PageBannerImage, PageBanner, Tab as PageBannerTab, TabList as PageBannerTabList, Title as PageBannerTitle, } from "./components/PageBanner/index.js";
+export * from "./components/PdfViewer/index.js";
 export { Portal } from "./components/Portal/index.js";
 export { ProgressBar } from "./components/ProgressBar/index.js";
 export { Sidebar } from "./components/Sidebar/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/synergi-react",
-  "version": "2.3.8",
+  "version": "2.4.0",
   "description": "Standalone React component for SynergiWeb and Partner Portal",
   "type": "module",
   "exports": {
@@ -38,9 +38,12 @@
     "filepond-plugin-image-transform": "^3.8.7",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "5.4.296",
+    "react-pdf": "^10.2.0",
     "@olenbetong/appframe-core": "2.11.10",
-    "@olenbetong/appframe-mui": "6.0.12",
-    "@olenbetong/appframe-react": "1.21.24"
+    "@olenbetong/appframe-react": "1.21.25",
+    "@olenbetong/appframe-mui": "6.1.0"
   },
   "repository": {
     "type": "git",
@@ -54,6 +57,8 @@
     ]
   },
   "devDependencies": {
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
     "replace-in-files": "^3.0.0"
   },
   "optionalDependencies": {},

package/src/components/FilePond.tsx

@@ -22,7 +22,7 @@ import FilePondPluginImageResize from "filepond-plugin-image-resize";
 import FilePondPluginImageTransform from "filepond-plugin-image-transform";
 import { type RefObject, useEffect, useMemo, useRef } from "react";
 
-export { registerPlugin, FileStatus };
+export { FileStatus, registerPlugin };
 
 registerPlugin(
 	FilePondPluginImageExifOrientation,