@georeferencing/react 0.1.0 → 0.3.0

package/dist/components/accuracy.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { coordinateUnits, MODELS } from "@georeferencing/core";
+/**
+ * Whether residuals are necessarily zero: thin plate splines interpolate every point,
+ * and every other model matches exactly its minimum number of points.
+ */
+export function exactFit(model, gcps) {
+    return (model === "thinPlateSpline" ||
+        gcps.filter((p) => p.enabled).length <= MODELS[model].minimum);
+}
+/** Plain-language fit quality from the root mean square of image-pixel residuals. */
+export function AccuracySummary({ fit, model, gcps, workingCrs, t, }) {
+    if (exactFit(model, gcps))
+        return (_jsxs("div", { className: "rg-accuracy", "data-quality": "unknown", children: [_jsx("strong", { children: t("Accuracy not measured yet") }), _jsx("p", { children: t(model === "thinPlateSpline"
+                        ? "Thin plate spline passes through every point, so it cannot report an error. Judge the overlay visually."
+                        : "The alignment passes exactly through the minimum number of points. Add another point to measure accuracy.") })] }));
+    const pixels = fit.residuals
+        .map((r) => r.pixels)
+        .filter((v) => typeof v === "number");
+    const rms = pixels.length
+        ? Math.sqrt(pixels.reduce((sum, v) => sum + v * v, 0) / pixels.length)
+        : undefined;
+    const quality = rms === undefined
+        ? "unknown"
+        : rms <= 2
+            ? "good"
+            : rms <= 5
+                ? "fair"
+                : "poor";
+    return (_jsxs("div", { className: "rg-accuracy", "data-quality": quality, children: [_jsx("strong", { children: rms === undefined
+                    ? t("Alignment ready")
+                    : `${t(quality === "good"
+                        ? "Good fit"
+                        : quality === "fair"
+                            ? "Fair fit"
+                            : "Poor fit")} · ${t("average error")} ${rms.toFixed(1)} px` }), _jsx("p", { children: t(quality === "poor"
+                    ? "Points disagree. Check the points with the largest residuals, or add more points."
+                    : "Average distance between your map points and where the alignment places them, in image pixels.") }), _jsxs("small", { children: ["RMSE ", fit.rmse.toFixed(2), " ", coordinateUnits(workingCrs), " \u00B7 ", workingCrs] })] }));
+}

package/dist/components/exports.d.ts

