@projektemacher/storymapjs 0.10.7 → 0.11.0

package/dist/docs/readme.html

@@ -36,6 +36,8 @@
                 <li><a class="button" href="./readme.html">README</a></li>
                 <li><a class="button" href="./migration.html">Migration guide</a></li>
                 <li><a class="button" href="./iiif.html">IIIF docs</a></li>
+                <li><a class="button" href="./authoring.html">Authoring</a></li>
+                <li><a class="button" href="./events.html">Events</a></li>
                 <li><a class="button" href="./api/index.html">API docs</a></li>
                 <li><a class="button" href="../index.html#help">Help</a></li>
             </ul>
@@ -54,7 +56,9 @@ affiliated with, or supported by Northwestern University Knight Lab.</p>
 files (or IIIF Presentation manifests) with TypeScript + Vite + OpenLayers.
 There is no authoring tool — create your storymap JSON by hand or with your
 own code, and see <code>docs/</code> for the migration notes from the original
-Knight Lab release.</p>
+Knight Lab release. The library also exports <code>storymapToManifest()</code>, which
+produces a IIIF manifest from a storymap document (<code>npm run convert:iiif</code>
+does the same from the command line; see <code>docs/storymap-as-iiif-manifest.md</code>).</p>
 <h2>Development</h2>
 <p>See docs/DEVELOPMENT.md to get setup for local development of StoryMapJS. This
 repository is the viewer library only (TypeScript + Vite + OpenLayers);
@@ -72,8 +76,17 @@ value of the storymap&#39;s <code>language</code> option must match the file nam
 <p>Large images served over the IIIF Image API are rendered so when set to be map_as_image the entire image is shown. When set as cartography the zoom will set so that all the markers fit.</p>
 <p>Points are set to only display on mouseover in image mode, but you can set map_as_image to false in the config options to always show the points. The points are hidden when the intent is an image so that nothing obstructs the image the viewer is looking at. Looking at a painting is hard with a bunch of points on it.</p>
 <h2>Map Options</h2>
-<p>To disable connecting lines on maps set <code>map_as_image: true</code> in the storymap
-options (the default <code>false</code> renders cartography).</p>
+<p>To disable connecting lines on maps set <code>show_lines: false</code> in the storymap
+options (the default <code>true</code> renders cartography with <code>show_history_line</code>).
+<code>map_as_image: true</code> is something else: image-map mode, only meaningful with
+<code>map_type: &quot;iiif&quot;</code> (the image itself becomes the map).</p>
+<p><code>storymap.map</code> is the raw OpenLayers map, typed with the re-exported <code>ol</code>
+types, and <code>getBaseLayer()</code>, <code>getOverlayLayers()</code>, <code>getMinimap()</code>,
+<code>getMarkers()</code> and friends hand out the layers the viewer built. Listen for
+<code>imageready</code> to run code against the real imagery, and call
+<code>storymap.dispose()</code> when the embedding view goes away — see
+<a href="./migration.html#reaching-the-map-layers-and-markers">docs/migration-from-knightlab.md</a>
+for the full surface.</p>
 <p>The menubar buttons can be disabled individually:</p>
 <pre><code>show_overview:       false,   // map overview button
 show_back_to_start:  false,   // back to the beginning button
@@ -92,6 +105,72 @@ show_lines:             true,
 show_history_line:      true,
 </code></pre>
 <p>To disable zoom calculation/edit zoom level set calculate_zoom to false in the config options.</p>
