geoblacklight 6.0.0.pre.alpha.7 → 6.0.0.pre.beta.2

data/app/components/geoblacklight/static_map_component.rb

@@ -19,21 +19,10 @@ module Geoblacklight
       @label ||= t("geoblacklight.location")
     end
 
+    # The card is the label and the border; the map inside it is a locator, which is the viewer's own
+    # component for where a single record is.
     def viewer_tag
-      leaflet_options = Geoblacklight.configuration.leaflet_options.deep_dup
-      leaflet_options.sleep.sleep = false
-      tag.div(nil,
-        id: "static-map",
-        class: "viewer border",
-        data: {
-          "controller" => "leaflet-viewer",
-          "leaflet-viewer-basemap-value" => Geoblacklight.configuration.basemap_provider,
-          "leaflet-viewer-dark-basemap-value" => Geoblacklight.configuration.dark_basemap_provider,
-          "leaflet-viewer-page-value" => "STATIC_MAP",
-          "leaflet-viewer-map-geom-value" => @document.geometry.geojson,
-          "leaflet-viewer-options-value" => leaflet_options.to_h,
-          "leaflet-viewer-draw-initial-bounds-value" => true
-        })
+      render Geoblacklight::LocatorMapComponent.new(document: @document)
     end
   end
 end

data/app/components/geoblacklight/truncatable_metadata_field_layout_component.html.erb

@@ -0,0 +1,7 @@
+<%= tag.div class: "truncate-field row", data: truncate_data do %>
+  <dt class="blacklight-<%= @key %> <%= @label_class %>"><%= label %></dt>
+  <% values.each do |v| %>
+    <%= v %>
+  <% end %>
+  <%= tag.dd class: read_more_slot_class %>
+<% end %>

data/app/components/geoblacklight/truncatable_metadata_field_layout_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Geoblacklight
+  # Lays out a metadata field so that it shows only the first few of its values, with a
+  # button to reveal the rest. The label and the values are wrapped in a div so that
+  # app/javascript/geoblacklight/initializers/field_truncation.js can tell which values
+  # belong to the field; it reads the data attributes set here.
+  #
+  # Configure a show field to use it, optionally overriding the limit. Because this is a
+  # layout rather than a field component, it composes with whatever component the field
+  # already uses to render its values:
+  #
+  #   config.add_show_field field_config.subject, label: "Subject", link_to_facet: true,
+  #     layout_component: Geoblacklight::TruncatableMetadataFieldLayoutComponent, limit: 3
+  class TruncatableMetadataFieldLayoutComponent < Blacklight::MetadataFieldLayoutComponent
+    DEFAULT_LIMIT = 5
+
+    # @param read_more_text [String] label for the button that reveals the rest of the values
+    # @param close_text [String] label for the button once the values are revealed
+    # @param limit [Integer] number of values to show before hiding the rest
+    def initialize(read_more_text: nil, close_text: nil, limit: nil, **kwargs)
+      @read_more_text = read_more_text
+      @close_text = close_text
+      @limit = limit
+      super(**kwargs)
+    end
+
+    private
+
+    def truncate_data
+      {
+        read_more_text: @read_more_text || t("geoblacklight.truncate.read_more"),
+        close_text: @close_text || t("geoblacklight.truncate.close"),
+        button_label: t("geoblacklight.truncate.button_label"),
+        limit: @limit || @field.field_config[:limit] || DEFAULT_LIMIT
+      }
+    end
+
+    # A <dl> cannot hold a bare <button>, so the initializer moves the button into this
+    # empty <dd>. It takes the same columns as the values so that it lines up with them.
+    def read_more_slot_class
+      ["read-more-slot", @offset_class, @value_class]
+    end
+  end
+end

data/app/controllers/{relation_controller.rb → relations_controller.rb}

@@ -1,12 +1,14 @@
 # frozen_string_literal: true
 
-class RelationController < ApplicationController
+class RelationsController < ApplicationController
   include Blacklight::Configurable
 
   copy_blacklight_config_from(CatalogController)
 
+  allow_unauthenticated_access raise: false if respond_to?(:allow_unauthenticated_access)
+
   def index
-    @relations = Geoblacklight::Relation::RelationResponse.new(params[:id], repository)
+    @relations = Geoblacklight::Relations::RelationResponse.new(params[:id], repository)
     render layout: !(request.xhr? || request.headers["Turbo-Frame"].present?)
   end
 

