@georeferencing/react 0.0.0-stage → 0.1.0

package/dist/panels/AlignmentPanel.d.ts

@@ -0,0 +1,19 @@
+import type { GeoreferencerController } from "@georeferencing/core";
+import type { Translate } from "../localization.js";
+/**
+ * Model selection, fit feedback and explicit confirmation/review controls backed by the authoritative controller.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export declare function AlignmentPanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t, controls, }: {
+    /** Shared authoritative editor controller; the panel does not own its lifecycle. */
+    controller: GeoreferencerController;
+    /** Optional translation function; defaults to returning English messages unchanged. */
+    t?: Translate;
+    /** Show transformation/preview controls; disable when already provided by a guided toolbar. */
+    controls?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/panels/AlignmentPanel.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { coordinateUnits, MODELS } from "@georeferencing/core";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { identity } from "../localization.js";
+import { PreviewControls } from "./PreviewControls.js";
+/**
+ * Model selection, fit feedback and explicit confirmation/review controls backed by the authoritative controller.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export function AlignmentPanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t = identity, controls = true, }) {
+    const s = useGeoreferencer(controller), d = s.document;
+    return (_jsxs("section", { children: [_jsx("h2", { children: t("Alignment") }), controls && _jsx(PreviewControls, { controller: controller, t: t }), controls && (_jsxs("label", { children: [t("Transformation"), _jsx("select", { disabled: !d.sourceImage || s.mode === "draw", value: d.model, onChange: (e) => controller.setModel(e.target.value), children: Object.entries(MODELS).map(([key, value]) => (_jsxs("option", { value: key, children: [t(value.label), " \u00B7 ", value.minimum, "+"] }, key))) })] })), _jsx("p", { className: "rg-fit-summary", children: s.fitting === "running"
+                    ? t("Fitting & rendering…")
+                    : s.fit
+                        ? `${t("RMSE")} ${s.fit.rmse.toPrecision(4)} ${coordinateUnits(d.workingCrs)} · ${d.workingCrs}`
+                        : t("Add distributed points to fit the image.") }), d.workingCrs === "EPSG:3857" && (_jsx("small", { children: t("Web Mercator units are projected metres, not ground distances.") })), _jsx("small", { children: t("RMSE = √(Σ‖T(p) − q‖² / enabled points). Training residuals do not measure independent accuracy. Preview uses reduced-resolution pixels.") }), _jsxs("label", { className: "rg-inline", children: [_jsx("input", { type: "checkbox", checked: s.visible, onChange: (e) => controller.setDisplay({ visible: e.target.checked }) }), t("Show aligned image")] }), _jsxs("label", { children: [t("Overlay opacity"), _jsx("input", { "aria-label": t("Overlay opacity"), type: "range", min: "0", max: "1", step: "0.05", value: s.opacity, onChange: (e) => controller.setDisplay({ opacity: Number(e.target.value) }) })] }), s.mode === "draw" ? (_jsx("button", { type: "button", onClick: () => controller.returnToAlignment(), children: t("Return to alignment") })) : (_jsx("button", { type: "button", className: "rg-primary", disabled: !s.fit || s.fitRevision !== d.alignmentRevision, onClick: () => controller.confirm(), children: t(controller.options.digitizing
+                    ? "Confirm alignment and draw"
+                    : "Confirm alignment") })), d.confirmedAlignmentRevision === d.alignmentRevision && (_jsxs("p", { children: [t("Alignment confirmed"), " \u00B7 r", d.alignmentRevision] }))] }));
+}

package/dist/panels/FeaturePanel.d.ts

@@ -0,0 +1,28 @@
+import type { Features, GeoreferencerController } from "@georeferencing/core";
+import type { ReactNode } from "react";
+import type { Translate } from "../localization.js";
+/**
+ * Opt-in digitizing controls, feature deletion and host property editing. Returns null when digitizing is disabled; controller.save performs explicit persistence.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export declare function FeaturePanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/**
+ * Render a property editor for the frozen feature. Use update to commit replacement
+ * JSON properties without mutating feature identity or geometry.
+ */
+propertyEditor, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t, }: {
+    /** Shared authoritative editor controller; the panel does not own its lifecycle. */
+    controller: GeoreferencerController;
+    /**
+     * Render a property editor for the frozen feature. Use update to commit replacement
+     * JSON properties without mutating feature identity or geometry.
+     */
+    propertyEditor?: (feature: Features["features"][number], update: (properties: Record<string, unknown>) => void) => ReactNode;
+    /** Optional translation function; defaults to returning English messages unchanged. */
+    t?: Translate;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/panels/FeaturePanel.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { validateFeatures } from "@georeferencing/core";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { identity } from "../localization.js";
+/**
+ * Opt-in digitizing controls, feature deletion and host property editing. Returns null when digitizing is disabled; controller.save performs explicit persistence.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export function FeaturePanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/**
+ * Render a property editor for the frozen feature. Use update to commit replacement
+ * JSON properties without mutating feature identity or geometry.
+ */
+propertyEditor, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t = identity, }) {
+    const s = useGeoreferencer(controller), d = s.document;
+    if (!controller.options.digitizing)
+        return null;
+    return (_jsxs("section", { children: [_jsxs("h2", { children: [t("Drawings"), " ", _jsx("small", { children: d.features.features.length })] }), validateFeatures(d.features).map((error) => (_jsx("p", { className: "rg-error", children: t(error) }, error))), _jsx("div", { className: "rg-toolbar", children: ["Point", "LineString", "Polygon", "modify", "navigate"].map((tool) => (_jsx("button", { type: "button", disabled: s.mode !== "draw", "aria-pressed": s.tool === tool, onClick: () => controller.setTool(tool), children: t(tool === "modify"
+                        ? "Edit vertices"
+                        : tool === "navigate"
+                            ? "Pan map"
+                            : tool) }, tool))) }), _jsx("small", { children: t("Double-click to finish lines/polygons. Escape cancels. Select a feature to edit vertices; Alt-click a vertex to remove it.") }), d.features.features.map((f, i) => (_jsxs("div", { className: "rg-feature", children: [_jsxs("span", { children: [i + 1, " \u00B7 ", f.geometry.type, " \u00B7 ", String(f.id).slice(0, 8)] }), _jsx("button", { type: "button", disabled: s.mode !== "draw", "aria-label": `${t("Delete feature")} ${i + 1}`, onClick: () => controller.deleteFeature(String(f.id)), children: "\u00D7" }), propertyEditor?.(f, (p) => controller.updateProperties(String(f.id), p))] }, f.id))), d.features.features.length > 0 &&
+                d.featuresReviewedAgainstAlignmentRevision !== d.alignmentRevision && (_jsx("button", { type: "button", disabled: d.confirmedAlignmentRevision !== d.alignmentRevision, onClick: () => controller.reviewFeatures(), children: t("I reviewed drawings against this alignment") })), _jsx("button", { type: "button", className: "rg-primary", disabled: !controller.options.onSave ||
+                    !controller.canSaveFeatures() ||
+                    s.saving === "running", onClick: () => void controller.save().catch((e) => controller.reportError(e)), children: t(s.saving === "running" ? "Saving…" : "Save features") }), _jsx("p", { "aria-live": "polite", children: s.saving === "succeeded"
+                    ? t(s.dirty
+                        ? "Snapshot saved; newer changes remain unsaved."
+                        : "Saved by host.")
+                    : s.saving === "failed"
+                        ? t("Save failed. Draft retained; retry when ready.")
+                        : !controller.options.onSave
+                            ? t("No host save adapter configured. Session export remains available.")
+                            : t("Saving features does not require raster export.") })] }));
+}

