studio-engine 0.82.0 → 0.83.0

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>

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

@@ -0,0 +1,99 @@
+<%# The site footer (Studio.site_footer; docs/SITE_FOOTER.md): brand and social
+    profiles at the left, plain link columns under bold headings, a centred
+    Location band with a live map, then a quiet centred legal line. Rendered by
+    `studio_site_footer`, which passes the resolved `facts`.
+
+    Every part is optional and a missing fact removes its part. The layout lives
+    in studio/site_footer/_assets as scoped CSS (.ftr-*), not Tailwind
+    utilities: a utility a consumer's build has not already seen compiles to
+    nothing, and a footer that silently loses its grid is the result. %>
+<% address = facts[:address] %>
+<% booking = studio_booking? %>
+<% columns = facts[:columns] %>
+<%= studio_site_footer_assets %>
+<footer class="ftr" data-site-footer>
+  <div class="ftr-wrap">
+    <div class="ftr-cols" style="--ftr-n: <%= columns.size %>; --ftr-n-md: <%= [ columns.size, 4 ].min.clamp(1, 4) %>;">
+      <div class="ftr-brand">
+        <% if facts[:logo] || facts[:wordmark] %>
+          <a href="<%= facts[:home_path] %>" class="ftr-home" aria-label="<%= facts[:name] %>">
+            <% if facts[:logo] %>
+              <%= image_tag facts[:logo], class: [ "ftr-logo", ("ftr-logo-invert" if facts[:logo_invert]) ].compact.join(" "), alt: "" %>
+            <% end %>
+            <% if facts[:wordmark] %>
+              <span class="ftr-wordmark"><% if facts[:wordmark][0].present? %><span><%= facts[:wordmark][0] %></span><% end %><span class="ftr-wordmark-accent"><%= facts[:wordmark][1] %></span></span>
+            <% end %>
+          </a>
+        <% end %>
+        <% if facts[:tagline] %>
+          <p class="ftr-tagline"><%= facts[:tagline] %></p>
+        <% end %>
+        <% if facts[:email] %>
+          <p class="ftr-email"><a href="mailto:<%= facts[:email] %>" class="ftr-link"><%= facts[:email] %></a></p>
+        <% end %>
+        <% if facts[:social].any? %>
+          <ul class="ftr-socials" aria-label="Social profiles">
+            <% facts[:social].each do |profile| %>
+              <li>
+                <%# A nil url renders the icon unlinked: the handle is not on record yet. %>
+                <%= content_tag(profile[:url] ? :a : :span,
+                      render("studio/site_footer/social_icon", icon: profile[:icon], label: profile[:label]),
+                      { class: "ftr-social", title: profile[:url] || profile[:unlinked] ? profile[:label] : "#{profile[:label]} (handle needed)",
+                        "aria-label": profile[:label] }
+                        .merge(profile[:url] ? { href: profile[:url], target: "_blank", rel: "noopener" } : { "data-pending": true })) %>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
+      </div>
+
+      <% columns.each do |column| %>
+        <nav aria-label="<%= column[:heading] || "Footer" %>">
+          <% if column[:heading] %>
+            <h2 class="ftr-heading"><%= column[:heading] %></h2>
+          <% end %>
+          <ul class="ftr-list">
+            <% column[:links].each do |link| %>
+              <li><%= render "studio/site_footer/link", link: link, booking: booking %></li>
+            <% end %>
+          </ul>
+        </nav>
+      <% end %>
+    </div>
+
+    <% if address %>
+      <div class="ftr-location" data-footer-location>
+        <h2 class="ftr-location-title">Location</h2>
+        <address class="ftr-address">
+          <a href="<%= address[:directions_url] %>" target="_blank" rel="noopener" class="ftr-link"
+             aria-label="Get directions to <%= address[:full] %>">
+            <%= safe_join([ address[:street], address[:city_line] ].compact, tag.br) %>
+          </a>
+        </address>
+      </div>
+    <% end %>
+  </div>
+
+  <%# Outside the centred column on purpose: the map runs edge to edge. %>
+  <% if address && address[:map] %>
+    <%= render "studio/site_footer/map", address: address, classes: "ftr-map-wide", style: nil, zoom: nil, controls: true %>
+  <% end %>
+
+  <div class="ftr-wrap">
+    <div class="ftr-legal<%= " ftr-legal-ruled" unless address && address[:map] %>">
+      <% if facts[:legal].any? %>
+        <p>
+          <% facts[:legal].each_with_index do |link, index| %>
+            <%= " · " unless index.zero? %><%= render "studio/site_footer/link", link: link, booking: booking %>
+          <% end %>
+        </p>
+      <% end %>
+      <% if facts[:name] %>
+        <p class="ftr-copyright">© <%= Time.current.year %> <%= facts[:name] %></p>
+      <% end %>
+    </div>
+  </div>
+</footer>
+
+<%# The dialog the footer's booking links open. Nothing without a booking_url. %>
+<%= studio_booking_popup(label: facts[:booking_label], title: facts[:booking_title]) %>

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