@@ -0,0 +1,32 @@
+import type { Definitions, ExportFormat, ExportResult, GeoreferencerController } from "@georeferencing/core";
+import type { Translate } from "../localization.js";
+/** Raster output settings shared by every raster export format. */
+export declare function OutputFields({ controller, t, definitions, }: {
+    controller: GeoreferencerController;
+    t: Translate;
+    definitions?: Definitions;
+}): import("react/jsx-runtime").JSX.Element;
+/** One button per configured format; results go to `onExport` or browser downloads. */
+export declare function ExportButtons({ controller, t, formats, onExport, primary, status, }: {
+    controller: GeoreferencerController;
+    t: Translate;
+    formats: readonly ExportFormat[];
+    onExport?: (result: ExportResult) => void | Promise<void>;
+    /** Formats rendered as primary buttons. */
+    primary?: (format: ExportFormat) => boolean;
+    /**
+     * Include the cancel button and progress bar. Disable when several button groups
+     * share one {@link ExportProgress}.
+     */
+    status?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** Progress bar and cancel button while an export runs; renders nothing when idle. */
+export declare function ExportProgress({ controller, t, }: {
+    controller: GeoreferencerController;
+    t: Translate;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** Restore a session with its image, import QGIS `.points` and save a host draft. */
+export declare function SessionTools({ controller, t, }: {
+    controller: GeoreferencerController;
+    t: Translate;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/exports.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { coordinateUnits, importPoints } from "@georeferencing/core";
+import { useRef } from "react";
+import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
+import { downloadBlob } from "../utils/downloadBlob.js";
+import { NumberField, TextField } from "./fields.js";
+const run = (controller, fn) => {
+    try {
+        fn();
+    }
+    catch (e) {
+        controller.reportError(e);
+    }
+};
+/** Raster output settings shared by every raster export format. */
+export function OutputFields({ controller, t, definitions, }) {
+    const s = useGeoreferencer(controller);
+    const output = s.document.output;
+    const geotiff = s.exportFormats.some((format) => format.id === "geotiff");
+    return (_jsxs("div", { className: "rg-output-fields", children: [_jsxs("label", { children: [t("Output CRS"), _jsx(TextField, { label: t("Output CRS"), value: output.crs, change: (crs) => run(controller, () => {
+                            if (!crs)
+                                throw Error("Output CRS is required.");
+                            controller.setOutput({ ...output, crs });
+                        }) })] }), _jsxs("label", { children: [t("Resampling"), _jsx("select", { value: output.resampler, onChange: (e) => controller.setOutput({
+                            ...output,
+                            resampler: e.target.value,
+                        }), children: ["nearest", "bilinear", "cubic", "cubicSpline", "lanczos"].map((m) => (_jsx("option", { children: m }, m))) })] }), geotiff && (_jsxs("label", { children: [t("TIFF compression"), _jsxs("select", { value: output.compression ?? "none", onChange: (e) => controller.setOutput({
+                            ...output,
+                            compression: e.target.value,
+                            predictor: e.target.value === "deflate" ? output.predictor : 1,
+                        }), children: [_jsx("option", { value: "none", children: t("Uncompressed") }), _jsx("option", { value: "deflate", children: t("Deflate (lossless)") }), _jsx("option", { value: "packbits", children: t("PackBits (lossless)") })] })] })), _jsxs("label", { children: [t("Input no-data (byte or R,G,B; blank = alpha)"), _jsx(TextField, { label: t("Input no-data"), value: Array.isArray(output.sourceNoData)
+                            ? output.sourceNoData.join(",")
+                            : String(output.sourceNoData ?? ""), change: (value) => run(controller, () => {
+                            const values = value.split(",").map(Number);
+                            if (value &&
+                                (![1, 3].includes(values.length) ||
+                                    values.some((v) => !Number.isInteger(v) || v < 0 || v > 255)))
+                                throw Error("Input no-data requires one or three bytes (0–255).");
+                            controller.setOutput({
+                                ...output,
+                                sourceNoData: value
+                                    ? values.length === 1
+                                        ? values[0]
+                                        : values
+                                    : undefined,
+                            });
+                        }) })] }), geotiff && (_jsxs("label", { children: [t("Output no-data (byte; blank = alpha)"), _jsx(TextField, { label: t("Output no-data"), value: String(output.noData ?? ""), change: (value) => run(controller, () => {
+                            const n = Number(value);
+                            if (value && (!Number.isInteger(n) || n < 0 || n > 255))
+                                throw Error("Output no-data requires a byte (0–255).");
+                            controller.setOutput({
+                                ...output,
+                                noData: value ? n : undefined,
+                            });
+                        }) })] })), geotiff && (_jsxs(_Fragment, { children: [_jsxs("label", { children: [t("Rows per TIFF strip"), _jsx(NumberField, { label: t("Rows per TIFF strip"), value: output.rowsPerStrip ?? 256, change: (n) => run(controller, () => {
+                                    if (!Number.isInteger(n) || n < 1 || n > 4096)
+                                        throw Error("Rows per strip must be 1–4096.");
+                                    controller.setOutput({ ...output, rowsPerStrip: n });
+                                }) })] }), _jsxs("label", { children: [t("Horizontal TIFF predictor"), _jsx("input", { type: "checkbox", disabled: output.compression !== "deflate", checked: output.predictor === 2, onChange: (e) => controller.setOutput({
+                                    ...output,
+                                    predictor: e.target.checked ? 2 : 1,
+                                }) })] })] })), _jsxs("label", { children: [t("Pixel size (x,y; blank = estimated)"), " \u00B7", " ", coordinateUnits(output.crs, definitions), _jsx(TextField, { label: t("Pixel size"), value: output.resolution?.join(",") ?? "", change: (value) => run(controller, () => {
+                            const values = value.split(",").map(Number);
+                            if (value &&
+                                (values.length > 2 ||
+                                    values.some((v) => !Number.isFinite(v) || v <= 0)))
+                                throw Error("Pixel size requires one or two positive numbers.");
+                            controller.setOutput({
+                                ...output,
+                                resolution: value
+                                    ? [values[0], values[1] ?? values[0]]
+                                    : undefined,
+                            });
+                        }) })] }), _jsxs("label", { children: [t("Output bounds (minX,minY,maxX,maxY; blank = footprint)"), _jsx(TextField, { label: t("Output bounds"), value: output.bounds?.join(",") ?? "", change: (value) => run(controller, () => {
+                            const values = value.split(",").map(Number);
+                            if (value &&
+                                (values.length !== 4 ||
+                                    values.some((v) => !Number.isFinite(v)) ||
+                                    values[0] >= values[2] ||
+                                    values[1] >= values[3]))
+                                throw Error("Bounds require four finite numbers with min < max.");
+                            controller.setOutput({
+                                ...output,
+                                bounds: value
+                                    ? values
+                                    : undefined,
+                            });
+                        }) })] })] }));
+}
+/** One button per configured format; results go to `onExport` or browser downloads. */
+export function ExportButtons({ controller, t, formats, onExport, primary = () => false, status = true, }) {
+    const s = useGeoreferencer(controller);
+    if (!formats.length)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "rg-toolbar", children: [formats.map((format) => {
+                        const unavailable = controller.getExportUnavailable(format.id);
+                        return (_jsx("button", { type: "button", className: primary(format) ? "rg-primary" : undefined, "data-export-format": format.id, title: unavailable ? t(unavailable) : undefined, disabled: Boolean(unavailable) || s.exporting === "running", onClick: () => void controller
+                                .export(format.id)
+                                .then(async (result) => {
+                                if (!result)
+                                    return;
+                                if (onExport)
+                                    await onExport(result);
+                                else
+                                    for (const file of result.files)
+                                        downloadBlob(file.blob, file.name);
+                            })
+                                .catch((error) => controller.reportError(error)), children: t(format.label) }, format.id));
+                    }), status && (_jsx("button", { type: "button", disabled: s.exporting !== "running", onClick: () => controller.cancelExport(), children: t("Cancel export") }))] }), status && s.exporting === "running" && (_jsx("progress", { "aria-label": t("Export progress"), value: s.progress, max: "1" }))] }));
+}
+/** Progress bar and cancel button while an export runs; renders nothing when idle. */
+export function ExportProgress({ controller, t, }) {
+    const s = useGeoreferencer(controller);
+    if (s.exporting !== "running")
+        return null;
+    return (_jsxs("div", { className: "rg-export-progress", children: [_jsx("progress", { "aria-label": t("Export progress"), value: s.progress, max: "1" }), _jsx("button", { type: "button", onClick: () => controller.cancelExport(), children: t("Cancel export") })] }));
+}
+/** Restore a session with its image, import QGIS `.points` and save a host draft. */
+export function SessionTools({ controller, t, }) {
+    const s = useGeoreferencer(controller);
+    const sessionInput = useRef(null);
+    const pendingSession = useRef(null);
+    return (_jsxs("div", { className: "rg-toolbar", children: [_jsxs("label", { className: "rg-file", children: [t("Restore session"), _jsx("input", { type: "file", "aria-label": t("Restore session"), accept: ".json", onChange: async (e) => {
+                            const file = e.target.files?.[0];
+                            if (file) {
+                                pendingSession.current = await file.text();
+                                sessionInput.current?.click();
+                            }
+                            e.target.value = "";
+                        } })] }), _jsx("input", { ref: sessionInput, "aria-label": t("Matching session image"), type: "file", hidden: true, accept: "image/*,.tif,.tiff", onChange: (e) => {
+                    const file = e.target.files?.[0];
+                    if (file && pendingSession.current)
+                        void controller
+                            .restoreSession(pendingSession.current, file)
+                            .catch((e) => controller.reportError(e));
+                    e.target.value = "";
+                } }), _jsxs("label", { className: "rg-file", children: [t("Import .points"), _jsx("input", { type: "file", "aria-label": t("Import .points"), accept: ".points,.csv", disabled: !s.document.sourceImage || s.mode === "draw", onChange: async (e) => {
+                            const f = e.target.files?.[0];
+                            if (f) {
+                                try {
+                                    const imported = importPoints(await f.text(), s.document.workingCrs);
+                                    controller.replaceGcps(imported.gcps);
+                                }
+                                catch (e) {
+                                    controller.reportError(e);
+                                }
+                            }
+                            e.target.value = "";
+                        } })] }), controller.options.onSaveDraft && (_jsx("button", { type: "button", disabled: !s.document.sourceImage || s.saving === "running", onClick: () => void controller
+                    .save("draft")
+                    .catch((e) => controller.reportError(e)), children: t("Save draft") }))] }));
+}

