studio-engine 0.96.2 → 0.97.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 636f573bb4164b3e8dc813a50d71347dcdb81bba7942ea302e9487fbf83b2d11
-  data.tar.gz: b1cc9010532d7adfd1c39b352bdc4f257ee1bfb6db42955c9caaa423f3c3951a
+  metadata.gz: ee44de927b41f3860880f106cf5abc81b69d076a7d35f4de767bd904533b63c4
+  data.tar.gz: 200c6bdb2758bc78fadded463649a281dadc7042b18d9a8634a33ab6efd5ddc2
 SHA512:
-  metadata.gz: ca888c9b19db94fd66441af537b0e785b269d4e9263458eb73affe2720c92609d10853a274802290a2a2e3f561d66dca990e49c85c4da295e47e593e40c64942
-  data.tar.gz: 2fd26c5e568d21f278e54781bb3759fb67f4284252ecd8779d745340019257d52741305284a824854ab6ad39590ca633e7caa8500ee331fa2f253c4d15aa99c1
+  metadata.gz: d92ba31d0fd6a1ff1c5a2dd0d140fb6dc3c396e2e7813ab034d64666520c611a9497ec396d99307e59f67793b53295b88988c10f1b23e3025e142d1ade370834
+  data.tar.gz: ce67bc16e6c58eda9afa49a401d2b079b635340244d01320bc0cd67873d189e10c30b47e5fb53b6c52176c378fe79b17f399d6bcf9b3a94ac424df968b83376d

data/CHANGELOG.md

