studio-engine 0.96.2.rc1 → 0.97.0.rc1

data/app/views/studio/_hold_button_guard.html.erb

@@ -0,0 +1,172 @@
+<%#
+  THE HOLD BUTTON'S GUARD: says so when a hold button cannot work.
+
+  The hold button runs on five modules (studio/stimulus, studio/lazy_controllers,
+  studio/controllers/hold_button_controller, studio/hold_button and
+  studio/hold_button_hooks). A browser keeps a failed module request for the life
+  of the document, so one failure among them at page load leaves every hold
+  button rendered, enabled and deaf until a reload. This script is what speaks
+  then, so it is INLINE and imports nothing: it shares no request with the
+  modules whose failure it reports.
+
+  The hold-button controller writes data-hold-button-connected on its
+  .hold-stack when it connects. A stack that still lacks it once the page's
+  boot is over is marked
+
+    <span class="hold-stack" data-studio-controller-failed="hold-button">
+
+  its button aria-disabled, and its .hold-notice (role="status") filled;
+  engine-motion.css styles all three. A press on a marked button says the notice
+  again. The controller clears the mark the moment it connects, however late.
+
+  WHEN THE BOOT IS OVER. The engine's modules are module scripts in the head, so
+  DOMContentLoaded waits for them, however slow, and Stimulus connects its
+  controllers as studio/stimulus runs, before that event. Measured in Chromium
+  on the e2e lab, the button connects ahead of DOMContentLoaded by 3 to 5 ms on
+  a cold load, by 110 to 230 ms at 20x CPU throttle, and by 1.1 s on a 400 ms,
+  400 kbit/s link at 6x CPU (where DOMContentLoaded itself lands at 11.5 s). A
+  healthy page has therefore connected its buttons before the grace starts; the
+  1.5 s below is margin for a host that boots its modules another way, not a
+  race the page has to win. Later stacks (a Turbo visit, a modal's x-if)
+  connect in the microtask after they arrive and are swept shortly after.
+
+  Locals:
+    nonce - the request's CSP nonce, or nil (layouts/studio/_head passes it)
+%>
+<%= tag.script(nonce: local_assigns[:nonce]) do %>
+  (function () {
+    if (window.studioHoldButtonGuard) return;
+
+    var STACK = '.hold-stack[data-studio-controller~="hold-button"]';
+    var CONNECTED = "data-hold-button-connected";
+    var FAILED = "data-studio-controller-failed";
+    var NOTICE = "This button could not load. Reload the page.";
+    var GRACE_MS = 1500;
+    var SETTLE_MS = 250;
+
+    var deadline = null;
+    var reported = false;
+    var serial = 0;
+    var lastPress = 0;
+
+    // What to do with one stack. `deadline` is null until the page's boot has
+    // an end, and nothing is marked before it.
+    function verdict(state) {
+      if (state.connected) return state.marked ? "clear" : "leave";
+      if (state.marked) return "leave";
+      if (state.deadline == null || state.now < state.deadline) return "wait";
+      return "mark";
+    }
+
+    function child(stack, name) {
+      for (var i = 0; i < stack.children.length; i++) {
+        if (stack.children[i].classList.contains(name)) return stack.children[i];
+      }
+      return null;
+    }
+
+    function mark(stack) {
+      var button = child(stack, "hold-btn");
+      var notice = child(stack, "hold-notice");
+      if (!notice) {
+        notice = document.createElement("span");
+        notice.className = "hold-notice";
+        notice.setAttribute("role", "status");
+        stack.appendChild(notice);
+      }
+      if (!notice.id) notice.id = "hold-notice-" + (++serial);
+      notice.textContent = NOTICE;
+      stack.setAttribute(FAILED, "hold-button");
+      if (button) {
+        button.setAttribute("aria-disabled", "true");
+        button.setAttribute("aria-describedby", notice.id);
+      }
+      if (!reported) {
+        reported = true;
+        console.error("[studio] the hold-button controller failed to load and stays unavailable until the page is reloaded");
+      }
+    }
+
+    function clear(stack) {
+      var button = child(stack, "hold-btn");
+      var notice = child(stack, "hold-notice");
+      if (!stack.hasAttribute(FAILED)) return;
+      stack.removeAttribute(FAILED);
+      stack.removeAttribute("data-hold-notice-pressed");
+      if (notice) notice.textContent = "";
+      if (button) {
+        button.removeAttribute("aria-disabled");
+        button.removeAttribute("aria-describedby");
+      }
+    }
+
+    function judge(stack) {
+      var answer = verdict({
+        connected: stack.hasAttribute(CONNECTED),
+        marked: stack.hasAttribute(FAILED),
+        now: Date.now(),
+        deadline: deadline
+      });
+      if (answer === "mark") mark(stack);
+      if (answer === "clear") clear(stack);
+      return answer;
+    }
+
+    function sweep() {
+      var stacks = document.querySelectorAll(STACK);
+      for (var i = 0; i < stacks.length; i++) judge(stacks[i]);
+    }
+
+    // A press on a marked button: the notice again, to the eye and to a screen
+    // reader. The text has to change to be announced, so a trailing no-break
+    // space comes and goes.
+    function say(stack) {
+      var notice = child(stack, "hold-notice");
+      if (notice) notice.textContent = notice.textContent === NOTICE ? NOTICE + " " : NOTICE;
+      stack.removeAttribute("data-hold-notice-pressed");
+      void stack.offsetWidth;
+      stack.setAttribute("data-hold-notice-pressed", "");
+    }
+
+    function pressed(event) {
+      var target = event.target;
+      var button = target && target.closest ? target.closest(".hold-btn") : null;
+      var stack = button ? button.closest(STACK) : null;
+      if (!stack) return;
+      // A touch is followed by the mouse events the browser makes up for it.
+      if (event.type === "mousedown" && Date.now() - lastPress < 700) return;
+      lastPress = Date.now();
+      judge(stack);
+      if (stack.hasAttribute(FAILED)) say(stack);
+    }
+
+    function holds(node) {
+      return node.nodeType === 1 && (node.matches(STACK) || node.querySelector(STACK) !== null);
+    }
+
+    function booted() {
+      deadline = Date.now() + GRACE_MS;
+      setTimeout(sweep, GRACE_MS);
+      // Read off window under a local name: a host page that counts the
+      // observers its own inline scripts construct (turf-monster's report
+      // pages do, by the constructor's spelling) does not count this one.
+      var Observer = window.MutationObserver;
+      if (!Observer) return;
+      new Observer(function (records) {
+        for (var i = 0; i < records.length; i++) {
+          for (var j = 0; j < records[i].addedNodes.length; j++) {
+            if (holds(records[i].addedNodes[j])) return void setTimeout(sweep, SETTLE_MS);
+          }
+        }
+      }).observe(document.documentElement, { childList: true, subtree: true });
+    }
+
+    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", booted);
+    else booted();
+    document.addEventListener("turbo:load", function () { setTimeout(sweep, SETTLE_MS); });
+    document.addEventListener("mousedown", pressed, true);
+    document.addEventListener("touchstart", pressed, { capture: true, passive: true });
+
+    window.studioHoldButtonGuard = { verdict: verdict, clear: clear, sweep: sweep, graceMs: GRACE_MS };
+  })();
+<% end %>

data/app/views/studio/_leveling_activity_assets.html.erb

@@ -1,285 +1,11 @@
 <%#
-  levelingActionModal factory — the Alpine data behind the engine leveling-activity
-  modals (studio/modals/blocks/_leveling_activity and its _change_username
-  specialization). Ships here, at PAGE level, on purpose: the modal partial mounts
-  inside a modal host's single-root template, and a script cloned out of a template
-  never runs. So a consumer renders THIS once in its layout (like the other shared
-  Alpine factories), and the modal partial anywhere below just references
-  window.levelingActionModal. Mirrors how studio/_birthday_assets homes the
-  birthdayModal factory.
-
-  CRITICAL BOUNDARY — this factory is UI ONLY. It POSTs to an app-supplied
-  submitUrl and reacts to a NEUTRAL JSON contract; it holds ZERO on-chain logic,
-  no wallet taxonomy, no signing. Any second step some apps need (e.g. a wallet
-  approval) is delegated OPAQUELY: the engine hands the app-returned "challenge"
-  blob to an app-supplied window[finalizeHook] and POSTs back whatever opaque
-  "proof" the app returns. The engine never inspects, parses, or decodes either
-  blob, so the whole wallet dance stays in the app.
-
-  Wire contract (submitUrl + finalizeUrl responses are JSON):
-    POST submitUrl { value } -> one of:
-      { status: "saved",     seeds_earned?, seeds_total? }   done
-      { status: "needs_step", challenge, token }             app step required
-      { status: "error",     message }                       show message
-    when needs_step and a finalizeHook is wired:
-      proof = await window[finalizeHook](challenge, { token, onProgress })
-      POST finalizeUrl { token, proof } -> { status: "saved" | "error", ... }
-
-  opts: { hasInput, initialValue, minLength, submitUrl, finalizeUrl, finalizeHook,
-          savedEvent, store, leveling, demo, seedsPerLevel }.
-    hasInput      true renders + validates a single-line input; false is a
-                  no-field activity (a plain "Complete" action).
-    initialValue  seed value for the input (a plain string; never a model).
-    minLength     client-only min length for the input (0 = none).
-    submitUrl     app endpoint the action POSTs to (the app owns persistence).
-    finalizeUrl   app endpoint for the opaque second step (omit if none).
-    finalizeHook  name of a window async fn the app supplies for the step (omit
-                  if none); it owns EVERY app-side detail of that step.
-    savedEvent    DOM event dispatched on success, carrying the app payload, so
-                  the app can run its own follow-on. Default "studio:activity-saved".
-                  A non-demo caller that supplies its OWN (non-default) saved_event
-                  is declaring it drives that follow-on: the engine then CLOSES on
-                  save (fires the event, stops) rather than rendering its own
-                  confirm/celebrate, so the app's follow-on never renders twice.
-    store         Alpine modal store name backing close(). Default "modals".
-    leveling      the render-time DEFAULT for the seeds celebration. The live
-                  value is read at RUNTIME from the modal store's current
-                  props.leveling (this.leveling getter), so one modal id flips
-                  TM (celebration) <-> MS (plain save) as a toggle moves; when
-                  props omits it (TM's live path) the default stands.
-    hasConsent    true renders a consent checkbox that gates the action until
-                  ticked (the newsletter join).
-    demo          style-guide preview: resolve locally, skip the network POST, and
-                  suppress the app-facing saved event (so a host app's follow-on
-                  handler can't stack a second modal over the demo's own state).
-    seedsPerLevel seeds per level for the celebration bar. Default 100.
-    demoSeedsEarned / demoSeedsTotal  demo-only seed payload (defaults to a
-                  level-crossing 30 / seedsPerLevel) so each activity's
-                  celebration can showcase a chosen state.
+  Renders nothing. A layout or page that renders studio/leveling_activity_assets
+  keeps working; the render can be deleted.
+
+  The leveling-activity modals' behaviour is the studio/leveling_activity module
+  (its header carries the opts and the JSON contract). studio/alpine_shims
+  publishes its factory as window.levelingActionModal on every page, before
+  Alpine starts, so x-data="levelingActionModal({...})" on
+  studio/modals/blocks/_leveling_activity and _change_username resolves with no
+  page-level script.
 %>
-<script>
-  (function () {
-    if (window.levelingActionModal) return;
-    // The default saved event. A non-demo caller that wires its OWN (non-default)
-    // saved_event is declaring it drives the post-save follow-on itself — see the
-    // appDrivenFollowOn getter, which then makes the engine close on save instead of
-    // rendering its own confirm/celebrate.
-    var DEFAULT_SAVED_EVENT = "studio:activity-saved";
-    window.levelingActionModal = function (opts) {
-      opts = opts || {};
-      return {
-        hasInput: !!opts.hasInput,
-        value: opts.initialValue || "",
-        original: opts.initialValue || "",
-        minLength: parseInt(opts.minLength, 10) || 0,
-        submitUrl: opts.submitUrl || "",
-        finalizeUrl: opts.finalizeUrl || "",
-        finalizeHook: opts.finalizeHook || "",
-        savedEvent: opts.savedEvent || DEFAULT_SAVED_EVENT,
-        store: opts.store || "modals",
-        // leveling is a RUNTIME getter (below) reading props.leveling off the modal
-        // store, so ONE modal id flips TM <-> MS shape live as a section toggle
-        // moves. _levelingDefault is the render-time fallback (TM ships no
-        // props.leveling and relies on its :leveling capability default).
-        _levelingDefault: !!opts.leveling,
-        hasConsent: !!opts.hasConsent,
-        consent: false,
-        demo: !!opts.demo,
-        seedsPerLevel: parseInt(opts.seedsPerLevel, 10) || 100,
-        demoSeedsEarned: parseInt(opts.demoSeedsEarned, 10),
-        demoSeedsTotal: parseInt(opts.demoSeedsTotal, 10),
-        saving: false,
-        error: "",
-        saved: false,
-        celebrate: false,
-        progressLabel: "",
-        seedsEarned: 0,
-        seedsTotal: 0,
-
-        // Open directly AT the updated/celebrate state — the specimen's "updated"
-        // cards (Great Username / Subscribed!) open the same modal id pre-advanced,
-        // exactly like the Auth cards open a given step. props.celebrate mounts the
-        // modal already saved, with the seed payload the celebration animates from.
-        // leveling (a getter) then decides at runtime whether that state renders the
-        // seeds celebration (TM) or the plain confirmation (MS).
-        init: function () {
-          var s = (window.Alpine && Alpine.store) ? Alpine.store(this.store) : null;
-          var cur = (s && typeof s.current === "function") ? s.current() : null;
-          var p = (cur && cur.props) || {};
-          if (p.celebrate) {
-            this.seedsEarned = parseInt(p.seedsEarned, 10) || 0;
-            this.seedsTotal = parseInt(p.seedsTotal, 10) || 0;
-            this.saved = true;
-            this.celebrate = true;
-          }
-        },
-
-        // leveling — resolved at RUNTIME from the modal store's current props, so a
-        // single modal id flips TM (seeds/level/quest) <-> MS (plain save) live as
-        // the section's leveling toggle moves. Falls back to the render-time default
-        // when props does not set it (TM's live path), so existing callers are
-        // unaffected.
-        get leveling() {
-          var s = (window.Alpine && Alpine.store) ? Alpine.store(this.store) : null;
-          var cur = (s && typeof s.current === "function") ? s.current() : null;
-          var p = cur && cur.props;
-          if (p && typeof p.leveling === "boolean") return p.leveling;
-          return this._levelingDefault;
-        },
-
-        // Actionable while there is a real change to save (input activities) or
-        // until the one-shot action has fired (no-field activities). A consent
-        // checkbox (the newsletter join) additionally gates the action until ticked.
-        get changed() {
-          if (this.hasConsent && !this.consent) return false;
-          if (!this.hasInput) return !this.saved;
-          var v = (this.value || "").trim();
-          if (v.length < this.minLength) return false;
-          return v !== (this.original || "").trim();
-        },
-
-        // appDrivenFollowOn — a real (non-demo) consumer that wired its OWN saved_event
-        // owns the after-save UI: its listener runs the follow-on (e.g. Turf Monster's
-        // completeQuest / quest-success on 'studio:username-saved'), including whether
-        // to close, swap, or advance. For those the engine must NOT advance to its own
-        // confirm/celebrate on save — that double-renders the app's follow-on step
-        // (once in this dialog, once in the app's own inline card: the strict-mode
-        // double-render TM's e2e caught). The engine yields: it fires the saved event,
-        // then STOPS (the 0.24 contract), letting the app drive. Demo previews (self-
-        // contained) and standalone callers on the DEFAULT event keep the engine's own
-        // confirm/celebrate.
-        get appDrivenFollowOn() {
-          if (this.demo) return false;
-          return this.savedEvent !== DEFAULT_SAVED_EVENT;
-        },
-
-        _dispatch: function (payload) {
-          // In demo mode (the /admin/style preview) do NOT fire the app-facing
-          // saved event: the host app may listen for it and open its OWN follow-on
-          // modal (e.g. Turf Monster swaps to 'quest-success' on
-          // 'studio:username-saved'), which would stack a SECOND modal over the
-          // demo's own celebrate view — the reported duplicate. The demo resolves
-          // locally and is self-contained, so it must not drive real app follow-ons.
-          if (this.demo) return;
-          try {
-            window.dispatchEvent(new CustomEvent(this.savedEvent, { detail: payload || {} }));
-          } catch (e) {}
-        },
-
-        _finishSaved: function (payload) {
-          payload = payload || {};
-          this.saving = false;
-          this.saved = true;
-          this.progressLabel = "";
-          if (this.hasInput) this.original = (this.value || "").trim();
-          this._dispatch(payload);
-          // App-driven follow-on: the consumer wired its own saved_event and owns
-          // what comes next (its listener advances/closes/swaps). Dispatch fired
-          // above; STOP here — the 0.24 contract — instead of advancing to the
-          // engine's own confirm/celebrate, which would render the app's follow-on
-          // step twice. The engine never force-closes here: the app's listener owns
-          // close-vs-swap (TM closes on the contest page, swaps to quest-success on
-          // /account), so a force-close would clobber that swap.
-          if (this.appDrivenFollowOn) return;
-          // Otherwise (a demo preview, or a standalone caller on the DEFAULT event
-          // with no app follow-on): advance to the updated state; the view gate
-          // (celebrate && leveling vs celebrate && !leveling) picks the seeds
-          // celebration (TM shape) or the plain confirmation (MS shape). Seeds are
-          // set either way — only the leveling view reads them.
-          this.seedsEarned = parseInt(payload.seeds_earned, 10) || 0;
-          this.seedsTotal = parseInt(payload.seeds_total, 10) || 0;
-          this.celebrate = true;
-          // Reflect the advance onto the store's LIVE current props so the specimen
-          // glow (which reads props.celebrate) transfers from the input card to the
-          // updated card — exactly like the Auth glow follows props.step as its
-          // machine advances. Without this, the glow stays on the input card.
-          this._syncCelebrate(true);
-        },
-
-        // Mirror the component's celebrate onto the current modal store entry's
-        // props, the reactive source the specimen glow_when reads.
-        _syncCelebrate: function (value) {
-          var s = (window.Alpine && Alpine.store) ? Alpine.store(this.store) : null;
-          var cur = (s && typeof s.current === "function") ? s.current() : null;
-          if (cur && cur.props) cur.props.celebrate = !!value;
-        },
-
-        _post: function (url, body) {
-          var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || "";
-          var fetcher = window.authedFetch || window.fetch;
-          return fetcher(url, {
-            method: "POST",
-            headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, "Accept": "application/json" },
-            body: JSON.stringify(body || {})
-          }).then(function (r) {
-            return r.json().then(function (j) { return { ok: r.ok, body: j || {} }; });
-          });
-        },
-
-        save: function () {
-          if (this.saving || !this.changed) return;
-          this.saving = true;
-          this.error = "";
-          var self = this;
-          if (this.demo) {
-            // Style-guide preview: no backend. Resolve to a per-activity seed
-            // payload (defaulting to a level-crossing one) so the celebration
-            // demonstrates its flourish — Username stays at Level 1 (+25), the
-            // Newsletter crosses a level to reveal the Free Entry Token line.
-            var de = isNaN(self.demoSeedsEarned) ? 30 : self.demoSeedsEarned;
-            var dt = isNaN(self.demoSeedsTotal) ? self.seedsPerLevel : self.demoSeedsTotal;
-            setTimeout(function () {
-              self._finishSaved({ seeds_earned: de, seeds_total: dt });
-            }, 600);
-            return;
-          }
-          var body = this.hasInput ? { value: (this.value || "").trim() } : {};
-          this._post(this.submitUrl, body)
-            .then(function (res) { return self._handle(res); })
-            .catch(function (e) {
-              self.error = (e && e.message) || "Something went wrong. Please try again.";
-              self.saving = false;
-            });
-        },
-
-        _handle: function (res) {
-          var body = (res && res.body) || {};
-          var status = body.status || (res && res.ok ? "saved" : "error");
-          if (status === "saved") { this._finishSaved(body); return; }
-          if (status === "needs_step") { return this._step(body); }
-          this.error = body.message || "Something went wrong. Please try again.";
-          this.saving = false;
-        },
-
-        // The opaque second step. The engine hands the app's "challenge" blob to
-        // the app-supplied hook and POSTs back the app's "proof" blob — it inspects
-        // neither, so every app-side detail of the step stays in the app.
-        _step: function (body) {
-          var hook = this.finalizeHook && window[this.finalizeHook];
-          var self = this;
-          if (typeof hook !== "function") {
-            this.error = "This step isn't available.";
-            this.saving = false;
-            return;
-          }
-          return Promise.resolve(
-            hook(body.challenge, {
-              token: body.token,
-              onProgress: function (label) { self.progressLabel = label || ""; }
-            })
-          ).then(function (proof) {
-            return self._post(self.finalizeUrl, { token: body.token, proof: proof });
-          }).then(function (res) {
-            var rb = (res && res.body) || {};
-            var status = rb.status || (res && res.ok ? "saved" : "error");
-            if (status === "saved") { self._finishSaved(rb); }
-            else { self.error = rb.message || "Couldn't complete the step."; self.saving = false; }
-          }).catch(function (e) {
-            self.error = (e && e.message) || "Couldn't complete the step.";
-            self.saving = false;
-          });
-        }
-      };
-    };
-  })();
-</script>

data/app/views/studio/board/_board.html.erb

@@ -3,10 +3,12 @@
   primitive (Phase D): the SortableJS drag-reorder, optimistic cross-column move →
   revert → toast, and count/live wiring that the three near-identical McRitchie
   Studio boards (tasks / news / content) and the depth chart each hand-rolled,
-  lifted into one place. Renders a horizontal row of columns, each a drop zone the
-  vendored SortableJS + window.studioBoard factory (studio/_board_assets, rendered
-  once at layout level — a <script> inside this component template would never run)
-  wires.
+  lifted into one place. Renders a horizontal row of columns, each a drop zone.
+  The section is two things at once: its x-data is the studioBoard scope
+  (studio/board, published as window.studioBoard by studio/alpine_shims), which
+  the cards and slots inside it bind to, and its data-studio-controller is the
+  board controller, registered lazily, which loads the vendored SortableJS and
+  makes the zones draggable. This partial carries no script.
 
   UI ONLY and NEUTRAL: no model, no routes, no domain. The app supplies its columns,
   its card partial, and its endpoints. Custom behavior attaches by LISTENING to the
@@ -164,9 +166,18 @@
     labels:         all_columns.each_with_object({}) { |c, h| h[c[:key].to_s] = (c[:label] || c[:key]).to_s if c[:key] }
   }
 %>