package/dist/components/fields.d.ts

@@ -4,11 +4,14 @@ export declare function TextField({ value, label, change, }: {
     change: (value: string) => void;
 }): import("react/jsx-runtime").JSX.Element;
 /**
- * Retain an editable numeric draft and commit only finite changed values on blur/Enter.
+ * Retain an editable numeric draft and commit only finite values the user changed, on
+ * blur/Enter. `decimals` rounds the displayed value; an untouched rounded display never
+ * overwrites the stored full-precision value.
  */
-export declare function NumberField({ value, label, change, disabled, }: {
+export declare function NumberField({ value, label, change, disabled, decimals, }: {
     value: number;
     label: string;
     change: (value: number) => void;
     disabled?: boolean;
+    decimals?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/fields.js

@@ -12,17 +12,22 @@ export function TextField({ value, label, change, }) {
         } }));
 }
 /**
- * Retain an editable numeric draft and commit only finite changed values on blur/Enter.
+ * Retain an editable numeric draft and commit only finite values the user changed, on
+ * blur/Enter. `decimals` rounds the displayed value; an untouched rounded display never
+ * overwrites the stored full-precision value.
  */
-export function NumberField({ value, label, change, disabled = false, }) {
-    const [draft, setDraft] = useState(String(value));
-    useEffect(() => setDraft(String(value)), [value]);
+export function NumberField({ value, label, change, disabled = false, decimals, }) {
+    const shown = decimals === undefined
+        ? String(value)
+        : String(Number(value.toFixed(decimals)));
+    const [draft, setDraft] = useState(shown);
+    useEffect(() => setDraft(shown), [shown]);
     return (_jsx("input", { "aria-label": label, type: "number", step: "any", disabled: disabled, value: draft, onChange: (e) => setDraft(e.target.value), onBlur: () => {
             const n = Number(draft);
-            if (draft.trim() && Number.isFinite(n) && n !== value)
+            if (draft.trim() && draft.trim() !== shown && Number.isFinite(n))
                 change(n);
             else
-                setDraft(String(value));
+                setDraft(shown);
         }, onKeyDown: (e) => {
             if (e.key === "Enter")
                 e.currentTarget.blur();

package/dist/controls.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Optional controls of the guided `Georeferencer` layout (used when `referenceView` is
+ * supplied). Each flag adds expert controls on top of the minimal step-by-step flow;
+ * omitted flags fall back to {@link MINIMAL_CONTROLS}. The classic layout always shows
+ * every control.
+ */
+export interface GeoreferencerControls {
+    /** Undo and redo buttons for point and drawing edits. */
+    history: boolean;
+    /**
+     * Manual/automatic preview selector. When hidden, the controller's configured
+     * `previewMode` applies and users run alignment with the main button.
+     */
+    previewMode: boolean;
+    /** Transformation model selector while matching points. Hidden keeps the controller's model. */
+    transformation: boolean;
+    /**
+     * Full control point table with editable coordinates, target CRS and residual columns.
+     * When hidden, a compact list shows each point's use state and residual.
+     */
+    pointTable: boolean;
+    /** Add a point pair by typing coordinates; the keyboard alternative to clicking. */
+    manualEntry: boolean;
+    /** Previous/next image and map views and linked image/map navigation. */
+    navigation: boolean;
+    /** Brightness, contrast and histogram stretch for the source image display. */
+    displayAdjustment: boolean;
+    /** Load status of configured reference providers. */
+    referenceStatus: boolean;
+    /** Raster output settings: CRS, resampling, compression, no-data, pixel size and bounds. */
+    outputSettings: boolean;
+    /** Restore a session, import QGIS `.points` and save drafts; also offers session downloads before the last step. */
+    sessionFiles: boolean;
+    /** Indicator for work that has not been saved by the host. */
+    unsavedIndicator: boolean;
+}
+/** Default guided setup: the four-step flow with undo/redo and nothing else. */
+export declare const MINIMAL_CONTROLS: Readonly<GeoreferencerControls>;
+/** Every optional guided control enabled. */
+export declare const ALL_CONTROLS: Readonly<GeoreferencerControls>;

package/dist/controls.js

@@ -0,0 +1,28 @@
+/** Default guided setup: the four-step flow with undo/redo and nothing else. */
+export const MINIMAL_CONTROLS = Object.freeze({
+    history: true,
+    previewMode: false,
+    transformation: false,
+    pointTable: false,
+    manualEntry: false,
+    navigation: false,
+    displayAdjustment: false,
+    referenceStatus: false,
+    outputSettings: false,
+    sessionFiles: false,
+    unsavedIndicator: false,
+});
+/** Every optional guided control enabled. */
+export const ALL_CONTROLS = Object.freeze({
+    history: true,
+    previewMode: true,
+    transformation: true,
+    pointTable: true,
+    manualEntry: true,
+    navigation: true,
+    displayAdjustment: true,
+    referenceStatus: true,
+    outputSettings: true,
+    sessionFiles: true,
+    unsavedIndicator: true,
+});

package/dist/index.d.ts

@@ -1,10 +1,13 @@
 /**
  * Ready-made editor, composable panels and subscription hook with optional exports.
  * Import from `@georeferencing/react`.
- * @module react
+ * @module @georeferencing/react
+ * @group @georeferencing/react
  */
 export type { ControllerOptions, Document, Features, Gcp, ImageMetadata, SaveEnvelope, } from "@georeferencing/core";
 export { createDocument, GeoreferencerController } from "@georeferencing/core";
+export type { GeoreferencerControls } from "./controls.js";
+export { ALL_CONTROLS, MINIMAL_CONTROLS } from "./controls.js";
 export type { GeoreferencerProps } from "./Georeferencer.js";
 export { Georeferencer } from "./Georeferencer.js";
 export { useGeoreferencer } from "./hooks/useGeoreferencer.js";

package/dist/index.js

@@ -1,9 +1,11 @@
 /**
  * Ready-made editor, composable panels and subscription hook with optional exports.
  * Import from `@georeferencing/react`.
- * @module react
+ * @module @georeferencing/react
+ * @group @georeferencing/react
  */
 export { createDocument, GeoreferencerController } from "@georeferencing/core";
+export { ALL_CONTROLS, MINIMAL_CONTROLS } from "./controls.js";
 export { Georeferencer } from "./Georeferencer.js";
 export { useGeoreferencer } from "./hooks/useGeoreferencer.js";
 export { AlignmentPanel } from "./panels/AlignmentPanel.js";

package/dist/panels/AlignmentPanel.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { coordinateUnits, MODELS } from "@georeferencing/core";
+import { exactFit } from "../components/accuracy.js";
 import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
 import { identity } from "../localization.js";
 import { PreviewControls } from "./PreviewControls.js";
@@ -18,7 +19,9 @@ t = identity, controls = true, }) {
                     ? 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
+                        : t("Add distributed points to fit the image.") }), s.fit && exactFit(d.model, d.gcps) && (_jsx("p", { className: "rg-hint", children: t(d.model === "thinPlateSpline"
+                    ? "Thin plate spline passes through every point, so residuals cannot measure accuracy."
+                    : "With the minimum number of points the fit matches them exactly. Add another point to measure accuracy.") })), d.workingCrs === "EPSG:3857" && (_jsx("p", { className: "rg-hint", children: t("Web Mercator units are projected metres, not ground distances.") })), _jsx("p", { className: "rg-hint", 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] }))] }));
+                    : "Confirm alignment") })), d.confirmedAlignmentRevision === d.alignmentRevision && (_jsx("p", { children: t("Alignment confirmed") }))] }));
 }

