studio-engine 0.97.0.rc1 → 0.98.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee44de927b41f3860880f106cf5abc81b69d076a7d35f4de767bd904533b63c4
-  data.tar.gz: 200c6bdb2758bc78fadded463649a281dadc7042b18d9a8634a33ab6efd5ddc2
+  metadata.gz: 96463f400e143dc8688f6803440f724745f9064ec1921e55e58faf9be91edca2
+  data.tar.gz: 93e5d60b3dff0cc99c33d951c5326f8b74b192dd7f2ddc44d9f76adc0d047a2f
 SHA512:
-  metadata.gz: d92ba31d0fd6a1ff1c5a2dd0d140fb6dc3c396e2e7813ab034d64666520c611a9497ec396d99307e59f67793b53295b88988c10f1b23e3025e142d1ade370834
-  data.tar.gz: ce67bc16e6c58eda9afa49a401d2b079b635340244d01320bc0cd67873d189e10c30b47e5fb53b6c52176c378fe79b17f399d6bcf9b3a94ac424df968b83376d
+  metadata.gz: 953aedd6855e26a05484615332176e44b59ed4a890c635b0f6042215876afea856504b43d1b5e99bf16ec845a4dfb7aaefefcf8fc2caa33031780fce108a5f5a
+  data.tar.gz: 2e1000ccd5b1b15c16c7ce911cd5c5387730d7b2672186d1f46f1a8b4c82b6919f926a13e16f71b9a6a833bcf4ecec8d63b1aa185ed5136ad186de0eb6eb8653

data/CHANGELOG.md