-<section class="studio-board" data-test="studio-board" x-data="studioBoard(<%= board_opts.to_json %>)">
+<section class="studio-board" data-test="studio-board" data-studio-controller="board" x-data="studioBoard(<%= board_opts.to_json %>)">
   <% if live_channel.present? %><%= turbo_stream_from live_channel %><% end %>
 
+  <%# Shown only when the board controller's module failed to load: the registry
+      marks this section data-studio-controller-failed="board", and engine.css
+      reveals the notice on that attribute (its inline display: none is the
+      default, so a host whose CSS lacks the rule shows nothing). The board still renders and its
+      cards stay readable; they do not drag until the page is reloaded. %>
+  <p role="status" data-test="studio-board-failed"
+     class="studio-board-failed mb-4 rounded-lg border bg-surface px-4 py-2.5 text-sm font-medium"
+     style="display: none; border-color: var(--color-danger); color: var(--color-danger-ink, var(--color-danger))">This board could not load its controls. Reload the page.</p>
+
   <% if header_slot %><div class="studio-board-header mb-4"><%= header_slot %></div><% end %>
   <% if above_board_slot %><%= above_board_slot %><% end %>
 

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

@@ -1,6 +1,8 @@
-<%# 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. %>
+<%# Styles 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. The behaviour is
+    studio/booking, started by the booking controller the frame's wrapper and
+    the popup's dialog name. %>
 <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
