@olenbetong/synergi-react 2.3.7 → 2.3.9

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/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,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import rawPdfWorkerSrc from "pdfjs-dist/build/pdf.worker.min.mjs?raw";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import "./PdfViewer.css";
+// Clear any leftover workerPort from previous mounts/HMR to avoid using a terminated worker
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const opts = pdfjs.GlobalWorkerOptions;
+if (opts.workerPort && typeof opts.workerPort === "object" && typeof opts.workerPort.terminate === "function") {
+    try {
+        opts.workerPort.terminate();
+    }
+    catch { }
+}
+// Remove the property entirely to avoid type checks on undefined
+try {
+    delete opts.workerPort;
+}
+catch {
+    opts.workerPort = null;
+}
+// Provide a dedicated Worker instance via blob; pdf.js prefers workerPort over workerSrc
+try {
+    const blob = new Blob([rawPdfWorkerSrc], { type: "text/javascript" });
+    const worker = new Worker(URL.createObjectURL(blob), { type: "module" });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    pdfjs.GlobalWorkerOptions.workerPort = worker;
+}
+catch {
+    // Ignore – pdf.js may fallback to fake worker in extreme cases
+}
+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

@@ -11,3 +11,5 @@ export { Spinner, type SpinnerProps } from "./components/Spinner/index.js";
 export { SplitContainer, type SplitContainerProps } from "./components/SplitContainer/index.js";
 export { ValueToggleGroup, type ValueToggleGroupProps } from "./components/ValueToggleGroup/index.js";
 export { useTranslation } from "./useTranslation/index.js";
+export * from "./components/ImageEditor/index.js";
+export * from "./components/PdfViewer/index.js";

package/es/index.js

@@ -11,3 +11,5 @@ export { Spinner } from "./components/Spinner/index.js";
 export { SplitContainer } from "./components/SplitContainer/index.js";
 export { ValueToggleGroup } from "./components/ValueToggleGroup/index.js";
 export { useTranslation } from "./useTranslation/index.js";
+export * from "./components/ImageEditor/index.js";
+export * from "./components/PdfViewer/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/synergi-react",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "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-react": "1.21.23",
-    "@olenbetong/appframe-mui": "6.0.11"
+    "@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/ImageEditor/CropCanvas.tsx