@@ -4,6 +4,189 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.97.0 — 2026-10-09
+
+### Changed
+
+- **The toast queue, the link sidebar and the hold button move to ES modules and
+  Stimulus controllers.** `layouts/studio/_flash`, `components/_link_sidebar`
+  and `studio/_hold_button` render markup only; their inline scripts are gone.
+  Rendered markup and styling are unchanged apart from the attributes named
+  here.
+  - **Toast.** The queue is `studio/toast`, registered as `$store.toasts`. The
+    partial's root is a bare `x-data` carrying `data-studio-controller="toast"`
+    and the flash as `data-toast-initial-value`. The API is unchanged: dispatch
+    the `toast` window event. A page's Turbo snapshot no longer keeps its
+    flash, so Back does not replay it.
+  - **Link sidebar.** `$store.sidebars.linkTreeOpen` and the document click and
+    Escape handlers are `studio/link_sidebar`; the partial renders one
+    `<template data-studio-controller="link-sidebar">` anchor. The flag
+    registers only on a page that renders the panel, and a host's own
+    `sidebars` store keeps its keys.
+  - **Hold button.** The timeline, the idle nudge and the fizz portal are
+    `studio/hold_button`, on a `hold-button` controller that sits on the
+    `.hold-stack`; the button's presses are `data-studio-action`s. The idle
+    nudge runs only on a button the partial rendered, from the moment it
+    connects. `studio/stimulus` imports the controller statically, so it is
+    preloaded with the page and a button that renders later (a modal's) makes
+    no further request before its first press.
+  - `layouts/studio/_head` imports `studio/toast`, `studio/link_sidebar` and
+    `studio/stimulus` by their own nonced module tags, as it does
+    `studio/alpine_stores` and `studio/modal_host`, so a boot that fails to
+    load keeps a page its flash, its sidebar and its hold button.
+- **The engine's Stimulus application is `studio/stimulus`.**
+  `studio/application` still exports `application` and `schema`. A controller
+  for one kind of page is listed in `studio/stimulus`'s `LAZY` and registered by
+  `studio/lazy_controllers` the first time an element names it; the list starts
+  empty. A lazy load that fails is final for the document, as it is in a
+  browser: the registry imports a controller once, reports a failure once, and
+  marks each element naming it with `data-studio-controller-failed`.
+- **The admin pages, the email manager, booking, the footer map and the survey
+  stepper move to ES modules.** Their inline scripts are gone; rendered markup
+  and styling are unchanged apart from the `data-studio-controller` attributes
+  named here. Six controllers register lazily, each fetched only by a page that
+  names it:
+  - `geo-settings` on `/admin/geo`'s root (`studio/geo_settings`), and
+    `link-preview-card` on `/admin/link_preview`'s root
+    (`studio/link_preview_card`).
+  - `email-banner-scale` on the `<template>` anchor `studio/emails/_banner_scale`
+    renders (`studio/email_banner_scale`).
+  - `booking` on the frame's wrapper and the popup's dialog (`studio/booking`),
+    and `footer-map` on the map element (`studio/footer_map`). Both install
+    once per document under the same guards (`__studioBookingFramesArmed`,
+    `__studioBookingPopupArmed`, `__studioFooterMapsArmed`) and
+    `window.__studioBookingLoad` is still published. Until the booking
+    controller connects, a booking link is an ordinary link to the booking page.
+  - `survey` on the survey's root (`studio/survey`). Until it connects, and if
+    it never does, the page is the plain form.
+  - The theme editors and the email manager's editors stay Alpine factories:
+    `themeEditor` and `dsThemeEditor` are `studio/theme_editor`, and
+    `emailBannerEditor` and `emailRecipients` are `studio/email_banner`.
+    `studio/alpine_shims` publishes all four on every page, because an `x-data`
+    is evaluated the moment Alpine starts. `themeEditor` takes its colours as
+    an argument.
+- **`test/views/no_inline_script_test.rb` holds the views to it.** A view with
+  an inline script fails unless it is on the test's allow-list, where each entry
+  names the task that owns it; an entry whose script is gone fails too. Two are
+  left inline on purpose: `studio/_at_time_script`, whose first pass runs before
+  first paint, and `solana_sessions/phantom_callback`, the wallet's return leg.
+
+- **The board primitive and the leveling activity modals move to ES modules.**
+  `studio/_board_assets` and `studio/_leveling_activity_assets` render nothing;
+  their inline scripts are gone. A consumer's `render` of either keeps working
+  and can be deleted. Rendered markup is unchanged apart from
+  `data-studio-controller="board"` on the board's `<section>`.
+  - **Board.** The factory is `studio/board`. `x-data="studioBoard({...})"`
+    still resolves: `studio/alpine_shims` publishes `window.studioBoard` on
+    every page, and every name on the scope is unchanged (`state`, `toasts`,
+    `toast`, `updateCounts`, `animateCardExit`, the state helpers). The zones
+    are made draggable by a `board` controller, registered lazily, once
+    SortableJS has loaded; `data-alpine-ready` is set after that, so it still
+    means "the board drags". A board written by hand with only the `x-data`
+    names the controller on itself.
+  - **A board whose controller fails to load says so.** The board controller is
+    lazy, and a failed lazy load is final for the document. The board's section
+    then carries `data-studio-controller-failed="board"` and shows "This board
+    could not load its controls. Reload the page." above its cards, which stay
+    readable; the notice is revealed by a rule in `engine.css`, so an app sees
+    it once its Tailwind build includes this engine's `engine.css`.
+  - **Leveling activity.** The factory is `studio/leveling_activity`, published
+    as `window.levelingActionModal`. Its opts and JSON contract are unchanged.
+- **SortableJS loads only on a page that drags.** `layouts/studio/_head` no
+  longer loads `studio/sortable` on every page. The vendored build is pinned as
+  `sortablejs` and imported by `studio/board` on the first board a page
+  renders. `window.Sortable` is a shim until then: `Sortable.create(el, options)`
+  in a page script loads the library and then creates the sortable, so a host
+  that calls it (the hub's deploy board) needs no change. The shim's `create`
+  returns nothing; `await Sortable.load()` resolves with SortableJS for a
+  caller that needs the instance. canvas-confetti and `studio_confetti` stay in
+  the head: `fireSuccessConfetti` and consumer scripts call them on any page.
+
+### Added
+
+- **The hold button dispatches `hold-button:guard`, `hold-button:start`,
+  `hold-button:validate`, `hold-button:early` and `hold-button:success`**, on
+  the button, bubbling, each with `detail.id` (the `hold_id`). `preventDefault()`
+  on `guard` refuses the hold, on `early` takes the action over, and on
+  `success` leaves the button's state to the listener;
+  `$event.detail.waitUntil(answer)` on `validate` takes a boolean or a promise,
+  and a false or failed answer aborts the hold. The string locals (`guard:`,
+  `on_hold_start:`, `validate:`, `early_action:`, `early_action_guard:`,
+  `on_success:`) still work and are heard beside the events; write new call
+  sites against the events. `validate_at:` and `early_action_at:` are honoured
+  without their string local.
+- **The hold button fails safe.** A `guard:` that throws, or that has no Alpine
+  scope to run in, refuses the hold (it used to let the hold through); a second
+  press without a release restarts the hold, so one hold confirms once; a
+  validation answer for a press that was released does not abort the next one;
+  nothing of the timeline runs after the hold completes.
+
+### Fixed
+
+- **The style guide's theme editor sends a save once.** The controller answers
+  a save with a 302 to `/admin/theme`, and a fetch that follows a 302 keeps a
+  PATCH a PATCH, so Save sent the theme twenty-one times and then toasted "Save
+  failed". The request no longer follows the redirect.
+- **The email manager's banner editor repaints the banner on the email's own
+  page.** `studio/emails/_banner_preview` isolates the banner in an iframe, and
+  the editor looked for its nodes in the page's own document only, so typing a
+  header, sub-text or tint changed nothing there. The editor now reaches into
+  the frame, as the emails list already did.
+- **Two boards on one page no longer drive each other's zones.** A board made
+  every `.kanban-dropzone` on the page sortable and counted cards by document
+  id, so the first board's group, filter and lock rule governed every board
+  after it: on `/admin/style` the depth-chart specimen's cards left their
+  lanes and its locked starters dragged. A board now wires, watches and counts
+  only the zones inside its own element.
+- **A hold button that cannot work says so.** The button runs on five modules,
+  and a browser keeps a failed module request for the life of the document, so
+  one failure among them at page load left the button rendered, enabled and
+  deaf: a full hold sent nothing and showed nothing until a reload. The head
+  now carries a small inline, nonced guard (`studio/_hold_button_guard`) that
+  imports nothing. A `.hold-stack` whose controller has not connected 1.5 s
+  after `DOMContentLoaded` (or shortly after it arrives later, by a Turbo visit
+  or a modal's `x-if`) is marked `data-studio-controller-failed="hold-button"`:
+  the button dims and is `aria-disabled`, the bubbles stop, and "This button
+  could not load. Reload the page." shows under it in a `role="status"`
+  region; a press says it again. The controller writes
+  `data-hold-button-connected` on its stack and clears the mark the moment it
+  connects, however late. `studio/_hold_button` renders one more element, an
+  empty `<span class="hold-notice" role="status">` held out of the layout, so
+  a working button measures as before. A host with a nonce-based
+  `script-src` needs nothing new; one that allow-lists inline scripts by hash
+  adds this script's.
+
+### Breaking
+
+- **`window.toastManager` is gone.** Nothing binds it: the flash partial reads
+  `$store.toasts`. A template that wrote `x-data="toastManager(...)"` of its own
+  renders `layouts/studio/flash` and dispatches the `toast` event instead.
+- **`window.holdBtnStart`, `window.holdBtnEnd` and `window._holdBtnInit` are
+  gone.** The button binds its own presses; a page that called either function
+  dispatches the pointer events on the button, or renders the partial.
+- **`window.__studioLinkSidebarBridge` is gone.** It was the inline script's
+  run-once flag; a test that looked for it in a page's HTML looks for
+  `data-studio-controller="link-sidebar"`.
+- **`studio/emails/_recipient_repaint` and `studio/surveys/_script` are gone.**
+  Each rendered only a script. The engine's own pages no longer render them; a
+  host template that did deletes the line.
+- **The footer's and the booking primitives' scripts are no longer in the
+  page's HTML.** A test that looked for `__studioFooterMapsArmed`,
+  `__studioBookingFramesArmed` or `__studioBookingPopupArmed` in a response body
+  looks for `data-studio-controller="footer-map"` on the map, or
+  `data-studio-controller="booking"` on the frame's wrapper and the dialog. The
+  globals themselves are still set, once the controller has connected.
+  `window.__studioSurveyBound` and `window.__studioSurveyTurboHook` are gone;
+  nothing outside the survey's script read them.
+- **`window.Sortable` is not SortableJS until a page asks for it.** On a page
+  with no board it is the loading shim, which has `create` and `load` and
+  nothing else: `new Sortable(...)`, `Sortable.get` and the other statics fail
+  until the library has loaded. A page script that needs more than `create`
+  awaits `Sortable.load()` first. A page that loads its own SortableJS is
+  unaffected. A test that looked for `window.studioBoard =` or a
+  `studio/sortable` script tag in a page's HTML looks for
+  `data-studio-controller="board"` on the board.
+
 ## 0.96.2 — 2026-10-08
 
 ### Added

data/app/assets/tailwind/studio_engine/engine-motion.css

@@ -1733,6 +1733,63 @@ body.modal-open { overflow: visible; }
   z-index: 1;
 }
 
+/* THE BUTTON THAT COULD NOT LOAD. The guard in the head
+   (studio/_hold_button_guard) marks a stack whose controller never connected
+   data-studio-controller-failed="hold-button" and fills its .hold-notice. Until
+   then the notice is an empty live region held out of the layout, so a working
+   button measures exactly as it does without one. Marked, the button reads as
+   unavailable, the bubbles stop, and the notice sits under the button in the
+   danger ink, which the theme resolver holds to AA on every surface. */
+.hold-stack > .hold-notice {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.hold-stack[data-studio-controller-failed~="hold-button"] > .hold-btn {
+  opacity: 0.45;
+  filter: grayscale(0.7);
+  cursor: not-allowed;
+}
+
+.hold-stack[data-studio-controller-failed~="hold-button"] > .hold-fizz,
+.hold-stack[data-studio-controller-failed~="hold-button"] > .hold-fizz-portal {
+  display: none;
+}
+
+.hold-stack[data-studio-controller-failed~="hold-button"] > .hold-notice {
+  position: static;
+  display: block;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  clip-path: none;
+  white-space: normal;
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.35;
+  text-align: center;
+  color: var(--color-danger-ink, var(--color-danger));
+}
+
+/* A press on the marked button: the notice answers it, with a pulse only for
+   a reader who has not asked for less motion. */
+@media (prefers-reduced-motion: no-preference) {
+  .hold-stack[data-hold-notice-pressed] > .hold-notice {
+    animation: hold-notice-pressed 0.45s ease-out;
+  }
+}
+
+@keyframes hold-notice-pressed {
+  0%   { transform: scale(1); }
+  35%  { transform: scale(1.06); }
+  100% { transform: scale(1); }
+}
+
 .hold-stack > .hold-fizz,
 .hold-stack > .hold-fizz-portal,
 .hold-fizz-portal > .hold-fizz {

data/app/assets/tailwind/studio_engine/engine.css

@@ -565,3 +565,11 @@ body.modal-open .studio-app-banner {
       }
     }
 }
+
+/* A board whose controller failed to load (studio/lazy_controllers marks its
+   section data-studio-controller-failed="board") shows the notice
+   studio/board/_board renders with an inline display: none. !important is what
+   lets a stylesheet rule answer an inline style. */
+.studio-board[data-studio-controller-failed~="board"] > .studio-board-failed {
+  display: block !important;
+}

data/app/javascript/studio/alpine_shims.js

@@ -19,6 +19,10 @@ import { NavCollapse } from "studio/nav_collapse"
 import {
   showNavSpinner, hideNavSpinner, installSpinnerReset, fireSuccessConfetti
 } from "studio/head_chrome"
+import { studioBoard, loadSortable, sortableShim } from "studio/board"
+import { levelingActionModal } from "studio/leveling_activity"
+import { themeEditor, dsThemeEditor } from "studio/theme_editor"
+import { emailBannerEditor, emailRecipients } from "studio/email_banner"
 
 // x-data="navCollapse()": the hub's own header. A host that defines its own
 // window.navCollapse (turf-monster does, inline, before this runs) keeps it.
@@ -41,5 +45,24 @@ export function installAlpineShims() {
   if (!window.showNavSpinner) window.showNavSpinner = showNavSpinner
   if (!window.hideNavSpinner) window.hideNavSpinner = hideNavSpinner
   if (!window.fireSuccessConfetti) window.fireSuccessConfetti = fireSuccessConfetti
+  // x-data="studioBoard({...})": studio/board/_board, and any board a host
+  // writes by hand. Alpine passes the opts alone.
+  if (!window.studioBoard) window.studioBoard = (opts) => studioBoard(opts)
+  // x-data="levelingActionModal({...})": studio/modals/blocks/_leveling_activity
+  // and _change_username.
+  if (!window.levelingActionModal) window.levelingActionModal = (opts) => levelingActionModal(opts)
+  // Sortable.create(el, options) in a page script (the hub's deploy board):
+  // no page carries SortableJS until something asks for it, so the call loads
+  // it. SortableJS replaces this object when it arrives; a page that loads its
+  // own copy (turf-monster's slate page) replaces it the same way.
+  if (!window.Sortable) window.Sortable = sortableShim(() => loadSortable())
+  // x-data="themeEditor({...})" (theme_settings/edit) and
+  // x-data="dsThemeEditor({...})" (style/_theme). Alpine passes the seed alone.
+  if (!window.themeEditor) window.themeEditor = (seed) => themeEditor(seed)
+  if (!window.dsThemeEditor) window.dsThemeEditor = (seed) => dsThemeEditor(seed)
+  // x-data="emailBannerEditor({...})" (studio/emails/show) and
+  // x-data="emailRecipients({...})" (studio/emails/index).
+  if (!window.emailBannerEditor) window.emailBannerEditor = (config) => emailBannerEditor(config)
+  if (!window.emailRecipients) window.emailRecipients = (config) => emailRecipients(config)
   installSpinnerReset()
 }

data/app/javascript/studio/application.js

@@ -2,38 +2,26 @@
 // layouts/studio/_head (javascript_import_module_tag, which carries the
 // request's CSP nonce).
 //
-// 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.
+// 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.
 //
 // Everything this file imports statically is preloaded on every page
 // (Studio::Engine.javascript_boot_graph), so the boot costs one round trip.
-import { Application, defaultSchema } from "@hotwired/stimulus"
+import { application, schema } from "studio/stimulus"
 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 { startPinnedStack } from "studio/pinned_stack"
 import { installAlpineShims } from "studio/alpine_shims"
 
 installAlpineShims()
 startPinnedStack()
 
-export const schema = {
-  ...defaultSchema,
-  controllerAttribute: "data-studio-controller",
-  actionAttribute: "data-studio-action",
-  targetAttribute: "data-studio-target"
-}
-
-const application = Application.start(document.documentElement, schema)
 application.register("nav-collapse", NavCollapseController)
 application.register("modal-host", ModalHostController)
+application.register("toast", ToastController)
+application.register("link-sidebar", LinkSidebarController)
 
-export { application }
+export { application, schema }