data/app/controllers/viewer_record_controller.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# Serves the version of the Solr document that is used by viewers.
+class ViewerRecordController < ApplicationController
+  include Blacklight::Configurable
+
+  copy_blacklight_config_from(CatalogController)
+
+  allow_unauthenticated_access raise: false if respond_to?(:allow_unauthenticated_access)
+
+  rescue_from Blacklight::Exceptions::RecordNotFound do
+    head :not_found
+  end
+
+  def show
+    render json: Geoblacklight::ViewerRecord.new(document, available: helpers.document_available?(document))
+  end
+
+  private
+
+  def document
+    @document ||= repository.find(params[:id]).documents.first
+  end
+
+  def repository
+    @repository ||= blacklight_config.repository_class.new(blacklight_config)
+  end
+end

data/app/helpers/geoblacklight_helper.rb

@@ -24,15 +24,28 @@ module GeoblacklightHelper
   end
 
   def document_available?(document)
-    document.public? || (document.same_institution? && user_signed_in?)
+    document.public? || (document.same_institution? && current_user_signed_in?)
+  end
+
+  def current_user_signed_in?
+    controller.respond_to?(:current_user) && current_user.present?
+  end
+
+  # If you turn off dark mode support, Geoblacklight will display in light mode,
+  # but ogm-viewer will still try to honor a system dark mode preference. This
+  # ensures that everything stays light until you explicitly enable dark mode.
+  def geoblacklight_viewer_theme
+    return if blacklight_config.dark_mode_support
+
+    "light"
   end
 
   ##
-  # Blacklight catalog controller helper method to truncate field value to 150 chars
-  # @param [SolrDocument] args
-  # @return [String]
-  def snippit(args)
-    truncate(Array(args[:value]).flatten.join(" "), length: 150)
+  # Transform markdown into HTML
+  # @param [String] value markdown to transform
+  # @return [ActiveSupport::SafeBuffer] rendered HTML
+  def markdown_to_html(value)
+    Commonmarker.to_html(value).html_safe
   end
 
   ##
@@ -76,4 +89,42 @@ module GeoblacklightHelper
       "index"
     end
   end
+
+  ##
+  # Blacklight view_config.thumbnail_method contract. Renders the document's
+  # configured thumbnail_url as an <img>, or nil if unavailable/disabled.
+  # @param [SolrDocument] document
+  # @param [Hash] image_options
+  # @return [String, nil]
+  def geoblacklight_thumbnail(document, image_options = {})
+    return unless Geoblacklight.configuration.thumbnails_enabled
+
+    url = document.thumbnail_url
+    return if url.blank?
+
+    image_tag url, {loading: "lazy"}.merge(image_options)
+  end
+
+  ##
+  # Blacklight view_config.default_thumbnail (Symbol) contract. Falls back to
+  # a placeholder icon based on the document's resource/data type.
+  # @param [SolrDocument] document
+  # @param [Hash] _image_options unused; icons aren't rendered as <img>
+  # @return [String, nil]
+  def geoblacklight_default_thumbnail(document, _image_options = {})
+    return unless Geoblacklight.configuration.thumbnails_enabled
+
+    default_thumbnail_icon(document)
+  end
+
+  private
+
+  ##
+  # @param [SolrDocument] document
+  # @return [String]
+  def default_thumbnail_icon(document)
+    dataset_type = document.resource_type&.find { |type| type.include?(" data") }&.gsub(" data", "")
+    name = [dataset_type, document.resource_class&.first].compact.first
+    geoblacklight_icon(name)
+  end
 end

data/app/javascript/geoblacklight/controllers/overview_map_controller.js