@@ -0,0 +1,14 @@
+<%# One footer link (a normalized row from Studio::SiteFooter.link). A nil href
+    is a disabled label. An off-site link opens in a new tab, so the visitor
+    keeps the page. A booking link opens the booking popup when the app has a
+    booking_url; its href stays as the fallback. %>
+<% if link[:unlinked] %>
+  <%# Its href was refused (not a relative path, http, https, mailto or tel). %>
+  <span class="ftr-link-plain"><%= link[:label] %></span>
+<% elsif link[:disabled] %>
+  <span class="ftr-link-disabled" aria-disabled="true" title="Coming soon"><%= link[:label] %></span>
+<% else %>
+  <%= link_to link[:label], link[:href], { class: "ftr-link" }
+        .merge(link[:external] ? { target: "_blank", rel: "noopener" } : {})
+        .merge(link[:booking] && booking ? { data: { booking_popup: true, studio_booking: true } } : {}) %>
+<% end %>

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

@@ -0,0 +1,22 @@
+<%# One live map of an address. Leaflet mounts on this element (see
+    studio/site_footer/_assets, which this partial pulls in); until it does, and
+    if it never does, the link inside is the whole map: an address that opens
+    directions. `classes` and `style` size and shape it.
+
+    Leaflet's two files ride the engine's asset pipeline (studio/leaflet.js,
+    studio/leaflet.css). Their URLs travel on the element, so the script fetches
+    them only on a page that has a map. %>
+<%= studio_site_footer_assets %>
+<div class="ftr-map <%= local_assigns[:classes] %>"
+     <% if local_assigns[:style].present? %>style="<%= style %>"<% end %>
+     data-footer-map
+     data-lat="<%= address[:lat] %>" data-lng="<%= address[:lng] %>"
+     data-zoom="<%= local_assigns[:zoom] || address[:zoom] %>"
+     data-controls="<%= local_assigns.fetch(:controls, true) %>"
+     data-leaflet-js="<%= asset_path("studio/leaflet.js") %>"
+     data-leaflet-css="<%= asset_path("studio/leaflet.css") %>"
+     role="region" aria-label="Map of <%= address[:full] %>">
+  <a href="<%= address[:directions_url] %>" target="_blank" rel="noopener" class="ftr-map-fallback">
+    <%= address[:full] %> · Open in Maps
+  </a>
+</div>

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

@@ -0,0 +1,23 @@
+<%# Brand marks for the footer's social row, drawn in currentColor. An icon the
+    engine has no mark for falls back to the label's first letter. %>
+<% case icon %>
+<% when :linkedin, :instagram, :x, :facebook, :youtube %>
+  <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false">
+    <% case icon %>
+    <% when :linkedin %>
+      <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 1 1 0-4.125 2.062 2.062 0 0 1 0 4.125zm1.782 13.019H3.555V9h3.564v11.452z"/>
+    <% when :instagram %>
+      <rect x="3" y="3" width="18" height="18" rx="5" fill="none" stroke="currentColor" stroke-width="2"/>
+      <circle cx="12" cy="12" r="4.2" fill="none" stroke="currentColor" stroke-width="2"/>
+      <circle cx="17.3" cy="6.7" r="1.3" fill="currentColor"/>
+    <% when :x %>
+      <path fill="currentColor" d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
+    <% when :facebook %>
+      <path fill="currentColor" d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12z"/>
+    <% when :youtube %>
+      <path fill="currentColor" d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z"/>
+    <% end %>
+  </svg>
+<% else %>
+  <span class="ftr-social-letter" aria-hidden="true"><%= label.to_s[0].to_s.upcase %></span>
+<% end %>