studio-engine 0.96.2 → 0.97.0

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

@@ -22,13 +22,13 @@
     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.
+    waits in data-src and studio/booking (the booking controller on the
+    wrapper) 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<% if crop %> data-booking-crop style="<%= Studio::Booking.crop_style(crop) %>"<% end %>>
+<div class="booking-frame<%= " booking-frame-cropped" if crop %>" data-booking-wrap data-studio-booking data-studio-controller="booking"<% if crop %> data-booking-crop style="<%= Studio::Booking.crop_style(crop) %>"<% end %>>
   <iframe data-booking-frame data-studio-booking
           data-src="<%= studio_booking_embed_url %>"
           title="<%= title %>"

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

@@ -1,7 +1,7 @@
 <%# 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.
+    a[data-booking-popup] link on the page (studio/booking, started by the
+    booking controller on the dialog). 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
@@ -23,7 +23,7 @@
     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 %>">
+<dialog class="booking-popup" data-booking-dialog data-studio-booking data-studio-controller="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>

data/app/views/studio/emails/_banner_editor.html.erb

@@ -1,28 +1,7 @@
-<%# The live banner editor: typing repaints the banner, and ONE Save button in
-    the header reports whether there is anything to save.
-
-    WHY THE PREVIEW IS PAINTED IN THE BROWSER AND NOT RE-RENDERED
-    The banner is already server-rendered by the mailer's own partial, which is
-    what makes it trustworthy. This does not replace it — it edits the text
-    nodes, the logo and the tint of that same rendered banner in place. The
-    shape, the typography and the scaling stay the server's. Re-rendering a
-    second banner in JavaScript would be a second implementation of the email,
-    and it would drift.
-
-    WHY THE PLACEHOLDER RULE IS REPEATED HERE
-    Studio::Banner fills {name} and {app} server-side. Repeating that in script
-    is a real duplication and worth naming: the alternative is a round trip per
-    keystroke. The rule is small and pinned on both sides — banner_copy_test.rb
-    for Ruby, e2e/email_banner_editor.spec.js for the browser. If they ever
-    disagree, the server is right.
-
-    TOUCHED VS DIRTY — they are different questions and the button answers both.
-    `touched` is "has anyone typed here", and it decides whether the button is
-    SHOWN. `dirty` is "is anything actually different from what is saved", and it
-    decides whether the button is ENABLED. Typing "A" into the subject and
-    deleting it again leaves touched true and dirty false: the button stays
-    visible and goes back to disabled, which is what tells the operator their
-    edit was undone rather than silently swallowed.
+<%# The live banner editor's styles. The editor itself is the
+    emailBannerEditor factory in studio/email_banner, which studio/alpine_shims
+    publishes on every page; this partial carries the tint slider's rules, and
+    studio/emails/show renders it once.
 %>
 <style>
   /* The tint slider, in the app's own palette.
@@ -70,130 +49,3 @@
   .studio-range::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
   .studio-range:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #8E82FE) 35%, transparent); }
 </style>
-<script>
-  (function () {
-    function editor(config) {
-      return {
-        form: Object.assign({}, config.values),
-        initial: Object.assign({}, config.values),
-        targets: config.targets || [],
-        targetId: config.targetId,
-        touched: false,
-        pickerOpen: false,
-
-        init() {
-          this.paint();
-          this.$watch("form", () => { this.touched = true; this.paint(); });
-          this.$watch("targetId", () => this.paint());
-        },
-
-        target() {
-          return this.targets.find((t) => t.id === this.targetId) || this.targets[0] || {};
-        },
-
-        firstName() {
-          return (this.target().name || "").trim().split(/\s+/)[0] || "";
-        },
-
-        // {app} is substituted on both paths because it does not depend on the
-        // recipient — a header reading "Welcome to {app}" must not show a raw
-        // brace here while the inbox shows the app's name.
-        resolve(template, fallback) {
-          var first = this.firstName();
-          var app = config.appName || "";
-          var text = (template || "").replace(/\{app\}/g, app);
-          if (first) return text.replace(/\{name\}/g, first);
-          if (text.indexOf("{name}") !== -1) return (fallback || "").replace(/\{app\}/g, app);
-          return text;
-        },
-
-        headerText() { return this.resolve(this.form.header, this.form.header_fallback); },
-        subjectText() { return this.resolve(this.form.subject, this.form.subject); },
-
-        // Field by field rather than JSON.stringify, whose output depends on key
-        // order — two equal objects can stringify differently.
-        //
-        // No type coercion here, deliberately. An earlier version normalised
-        // booleans on the theory that a checkbox holds true while the server
-        // echoes "1"; a mutation run showed removing it changed nothing, because
-        // the payload sends real booleans for the two checkboxes and strings for
-        // everything else. Unproven defensive code in a comparison that decides
-        // whether a Save button appears is worse than none.
-        dirty() {
-          return Object.keys(this.initial).some(function (k) {
-            return (this.form[k] ?? "") !== (this.initial[k] ?? "");
-          }, this);
-        },
-
-        // The logo has THREE states, and a URL field alone can only express two.
-        // "standard" inherits, "custom" uses what this app uploaded, "hidden" is
-        // the deliberate no-logo answer that blank cannot say.
-        logoMode() {
-          if (this.form.hide_logo === true || this.form.hide_logo === "1") return "hidden";
-          if (config.uploadedLogo) return "custom";
-          return "standard";
-        },
-
-        setLogoMode(mode) {
-          this.form.hide_logo = mode === "hidden";
-        },
-
-        currentLogo() {
-          if (this.logoMode() === "hidden") return "";
-          return config.uploadedLogo || config.inheritedLogo || "";
-        },
-
-        // The slider's own fill, as a percentage string for --range-fill.
-        scrimFill() {
-          var percent = parseInt(this.form.scrim_percent, 10);
-          if (isNaN(percent)) percent = config.defaultScrim;
-          return Math.min(Math.max(percent, 0), 100) + "%";
-        },
-
-        scrimCss() {
-          var percent = parseInt(this.form.scrim_percent, 10);
-          if (isNaN(percent)) percent = config.defaultScrim;
-          percent = Math.min(Math.max(percent, 0), 100);
-          return "rgba(24,16,64," + (percent / 100) + ")";
-        },
-
-        paint() {
-          var root = this.$root;
-          var header = root.querySelector("[data-banner-header]");
-          var subtext = root.querySelector("[data-banner-subtext]");
-          var logo = root.querySelector("[data-banner-logo]");
-          var scrim = root.querySelector("[data-banner-scrim]");
-
-          if (header) header.textContent = this.headerText();
-          if (subtext) subtext.textContent = this.form.subtext || "";
-          if (scrim) scrim.style.backgroundColor = this.scrimCss();
-          if (logo) {
-            var url = this.currentLogo();
-            if (url) {
-              if (logo.getAttribute("src") !== url) logo.setAttribute("src", url);
-              logo.style.display = "block";
-            } else {
-              logo.style.display = "none";
-            }
-          }
-        },
-
-        // Every visible field is x-model bound and carries no name; the hidden
-        // form below mirrors them. One submit writes the whole page.
-        save() {
-          if (!this.dirty()) return;
-          this.$refs.saveForm.requestSubmit();
-        }
-      };
-    }
-
-    window.emailBannerEditor = editor;
-    if (typeof Alpine !== "undefined") {
-      Alpine.data("emailBannerEditor", editor);
-    } else {
-      document.addEventListener("alpine:init", function () {
-        Alpine.data("emailBannerEditor", editor);
-      });
-    }
-  })();
-</script>

data/app/views/studio/emails/_banner_scale.html.erb

@@ -1,56 +1,5 @@
-<%# Scales the 600px email banner down to whatever width its frame has.
-
-    Why this needs script at all: the banner is the EMAIL's own markup, a fixed
-    600px table, and it must stay that way — an inbox has no responsive layout,
-    so making it fluid here would mean previewing markup no one receives. The
-    frame beside it is fluid. Nothing in CSS converts a fixed-width box into a
-    fluid one without knowing the container's width, so the width is read and a
-    transform applied.
-
-    What it does NOT do: move anything. It sets a scale on a box whose height is
-    already reserved by `aspect-ratio`, so no reflow follows and there is no
-    paint-time jump — the failure mode of measuring layout in script.
-
-    Degrades to an unscaled, clipped preview if script never runs. That is the
-    behaviour this replaced, so a failure here costs the improvement, not the page.
-%>
-<script>
-  (function () {
-    function fit(preview) {
-      var frame = preview.parentElement;
-      if (!frame) return;
-      var natural = parseFloat(preview.dataset.bannerWidth) || 600;
-      var available = frame.clientWidth;
-      if (!available) return;
-      // Never scale UP past the real size: at 1:1 this preview is exactly the
-      // 600px the recipient sees, and blowing it past that would show the
-      // operator a banner larger than any inbox renders.
-      var scale = Math.min(available / natural, 1);
-      preview.style.transform = "scale(" + scale + ")";
-    }
-
-    function fitAll() {
-      document.querySelectorAll("[data-email-banner-preview]").forEach(fit);
-    }
-
-    // ResizeObserver rather than a resize listener: the frame changes width when
-    // a sidebar opens or the grid reflows, neither of which resizes the window.
-    var observer = typeof ResizeObserver === "function" ? new ResizeObserver(fitAll) : null;
-
-    function start() {
-      fitAll();
-      if (!observer) return;
-      observer.disconnect();
-      document.querySelectorAll("[data-email-banner-frame]").forEach(function (frame) {
-        observer.observe(frame);
-      });
-    }
-
-    // turbo:load as well as DOMContentLoaded — a Turbo visit swaps the body
-    // without firing DOMContentLoaded, which would leave the preview at its
-    // unscaled 600px until a full reload.
-    document.addEventListener("DOMContentLoaded", start);
-    document.addEventListener("turbo:load", start);
-    if (document.readyState !== "loading") start();
-  })();
-</script>
+<%# Scales the 600px email banner down to whatever width its frame has. The
+    fit is studio/email_banner_scale, started by the email-banner-scale
+    controller on this anchor. Render it once per page that shows a banner
+    preview. Without script the preview is unscaled and clipped. %>
+<template data-studio-controller="email-banner-scale"></template>

data/app/views/studio/emails/index.html.erb

@@ -147,7 +147,6 @@
   </div>
 
   <%= render "studio/emails/banner_scale" %>
-  <%= render "studio/emails/recipient_repaint" %>
 
   <p class="text-xs text-muted mt-4">
     Banners render full-bleed at 600px wide inside the email card. The crop is

data/app/views/studio/geo_settings/edit.html.erb

@@ -52,7 +52,7 @@
 </style>
 
 <div class="max-w-3xl mx-auto"
-  data-geo-page
+  data-geo-page data-studio-controller="geo-settings"
   data-geo-home="<%= home_country %>"
   data-geo-country="<%= geo_country %>"
   data-geo-subdivision="<%= geo_state %>"
@@ -264,102 +264,6 @@
   <% end %>
 </div>
 
-<script>
-  // LIVE PREVIEW. Tick your own region and the navbar badge (and the Blocked?
-  // tile) answer immediately, before anything is saved — so an operator can see
-  // what a rule will do to a real visitor rather than saving to find out.
-  //
-  // This mirrors Studio::Geo.blocked? on the client, deliberately and narrowly:
-  // same three rules, same order, same fail-closed narrowing. It decides nothing
-  // — the server re-decides on save and on every request afterwards — but a
-  // mirror can still drift, so turf-monster's browser lane asserts the painted
-  // result against a policy the server also enforces.
-  (function () {
-    var page = document.querySelector("[data-geo-page]");
-    if (!page) return;
-
-    var home = page.dataset.geoHome;
-    var country = page.dataset.geoCountry;
-    var subdivision = page.dataset.geoSubdivision;
-    var failClosed = page.dataset.geoFailClosed === "true";
-    var enabledBox = page.querySelector('input[type="checkbox"][name="geo_setting[enabled]"]');
-
-    function checkedValues(selector) {
-      return Array.prototype.map.call(page.querySelectorAll(selector + ":checked"), function (el) {
-        return el.value;
-      });
-    }
-
-    function blocked() {
-      if (!enabledBox || !enabledBox.checked) return false;
-
-      var countries = checkedValues('input[name="geo_setting[banned_countries][]"]');
-      if (country && countries.indexOf(country) !== -1) return true;
-
-      var subdivisions = checkedValues('input[name="geo_setting[banned_subdivisions][]"]');
-      if (subdivision && country === home && subdivisions.indexOf(subdivision) !== -1) return true;
-
-      // Fail closed, narrowed exactly as the server narrows it: only a
-      // home-country visitor with NO region, and only when region rules exist.
-      if (!failClosed) return false;
-      if (subdivision) return false;
-      if (country !== home) return false;
-      return subdivisions.length > 0;
-    }
-
-    // The summary chips are rebuilt from the editor's own squares, so they
-    // describe the policy you are ABOUT to save rather than the one on disk —
-    // and they are built from the square's own flag, so there is no second copy
-    // of the artwork to keep in step.
-    function refreshSummary(kind, selector) {
-      var row = page.querySelector('[data-geo-summary="' + kind + '"]');
-      var counts = page.querySelectorAll('[data-geo-summary-count="' + kind + '"]');
-      if (!row) return;
-
-      Array.prototype.forEach.call(row.querySelectorAll(".geo-chip"), function (chip) {
-        chip.remove();
-      });
-
-      var boxes = Array.prototype.filter.call(page.querySelectorAll(selector), function (box) {
-        return box.checked;
-      });
-      boxes.sort(function (a, b) { return a.value.localeCompare(b.value); });
-
-      boxes.forEach(function (box) {
-        var square = box.closest("label");
-        var chip = document.createElement("span");
-        chip.className = "geo-chip inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs font-mono";
-        var art = square && square.querySelector("img, span[role='img']");
-        if (art) chip.appendChild(art.cloneNode(true));
-        chip.appendChild(document.createTextNode(box.value));
-        row.insertBefore(chip, row.querySelector(".geo-summary-empty"));
-      });
-
-      // The tab label and the summary heading carry the same number; a page that
-      // showed two different counts for one list would be its own bug report.
-      Array.prototype.forEach.call(counts, function (el) { el.textContent = boxes.length; });
-    }
-
-    function paint() {
-      refreshSummary("states", 'input[name="geo_setting[banned_subdivisions][]"]');
-      refreshSummary("countries", 'input[name="geo_setting[banned_countries][]"]');
-
-      var value = blocked() ? "blocked" : "allowed";
-      document.documentElement.setAttribute("data-geo-preview", value);
-      Array.prototype.forEach.call(document.querySelectorAll("[data-geo-badge]"), function (badge) {
-        // Only the badge showing THIS visitor's location previews; a specimen
-        // badge rendered with other locals keeps whatever it was given.
-        if (badge.dataset.country === country && (badge.dataset.subdivision || "") === (subdivision || "")) {
-          badge.setAttribute("data-blocked", blocked() ? "true" : "false");
-        }
-      });
-    }
-
-    page.addEventListener("change", paint);
-    paint();
-  })();
-</script>
-
 <style>
   /* The verdict tile follows the same one attribute the badge does. */
   .geo-when-blocked, .geo-when-allowed { display: none; }

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