@@ -4,6 +4,95 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.98.0 — 2026-10-09
+
+### Changed
+
+- **The modal blocks and the profile scripts move to ES modules.** The crop
+  photo modal, the image upload hosts, the avatar cropper, the birthday card,
+  the profile form and its birthday row, the compact identity bar, the sign-in
+  interstitial and the style guide's modal demos render markup only; nine
+  inline scripts are gone. Rendered markup and styling are unchanged apart from
+  the attributes and the interstitial's fallback named here, and every `x-data`
+  a page writes still resolves.
+  - **The factories.** `cropPhotoModal` is `studio/cropper`; `imageUploadHost`,
+    `avatarCropperHost` and `submitFormWithProgress` are `studio/image_upload`;
+    `birthdayModal` and `studioBirthdayFields` are `studio/birthday`;
+    `studioProfileForm` is `studio/profile_form`. `studio/alpine_scopes`
+    publishes each on `window`, where a host has not defined the name first.
+    They are in the preloaded boot graph, not lazy: Alpine evaluates an `x-data`
+    as it meets the element, and a factory that is not there leaves a photo
+    upload, the birthday gate or the profile form dead. `layouts/studio/_head`
+    also imports `studio/alpine_scopes` by its own nonced module tag, so a boot
+    that fails to load keeps a page its factories.
+  - **Partials.** `studio/modals/_image_upload` and `studio/_birthday_assets`
+    render nothing and stay, so a layout that renders either by name keeps
+    working; the renders can be deleted. `studio/_cropper_assets` loads
+    Cropper.js (from cdnjs, as before) and nothing else.
+  - **Compact identity bar.** `studio/profiles/_identity_mini` carries
+    `data-studio-controller="identity-mini"`; when the bar shows is
+    `studio/identity_mini`. The controller is registered statically, because on
+    the edit page the bar carries Save and Discard.
+  - **Sign-in interstitial.** `studio/_confirm_interstitial` posts its form from
+    `studio/confirm_interstitial`, loaded by its own nonced module tag (the page
+    has no import map). The fallback button shows itself four seconds in two
+    ways: by CSS alone, so a page whose script never arrives still has something
+    to press, and by the module's own timer, for an engine that holds a CSS
+    animation while the post is pending (WebKit). It is hidden by `max-height`
+    and `visibility` in place of `display: none`.
+  - **Style guide.** The Modals section's demo drivers, its enter/leave
+    simulator and the wallet stubs are `studio/style_modals`, on a
+    `style-modals` controller the section's own module tag registers
+    (`studio/style_guide`); its demo buttons carry `data-studio-action` in place
+    of `onclick`. `$store.dsModals` is the engine's own modal stack: the overlay
+    declares `data-studio-controller="modal-host"` and
+    `data-modal-host-store-value="dsModals"`, and the guide's copy of the stack
+    is deleted. The card carries no `max-w-*` of its own and takes its width
+    from `StudioModals.CARD_WIDTHS` by id, as an app's cards do.
+
+### Added
+
+- **A page whose x-data factories failed to load says so, and its profile form
+  can still be saved.** One failed request among `studio/alpine_scopes`,
+  `studio/cropper`, `studio/image_upload`, `studio/birthday` and
+  `studio/profile_form` leaves all six factories undefined until a reload. A
+  nonced inline guard in `layouts/studio/_head` (`studio/_alpine_scopes_guard`,
+  beside the hold button's) marks each element that binds one of them
+  `data-studio-scope-failed="<factory>"` once the page's boot is over and puts
+  `<p class="studio-scope-notice" role="status">This did not load. Reload the
+  page.</p>` first inside it, on a card a modal mounts later too. Inside a
+  marked element every `[data-studio-scope-fallback]` is shown and a text field
+  left blank goes back to the value the server rendered: the profile form's
+  plain Save (`studio/profiles/_plain_save`) is such a fallback, so a person can
+  still save. A healthy or slow page is never marked. The line carries its own
+  styles, so a host changes nothing; `.studio-scope-notice` is there to restyle
+  it.
+- **The crop photo modal says when Cropper.js did not load.** It waits up to
+  three seconds for the library (the script is deferred, and on a Turbo visit
+  can land after the card opens), then shows "The photo cropper did not load.
+  Reload the page and try again." on its error line and leaves the modal
+  dismissible. It used to show the image with no cropper and a Crop & Save
+  button that did nothing.
+
+### Breaking
+
+- **`studio/profiles/_form_script` and `studio/profiles/_birthday_picker_script`
+  are deleted.** `studio/profiles/edit` and `studio/profiles/_birthday_fields`
+  no longer render them; an app that renders either by name deletes the render.
+- **The factories are no longer in a page's HTML.** A test that looked for
+  `window.birthdayModal = function`, `window.imageUploadHost`,
+  `window.studioProfileForm` or `cropPhotoModal` source in a rendered page
+  looks for the name in `app/javascript/studio/alpine_scopes.js` and for
+  `import "studio/alpine_scopes"` in the page's head.
+  `Alpine.data("cropPhotoModal")` is no longer registered; the `x-data` resolves
+  through `window.cropPhotoModal`.
+- **`window.dsModalDemos`, `window.dsWalletConnectDemo` and the stub
+  `window.walletProvider` exist only on the style guide, once its section's
+  controller has connected.** `registerDsModals` and
+  `window.__dsAnimControlsBound` are gone.
+- **`#magic-fallback` on the sign-in interstitial is no longer `display: none`.**
+  A host stylesheet or test that read its `display` reads `visibility`.
+
 ## 0.97.0 — 2026-10-09
 
 ### Changed

data/app/javascript/studio/alpine_scopes.js

@@ -0,0 +1,66 @@
+// studio/alpine_scopes: the x-data factories the engine's partials and its
+// hosts' pages bind, each published on window from the module that owns it.
+//
+//   x-data="cropPhotoModal({ store: 'modals' })"     studio/cropper
+//   x-data="imageUploadHost({ aspectRatio: 5 })"     studio/image_upload
+//   x-data="avatarCropperHost()"                     studio/image_upload
+//   x-data="birthdayModal({ minAge, url })"          studio/birthday
+//   x-data="studioBirthdayFields('1991-01-31')"      studio/birthday
+//   x-data="studioProfileForm({ first_name: 'Pat' })" studio/profile_form
+//   submitFormWithProgress(form, opts)               studio/image_upload
+//
+// WHY THESE ARRIVE WITH THE PAGE AND ARE NOT LAZY. Alpine evaluates an x-data
+// expression when it meets the element: at start for a page's own markup, at
+// mount for a modal card. A factory that is not defined by then leaves its
+// element dead, and the element here is a photo upload, the birthday gate or
+// the profile form. A dynamic import cannot promise to have resolved, and one
+// that fails is final for the document (studio/lazy_controllers). So the
+// factories are imported statically and preloaded on every page.
+//
+// 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
+// (studio/alpine_shims imports it), like studio/alpine_stores. Its only imports
+// are the modules that own the factories, and those import nothing, so a throw
+// or a missing file elsewhere in studio/application's graph still leaves a
+// page its uploads, its birthday gate and its profile form. It installs itself
+// on evaluation, once.
+//
+// WHEN ONE OF THESE FILES FAILS TO LOAD, every name here is missing: a failed
+// static import stops this module, by either door, for the life of the
+// document. The inline guard in the head (studio/_alpine_scopes_guard) says so
+// on each element that binds one and shows the profile form's plain Save. A
+// factory added to SCOPES is added to that guard's list
+// (test/javascript/alpine_scopes_guard.test.mjs holds the two together).
+//
+// A name a host defined first is left alone.
+import { cropPhotoModal } from "studio/cropper"
+import { imageUploadHost, avatarCropperHost, submitFormWithProgress } from "studio/image_upload"
+import { birthdayModal, studioBirthdayFields } from "studio/birthday"
+import { studioProfileForm } from "studio/profile_form"
+
+// name -> the factory Alpine calls. Alpine passes the expression's own
+// arguments and nothing else.
+export const SCOPES = {
+  cropPhotoModal: (opts) => cropPhotoModal(opts),
+  imageUploadHost: (opts) => imageUploadHost(opts),
+  avatarCropperHost: () => avatarCropperHost(),
+  birthdayModal: (opts) => birthdayModal(opts),
+  studioBirthdayFields: (initial) => studioBirthdayFields(initial),
+  studioProfileForm: (initial) => studioProfileForm(initial)
+}
+
+// Plain functions a page calls by name.
+export const FUNCTIONS = {
+  submitFormWithProgress: (form, opts) => submitFormWithProgress(form, opts)
+}
+
+export function installAlpineScopes(win) {
+  for (const name of Object.keys(SCOPES)) {
+    if (!win[name]) win[name] = SCOPES[name]
+  }
+  for (const name of Object.keys(FUNCTIONS)) {
+    if (!win[name]) win[name] = FUNCTIONS[name]
+  }
+}
+
+if (typeof window !== "undefined") installAlpineScopes(window)

data/app/javascript/studio/alpine_shims.js

@@ -15,6 +15,10 @@
 // host's body binding survives a boot that failed to load. Importing it here
 // keeps it in the boot graph, preloaded; it installs itself on evaluation.
 import "studio/alpine_stores"
+// The x-data factories pages bind (cropPhotoModal, imageUploadHost, ...) are
+// studio/alpine_scopes, which the head also loads by its own module tag and
+// which installs itself the same way.
+import "studio/alpine_scopes"
 import { NavCollapse } from "studio/nav_collapse"
 import {
   showNavSpinner, hideNavSpinner, installSpinnerReset, fireSuccessConfetti

data/app/javascript/studio/application.js

@@ -4,7 +4,8 @@
 //
 // The Stimulus application itself, its attribute schema, the hold button and
 // the lazily registered page-specific controllers are studio/stimulus. This
-// file registers the every-page chrome on it.
+// file registers the every-page chrome on it, and the profile page's compact
+// identity bar, which carries Save once the full card has scrolled away.
 //
 // Everything this file imports statically is preloaded on every page
 // (Studio::Engine.javascript_boot_graph), so the boot costs one round trip.
@@ -13,6 +14,7 @@ import NavCollapseController from "studio/controllers/nav_collapse_controller"
 import ModalHostController from "studio/controllers/modal_host_controller"
 import ToastController from "studio/controllers/toast_controller"
 import LinkSidebarController from "studio/controllers/link_sidebar_controller"
+import IdentityMiniController from "studio/controllers/identity_mini_controller"
 import { startPinnedStack } from "studio/pinned_stack"
 import { installAlpineShims } from "studio/alpine_shims"
 
@@ -23,5 +25,6 @@ application.register("nav-collapse", NavCollapseController)
 application.register("modal-host", ModalHostController)
 application.register("toast", ToastController)
 application.register("link-sidebar", LinkSidebarController)
+application.register("identity-mini", IdentityMiniController)
 
 export { application, schema }

data/app/javascript/studio/birthday.js

@@ -0,0 +1,351 @@
+// studio/birthday: the two places a person picks a date of birth from three
+// selects (studio/fields/_date_of_birth), and the date arithmetic both share.
+//
+//   x-data="birthdayModal({ minAge, state, url, store, gateId })"
+//       the birthday card (studio/modals/blocks/_birthday): asks for the date
+//       and posts it to the app, which decides.
+//   x-data="studioBirthdayFields('1991-01-31')"
+//       the profile page's birthday row (studio/profiles/_birthday_fields):
+//       writes the picked date into the enclosing profile form.
+//
+// Both bind month, day, year, months, dayOptions, years and onMonthChange().
+//
+// studio/alpine_scopes publishes both on window, statically: the birthday card
+// gates an entry, and a card whose factory is missing has nothing to press.
+// It imports nothing; test/javascript/birthday.test.mjs loads it as a data:
+// module.
+
+export const MONTHS = [
+  { n: 1, label: "January" }, { n: 2, label: "February" }, { n: 3, label: "March" },
+  { n: 4, label: "April" }, { n: 5, label: "May" }, { n: 6, label: "June" },
+  { n: 7, label: "July" }, { n: 8, label: "August" }, { n: 9, label: "September" },
+  { n: 10, label: "October" }, { n: 11, label: "November" }, { n: 12, label: "December" }
+]
+
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/
+
+// How long the style guide's demo card takes to answer.
+export const DEMO_RESOLVE_MS = 450
+
+export const VERIFY_FAILED = "We couldn't verify your age. Please check the date and try again."
+export const NETWORK_ERROR = "Network error — please try again."
+
+// The days a month has: 30 in April, 29 in a February only in a leap year. Day
+// 0 of the next month is the last day of this one. With no year picked the
+// year is 2000, a leap year, so February offers 29. With no month, 31.
+export function daysInMonth(month, year) {
+  const m = parseInt(month, 10)
+  if (!m) return 31
+  return new Date(parseInt(year, 10) || 2000, m, 0).getDate()
+}
+
+// [1, 2, ... n] for the day select.
+export function dayOptions(month, year) {
+  return Array.from({ length: daysInMonth(month, year) }, (_, index) => index + 1)
+}
+
+// Whether a picked day still exists once the month or year changes (the 31st
+// does not survive a move to February).
+export function dayExists(day, month, year) {
+  return !!day && parseInt(day, 10) <= daysInMonth(month, year)
+}
+
+// The years counted down from `newest` years ago to `oldest` years ago.
+export function yearsBack(now, newest, oldest) {
+  const years = []
+  for (let y = now.getFullYear() - newest; y >= now.getFullYear() - oldest; y--) years.push(y)
+  return years
+}
+
+// Whole years between a date of birth and `now`: a birthday later this year
+// has not happened yet.
+export function ageOn(year, month, day, now) {
+  const dob = new Date(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10))
+  let age = now.getFullYear() - dob.getFullYear()
+  const hadBirthday = (now.getMonth() > dob.getMonth()) ||
+    (now.getMonth() === dob.getMonth() && now.getDate() >= dob.getDate())
+  if (!hadBirthday) age -= 1
+  return age
+}
+
+// "1991-01-31" as the three strings the selects hold ("1991", "1", "31"), or
+// three blanks for anything that is not a full date. Strings, because that is
+// what a pick produces: an option renders :value="m.n", the DOM stringifies it
+// and x-model writes the string back.
+export function partsOfIso(value) {
+  const match = ISO_DATE.exec(String(value || ""))
+  if (!match) return { year: "", month: "", day: "" }
+  return { year: String(+match[1]), month: String(+match[2]), day: String(+match[3]) }
+}
+
+// The three parts as "1991-01-31", or "" until all three are picked.
+export function isoOfParts(year, month, day) {
+  if (!(year && month && day)) return ""
+  return year + "-" + String(month).padStart(2, "0") + "-" + String(day).padStart(2, "0")
+}
+
+// What the profile form's dirty check compares. A complete date is its ISO
+// string, so a finished edit compares against the value the page loaded with.
+// An untouched empty field is "", the same as a person with no birthday on
+// file. A partial pick is the three parts joined, so choosing only a month
+// reads as a change.
+export function dateSignature(year, month, day) {
+  if (year && month && day) return isoOfParts(year, month, day)
+  if (!year && !month && !day) return ""
+  return [year, month, day].join("-")
+}
+
+// The date a modal entry's props carry back from the age-gate card
+// (dobYear, dobMonth, dobDay), as select strings, or null when any part is
+// missing. A day the restored month does not have comes back blank: a select
+// holding a value its options do not contain reads as complete and would
+// submit a date nobody picked.
+export function returnedDob(props) {
+  props = props || {}
+  const y = parseInt(props.dobYear, 10)
+  const m = parseInt(props.dobMonth, 10)
+  const d = parseInt(props.dobDay, 10)
+  if (!y || !m || !d) return null
+  return { year: String(y), month: String(m), day: d <= daysInMonth(m, y) ? String(d) : "" }
+}
+
+// The line a refusal reads when no age-gate card is registered.
+export function refusalLine(minAge, stateCode) {
+  return "You must be " + minAge + "+" + (stateCode ? " in " + stateCode : "") + "."
+}
+
+// What the app's answer means. The app tells "too young" from "bad request":
+// body.underage or a 403 is a refusal, which goes to the age-gate card; any
+// other failure is an error, which stays on the card's own line.
+export function verdictOf(response) {
+  const body = (response && response.body) || {}
+  if (response && response.ok && body.verified) return { verdict: "verified" }
+  if (body.underage === true || (response && response.status === 403)) {
+    return { verdict: "refused", message: body.error || body.message || "" }
+  }
+  return { verdict: "error", message: body.error || VERIFY_FAILED }
+}
+
+// x-data for the birthday card. The factory holds no policy: minAge is the
+// app's (0 means the app supplied none), the age it computes is a hint, and
+// the app's answer at `url` is the verdict.
+//
+// opts:
+//   minAge        the app's minimum age.
+//   state         a jurisdiction label, shown and never edited.
+//   url           the app endpoint the date posts to.
+//   store         the Alpine store the card is mounted in (default "modals").
+//   gateId        the modal a refusal opens (the age-gate card). Blank, the
+//                 refusal is the card's own error line.
+//   demo          the style guide: answer locally, post nothing.
+//   demoUnderage  the style guide: take the refused branch.
+//
+// env: { win, now } for the tests.
+export function birthdayModal(opts, env) {
+  opts = opts || {}
+  const win = (env && env.win) || window
+  const now = (env && env.now) || new Date()
+
+  return {
+    month: "", day: "", year: "",
+    submitting: false,
+    error: "",
+    minAge: parseInt(opts.minAge, 10) || 0,
+    stateCode: opts.state || "",
+    url: opts.url || "",
+    store: opts.store || "modals",
+    demo: !!opts.demo,
+    demoUnderage: !!opts.demoUnderage,
+    gateId: opts.gateId || "",
+    months: MONTHS,
+    // From 13 years ago back 100: a sane range to pick from, not an age bar.
+    years: yearsBack(now, 13, 100),
+
+    get dayOptions() {
+      return dayOptions(this.month, this.year)
+    },
+    get complete() {
+      return !!(this.month && this.day && this.year)
+    },
+    get computedAge() {
+      if (!this.complete) return null
+      return ageOn(this.year, this.month, this.day, now)
+    },
+    get isUnderage() {
+      return this.computedAge !== null && !!this.minAge && this.computedAge < this.minAge
+    },
+
+    onMonthChange() {
+      if (this.day && !dayExists(this.day, this.month, this.year)) this.day = ""
+      this.error = ""
+    },
+
+    // THE RETURN TRIP. _reject writes the date onto the store on its way to the
+    // age-gate card, and that card's back() hands the same three parts back, so
+    // a card mounted from a return trip finds the person's date on its own
+    // entry. Read off the store, where this factory already meets it.
+    _returnedDob() {
+      try {
+        const entry = win.Alpine.store(this.store).current()
+        return returnedDob(entry && entry.props)
+      } catch (_) {
+        return null
+      }
+    },
+
+    // Alpine calls init() at mount, before it walks the three selects, so the
+    // restored date is their first state. The DATE is restored, never the
+    // verdict: the app decides again on the next submit.
+    init() {
+      const dob = this._returnedDob()
+      if (!dob) return
+      this.year = dob.year
+      this.month = dob.month
+      this.day = dob.day
+    },
+
+    // Accepted: flip the session flag if the page has one, close, and let the
+    // app resume what it was gating (it listens for `age-verified`).
+    _finish() {
+      try {
+        const session = win.Alpine && win.Alpine.store && win.Alpine.store("session")
+        if (session) session.ageVerified = true
+      } catch (_) {}
+      try { win.Alpine.store(this.store).close() } catch (_) {}
+      win.dispatchEvent(new win.CustomEvent("age-verified"))
+    },
+
+    // Refused: hand off to the age-gate card, which owns what to do next. A
+    // handoff and not an error, so the person is never left on a red card with
+    // nothing to press. swap(), so that card's back link returns here. The date
+    // crosses the store as three numbers, which a reactive proxy carries intact.
+    _reject(message) {
+      if (!this.gateId) {
+        this.error = message || this._refusalLine()
+        return
+      }
+      try {
+        win.Alpine.store(this.store).swap(this.gateId, {
+          minAge: this.minAge,
+          state: this.stateCode,
+          message: message || "",
+          dobYear: parseInt(this.year, 10) || null,
+          dobMonth: parseInt(this.month, 10) || null,
+          dobDay: parseInt(this.day, 10) || null
+        })
+      } catch (_) {
+        this.error = message || this._refusalLine()
+      }
+    },
+
+    _refusalLine() {
+      return refusalLine(this.minAge, this.stateCode)
+    },
+
+    // No refusal on the client: every complete date goes to the app, and its
+    // answer routes here.
+    submit() {
+      if (!this.complete || this.submitting) return
+      this.error = ""
+      this.submitting = true
+      const self = this
+
+      if (this.demo) {
+        win.setTimeout(function () {
+          self.submitting = false
+          if (self.demoUnderage || self.isUnderage) self._reject()
+          else self._finish()
+        }, DEMO_RESOLVE_MS)
+        return
+      }
+
+      const csrf = (win.document.querySelector('meta[name="csrf-token"]') || {}).content || ""
+      win.fetch(this.url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, "Accept": "application/json" },
+        body: JSON.stringify({ year: this.year, month: this.month, day: this.day })
+      })
+        .then(function (response) {
+          return response.json().then(function (body) { return { ok: response.ok, status: response.status, body } })
+        })
+        .then(function (response) {
+          self.submitting = false
+          const answer = verdictOf(response)
+          if (answer.verdict === "verified") self._finish()
+          else if (answer.verdict === "refused") self._reject(answer.message)
+          else self.error = answer.message
+        })
+        .catch(function () {
+          self.submitting = false
+          self.error = NETWORK_ERROR
+        })
+    }
+  }
+}
+
+// x-data for the profile page's birthday row: three selects in place of a date
+// picker, so there is no popover to place and none to restore open. `initial`
+// is the ISO date on file, or blank.
+//
+// It sits inside the profile form's scope (studio/profile_form), and reaches
+// that scope's `fields` through Alpine's scope chain: publishing the picked
+// date into fields.birthday is what raises the save bar.
+export function studioBirthdayFields(initial, env) {
+  const today = () => (env && env.now) || new Date()
+  const parts = partsOfIso(initial)
+
+  return {
+    year: parts.year,
+    month: parts.month,
+    day: parts.day,
+    months: MONTHS,
+
+    // This year back 120: a birthday is not in the future, and 120 covers
+    // every living person.
+    get years() {
+      return yearsBack(today(), 0, 120)
+    },
+    get dayOptions() {
+      return dayOptions(this.month, this.year)
+    },
+    get complete() {
+      return !!(this.year && this.month && this.day)
+    },
+    get isoValue() {
+      return isoOfParts(this.year, this.month, this.day)
+    },
+    get signature() {
+      return dateSignature(this.year, this.month, this.day)
+    },
+
+    // Named for what the shared field binds. Clears a day the new month or
+    // year does not have, then publishes.
+    onMonthChange() {
+      if (this.day && !dayExists(this.day, this.month, this.year)) this.day = ""
+      this.publish()
+    },
+
+    publish() {
+      if (this.fields) this.fields.birthday = this.signature
+    },
+
+    // DISCARD REACHES THE SELECTS through this watch. The form's discard
+    // reassigns its `fields`, which restores every input bound with x-model;
+    // the selects are bound to this scope's own parts, so they follow
+    // fields.birthday instead. The early return when the value already matches
+    // is what stops publish and watch from looping.
+    init() {
+      const self = this
+      this.publish()
+      this.$watch("fields.birthday", function (value) {
+        if (value === self.signature) return
+        self.adopt(value)
+      })
+    },
+
+    // Puts the selects on an ISO date; anything else empties all three.
+    adopt(value) {
+      Object.assign(this, partsOfIso(value))
+    }
+  }
+}