@@ -58,139 +60,3 @@
   .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;
-
-    // ASK GOOGLE ONCE. Two things can ask for a frame: scrolling near it, and a
-    // booking link that jumps to it. Assigning src a second time, even to the
-    // same URL, is a second request, so whoever comes second finds it set.
-    function load(frame) {
-      if (!frame.getAttribute('src')) frame.src = frame.dataset.src;
-    }
-    window.__studioBookingLoad = load;
-
-    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') { load(frame); return; }
-        var watcher = new IntersectionObserver(function (entries) {
-          if (!entries.some(function (entry) { return entry.isIntersecting; })) return;
-          watcher.disconnect();
-          load(frame);
-        }, { 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.
-    function openActive() {
-      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');
-    }
-
-    // THE WINDOW BLURS ONCE. Focus that moves from one frame straight into
-    // another never comes back through this window, so no second blur announces
-    // the second frame, and on a page with two cropped frames it would stay
-    // cropped under the visitor's cursor. So while focus is away in a frame and a
-    // cropped wrapper is still shut, look again a few times a second. It stops
-    // when focus returns here or nothing is left to open, and a page with one
-    // frame never starts it: that frame is open by then.
-    var watching = null;
-    function shut() { return document.querySelector('[data-booking-wrap][data-studio-booking][data-booking-crop]:not(.is-open)'); }
-    function stopWatching() { if (watching) { clearInterval(watching); watching = null; } }
-
-    window.addEventListener('blur', function () {
-      openActive();
-      var active = document.activeElement;
-      if (watching || !active || active.tagName !== 'IFRAME' || !shut()) return;
-      watching = setInterval(function () {
-        openActive();
-        if (!shut()) stopWatching();
-      }, 250);
-    });
-    window.addEventListener('focus', stopWatching);
-
-    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 (document.readyState === 'complete' && window.__studioBookingLoad) window.__studioBookingLoad(inline);
-        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>