studio-engine 0.96.2 → 0.97.0.rc1

data/app/javascript/studio/lazy_controllers.js

@@ -0,0 +1,138 @@
+// studio/lazy_controllers: registers a page-specific controller the first time
+// an element names it, so its module is fetched only by a page that uses it.
+//
+//   watchLazyControllers({
+//     root: document.documentElement,
+//     attribute: "data-studio-controller",
+//     loaders: { board: () => import("studio/controllers/board_controller") },
+//     register: (name, controller) => application.register(name, controller)
+//   })
+//
+// An every-page controller is imported statically, which puts it in the
+// preloaded boot graph. A lazy one is named here by a dynamic import, which the
+// boot graph does not follow.
+//
+// UNTIL A LAZY CONTROLLER REGISTERS its element's actions do nothing: Stimulus
+// ignores an action whose controller it does not know.
+//
+// A LOAD THAT FAILS IS FINAL FOR THE DOCUMENT. A browser keeps a failed module
+// fetch in the document's module map and rejects every later import() of it
+// without a new request, across DOM changes and Turbo visits; only a full page
+// load fetches it again. So the registry imports a controller once. When the
+// import fails it reports the failure once and marks every element that names
+// the controller, those on the page and those that arrive later:
+//
+//   <div data-studio-controller="board" data-studio-controller-failed="board">
+//
+// A control that must work whenever its page does is therefore not lazy: the
+// hold button is imported statically by studio/stimulus.
+//
+// It imports nothing; test/javascript/lazy_controllers.test.mjs loads it as a
+// data: module.
+
+// The attribute a failed controller's elements carry: the identifiers, among
+// those the element names, whose module failed to load.
+export const FAILED_ATTRIBUTE = "data-studio-controller-failed"
+
+// The identifiers in one data-studio-controller value.
+export function controllerNames(value) {
+  return String(value || "").split(/\s+/).filter(Boolean)
+}
+
+// `root` itself, when it carries `attribute`, and every element beneath it
+// that does.
+function elementsWith(root, attribute) {
+  const elements = []
+  if (!root) return elements
+  if (typeof root.getAttribute === "function" && root.getAttribute(attribute) != null) elements.push(root)
+  if (typeof root.querySelectorAll === "function") elements.push(...root.querySelectorAll(`[${attribute}]`))
+  return elements
+}
+
+// The identifiers from `names` that an element in `root`, or `root` itself,
+// carries in `attribute`.
+export function lazyNamesIn(root, names, attribute) {
+  const wanted = new Set(names)
+  const found = new Set()
+  if (wanted.size === 0) return []
+
+  for (const element of elementsWith(root, attribute)) {
+    for (const name of controllerNames(element.getAttribute(attribute))) {
+      if (wanted.has(name)) found.add(name)
+    }
+  }
+  return [...found]
+}
+
+// Writes `failedAttribute` on every element in `root` that names a controller
+// in `failed`. Returns the elements it marked on this pass.
+export function markFailed(root, failed, attribute, failedAttribute = FAILED_ATTRIBUTE) {
+  const lost = new Set(failed)
+  const marked = []
+  if (lost.size === 0) return marked
+
+  for (const element of elementsWith(root, attribute)) {
+    const names = controllerNames(element.getAttribute(attribute)).filter((name) => lost.has(name))
+    if (names.length === 0 || typeof element.setAttribute !== "function") continue
+
+    const value = [...new Set(names)].join(" ")
+    if (element.getAttribute(failedAttribute) === value) continue
+    element.setAttribute(failedAttribute, value)
+    marked.push(element)
+  }
+  return marked
+}
+
+// Loads and registers each lazy controller once, on first sight: now, for the
+// elements already in `root`, and after any change beneath it. A controller
+// whose load fails is never loaded again; its elements are marked instead.
+// Returns { pending, failed, scan, stop, started }. The observer stops by
+// itself once every controller has registered; while one has failed it keeps
+// watching, to mark the elements that arrive later.
+export function watchLazyControllers({ root, attribute, loaders, register, Observer, report, failedAttribute }) {
+  const pending = new Set(Object.keys(loaders || {}))
+  const loading = new Set()
+  const failed = new Map()
+  const complain = report || ((name, error) => console.error(
+    `[studio] the ${name} controller failed to load and stays unavailable until the page is reloaded`, error
+  ))
+  let observer = null
+
+  const stop = () => {
+    if (observer) observer.disconnect()
+    observer = null
+  }
+
+  const mark = () => markFailed(root, failed.keys(), attribute, failedAttribute || FAILED_ATTRIBUTE)
+
+  const load = (name) => {
+    pending.delete(name)
+    loading.add(name)
+    return Promise.resolve()
+      .then(() => loaders[name]())
+      .then((module) => {
+        register(name, module && module.default ? module.default : module)
+        loading.delete(name)
+        if (pending.size === 0 && loading.size === 0 && failed.size === 0) stop()
+      })
+      .catch((error) => {
+        loading.delete(name)
+        failed.set(name, error)
+        mark()
+        complain(name, error)
+      })
+  }
+
+  const scan = () => {
+    mark()
+    return Promise.all(lazyNamesIn(root, [...pending], attribute).map(load))
+  }
+
+  const ObserverClass = Observer || (typeof MutationObserver !== "undefined" ? MutationObserver : null)
+  if (ObserverClass && pending.size > 0) {
+    observer = new ObserverClass(() => { if (pending.size > 0 || failed.size > 0) scan() })
+    observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: [attribute] })
+  }
+
+  return { pending, failed, scan, stop, started: scan() }
+}