data/app/javascript/studio/confirm_interstitial.js

@@ -0,0 +1,44 @@
+// studio/confirm_interstitial: the scanner-safe sign-in page
+// (studio/_confirm_interstitial) posts its own form. The GET that renders the
+// page is inert; this POST is what burns the single-use token and signs in.
+//
+// The page is a whole document with no layout, no import map and no Stimulus
+// application, so it loads this module by its own tag and the module runs on
+// evaluation. It posts once: the form is stamped, so a second evaluation (a
+// restored page) does not post again.
+//
+// THE FALLBACK BUTTON HAS TWO WAYS TO APPEAR, four seconds in. The page shows
+// it by CSS alone, so a page whose script never arrives still has something to
+// press. This module shows it too, by a timer, because an engine may hold a
+// CSS animation while the post's navigation is pending (WebKit does, and the
+// post is pending for exactly as long as the button is wanted).
+//
+// It imports nothing; test/javascript/confirm_interstitial.test.mjs loads it
+// as a data: module.
+
+export const FORM_ID = "magic-consume-form"
+export const FALLBACK_ID = "magic-fallback"
+// The class that shows the fallback (the page's own stylesheet).
+export const SHOWN_CLASS = "is-shown"
+export const FALLBACK_AFTER_MS = 4000
+
+// Submits the form unless it has been submitted already. Answers whether it
+// submitted.
+export function autoSubmit(form) {
+  if (!form || form.dataset.autoSubmitted) return false
+  form.dataset.autoSubmitted = "1"
+  if (typeof form.requestSubmit === "function") form.requestSubmit()
+  else form.submit()
+  return true
+}
+
+// Shows the fallback block once `ms` have passed. Returns the timer.
+export function revealFallbackLater(fallback, later, ms) {
+  if (!fallback) return null
+  return later(function () { fallback.classList.add(SHOWN_CLASS) }, ms == null ? FALLBACK_AFTER_MS : ms)
+}
+
+if (typeof document !== "undefined") {
+  autoSubmit(document.getElementById(FORM_ID))
+  revealFallbackLater(document.getElementById(FALLBACK_ID), setTimeout)
+}

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