@@ -0,0 +1,100 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+
+import type { Quad } from "./useEdgeDetection.js";
+
+const MAX_DISPLAY_WIDTH = 1600;
+
+export interface CropCanvasHandle {
+	/** Returns a canvas with the clean image (no overlay) for use with cv.imread. */
+	getCleanCanvas(): HTMLCanvasElement | null;
+}
+
+interface Props {
+	imageUrl: string;
+	corners: Quad;
+	onReady?: (canvas: HTMLCanvasElement, width: number, height: number) => void;
+}
+
+function drawOverlay(ctx: CanvasRenderingContext2D, width: number, height: number, corners: Quad) {
+	let [tl, tr, br, bl] = corners;
+
+	ctx.save();
+
+	// Dark overlay with polygon cutout (even-odd fill rule creates a "window")
+	ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+	ctx.beginPath();
+	ctx.rect(0, 0, width, height);
+	ctx.moveTo(tl.x, tl.y);
+	ctx.lineTo(tr.x, tr.y);
+	ctx.lineTo(br.x, br.y);
+	ctx.lineTo(bl.x, bl.y);
+	ctx.closePath();
+	ctx.fill("evenodd");
+
+	// Selection border
+	ctx.strokeStyle = "#2196f3";
+	ctx.lineWidth = Math.max(2, width * 0.003);
+	ctx.beginPath();
+	ctx.moveTo(tl.x, tl.y);
+	ctx.lineTo(tr.x, tr.y);
+	ctx.lineTo(br.x, br.y);
+	ctx.lineTo(bl.x, bl.y);
+	ctx.closePath();
+	ctx.stroke();
+
+	ctx.restore();
+}
+
+/**
+ * Renders the image on a canvas with a perspective-crop overlay.
+ * Exposes `getImageData()` so callers can extract pixels for off-thread processing.
+ */
+export let CropCanvas = forwardRef<CropCanvasHandle, Props>(function CropCanvas({ imageUrl, corners, onReady }, ref) {
+	let canvasRef = useRef<HTMLCanvasElement>(null);
+	let imageRef = useRef<HTMLImageElement | null>(null);
+
+	useEffect(() => {
+		let img = new Image();
+		img.onload = () => {
+			imageRef.current = img;
+			let canvas = canvasRef.current;
+			if (!canvas) return;
+
+			let scale = Math.min(1, MAX_DISPLAY_WIDTH / img.naturalWidth);
+			canvas.width = Math.round(img.naturalWidth * scale);
+			canvas.height = Math.round(img.naturalHeight * scale);
+
+			let ctx = canvas.getContext("2d");
+			ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
+			drawOverlay(ctx!, canvas.width, canvas.height, corners);
+			onReady?.(canvas, canvas.width, canvas.height);
+		};
+		img.src = imageUrl;
+	}, [imageUrl]); // eslint-disable-line react-hooks/exhaustive-deps
+
+	// Redraw overlay whenever corners change
+	useEffect(() => {
+		let canvas = canvasRef.current;
+		let img = imageRef.current;
+		if (!canvas || !img) return;
+		let ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+		drawOverlay(ctx, canvas.width, canvas.height, corners);
+	}, [corners]);
+
+	useImperativeHandle(ref, () => ({
+		getCleanCanvas(): HTMLCanvasElement | null {
+			let canvas = canvasRef.current;
+			let img = imageRef.current;
+			if (!canvas || !img) return null;
+			let clean = document.createElement("canvas");
+			clean.width = canvas.width;
+			clean.height = canvas.height;
+			clean.getContext("2d")?.drawImage(img, 0, 0, canvas.width, canvas.height);
+			return clean;
+		},
+	}));
+
+	return <canvas ref={canvasRef} style={{ display: "block", maxWidth: "100%", height: "auto" }} />;
+});

package/src/components/ImageEditor/DragHandle.tsx

@@ -0,0 +1,65 @@
+import { useZoom } from "./plugins/zoomPlugin/ZoomContext.js";
+
+interface Props {
+	x: number;
+	y: number;
+	/** Called with new position in pixels (relative to container). */
+	onChange: (x: number, y: number) => void;
+	containerWidth: number;
+	containerHeight: number;
+}
+
+/**
+ * Absolutely-positioned draggable corner handle.
+ * Position is in CSS pixels relative to the nearest `position: relative` ancestor.
+ */
+export function DragHandle({ x, y, onChange, containerWidth, containerHeight }: Props) {
+	let { zoom } = useZoom();
+
+	function onPointerDown(e: React.PointerEvent<HTMLDivElement>) {
+		e.currentTarget.setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: React.PointerEvent<HTMLDivElement>) {
+		if (!(e.buttons & 1)) return;
+
+		let container = e.currentTarget.parentElement;
+		if (!container) return;
+
+		// getBoundingClientRect() returns screen-space coords (affected by CSS transform/zoom).
+		// Divide by zoom to convert back to CSS-pixel space (the space onChange expects).
+		let rect = container.getBoundingClientRect();
+		let newX = Math.max(0, Math.min(containerWidth, (e.clientX - rect.left) / zoom));
+		let newY = Math.max(0, Math.min(containerHeight, (e.clientY - rect.top) / zoom));
+		onChange(newX, newY);
+	}
+
+	return (
+		<div
+			tabIndex={0}
+			role="slider"
+			aria-label="Corner handle"
+			aria-valuenow={Math.round(x)}
+			aria-valuemin={0}
+			aria-valuemax={containerWidth}
+			className="drag-handle"
+			style={{
+				position: "absolute",
+				left: x,
+				top: y,
+				transform: "translate(-50%, -50%)",
+				width: 28,
+				height: 28,
+				borderRadius: "50%",
+				background: "rgba(33, 150, 243, 0.9)",
+				border: "3px solid white",
+				boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+				cursor: "grab",
+				touchAction: "none",
+				zIndex: 10,
+			}}
+			onPointerDown={onPointerDown}
+			onPointerMove={onPointerMove}
+		/>
+	);
+}