data/app/javascript/studio/leveling_activity.js

@@ -0,0 +1,252 @@
+// studio/leveling_activity: the Alpine scope behind the leveling-activity modals
+// (studio/modals/blocks/_leveling_activity and its _change_username
+// specialisation): one action, with or without a single-line input, that an app
+// endpoint saves.
+//
+//   <div x-data="levelingActionModal({ hasInput: true, submitUrl: '/account/username' })">
+//
+// The modal mounts inside a modal host's template, so Alpine evaluates the
+// x-data when the modal opens. studio/alpine_shims imports this module and
+// publishes the factory as window.levelingActionModal on every page.
+//
+// UI ONLY. It POSTs to an app-supplied submitUrl and reads a neutral JSON
+// contract. A second step some apps need is delegated opaquely: the engine
+// hands the app's "challenge" blob to the app's window[finalizeHook] and POSTs
+// back whatever "proof" the hook returns. It inspects neither.
+//
+// The contract (submitUrl and finalizeUrl answer JSON):
+//   POST submitUrl { value } answers one of
+//     { status: "saved", seeds_earned?, seeds_total? }   done
+//     { status: "needs_step", challenge, token }         the app's step is required
+//     { status: "error", message }                       the message is shown
+//   on needs_step, with a finalizeHook:
+//     proof = await window[finalizeHook](challenge, { token, onProgress })
+//     POST finalizeUrl { token, proof } answers { status: "saved" | "error", ... }
+//
+// opts:
+//   hasInput       true renders and validates a single-line input; false is a
+//                  plain "Complete" action.
+//   initialValue   the input's starting value, a string.
+//   minLength      the input's minimum length, checked in the browser (0 = none).
+//   submitUrl      the app endpoint the action POSTs to; the app owns the save.
+//   finalizeUrl    the app endpoint for the second step, when there is one.
+//   finalizeHook   the name of the window async function that runs that step.
+//   savedEvent     the window event dispatched on success, carrying the app's
+//                  payload. Default "studio:activity-saved". A caller that names
+//                  its own event runs the follow-on itself (see appDrivenFollowOn).
+//   store          the Alpine modal store behind close(). Default "modals".
+//   leveling       the default for the seeds celebration. The live value is the
+//                  open modal's props.leveling (see the leveling getter).
+//   hasConsent     true renders a consent checkbox that gates the action.
+//   demo           the style-guide preview: it resolves locally, POSTs nothing
+//                  and dispatches no saved event.
+//   seedsPerLevel  seeds per level for the celebration bar. Default 100.
+//   demoSeedsEarned, demoSeedsTotal   the demo's seed payload. Default 30 and
+//                  seedsPerLevel, which crosses a level.
+//
+// It imports nothing; test/javascript/leveling_activity.test.mjs loads it as a
+// data: module.
+
+export const DEFAULT_SAVED_EVENT = "studio:activity-saved"
+
+const GENERIC_ERROR = "Something went wrong. Please try again."
+const STEP_ERROR = "Couldn't complete the step."
+
+// Whether the action can run. An input activity needs a real change of at
+// least minLength; a plain action runs once. An unticked consent box gates both.
+export function actionable({ hasConsent, consent, hasInput, saved, value, original, minLength }) {
+  if (hasConsent && !consent) return false
+  if (!hasInput) return !saved
+
+  const trimmed = (value || "").trim()
+  if (trimmed.length < minLength) return false
+  return trimmed !== (original || "").trim()
+}
+
+// A response's status: the body's own, or "saved" for a 2xx that names none.
+export function responseStatus(result) {
+  const body = (result && result.body) || {}
+  return body.status || (result && result.ok ? "saved" : "error")
+}
+
+// The demo's seed payload: the pair the caller chose, or one that crosses a level.
+export function demoSeeds(earned, total, seedsPerLevel) {
+  return {
+    seeds_earned: Number.isNaN(earned) ? 30 : earned,
+    seeds_total: Number.isNaN(total) ? seedsPerLevel : total
+  }
+}
+
+export function levelingActionModal(opts, { win = window, doc = document } = {}) {
+  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",
+    _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,
+
+    // The props of the modal that is open on this scope's store, or null.
+    _props() {
+      const store = (win.Alpine && win.Alpine.store) ? win.Alpine.store(this.store) : null
+      const current = (store && typeof store.current === "function") ? store.current() : null
+      return (current && current.props) || null
+    },
+
+    // props.celebrate opens the modal already saved, at the updated state, with
+    // the seeds the celebration animates from.
+    init() {
+      const props = this._props() || {}
+      if (!props.celebrate) return
+
+      this.seedsEarned = parseInt(props.seedsEarned, 10) || 0
+      this.seedsTotal = parseInt(props.seedsTotal, 10) || 0
+      this.saved = true
+      this.celebrate = true
+    },
+
+    // Read from the open modal's props on every access, so one modal id shows
+    // the seeds celebration or the plain confirmation as a toggle moves. A modal
+    // whose props do not say keeps the default it was rendered with.
+    get leveling() {
+      const props = this._props()
+      if (props && typeof props.leveling === "boolean") return props.leveling
+      return this._levelingDefault
+    },
+
+    get changed() {
+      return actionable(this)
+    },
+
+    // A caller that is not a demo and names its own saved event owns what
+    // follows a save: its listener closes, swaps or advances the modal. The
+    // engine then dispatches the event and stops, so the app's next step
+    // renders once. A demo, and a caller on the default event, get the engine's
+    // own confirmation or celebration.
+    get appDrivenFollowOn() {
+      if (this.demo) return false
+      return this.savedEvent !== DEFAULT_SAVED_EVENT
+    },
+
+    // A demo dispatches nothing: a host listening for the saved event would
+    // open its own follow-on modal over the preview.
+    _dispatch(payload) {
+      if (this.demo) return
+      try {
+        win.dispatchEvent(new win.CustomEvent(this.savedEvent, { detail: payload || {} }))
+      } catch (error) {}
+    },
+
+    _finishSaved(payload) {
+      payload = payload || {}
+      this.saving = false
+      this.saved = true
+      this.progressLabel = ""
+      if (this.hasInput) this.original = (this.value || "").trim()
+      this._dispatch(payload)
+      // The app's listener owns close against swap, so the engine closes nothing.
+      if (this.appDrivenFollowOn) return
+
+      // The updated state. Which view shows it (the seeds celebration or the
+      // plain confirmation) is the leveling getter's call.
+      this.seedsEarned = parseInt(payload.seeds_earned, 10) || 0
+      this.seedsTotal = parseInt(payload.seeds_total, 10) || 0
+      this.celebrate = true
+      this._syncCelebrate(true)
+    },
+
+    // Mirrors celebrate onto the open modal's props, which the style guide's
+    // glow reads, so the glow follows the modal from its input card to its
+    // updated card.
+    _syncCelebrate(value) {
+      const props = this._props()
+      if (props) props.celebrate = !!value
+    },
+
+    _post(url, body) {
+      const csrf = (doc.querySelector('meta[name="csrf-token"]') || {}).content || ""
+      const fetcher = win.authedFetch || win.fetch
+      return fetcher(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, "Accept": "application/json" },
+        body: JSON.stringify(body || {})
+      }).then((response) => response.json().then((json) => ({ ok: response.ok, body: json || {} })))
+    },
+
+    save() {
+      if (this.saving || !this.changed) return
+      this.saving = true
+      this.error = ""
+
+      if (this.demo) {
+        const seeds = demoSeeds(this.demoSeedsEarned, this.demoSeedsTotal, this.seedsPerLevel)
+        setTimeout(() => { this._finishSaved(seeds) }, 600)
+        return
+      }
+
+      const body = this.hasInput ? { value: (this.value || "").trim() } : {}
+      this._post(this.submitUrl, body)
+        .then((result) => this._handle(result))
+        .catch((error) => {
+          this.error = (error && error.message) || GENERIC_ERROR
+          this.saving = false
+        })
+    },
+
+    _handle(result) {
+      const body = (result && result.body) || {}
+      const status = responseStatus(result)
+      if (status === "saved") { this._finishSaved(body); return }
+      if (status === "needs_step") return this._step(body)
+      this.error = body.message || GENERIC_ERROR
+      this.saving = false
+    },
+
+    // The second step. The app's hook turns the challenge into a proof, and the
+    // proof goes back to finalizeUrl with the token.
+    _step(body) {
+      const hook = this.finalizeHook && win[this.finalizeHook]
+      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: (label) => { this.progressLabel = label || "" }
+        })
+      ).then((proof) => this._post(this.finalizeUrl, { token: body.token, proof })).then((result) => {
+        const answer = (result && result.body) || {}
+        if (responseStatus(result) === "saved") {
+          this._finishSaved(answer)
+        } else {
+          this.error = answer.message || STEP_ERROR
+          this.saving = false
+        }
+      }).catch((error) => {
+        this.error = (error && error.message) || STEP_ERROR
+        this.saving = false
+      })
+    }
+  }
+}

