@georeferencing/react 0.1.0 → 0.3.0

package/dist/panels/ImagePanel.js

@@ -11,8 +11,14 @@ 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);
+t = identity, 
+/** Show previous/next view history and linked image/map navigation. */
+navigation = true, 
+/** Show brightness, contrast and histogram display adjustment. */
+displayAdjustment = true, 
+/** Extra actions inside the empty drop zone, such as a sample image button. */
+emptyActions, }) {
+    const s = useGeoreferencer(controller), image = s.document.sourceImage, imageWidth = image?.width, svg = useRef(null);
     const view = s.imageView ?? [
         0, 0, 100, 100,
     ];
@@ -24,6 +30,10 @@ t = identity, }) {
     ]);
     const filterId = `rg-stretch-${useId().replace(/:/g, "")}`;
     const displayPixels = useRef(null);
+    // Preview pixels per canonical image pixel, known once the preview has loaded.
+    const [previewScale, setPreviewScale] = useState(0);
+    // On-screen pixels per canonical image pixel for the current view.
+    const [screenScale, setScreenScale] = useState(0);
     const stretchHistogram = (local) => {
         const pixels = displayPixels.current;
         if (!pixels || !image)
@@ -91,6 +101,8 @@ t = identity, }) {
             const ctx = canvas.getContext("2d");
             ctx.drawImage(img, 0, 0);
             displayPixels.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            if (imageWidth)
+                setPreviewScale(img.width / imageWidth);
             const data = displayPixels.current.data, bins = Array(32).fill(0);
             for (let i = 0; i < data.length; i += 4)
                 if (data[i + 3])
@@ -102,10 +114,31 @@ t = identity, }) {
         return () => {
             disposed = true;
             displayPixels.current = null;
+            setPreviewScale(0);
             img.onload = null;
             img.src = "";
         };
-    }, [s.imageUrl]);
+    }, [s.imageUrl, imageWidth]);
+    // Track the on-screen scale; the viewBox keeps its aspect ratio ("meet").
+    const viewWidth = view[2], viewHeight = view[3];
+    useEffect(() => {
+        const element = svg.current;
+        if (!element)
+            return;
+        const measure = () => setScreenScale(Math.min(element.clientWidth / viewWidth, element.clientHeight / viewHeight));
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [viewWidth, viewHeight]);
+    // Zoomed beyond the preview resolution: show full-resolution detail for precise picking.
+    const needsDetail = previewScale > 0 && screenScale > previewScale * 1.25;
+    useEffect(() => {
+        if (needsDetail)
+            void controller.requestDetailImage();
+    }, [needsDetail, controller]);
     const point = (e) => {
         const matrix = svg.current?.getScreenCTM();
         if (!matrix)
@@ -113,31 +146,55 @@ t = identity, }) {
         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),
-    ]);
+    // Read the latest view from the controller so rapid wheel events never use a stale render.
+    const zoom = (factor, center) => {
+        const v = controller.getSnapshot().imageView ?? view;
+        const c = center ?? [v[0] + v[2] / 2, v[1] + v[3] / 2];
+        controller.setImageView([
+            c[0] + (v[0] - c[0]) * factor,
+            c[1] + (v[1] - c[1]) * factor,
+            Math.max(1, v[2] * factor),
+            Math.max(1, v[3] * factor),
+        ]);
+    };
+    const zoomRef = useRef(zoom);
+    zoomRef.current = zoom;
+    const hasImage = Boolean(image);
+    // React registers wheel listeners as passive; a native one can stop the page scrolling.
+    useEffect(() => {
+        const element = svg.current;
+        if (!hasImage || !element)
+            return;
+        const wheel = (e) => {
+            e.preventDefault();
+            const matrix = element.getScreenCTM();
+            const center = matrix
+                ? new DOMPoint(e.clientX, e.clientY).matrixTransform(matrix.inverse())
+                : undefined;
+            zoomRef.current(e.deltaY > 0 ? 1.15 : 1 / 1.15, center ? [center.x, center.y] : undefined);
+        };
+        element.addEventListener("wheel", wheel, { passive: false });
+        return () => element.removeEventListener("wheel", wheel);
+    }, [hasImage]);
     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;
