studio-engine 0.82.1 → 0.83.0

data/app/helpers/studio/site_footer_helper.rb

@@ -0,0 +1,180 @@
+# frozen_string_literal: true
+
+module Studio
+  # The site footer and the booking primitives, as view helpers. See
+  # docs/SITE_FOOTER.md.
+  #
+  #   <%= studio_site_footer %>             the footer, where it should show
+  #   <%= studio_booking_frame %>           Google's booking page, inline
+  #   <%= studio_booking_link "Book a call", class: "btn btn-primary" %>
+  #   <%= studio_booking_popup %>           the dialog those links open
+  #   <%= studio_footer_map %>              the map alone, e.g. on a contact page
+  #
+  # Every one of them renders NOTHING when its configuration is absent
+  # (Studio.site_footer, Studio.booking_url), so a layout or a shared view can
+  # call them before an app has declared anything.
+  #
+  # Prefixed names for the reason Studio::GeoHelper gives: every helper module is
+  # included into every view.
+  module SiteFooterHelper
+    # The resolved facts (Studio::SiteFooter.resolve), or nil. Resolved once per
+    # request.
+    #
+    # A callable that RAISES must not take every page down with it, because the
+    # footer is in the layout. In production the error is logged once per process
+    # and the page renders with no footer; locally it raises, so whoever wrote the
+    # callable sees it.
+    def studio_site_footer_facts
+      return @_studio_site_footer_facts if defined?(@_studio_site_footer_facts)
+
+      @_studio_site_footer_facts =
+        begin
+          Studio.site_footer_for(self)
+        rescue StandardError => error
+          raise if studio_site_footer_raise?
+
+          studio_site_footer_report(error)
+          nil
+        end
+    end
+
+    # Where the footer shows: Studio.site_footer_visible, asked of this view. By
+    # default that is every page for a visitor and, for a signed-in viewer, only
+    # the controllers in Studio.site_footer_controllers (plus the engine's booking
+    # page). Always false for an app that declared no footer.
+    def studio_show_site_footer?
+      return false if studio_site_footer_facts.nil?
+
+      Studio.site_footer_visible.call(self) ? true : false
+    end
+
+    # The one layout line. Renders the footer (and, with a booking_url, the
+    # booking popup) where studio_show_site_footer? says it belongs.
+    def studio_site_footer
+      return unless studio_show_site_footer?
+
+      render "studio/site_footer/footer", facts: studio_site_footer_facts
+    end
+
+    # The live map alone. With no arguments it maps the footer's address;
+    # pass lat:/lng: (and street:/city_line:/directions_url:) to map another.
+    # `class:` and `style:` size it: the element has no height of its own.
+    def studio_footer_map(address = nil, **options)
+      address = address ? Studio::SiteFooter.address(Studio::SiteFooter.symbolize(address)) : studio_site_footer_facts&.dig(:address)
+      return unless address && address[:map]
+
+      render "studio/site_footer/map", address: address, classes: options[:class], style: options[:style],
+                                       zoom: options[:zoom], controls: options.fetch(:controls, true)
+    end
+
+    # ---- booking ------------------------------------------------------------
+
+    def studio_booking? = Studio.booking_url.present?
+
+    # Google's embeddable page for the configured schedule (with gv=true).
+    def studio_booking_embed_url = Studio::Booking.embed_url(Studio.booking_url)
+
+    # Where a booking link goes when the popup cannot open (scripts off, a
+    # modified click, a page with no dialog): the app's booking page when the
+    # engine draws it, else Google's own page.
+    def studio_booking_fallback_path
+      return studio_booking_path if Studio.draw_booking_routes && respond_to?(:studio_booking_path)
+
+      Studio.booking_url
+    end
+
+    # The frame's accessible name.
+    def studio_booking_title(title = nil)
+      title.presence || studio_site_footer_facts&.dig(:booking_title) ||
+        "#{studio_booking_label} with #{studio_site_footer_name}"
+    end
+
+    # What the booking links, the popup and the booking page call the act.
+    def studio_booking_label
+      studio_site_footer_facts&.dig(:booking_label) || Studio::SiteFooter::DEFAULT_BOOKING_LABEL
+    end
+
+    # The site's name: the footer's, else the site identity's title.
+    def studio_site_footer_name
+      studio_site_footer_facts&.dig(:name) || Studio.site_identity[:title]
+    end
+
+    # The inline booking frame. `crop: false` shows Google's whole page at rest.
+    def studio_booking_frame(title: nil, crop: true)
+      return unless studio_booking?
+
+      render "studio/booking/frame", title: studio_booking_title(title), crop: crop
+    end
+
+    # The booking dialog, once per page however often it is asked for. The
+    # footer renders it; call this yourself only on a page that has booking
+    # links and no footer.
+    def studio_booking_popup(label: nil, title: nil)
+      return unless studio_booking?
+      return if @_studio_booking_popup_rendered
+
+      @_studio_booking_popup_rendered = true
+      render "studio/booking/popup",
+             label: label.presence || studio_booking_label,
+             title: studio_booking_title(title)
+    end
+
+    # A link that opens the booking popup in place. Its href is the fallback, so
+    # it is an ordinary link wherever the popup is unavailable. With no
+    # booking_url and no href there is nowhere to go, and it renders nothing.
+    #
+    #   <%= studio_booking_link %>                                  "Schedule a call"
+    #   <%= studio_booking_link "Book a call", class: "btn btn-primary" %>
+    #   <%= studio_booking_link "Book a call", contact_path %>      your own fallback
+    def studio_booking_link(name = nil, href = nil, html_options = nil, **options, &block)
+      html_options, href = href, nil if href.is_a?(Hash)
+      html_options, name = name, nil if name.is_a?(Hash)
+      html_options = (html_options || {}).merge(options)
+      href ||= studio_booking_fallback_path
+      return if href.blank?
+
+      html_options[:data] = { booking_popup: true, studio_booking: true }.merge(html_options[:data] || {}) if studio_booking?
+      content = block ? capture(&block) : (name || studio_booking_label)
+      link_to(content, href, html_options)
+    end
+
+    # ---- once-per-page assets -----------------------------------------------
+
+    def studio_site_footer_assets
+      return if @_studio_site_footer_assets_rendered
+
+      @_studio_site_footer_assets_rendered = true
+      render "studio/site_footer/assets"
+    end
+
+    def studio_booking_assets
+      return if @_studio_booking_assets_rendered
+
+      @_studio_booking_assets_rendered = true
+      render "studio/booking/assets"
+    end
+
+    private
+
+    def studio_site_footer_raise?
+      defined?(Rails) && Rails.respond_to?(:env) && (Rails.env.development? || Rails.env.test?)
+    end
+
+    def studio_site_footer_report(error)
+      return if Studio::SiteFooterHelper.reported
+
+      Studio::SiteFooterHelper.reported = true
+      if defined?(::ErrorLog) && ::ErrorLog.respond_to?(:capture!)
+        ::ErrorLog.capture!(error)
+      elsif defined?(Rails.logger) && Rails.logger
+        Rails.logger.error("[studio.site_footer] #{error.class}: #{error.message}")
+      end
+    rescue StandardError
+      nil
+    end
+
+    class << self
+      attr_accessor :reported
+    end
+  end
+end