+<h3>More data options</h3>
+<p>Beyond the map options above, the storymap data takes <code>overlays[]</code>
+(stacked raster layers over the basemap), <code>tilejson</code> (a TileJSON source for
+the base layer), <code>overview_extent</code> (the overview slide&#39;s bounds),
+<code>keyboard</code> (page-wide arrow-key navigation for multi-viewer pages),
+per-slide <code>marker: { popup, audioBadge }</code> (the active marker&#39;s card, openable
+via <code>storymap.openMarkerPopup(n)</code>, and the narration/audio dot) and
+<code>narration: { url }</code> per slide. <code>autoplay_media</code> is global (wait for slide
+media to end while autoplaying); the per-slide dwell is <code>slidetimeout</code>.
+All are validated
+against <code>schema/storymap.schema.json</code> — read it (or <code>src/types.ts</code>) for the
+full list with defaults.</p>
+<p><code>show_layers_control: true</code> adds a menubar disclosure button listing the
+<code>overlays[]</code> as checkboxes and <code>basemaps[]</code> as basemap radios, so the
+visitor can switch layers without touching code.</p>
+<p><code>theme: &quot;dark&quot;</code> forces the dark palette, <code>&quot;light&quot;</code> pins the light one;
+unset, the widget follows <code>prefers-color-scheme</code>.</p>
+<h3>Slideshow-style tours</h3>
+<p>Slides can carry per-slide presentation for image tours (a stop can restyle
+the view while it is active; everything is optional and validated against
+<code>schema/storymap.schema.json</code>):</p>
+<pre><code>location: {
+    region: [x, y, w, h],  // image-pixel stop (IIIF xywh); negative origins clamp to the canvas
+    rotation: 45,          // view rotation in degrees clockwise
+    filter: { sepia: 40 }, // brightness/contrast/saturate 0-200 (%), hueRotate -180-180 (°), sepia 0-100 (%), blur 0-20 (px)
+    mask: { x: 0.1, y: 0.1, w: 0.8, h: 0.8, opacity: 0.5 },  // spotlight mask (fractions) + color/invert
+    basemap: &quot;osm:bright&quot;, // per-slide basemap (any map_type, IIIF info.json URL or image file)
+},
+narration: { url, loop, offset, play: &quot;auto&quot;|&quot;click&quot;, stopOnExit, stopAllPrevious },
+slidetimeout: 9000,        // per-slide autoplay dwell in ms (0 holds); default is the global autoplay
+imgoverlay: { url, size, extent, opacity },  // image overlay while the slide is active
+</code></pre>
+<p>Audio/video media take the same <code>offset</code>/<code>loop</code>/<code>play</code>/<code>stopOnExit</code> flags
+on the slide&#39;s <code>media</code> object (<code>stopAllPrevious</code> is narration-only).</p>
+<p>When a slide&#39;s IIIF <code>info.json</code> cannot be loaded, <code>iiif: { width, height, fallbackUrl }</code> paints the static image instead of a blank basemap. Without
+stated dimensions the viewer probes the fallback image&#39;s natural size first,
+but only for slideshow tours (15s timeout); other documents keep the logged
+error path. Per-slide static basemaps (<code>image_srv</code> pointing at a plain
+image file, absolute or same-origin relative) probe the same way, and a
+failed <code>info.json</code> fetch falls back to a probed static image in place.</p>
+<p>The player chrome is opt-in storymap options (absent means the default
+layout): <code>textmode: &quot;left&quot;|&quot;right&quot;|&quot;bottom&quot;</code> with <code>textsize</code> (10–80 %,
+bottom dock only — the player drops side-dock sizes too),
+<code>progressbar: &quot;bar&quot;|&quot;dots&quot;|&quot;squares&quot;|&quot;block&quot;|&quot;thinblock&quot;|&quot;off&quot;</code> (<code>true</code>
+means <code>&quot;bar&quot;</code>, <code>false</code> means hidden),
+<code>fxmode: &quot;slide&quot;|&quot;fade&quot;|&quot;none&quot;</code>, <code>mode: &quot;static&quot;</code> (stacked reading list with
+scroll-spy map sync), <code>hudcolor</code>/<code>hudbgcolor</code>/<code>hudopacity</code>,
+<code>shownav</code>/<code>show_headings</code>/<code>show_scrollbars</code>/<code>show_info</code> toggles and
+<code>viewerheight: &quot;400px&quot;</code>.</p>
+<p><strong>IIIF round-trip:</strong> the per-slide fields do survive — <code>rotation</code>,
+<code>filter</code>, <code>mask</code>, <code>basemap</code>, <code>slidetimeout</code>, <code>imgoverlay</code>, <code>provenance</code>
+and the playback bags travel as <code>storymap:</code> terms (see
+<a href="./iiif.html">docs/storymap-as-iiif-manifest.md</a>).
+The player chrome does <strong>not</strong>: it has no IIIF vocabulary and is
+translator-only (a storymap→manifest→storymap cycle drops it).</p>
+<p>These presentation fields render <strong>only for slideshow tours</strong> (documents
+loaded from that format, which set the internal <code>slideshow_source</code> marker).
+Hand-written storymap documents and IIIF manifests keep the long-standing
+rendering even when they name the new keys — captions always show, the
+autoplay interval stays global, the panel keeps its default dock. Hosts may
+pass <code>slideshow_source: true</code> explicitly as an escape hatch (e.g. in tests).</p>
+<p>Slideshow tours (W3C <code>AnnotationCollection</code> documents) load directly — by
+object, file or URL, following <code>next</code> pages — or convert offline with
+<code>npm run convert:slideshow -- [--settings settings.json] [--out out.json] &lt;tour-url-or-file&gt;</code>
+(see <a href="docs/slideshow.md">docs/slideshow.md</a> for the field mapping,
+player-settings handling and loss table).</p>
 <p>Images can now be used in place of map pins.
 Use <code>image</code> inside the location object and include a url to use, together with
 <code>use_custom_marker: true</code> in the location object (or set <code>use_custom_markers: true</code> globally in the storymap options). Same goes for custom icons except you
@@ -115,18 +194,28 @@ map_type: &quot;https://tiles.openfreemap.org/styles/bright&quot;,  // vector st
 </code></pre>
 <p>Any value containing <code>{z}</code> renders as a raster XYZ layer; a path without <code>{z}</code>
 that looks like a URL/path renders as a vector style layer; anything else falls
-back to classic OSM raster.</p>
+back to classic OSM raster — except <code>&quot;none&quot;</code>, which builds no map at all and
+runs the story as text and media only. A full template naming a known provider
+(<code>https://tile.openstreetmap.org/{z}/{x}/{y}.png</code>) is credited to that
+provider; anything else gets the generic &quot;Map data&quot; line (add your own via
+<code>attribution</code>).</p>
 <h3>Switching the basemap at runtime</h3>
 <p><code>storymap.setMapOption(&quot;map_type&quot;, next)</code> / <code>setMapOptions({...})</code> rebuilds the
 main tile layer <strong>and</strong> the minimap (<code>ol/control/OverviewMap</code>) layer, keeping
 the overview fitted to the marker bounds (zoomify/IIIF extents preserved). The
 current slide is re-fitted after the swap.</p>
 <h3>Icons</h3>
-<p>Default pins use the bundled <code>vco-icons</code> font (<code>dist/css/icons/</code>, referenced via
-relative <code>./icons/...</code> URLs from <code>dist/css/storymap.css</code>), so pins render on
-subpath deploys, bundler consumers (Vite leaves absolute <code>/css/...</code> untouched)
-and <code>file://</code>/Electron hosts without extra configuration. Import the stylesheet
-once (<code>import &quot;@projektemacher/storymapjs/css/storymap.css&quot;</code>).</p>
+<p>Default pins use the bundled <code>vco-icons</code> font (<code>dist/css/icons/</code>). The SCSS
+source uses the absolute public path (<code>/css/icons/...</code>) so <code>vite dev</code> serves
+the fonts directly; <code>vite build</code> rewrites them to relative <code>./icons/...</code> in
+<code>dist/css/storymap.css</code>, so pins render on subpath deploys, for bundler
+consumers and on <code>file://</code>/Electron hosts without extra configuration.
+Import the stylesheet once
+(<code>import &quot;@projektemacher/storymapjs/css/storymap.css&quot;</code>).</p>
+<p>Font themes (<code>font_css: &quot;stock:&lt;name&gt;&quot;</code>) resolve via <code>import.meta.url</code>, so
+they only work script-tagged, unbundled. A bundler consumer imports the theme
+instead (<code>import &quot;@projektemacher/storymapjs/css/fonts/font.default.css&quot;</code>)
+and passes <code>font_css: false</code> for no injected <code>&lt;link&gt;</code>.</p>
 <h2>Custom HTML in slide content</h2>
 <p>Slide text is rendered as HTML: the <code>text</code> (and <code>headline</code>) fields accept
 arbitrary markup. If the text contains no <code>&lt;p&gt;</code> tag, it is wrapped in one
@@ -138,27 +227,70 @@ images, lists, emphasis and spans in your slides, e.g.:</p>
 }
 </code></pre>
 <p>The <code>vco-note</code> span renders as a small grey note, like the built-in credits.</p>
-<p><strong>Caution:</strong> the text is rendered raw — it is not sanitized. Only load
-storymaps from sources you trust.</p>
+<p><strong>Caution:</strong> the text is sanitized, but sanitizing is a mitigation rather
+than a guarantee. Prose and media formatting survive (<code>class</code>, <code>alt</code>, <code>width</code>,
+table attributes, and so on), scripts and other executable tags are dropped
+with their contents, event-handler attributes are stripped, every URL
+attribute is checked to be <code>http(s)</code>, and <code>&lt;iframe&gt;</code> embeds are rebuilt into
+a sandboxed, <code>no-referrer</code> element. <code>style</code>, <code>id</code> and <code>name</code> are <em>not</em> allowed,
+and a link&#39;s <code>target</code> is always forced to <code>_blank</code>. The same sanitizer covers
+media credit, media caption, the navigation headline and the map attribution
+line. Still: only load storymaps from sources you trust.</p>
 <h2>GDPR consent for external services</h2>
 <p>Set the <code>consent_required</code> option to <code>true</code> to ask for permission before
 anything is loaded from external services (media embeds such as YouTube,
-Twitter or SoundCloud, map tiles, and external font CSS):</p>
+Twitter or SoundCloud, slide narration audio, map tiles, and external font
+CSS):</p>
 <pre><code>{
     &quot;consent_required&quot;: true,
     ...
 }
 </code></pre>
 <p>Each service asks with an Allow/Deny panel; answering one panel resolves every
