studio-engine 0.82.1 → 0.84.0

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

@@ -0,0 +1,232 @@
+<%# 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; }
+  /* A label that is an address (an email address, a URL) stays on one line: a browser
+     would otherwise wrap it after a hyphen or a slash. Its track is at least as
+     wide as it is (the grid below), and the tracks beside it give way. It is
+     broken only on a screen narrower than any phone, where no layout holds it. */
+  .ftr-link-solid { white-space: nowrap; }
+  @media (max-width: 299px) { .ftr-link-solid { white-space: normal; 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 (.ftr-col), on a grid with explicit tracks.
+       below 768px: the brand across the top, the link columns two to a row
+       from 768px:  the brand across the top, every link column in one row
+       from 1024px: the brand in that row too, at 1.7 shares
+     A track is `Nfr`, never `minmax(0, Nfr)`: an fr track is at least as wide as
+     its longest unbreakable word, so the column holding an email address grows
+     to hold it and its neighbours give way. Nothing moves to another row.
+     --ftr-tracks is one track per link column (Studio::SiteFooter.tracks): the
+     first is wider by default, and a column's `width:` hint sets its own.
+     A footer with more than four link columns (.ftr-cols-many) keeps the brand
+     across the top and wraps the columns four to a row. */
+  .ftr-cols { display: grid; gap: 3rem 2rem; padding-block: 4rem; grid-template-columns: 1.2fr 1fr; }
+  .ftr-brand { grid-column: 1 / -1; }
+  /* The smallest phones (320px): two columns still share a row beside an email
+     address, by a narrower gutter and a slightly smaller address. */
+  @media (max-width: 359px) {
+    .ftr-cols { column-gap: 1rem; }
+    .ftr-col .ftr-link-solid { font-size: .875rem; }
+  }
+  @media (min-width: 768px) {
+    .ftr-cols { grid-template-columns: var(--ftr-tracks, 1fr); }
+    .ftr-cols-many { grid-template-columns: repeat(4, 1fr); }
+  }
+  @media (min-width: 1024px) {
+    .ftr-cols:not(.ftr-cols-many) { grid-template-columns: 1.7fr var(--ftr-tracks,); }
+    .ftr-cols:not(.ftr-cols-many) .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; line-height: 2.25rem; 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; line-height: 1.25rem; }
+  .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,100 @@
+<%# 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">
+    <% tracks = Studio::SiteFooter.tracks(columns) %>
+    <div class="ftr-cols<%= " ftr-cols-many" if columns.size > Studio::SiteFooter::MAX_ROW_COLUMNS %>"<% if tracks %> style="--ftr-tracks: <%= tracks %>"<% end %>>
+      <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 ftr-link-solid"><%= 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 class="ftr-col" 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,16 @@
+<%# 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 %>
+  <%# An email address or a URL as a label is one word however many hyphens and
+      slashes it holds: .ftr-link-solid keeps it on one line. %>
+  <%= link_to link[:label], link[:href], { class: Studio::SiteFooter.solid_label?(link[:label]) ? "ftr-link ftr-link-solid" : "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 %>

data/app/views/style/_site_footer.html.erb

@@ -0,0 +1,102 @@
+<%#  The Site footer and booking group of the Tricks board (admin/style).
+     The primitives a public site ends with: the footer, its map, and the Google
+     Calendar booking frame, popup and link (docs/SITE_FOOTER.md,
+     docs/BOOKING.md). Each card
+     gives the helper to call; the preview below them is the real footer partial,
+     rendered with THIS app's facts when it has declared any and with a sample
+     when it has not, so the group is never empty.
+
+     The booking frame is DRAWN, not embedded: a style guide should not ask
+     Google for a calendar every time an admin scrolls past. Its two states, whole
+     and cropped, are quarter-scale drawings of a made-up schedule (a 720px page
+     whose box runs from 200 to 600), cropped by the same arithmetic the real
+     wrapper uses (Studio::Booking.crop). No real schedule's numbers are here. %>
+<%
+  own_facts    = studio_site_footer_facts
+  sample       = {
+    name: Studio.site_identity[:title], tagline: "What this app is, in a line",
+    email: "team@example.com",
+    address: { street: "123 Example St", city_line: "Washington, DC 20024", lat: 38.8894, lng: -77.0352 },
+    social: [ [ "LinkedIn", :linkedin, "https://www.linkedin.com/" ], [ "Instagram", :instagram, nil ], [ "X", :x, "https://x.com/" ] ],
+    columns: [ [ "Contact", [ [ "Schedule a call", "#site-footer", { booking: true } ], [ "Contact", "#site-footer" ] ] ],
+               [ "Company", [ [ "Home", "/" ], [ "Career", nil ], [ "Blog", "https://example.com" ] ] ] ],
+    legal: [ [ "Privacy Policy", "#site-footer" ], [ "Terms of Service", "#site-footer" ] ]
+  }
+  preview      = own_facts || Studio::SiteFooter.resolve(sample, self, logo: Studio.logo_for("Footer Logo"))
+  booking      = studio_booking?
+  own_crop     = studio_booking_crop
+  sample_crop  = Studio::Booking.crop(top: 200, bottom: 600, frame_height: 720)
+  scale        = 0.25
+  # The made-up page, top to bottom: [label, from, to, is it the box?].
+  sample_page  = [ [ "Google's header", 0, 200, false ], [ "Select an appointment time", 200, 600, true ],
+                   [ "Google's credit lines", 600, 720, false ] ]
+%>
+<section id="site-footer" class="space-y-5" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
+  <div class="space-y-1">
+    <h3 class="text-xl font-bold text-heading">Site footer and booking</h3>
+    <p class="text-muted text-sm max-w-2xl">
+      One layout line renders the public site's footer from
+      <code class="font-mono text-2xs">config.site_footer</code>; every part is optional. With
+      <code class="font-mono text-2xs">config.booking_url</code> the same pages get Google Calendar's
+      booking page inline, in a popup and on <code class="font-mono text-2xs">/schedule</code>.
+    </p>
+    <p class="text-muted text-sm" data-site-footer-status>
+      This app:
+      footer <strong class="text-body"><%= own_facts ? "declared" : "not declared" %></strong> &middot;
+      booking <strong class="text-body"><%= booking ? "on" : "off" %></strong> &middot;
+      booking page <strong class="text-body"><%= Studio.draw_booking_routes ? "drawn" : "not drawn" %></strong> &middot;
+      frame <strong class="text-body"><%= own_crop ? "cropped at rest" : "whole at rest" %></strong>
+    </p>
+  </div>
+
+  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+    <%= render layout: "style/specimen",
+          locals: { klass: "studio_site_footer",
+                    usage: %(studio_site_footer   # one line, at the end of the layout body) } do %>
+      <p class="text-sm text-secondary text-center">
+        The footer, where it should show: every page for a visitor, listed controllers when signed in.
+        Previewed below.
+      </p>
+    <% end %>
+
+    <%= render layout: "style/specimen",
+          locals: { klass: "studio_booking_link",
+                    disabled: !booking, disabled_label: "no booking_url",
+                    usage: %(studio_booking_link "Schedule a call", class: "btn btn-primary") } do %>
+      <% if booking %>
+        <%= studio_booking_link "Schedule a call", class: "btn btn-primary" %>
+      <% else %>
+        <span class="btn btn-primary">Schedule a call</span>
+      <% end %>
+    <% end %>
+
+    <% [ [ "studio_booking_frame", nil, "whole",
+           %(studio_booking_frame   # whole at rest: the default, and crop: false),
+           "Whole at rest, the default. Google's page as Google draws it: its header, the slot picker, its credit lines." ],
+         [ "config.booking_crop", sample_crop, "cropped",
+           %(config.booking_crop = { top: 200, bottom: 600, frame_height: 720 }   # bin/booking-crop-measure prints yours),
+           "Cropped at rest to the slot picker, from numbers measured on the app's own schedule. Opens to the whole page when it is used." ]
+       ].each do |klass, crop, state, usage, caption| %>
+      <%= render layout: "style/specimen",
+            locals: { klass: klass, disabled: !booking, disabled_label: "no booking_url", usage: usage } do %>
+        <div class="w-full space-y-3" data-booking-specimen="<%= state %>">
+          <div style="margin-inline: auto; width: 11rem; overflow: hidden; background: #fff; border-radius: .5rem; border: 1px solid rgb(127 127 127 / .35); height: <%= ((crop ? crop[:window] : 720) * scale).round %>px;">
+            <div style="margin-top: -<%= ((crop ? crop[:offset] : 0) * scale).round %>px;">
+              <% sample_page.each do |label, from, to, box| %>
+                <div style="box-sizing: border-box; height: <%= ((to - from) * scale).round %>px; display: flex; align-items: center; justify-content: center; padding: 0 .5rem; text-align: center; font-size: .625rem; line-height: 1.2; color: #374151;<%= box ? " margin: 0 .35rem; border: 1px solid rgb(17 24 39 / .45); border-radius: .35rem; font-weight: 700;" : " background: rgb(17 24 39 / .06);" %>"><%= label %></div>
+              <% end %>
+            </div>
+          </div>
+          <p class="text-sm text-secondary text-center"><%= caption %></p>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="space-y-2">
+    <p class="label-upper"><%= own_facts ? "This app's footer" : "Sample footer (this app declares none)" %></p>
+    <div class="card overflow-hidden" data-site-footer-preview>
+      <%= render "studio/site_footer/footer", facts: preview %>
+    </div>
+  </div>
+</section>

data/app/views/style/_tricks.html.erb

@@ -497,4 +497,7 @@
       <% end %>
     </div>
   </section>
+
+  <!-- Site footer and booking -->
+  <%= render "style/site_footer" %>
 </section>