@@ -1,15 +1,17 @@
-<%# One live map of an address. Leaflet mounts on this element (see
-    studio/site_footer/_map_assets, which this partial and nothing else 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.
+<%# One live map of an address. Leaflet mounts on this element (studio/footer_map,
+    started by the footer-map controller it names); 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. The styles are
+    studio/site_footer/_map_assets, which this partial and nothing else pulls in.
 
     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
+    studio/leaflet.css). Their URLs travel on the element, so the module fetches
     them only on a page that has a map. %>
 <%= studio_footer_map_assets %>
 <div class="ftr-map <%= local_assigns[:classes] %>"
      <% if local_assigns[:style].present? %>style="<%= style %>"<% end %>
      data-footer-map
+     data-studio-controller="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/app/views/studio/site_footer/_map_assets.html.erb

@@ -1,7 +1,8 @@
-<%# The map's styles and its mount script. Rendered once per page, by
-    `studio_footer_map_assets`, which only studio/site_footer/_map calls: a page
-    with no map (a footer with no address) carries none of this and names no
-    Leaflet. The footer's own styles are studio/site_footer/_assets. %>
+<%# The map's styles. Rendered once per page, by `studio_footer_map_assets`,
+    which only studio/site_footer/_map calls: a page with no map (a footer with
+    no address) carries none of this and names no Leaflet. The mount is
+    studio/footer_map, started by the footer-map controller on the map element.
+    The footer's own styles are studio/site_footer/_assets. %>
 <style>
   /* 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
@@ -30,128 +31,3 @@
   @keyframes ftr-ping { 75%, 100% { transform: scale(3.2); opacity: 0; } }
   @media (prefers-reduced-motion: reduce) { .ftr-pin::before { animation: 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_identities/edit.html.erb

@@ -59,7 +59,7 @@
     Alpine scope of its own, so without one here the crop modal's store opens
     and its dialog never appears in a host whose body carries no x-data
     (e2e/site_identity.spec.js). %>
-<div class="max-w-3xl mx-auto" x-data data-link-preview-page
+<div class="max-w-3xl mx-auto" x-data data-link-preview-page data-studio-controller="link-preview-card"
      data-fallback-title="<%= fallback_title %>"
      data-fallback-description="<%= fallback_desc %>">
   <h1 class="text-2xl font-extrabold text-heading mb-2">Link Preview</h1>
@@ -208,26 +208,3 @@
     <% end %>
   <% end %>
 </div>
-
-<script>
-  // LIVE CARD. Typing in the title or description repaints the card before
-  // anything is saved, falling back to what a blank field would really send.
-  (function () {
-    var page = document.querySelector("[data-link-preview-page]");
-    if (!page) return;
-    var fallbacks = {
-      title: page.dataset.fallbackTitle || "",
-      description: page.dataset.fallbackDescription || ""
-    };
-    function paint(input) {
-      var key = input.dataset.linkPreviewInput;
-      var target = page.querySelector("[data-link-preview-card-" + key + "]");
-      if (!target) return;
-      var value = input.value.trim();
-      target.textContent = value || fallbacks[key];
-    }
-    page.querySelectorAll("[data-link-preview-input]").forEach(function (input) {
-      input.addEventListener("input", function () { paint(input); });
-    });
-  })();
-</script>

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

@@ -1,8 +1,9 @@
 <%# /surveys/:slug — the survey (Studio::SurveysController#show, docs/SURVEYS.md).
 
     ONE FORM, TWO PRESENTATIONS. Without JavaScript every question renders in
-    order under the title and intro, and the Submit button posts the lot. The
-    script below adds .is-enhanced and turns the same markup into one question
+    order under the title and intro, and the Submit button posts the lot.
+    studio/survey (the survey controller on the root) adds .is-enhanced and
+    turns the same markup into one question
     per screen, opening on question 1 with no intro screen, with a progress
     bar, Back (from question 2 on) and Next, number-key and Enter shortcuts, and an
     autosave on each answer. Submit is still the same POST either way, so the
@@ -12,7 +13,7 @@
 <% content_for(:title, @survey.title) %>
 <%= render "studio/surveys/styles" %>
 
-<main class="studio-survey" data-studio-survey
+<main class="studio-survey" data-studio-survey data-studio-controller="survey"
       data-answer-base="<%= studio_survey_path(@survey.slug) %>/answers/"
       data-csrf="<%= form_authenticity_token %>"
       data-resume-index="<%= @resume_index %>"
@@ -61,5 +62,3 @@
     <% end %>
   </div>
 </main>
-
-<%= render "studio/surveys/script" %>

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

@@ -3,7 +3,7 @@
      The shared board primitive, LIVE. Phase D lifted the columns / cards / drag +
      optimistic move / reorder that the three near-identical McRitchie Studio boards
      (tasks / news / content) each hand-rolled into one engine primitive
-     (studio/board/_board + the window.studioBoard factory + vendored SortableJS).
+     (studio/board/_board + the studio/board module + vendored SortableJS).
      The first block below renders that real primitive with `demo: true` — you can
      DRAG a card between columns and the move animates + toasts, but nothing POSTs.
      The blocks under it stay a static reference: the stage-* badge palette
@@ -32,10 +32,7 @@
   # the last expression of an ERB scriptlet trips Erubi, and literal ERB tags in the
   # body would close the tag. Plain render() calls read clearly for an agent.
   board_usage_snippet = [
-    "# once at layout level (a <script> in the board template never runs):",
-    'render "studio/board_assets"',
-    "",
-    "# then the board itself:",
+    "# the board; it needs nothing else on the page:",
     'render "studio/board/board",',
     "  columns: @columns,            # [{ key:, label:, cards:, badge_class: }]",
     '  card_partial: "tasks/task_card",',
@@ -80,9 +77,7 @@
   </div>
 
   <%# ---- The LIVE primitive (demo mode) --------------------------------- %>
-  <%# Render the factory once (a <script> in the board template would never run), then
-      the board. demo: true → drag animates + toasts locally, nothing POSTs. %>
-  <%= render "studio/board_assets" %>
+  <%# demo: true → drag animates + toasts locally, nothing POSTs. %>
   <div class="space-y-3">
     <div class="flex items-center gap-2">
       <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">Live</span>