-pending panel of the same service. If a decision was already stored in the
-cookie, the panel is skipped entirely. Denied services show a placeholder
+pending panel of the same service. Denied services show a placeholder
 instead of the media, and the map renders without tiles until they are
-allowed. Decisions are stored in a cookie (<code>storymapjs-consent</code>) for 90
-days — clearing cookies asks again.</p>
+allowed.</p>
+<p>Before the story loads, one dialog lists every external service it uses (map
+tiles, media services including slide narration, external fonts) with three
+choices: <strong>Allow all</strong>, <strong>Decline all</strong>, or a decision per service. A story
+with no map (<code>map_type: &quot;none&quot;</code>) has no tile row to answer. The dialog is
+skipped once every service has a stored decision; per-service panels still
+appear for services discovered later (e.g. a preloaded slide).</p>
+<p>Decisions are stored in <code>localStorage</code> under <code>storymapjs-consent</code> and have no
+expiry — clearing site data asks again.</p>
+<p>The consent labels are <strong>not</strong> fully translated. <code>src/language/locale/en.json</code>
+defines every string (34 keys across 29 locale files: English plus 28
+translations). German is missing 1 key, most locales are missing 9 (the audio
+badge, autoplay, layer-switcher, iframe-title and narration-consent strings),
+and five locales (<code>et</code>, <code>is</code>, <code>nn</code>, <code>ur</code>, <code>sr</code>) are missing 18–19 (additionally
+the fullscreen, consent-dialog, error and overview strings). Run
+<code>npm run check:locales</code> to see the current state — it reports the gap per
+locale and is expected to be runnable without failing.</p>
 <h2>Troubleshooting</h2>
 <p>If a storymap fails to render, open the browser console: the viewer logs
 fetch and validation errors (e.g. &quot;could not load storymap data from ...&quot;).