@@ -0,0 +1,143 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Which row is being hovered
+const RESULTS = "#documents[data-overview-map-results]"
+const ROW = `${RESULTS} [data-document-counter]`
+
+// Controller used for the search results map
+// NOTE: the map is turbo-permanent to prevent flashing on reload
+export default class OverviewMapController extends Controller {
+  static values = {
+    catalogUrl: String,
+  }
+
+  connect() {
+    this.element.searchBounds = this.boundsMarker()?.dataset.bounds || undefined
+    this.load()
+  }
+
+  disconnect() {
+    this.unwatchResults()
+  }
+
+  boundsMarker() {
+    return document.getElementById(`${this.element.id}-bounds`)
+  }
+
+  async load() {
+    // Imported here rather than at the top of the file: this library re-exports everything the
+    // viewer can draw, including the previewers the components themselves load only on demand, so
+    // naming it statically would put all of that on every page that loads GeoBlacklight. Here it
+    // arrives with the map, and only on the pages that have one.
+    const [library] = await Promise.all([import("ogm-viewer/lib"), customElements.whenDefined("ogm-overview")])
+
+    // Taken off the page while we waited, by a Turbo visit to somewhere else
+    if (!this.element.isConnected) return
+
+    // Build previewable objects from every result's geometry
+    this.element.previewers = this.locations(library, this.results())
+
+    // Bind event handling for highlighting search result rows
+    if (this.rows().length) this.watchResults()
+  }
+
+  // Build a resource and previewer (container for geometry) for each search result.
+  // NOTE: results with no geometry still have to take up a number, because the
+  // numbering has to match the search result list.
+  locations({ LocationPreviewer, LocationResource }, results) {
+    const places = results.map(({ place }) => Number(place)).filter((place) => place)
+    const locations = Array.from({ length: places.length ? Math.max(...places) : 0 })
+
+    results.forEach(({ id, place, geometry }) => {
+      if (!place || !geometry) return
+
+      locations[place - 1] = new LocationPreviewer(new LocationResource(id, geometry))
+    })
+
+    return locations
+  }
+
+  // Parse data coming in from GBL in the template. This gets reset on each
+  // load of search results and doesn't use turbo.
+  results() {
+    const json = document.querySelector(RESULTS)?.dataset.overviewMapResults
+    return json ? JSON.parse(json) : []
+  }
+
+  // Execute the search when you drag a box on the map. The event that gets
+  // emitted by the map contains the bounding box as its `detail`.
+  search({ detail: bounds }) {
+    const url = new URL(this.catalogUrlValue, window.location)
+
+    // Go back to page 1, and replace the existing query, if there is one
+    const params = new URL(window.location).searchParams
+    params.delete("page")
+    params.set("bbox", bounds.join(" "))
+    url.search = params.toString()
+
+    this.visit(url)
+  }
+
+  // When you hover over a number on the map, also highlight that row in the
+  // search results (apply .highlighted class)
+  highlight({ detail }) {
+    this.rows().forEach((row) => {
+      const marked = detail && (this.layerId(row) === detail.id || this.place(row) === detail.place)
+      row.classList.toggle("highlighted", Boolean(marked))
+    })
+  }
+
+  // Reverse of highlight(): when you hover over a row in the search results,
+  // focus that number on the map
+  handlePointer = (event) => {
+    const row = event.target instanceof Element ? event.target.closest(ROW) : null
+    this.element.highlighted = row ? this.layerId(row) : undefined
+  }
+
+  watchResults() {
+    document.addEventListener("mouseover", this.handlePointer)
+    document.addEventListener("focusin", this.handlePointer)
+  }
+
+  unwatchResults() {
+    document.removeEventListener("mouseover", this.handlePointer)
+    document.removeEventListener("focusin", this.handlePointer)
+  }
+
+  // Rows are consulted only for the two-way pointer/focus highlight. Geometry, ids and numbering used
+  // to build the map all come from results() instead.
+  rows() {
+    return Array.from(document.querySelectorAll(ROW))
+  }
+
+  // The number shown beside a result, which is the number the map draws for it
+  place(row) {
+    return Number(row.dataset.documentCounter) || undefined
+  }
+
+  layerId(row) {
+    return row.dataset.mapId
+  }
+
+  // Turbo when it's there, and in place when the reader is already on the page they're searching: the
+  // page renders again around them, so their scroll position - and the map they are working in - stays
+  // where it was. A search from anywhere else is a navigation like any other, and lands at the top.
+  visit(url) {
+    if (typeof Turbo === "undefined") {
+      window.location.href = url
+      return
+    }
+
+    if (url.pathname === window.location.pathname) {
+      document.addEventListener(
+        "turbo:before-render",
+        () => {
+          if (Turbo.navigator.currentVisit) Turbo.navigator.currentVisit.scrolled = true
+        },
+        { once: true },
+      )
+    }
+
+    Turbo.visit(url)
+  }
+}

