studio-engine 0.97.0 → 0.98.0.rc1

data/app/javascript/studio/controllers/style_modals_controller.js

@@ -0,0 +1,41 @@
+// style-modals: the living style guide's Modals section, on the engine's
+// Stimulus application (studio/stimulus, which reads data-studio-controller).
+// It sits on the section style/_modals renders:
+//
+//   <section id="modals" data-studio-controller="style-modals" x-data="{}">
+//     <button data-studio-action="click->style-modals#demo"
+//             data-style-modals-name-param="stackTwo">Open two</button>
+//
+// The demos and the simulator's controls are studio/style_modals. connect()
+// installs the wallet stubs, publishes the drivers as window.dsModalDemos (for
+// the console) and builds the simulator's controls from the live animation
+// registry; they are built again on turbo:load, so a key registered since then
+// grows a control.
+//
+// Registered by studio/style_guide, which the section loads by its own module
+// tag, so only the style guide fetches it.
+import { Controller } from "@hotwired/stimulus"
+import { createModalDemos, installWalletStubs } from "studio/style_modals"
+
+export default class extends Controller {
+  static values = { store: { type: String, default: "dsModals" } }
+
+  connect() {
+    installWalletStubs(window)
+    this.demos = createModalDemos({ win: window, doc: document, store: this.storeValue })
+    window.dsModalDemos = this.demos
+    this.build = () => this.demos.buildAnimControls()
+    this.build()
+    document.addEventListener("turbo:load", this.build)
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:load", this.build)
+  }
+
+  // click->style-modals#demo, with the driver's name as the action's param.
+  demo(event) {
+    const run = this.demos && this.demos[event.params.name]
+    if (typeof run === "function") run()
+  }
+}

data/app/javascript/studio/cropper.js