-The <code>error</code> event also fires for programmatic consumers.</p>
+The <code>error</code> event also fires for programmatic consumers. The full event
+reference (payloads included) is <a href="./events.html">docs/events.md</a>.</p>
+<h2>Accessibility</h2>
+<p>Supported, and covered by tests: text alternatives on slide images
+(decorative <code>alt=&quot;&quot;</code> included); real <code>&lt;button&gt;</code> menubar actions and slide
+navigation; polite live-region slide announcements; reduced-motion handling
+of the slide glide and autoplay; an embed page that does not disable zoom;
+sanitized author tables that keep their semantics; slides hidden from
+assistive tech while inactive (<code>aria-hidden</code> + <code>inert</code>), with a layer
+switcher built from native checkboxes, radios and fieldsets; keyboard
+operable map pins and message dismissal; a skip link to the slide content;
+an autoplay pause/resume toggle; slide text pronounced in its own language
+(<code>lang</code>); consent dialogs exposed with labels and focus; media errors
+announced as alerts; and a motion kill-switch that also honors an
+OS reduced-motion toggle flipped mid-story.</p>
+<p>Known limitations (not fixed here): map markers are pointer-only; audio and
+video have no viewer-side captions or transcripts; narration ships without a
+transcript; focus moves only when the layer panel closes with Escape; labels
+and announcements are hardcoded English; several muted text colors fall
+below 4.5:1; third-party embeds are the vendor&#39;s conformance. No VPAT or
+ACR is claimed — §508 conformance is decided per deliverable by an
+external audit.</p>
 <h2>Bundled credentials</h2>
 <p>The viewer ships no credentials. Mapbox/Stadia tiles need a token passed via
 <code>map_access_token</code>, and <code>flickr.com/photos</code> API URLs need <code>api_key_flickr</code>

