ogm-viewer 0.4.0 → 0.5.0

package/dist/cjs/ogm-alerts_11.cjs.entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry = require('./ogm-alerts.ogm-attributes.ogm-image.ogm-map.ogm-menubar.ogm-metadata.ogm-preview.ogm-previews.ogm-settings.ogm-sidebar.ogm-viewer-DMEfXquS.js');
+require('./index-mu9UK_Fb.js');
+
+
+
+exports.ogm_alerts = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmAlerts;
+exports.ogm_attributes = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmAttributes;
+exports.ogm_image = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmImage;
+exports.ogm_map = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmMap;
+exports.ogm_menubar = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmMenubar;
+exports.ogm_metadata = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmMetadata;
+exports.ogm_preview = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmPreview;
+exports.ogm_previews = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmPreviews;
+exports.ogm_settings = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmSettings;
+exports.ogm_sidebar = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmSidebar;
+exports.ogm_viewer = ogmAlerts_ogmAttributes_ogmImage_ogmMap_ogmMenubar_ogmMetadata_ogmPreview_ogmPreviews_ogmSettings_ogmSidebar_ogmViewer_entry.OgmViewer;

package/dist/cjs/ogm-viewer.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ogm-attributes_9.cjs",[[513,"ogm-viewer",{"recordUrl":[1,"record-url"],"theme":[1],"record":[32],"previewOpacity":[32],"sidebarOpen":[32],"loadRecord":[64]},[[0,"sidebarToggled","toggleSidebar"],[0,"opacityChange","adjustPreviewOpacity"],[0,"mapLoading","setLoadingStarted"],[0,"imageLoading","setLoadingStarted"],[0,"mapIdle","setLoadingFinished"],[0,"imageLoaded","setLoadingFinished"]],{"recordUrl":[{"updateRecord":0}]}],[513,"ogm-previews",{"theme":[1],"record":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"sources":[32]},null,{"record":[{"getSources":0}]}],[513,"ogm-sidebar",{"record":[16],"theme":[1],"open":[4]}],[513,"ogm-menubar",{"record":[16],"theme":[1],"loading":[4]}],[513,"ogm-map",{"source":[16],"theme":[1],"padding":[2],"easeMapTo":[64]},[[16,"featureSelected","handleFeatureSelected"]],{"source":[{"previewSource":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-image",{"source":[16],"theme":[1],"padding":[2]},null,{"source":[{"onSourceChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-metadata",{"record":[16],"theme":[1],"fieldNames":[16],"filteredRecord":[32]}],[513,"ogm-settings",{"record":[16]},[[0,"input","handleOpacityChange"]]],[513,"ogm-attributes",{"features":[16],"currentIndex":[32]},null,{"features":[{"onFeaturesChange":0}],"currentIndex":[{"onCurrentIndexChange":0}]}]]]], options);
+  return index.bootstrapLazy([["ogm-alerts_11.cjs",[[513,"ogm-viewer",{"recordUrl":[1,"record-url"],"theme":[1],"record":[32],"error":[32],"previewOpacity":[32],"sidebarOpen":[32],"loading":[32],"loadRecord":[64]},[[0,"sidebarToggled","toggleSidebar"],[0,"opacityChange","adjustPreviewOpacity"],[0,"mapLoading","setLoadingStarted"],[0,"imageLoading","setLoadingStarted"],[0,"mapIdle","setLoadingFinished"],[0,"imageLoaded","setLoadingFinished"]],{"recordUrl":[{"updateRecord":0}],"record":[{"resetLoading":0}]}],[513,"ogm-previews",{"theme":[1],"record":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"sources":[32]},null,{"record":[{"getSources":0}]}],[513,"ogm-sidebar",{"record":[16],"theme":[1],"open":[4]}],[513,"ogm-menubar",{"record":[16],"theme":[1],"loading":[4]}],[513,"ogm-preview",{"theme":[1],"source":[16],"previewOpacity":[2,"preview-opacity"],"sidebarPadding":[2,"sidebar-padding"],"error":[32]},[[0,"previewError","handlePreviewError"]],{"source":[{"resetError":0}]}],[513,"ogm-metadata",{"record":[16],"theme":[1],"fieldNames":[16],"filteredRecord":[32]}],[513,"ogm-settings",{"record":[16]},[[0,"input","handleOpacityChange"]]],[513,"ogm-map",{"source":[16],"theme":[1],"padding":[2],"easeMapTo":[64]},[[16,"featureSelected","handleFeatureSelected"]],{"source":[{"previewSource":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-alerts",{"theme":[1],"error":[16]}],[513,"ogm-image",{"source":[16],"theme":[1],"padding":[2]},null,{"source":[{"onSourceChange":0}],"padding":[{"onPaddingChange":0}]}],[513,"ogm-attributes",{"features":[16],"currentIndex":[32]},null,{"features":[{"onFeaturesChange":0}],"currentIndex":[{"onCurrentIndexChange":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/icons/exclamation-triangle-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
+  <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -1,10 +1,12 @@
 {
   "entries": [
+    "components/ogm-alerts/ogm-alerts.js",
     "components/ogm-attributes/ogm-attributes.js",
     "components/ogm-image/ogm-image.js",
     "components/ogm-map/ogm-map.js",
     "components/ogm-menubar/ogm-menubar.js",
     "components/ogm-metadata/ogm-metadata.js",
+    "components/ogm-preview/ogm-preview.js",
     "components/ogm-previews/ogm-previews.js",
     "components/ogm-settings/ogm-settings.js",
     "components/ogm-sidebar/ogm-sidebar.js",

package/dist/collection/components/ogm-alerts/ogm-alerts.css

@@ -0,0 +1,51 @@
+/* Fill the space left by the preview it replaces and center the error within it */
+:host {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  place-content: center;
+  background: var(--wa-color-surface-default);
+}
+
+.alerts {
+  padding: var(--wa-space-m);
+  max-width: 40rem;
+}
+
+.alert {
+  box-shadow: var(--wa-shadow-m);
+  align-items: start;
+}
+
+.alert::part(message) {
+  display: flex;
+  align-items: start;
+  gap: var(--wa-space-s);
+  width: 100%;
+}
+
+.content {
+  flex: auto;
+  min-width: 0;
+}
+
+.title {
+  display: block;
+  font-weight: var(--wa-font-weight-bold);
+}
+
+.message {
+  margin-top: var(--wa-space-3xs);
+  font-size: var(--wa-font-size-s);
+}
+
+.url {
+  margin-top: var(--wa-space-2xs);
+  font-family: var(--wa-font-family-code);
+  font-size: var(--wa-font-size-xs);
+  color: var(--wa-color-text-quiet);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/collection/components/ogm-alerts/ogm-alerts.js

@@ -0,0 +1,71 @@
+import { Host, h } from "@stencil/core";
+// Renders a single preview error, centered and filling its container. Used in place of a failed
+// preview (inside <ogm-preview>) or in place of the previews entirely (when the record fails to load).
+export class OgmAlerts {
+    theme;
+    error;
+    render() {
+        if (!this.error)
+            return null;
+        return (h(Host, { class: this.theme && `wa-${this.theme}` }, h("div", { class: "alerts", role: "alert", "aria-live": "assertive" }, h("wa-callout", { variant: "danger", appearance: "filled-outlined", class: "alert" }, h("wa-icon", { slot: "icon", name: "exclamation-triangle-fill", canvas: "auto" }), h("div", { class: "content" }, h("strong", { class: "title" }, this.error.title), h("div", { class: "message" }, this.error.message), this.error.url && (h("div", { class: "url", title: this.error.url }, this.error.url)))))));
+    }
+    static get is() { return "ogm-alerts"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ogm-alerts.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ogm-alerts.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            },
+            "error": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PreviewError",
+                    "resolved": "PreviewError",
+                    "references": {
+                        "PreviewError": {
+                            "location": "import",
+                            "path": "../../lib/errors",
+                            "id": "src/lib/errors.ts::PreviewError",
+                            "referenceLocation": "PreviewError"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}

package/dist/collection/components/ogm-alerts/ogm-alerts.test.js

@@ -0,0 +1,26 @@
+import { render, describe, it, expect, h } from "@stencil/vitest";
+import { referenceError } from "../../lib/errors";
+// Mock a network failure on load
+const makeError = (url) => referenceError(new TypeError('Failed to fetch'), 'GeoJSON', url);
+describe('ogm-alerts', () => {
+    it('renders nothing when there is no error', async () => {
+        const { root } = await render(h("ogm-alerts", null));
+        const shadowRoot = root.shadowRoot;
+        expect(shadowRoot.querySelector('.alerts')).toBeNull();
+    });
+    it('renders a danger callout with the error title, message, and url', async () => {
+        const { root } = await render(h("ogm-alerts", { error: makeError('http://example.com/data.json') }));
+        const shadowRoot = root.shadowRoot;
+        const callout = shadowRoot.querySelector('wa-callout');
+        expect(callout).not.toBeNull();
+        expect(callout.getAttribute('variant')).toBe('danger');
+        expect(callout.textContent).toContain('GeoJSON');
+        expect(callout.textContent).toContain('CORS');
+        expect(callout.textContent).toContain('http://example.com/data.json');
+    });
+    it('omits the url line when the error has no url', async () => {
+        const { root } = await render(h("ogm-alerts", { error: makeError() }));
+        const shadowRoot = root.shadowRoot;
+        expect(shadowRoot.querySelector('.url')).toBeNull();
+    });
+});

package/dist/collection/components/ogm-image/ogm-image.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { Viewer } from "openseadragon";
 import { getElement, findElement } from "../../lib/elements";
+import { referenceError } from "../../lib/errors";
 export class OgmImage {
     el;
     source;
@@ -8,8 +9,11 @@ export class OgmImage {
     padding = 0;
     imageLoaded;
     imageLoading;
+    previewError;
     // OpenSeadragon viewer instance
     viewer;
+    // Guards against reporting more than one error per load attempt
+    errorReported = false;
     // Set up OpenSeadragon viewer on load
     async componentDidLoad() {
         this.viewer = new Viewer({
@@ -26,10 +30,21 @@ export class OgmImage {
             nextButton: getElement(this.el, '.next'),
             previousButton: getElement(this.el, '.prev'),
         });
+        // Clear loading state whether we succeeded or failed
         this.viewer.addHandler('open', () => this.imageLoaded.emit());
+        // Surface OpenSeaDragon decode errors here
+        this.viewer.addHandler('open-failed', event => {
+            this.imageLoaded.emit();
+            this.reportError(new Error(event.message));
+        });
+        // If we do have a source, load the images
         if (this.source)
             await this.loadImages();
     }
+    // Destroy the viewer when we are removed from the DOM
+    disconnectedCallback() {
+        this.viewer?.destroy();
+    }
     // Update preview when source changes
     async onSourceChange() {
         if (this.source)
@@ -46,14 +61,29 @@ export class OgmImage {
     // Get all of the IIIF image URLs and send them to OpenSeadragon
     // This makes a request to fetch and cache the manifest
     async loadImages() {
+        this.errorReported = false;
         this.imageLoading.emit();
-        const images = await this.source.getIIIFImageUrls();
-        if (!images)
-            throw new Error('No IIIF images found for source');
-        this.viewer.open(images);
+        try {
+            const images = await this.source.getIIIFImageUrls();
+            if (!images)
+                throw new Error('No IIIF images found for source');
+            this.viewer.open(images);
+        }
+        catch (error) {
+            console.error(`Error loading IIIF images for ${this.source.url}:`, error);
+            this.imageLoaded.emit();
+            this.reportError(error);
+        }
+    }
+    // Emit a single preview error per load attempt
+    reportError(error) {
+        if (this.errorReported || !this.source)
+            return;
+        this.errorReported = true;
+        this.previewError.emit(referenceError(error, this.source.label(), this.source.url));
     }
     render() {
-        return (h(Host, { key: '155b1ad9e24bc0148c90fa6c0d456a09437e08b6' }, h("div", { key: 'e0cf7750187e9a322f72c59a23f40e5897f31756', id: "openseadragon" }, h("div", { key: '59fadbbbe2e10fa53a0e1a3b311eef2c483d0800', class: "controls" }, h("wa-button", { key: '8c2323085fef8326b663c26aaa42dee935b09f0b', class: "zoom-in", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '129a1e11cf602e922a977a35c9d1001cfb64dc4c', name: "zoom-in", label: "Zoom In", canvas: "auto" })), h("wa-button", { key: '944656ac675915dc589ed72b7cc76a9273a6dc5f', class: "zoom-out", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'b76f8cda3420937d45431e9d41a3eeac116b9fad', name: "zoom-out", label: "Zoom Out", canvas: "auto" })), h("wa-button", { key: 'c1d11fae3106ef08de6e7de68fdfdcdbe28a06a0', class: "home", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '1a6cc9c1f3b49ef2284faa0c506afe558bfc5e73', name: "house", label: "Reset View", canvas: "auto" })), h("wa-button", { key: '55924e70820e7118745115b08b8b0fce17ffd6c0', class: "full-page", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '0e719e259f142cfec5a8fd0276f6beee2b522e51', name: "arrows-fullscreen", label: "Full Screen", canvas: "auto" })), h("wa-button", { key: '76335703d0b4e9944bde2d077e26db7fa3aba223', class: "next", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'a543fa9e9822eafb31c35700a1f19df8d23225b1', name: "arrow-right", label: "Next", canvas: "auto" })), h("wa-button", { key: 'a2680c1b66ecea112a01327af560fb1b49607d09', class: "prev", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '00d8226e18ecb42471601b005f90198b8baa14d2', name: "arrow-left", label: "Previous", canvas: "auto" }))))));
+        return (h(Host, { key: 'ebbebaddac72024a3b311e0e0e501267a83d1e95' }, h("div", { key: '4f171256535cfd11430e2269fda389ffae3cedae', id: "openseadragon" }, h("div", { key: 'c308186a13fd6b8e0b1fadbf1fd1e6924631f9d6', class: "controls" }, h("wa-button", { key: '1f9e0c4c6d881bf09d7ceb160f470992d71ebe07', class: "zoom-in", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'cbacb0a388de2c7f349e25172027874a0224a678', name: "zoom-in", label: "Zoom In", canvas: "auto" })), h("wa-button", { key: 'dd8d7e9c5584b124ae105b2187100964f5e3a02a', class: "zoom-out", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '2b5acf2e07c99df9556692bf534bb3847506e4d4', name: "zoom-out", label: "Zoom Out", canvas: "auto" })), h("wa-button", { key: '5534a5c77ea20a1f77544e5acd99d4247dd3d287', class: "home", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'faadb8ea57bf1b831b292eaf66bcea39b7e215d1', name: "house", label: "Reset View", canvas: "auto" })), h("wa-button", { key: '8979cf58a94da89e0e2d132a92fe45323f07de01', class: "full-page", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '12cb3224e7f14258376c1c0bf6ffc5abda5c2252', name: "arrows-fullscreen", label: "Full Screen", canvas: "auto" })), h("wa-button", { key: 'e79c37f27ff14d5c4991ff30ff88aada467214ec', class: "next", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'ee10870ace583257393c53ba12b73ab3b015371b', name: "arrow-right", label: "Next", canvas: "auto" })), h("wa-button", { key: '9d8999e199b7b6338261eb16a655d2199520cf22', class: "prev", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'fde1a9022b9e5f90e269c75ce87943808031e021', name: "arrow-left", label: "Previous", canvas: "auto" }))))));
     }
     static get is() { return "ogm-image"; }
     static get encapsulation() { return "shadow"; }
@@ -163,6 +193,28 @@ export class OgmImage {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "previewError",
+                "name": "previewError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PreviewError",
+                    "resolved": "PreviewError",
+                    "references": {
+                        "PreviewError": {
+                            "location": "import",
+                            "path": "../../lib/errors",
+                            "id": "src/lib/errors.ts::PreviewError",
+                            "referenceLocation": "PreviewError"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/ogm-map/ogm-map.css

@@ -6,6 +6,11 @@
   position: relative;
 }
 
+/* Color of the map background ("space" around the globe) */
+.maplibregl-canvas {
+  background-color: var(--wa-color-surface-default);
+}
+
 /* Inspection popups. Vertical scrolling (when content is too tall) is handled by the
    <wa-scroller> inside ogm-attributes, not here - that's what gives it the fading shadow cue. */
 .maplibregl-popup-content {
@@ -14,6 +19,34 @@
   padding: 0;
   box-shadow: var(--wa-shadow-l);
   border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
+  color: var(--wa-color-text-normal);
+  background-color: var(--wa-color-surface-default);
+
+  .maplibregl-popup-close-button {
+    background-color: var(--wa-color-surface-default);
+    border-radius: 10px;
+  }
+}
+
+/* Popup tip (the little triangle) */
+.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+  border-left-color: var(--wa-color-surface-border);
+}
+
+.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+  border-right-color: var(--wa-color-surface-border);
+}
+
+.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
+.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip,
+.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
+  border-top-color: var(--wa-color-surface-border);
+}
+
+.maplibregl-popup-anchor-top .maplibregl-popup-tip,
+.maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
+.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
+  border-bottom-color: var(--wa-color-surface-border);
 }
 
 /* Dark mode map adjustments */
@@ -22,10 +55,6 @@
     stroke: white;
   }
 
-  .maplibregl-canvas {
-    background-color: black;
-  }
-
   .maplibregl-ctrl.maplibregl-ctrl-group {
     filter: invert(1);
   }
@@ -34,43 +63,8 @@
   .maplibregl-ctrl-group button:focus:focus-visible {
     box-shadow: 0 0 2px 2px #ff6900;
   }
+
   .maplibregl-ctrl button.maplibregl-ctrl-globe-enabled .maplibregl-ctrl-icon {
     filter: invert(1);
   }
-
-  details.maplibregl-ctrl.maplibregl-ctrl-attrib {
-    background-color: black;
-    color: #999;
-  }
-  details.maplibregl-ctrl.maplibregl-ctrl-attrib a {
-    color: #999;
-  }
-  details.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
-    background-color: #999;
-  }
-
-  div.maplibregl-popup-content {
-    background-color: black;
-    color: #ccc;
-  }
-
-  div.maplibregl-popup-anchor-right div.maplibregl-popup-tip {
-    border-left-color: black;
-  }
-
-  div.maplibregl-popup-anchor-left div.maplibregl-popup-tip {
-    border-right-color: black;
-  }
-
-  div.maplibregl-popup-anchor-bottom div.maplibregl-popup-tip,
-  div.maplibregl-popup-anchor-bottom-right div.maplibregl-popup-tip,
-  div.maplibregl-popup-anchor-bottom-left div.maplibregl-popup-tip {
-    border-top-color: black;
-  }
-
-  div.maplibregl-popup-anchor-top div.maplibregl-popup-tip,
-  div.maplibregl-popup-anchor-top-right div.maplibregl-popup-tip,
-  div.maplibregl-popup-anchor-top-left div.maplibregl-popup-tip {
-    border-bottom-color: black;
-  }
 }

package/dist/collection/components/ogm-map/ogm-map.js

@@ -8,6 +8,7 @@ import PMTilesSource from "../../lib/sources/pmtiles";
 import RasterSource from "../../lib/sources/raster";
 import WmsSource from "../../lib/sources/wms";
 import { getElement } from "../../lib/elements";
+import { referenceError } from "../../lib/errors";
 import CogPreviewer from "../../lib/previewers/cog";
 import GeoJSONPreviewer from "../../lib/previewers/geojson";
 import OpenIndexMapPreviewer from "../../lib/previewers/openindexmap";
@@ -26,6 +27,9 @@ export class OgmMap {
     padding = 0;
     mapIdle;
     mapLoading;
+    previewError;
+    // Guards against reporting more than one error per load attempt
+    errorReported = false;
     // MapLibre map instance and popup instance for feature info display
     map;
     mapTheme;
@@ -50,10 +54,10 @@ export class OgmMap {
         });
         this.getContainer();
         this.addControls();
-        this.map.on('idle', () => this.mapIdle.emit());
         this.map.on('load', () => this.previewSource(this.source));
         this.map.on('mousemove', this.handleHover.bind(this));
         this.map.on('click', this.handleClick.bind(this));
+        this.map.on('error', this.handleMapError.bind(this));
         // View as a globe with atmosphere effects
         this.map.on('style.load', () => {
             this.map.setProjection({ type: 'globe' });
@@ -118,30 +122,57 @@ export class OgmMap {
         // Do nothing if we didn't get passed a source
         if (!source)
             return;
+        // Fresh load attempt: allow one error to be reported again for this source
+        this.errorReported = false;
         // Indicate loading state so we can show the spinner
         this.mapLoading.emit();
-        // Close popup if one is open
-        this.clearFeatureSelection();
-        this.destroyPopup();
-        // Clear existing preview
-        if (this.previewer) {
-            await this.previewer.clearPreview();
-            this.previewer = undefined;
+        try {
+            // Close popup if one is open
+            this.clearFeatureSelection();
+            this.destroyPopup();
+            // Clear existing preview
+            if (this.previewer) {
+                await this.previewer.clearPreview();
+                this.previewer = undefined;
+            }
+            // Get the appropriate previewer for our source and preview it
+            this.previewer = await this.getMapPreviewer(this.map);
+            if (!this.previewer)
+                throw new Error(`No previewer found for source: ${source.constructor.name}`);
+            await this.previewer.preview();
+            // Fit to bounds from the record; the spinner stays up until the map finishes moving
+            const bounds = await this.source.getBounds();
+            if (bounds)
+                await this.fitMapBounds(bounds);
+        }
+        catch (error) {
+            console.error(`Error previewing source ${source.url}:`, error);
+            if (!this.errorReported) {
+                this.errorReported = true;
+                this.previewError.emit(referenceError(error, source.label(), source.url));
+            }
+        }
+        finally {
+            this.mapIdle.emit();
         }
-        // Get the appropriate previewer for our source and preview it
-        this.previewer = await this.getMapPreviewer(this.map);
-        if (!this.previewer)
-            throw new Error(`No previewer found for source: ${source.constructor.name}`);
-        await this.previewer.preview();
-        // Fit to bounds from the record
-        const bounds = await this.source.getBounds();
-        if (bounds)
-            await this.fitMapBounds(bounds);
-        // Emit map idle event to signal that the map is ready
-        this.mapIdle.emit();
     }
-    // Fit the map to the given bounds; return when moving is finished
+    // Surface MapLibre errors tied to the current preview source, skipping the
+    // noise from basemap/glyph/sprite loads, and deduped to a single alert per load attempt.
+    handleMapError(event) {
+        if (this.errorReported || !this.source || !this.previewer)
+            return;
+        if (event.sourceId !== this.previewer.sourceId)
+            return;
+        this.errorReported = true;
+        this.previewError.emit(referenceError(event.error, this.source.label(), this.source.url));
+    }
+    // Fit the map to the given bounds; resolve once the move finishes. Guard the case where the bounds
+    // can't produce a camera - e.g. sidebar padding wider than the viewport, or a hidden, zero-size
+    // inactive tab panel - because then fitBounds won't move, 'moveend' never fires, and awaiting this
+    // promise (and the loading state that depends on it) would hang forever.
     async fitMapBounds(bounds) {
+        if (!this.map.cameraForBounds(bounds))
+            return;
         return new Promise(resolve => {
             this.map.once('moveend', () => resolve());
             this.map.fitBounds(bounds);
@@ -213,7 +244,8 @@ export class OgmMap {
     }
     // Create a new popup and set its content and location
     createPopup(location) {
-        this.popup = new maplibregl.Popup({ maxWidth: 'none', closeButton: false }).setDOMContent(this.attributesEl).setLngLat(location).addTo(this.map);
+        this.popup = new maplibregl.Popup({ maxWidth: 'none' }).setDOMContent(this.attributesEl).setLngLat(location).addTo(this.map);
+        this.popup.on('close', this.clearFeatureSelection.bind(this));
     }
     // Remove popup from the map and clear the reference
     destroyPopup() {
@@ -227,7 +259,7 @@ export class OgmMap {
         return this.previewer?.layerIds || [];
     }
     render() {
-        return h("div", { key: '1c38c0508638813aee913dce29f533845393023b', id: "map", class: `wa-${this.theme}` });
+        return h("div", { key: '9519610af20287a4d7e28470c715accc5ffb8430', id: "map", class: `wa-${this.theme}` });
     }
     static get is() { return "ogm-map"; }
     static get encapsulation() { return "shadow"; }
@@ -337,6 +369,28 @@ export class OgmMap {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "previewError",
+                "name": "previewError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PreviewError",
+                    "resolved": "PreviewError",
+                    "references": {
+                        "PreviewError": {
+                            "location": "import",
+                            "path": "../../lib/errors",
+                            "id": "src/lib/errors.ts::PreviewError",
+                            "referenceLocation": "PreviewError"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/ogm-menubar/ogm-menubar.test.js

@@ -46,4 +46,25 @@ describe('ogm-menubar', () => {
       `);
         });
     });
+    describe('loading indicator', () => {
+        it('shows the spinner while loading', async () => {
+            const { root } = await render(h("ogm-menubar", { loading: true }));
+            const shadowRoot = root.shadowRoot;
+            expect(shadowRoot.querySelector('.loading-spinner')).not.toBeNull();
+        });
+        it('hides the spinner when not loading', async () => {
+            const { root } = await render(h("ogm-menubar", { loading: false }));
+            const shadowRoot = root.shadowRoot;
+            expect(shadowRoot.querySelector('.loading-spinner')).toBeNull();
+        });
+        it('toggles the spinner when the loading prop changes', async () => {
+            const { root, setProps } = await render(h("ogm-menubar", { loading: false }));
+            const shadowRoot = root.shadowRoot;
+            expect(shadowRoot.querySelector('.loading-spinner')).toBeNull();
+            await setProps({ loading: true });
+            expect(shadowRoot.querySelector('.loading-spinner')).not.toBeNull();
+            await setProps({ loading: false });
+            expect(shadowRoot.querySelector('.loading-spinner')).toBeNull();
+        });
+    });
 });

package/dist/collection/components/ogm-preview/ogm-preview.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  height: 100%;
+  position: relative;
+}
+
+ogm-map,
+ogm-image {
+  display: block;
+  height: 100%;
+}
+
+ogm-alerts {
+  position: absolute;
+  inset: 0;
+}