@@ -0,0 +1,281 @@
+// studio/cropper: the crop-photo modal (studio/modals/_crop_photo), the one
+// cropper every upload in the engine and its hosts goes through.
+//
+//   x-data="cropPhotoModal({ store: 'modals' })"
+//
+// The modal hands the result to its opener by the `crop-photo-confirmed` window
+// event; the opener owns the upload (studio/image_upload: imageUploadHost saves
+// at once, avatarCropperHost stages the file on its form). The image gets in
+// two ways:
+//
+//   imageUrl prop     the opener already picked a file and passes its data URL;
+//                     the modal goes straight to the cropper.
+//   no imageUrl       the modal is the picker: click or drop a file, then crop.
+//
+// Open it with the crop a page wants:
+//
+//   Alpine.store('modals').open('crop-photo',
+//     { imageUrl, aspectRatio: 3, maxWidth: 900, transparent: false })
+//
+// Cropper.js is the page's own global (studio/_cropper_assets loads it from
+// cdnjs on a page that can open the modal). A page where it never arrives says
+// so in the modal's error line; the button never takes a press that does
+// nothing.
+//
+// The factory is published by studio/alpine_shims as window.cropPhotoModal and
+// Alpine.data("cropPhotoModal"), statically, because Alpine evaluates the
+// x-data when the card mounts and a card whose factory is missing is dead.
+// It imports nothing; test/javascript/cropper.test.mjs loads it as a data:
+// module.
+
+// The crop an opener gets when it names nothing: a square 256px avatar on a
+// transparent ground.
+export const CROP_DEFAULTS = {
+  aspectRatio: 1,
+  maxWidth: 256,
+  maxHeight: 256,
+  transparent: true,
+  allowGifs: false,
+  autoCropArea: 0.9,
+  dispatch: false,
+  owner: null
+}
+
+export const NOT_AN_IMAGE = "Please choose an image file."
+export const GIF_REFUSED = "GIFs aren't accepted here. Use a PNG, JPG or WebP."
+export const CROPPER_MISSING = "The photo cropper did not load. Reload the page and try again."
+
+// How long a mount waits for Cropper.js before it reports the library missing,
+// and how often it looks. The script is deferred, so on a Turbo visit it can
+// land a moment after the card opens.
+export const LIBRARY_WAIT_MS = 3000
+export const LIBRARY_POLL_MS = 100
+
+// The crop a modal entry's props ask for, over the defaults.
+//   dispatch  the modal stays open after confirm, and the opener's host runs
+//             its own saving card in its place. Without it the modal closes.
+//   owner     carried through and echoed on confirm, so only the host that
+//             opened the cropper acts on the result.
+export function cropSettings(props) {
+  props = props || {}
+  const settings = { ...CROP_DEFAULTS }
+  if (props.aspectRatio) settings.aspectRatio = props.aspectRatio
+  if (props.maxWidth) settings.maxWidth = props.maxWidth
+  if (props.maxHeight) settings.maxHeight = props.maxHeight
+  if (typeof props.transparent === "boolean") settings.transparent = props.transparent
+  if (typeof props.allowGifs === "boolean") settings.allowGifs = props.allowGifs
+  if (props.dispatch) settings.dispatch = true
+  settings.owner = props.owner || null
+  if (props.autoCropArea) settings.autoCropArea = props.autoCropArea
+  return settings
+}
+
+// What Cropper.js is constructed with: the crop box holds the asked ratio.
+export function cropperOptions(settings) {
+  return {
+    aspectRatio: settings.aspectRatio,
+    viewMode: 1,
+    dragMode: "move",
+    autoCropArea: settings.autoCropArea,
+    cropBoxResizable: true,
+    cropBoxMovable: true,
+    background: false,
+    guides: true
+  }
+}
+
+// What getCroppedCanvas is asked for. The WIDTH alone is capped: a fixed ratio
+// already bounds the height (width / aspectRatio), and passing maxHeight too
+// makes Cropper.js scale the whole source down to fit it when the source is
+// taller, which costs the crop its resolution.
+export function canvasOptions(settings) {
+  const options = { maxWidth: settings.maxWidth, imageSmoothingQuality: "high" }
+  if (!settings.transparent) options.fillColor = "#ffffff"
+  return options
+}
+
+// By type, not extension: a file renamed to .gif is still a PNG and belongs in
+// the cropper, and a .GIF from a Windows machine is still a GIF.
+export function isAnimatedCandidate(file) {
+  return ((file && file.type) || "").toLowerCase() === "image/gif"
+}
+
+// What a picked file does: "crop" it, "pass" it through untouched, or the
+// error line it earns.
+//
+// A GIF never goes through the cropper: the crop is painted on a canvas and
+// exported as a PNG, which keeps frame one and drops the animation. Where GIFs
+// are allowed the original bytes pass through, uncropped; where they are not,
+// the file is refused.
+export function fileRoute(file, settings) {
+  if (!file.type || file.type.indexOf("image/") !== 0) return { error: NOT_AN_IMAGE }
+  if (!isAnimatedCandidate(file)) return { route: "crop" }
+  return settings.allowGifs ? { route: "pass" } : { error: GIF_REFUSED }
+}
+
+// The detail of `crop-photo-confirmed`. The owner rides with the blob: the
+// event is a window event, so every upload host on the page hears it, and a
+// page can mount one host per row. A passed-through file carries its own name
+// and says it is uncropped.
+export function confirmedDetail(blob, owner, original) {
+  const detail = { blob, owner: owner || null }
+  if (original) {
+    detail.filename = original.name
+    detail.uncropped = true
+  }
+  return detail
+}
+
+// Calls `ready(Cropper)` once the page has Cropper.js, now or within
+// LIBRARY_WAIT_MS, and `missing()` when it never arrives. Returns a function
+// that stops the wait.
+export function whenCropperLoads(win, ready, missing) {
+  if (typeof win.Cropper !== "undefined") {
+    ready(win.Cropper)
+    return () => {}
+  }
+  let waited = 0
+  let stopped = false
+  const look = () => {
+    if (stopped) return
+    if (typeof win.Cropper !== "undefined") { ready(win.Cropper); return }
+    waited += LIBRARY_POLL_MS
+    if (waited >= LIBRARY_WAIT_MS) { missing(); return }
+    win.setTimeout(look, LIBRARY_POLL_MS)
+  }
+  win.setTimeout(look, LIBRARY_POLL_MS)
+  return () => { stopped = true }
+}
+
+// x-data for studio/modals/_crop_photo. opts.store names the Alpine store the
+// modal is mounted in: "modals" for the shared host, a page-scoped host's own
+// name otherwise. env.win is the window (the tests pass their own).
+export function cropPhotoModal(opts, env) {
+  opts = opts || {}
+  const win = (env && env.win) || window
+
+  return {
+    _storeName: opts.store || "modals",
+    cropper: null,
+    imageUrl: null,
+    fromParent: false,
+    dragging: false,
+    error: null,
+    aspectRatio: CROP_DEFAULTS.aspectRatio,
+    maxWidth: CROP_DEFAULTS.maxWidth,
+    maxHeight: CROP_DEFAULTS.maxHeight,
+    transparent: CROP_DEFAULTS.transparent,
+    allowGifs: CROP_DEFAULTS.allowGifs,
+    autoCropArea: CROP_DEFAULTS.autoCropArea,
+    dispatch: CROP_DEFAULTS.dispatch,
+    owner: null,
+
+    init() {
+      const current = this.$store[this._storeName].current()
+      const props = (current && current.props) || {}
+      Object.assign(this, cropSettings(props))
+      if (props.imageUrl) {
+        this.fromParent = true
+        this.imageUrl = props.imageUrl
+        this.mountCropper()
+      }
+    },
+
+    destroy() {
+      this.releaseCropper()
+    },
+
+    releaseCropper() {
+      if (this._stopWaiting) { this._stopWaiting(); this._stopWaiting = null }
+      if (this.cropper) { this.cropper.destroy(); this.cropper = null }
+    },
+
+    mountCropper() {
+      const self = this
+      this.$nextTick(function () {
+        self.releaseCropper()
+        self._stopWaiting = whenCropperLoads(win, function (Cropper) {
+          self._stopWaiting = null
+          if (!self.$refs.cropImage) return
+          self.cropper = new Cropper(self.$refs.cropImage, cropperOptions(self))
+          // A crop in progress locks the modal (no click-outside, no Escape), so
+          // a stray click does not discard it; Cancel still closes. cropReady
+          // tells an observer of the store the picker has become the cropper:
+          // imageUrl is this scope's own and never reaches the entry's props.
+          const entry = self.$store[self._storeName].current()
+          if (entry && entry.props) { entry.props.dismissible = false; entry.props.cropReady = true }
+        }, function () {
+          self._stopWaiting = null
+          self.error = CROPPER_MISSING
+        })
+      })
+    },
+
+    readFile(file) {
+      if (!file) return
+      const verdict = fileRoute(file, this)
+      if (verdict.error) { this.error = verdict.error; return }
+      if (verdict.route === "pass") {
+        this.error = null
+        this.passThrough(file)
+        return
+      }
+
+      const self = this
+      const reader = new win.FileReader()
+      reader.onload = function (event) {
+        self.error = null
+        self.imageUrl = event.target.result
+        self.mountCropper()
+      }
+      reader.readAsDataURL(file)
+    },
+
+    isAnimatedCandidate(file) {
+      return isAnimatedCandidate(file)
+    },
+
+    announce(detail) {
+      try {
+        win.dispatchEvent(new win.CustomEvent("crop-photo-confirmed", { detail }))
+      } catch (_) {}
+    },
+
+    // The original file goes straight to the opener, with no canvas in the path.
+    passThrough(file) {
+      this.announce(confirmedDetail(file, this.owner, file))
+      this.releaseCropper()
+      if (!this.dispatch) this.$store[this._storeName].close()
+    },
+
+    onFilePicked(event) {
+      const file = event.target.files[0]
+      event.target.value = ""
+      this.readFile(file)
+    },
+
+    onDrop(event) {
+      this.dragging = false
+      const file = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]
+      this.readFile(file)
+    },
+
+    cancel() {
+      this.releaseCropper()
+      this.$store[this._storeName].close()
+    },
+
+    confirm() {
+      if (!this.cropper) return
+      const self = this
+      const canvas = this.cropper.getCroppedCanvas(canvasOptions(this))
+      canvas.toBlob(function (blob) {
+        self.announce(confirmedDetail(blob, self.owner))
+        self.releaseCropper()
+        // In dispatch mode the opener's host swaps its saving card in over
+        // this one, so the modal does not pop the stack itself.
+        if (!self.dispatch) self.$store[self._storeName].close()
+      }, "image/png")
+    }
+  }
+}

