@mindful-web/marko-web-digital-edition 1.95.0

package/components/replica.marko

@@ -0,0 +1,86 @@
+import { pageImageUrl, pageSrcset, pageAspect } from "../lib";
+import { adEntity, entityAttr } from "../lib/entities";
+
+$ const { manifest, page } = input;
+$ // Hotspot regions carry only id/href/label; the ad item behind each one has the
+$ // advertiser and company the entity needs.
+$ const adItemFor = (r) => manifest.items.find((i) => i.id === r.id) || { id: r.id, advertiserName: r.label, landingUrl: r.href };
+$ const canAccess = input.canAccess !== false;
+$ const previewPages = input.previewPages || 6;
+$ const pageCount = manifest.pdf.pageCount;
+$ const aspect = pageAspect(manifest);
+$ // Unentitled visitors get a cover-and-first-few-pages preview rather than nothing,
+$ // so the "Print view" toggle stays honest for signed-out readers.
+$ const pages = canAccess ? manifest.pages : manifest.pages.slice(0, previewPages);
+
+<!--
+  Replica view: imgix-rendered page images with transparent anchors positioned over
+  the ad regions the ingest pipeline identified. Fractional bboxes become percentage
+  offsets, so a hotspot tracks the image at every breakpoint without JS.
+
+  Only the current page and its neighbours are eagerly loaded; the rest lazy-load as
+  the reader scrolls. The whole issue is 80 pages, so rendering all <img> tags up
+  front with loading="lazy" is cheaper than a JS pager and keeps deep links working
+  with no client code.
+-->
+<div
+  class="edition-replica"
+  data-edition-issue-id=manifest.issueId
+  data-edition-page-count=pageCount
+  data-edition-start-page=page
+>
+  <div class="edition-replica__pages">
+    <for|p| of=pages>
+      $ const near = Math.abs(p.n - page) <= 1;
+      $ const hotspots = p.regions.filter((r) => r.href);
+      <figure class="edition-replica__page" id=`page-${p.n}` data-page=p.n>
+        <div class="edition-replica__frame" style=`aspect-ratio: ${aspect};`>
+          <img
+            class="edition-replica__img"
+            src=pageImageUrl(manifest, p.n, { w: near ? 1200 : 800 })
+            srcset=pageSrcset(manifest, p.n)
+            sizes="(min-width: 1100px) 1000px, 100vw"
+            alt=`${manifest.publication} ${manifest.name}, page ${p.folio}`
+            width=manifest.pdf.baseWidth
+            height=manifest.pdf.baseHeight
+            loading=(near ? "eager" : "lazy")
+            decoding="async"
+          />
+          <for|r| of=hotspots>
+            $ const adItem = adItemFor(r);
+            $ const entity = adEntity(manifest, { ...adItem, printPage: p.n }, { placement: "replica" });
+            <!--
+              The hotspot doubles as the ad's tracking element in the replica: the
+              impression / active-view observer in tracking.marko picks up anything
+              with data-edition-ad-id, and the p1events link listener reads data-p1-*.
+            -->
+            <a
+              class="edition-replica__hotspot"
+              href=r.href
+              target="_blank"
+              rel="nofollow noopener sponsored"
+              title=(r.label || "Advertisement")
+              aria-label=`Advertisement: ${r.label || "advertiser"}`
+              style=`left:${(r.bbox[0] * 100).toFixed(3)}%;top:${(r.bbox[1] * 100).toFixed(3)}%;width:${(r.bbox[2] * 100).toFixed(3)}%;height:${(r.bbox[3] * 100).toFixed(3)}%;`
+              data-edition-ad-id=r.id
+              data-edition-page=p.n
+              data-edition-placement="replica"
+              data-advertiser=(r.label || "")
+              data-edition-entity=JSON.stringify(entity)
+              data-p1-category="Digital Edition Ad Unit"
+              data-p1-action="Click"
+              data-p1-label=(r.label || "")
+              data-p1-entity=entityAttr(entity)
+            ></a>
+          </for>
+        </div>
+        <figcaption class="edition-replica__folio">Page ${p.folio}</figcaption>
+      </figure>
+    </for>
+    <if(!canAccess && pageCount > pages.length)>
+      <p class="edition-replica__more">
+        Showing ${pages.length} of ${pageCount} pages.
+      </p>
+    </if>
+  </div>
+</div>