-        }
+        const inside = p[0] >= 0 && p[1] >= 0 && p[0] <= image.width && p[1] <= image.height;
+        // Dragging always pans; a click without movement places a point while matching.
         drag.current = {
             start: [e.clientX, e.clientY],
             view,
             pointerId: e.pointerId,
+            click: s.tool === "gcp" && e.button === 0 && !e.shiftKey && inside
+                ? p
+                : undefined,
         };
         e.currentTarget.setPointerCapture(e.pointerId);
     };
-    return (_jsxs("section", { className: "rg-image-panel", "aria-label": t("Source image"), onDragOver: (e) => e.preventDefault(), onDrop: (e) => {
+    return (_jsxs("section", { className: "rg-image-panel", "data-empty": image ? undefined : "", "aria-label": t("Source image"), onDragOver: (e) => e.preventDefault(), onDrop: (e) => {
             e.preventDefault();
             const file = e.dataTransfer.files[0];
             if (file)
@@ -183,6 +240,10 @@ t = identity, }) {
                                 setDragPoint({ id: d.id, point: d.point });
                             }
                             else {
+                                if (!d.moved &&
+                                    Math.hypot(e.clientX - d.start[0], e.clientY - d.start[1]) < 4)
+                                    return;
+                                d.moved = true;
                                 const scale = Math.max(view[2] / e.currentTarget.clientWidth, view[3] / e.currentTarget.clientHeight);
                                 setView([
                                     d.view[0] - (e.clientX - d.start[0]) * scale,
@@ -196,16 +257,20 @@ t = identity, }) {
                             drag.current = null;
                             if (d?.id && d.point)
                                 controller.updateGcp(d.id, { image: d.point });
+                            else if (d?.click && !d.moved)
+                                controller.setPendingPoint(d.click);
                             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.detailImageUrl && needsDetail && (_jsx("image", { href: s.detailImageUrl, width: image.width, height: image.height, "data-detail": "", style: {
+                                    filter: `url(#${filterId}) brightness(${brightness}) contrast(${contrast})`,
+                                    // Show individual source pixels once each covers several screen pixels.
+                                    imageRendering: screenScale >= 4 ? "pixelated" : "auto",
                                 } })), 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) => {
@@ -228,7 +293,7 @@ t = identity, }) {
                                     -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: () => {
+                                ]), children: t("Fit image") }), navigation && (_jsxs(_Fragment, { children: [_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") })] }), navigation && (_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") })] })] })), displayAdjustment && (_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],
@@ -236,5 +301,10 @@ t = identity, }) {
                                             ]);
                                             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") })] }))] }));
+                                        }, 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(_Fragment, { children: [_jsx("div", { className: "rg-image-meta", children: t("No image selected") }), _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") }), _jsxs("div", { className: "rg-toolbar rg-empty-actions", children: [_jsxs("label", { className: "rg-file rg-primary", children: [t("Choose image"), _jsx("input", { "aria-label": t("Choose image file"), 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 = "";
+                                                } })] }), emptyActions] })] })] }))] }));
 }

package/dist/panels/PreviewControls.d.ts