package/dist/panels/GcpPanel.d.ts

@@ -0,0 +1,17 @@
+import type { GeoreferencerController } from "@georeferencing/core";
+import type { Translate } from "../localization.js";
+/**
+ * Editable paired-point table with numeric entry, enabled state, deletion and residual diagnostics. Coordinates remain in original canonical pixels and each target's declared CRS.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export declare function GcpPanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t, }: {
+    /** Shared authoritative editor controller; the panel does not own its lifecycle. */
+    controller: GeoreferencerController;
+    /** Optional translation function; defaults to returning English messages unchanged. */
+    t?: Translate;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/panels/GcpPanel.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { NumberField } from "../components/fields.js";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { identity } from "../localization.js";
+/**
+ * Editable paired-point table with numeric entry, enabled state, deletion and residual diagnostics. Coordinates remain in original canonical pixels and each target's declared CRS.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export function GcpPanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t = identity, }) {
+    const s = useGeoreferencer(controller), [entry, setEntry] = useState([0, 0, 0, 0]);
+    const locked = s.mode !== "align" || !s.document.sourceImage;
+    const edit = (p, index, value) => {
+        const image = [...p.image], target = [...p.target];
+        if (index < 2)
+            image[index] = value;
+        else
+            target[index - 2] = value;
+        controller.updateGcp(p.id, { image, target });
+    };
+    return (_jsxs("section", { className: "rg-gcp-panel", children: [_jsxs("div", { className: "rg-panel-heading", children: [_jsx("h2", { children: t("Control points") }), _jsxs("span", { children: [s.document.gcps.filter((p) => p.enabled).length, " ", t("enabled")] })] }), _jsxs("div", { className: "rg-toolbar", children: [_jsx("button", { type: "button", disabled: locked, "aria-pressed": s.tool === "gcp", onClick: () => controller.setTool(s.tool === "gcp" ? "navigate" : "gcp"), children: t("Add / move points") }), _jsx("button", { type: "button", disabled: !s.pendingImagePoint, onClick: () => controller.cancelPending(), children: t("Cancel pair") })] }), _jsx("p", { className: "rg-hint", children: t(s.pendingImagePoint
+                    ? "Pick the matching map location, or enter target coordinates below."
+                    : "Pick image first, map second. Shift-drag to pan while adding points.") }), _jsx("div", { className: "rg-table-scroll", children: _jsxs("table", { children: [_jsx("caption", { children: t("Original image pixels → target coordinates. Residuals are T(image) − target.") }), _jsx("thead", { children: _jsx("tr", { children: [
+                                    "Use",
+                                    "#",
+                                    "Image X",
+                                    "Image Y",
+                                    "Target X",
+                                    "Target Y",
+                                    "Target CRS",
+                                    "Residual",
+                                    "Pixels",
+                                    "",
+                                ].map((h) => (_jsx("th", { scope: "col", children: t(h) }, h))) }) }), _jsx("tbody", { children: s.document.gcps.map((p) => {
+                                const r = s.fit?.residuals.find((r) => r.id === p.id);
+                                return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { "aria-label": `${t("Enable point")} ${p.label}`, type: "checkbox", disabled: locked, checked: p.enabled, onChange: (e) => controller.updateGcp(p.id, {
+                                                    enabled: e.target.checked,
+                                                }) }) }), _jsx("th", { scope: "row", children: p.label }), [...p.image, ...p.target].map((v, i) => (_jsx("td", { children: _jsx(NumberField, { label: `${t(["Image X", "Image Y", "Target X", "Target Y"][i])} ${p.label}`, value: v, disabled: locked, change: (n) => edit(p, i, n) }) }, ["image-x", "image-y", "target-x", "target-y"][i]))), _jsx("td", { children: p.crs }), _jsx("td", { title: r?.vector.join(", "), children: r ? r.distance.toPrecision(4) : "—" }), _jsx("td", { children: r?.pixels?.toPrecision(4) ?? "—" }), _jsx("td", { children: _jsx("button", { type: "button", "aria-label": `${t("Delete point")} ${p.label}`, disabled: locked, onClick: () => controller.removeGcp(p.id), children: "\u00D7" }) })] }, p.id));
+                            }) })] }) }), _jsxs("details", { children: [_jsx("summary", { children: t("Enter coordinates manually") }), _jsx("div", { className: "rg-coordinate-entry", children: ["Image X", "Image Y", "Target X", "Target Y"].map((label, i) => (_jsxs("label", { children: [t(label), _jsx(NumberField, { label: `${t("New")} ${t(label)}`, value: i < 2 && s.pendingImagePoint
+                                        ? s.pendingImagePoint[i]
+                                        : entry[i], change: (n) => {
+                                        if (i < 2 && s.pendingImagePoint) {
+                                            const p = [...s.pendingImagePoint];
+                                            p[i] = n;
+                                            controller.setPendingPoint(p);
+                                        }
+                                        else
+                                            setEntry((v) => v.map((x, j) => (i === j ? n : x)));
+                                    } })] }, label))) }), _jsxs("p", { children: [t("Target CRS"), ": ", s.document.workingCrs] }), _jsx("button", { type: "button", disabled: locked, onClick: () => {
+                            try {
+                                controller.addGcp(s.pendingImagePoint ?? [entry[0], entry[1]], [
+                                    entry[2],
+                                    entry[3],
+                                ]);
+                            }
+                            catch (e) {
+                                controller.reportError(e);
+                            }
+                        }, children: t("Add coordinate pair") })] })] }));
+}

package/dist/panels/ImagePanel.d.ts

@@ -0,0 +1,17 @@
+import type { GeoreferencerController } from "@georeferencing/core";
+import type { Translate } from "../localization.js";
+/**
+ * Image selection/drop, independent image navigation and source GCP picking. Display stretch affects the image panel only; it does not change export pixels.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export declare function ImagePanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t, }: {
+    /** Shared authoritative editor controller; the panel does not own its lifecycle. */
+    controller: GeoreferencerController;
+    /** Optional translation function; defaults to returning English messages unchanged. */
+    t?: Translate;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/panels/ImagePanel.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { identity } from "../localization.js";
+/**
+ * Image selection/drop, independent image navigation and source GCP picking. Display stretch affects the image panel only; it does not change export pixels.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export function ImagePanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t = identity, }) {
+    const s = useGeoreferencer(controller), image = s.document.sourceImage, svg = useRef(null);
+    const view = s.imageView ?? [
+        0, 0, 100, 100,
+    ];
+    const setView = (next) => controller.setImageView(typeof next === "function" ? next(view) : next);
+    const [brightness, setBrightness] = useState(1), [contrast, setContrast] = useState(1), [histogram, setHistogram] = useState([]), [stretch, setStretch] = useState([
+        [0, 255],
+        [0, 255],
+        [0, 255],
+    ]);
+    const filterId = `rg-stretch-${useId().replace(/:/g, "")}`;
+    const displayPixels = useRef(null);
+    const stretchHistogram = (local) => {
+        const pixels = displayPixels.current;
+        if (!pixels || !image)
+            return;
+        const x0 = local
+            ? Math.max(0, Math.floor((view[0] * pixels.width) / image.width))
+            : 0, y0 = local
+            ? Math.max(0, Math.floor((view[1] * pixels.height) / image.height))
+            : 0, x1 = local
+            ? Math.min(pixels.width, Math.ceil(((view[0] + view[2]) * pixels.width) / image.width))
+            : pixels.width, y1 = local
+            ? Math.min(pixels.height, Math.ceil(((view[1] + view[3]) * pixels.height) / image.height))
+            : pixels.height;
+        const ranges = [
+            [255, 0],
+            [255, 0],
+            [255, 0],
+        ], bins = Array(32).fill(0);
+        for (let y = y0; y < y1; y++)
+            for (let x = x0; x < x1; x++) {
+                const i = (y * pixels.width + x) * 4;
+                if (!pixels.data[i + 3])
+                    continue;
+                for (let c = 0; c < 3; c++) {
+                    ranges[c][0] = Math.min(ranges[c][0], pixels.data[i + c]);
+                    ranges[c][1] = Math.max(ranges[c][1], pixels.data[i + c]);
+                }
+                bins[Math.min(31, Math.floor((pixels.data[i] + pixels.data[i + 1] + pixels.data[i + 2]) / 24))]++;
+            }
+        setStretch(ranges.map(([lo, hi]) => (hi > lo ? [lo, hi] : [0, 255])));
+        setHistogram(bins);
+    };
+    const drag = useRef(null);
+    const [dragPoint, setDragPoint] = useState(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Reset only when the immutable source image ID changes, not on document clones during edits.
+    useEffect(() => {
+        if (image)
+            controller.setImageView([
+                -image.width * 0.04,
+                -image.height * 0.06,
+                image.width * 1.08,
+                image.height * 1.12,
+            ]);
+        setBrightness(1);
+        setContrast(1);
+        setStretch([
+            [0, 255],
+            [0, 255],
+            [0, 255],
+        ]);
+    }, [image?.id, controller]);
+    useEffect(() => {
+        if (!s.imageUrl) {
+            setHistogram([]);
+            return;
+        }
+        let disposed = false;
+        const img = new Image();
+        img.onload = () => {
+            if (disposed)
+                return;
+            const canvas = document.createElement("canvas");
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext("2d");
+            ctx.drawImage(img, 0, 0);
+            displayPixels.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = displayPixels.current.data, bins = Array(32).fill(0);
+            for (let i = 0; i < data.length; i += 4)
+                if (data[i + 3])
+                    bins[Math.min(31, Math.floor((data[i] + data[i + 1] + data[i + 2]) / 24))]++;
+            setHistogram(bins);
+            canvas.width = 0;
+        };
+        img.src = s.imageUrl;
+        return () => {
+            disposed = true;
+            displayPixels.current = null;
+            img.onload = null;
+            img.src = "";
+        };
+    }, [s.imageUrl]);
+    const point = (e) => {
+        const matrix = svg.current?.getScreenCTM();
+        if (!matrix)
+            return [0, 0];
+        const p = new DOMPoint(e.clientX, e.clientY).matrixTransform(matrix.inverse());
+        return [p.x, p.y];
+    };
+    const zoom = (factor, center = [view[0] + view[2] / 2, view[1] + view[3] / 2]) => setView((v) => [
+        center[0] + (v[0] - center[0]) * factor,
+        center[1] + (v[1] - center[1]) * factor,
+        Math.max(1, v[2] * factor),
+        Math.max(1, v[3] * factor),
+    ]);
+    const down = (e) => {
+        if (!image)
+            return;
+        e.preventDefault();
+        e.currentTarget.focus({ preventScroll: true });
+        const p = point(e);
+        if (s.tool === "gcp" && e.button === 0 && !e.shiftKey) {
+            if (p[0] >= 0 && p[1] >= 0 && p[0] <= image.width && p[1] <= image.height)
+                controller.setPendingPoint(p);
+            return;
+        }
+        drag.current = {
+            start: [e.clientX, e.clientY],
+            view,
+            pointerId: e.pointerId,
+        };
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    return (_jsxs("section", { className: "rg-image-panel", "aria-label": t("Source image"), onDragOver: (e) => e.preventDefault(), onDrop: (e) => {
+            e.preventDefault();
+            const file = e.dataTransfer.files[0];
+            if (file)
+                void controller.loadImage(file);
+        }, children: [_jsxs("div", { className: "rg-panel-heading", children: [_jsx("h2", { children: t("Source image") }), _jsxs("label", { className: "rg-file", children: [t(image ? "Replace image" : "Choose image"), _jsx("input", { "aria-label": t("Choose image"), type: "file", accept: "image/png,image/jpeg,image/webp,image/tiff,.tif,.tiff", onChange: (e) => {
+                                    const file = e.target.files?.[0];
+                                    if (file)
+                                        void controller.loadImage(file);
+                                    e.target.value = "";
+                                } })] })] }), image ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "rg-image-meta", children: [image.name, " \u00B7 ", image.width, " \u00D7 ", image.height, " px", image.georeferenced && (_jsxs("span", { children: [" ", "\u00B7 ", t("Existing georeferencing detected; not adopted")] }))] }), _jsxs("svg", { ref: svg, className: "rg-image-view", role: "img", 
+                        // biome-ignore lint/a11y/noNoninteractiveTabindex: This image viewer supports focused arrow-key panning and +/- zoom; numeric inputs provide GCP editing.
+                        tabIndex: 0, onKeyDown: (e) => {
+                            const steps = {
+                                ArrowLeft: [-0.1, 0],
+                                ArrowRight: [0.1, 0],
+                                ArrowUp: [0, -0.1],
+                                ArrowDown: [0, 0.1],
+                            };
+                            if (steps[e.key]) {
+                                e.preventDefault();
+                                const [x, y] = steps[e.key];
+                                setView([
+                                    view[0] + x * view[2],
+                                    view[1] + y * view[3],
+                                    view[2],
+                                    view[3],
+                                ]);
+                            }
+                            if (e.key === "+" || e.key === "=") {
+                                e.preventDefault();
+                                zoom(0.8);
+                            }
+                            if (e.key === "-") {
+                                e.preventDefault();
+                                zoom(1.25);
+                            }
+                        }, "aria-label": t("Image control point viewer; use numeric table for keyboard placement"), viewBox: view.join(" "), onPointerDown: down, onPointerMove: (e) => {
+                            const d = drag.current;
+                            if (!d)
+                                return;
+                            if (d.id) {
+                                d.point = point(e);
+                                setDragPoint({ id: d.id, point: d.point });
+                            }
+                            else {
+                                const scale = Math.max(view[2] / e.currentTarget.clientWidth, view[3] / e.currentTarget.clientHeight);
+                                setView([
+                                    d.view[0] - (e.clientX - d.start[0]) * scale,
+                                    d.view[1] - (e.clientY - d.start[1]) * scale,
+                                    d.view[2],
+                                    d.view[3],
+                                ]);
+                            }
+                        }, onPointerUp: (e) => {
+                            const d = drag.current;
+                            drag.current = null;
+                            if (d?.id && d.point)
+                                controller.updateGcp(d.id, { image: d.point });
+                            setDragPoint(null);
+                            if (e.currentTarget.hasPointerCapture(e.pointerId))
+                                e.currentTarget.releasePointerCapture(e.pointerId);
+                        }, onPointerCancel: () => {
+                            drag.current = null;
+                            setDragPoint(null);
+                        }, onWheel: (e) => {
+                            zoom(e.deltaY > 0 ? 1.15 : 1 / 1.15, point(e));
+                        }, children: [_jsx("defs", { children: _jsx("filter", { id: filterId, colorInterpolationFilters: "sRGB", children: _jsxs("feComponentTransfer", { children: [_jsx("feFuncR", { type: "linear", slope: 255 / (stretch[0][1] - stretch[0][0]), intercept: -stretch[0][0] / (stretch[0][1] - stretch[0][0]) }), _jsx("feFuncG", { type: "linear", slope: 255 / (stretch[1][1] - stretch[1][0]), intercept: -stretch[1][0] / (stretch[1][1] - stretch[1][0]) }), _jsx("feFuncB", { type: "linear", slope: 255 / (stretch[2][1] - stretch[2][0]), intercept: -stretch[2][0] / (stretch[2][1] - stretch[2][0]) })] }) }) }), s.imageUrl && (_jsx("image", { href: s.imageUrl, width: image.width, height: image.height, style: {
+                                    filter: `url(#${filterId}) brightness(${brightness}) contrast(${contrast})`,
+                                } })), s.document.gcps.map((gcp) => {
+                                const p = dragPoint?.id === gcp.id ? dragPoint.point : gcp.image;
+                                return (_jsxs("g", { transform: `translate(${p[0]} ${p[1]})`, onPointerDown: (e) => {
+                                        if (s.mode !== "align")
+                                            return;
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                        svg.current?.focus({ preventScroll: true });
+                                        drag.current = {
+                                            id: gcp.id,
+                                            start: p,
+                                            point: p,
+                                            view,
+                                            pointerId: e.pointerId,
+                                        };
+                                        svg.current.setPointerCapture(e.pointerId);
+                                    }, children: [_jsx("circle", { r: view[2] / 90, fill: gcp.enabled ? "#c95722" : "#666", stroke: "white", strokeWidth: view[2] / 450 }), _jsx("text", { y: -view[2] / 55, textAnchor: "middle", fill: "#132f29", stroke: "white", paintOrder: "stroke", strokeWidth: view[2] / 400, fontSize: view[2] / 35, children: gcp.label })] }, gcp.id));
+                            }), s.pendingImagePoint && (_jsx("circle", { cx: s.pendingImagePoint[0], cy: s.pendingImagePoint[1], r: view[2] / 70, fill: "none", stroke: "#12695b", strokeWidth: view[2] / 300 }))] }), _jsxs("div", { className: "rg-toolbar", children: [_jsx("button", { type: "button", onClick: () => zoom(0.8), "aria-label": t("Zoom image in"), children: "+" }), _jsx("button", { type: "button", onClick: () => zoom(1.25), "aria-label": t("Zoom image out"), children: "\u2212" }), _jsx("button", { type: "button", onClick: () => setView([
+                                    -image.width * 0.04,
+                                    -image.height * 0.06,
+                                    image.width * 1.08,
+                                    image.height * 1.12,
+                                ]), children: t("Fit image") }), _jsx("button", { type: "button", onClick: () => controller.navigateImageHistory(-1), children: t("Previous image view") }), _jsx("button", { type: "button", onClick: () => controller.navigateImageHistory(1), children: t("Next image view") }), _jsx("button", { type: "button", onClick: () => void controller.removeImage(), children: t("Remove image") })] }), _jsxs("label", { children: [t("Linked navigation"), _jsxs("select", { disabled: !s.fit, value: s.linkedNavigation, onChange: (e) => controller.setLinkedNavigation(e.target.value), children: [_jsx("option", { value: "off", children: t("Independent views") }), _jsx("option", { value: "image-to-map", children: t("Map follows image") }), _jsx("option", { value: "map-to-image", children: t("Image follows map") })] })] }), _jsxs("details", { children: [_jsx("summary", { children: t("Display adjustment & histogram") }), _jsxs("div", { className: "rg-toolbar", children: [_jsx("button", { type: "button", onClick: () => stretchHistogram(false), children: t("Full histogram stretch") }), _jsx("button", { type: "button", onClick: () => stretchHistogram(true), children: t("Local histogram stretch") }), _jsx("button", { type: "button", onClick: () => {
+                                            setStretch([
+                                                [0, 255],
+                                                [0, 255],
+                                                [0, 255],
+                                            ]);
+                                            setBrightness(1);
+                                            setContrast(1);
+                                        }, children: t("Reset display") })] }), _jsxs("label", { children: [t("Brightness"), _jsx("input", { type: "range", min: "0.25", max: "2", step: "0.05", value: brightness, onChange: (e) => setBrightness(Number(e.target.value)) })] }), _jsxs("label", { children: [t("Contrast"), _jsx("input", { type: "range", min: "0.25", max: "2", step: "0.05", value: contrast, onChange: (e) => setContrast(Number(e.target.value)) })] }), _jsx("svg", { viewBox: "0 0 320 50", "aria-label": t("RGB intensity histogram of preview"), className: "rg-histogram", children: histogram.map((v, i) => (_jsx("rect", { x: i * 10, y: 50 - (50 * v) / Math.max(1, ...histogram), width: "9", height: (50 * v) / Math.max(1, ...histogram), fill: "currentColor" }, i))) }), _jsx("small", { children: t("Display only. Original samples are preserved for export.") })] })] })) : (_jsxs("div", { className: "rg-empty", children: [_jsx("span", { className: "rg-cross", children: "\uFF0B" }), _jsx("p", { children: t("Drop a map, plan, or photograph here.") }), _jsx("small", { children: t("PNG, JPEG, WebP, ordinary TIFF · up to 25 MiB · stays on this device") })] }))] }));
+}

package/dist/panels/PreviewControls.d.ts

@@ -0,0 +1,15 @@
+import type { GeoreferencerController } from "@georeferencing/core";
+import type { Translate } from "../localization.js";
+/**
+ * Explicit manual/automatic preview policy and run action. Automatic mode waits for
+ * enough complete, enabled pairs; the worker validates rank and domain. `onReview`
+ * fires only for a successful preview of the same document/alignment revision.
+ */
+export declare function PreviewControls({ controller, t, onReview, }: {
+    /** Shared authoritative controller. */
+    controller: GeoreferencerController;
+    /** Translate default English labels. */
+    t?: Translate;
+    /** Optional transition from matching into review after a current preview is ready. */
+    onReview?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/panels/PreviewControls.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MODELS } from "@georeferencing/core";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { identity } from "../localization.js";
+/**
+ * Explicit manual/automatic preview policy and run action. Automatic mode waits for
+ * enough complete, enabled pairs; the worker validates rank and domain. `onReview`
+ * fires only for a successful preview of the same document/alignment revision.
+ */
+export function PreviewControls({ controller, t = identity, onReview, }) {
+    const s = useGeoreferencer(controller), d = s.document;
+    const count = d.gcps.filter((p) => p.enabled).length;
+    const missing = Math.max(0, MODELS[d.model].minimum - count);
+    return (_jsxs("div", { className: "rg-preview-controls", children: [_jsxs("label", { children: [t("Preview updates"), _jsxs("select", { value: s.previewMode, onChange: (e) => controller.setPreviewMode(e.target.value), children: [_jsx("option", { value: "manual", children: t("Manual") }), _jsx("option", { value: "automatic", children: t("Automatic") })] })] }), _jsxs("div", { children: [_jsx("button", { type: "button", className: "rg-primary", disabled: !s.imageUrl ||
+                            !!s.pendingImagePoint ||
+                            missing > 0 ||
+                            s.fitting === "running" ||
+                            s.mode === "draw", onClick: async () => {
+                            const id = d.id, revision = d.alignmentRevision;
+                            if (!s.fit || s.previewMode === "manual")
+                                await controller.refit();
+                            const current = controller.getSnapshot();
+                            if (current.document.id === id &&
+                                current.fitRevision === revision &&
+                                current.fit) {
+                                controller.setTool("navigate");
+                                onReview?.();
+                            }
+                        }, children: t(s.fitting === "running"
+                            ? "Running alignment…"
+                            : s.fit && s.previewMode === "automatic"
+                                ? "Review alignment"
+                                : "Run alignment") }), _jsxs("small", { className: "rg-readiness", "aria-live": "polite", children: [count, " ", t("pairs"), missing > 0
+                                ? ` · ${t("Add at least")} ${missing} ${t("more")}`
+                                : ` · ${t("You can keep adding pairs")}`] })] })] }));
+}

package/dist/panels/ReferencePanel.d.ts

@@ -0,0 +1,17 @@
+import type { GeoreferencerController } from "@georeferencing/core";
+import type { Translate } from "../localization.js";
+/**
+ * Accessible loading/error/partial-result feedback for configured references; returns null when no provider statuses exist.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export declare function ReferencePanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t, }: {
+    /** Shared authoritative editor controller; the panel does not own its lifecycle. */
+    controller: GeoreferencerController;
+    /** Optional translation function; defaults to returning English messages unchanged. */
+    t?: Translate;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/panels/ReferencePanel.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { identity } from "../localization.js";
+/**
+ * Accessible loading/error/partial-result feedback for configured references; returns null when no provider statuses exist.
+ *
+ * This composable panel subscribes to the controller but does not attach the reference map or install an unsaved-work guard; manage those in the host when composing panels yourself.
+ */
+export function ReferencePanel({ 
+/** Shared authoritative editor controller; the panel does not own its lifecycle. */
+controller, 
+/** Optional translation function; defaults to returning English messages unchanged. */
+t = identity, }) {
+    const { references } = useGeoreferencer(controller);
+    if (!Object.keys(references).length)
+        return null;
+    return (_jsx("section", { className: "rg-references", "aria-label": t("Reference sources"), "aria-live": "polite", children: Object.entries(references).map(([id, status]) => (_jsxs("p", { className: status.state === "error" ? "rg-error" : "", children: [_jsx("strong", { children: status.label }), " · ", t(status.state === "loading"
+                    ? "Loading reference"
+                    : status.state === "error"
+                        ? "Reference unavailable"
+                        : status.partial
+                            ? "Incomplete reference results"
+                            : "Reference ready"), status.message && _jsxs(_Fragment, { children: [" \u00B7 ", t(status.message)] })] }, id))) }));
+}