data/app/javascript/studio/identity_mini.js

@@ -0,0 +1,74 @@
+// studio/identity_mini: when the compact identity bar
+// (studio/profiles/_identity_mini) takes over from the full identity card.
+//
+// The bar is fixed under the navbar and ships hidden and inert. It shows once
+// most of the full card has scrolled away, and on the edit page it carries the
+// save controls from then on. The identity-mini controller binds one bar to
+// its page's card.
+//
+// It imports nothing; test/javascript/identity_mini.test.mjs loads it as a
+// data: module.
+
+// The class that shows the bar (studio/profiles/_identity_styles).
+export const VISIBLE_CLASS = "is-visible"
+
+// The card the bar stands in for.
+export const FULL_SELECTOR = "[data-studio-identity-full]"
+
+// The bar shows once less than this much of the card is on screen. Part-way,
+// so the two overlap briefly and there is no moment with neither on screen. A
+// ratio and not a pixel offset: the card's height changes with the name's wrap
+// and with whether an address sits under it.
+export const SHOW_BELOW_RATIO = 0.6
+
+// The navbar covers the top of the viewport, so the pixels behind it are not
+// visible ones. The spread of thresholds is what lets the ratio test run:
+// with one threshold the callback fires only at fully in and fully out.
+export const OBSERVER_OPTIONS = {
+  rootMargin: "-72px 0px 0px 0px",
+  threshold: [0, 0.2, 0.4, 0.5, 0.6, 0.8, 1]
+}
+
+// Whether the card counts as gone. A card taller than the viewport never
+// reaches ratio 1, so not intersecting at all counts in its own right.
+export function cardGone(entry) {
+  return !entry.isIntersecting || entry.intersectionRatio < SHOW_BELOW_RATIO
+}
+
+// Shows or hides the bar. The tab order and the accessibility tree follow the
+// same decision as the class: opacity and pointer-events cannot say "not
+// here", and the bar holds buttons.
+export function showBar(mini, visible) {
+  mini.classList.toggle(VISIBLE_CLASS, visible)
+  mini.inert = !visible
+}
+
+// One bar watching one card. `Observer` is IntersectionObserver; a browser
+// without it leaves the bar hidden and inert, and the page fully usable.
+export class IdentityMini {
+  constructor(mini, full, Observer) {
+    this.mini = mini
+    this.full = full
+    this.Observer = Observer
+    this.observer = null
+  }
+
+  start() {
+    this.stop()
+    if (!this.mini || !this.full || !this.Observer) return false
+    this.observer = new this.Observer((entries) => showBar(this.mini, cardGone(entries[0])), OBSERVER_OPTIONS)
+    this.observer.observe(this.full)
+    return true
+  }
+
+  stop() {
+    if (this.observer) this.observer.disconnect()
+    this.observer = null
+  }
+
+  // Hidden again, as the bar ships: for a page going into Turbo's cache.
+  reset() {
+    this.stop()
+    if (this.mini) showBar(this.mini, false)
+  }
+}