data/app/javascript/studio/link_preview_card.js

@@ -0,0 +1,34 @@
+// studio/link_preview_card: the live card on the site identity manager
+// (/admin/link_preview). Typing in the title or the description repaints the
+// card before anything is saved, falling back to what a blank field really
+// sends.
+//
+// It imports nothing; test/javascript/link_preview_card.test.mjs loads it as a
+// data: module. Bound to the page by the link-preview-card controller.
+
+// What the card shows for a field: its trimmed value, or the fallback when the
+// field is blank.
+export function cardText(value, fallback) {
+  const trimmed = String(value == null ? "" : value).trim()
+  return trimmed || fallback || ""
+}
+
+// The page's fallbacks, from data-fallback-title and data-fallback-description.
+export function fallbacksOf(page) {
+  return {
+    title: page.dataset.fallbackTitle || "",
+    description: page.dataset.fallbackDescription || ""
+  }
+}
+
+// Repaints the card node that `input` (a [data-link-preview-input]) feeds.
+// Answers the text it wrote, or null when the input feeds no card node.
+export function paintCard(page, input) {
+  const key = input && input.dataset ? input.dataset.linkPreviewInput : null
+  if (!key) return null
+  const target = page.querySelector("[data-link-preview-card-" + key + "]")
+  if (!target) return null
+  const text = cardText(input.value, fallbacksOf(page)[key])
+  target.textContent = text
+  return text
+}