package/components/replica.marko.js

@@ -0,0 +1,128 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-digital-edition$1.95.0/components/replica.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_lib_module = require("../lib"),
+    lib_module = module_lib_module.default || module_lib_module,
+    pageImageUrl = module_lib_module.pageImageUrl,
+    pageSrcset = module_lib_module.pageSrcset,
+    pageAspect = module_lib_module.pageAspect,
+    module_entities_module = require("../lib/entities"),
+    entities_module = module_entities_module.default || module_entities_module,
+    adEntity = module_entities_module.adEntity,
+    entityAttr = module_entities_module.entityAttr,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    marko_styleAttr = require("marko/dist/runtime/html/helpers/style-attr"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x;
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { manifest, page } = input;
+
+  // Hotspot regions carry only id/href/label; the ad item behind each one has the
+
+  // advertiser and company the entity needs.
+
+  const adItemFor = (r) => manifest.items.find((i) => i.id === r.id) || { id: r.id, advertiserName: r.label, landingUrl: r.href };
+
+  const canAccess = input.canAccess !== false;
+
+  const previewPages = input.previewPages || 6;
+
+  const pageCount = manifest.pdf.pageCount;
+
+  const aspect = pageAspect(manifest);
+
+  // Unentitled visitors get a cover-and-first-few-pages preview rather than nothing,
+
+  // so the "Print view" toggle stays honest for signed-out readers.
+
+  const pages = canAccess ? manifest.pages : manifest.pages.slice(0, previewPages);
+
+  out.w("<div class=\"edition-replica\"" +
+    marko_attr("data-edition-issue-id", manifest.issueId) +
+    marko_attr("data-edition-page-count", pageCount) +
+    marko_attr("data-edition-start-page", page) +
+    "><div class=\"edition-replica__pages\">");
+
+  var $for$0 = 0;
+
+  marko_forOf(pages, function(p) {
+    const near = Math.abs(p.n - page) <= 1;
+
+    const hotspots = p.regions.filter((r) => r.href);
+
+    var $keyScope$0 = "[" + (($for$0++) + "]");
+
+    out.w("<figure class=\"edition-replica__page\"" +
+      marko_attr("id", "page-" + p.n) +
+      marko_attr("data-page", p.n) +
+      "><div class=\"edition-replica__frame\"" +
+      marko_styleAttr(("aspect-ratio: " + aspect) + ";") +
+      "><img class=\"edition-replica__img\"" +
+      marko_attr("src", pageImageUrl(manifest, p.n, {
+        w: near ? 1200 : 800
+      })) +
+      marko_attr("srcset", pageSrcset(manifest, p.n)) +
+      " sizes=\"(min-width: 1100px) 1000px, 100vw\"" +
+      marko_attr("alt", (((manifest.publication + " ") + manifest.name) + ", page ") + p.folio) +
+      marko_attr("width", manifest.pdf.baseWidth) +
+      marko_attr("height", manifest.pdf.baseHeight) +
+      marko_attr("loading", near ? "eager" : "lazy") +
+      " decoding=\"async\">");
+
+    var $for$1 = 0;
+
+    marko_forOf(hotspots, function(r) {
+      const adItem = adItemFor(r);
+
+      const entity = adEntity(manifest, { ...adItem, printPage: p.n }, { placement: "replica" });
+
+      var $keyScope$1 = "[" + ((($for$1++) + $keyScope$0) + "]");
+
+      out.w("<a class=\"edition-replica__hotspot\"" +
+        marko_attr("href", r.href) +
+        " target=\"_blank\" rel=\"nofollow noopener sponsored\"" +
+        marko_attr("title", r.label || "Advertisement") +
+        marko_attr("aria-label", "Advertisement: " + (r.label || "advertiser")) +
+        marko_styleAttr(((((((("left:" + (r.bbox[0] * 100).toFixed(3)) + "%;top:") + (r.bbox[1] * 100).toFixed(3)) + "%;width:") + (r.bbox[2] * 100).toFixed(3)) + "%;height:") + (r.bbox[3] * 100).toFixed(3)) + "%;") +
+        marko_attr("data-edition-ad-id", r.id) +
+        marko_attr("data-edition-page", p.n) +
+        " data-edition-placement=\"replica\"" +
+        marko_attr("data-advertiser", r.label || "") +
+        marko_attr("data-edition-entity", JSON.stringify(entity)) +
+        " data-p1-category=\"Digital Edition Ad Unit\" data-p1-action=\"Click\"" +
+        marko_attr("data-p1-label", r.label || "") +
+        marko_attr("data-p1-entity", entityAttr(entity)) +
+        "></a>");
+    });
+
+    out.w("</div><figcaption class=\"edition-replica__folio\">Page " +
+      marko_escapeXml(p.folio) +
+      "</figcaption></figure>");
+  });
+
+  if ((!canAccess) && (pageCount > pages.length)) {
+    out.w("<p class=\"edition-replica__more\">Showing " +
+      marko_escapeXml(pages.length) +
+      " of " +
+      marko_escapeXml(pageCount) +
+      " pages.</p>");
+  }
+
+  out.w("</div></div>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-digital-edition$1.95.0/components/replica.marko"
+  };

package/components/scroll.marko

@@ -0,0 +1,134 @@
+$ const { manifest } = input;
+
+<!--
+  Continuous-scroll reader for the hub.
+
+  Progressive enhancement only: the hub is complete and fully navigable without this.
+  When it runs, it appends the next article as an HTML fragment (`?partial=1`) as the
+  reader nears the end, and pushStates to that article's real URL — the same URL that
+  serves the article standalone, so what the reader sees and what a crawler indexes
+  never diverge.
+
+  History: each appended article gets one pushState. Scrolling back up replaces the
+  URL (no new history entries) so Back leaves the reader rather than stepping through
+  every article the reader passed.
+-->
+<script>
+  $!{`
+  (function () {
+    var root = document.querySelector('.edition-reflow');
+    if (!root || !window.IntersectionObserver || !window.fetch || !history.pushState) return;
+
+    var flow = root.querySelector('[data-edition-flow]');
+    var queueEl = root.querySelector('[data-edition-queue]');
+    if (!flow || !queueEl) return;
+
+    var queue = [].map.call(
+      queueEl.querySelectorAll('[data-edition-queue-slug]'),
+      function (a) { return { slug: a.getAttribute('data-edition-queue-slug'), href: a.getAttribute('href') }; }
+    );
+    if (!queue.length) return;
+
+    // The queue is the no-JS fallback; once we take over, hide it.
+    queueEl.hidden = true;
+
+    var loading = false;
+    var done = false;
+    var current = null;
+
+    // An article entering the reader counts as a View of that article — the same
+    // event the standalone article page fires on load (see tracking.marko), with the
+    // entity the server stamped on the article element.
+    function track(el, href) {
+      if (!window.p1events) return;
+      var entity = null;
+      try { entity = JSON.parse(el.getAttribute('data-edition-entity')); } catch (e) { return; }
+      if (!entity) return;
+      p1events('track', {
+        action: 'View',
+        category: 'Digital Edition Article',
+        label: el.getAttribute('data-edition-article-slug') || '',
+        entity: entity,
+        props: { path: href, via: 'scroll' }
+      });
+    }
+
+    function setUrl(el, href, slug, push) {
+      if (current === slug) return;
+      current = slug;
+      try { history[push ? 'pushState' : 'replaceState']({ slug: slug }, '', href); } catch (e) { return; }
+      if (push) track(el, href);
+    }
+
+    // Report the article currently filling the viewport.
+    var seen = Object.create(null);
+    var spy = new IntersectionObserver(function (entries) {
+      entries.forEach(function (e) {
+        if (!e.isIntersecting) return;
+        var el = e.target;
+        var slug = el.getAttribute('data-edition-article-slug');
+        var href = el.getAttribute('data-edition-article-href');
+        if (!slug || !href) return;
+        var isNew = !seen[slug];
+        seen[slug] = 1;
+        setUrl(el, href, slug, isNew);
+      });
+    }, { threshold: 0.25, rootMargin: '-20% 0px -60% 0px' });
+
+    [].forEach.call(flow.querySelectorAll('[data-edition-article-slug]'), function (el) { spy.observe(el); });
+
+    function appendNext() {
+      if (loading || done) return;
+      var next = queue.shift();
+      if (!next) { done = true; return; }
+      loading = true;
+      var url = next.href + (next.href.indexOf('?') === -1 ? '?' : '&') + 'partial=1';
+      fetch(url, { credentials: 'same-origin', headers: { 'x-requested-with': 'fetch' } })
+        .then(function (r) { return r.ok ? r.text() : Promise.reject(new Error(String(r.status))); })
+        .then(function (html) {
+          var holder = document.createElement('div');
+          holder.innerHTML = html;
+          // Appending removes the node from the holder, so iterating a live
+          // HTMLCollection with forEach skips every other child — drain instead.
+          while (holder.firstElementChild) {
+            var child = holder.firstElementChild;
+            flow.appendChild(child);
+            if (child.getAttribute && child.getAttribute('data-edition-article-slug')) spy.observe(child);
+          }
+          // Let the impression tracker pick up the ads inside the new article.
+          try { document.dispatchEvent(new CustomEvent('edition:content-appended')); } catch (e) { /* older browsers: impressions only */ }
+          loading = false;
+          // Keep going if the sentinel is still on screen after this insert.
+          if (sentinelVisible) appendNext();
+        })
+        .catch(function () {
+          // Put it back and stand down; the visible queue link still works.
+          queue.unshift(next);
+          loading = false;
+          done = true;
+          queueEl.hidden = false;
+        });
+    }
+
+    var sentinel = document.createElement('div');
+    sentinel.className = 'edition-reflow__sentinel';
+    sentinel.setAttribute('aria-hidden', 'true');
+    flow.parentNode.insertBefore(sentinel, queueEl);
+
+    var sentinelVisible = false;
+    new IntersectionObserver(function (entries) {
+      sentinelVisible = entries[0].isIntersecting;
+      if (sentinelVisible) appendNext();
+    }, { rootMargin: '600px 0px' }).observe(sentinel);
+
+    // Clicking a contents or queue link should behave normally (a real navigation) —
+    // only the scroll position drives the reader.
+    window.addEventListener('popstate', function (e) {
+      var slug = e.state && e.state.slug;
+      if (!slug) return;
+      var el = flow.querySelector('[data-edition-article-slug="' + slug + '"]');
+      if (el) { current = slug; el.scrollIntoView(); }
+    });
+  }());
+  `}
+</script>

package/components/scroll.marko.js

@@ -0,0 +1,23 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-digital-edition$1.95.0/components/scroll.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { manifest } = input;
+
+  out.w("<script>\n  \n  (function () {\n    var root = document.querySelector('.edition-reflow');\n    if (!root || !window.IntersectionObserver || !window.fetch || !history.pushState) return;\n\n    var flow = root.querySelector('[data-edition-flow]');\n    var queueEl = root.querySelector('[data-edition-queue]');\n    if (!flow || !queueEl) return;\n\n    var queue = [].map.call(\n      queueEl.querySelectorAll('[data-edition-queue-slug]'),\n      function (a) { return { slug: a.getAttribute('data-edition-queue-slug'), href: a.getAttribute('href') }; }\n    );\n    if (!queue.length) return;\n\n    // The queue is the no-JS fallback; once we take over, hide it.\n    queueEl.hidden = true;\n\n    var loading = false;\n    var done = false;\n    var current = null;\n\n    // An article entering the reader counts as a View of that article — the same\n    // event the standalone article page fires on load (see tracking.marko), with the\n    // entity the server stamped on the article element.\n    function track(el, href) {\n      if (!window.p1events) return;\n      var entity = null;\n      try { entity = JSON.parse(el.getAttribute('data-edition-entity')); } catch (e) { return; }\n      if (!entity) return;\n      p1events('track', {\n        action: 'View',\n        category: 'Digital Edition Article',\n        label: el.getAttribute('data-edition-article-slug') || '',\n        entity: entity,\n        props: { path: href, via: 'scroll' }\n      });\n    }\n\n    function setUrl(el, href, slug, push) {\n      if (current === slug) return;\n      current = slug;\n      try { history[push ? 'pushState' : 'replaceState']({ slug: slug }, '', href); } catch (e) { return; }\n      if (push) track(el, href);\n    }\n\n    // Report the article currently filling the viewport.\n    var seen = Object.create(null);\n    var spy = new IntersectionObserver(function (entries) {\n      entries.forEach(function (e) {\n        if (!e.isIntersecting) return;\n        var el = e.target;\n        var slug = el.getAttribute('data-edition-article-slug');\n        var href = el.getAttribute('data-edition-article-href');\n        if (!slug || !href) return;\n        var isNew = !seen[slug];\n        seen[slug] = 1;\n        setUrl(el, href, slug, isNew);\n      });\n    }, { threshold: 0.25, rootMargin: '-20% 0px -60% 0px' });\n\n    [].forEach.call(flow.querySelectorAll('[data-edition-article-slug]'), function (el) { spy.observe(el); });\n\n    function appendNext() {\n      if (loading || done) return;\n      var next = queue.shift();\n      if (!next) { done = true; return; }\n      loading = true;\n      var url = next.href + (next.href.indexOf('?') === -1 ? '?' : '&') + 'partial=1';\n      fetch(url, { credentials: 'same-origin', headers: { 'x-requested-with': 'fetch' } })\n        .then(function (r) { return r.ok ? r.text() : Promise.reject(new Error(String(r.status))); })\n        .then(function (html) {\n          var holder = document.createElement('div');\n          holder.innerHTML = html;\n          // Appending removes the node from the holder, so iterating a live\n          // HTMLCollection with forEach skips every other child — drain instead.\n          while (holder.firstElementChild) {\n            var child = holder.firstElementChild;\n            flow.appendChild(child);\n            if (child.getAttribute && child.getAttribute('data-edition-article-slug')) spy.observe(child);\n          }\n          // Let the impression tracker pick up the ads inside the new article.\n          try { document.dispatchEvent(new CustomEvent('edition:content-appended')); } catch (e) { /* older browsers: impressions only */ }\n          loading = false;\n          // Keep going if the sentinel is still on screen after this insert.\n          if (sentinelVisible) appendNext();\n        })\n        .catch(function () {\n          // Put it back and stand down; the visible queue link still works.\n          queue.unshift(next);\n          loading = false;\n          done = true;\n          queueEl.hidden = false;\n        });\n    }\n\n    var sentinel = document.createElement('div');\n    sentinel.className = 'edition-reflow__sentinel';\n    sentinel.setAttribute('aria-hidden', 'true');\n    flow.parentNode.insertBefore(sentinel, queueEl);\n\n    var sentinelVisible = false;\n    new IntersectionObserver(function (entries) {\n      sentinelVisible = entries[0].isIntersecting;\n      if (sentinelVisible) appendNext();\n    }, { rootMargin: '600px 0px' }).observe(sentinel);\n\n    // Clicking a contents or queue link should behave normally (a real navigation) —\n    // only the scroll position drives the reader.\n    window.addEventListener('popstate', function (e) {\n      var slug = e.state && e.state.slug;\n      if (!slug) return;\n      var el = flow.querySelector('[data-edition-article-slug=\"' + slug + '\"]');\n      if (el) { current = slug; el.scrollIntoView(); }\n    });\n  }());\n  \n</script>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-digital-edition$1.95.0/components/scroll.marko"
+  };

package/components/theme.marko

@@ -0,0 +1,73 @@
+$ const defaultTheme = input.defaultTheme || "dark";
+$ const view = input.view === "print" ? "print" : "read";
+
+<!--
+  Reader theme.
+
+  Rendered into the page <head> so the attribute is set before first paint — a
+  server-rendered default plus a client-stored override cannot be done without an
+  inline script, and doing it in the body would flash the wrong theme.
+
+  BOTH views default to DARK, deliberately: the toggle is offered in both, and the
+  stored preference is shared, so a per-view default would flip the theme on a
+  first-time visitor who merely switched Read -> Print without touching the toggle.
+  In the replica, dark mode darkens ONLY the canvas the page images float on —
+  the chrome keeps the light treatment, which is how a PDF reader behaves. The
+  CSS needs to know the view to scope that, so the same pre-paint script also
+  stamps `data-edition-view` on the root.
+
+  An explicit choice is remembered per viewer and wins over the default.
+  localStorage is wrapped because it throws outright in some contexts (private
+  windows, blocked site data) rather than just returning null.
+
+  The click handler is delegated from `document`, so it is safe to attach here
+  before the toolbar button exists.
+-->
+<script>
+  $!{`
+  (function () {
+    var KEY = 'edition:theme';
+    var DEFAULT = ${JSON.stringify(defaultTheme)};
+    var root = document.documentElement;
+    root.setAttribute('data-edition-view', ${JSON.stringify(view)});
+
+    function read() {
+      try { return window.localStorage.getItem(KEY); } catch (e) { return null; }
+    }
+    function write(v) {
+      try { window.localStorage.setItem(KEY, v); } catch (e) { /* non-persistent is fine */ }
+    }
+    function apply(theme) {
+      root.setAttribute('data-edition-theme', theme);
+      var btn = document.querySelector('[data-edition-theme-toggle]');
+      if (btn) {
+        btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
+      }
+    }
+
+    var stored = read();
+    apply(stored === 'dark' || stored === 'light' ? stored : DEFAULT);
+
+    document.addEventListener('click', function (e) {
+      var btn = e.target && e.target.closest && e.target.closest('[data-edition-theme-toggle]');
+      if (!btn) return;
+      e.preventDefault();
+      var next = root.getAttribute('data-edition-theme') === 'dark' ? 'light' : 'dark';
+      apply(next);
+      write(next);
+      if (window.p1events) {
+        p1events('track', {
+          action: 'Theme Toggle',
+          category: 'Digital Edition',
+          label: next,
+        });
+      }
+    });
+
+    // Label the button correctly once it exists, even if the theme never changes.
+    document.addEventListener('DOMContentLoaded', function () {
+      apply(root.getAttribute('data-edition-theme') || DEFAULT);
+    });
+  }());
+  `}
+</script>

package/components/theme.marko.js

@@ -0,0 +1,30 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-digital-edition$1.95.0/components/theme.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_escapeScript = require("marko/dist/runtime/html/helpers/escape-script-placeholder");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const defaultTheme = input.defaultTheme || "dark";
+
+  const view = input.view === "print" ? "print" : "read";
+
+  out.w("<script>" +
+    marko_escapeScript(("\n  " + (((("\n  (function () {\n    var KEY = 'edition:theme';\n    var DEFAULT = " + JSON.stringify(defaultTheme)) + ";\n    var root = document.documentElement;\n    root.setAttribute('data-edition-view', ") + JSON.stringify(view)) + ");\n\n    function read() {\n      try { return window.localStorage.getItem(KEY); } catch (e) { return null; }\n    }\n    function write(v) {\n      try { window.localStorage.setItem(KEY, v); } catch (e) { /* non-persistent is fine */ }\n    }\n    function apply(theme) {\n      root.setAttribute('data-edition-theme', theme);\n      var btn = document.querySelector('[data-edition-theme-toggle]');\n      if (btn) {\n        btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');\n      }\n    }\n\n    var stored = read();\n    apply(stored === 'dark' || stored === 'light' ? stored : DEFAULT);\n\n    document.addEventListener('click', function (e) {\n      var btn = e.target && e.target.closest && e.target.closest('[data-edition-theme-toggle]');\n      if (!btn) return;\n      e.preventDefault();\n      var next = root.getAttribute('data-edition-theme') === 'dark' ? 'light' : 'dark';\n      apply(next);\n      write(next);\n      if (window.p1events) {\n        p1events('track', {\n          action: 'Theme Toggle',\n          category: 'Digital Edition',\n          label: next,\n        });\n      }\n    });\n\n    // Label the button correctly once it exists, even if the theme never changes.\n    document.addEventListener('DOMContentLoaded', function () {\n      apply(root.getAttribute('data-edition-theme') || DEFAULT);\n    });\n  }());\n  ")) + "\n") +
+    "</script>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-digital-edition$1.95.0/components/theme.marko"
+  };

package/components/toc.marko

@@ -0,0 +1,28 @@
+import { editionPath } from "../lib";
+
+$ const { manifest, items, currentSlug } = input;
+
+<!--
+  Contents. These are real links to per-article URLs, which is what makes each story
+  crawlable — the scroll reader intercepts them for a smoother read, but they work
+  fully without JS.
+-->
+<nav class="edition-toc" aria-label="In this issue">
+  <h2 class="edition-toc__title">In this issue</h2>
+  <ol class="edition-toc__list">
+    <for|item| of=items>
+      $ const href = editionPath(manifest.issueId, { slug: item.slug });
+      $ const isCurrent = currentSlug && item.slug === currentSlug;
+      <li class="edition-toc__item">
+        <a
+          class=`edition-toc__link ${isCurrent ? "is-current" : ""}`
+          href=href
+          aria-current=(isCurrent ? "page" : null)
+        >
+          <span class="edition-toc__headline">${item.headline || "Untitled"}</span>
+          <span class="edition-toc__page">p.&nbsp;${item.printPage}</span>
+        </a>
+      </li>
+    </for>
+  </ol>
+</nav>

package/components/toc.marko.js

@@ -0,0 +1,53 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-digital-edition$1.95.0/components/toc.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_lib_module = require("../lib"),
+    lib_module = module_lib_module.default || module_lib_module,
+    editionPath = module_lib_module.editionPath,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_classAttr = require("marko/dist/runtime/html/helpers/class-attr"),
+    marko_attr = require("marko/dist/runtime/html/helpers/attr");
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { manifest, items, currentSlug } = input;
+
+  out.w("<nav class=\"edition-toc\" aria-label=\"In this issue\"><h2 class=\"edition-toc__title\">In this issue</h2><ol class=\"edition-toc__list\">");
+
+  var $for$0 = 0;
+
+  marko_forOf(items, function(item) {
+    const href = editionPath(manifest.issueId, { slug: item.slug });
+
+    const isCurrent = currentSlug && item.slug === currentSlug;
+
+    var $keyScope$0 = "[" + (($for$0++) + "]");
+
+    out.w("<li class=\"edition-toc__item\"><a" +
+      marko_classAttr("edition-toc__link " + (isCurrent ? "is-current" : "")) +
+      marko_attr("href", href) +
+      marko_attr("aria-current", isCurrent ? "page" : null) +
+      "><span class=\"edition-toc__headline\">" +
+      marko_escapeXml(item.headline || "Untitled") +
+      "</span><span class=\"edition-toc__page\">p.&nbsp;" +
+      marko_escapeXml(item.printPage) +
+      "</span></a></li>");
+  });
+
+  out.w("</ol></nav>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-digital-edition$1.95.0/components/toc.marko"
+  };

package/components/toolbar.marko

@@ -0,0 +1,47 @@
+import { editionPath } from "../lib";
+
+$ const { manifest, view } = input;
+$ const readHref = editionPath(manifest.issueId);
+$ const printHref = editionPath(manifest.issueId, { view: "print" });
+$ const showThemeToggle = input.showThemeToggle !== false;
+
+<div class="edition-toolbar">
+  <div class="edition-toolbar__title">
+    <span class="edition-toolbar__pub">${manifest.publication}</span>
+    <span class="edition-toolbar__issue">${manifest.name}</span>
+  </div>
+  <div class="edition-toolbar__actions">
+    <if(showThemeToggle)>
+      <!--
+        Both labels are rendered server-side and CSS shows the one matching the
+        active theme, so there is no flash of the wrong label and the button needs
+        no state of its own. The click handler lives in theme.marko.
+      -->
+      <button
+        type="button"
+        class="edition-toolbar__theme"
+        data-edition-theme-toggle
+        aria-live="polite"
+      >
+        <span class="edition-toolbar__theme__icon" aria-hidden="true">
+          <span data-when="dark">☀</span><span data-when="light">☾</span>
+        </span>
+        <span class="edition-toolbar__theme__label">
+          <span data-when="dark">Light</span><span data-when="light">Dark</span>
+        </span>
+      </button>
+    </if>
+    <nav class="edition-toolbar__views" aria-label="Reading view">
+      <a
+        class=`edition-toolbar__view ${view === "read" ? "is-active" : ""}`
+        href=readHref
+        aria-current=(view === "read" ? "page" : null)
+      >Read</a>
+      <a
+        class=`edition-toolbar__view ${view === "print" ? "is-active" : ""}`
+        href=printHref
+        aria-current=(view === "print" ? "page" : null)
+      >Print view</a>
+    </nav>
+  </div>
+</div>