@@ -0,0 +1,32 @@
+// identity-mini: the compact identity bar's lifetime, on the engine's Stimulus
+// application (studio/application, which reads data-studio-controller). It sits
+// on the bar studio/profiles/_identity_mini renders:
+//
+//   <div data-studio-identity-mini data-studio-controller="identity-mini"
+//        class="studio-identity-mini" inert>
+//
+// and watches the page's full card ([data-studio-identity-full]). When the bar
+// shows is studio/identity_mini. connect() starts the watch, on a full load
+// and on a Turbo visit alike; the bar goes back to hidden and inert before
+// Turbo caches the page and when it leaves it.
+//
+// Registered statically by studio/application: on the edit page the bar
+// carries Save and Discard once the card has scrolled away, so it arrives with
+// the page.
+import { Controller } from "@hotwired/stimulus"
+import { IdentityMini, FULL_SELECTOR } from "studio/identity_mini"
+
+export default class extends Controller {
+  connect() {
+    this.bar = new IdentityMini(this.element, document.querySelector(FULL_SELECTOR), window.IntersectionObserver)
+    this.bar.start()
+    this.onBeforeCache = () => this.bar.reset()
+    document.addEventListener("turbo:before-cache", this.onBeforeCache)
+  }
+
+  disconnect() {
+    document.removeEventListener("turbo:before-cache", this.onBeforeCache)
+    if (this.bar) this.bar.reset()
+    this.bar = null
+  }
+}