data/app/javascript/geoblacklight/core.js

@@ -1,15 +1,14 @@
 // Initializers
-import initializePopovers from "geoblacklight/initializers/popovers"
-import initializeTooltips from "geoblacklight/initializers/tooltips"
 import initializeTruncation from "geoblacklight/initializers/truncation"
+import initializeFieldTruncation from "geoblacklight/initializers/field_truncation"
 import initializeMetadataDownload from "geoblacklight/initializers/metadata_download"
+import initializeViewerTheme from "geoblacklight/initializers/viewer_theme"
+import initializeViewerRequests from "geoblacklight/initializers/viewer_requests"
 
 // Stimulus controllers
 import ClipboardController from "geoblacklight/controllers/clipboard_controller"
-import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller"
 import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller"
-import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller"
-import SearchResultsController from "geoblacklight/controllers/search_results_controller"
+import OverviewMapController from "geoblacklight/controllers/overview_map_controller"
 
 // Inspired by Blacklight's javascript/blacklight/core.js
 const Geoblacklight = (function () {
@@ -41,17 +40,16 @@ Geoblacklight.listeners().forEach((listener) =>
 )
 
 // Register our initializers
-Geoblacklight.onLoad(initializePopovers)
-Geoblacklight.onLoad(initializeTooltips)
 Geoblacklight.onLoad(initializeTruncation)
+Geoblacklight.onLoad(initializeFieldTruncation)
 Geoblacklight.onLoad(initializeMetadataDownload)
+Geoblacklight.onLoad(initializeViewerTheme)
+Geoblacklight.onLoad(initializeViewerRequests)
 
 // Register our Stimulus controllers
 if (typeof Stimulus !== "undefined") {
-  Stimulus.register("openlayers-viewer", OpenlayersViewerController)
   Stimulus.register("oembed-viewer", OembedViewerController)
-  Stimulus.register("leaflet-viewer", LeafletViewerController)
-  Stimulus.register("search-results", SearchResultsController)
+  Stimulus.register("overview-map", OverviewMapController)
   Stimulus.register("clipboard", ClipboardController)
 } else {
   console.error(

data/app/javascript/geoblacklight/index.js

@@ -1,25 +1,22 @@
 // Stimulus controllers
-import OpenlayersViewerController from "geoblacklight/controllers/openlayers_viewer_controller"
 import OembedViewerController from "geoblacklight/controllers/oembed_viewer_controller"
-import LeafletViewerController from "geoblacklight/controllers/leaflet_viewer_controller"
-import SearchResultsController from "geoblacklight/controllers/search_results_controller"
+import OverviewMapController from "geoblacklight/controllers/overview_map_controller"
 import ClipboardController from "geoblacklight/controllers/clipboard_controller"
 
+// OpenGeoMetadata web components (each import registers the custom element it is named for)
+import "ogm-viewer"
+import "ogm-overview"
+import "ogm-locator"
+
 // GBL core
 import Core from "geoblacklight/core"
-
-// Other modules
-import openLayersBasemaps from "geoblacklight/openlayers/basemaps"
-import leafletBasemaps from "geoblacklight/leaflet/basemaps"
+import { onViewerRequest } from "geoblacklight/initializers/viewer_requests"
 
 export default {
-  OpenlayersViewerController,
   OembedViewerController,
-  LeafletViewerController,
-  SearchResultsController,
+  OverviewMapController,
   ClipboardController,
-  openLayersBasemaps,
-  leafletBasemaps,
   Core,
   onLoad: Core.onLoad,
+  onViewerRequest,
 }

data/app/javascript/geoblacklight/initializers/field_truncation.js

@@ -0,0 +1,62 @@
+// Limit how many values a metadata field shows on the show page
+
+// Class that hides a field's values past its limit and adds a button to reveal them.
+// The hidden values are only hidden visually, so assistive technology is given the whole
+// list up front. That leaves the button useful to sighted users alone, so it is marked
+// aria-disabled and its label says why.
+class FieldTruncator {
+  constructor(element) {
+    this.slot = element.querySelector(":scope > dd.read-more-slot")
+    if (!this.slot) return
+
+    // this field was already truncated on an earlier turbo:load/turbo:frame-load
+    if (this.slot.firstElementChild) return
+
+    // if the field is already short enough, don't truncate it
+    const values = element.querySelectorAll(":scope > dd:not(.read-more-slot)")
+    const limit = parseInt(element.dataset.limit, 10) || 5
+    if (values.length <= limit) return
+
+    // the value at the limit is left in place but clipped, so that the list visibly runs
+    // on past the values it is showing; everything after it is hidden outright
+    this.preview = values[limit]
+    this.hidden = Array.from(values).slice(limit + 1)
+    this.readMoreText = element.dataset.readMoreText
+    this.closeText = element.dataset.closeText
+
+    // add the button
+    this.button = document.createElement("button")
+    this.button.classList.add("btn", "btn-link", "p-0", "border-0", "read-more")
+    this.button.setAttribute("aria-disabled", "true")
+    this.button.setAttribute("aria-label", element.dataset.buttonLabel)
+    this.button.addEventListener("click", this.toggle.bind(this))
+
+    // start collapsed
+    this.collapse()
+    this.slot.append(this.button)
+  }
+
+  toggle() {
+    if (this.expanded) this.collapse()
+    else this.expand()
+  }
+
+  collapse() {
+    this.preview.classList.add("truncate-preview")
+    this.hidden.forEach((value) => value.classList.add("visually-hidden"))
+    this.button.textContent = this.readMoreText
+    this.expanded = false
+  }
+
+  expand() {
+    this.preview.classList.remove("truncate-preview")
+    this.hidden.forEach((value) => value.classList.remove("visually-hidden"))
+    this.button.textContent = this.closeText
+    this.expanded = true
+  }
+}
+
+// Initialize truncation for every metadata field that limits its values
+export default function initializeFieldTruncation() {
+  document.querySelectorAll(".truncate-field").forEach((element) => new FieldTruncator(element))
+}

data/app/javascript/geoblacklight/initializers/metadata_download.js

@@ -28,10 +28,8 @@ export class GeoBlacklightMetadataDownloadButton {
 export default function initializeMetadataDownload() {
   const modal = document.getElementById("blacklight-modal")
 
-  modal.addEventListener("focus", (e) => {
-    if (!Array.from(e.target.classList).includes("show")) {
-      return
-    }
+  // Use Blacklight's dialog-based modal dispatches these custom events
+  modal.addEventListener("show.blacklight.blacklight-modal", (e) => {
     e.target.querySelectorAll(".metadata-body").forEach((el) => {
       el.closest(".modal-content").classList.add("metadata-modal")
     })
@@ -41,10 +39,7 @@ export default function initializeMetadataDownload() {
     })
   })
 
-  modal.addEventListener("blur", (e) => {
-    if (Array.from(e.target.classList).includes("show")) {
-      return
-    }
+  modal.addEventListener("hide.blacklight.blacklight-modal", (e) => {
     e.target.querySelectorAll(".metadata-body").forEach((el) => {
       el.closest(".modal-content").classList.remove("metadata-modal")
     })

data/app/javascript/geoblacklight/initializers/truncation.js

@@ -4,8 +4,11 @@
 // Uses bootstrap's built-in collapse functionality; CSS is used to do the truncation
 class Truncator {
   constructor(element, { lines, id }) {
+    // this element was already processed on an earlier turbo:load/turbo:frame-load
+    if (element.classList.contains("collapse")) return
+
     // if the element is already small enough, don't truncate it
-    const minHeight = lines * parseFloat(window.getComputedStyle(element).fontSize)
+    const minHeight = lines * parseFloat(window.getComputedStyle(element).lineHeight)
     if (element.getBoundingClientRect().height <= minHeight) return
 
     // set a unique ID for the element if it doesn't have one
@@ -13,10 +16,11 @@ class Truncator {
     this.element.id ||= id
     this.readMoreText = element.dataset.readMoreText
     this.closeText = element.dataset.closeText
+    this.element.style.setProperty("--max-lines", lines)
 
     // add the button
     this.button = document.createElement("button")
-    this.button.classList.add("btn", "btn-link", "p-0", "border-0")
+    this.button.classList.add("btn", "btn-link", "p-0", "border-0", "read-more")
     this.button.dataset.bsToggle = "collapse"
     this.button.dataset.bsTarget = `#${this.element.id}`
     this.button.setAttribute("aria-expanded", "false")
@@ -40,7 +44,7 @@ class Truncator {
 export default function initializeTruncation() {
   document.querySelectorAll(".truncate-abstract").forEach((element, i) => {
     new Truncator(element, {
-      lines: 12,
+      lines: parseInt(element.dataset.maxLines, 10) || 8,
       id: `truncate-${i}`,
     })
   })

data/app/javascript/geoblacklight/initializers/viewer_requests.js

@@ -0,0 +1,61 @@
+// Initializer for helping the viewer make authenticated requests for restricted data.
+
+// List of registered request transform functions
+const registered = []
+
+/**
+ * Register a transform, from a built GBL app's JavaScript entrypoint:
+ *
+ *   Geoblacklight.onViewerRequest((url, resourceType) => {
+ *     if (!url.startsWith("https://geo.example.edu/restricted/")) return
+ *     return { headers: { Authorization: `Bearer ${token}` } }
+ *   })
+ *
+ * Answer with `{ headers }`, `{ credentials: "include" }`, or `{ url }` to send the request
+ * somewhere else - a proxy on this application's own origin, say, which can authenticate with the
+ * service using credentials the browser never sees. Return nothing to leave a request alone.
+ *
+ * Always check the URL first; the viewer uses the transform for tile and basemap requests too,
+ * and you probably don't want to redirect or send cookies to those.
+ *
+ * Answer synchronously: this runs inline as the reader pans and zooms, so anything it needs - a
+ * token, say - has to already be in hand rather than fetched here.
+ *
+ * @param {(url: string, resourceType: "metadata" | "tile") => object | undefined} transform
+ */
+export function onViewerRequest(transform) {
+  registered.push(transform)
+}
+
+// URLs where we know we need to send credentials. This gets set via GBL's
+// configuration as a data attribute on the viewer.
+function restrictedOrigins(viewer) {
+  if (!viewer.dataset.restrictedOrigins) return []
+  return JSON.parse(viewer.dataset.restrictedOrigins)
+}
+
+// Pick the transform to use for a given request. The first registered transform
+// that returns a value will be used.
+//
+// If there weren't any registered transforms but we know the request is to a
+// restricted origin, use a default transform that sends credentials (cookies).
+function transformFor(origins) {
+  return (url, resourceType) => {
+    for (const transform of registered) {
+      const transformed = transform(url, resourceType)
+      if (transformed) return transformed
+    }
+
+    if (origins.some((origin) => url.startsWith(origin))) return { credentials: "include" }
+  }
+}
+
+// On load, find all the viewers in the page and set up request transforms for them.
+export default function initializeViewerRequests() {
+  document.querySelectorAll("ogm-viewer").forEach((viewer) => {
+    const origins = restrictedOrigins(viewer)
+    if (!registered.length && !origins.length) return
+
+    viewer.requestTransform = transformFor(origins)
+  })
+}

data/app/javascript/geoblacklight/initializers/viewer_theme.js

@@ -0,0 +1,28 @@
+// Keep any viewers on the page in the same color mode as the rest of the page.
+// Bootstrap's mode lives in data-bs-theme on <html>, set by Blacklight's theme switcher; the viewer
+// takes a "theme" attribute. Blacklight resolves "auto" against prefers-color-scheme before writing
+// the attribute, so the value we read is always either "light" or "dark".
+
+// Apply the current color mode to every viewer and overview on the page
+function syncViewerTheme() {
+  const theme = document.documentElement.getAttribute("data-bs-theme")
+
+  // No attribute means the host app has dark mode support turned off
+  if (!theme) return
+
+  // Every kind of map the viewer offers: the previewer, the map of where a set of records is, and
+  // the map of where one of them is. All three take the same attribute.
+  document
+    .querySelectorAll("ogm-viewer, ogm-overview, ogm-locator")
+    .forEach((viewer) => viewer.setAttribute("theme", theme))
+}
+
+// Follow the switcher after load. <html> outlives Turbo navigation, so one observer covers every
+// page: re-observing the same node with the same options replaces the registration instead of
+// stacking up another one, which is what makes this safe to call on each turbo:load.
+const observer = new MutationObserver(syncViewerTheme)
+
+export default function initializeViewerTheme() {
+  syncViewerTheme()
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-bs-theme"] })
+}