data/app/javascript/studio/link_sidebar.js

@@ -0,0 +1,157 @@
+// studio/link_sidebar: the open flag behind components/_link_sidebar
+// ($store.sidebars.linkTreeOpen) and the document handlers that flip it.
+//
+// The panel's open and closed state is the store flag alone, through x-show and
+// x-transition. Nothing here sets `display`: an inline display:none makes
+// Alpine skip the enter transition, and the panel pops instead of sliding.
+//
+// The partial renders markup only, plus one anchor for its controller:
+//
+//   <template data-studio-controller="link-sidebar"></template>
+//
+// WHEN THE STORE REGISTERS. The panel's x-show reads $store.sidebars as Alpine
+// starts, before Stimulus connects a controller, so the flag is registered from
+// this module, on a page that renders the panel and only there:
+//
+//   1. alpine:init, on a full load.
+//   2. turbo:before-render, for the incoming body, before Alpine sees it.
+//   3. turbo:load, and the controller's connect(), for markup that arrived any
+//      other way.
+//
+// A host with its own `sidebars` store keeps it and gains the flag
+// (turf-monster's holds gearOpen).
+//
+// THE DOCUMENT HANDLERS run in the capture phase, so the trigger works for a
+// click that lands before Alpine has bound it. They are installed once, on
+// every page, and do nothing where no link sidebar is rendered.
+//
+// WHY THIS IS ITS OWN ENTRY POINT. layouts/studio/_head imports this module by
+// its own nonced module tag as well as through the boot graph, like
+// studio/alpine_stores. It imports nothing, and
+// test/javascript/link_sidebar.test.mjs holds it to that.
+
+// The panels components/_link_sidebar renders: the scope of every click this
+// module claims.
+export const LINK_SIDEBAR_PANELS = "#studio-link-sidebar, #studio-link-sidebar-mobile"
+// A control that may toggle the sidebar, when its aria-controls names the panel.
+export const LINK_SIDEBAR_TRIGGERS = "[data-link-sidebar-trigger], [data-username-display], [data-profile-image-toggle]"
+const CONTROLS_PANEL = '[aria-controls~="studio-link-sidebar"]'
+const CLOSE_BUTTON = "[data-link-sidebar-close]"
+
+// Registers the flag: a new `sidebars` store, or one more key on the host's.
+// Null before Alpine exists.
+export function ensureLinkSidebarStore(Alpine) {
+  if (!Alpine || typeof Alpine.store !== "function") return null
+
+  const sidebars = Alpine.store("sidebars")
+  if (!sidebars) {
+    Alpine.store("sidebars", { linkTreeOpen: false })
+    return Alpine.store("sidebars")
+  }
+  if (typeof sidebars.linkTreeOpen === "undefined") sidebars.linkTreeOpen = false
+  return sidebars
+}
+
+// The store as it stands. Reading it registers nothing, so a page with no link
+// sidebar gains no store from a click or a key press.
+export function linkSidebarStore(Alpine) {
+  if (!Alpine || typeof Alpine.store !== "function") return null
+  return Alpine.store("sidebars") || null
+}
+
+export function closeLinkSidebar(Alpine) {
+  const sidebars = linkSidebarStore(Alpine)
+  if (sidebars && sidebars.linkTreeOpen) sidebars.linkTreeOpen = false
+}
+
+export function rendersLinkSidebar(root) {
+  return !!(root && typeof root.querySelector === "function" && root.querySelector(LINK_SIDEBAR_PANELS))
+}
+
+// Path 1, 2 and 3 above: the flag for a document or body that renders the panel.
+export function registerLinkSidebar(Alpine, root) {
+  return rendersLinkSidebar(root) ? ensureLinkSidebarStore(Alpine) : null
+}
+
+// What a click on `target` means to the link sidebar:
+//
+//   "close"   the close button of one of ITS panels. components/_sidebar_panel
+//             is shared and stamps every panel's close button
+//             data-link-sidebar-close, so the button counts only inside a panel
+//             this component renders; another panel's is left to that panel.
+//   "toggle"  a trigger whose aria-controls names the panel.
+//   "inside"  anywhere else in one of its panels.
+//   "outside" the rest of the page.
+export function clickIntent(target) {
+  if (!target || typeof target.closest !== "function") return "outside"
+
+  const closeButton = target.closest(CLOSE_BUTTON)
+  if (closeButton && closeButton.closest(LINK_SIDEBAR_PANELS)) return "close"
+
+  const trigger = target.closest(LINK_SIDEBAR_TRIGGERS)
+  if (trigger && trigger.matches(CONTROLS_PANEL)) return "toggle"
+
+  return target.closest(LINK_SIDEBAR_PANELS) ? "inside" : "outside"
+}
+
+const claim = (event) => {
+  event.preventDefault()
+  event.stopPropagation()
+  event.stopImmediatePropagation()
+}
+
+// The capture-phase click. A claimed click reaches no other listener, so the
+// trigger's own Alpine @click cannot toggle the flag a second time.
+export function handleLinkSidebarClick(event, Alpine) {
+  const intent = clickIntent(event.target)
+
+  if (intent === "close") {
+    claim(event)
+    closeLinkSidebar(Alpine)
+    return intent
+  }
+
+  if (intent === "toggle") {
+    const sidebars = ensureLinkSidebarStore(Alpine)
+    if (!sidebars) return null
+    claim(event)
+    sidebars.linkTreeOpen = !sidebars.linkTreeOpen
+    return intent
+  }
+
+  if (intent === "outside") closeLinkSidebar(Alpine)
+  return intent
+}
+
+export function handleLinkSidebarKeydown(event, Alpine) {
+  if (event.key === "Escape") closeLinkSidebar(Alpine)
+}
+
+const installed = new WeakSet()
+
+// Once per window: a second call adds no second listener.
+export function installLinkSidebar({ win, doc } = {}) {
+  const host = win || globalThis
+  const root = doc || host.document
+  if (!root || typeof root.addEventListener !== "function") return false
+  if (installed.has(host)) return false
+  installed.add(host)
+
+  const register = () => registerLinkSidebar(host.Alpine, root)
+  root.addEventListener("alpine:init", register)
+  root.addEventListener("turbo:load", register)
+  root.addEventListener("turbo:before-render", (event) => {
+    registerLinkSidebar(host.Alpine, event.detail && event.detail.newBody)
+  })
+  // A page restored from Turbo's cache or the bfcache comes back closed.
+  root.addEventListener("turbo:before-cache", () => closeLinkSidebar(host.Alpine))
+  host.addEventListener("pageshow", (event) => { if (event.persisted) closeLinkSidebar(host.Alpine) })
+  root.addEventListener("click", (event) => handleLinkSidebarClick(event, host.Alpine), true)
+  root.addEventListener("keydown", (event) => handleLinkSidebarKeydown(event, host.Alpine), true)
+
+  // Alpine already started (a host that loads it ahead of the module tags).
+  if (host.Alpine && host.Alpine.version) register()
+  return true
+}
+
+if (typeof window !== "undefined") installLinkSidebar({ win: window, doc: document })