package/dist/panels/FeaturePanel.js

@@ -1,7 +1,14 @@
 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";
+/** Plain-language names for drawing tools and the geometry types they create. */
+const TOOL_LABELS = {
+    Point: "Point",
+    LineString: "Line",
+    Polygon: "Area",
+    modify: "Edit shapes",
+    navigate: "Pan map",
+};
 /**
  * Opt-in digitizing controls, feature deletion and host property editing. Returns null when digitizing is disabled; controller.save performs explicit persistence.
  *
@@ -20,20 +27,16 @@ 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 &&
+    return (_jsxs("section", { children: [_jsxs("h2", { children: [t("Drawings"), " ", _jsx("small", { children: d.features.features.length })] }), controller.getFeatureErrors().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_LABELS[tool]) }, tool))) }), _jsx("p", { className: "rg-hint", children: t("Double-click to finish lines and areas. Escape cancels. Use Edit shapes to move 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 ", t(TOOL_LABELS[f.geometry.type])] }), _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.")
+                        ? "Saved. Newer changes are not saved yet."
+                        : "Features saved.")
                     : 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.") })] }));
+                            : t("Draw on the map, then save your features.") })] }));
 }

package/dist/panels/GcpPanel.d.ts

@@ -9,9 +9,27 @@ 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, }: {
+t, 
+/** Full editable table or a compact list of points and residuals. */
+variant, 
+/** Show the "Enter coordinates manually" form for keyboard point entry. */
+manualEntry, 
+/** Show the add/move and cancel buttons with their usage hint. */
+tools, }: {
     /** Shared authoritative editor controller; the panel does not own its lifecycle. */
     controller: GeoreferencerController;
     /** Optional translation function; defaults to returning English messages unchanged. */
     t?: Translate;
+    /**
+     * `table` (default) edits every coordinate and shows target CRS and residuals; `compact`
+     * lists each point with its use state, residual and delete action.
+     */
+    variant?: "table" | "compact";
+    /**
+     * Show the "Enter coordinates manually" form, the keyboard alternative to clicking
+     * points. Defaults to true.
+     */
+    manualEntry?: boolean;
+    /** Show the add/move and cancel buttons with their usage hint. Defaults to true. */
+    tools?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/panels/GcpPanel.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { coordinateUnits } from "@georeferencing/core";
 import { useState } from "react";
 import { NumberField } from "../components/fields.js";
 import { useGeoreferencer } from "../hooks/useGeoreferencer.js";
 import { identity } from "../localization.js";
+/** Display a residual without floating-point noise such as `6.355e-14`. */
+const residual = (value, decimals) => typeof value === "number" ? Math.abs(value).toFixed(decimals) : "—";
 /**
  * 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.
  *
@@ -12,9 +15,16 @@ 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, }) {
+t = identity, 
+/** Full editable table or a compact list of points and residuals. */
+variant = "table", 
+/** Show the "Enter coordinates manually" form for keyboard point entry. */
+manualEntry = true, 
+/** Show the add/move and cancel buttons with their usage hint. */
+tools = true, }) {
     const s = useGeoreferencer(controller), [entry, setEntry] = useState([0, 0, 0, 0]);
     const locked = s.mode !== "align" || !s.document.sourceImage;
+    const enabled = s.document.gcps.filter((p) => p.enabled).length;
     const edit = (p, index, value) => {
         const image = [...p.image], target = [...p.target];
         if (index < 2)
@@ -23,9 +33,16 @@ t = identity, }) {
             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: [
+    const enable = (p) => (_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 }) }));
+    const remove = (p) => (_jsx("button", { type: "button", "aria-label": `${t("Delete point")} ${p.label}`, disabled: locked, onClick: () => controller.removeGcp(p.id), children: "\u00D7" }));
+    return (_jsxs("section", { className: "rg-gcp-panel", "data-variant": variant, children: [_jsxs("div", { className: "rg-panel-heading", children: [_jsx("h2", { children: t(variant === "compact" ? "Points" : "Control points") }), _jsxs("span", { children: [enabled, " ", t(enabled === 1 ? "point used" : "points used")] })] }), tools && (_jsxs(_Fragment, { children: [_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."
+                            : "Click the image first, then the map. Drag to pan and scroll to zoom.") })] })), variant === "compact" ? (s.document.gcps.length > 0 && (_jsx("div", { className: "rg-table-scroll", children: _jsxs("table", { className: "rg-point-list", children: [_jsx("caption", { children: t("Residual: distance between a point's map location and where the alignment puts it, in image pixels.") }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "#" }), _jsx("th", { scope: "col", children: t("Use") }), _jsx("th", { scope: "col", children: t("Residual") }), _jsx("th", { scope: "col", children: _jsx("span", { className: "rg-visually-hidden", children: t("Delete") }) })] }) }), _jsx("tbody", { children: s.document.gcps.map((p) => {
+                                const r = s.fit?.residuals.find((r) => r.id === p.id);
+                                return (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: p.label }), _jsx("td", { children: enable(p) }), _jsx("td", { children: typeof r?.pixels === "number"
+                                                ? `${residual(r.pixels, 1)} px`
+                                                : "—" }), _jsx("td", { children: remove(p) })] }, p.id));
+                            }) })] }) }))) : (_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",
@@ -38,10 +55,9 @@ t = identity, }) {
                                     "",
                                 ].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