data/app/javascript/studio/image_upload.js

@@ -0,0 +1,189 @@
+// studio/image_upload: what an upload does around the crop-photo modal
+// (studio/cropper). Three names a page binds:
+//
+//   x-data="imageUploadHost({ aspectRatio: 5, maxWidth: 2000, filename: 'banner.png' })"
+//       crop, then save at once: the cropped file goes into the host's own
+//       hidden form and the form submits behind a saving card.
+//   x-data="avatarCropperHost()"
+//       crop, then wait: the cropped file is staged on a hidden input and the
+//       enclosing form submits it later (components/_avatar_cropper).
+//   submitFormWithProgress(form, opts)
+//       a Turbo form submit behind the `saving` card, with a toast at the end.
+//
+// A host hears the crop through the page's own listener:
+//
+//   @crop-photo-confirmed.window="onCropConfirmed($event.detail)"
+//
+// studio/alpine_shims publishes all three on window, statically: Alpine
+// evaluates the x-data when the page starts, and a host whose factory is
+// missing cannot upload. It imports nothing; test/javascript/image_upload.test.mjs
+// loads it as a data: module.
+
+// How long the saving card stays up at the least, so it does not flash.
+export const SAVING_HOLD_MS = 450
+
+// The props a host opens the crop-photo modal with: its crop, in dispatch
+// mode (the modal stays open and the host's saving card replaces it), plus
+// `extra` (the picked image, the host's owner token).
+export function uploadCropProps(opts, extra) {
+  opts = opts || {}
+  const props = {
+    aspectRatio: opts.aspectRatio || 1,
+    transparent: opts.transparent !== false,
+    dispatch: true
+  }
+  if (opts.maxWidth) props.maxWidth = opts.maxWidth
+  if (opts.maxHeight) props.maxHeight = opts.maxHeight
+  if (opts.autoCropArea) props.autoCropArea = opts.autoCropArea
+  if (typeof opts.allowGifs === "boolean") props.allowGifs = opts.allowGifs
+  return Object.assign(props, extra || {})
+}
+
+// Whether a confirmed crop is this host's to act on. Many hosts can be mounted
+// on one page and all hear the same window event, so a confirm names the host
+// that opened the cropper. A confirm with no owner applies to any host.
+export function cropIsFor(detail, ownerId) {
+  if (!detail) return false
+  return !detail.owner || detail.owner === ownerId
+}
+
+// The name and type the file is uploaded under. A passed-through file (a GIF)
+// keeps its own name and type; a cropped one is the PNG the canvas exported,
+// under the host's filename.
+export function uploadFileAttributes(blob, filename, opts) {
+  return {
+    name: filename || (opts && opts.filename) || "image.png",
+    type: (blob && blob.type) || "image/png"
+  }
+}
+
+// The toast a finished submit raises.
+export function submitToast(ok, opts) {
+  opts = opts || {}
+  return {
+    type: ok ? "notice" : "alert",
+    title: ok ? (opts.success || "Saved") : (opts.failure || "Couldn't save"),
+    message: ok ? (opts.successMessage || "") : (opts.failureMessage || "Please try again.")
+  }
+}
+
+// Submits `form` (a Turbo form) behind the saving card: the card replaces
+// whatever is open, stays at least SAVING_HOLD_MS, then closes, and a toast
+// reports the result. opts: saving, success, successMessage, failure,
+// failureMessage, dismissible (default false), toast (default true), store
+// (the Alpine store the card is mounted in, default "modals").
+export function submitFormWithProgress(form, opts, env) {
+  opts = opts || {}
+  const win = (env && env.win) || window
+  const store = win.Alpine && win.Alpine.store(opts.store || "modals")
+  const hold = (win.StudioModals && win.StudioModals.holdAtLeast)
+    ? win.StudioModals.holdAtLeast(SAVING_HOLD_MS)
+    : { then: function (callback) { callback() } }
+
+  if (store) {
+    store.open("saving", { dismissible: opts.dismissible === true, title: opts.saving || "Saving…" }, { replace: true })
+  }
+
+  const onEnd = function (event) {
+    form.removeEventListener("turbo:submit-end", onEnd)
+    const ok = !!(event.detail && event.detail.success)
+    hold.then(function () {
+      if (store) store.close()
+      if (opts.toast !== false) {
+        win.dispatchEvent(new win.CustomEvent("toast", { detail: submitToast(ok, opts) }))
+      }
+    })
+  }
+  form.addEventListener("turbo:submit-end", onEnd)
+  form.requestSubmit()
+}
+
+// x-data for a crop-then-save uploader. The host's markup carries
+// x-ref="fileInput" (the hidden file field) inside x-ref="form". opts is the
+// crop (aspectRatio, maxWidth, maxHeight, transparent, autoCropArea,
+// allowGifs), the save copy submitFormWithProgress reads, `filename`, and
+// `store`: the Alpine store the crop-photo and saving cards are mounted in,
+// for a page that mounts them on its own scoped host.
+//
+// Two ways in:
+//   open()            the crop modal is the picker (click or drop a file).
+//   onFileSelected()  a native file input hands the image in.
+export function imageUploadHost(opts, env) {
+  opts = opts || {}
+  const win = (env && env.win) || window
+  const storeName = opts.store || "modals"
+  const ownerId = "iuh-" + (win.__studioImageUploadHostSeq = (win.__studioImageUploadHostSeq || 0) + 1)
+
+  return {
+    ownerId,
+
+    open() {
+      if (!win.Alpine || !win.Alpine.store(storeName)) return
+      win.Alpine.store(storeName).open("crop-photo", uploadCropProps(opts, { owner: ownerId }))
+    },
+
+    onCropConfirmed(detail) {
+      if (!cropIsFor(detail, ownerId)) return
+      this.applyCrop(detail.blob, detail.filename)
+    },
+
+    onFileSelected(event) {
+      const file = event.target.files[0]
+      if (!file) return
+      const reader = new win.FileReader()
+      reader.onload = function (loaded) {
+        win.Alpine.store(storeName).open("crop-photo", uploadCropProps(opts, { imageUrl: loaded.target.result, owner: ownerId }))
+      }
+      reader.readAsDataURL(file)
+      event.target.value = ""
+    },
+
+    applyCrop(blob, filename) {
+      if (!blob) return
+      const file = uploadFileAttributes(blob, filename, opts)
+      const transfer = new win.DataTransfer()
+      transfer.items.add(new win.File([blob], file.name, { type: file.type }))
+      this.$refs.fileInput.files = transfer.files
+      const submit = win.submitFormWithProgress || ((form, options) => submitFormWithProgress(form, options, env))
+      submit(this.$refs.form, opts)
+    }
+  }
+}
+
+// x-data for components/_avatar_cropper: a cropped avatar as a form field.
+// The crop runs in the shared crop-photo modal; the 256px PNG it confirms is
+// previewed and staged on x-ref="hiddenFileInput", and the enclosing form
+// (sign-up, profile completion) submits it later.
+export function avatarCropperHost(env) {
+  const win = (env && env.win) || window
+
+  return {
+    croppedUrl: null,
+
+    onFileSelected(event) {
+      const file = event.target.files[0]
+      if (!file) return
+      const reader = new win.FileReader()
+      reader.onload = function (loaded) {
+        win.Alpine.store("modals").open("crop-photo", { imageUrl: loaded.target.result })
+      }
+      reader.readAsDataURL(file)
+      event.target.value = ""
+    },
+
+    applyCrop(blob) {
+      if (!blob) return
+      if (this.croppedUrl) win.URL.revokeObjectURL(this.croppedUrl)
+      this.croppedUrl = win.URL.createObjectURL(blob)
+      const transfer = new win.DataTransfer()
+      transfer.items.add(new win.File([blob], "avatar.png", { type: "image/png" }))
+      this.$refs.hiddenFileInput.files = transfer.files
+    },
+
+    removePhoto() {
+      if (this.croppedUrl) win.URL.revokeObjectURL(this.croppedUrl)
+      this.croppedUrl = null
+      this.$refs.hiddenFileInput.files = new win.DataTransfer().files
+    }
+  }
+}