data/app/javascript/studio/stimulus.js

@@ -0,0 +1,72 @@
+// studio/stimulus: the engine's Stimulus application and its lazy controllers.
+//
+// The engine runs its own Stimulus application on its OWN attributes:
+//
+//   data-studio-controller="nav-collapse"   data-studio-action   data-studio-target
+//
+// so a host's Stimulus application never sees an engine controller. That is not
+// tidiness: stimulus-loading's lazy loader (cyvasse) imports
+// "controllers/<identifier>_controller" for every data-controller it meets, and
+// would log "Failed to autoload controller" for each engine element. Values and
+// classes keep Stimulus' own naming (data-nav-collapse-scrolled-class).
+// "@hotwired/stimulus" resolves to the engine's vendored copy unless the host
+// pins its own.
+//
+// THREE WAYS A CONTROLLER REGISTERS. The every-page chrome (nav collapse, modal
+// host, toast, link sidebar) is registered by studio/application, which imports
+// it statically. The hold button is registered HERE, statically, because it
+// confirms real actions (see below). A PAGE-SPECIFIC CONTROLLER is listed in
+// LAZY below and registered by studio/lazy_controllers the first time an
+// element names one.
+//
+// WHY THE HOLD BUTTON IS STATIC. A lazy controller is one more request, made
+// when its element first appears: for the token modal, minutes after the page
+// loaded. If that request fails once (a dropped connection, or a deploy that
+// retired the digested file) the browser never fetches the module again in
+// that document, and the button would render and take a press that does
+// nothing. Imported here it arrives with the page, in the preloaded boot graph,
+// and no later request stands between a press and its hold.
+//
+// WHY THIS IS ITS OWN ENTRY POINT. layouts/studio/_head imports this module by
+// its own nonced module tag as well as through the boot graph. Its only imports
+// are Stimulus, studio/lazy_controllers and the hold button's controller (which
+// imports studio/hold_button and studio/hold_button_hooks), so a throw or a
+// missing file elsewhere in studio/application's graph still leaves a page its
+// hold button.
+import { Application, defaultSchema } from "@hotwired/stimulus"
+import { watchLazyControllers } from "studio/lazy_controllers"
+import HoldButtonController from "studio/controllers/hold_button_controller"
+
+export const schema = {
+  ...defaultSchema,
+  controllerAttribute: "data-studio-controller",
+  actionAttribute: "data-studio-action",
+  targetAttribute: "data-studio-target"
+}
+
+// identifier -> its controller module. Dynamic imports, so none of these joins
+// the every-page boot graph (Studio::Engine.javascript_boot_graph). A control
+// that must work whenever its page does is not listed here: a failed load is
+// final for the document (studio/lazy_controllers). The board is listed: a
+// board whose controller failed still renders, counts and toasts, and says that
+// its cards do not drag (data-studio-controller-failed="board").
+export const LAZY = {
+  "board": () => import("studio/controllers/board_controller"),
+  "geo-settings": () => import("studio/controllers/geo_settings_controller"),
+  "link-preview-card": () => import("studio/controllers/link_preview_card_controller"),
+  "email-banner-scale": () => import("studio/controllers/email_banner_scale_controller"),
+  "booking": () => import("studio/controllers/booking_controller"),
+  "footer-map": () => import("studio/controllers/footer_map_controller"),
+  "survey": () => import("studio/controllers/survey_controller")
+}
+
+export const application = Application.start(document.documentElement, schema)
+
+application.register("hold-button", HoldButtonController)
+
+export const lazy = watchLazyControllers({
+  root: document.documentElement,
+  attribute: schema.controllerAttribute,
+  loaders: LAZY,
+  register: (name, controller) => application.register(name, controller)
+})