+                                const targetDecimals = coordinateUnits(p.crs) === "degrees" ? 8 : 3;
+                                return (_jsxs("tr", { children: [_jsx("td", { children: enable(p) }), _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, decimals: i < 2 ? 3 : targetDecimals, 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: residual(r?.distance, 3) }), _jsx("td", { children: residual(r?.pixels, 3) }), _jsx("td", { children: remove(p) })] }, p.id));
+                            }) })] }) })), manualEntry && (_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) {
@@ -61,5 +77,5 @@ t = identity, }) {
                             catch (e) {
                                 controller.reportError(e);
                             }
-                        }, children: t("Add coordinate pair") })] })] }));
+                        }, children: t("Add coordinate pair") })] }))] }));
 }

package/dist/panels/ImagePanel.d.ts

@@ -1,4 +1,5 @@
 import type { GeoreferencerController } from "@georeferencing/core";
+import type { ReactNode } from "react";
 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.
@@ -9,9 +10,21 @@ 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, }: {
+t, 
+/** Show previous/next view history and linked image/map navigation. */
+navigation, 
+/** Show brightness, contrast and histogram display adjustment. */
+displayAdjustment, 
+/** Extra actions inside the empty drop zone, such as a sample image button. */
+emptyActions, }: {
     /** 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 previous/next image view history and linked image/map navigation. Defaults to true. */
+    navigation?: boolean;
+    /** Show brightness, contrast and histogram display adjustment. Defaults to true. */
+    displayAdjustment?: boolean;
+    /** Extra actions rendered inside the empty drop zone, such as a sample image button. */
+    emptyActions?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;