data/app/javascript/studio/profile_form.js

@@ -0,0 +1,88 @@
+// studio/profile_form: the profile edit form's scope (studio/profiles/edit).
+//
+//   x-data="studioProfileForm({ first_name: 'Pat', email: 'pat@example.com' })"
+//
+// It holds the fields the inputs bind with x-model and the values the page
+// loaded with, says which have changed (the save controls show while any has),
+// puts them back on Discard, and asks before the page is left with changes
+// unsaved. Its markup carries x-ref="form" on the form it guards.
+//
+// studio/alpine_scopes publishes it on window, statically: a profile page whose
+// factory is missing has no save controls. It imports nothing;
+// test/javascript/profile_form.test.mjs loads it as a data: module.
+
+export const LEAVE_PROMPT = "You have unsaved changes. Leave without saving?"
+
+// Whether one field differs from what the page loaded with. Trimmed on both
+// sides: whitespace is not a change, and the controller trims on the way in,
+// so the bar agrees with what saving would do.
+export function fieldChanged(fields, initial, key) {
+  return String(fields[key] || "").trim() !== String(initial[key] || "").trim()
+}
+
+// How many fields differ.
+export function changeCount(fields, initial) {
+  return Object.keys(fields).filter((key) => fieldChanged(fields, initial, key)).length
+}
+
+// env: { win, doc } for the tests.
+export function studioProfileForm(initial, env) {
+  const win = (env && env.win) || window
+  const doc = (env && env.doc) || document
+
+  return {
+    // True once this scope has booted: the page's JS-less controls hide on it.
+    alpine: true,
+    fields: Object.assign({}, initial),
+    initial: Object.assign({}, initial),
+
+    changed(key) {
+      return fieldChanged(this.fields, this.initial, key)
+    },
+
+    get changeCount() {
+      return changeCount(this.fields, this.initial)
+    },
+
+    get dirty() {
+      return this.changeCount > 0
+    },
+
+    discard() {
+      this.fields = Object.assign({}, this.initial)
+    },
+
+    init() {
+      const self = this
+
+      // The exit is guarded both ways. beforeunload covers a hard navigation
+      // or a closed tab; turbo:before-visit covers a Turbo Drive visit, which
+      // never fires beforeunload.
+      this._beforeUnload = function (event) {
+        if (!self.dirty) return
+        event.preventDefault()
+        event.returnValue = ""
+      }
+      win.addEventListener("beforeunload", this._beforeUnload)
+
+      this._beforeVisit = function (event) {
+        if (!self.dirty) return
+        if (!win.confirm(LEAVE_PROMPT)) event.preventDefault()
+      }
+      doc.addEventListener("turbo:before-visit", this._beforeVisit)
+
+      // Submitting is not leaving: both guards drop before the form goes, so
+      // saving does not prompt about the changes being saved.
+      this.$refs.form.addEventListener("submit", function () { self.teardown() })
+    },
+
+    teardown() {
+      win.removeEventListener("beforeunload", this._beforeUnload)
+      doc.removeEventListener("turbo:before-visit", this._beforeVisit)
+    },
+
+    destroy() {
+      this.teardown()
+    }
+  }
+}

data/app/javascript/studio/stimulus.js

@@ -19,6 +19,10 @@
 // LAZY below and registered by studio/lazy_controllers the first time an
 // element names one.
 //
+// A page that must find its controller connected the moment it has loaded
+// registers it from its own module tag instead (studio/style_guide, for the
+// style guide's Modals section): the tag runs with the page, in document order.
+//
 // 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