data/app/views/studio/booking/_assets.html.erb

@@ -0,0 +1,162 @@
+<%# Styles and scripts for the booking frame and the booking popup. Rendered
+    once per page, by `studio_booking_assets` (the frame and the popup both ask).
+    Scoped CSS for the reason studio/site_footer/_assets gives. %>
+<style>
+  /* The inline frame. Google's page cannot be themed, so the panel is white. */
+  /* content-box, so the heights below are the WINDOW onto the frame whatever
+     reset the host runs: under border-box the border would eat 2px of the crop. */
+  .booking-frame { box-sizing: content-box; margin-inline: auto; overflow: hidden; background: #fff; border-radius: .75rem;
+    border: 1px solid var(--color-border, rgb(127 127 127 / .25));
+    /* A booking link on this page scrolls here; land below the pinned navbar. */
+    scroll-margin-top: calc(var(--nav-bottom, 4rem) + 1rem); }
+  .booking-frame iframe { display: block; width: 100%; border: 0; height: 1200px; }
+  @media (min-width: 640px) {
+    .booking-frame iframe { height: 732px; }
+    .booking-frame-cropped { height: 414px; transition: height .25s ease; }
+    .booking-frame-cropped iframe { margin-top: -205px; transition: margin-top .25s ease; }
+    .booking-frame-cropped.is-open { height: 732px; }
+    .booking-frame-cropped.is-open iframe { margin-top: 0; }
+  }
+  /* Scripts off: the frame never gets its src, so it is hidden and a plain link
+     stands in its place (the <noscript> in studio/booking/_frame). */
+  .booking-frame-noscript { margin: 0; padding: 3rem 1.5rem; text-align: center; color: #111; }
+  .booking-frame-noscript a { color: #4338ca; font-weight: 700; text-decoration: underline; }
+  .booking-frame-note { margin: 1rem 0 0; text-align: center; font-size: .875rem; color: var(--color-text-muted, inherit); }
+  .booking-frame-note a { color: var(--color-primary, #8b5cf6); }
+  .booking-frame-note a:hover { text-decoration: underline; }
+
+  /* The popup. */
+  .booking-popup { width: min(960px, calc(100vw - 2rem)); height: min(800px, calc(100vh - 3rem)); height: min(800px, calc(100dvh - 3rem)); max-width: none; max-height: none;
+    /* Tailwind's reset zeroes a dialog's margin, which is what centres it. */
+    margin: auto; inset: 0;
+    padding: 0; border: 1px solid rgb(127 127 127 / .3); border-radius: .75rem; overflow: hidden;
+    background: var(--color-surface, #fff); color: var(--color-text-body, inherit); }
+  .booking-popup[open] { display: flex; flex-direction: column; }
+  .booking-popup::backdrop { background: rgb(15 12 31 / .72); backdrop-filter: blur(3px); }
+  .booking-popup-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0;
+    padding: .6rem .75rem .6rem 1.1rem; }
+  .booking-popup-title { font-weight: 700; color: var(--color-text, inherit); }
+  /* THE WAY OUT HAS TO BE UNMISSABLE. Once focus is inside Google's frame the
+     Escape key goes to Google, not to this dialog, and nothing here can change
+     that. So Close is a solid, full-size button, not a quiet glyph, and a click
+     anywhere on the backdrop closes too. */
+  /* Ink on surface, inverted: the theme's text colour as the fill and its
+     surface as the label. That pair is the theme's own highest contrast in both
+     modes (white on the primary measured 3.10:1, under the 4.5:1 a label needs). */
+  .booking-popup-close { flex: none; min-height: 2.75rem; padding: .5rem 1.1rem; border-radius: .5rem; border: 0;
+    background: var(--color-text, #111827); color: var(--color-surface, #fff); font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; }
+  .booking-popup-close:hover { filter: brightness(1.12); }
+  .booking-popup-close:focus-visible { outline: 3px solid var(--color-primary, #8b5cf6); outline-offset: 2px; }
+  /* The page behind does not scroll while the dialog is open. Pure CSS, so every
+     way of closing it (the button, the backdrop, Escape) lifts the lock. On html
+     rather than body for the reason studio/modals/_host gives. */
+  html:has(dialog[data-booking-dialog][open]) { overflow: hidden; }
+  .booking-popup iframe { flex: 1; width: 100%; border: 0; background: #fff; }
+  @media (prefers-reduced-motion: reduce) { .booking-frame, .booking-frame iframe { transition: none; } }
+</style>
+
+<script>
+  // The inline frame: assign src after `load`, once the frame is near the
+  // viewport, and open the crop when focus moves into the frame.
+  //
+  // THE GUARDS ARE THE ENGINE'S OWN NAMES, AND THE ELEMENTS ARE THE ENGINE'S OWN
+  // (data-studio-booking), for the reason studio/site_footer/_assets gives for
+  // the map: an app that still renders a local booking script guards it with
+  // the unprefixed names and marks its frame, dialog and links with the same
+  // data-booking-* attributes. Sharing either lets one script stand the other
+  // down across a Turbo visit, or act on elements that are not its own.
+  (function () {
+    if (window.__studioBookingFramesArmed) return;
+    window.__studioBookingFramesArmed = true;
+
+    function arm() {
+      document.querySelectorAll('iframe[data-booking-frame][data-studio-booking][data-src]').forEach(function (frame) {
+        if (frame.__bookingArmed) return;
+        frame.__bookingArmed = true;
+        if (typeof IntersectionObserver !== 'function') { frame.src = frame.dataset.src; return; }
+        var watcher = new IntersectionObserver(function (entries) {
+          if (!entries.some(function (entry) { return entry.isIntersecting; })) return;
+          watcher.disconnect();
+          frame.src = frame.dataset.src;
+        }, { rootMargin: '200px' });
+        watcher.observe(frame);
+      });
+    }
+
+    function armAfterLoad() {
+      if (document.readyState === 'complete') arm();
+      else window.addEventListener('load', arm, { once: true });
+    }
+
+    // Focus moving into the frame is the one signal a cross-origin frame gives
+    // its parent. It means the visitor has started using the calendar.
+    window.addEventListener('blur', function () {
+      var active = document.activeElement;
+      if (!active || !active.matches || !active.matches('iframe[data-booking-frame][data-studio-booking]')) return;
+      var wrap = active.closest('[data-booking-wrap][data-studio-booking]');
+      if (wrap) wrap.classList.add('is-open');
+    });
+
+    document.addEventListener('turbo:load', armAfterLoad);
+    armAfterLoad();
+  })();
+</script>
+
+<script>
+  // Any a[data-booking-popup] link opens the booking dialog instead of leaving
+  // the page. Delegated from document, so it survives Turbo body swaps. A
+  // modified click (new tab, new window) is left alone, and so is everything
+  // when the dialog is missing or <dialog> is unsupported: the link's own href
+  // then takes the visitor to the booking page.
+  //
+  // ON A PAGE THAT ALREADY SHOWS THE INLINE FRAME the link goes to that frame
+  // instead: it scrolls there, opens the crop and moves focus in. A popup would
+  // be a second copy of the calendar on top of the first.
+  (function () {
+    if (window.__studioBookingPopupArmed) return;
+    window.__studioBookingPopupArmed = true;
+
+    document.addEventListener('click', function (event) {
+      var link = event.target.closest && event.target.closest('a[data-booking-popup][data-studio-booking]');
+      if (!link) return;
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+      var inline = document.querySelector('iframe[data-booking-frame][data-studio-booking]');
+      if (inline) {
+        event.preventDefault();
+        var wrap = inline.closest('[data-booking-wrap][data-studio-booking]');
+        if (wrap) wrap.classList.add('is-open');
+        // Before `load` the frame keeps waiting: its own script assigns src then.
+        if (!inline.getAttribute('src') && document.readyState === 'complete') inline.src = inline.dataset.src;
+        var calm = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        (wrap || inline).scrollIntoView({ behavior: calm ? 'auto' : 'smooth', block: 'start' });
+        inline.focus({ preventScroll: true });
+        return;
+      }
+
+      var dialog = document.querySelector('dialog[data-booking-dialog][data-studio-booking]');
+      if (!dialog || typeof dialog.showModal !== 'function') return;
+
+      event.preventDefault();
+      var frame = dialog.querySelector('iframe[data-booking-popup-frame]');
+      if (frame && !frame.getAttribute('src')) frame.src = frame.dataset.src;
+      if (!dialog.open) dialog.showModal();
+    });
+
+    // A click on the backdrop lands on the dialog element itself.
+    document.addEventListener('click', function (event) {
+      if (event.target.matches && event.target.matches('dialog[data-booking-dialog][data-studio-booking]')) event.target.close();
+    });
+
+    // Never snapshot the dialog open: a restored page would show it stuck. And
+    // never snapshot its frame loaded: a restored page would ask Google for a
+    // popup nobody has opened. The src goes back to waiting in data-src.
+    document.addEventListener('turbo:before-cache', function () {
+      var dialog = document.querySelector('dialog[data-booking-dialog][data-studio-booking]');
+      if (!dialog) return;
+      if (dialog.open) dialog.close();
+      var frame = dialog.querySelector('iframe[data-booking-popup-frame]');
+      if (frame) frame.removeAttribute('src');
+    });
+  })();
+</script>

data/app/views/studio/booking/_frame.html.erb

@@ -0,0 +1,41 @@
+<%# Google's inline booking page for the app's appointment schedule
+    (Studio.booking_url). Rendered by `studio_booking_frame`. It fills its
+    container, so it lines up with the cards around it. Google lays it out by
+    width: month beside the slots from about 600px, stacked below that. It
+    cannot be themed, so it sits on a white panel in both themes.
+
+    CROPPED AT REST, WHOLE IN USE. From 640px up the wrapper shows only the
+    "Select an appointment time" box: Google's header above it and its credit
+    lines below are clipped (measured in the frame at 640-862px wide: the box
+    spans 211-613px of a 732px page). The crop cannot stay on, because the form
+    that opens when a slot is picked is a dialog centred in the frame's FULL
+    height (93-640px), so a cropped frame cuts off its title and its Book
+    button. A cross-origin frame reports no clicks, but the parent window does
+    lose focus to it; on that signal the wrapper opens to the full frame.
+    Below 640px Google stacks the month above the slots and nothing is cropped.
+    Those numbers are Google's layout, measured 2026-09-30; `crop: false` drops
+    the crop if that layout moves.
+
+    THE SRC IS DEFERRED, and not with loading="lazy". The frame is a third
+    party, and a frame that starts loading before the window's `load` event
+    holds that event open for as long as Google takes to answer. So the URL
+    waits in data-src and the script in studio/booking/_assets assigns it only
+    AFTER `load`, once the frame is near the viewport.
+
+    WITH SCRIPTS OFF nothing ever assigns the src, so the <noscript> hides the
+    empty frame and puts a plain link to Google's booking page in its place. %>
+<%= studio_booking_assets %>
+<div class="booking-frame<%= " booking-frame-cropped" if crop %>" data-booking-wrap data-studio-booking>
+  <iframe data-booking-frame data-studio-booking
+          data-src="<%= studio_booking_embed_url %>"
+          title="<%= title %>"
+          width="100%" frameborder="0"></iframe>
+  <noscript>
+    <style>.booking-frame { height: auto !important; } .booking-frame iframe { display: none !important; }</style>
+    <p class="booking-frame-noscript"><a href="<%= Studio.booking_url %>" target="_blank" rel="noopener">Open the booking page to pick a time</a></p>
+  </noscript>
+</div>
+<p class="booking-frame-note">
+  Scheduling by Google Calendar. Trouble seeing it?
+  <a href="<%= Studio.booking_url %>" target="_blank" rel="noopener">Open the booking page</a>.
+</p>

data/app/views/studio/booking/_popup.html.erb

@@ -0,0 +1,34 @@
+<%# The booking popup: Google's appointment page in a dialog, opened by any
+    a[data-booking-popup] link on the page (studio/booking/_assets carries the
+    script). Rendered once per page by `studio_booking_popup`; the site footer
+    calls it.
+
+    It does what Google's own scheduling-button script does, without loading
+    that script, its stylesheet and its icon font on every public page: the
+    frame is requested only when the dialog first opens. The links keep their
+    own href, so with scripts off, or on a modified click, they are ordinary
+    links to the booking page.
+
+    A NATIVE <dialog>, NOT THE MODAL HOST (studio/modals/_host), on purpose. The
+    host needs Alpine, its store, and each modal registered inside the host's
+    block in the layout, so the footer would stop being one layout line and an
+    app with no host would have no popup. Its card is padded and scrolls, where
+    this body is a full-bleed frame. And it mounts content through
+    <template x-if>, which would build a new frame, and ask Google again, on
+    every open; this dialog keeps the loaded one. showModal() gives the top
+    layer, the inert page and the focus trap without any of that.
+
+    ESCAPE HAS A LIMIT NOTHING HERE CAN LIFT. Once focus is inside Google's
+    frame, key presses go to Google (it is another origin), so Escape no longer
+    reaches the dialog. The Close button and a click on the backdrop always
+    work, which is why the button is a solid one. %>
+<%= studio_booking_assets %>
+<dialog class="booking-popup" data-booking-dialog data-studio-booking aria-label="<%= label %>">
+  <form method="dialog" class="booking-popup-bar">
+    <span class="booking-popup-title"><%= label %></span>
+    <button type="submit" class="booking-popup-close" data-booking-close>Close ✕</button>
+  </form>
+  <iframe data-booking-popup-frame
+          data-src="<%= studio_booking_embed_url %>"
+          title="<%= title %>" frameborder="0"></iframe>
+</dialog>

data/app/views/studio/bookings/show.html.erb

@@ -0,0 +1,20 @@
+<%# /schedule — the booking page (Studio::BookingsController), drawn by
+    Studio.draw_booking_routes. It is where a booking link lands when the popup
+    cannot open. An app that wants different words around the frame renders
+    `studio_booking_frame` in a view of its own instead. %>
+<% label = studio_booking_label %>
+<% content_for(:title, "#{label} · #{studio_site_footer_name}") %>
+<% content_for(:full_width, true) %>
+
+<section class="booking-page" data-booking-page>
+  <h1 class="booking-page-title"><%= label %></h1>
+  <p class="booking-page-lede">Pick a time that works and it goes straight on the calendar.</p>
+  <%= studio_booking_frame %>
+</section>
+
+<style>
+  .booking-page { max-width: 56rem; margin-inline: auto; padding: 4rem 1rem; }
+  .booking-page-title { margin: 0; text-align: center; font-size: 2.25rem; font-weight: 800; letter-spacing: -.025em;
+    color: var(--color-text, inherit); }
+  .booking-page-lede { margin: .75rem 0 2rem; text-align: center; font-size: 1.125rem; color: var(--color-text-secondary, inherit); }
+</style>

data/app/views/studio/site_footer/_assets.html.erb

@@ -0,0 +1,209 @@
+<%# The site footer's styles and its map mount. Rendered once per page, by
+    `studio_site_footer_assets` (the footer and the map partial both ask).
+
+    SCOPED CSS, NOT UTILITIES. Everything the footer needs to lay out is here,
+    reading the theme's custom properties with a fallback beside each, so it
+    renders the same in an app whose Tailwind build has never seen these views. %>
+<style>
+  .ftr { --ftr-primary: var(--color-primary, #8b5cf6); --ftr-primary-rgb: var(--color-primary-500-rgb, 139 92 246);
+    --ftr-line: var(--color-border, rgb(127 127 127 / .25)); --ftr-ink: var(--color-text, inherit);
+    background: var(--color-surface-alt, transparent); color: var(--color-text-body, inherit);
+    border-top: 1px solid var(--ftr-line); }
+  .ftr a { transition: color .15s ease, opacity .15s ease; }
+  .ftr-wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
+  .ftr-link { color: inherit; opacity: .78; text-decoration: none; overflow-wrap: anywhere; }
+  .ftr-link-disabled { opacity: .38; cursor: not-allowed; }
+  .ftr-link-plain { opacity: .78; }
+  .ftr-link:hover, .ftr-link:focus-visible { opacity: 1; color: var(--ftr-primary); }
+
+  /* Brand, then the link columns. Two tracks on a phone with the brand across
+     both; from 768px the links sit in one row (at most four across); from
+     1024px the brand joins that row. --ftr-n is the number of link columns. */
+  .ftr-cols { display: grid; gap: 3rem 2rem; padding-block: 4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ftr-brand { grid-column: 1 / -1; }
+  @media (min-width: 768px) { .ftr-cols { grid-template-columns: repeat(var(--ftr-n-md, 4), minmax(0, 1fr)); } }
+  @media (min-width: 1024px) {
+    .ftr-cols { grid-template-columns: minmax(0, 1.7fr) repeat(var(--ftr-n, 4), minmax(0, 1fr)); }
+    .ftr-brand { grid-column: auto; }
+  }
+  .ftr-home { display: inline-flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
+  .ftr-logo { width: 3rem; height: 3rem; object-fit: contain; }
+  /* A dark mark on a light page: inverted in light mode, as drawn in dark. */
+  .ftr-logo-invert { filter: invert(1); }
+  .dark .ftr-logo-invert { filter: none; }
+  .ftr-wordmark { font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: .14em;
+    text-transform: uppercase; color: var(--ftr-ink); }
+  .ftr-wordmark span { display: block; }
+  .ftr-wordmark-accent { color: var(--ftr-primary); }
+  .ftr-tagline { margin: 1.5rem 0 0; line-height: 1.625; color: var(--color-text-secondary, inherit); }
+  .ftr-email { margin: .75rem 0 0; }
+  .ftr-socials { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
+  .ftr-social { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
+    border-radius: 9999px; background: var(--ftr-primary); color: #fff; transition: transform .15s ease, filter .15s ease; }
+  a.ftr-social:hover { transform: translateY(-2px); filter: brightness(1.12); }
+  .ftr-social[data-pending] { background: transparent; color: inherit; opacity: .5; border: 1px dashed currentColor; }
+  .ftr-social-letter { font-weight: 700; font-size: .95rem; line-height: 1; }
+  .ftr-heading { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: var(--ftr-ink); }
+  .ftr-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
+
+  .ftr-location { border-top: 1px solid var(--ftr-line); padding-block: 3.5rem 2rem; text-align: center; }
+  .ftr-location-title { margin: 0; font-size: 1.875rem; font-weight: 800; letter-spacing: -.025em; color: var(--ftr-ink); }
+  .ftr-address { margin-top: 1rem; font-style: normal; line-height: 1.625; }
+  .ftr-legal { padding-block: 2rem; text-align: center; font-size: .875rem; }
+  .ftr-legal p { margin: 0; }
+  .ftr-legal .ftr-copyright { margin-top: .5rem; color: var(--color-text-muted, inherit); }
+  /* With no map between them, a rule separates the legal line from what is above. */
+  .ftr-legal-ruled { border-top: 1px solid var(--ftr-line); }
+
+  /* The map. isolation keeps Leaflet's internal z-indexes (up to 1000) under
+     the pinned navbar and every modal. It reads the same properties outside
+     the footer, where .ftr has not set them. */
+  .ftr-map { position: relative; isolation: isolate; overflow: hidden;
+    background: rgb(var(--ftr-primary-rgb, var(--color-primary-500-rgb, 139 92 246)) / .08); }
+  /* One keyless basemap for both themes: in dark mode the light tiles are
+     inverted and pulled toward the site's violet rather than swapped. */
+  .dark .ftr-map .leaflet-tile-pane { filter: invert(1) hue-rotate(205deg) saturate(.55) brightness(.9) contrast(.92); }
+  .ftr-map-wide { width: 100%; height: clamp(16rem, 26vw, 26rem);
+    border-block: 1px solid var(--ftr-line, var(--color-border, rgb(127 127 127 / .25))); }
+  .ftr-map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+    padding: 1rem; text-align: center; font-size: .85rem; color: inherit; }
+  /* Leaflet puts .leaflet-container on the [data-footer-map] element ITSELF, so
+     this is a compound selector, not a descendant one. It keeps the tint behind
+     the tiles (Leaflet's own is #ddd) and the page's font in the controls. */
+  .ftr-map.leaflet-container { background: rgb(var(--ftr-primary-rgb, var(--color-primary-500-rgb, 139 92 246)) / .08); font: inherit; }
+  .ftr-map .leaflet-control-attribution { font-size: 9px; background: rgb(0 0 0 / .45); color: #ddd; }
+  .ftr-map .leaflet-control-attribution a { color: #fff; }
+  .ftr-map .leaflet-bar a { background: var(--color-surface, #fff); color: var(--color-text, #111); border-color: rgb(127 127 127 / .3); }
+  .ftr-pin { position: relative; width: 18px; height: 18px; }
+  .ftr-pin::before, .ftr-pin::after { content: ""; position: absolute; inset: 0; border-radius: 9999px;
+    background: var(--ftr-primary, var(--color-primary, #8b5cf6)); }
+  .ftr-pin::before { animation: ftr-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; opacity: .6; }
+  .ftr-pin::after { border: 3px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .45); }
+  @keyframes ftr-ping { 75%, 100% { transform: scale(3.2); opacity: 0; } }
+  @media (prefers-reduced-motion: reduce) { .ftr-pin::before { animation: none; } .ftr a, .ftr-social { transition: none; } }
+</style>
+
+<script>
+  // Mounts a Leaflet map on every [data-footer-map]. Leaflet (script and
+  // stylesheet) is fetched once, on demand, from the URLs the element carries,
+  // so a page with no map pays nothing for it. The basemap follows the site
+  // theme in CSS (see .dark .leaflet-tile-pane above). Tiles are OpenStreetMap's
+  // keyless ones; a basemap that needs an API key does not belong in a gem.
+  //
+  // NOTHING STARTS BEFORE THE WINDOW'S `load`, AND NOTHING UNTIL THE MAP IS NEAR
+  // THE VIEWPORT. The tiles are a third party's, and a request that starts
+  // before `load` holds that event open for as long as the third party takes to
+  // answer. The map is also at the bottom of every public page, where most
+  // visits never reach: those pay for neither Leaflet nor a single tile.
+  //
+  // THE GUARD IS THE ENGINE'S OWN NAME, AND THE ELEMENTS ARE THE ENGINE'S OWN. An
+  // app that still renders a local footer script (mcritchie-studio, until it
+  // adopts this one) guards it with the unprefixed name and marks its map
+  // [data-footer-map] too. Sharing either would let whichever script ran first
+  // in a Turbo session stand the other down and then fail on its elements: that
+  // app's map carries no data-leaflet-js, so there is nothing here to fetch.
+  (function () {
+    if (window.__studioFooterMapsArmed) return;
+    window.__studioFooterMapsArmed = true;
+
+    var TILES = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+    var ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
+    var maps = [];
+    var loading = null;
+
+    // Checked on every mount, not once: a page visit that rebuilds the head
+    // must not leave a mounted map without its stylesheet.
+    function ensureStylesheet(href) {
+      if (!href || document.querySelector('link[data-studio-leaflet]')) return;
+      var link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+      link.setAttribute('data-studio-leaflet', '');
+      document.head.appendChild(link);
+    }
+
+    function loadLeaflet(src) {
+      if (window.L) return Promise.resolve();
+      if (loading) return loading;
+      loading = new Promise(function (resolve, reject) {
+        var s = document.createElement('script');
+        s.src = src;
+        s.onload = resolve;
+        // A failed fetch must not be remembered: the next visit tries again.
+        s.onerror = function () { loading = null; s.remove(); reject(new Error('leaflet failed to load')); };
+        document.head.appendChild(s);
+      });
+      return loading;
+    }
+
+    function mount(el) {
+      if (el.__footerMap) return;
+      var at = [parseFloat(el.dataset.lat), parseFloat(el.dataset.lng)];
+      if (isNaN(at[0]) || isNaN(at[1])) return;
+      // NO ONE-FINGER DRAG ON A TOUCH DEVICE. The map runs edge to edge, so on a
+      // phone a swipe that starts on it would pan the map instead of scrolling
+      // the page, and there is no gutter to scroll by. With dragging off Leaflet
+      // leaves touch-action at pan-x pan-y: one finger scrolls the page, and a
+      // pinch still zooms the map (touchZoom stays on, and moves it under the
+      // fingers). The zoom buttons and the directions link do the rest.
+      var map = L.map(el, { center: at, zoom: parseInt(el.dataset.zoom, 10) || 15,
+                            scrollWheelZoom: false, attributionControl: true,
+                            dragging: !L.Browser.mobile, touchZoom: true,
+                            zoomControl: el.dataset.controls !== 'false' });
+      map.attributionControl.setPrefix(false);
+      L.tileLayer(TILES, { attribution: ATTRIBUTION, maxZoom: 19 }).addTo(map);
+      L.marker(at, { icon: L.divIcon({ className: '', html: '<div class="ftr-pin"></div>', iconSize: [18, 18], iconAnchor: [9, 9] }),
+                     keyboard: false }).addTo(map);
+      // Page scroll stays page scroll until the visitor commits to the map.
+      map.on('click', function () { map.scrollWheelZoom.enable(); });
+      map.on('mouseout', function () { map.scrollWheelZoom.disable(); });
+      var fallback = el.querySelector('.ftr-map-fallback');
+      if (fallback) { el.__footerFallback = fallback; fallback.remove(); }
+      el.__footerMap = map;
+      maps.push(el);
+    }
+
+    function fetchAndMount(el) {
+      ensureStylesheet(el.dataset.leafletCss);
+      loadLeaflet(el.dataset.leafletJs)
+        .then(function () { if (el.isConnected) mount(el); })
+        .catch(function () { /* the fallback link stays */ });
+    }
+
+    // One observer per map: it fires once, when the map comes within 400px of
+    // the viewport, and is then dropped.
+    function watch(el) {
+      if (el.__footerMap || el.__footerWatch) return;
+      if (typeof IntersectionObserver !== 'function') { fetchAndMount(el); return; }
+      var watcher = new IntersectionObserver(function (entries) {
+        if (!entries.some(function (entry) { return entry.isIntersecting; })) return;
+        watcher.disconnect();
+        el.__footerWatch = null;
+        fetchAndMount(el);
+      }, { rootMargin: '400px' });
+      el.__footerWatch = watcher;
+      watcher.observe(el);
+    }
+
+    function armAll() { document.querySelectorAll('[data-footer-map][data-leaflet-js]').forEach(watch); }
+
+    function armAfterLoad() {
+      if (document.readyState === 'complete') armAll();
+      else window.addEventListener('load', armAll, { once: true });
+    }
+
+    // A cached Turbo snapshot would restore Leaflet's DOM without its state, so
+    // the map is taken down and its fallback link put back before the snapshot.
+    document.addEventListener('turbo:before-cache', function () {
+      maps.forEach(function (el) {
+        var fallback = el.__footerFallback;
+        el.__footerMap.remove();
+        el.__footerMap = null;
+        if (fallback && !el.querySelector('.ftr-map-fallback')) el.appendChild(fallback);
+      });
+      maps = [];
+    });
+    document.addEventListener('turbo:load', armAfterLoad);
+    armAfterLoad();
+  })();
+</script>