@@ -5,11 +5,13 @@ import type { Translate } from "../localization.js";
  * 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, }: {
+export declare function PreviewControls({ controller, t, onReview, modeSelector, }: {
     /** 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;
+    /** Show the manual/automatic preview selector. Defaults to true. */
+    modeSelector?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/panels/PreviewControls.js

@@ -7,11 +7,12 @@ import { identity } from "../localization.js";
  * 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, }) {
+export function PreviewControls({ controller, t = identity, onReview, modeSelector = true, }) {
     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 ||
+    const minimum = MODELS[d.model].minimum;
+    const missing = Math.max(0, minimum - count);
+    return (_jsxs("div", { className: "rg-preview-controls", children: [modeSelector && (_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" ||
@@ -30,7 +31,7 @@ export function PreviewControls({ controller, t = identity, onReview, }) {
                             ? "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")}`] })] })] }));
+                                : "Run alignment") }), _jsx("small", { className: "rg-readiness", "aria-live": "polite", children: missing > 0
+                            ? `${count} ${t("of")} ${minimum} ${t("points matched")}`
+                            : `${count} ${t(count === 1 ? "point matched" : "points matched")} · ${t("more points improve accuracy")}` })] })] }));
 }

package/dist/styles.css

@@ -277,18 +277,19 @@
   }
 }
 
-/* Guided two-view layout; all selectors remain scoped to the editor. */
-.rg-preview-controls {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-.rg-preview-controls label {
-  min-width: 115px;
+/* Guided step-by-step layout; all selectors remain scoped to the editor. */
+.rg-editor .rg-primary:hover:not(:disabled) {
+  background: #0e5a4e;
+  border-color: #0e5a4e;
+  color: white;
 }
-.rg-readiness {
-  display: block;
-  margin-top: 4px;
+.rg-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 .rg-guided {
   padding: 18px;
@@ -296,45 +297,136 @@
 .rg-steps {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px 28px;
+  gap: 8px 22px;
   list-style: none;
   margin: 0;
   padding: 0 0 14px;
   border-bottom: 1px solid var(--rg-border);
-  font-size: 12px;
+  font-size: 13px;
   color: #5b6c65;
 }
-.rg-steps [aria-current="step"] {
+.rg-steps li,
+.rg-editor .rg-step-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.rg-editor .rg-step-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font-size: inherit;
+}
+.rg-editor .rg-step-button:hover .rg-step-label {
+  text-decoration: underline;
+}
+.rg-step-index {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1.5px solid #9dab9e;
+  font-size: 12px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.rg-steps [data-state="current"] {
   color: var(--rg-accent);
-  font-weight: 750;
+  font-weight: 700;
+}
+.rg-steps [data-state="current"] .rg-step-index {
+  border-color: var(--rg-accent);
+  background: #e3efe9;
+}
+.rg-steps [data-state="done"] {
+  color: #20322f;
+}
+.rg-steps [data-state="done"] .rg-step-index {
+  border-color: var(--rg-accent);
+  background: var(--rg-accent);
+  color: white;
 }
 .rg-matching-bar {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: 20px;
-  padding: 12px 0 4px;
+  gap: 8px 24px;
+  padding: 14px 0 10px;
+}
+.rg-guided .rg-matching-bar {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--rg-paper);
+  border-bottom: 1px solid var(--rg-border);
 }
 .rg-instruction strong {
   font-size: 16px;
 }
 .rg-instruction p {
-  max-width: 600px;
+  max-width: 640px;
+  margin: 4px 0 0;
   font-size: 12px;
   color: #5b6c65;
 }
+.rg-editor .rg-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--rg-accent);
+  font-size: inherit;
+  text-decoration: underline;
+}
+.rg-step-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.rg-preview-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.rg-preview-controls label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+.rg-preview-controls > div {
+  text-align: right;
+}
+.rg-readiness {
+  display: block;
+  margin-top: 4px;
+}
 .rg-match-tools {
-  margin: 0 0 12px;
+  margin: 10px 0 12px;
 }
-.rg-match-tools label {
+.rg-tools-end {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 14px;
   margin-left: auto;
 }
-.rg-match-tools select {
+.rg-editor .rg-inline-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  white-space: nowrap;
+}
+.rg-editor .rg-inline-field select {
+  width: auto;
   max-width: 225px;
 }
+.rg-guided .rg-dirty {
+  line-height: 1.6;
+}
 .rg-paired-views {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -355,54 +447,124 @@
 }
 .rg-guided .rg-image-panel .rg-panel-heading {
   min-height: 39px;
+  align-items: center;
 }
 .rg-guided .rg-image-panel .rg-panel-heading h2 {
   margin: 0;
 }
+.rg-guided .rg-image-panel .rg-panel-heading .rg-file {
+  margin: 0;
+}
+.rg-guided .rg-image-panel[data-empty] .rg-panel-heading .rg-file {
+  display: none;
+}
 .rg-guided .rg-image-meta {
   margin-top: 4px;
 }
+.rg-empty-actions {
+  justify-content: center;
+  margin-top: 16px;
+}
 .rg-view-tabs {
   display: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
 }
 .rg-review-panels {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 24px;
-  padding: 18px 0;
+  gap: 18px;
+  padding: 18px 0 0;
 }
-.rg-review-panels section + section {
+.rg-editor .rg-review-panels section + section {
   margin-top: 0;
   padding-top: 0;
   border-top: none;
 }
+.rg-card {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--rg-border);
+  border-radius: 6px;
+  background: white;
+}
+.rg-editor .rg-review-panels .rg-card {
+  padding: 16px;
+}
+.rg-editor .rg-card h3 {
+  margin: 16px 0 0;
+  font-size: 13px;
+  font-weight: 650;
+}
+.rg-accuracy {
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  border-left: 4px solid #9dab9e;
+  background: #f4f6f1;
+}
+.rg-accuracy[data-quality="good"] {
+  border-left-color: #2f8a5b;
+}
+.rg-accuracy[data-quality="fair"] {
+  border-left-color: #c48e45;
+}
+.rg-accuracy[data-quality="poor"] {
+  border-left-color: #b4452d;
+}
+.rg-accuracy p {
+  margin: 4px 0;
+  font-size: 12px;
+}
 .rg-guided .rg-gcp-panel {
   border-top: 1px solid var(--rg-border);
   margin-top: 18px;
   padding-top: 16px;
 }
-.rg-guided .rg-gcp-panel > .rg-toolbar,
-.rg-guided .rg-gcp-panel > .rg-hint {
-  display: none;
+.rg-editor .rg-review-panels .rg-gcp-panel {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+.rg-editor .rg-point-list {
+  width: auto;
+  min-width: 280px;
 }
 .rg-advanced {
   margin-top: 16px;
 }
+.rg-export-progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 10px 0;
+}
+.rg-status:empty {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
 @media (max-width: 720px) {
   .rg-guided {
     padding: 12px;
   }
+  .rg-steps li:not([data-state="current"]) .rg-step-label {
+    display: none;
+  }
   .rg-matching-bar {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 4px;
+    grid-template-columns: minmax(0, 1fr);
   }
+  .rg-step-actions,
   .rg-preview-controls {
-    justify-content: space-between;
+    justify-content: flex-start;
   }
-  .rg-match-tools label {
+  .rg-preview-controls > div {
+    text-align: left;
+  }
+  .rg-tools-end {
     margin-left: 0;
     width: 100%;
+    flex-wrap: wrap;
   }
   .rg-paired-views {
     grid-template-columns: minmax(0, 1fr);
@@ -423,18 +585,10 @@
     grid-template-columns: minmax(0, 1fr);
   }
 }
-
-.rg-guided .rg-image-panel .rg-panel-heading .rg-file {
-  margin: 0;
-}
-.rg-view-tabs {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-.rg-guided .rg-matching-bar {
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  background: var(--rg-paper);
+.rg-editor .rg-error {
+  padding: 8px 12px;
+  border-left: 3px solid #b4452d;
+  background: #fbefea;
+  color: #7a2614;
+  font-size: 12px;
 }

package/dist/utils/downloadBlob.d.ts

@@ -1,5 +1,6 @@
 /**
- * Start a browser download and revoke its temporary object URL after one second. Invoke
- * from a client-side user action; this utility performs no upload.
+ * Start a browser download and revoke its temporary object URL after one minute, which
+ * leaves large files (such as full-resolution GeoTIFFs) time to start saving in every
+ * browser. Invoke from a client-side user action; this utility performs no upload.
  */
 export declare function downloadBlob(blob: Blob, name: string): void;

package/dist/utils/downloadBlob.js

@@ -1,11 +1,20 @@
 /**
- * Start a browser download and revoke its temporary object URL after one second. Invoke
- * from a client-side user action; this utility performs no upload.
+ * Start a browser download and revoke its temporary object URL after one minute, which
+ * leaves large files (such as full-resolution GeoTIFFs) time to start saving in every
+ * browser. Invoke from a client-side user action; this utility performs no upload.
  */
 export function downloadBlob(blob, name) {
     const url = URL.createObjectURL(blob), a = document.createElement("a");
     a.href = url;
     a.download = name;
-    a.click();
-    setTimeout(() => URL.revokeObjectURL(url), 1000);
+    a.style.display = "none";
+    // Some browsers ignore clicks on anchors outside the document.
+    document.body.append(a);
+    try {
+        a.click();
+    }
+    finally {
+        a.remove();
+    }
+    setTimeout(() => URL.revokeObjectURL(url), 60_000);
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0",
+  "version": "0.3.0",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -31,15 +31,14 @@
     },
     "./styles.css": "./dist/styles.css"
   },
-  "dependencies": {
-    "@georeferencing/core": "^0.1.0"
-  },
   "peerDependencies": {
+    "@georeferencing/core": "^0.3.0",
     "react": ">=19.3.0 <20",
     "react-dom": ">=19.3.0 <20",
     "ol": ">=10.10.0 <11"
   },
   "devDependencies": {
+    "@georeferencing/core": "0.3.0",
     "typescript": "5.9.3",
     "react": "19.3.0",
     "react-dom": "19.3.0",