package/dist/embed/index.html

@@ -7,7 +7,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-touch-fullscreen" content="yes">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../css/storymap.css">
   <style>
     html, body {
@@ -63,6 +63,7 @@
     }
     .storymap-url-card button {
       padding: 8px 16px;
+      min-height: 44px;
       font-size: 1rem;
       border: 1px solid #333;
       border-radius: 4px;
@@ -128,6 +129,8 @@
     const showEmbedError = (message) => {
         const el = document.createElement("div");
         el.className = "vco-consent-blocked";
+        // announce to AT (issue #385 wave)
+        el.setAttribute("role", "alert");
         // inline fallback styles in case the widget CSS did not load
         el.style.cssText =
             "display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:20px;background-color:#fff;color:#333;font-family:sans-serif;text-align:center;";
@@ -173,6 +176,8 @@
         error.id = "storymap-url-error";
         error.className = "storymap-url-error";
         error.hidden = true;
+        // the input describes its error slot (issue #385 wave)
+        input.setAttribute("aria-describedby", "storymap-url-error");
         row.append(input, button);
         form.append(label, row, error);
         card.append(heading, hint, form);
@@ -191,6 +196,8 @@
             } catch {
                 error.textContent = "Please enter a valid URL to a storymap.json file.";
                 error.hidden = false;
+                error.setAttribute("role", "alert");
+                input.setAttribute("aria-invalid", "true");
                 return;
             }
             urlParams.set("url", value);

package/dist/examples/font-css-false.json

@@ -0,0 +1,33 @@
+{
+    "storymap": {
+        "map_type": "osm",
+        "font_css": false,
+        "slides": [
+            {
+                "type": "overview",
+                "date": "",
+                "text": {
+                    "headline": "A story with font loading disabled",
+                    "text": "The host page bundles its own font theme."
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "Second slide",
+                    "text": "<p>No font stylesheet is appended by the viewer.</p>"
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                }
+            }
+        ]
+    }
+}

package/dist/examples/issue-242-nonlatin.json

@@ -0,0 +1,55 @@
+{
+    "storymap": {
+        "call_to_action": false,
+        "map_as_image": false,
+        "map_type": "osm",
+        "slides": [
+            {
+                "date": "",
+                "type": "overview",
+                "text": {
+                    "headline": "Карта мира",
+                    "text": "Обзор на русском языке."
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "Αθήνα",
+                    "text": "Ελληνικό κείμενο για την Αθήνα."
+                },
+                "location": {
+                    "lat": 37.98,
+                    "lon": 23.73
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "ירושלים",
+                    "text": "טקסט עברי לירושלים."
+                },
+                "location": {
+                    "lat": 31.77,
+                    "lon": 35.21
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "القاهرة",
+                    "text": "نص عربي عن القاهرة."
+                },
+                "location": {
+                    "lat": 30.04,
+                    "lon": 31.24
+                }
+            }
+        ]
+    }
+}

package/dist/examples/issue-305-start-at-slide-data.json

@@ -0,0 +1,96 @@
+{
+    "storymap": {
+        "call_to_action": false,
+        "zoomify": false,
+        "map_as_image": false,
+        "map_type": "osm",
+        "slides": [
+            {
+                "date": "",
+                "type": "overview",
+                "text": {
+                    "headline": "Start slide test",
+                    "text": "Overview"
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "One",
+                    "text": "First."
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                },
+                "location": {
+                    "lat": 48.85,
+                    "lon": 2.35,
+                    "zoom": 6,
+                    "line": true
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "Two",
+                    "text": "Second."
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                },
+                "location": {
+                    "lat": 52.52,
+                    "lon": 13.4,
+                    "zoom": 6,
+                    "line": true
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "Three",
+                    "text": "Third."
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                },
+                "location": {
+                    "lat": 41.9,
+                    "lon": 12.49,
+                    "zoom": 6,
+                    "line": true
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "Four",
+                    "text": "Fourth."
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                },
+                "location": {
+                    "lat": 45.46,
+                    "lon": 9.19,
+                    "zoom": 6,
+                    "line": true
+                }
+            }
+        ],
+        "start_at_slide": 3
+    }
+}

package/dist/examples/issue-358-iframe.json

@@ -0,0 +1,57 @@
+{
+    "storymap": {
+        "call_to_action": false,
+        "zoomify": false,
+        "map_as_image": false,
+        "map_type": "osm",
+        "slides": [
+            {
+                "date": "",
+                "type": "overview",
+                "text": {
+                    "headline": "Extra iframe media in text",
+                    "text": "Overview"
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "Iframe in text",
+                    "text": "<p>An extra video below the primary media:</p><iframe src=\"https://example.com/embed/123\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen></iframe>"
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                },
+                "location": {
+                    "lat": 48.85,
+                    "lon": 2.35,
+                    "zoom": 6
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "Unsafe markup is neutralized",
+                    "text": "<p>Scripts and handlers never execute:</p><script>window.__smXss358 = true;</script><p><a href=\"javascript:alert(1)\">bad link</a></p><iframe src=\"javascript:alert(1)\"></iframe>"
+                },
+                "media": {
+                    "url": "",
+                    "caption": "",
+                    "credit": ""
+                },
+                "location": {
+                    "lat": 51.5,
+                    "lon": -0.12,
+                    "zoom": 6
+                }
+            }
+        ]
+    }
+}

package/dist/examples/issue-iiif-geo.json

@@ -0,0 +1,32 @@
+{
+    "storymap": {
+        "map_type": "iiif",
+        "map_bbox": [2.29, 48.85, 2.38, 48.9],
+        "slides": [
+            {
+                "date": "",
+                "text": {
+                    "headline": "Georeferenced IIIF",
+                    "text": "<p>The same IIIF Image API service as <code>iiif-wellcome</code>, but georeferenced: <code>map_bbox</code> instead of <code>map_as_image</code>, so slide locations are real coordinates. This is the case <code>isImageSpace()</code> must report <code>false</code> for.</p>"
+                },
+                "type": "overview"
+            },
+            {
+                "date": "2026",
+                "location": {
+                    "lat": 48.858,
+                    "lon": 2.294,
+                    "text": "<p>A real coordinate, not a pixel offset.</p>"
+                },
+                "text": {
+                    "headline": "A located slide",
+                    "text": "<p>Paris.</p>"
+                }
+            }
+        ],
+        "iiif": {
+            "url": "https://iiif.io/api/image/3.0/example/reference/28473c77da3deebe4375c3a50572d9d3-laocoon/info.json",
+            "attribution": "IIIF fixture repository"
+        }
+    }
+}

package/dist/examples/issue-image-alt.json

@@ -0,0 +1,23 @@
+{
+    "storymap": {
+        "call_to_action": false,
+        "map_as_image": false,
+        "map_type": "osm",
+        "slides": [
+            {
+                "date": "",
+                "type": "overview",
+                "text": {
+                    "headline": "Accessible images",
+                    "text": "Explicit alt text on the overview image."
+                },
+                "media": {
+                    "url": "/examples/assets/placeholder-portrait.jpg",
+                    "alt": "Portrait-oriented placeholder photograph",
+                    "caption": "<p>The caption stays HTML.</p>",
+                    "credit": ""
+                }
+            }
+        ]
+    }
+}

package/dist/examples/issue-image-region.json

@@ -0,0 +1,42 @@
+{
+    "storymap": {
+        "call_to_action": false,
+        "map_type": "iiif",
+        "map_as_image": true,
+        "iiif": {
+            "url": "https://iiif.io/api/image/3.0/example/reference/28473c77da3deebe4375c3a50572d9d3-laocoon/info.json",
+            "attribution": "IIIF fixture repository"
+        },
+        "slides": [
+            {
+                "type": "overview",
+                "date": "",
+                "text": {
+                    "headline": "Image region stops",
+                    "text": "Each slide fits its xywh region on navigation."
+                },
+                "location": {}
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "Head region",
+                    "text": "The view fits the [x, y, w, h] region in image pixels."
+                },
+                "location": {
+                    "region": [800, 100, 700, 700]
+                }
+            },
+            {
+                "date": "",
+                "text": {
+                    "headline": "Torso region",
+                    "text": "Slideshow-style image stops via the IIIF xywh convention."
+                },
+                "location": {
+                    "region": [700, 800, 900, 1100]
+                }
+            }
+        ]
+    }
+}

package/dist/examples/issue-image-srcset.json

@@ -0,0 +1,24 @@
+{
+    "storymap": {
+        "call_to_action": false,
+        "map_as_image": false,
+        "map_type": "osm",
+        "slides": [
+            {
+                "date": "",
+                "type": "overview",
+                "text": {
+                    "headline": "Responsive images",
+                    "text": "The srcset/sizes fields pass through to the img element."
+                },
+                "media": {
+                    "url": "/examples/assets/placeholder-portrait.jpg",
+                    "srcset": "/examples/assets/placeholder-portrait.jpg 480w, /examples/assets/placeholder-landscape.jpg 1024w",
+                    "sizes": "50vw",
+                    "caption": "srcset passthrough",
+                    "credit": ""
+                }
+            }
+        ]
+    }
+}