studio-engine 0.96.2 → 0.97.0.rc1

data/app/javascript/studio/toast.js

@@ -0,0 +1,270 @@
+// studio/toast: the toast queue behind layouts/studio/_flash ($store.toasts).
+//
+// THE API IS THE `toast` WINDOW EVENT, from any page that renders the partial:
+//
+//   window.dispatchEvent(new CustomEvent("toast", { detail: {
+//     type: "notice",            "notice" or "alert"
+//     title: "Header",           "Success" / "Error" when omitted
+//     message: "Subtext",
+//     image: "/avatar.jpg",      an icon when omitted
+//     dismissible: true,         the X button
+//     buttons: [{ label, style, onclick }],
+//     duration: 4000,            ms; 0 stays; 0 by default when it has buttons
+//     blurShadow: false          a frosted halo behind the card
+//   } }))
+//
+// The partial renders markup only. Its root carries
+//
+//   data-studio-controller="toast"
+//   data-toast-initial-value='[{"type":"notice","message":"Saved"}]'
+//
+// and its Alpine bindings read $store.toasts. studio/controllers/toast_controller
+// binds the queue to the element's lifetime.
+//
+// WHEN THE STORE REGISTERS. Alpine evaluates $store.toasts as it starts, before
+// Stimulus connects a controller, so the store registers from this module on
+// alpine:init, and only when Alpine has none (a host's own wins). The module
+// also owns the `toast` listener and seeds each rendered root's flash messages
+// (on alpine:initialized and on turbo:load), so a page whose Stimulus boot
+// failed still shows its flash and its toasts. The controller seeds the same
+// root on connect; an element is seeded once.
+//
+// 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/toast.test.mjs
+// holds it to that.
+
+// The queue keeps this many toasts; the oldest leaves when one more arrives.
+export const TOAST_CAP = 5
+// A toast with no duration of its own, and no buttons, leaves after this long.
+export const DEFAULT_DURATION_MS = 4000
+// The leave transition's length (.toast-wrapper in layouts/studio/_flash): a
+// dismissed toast is spliced out this long after it starts to shrink.
+export const LEAVE_MS = 400
+// Flash messages enter one after another: the first after SEED_DELAY_MS, each
+// later one SEED_STAGGER_MS behind the last.
+export const SEED_DELAY_MS = 50
+export const SEED_STAGGER_MS = 100
+
+export const TOAST_ROOT = '[data-studio-controller~="toast"]'
+const INITIAL_ATTRIBUTE = "data-toast-initial-value"
+
+// How long a toast stays. A toast with buttons waits for its reader.
+export function toastDuration(detail) {
+  const buttons = (detail && detail.buttons) || []
+  if (detail && detail.duration != null) return detail.duration
+  return buttons.length ? 0 : DEFAULT_DURATION_MS
+}
+
+// The queue entry for a `toast` event's detail. It enters invisible; the queue
+// flips `visible` a tick later so the enter transition runs.
+export function buildToast(detail, id) {
+  const source = detail || {}
+  const type = source.type || "notice"
+  return {
+    id,
+    type,
+    title: source.title || (type === "notice" ? "Success" : "Error"),
+    message: source.message || "",
+    image: source.image || null,
+    dismissible: source.dismissible !== false,
+    blurShadow: source.blurShadow || false,
+    buttons: source.buttons || [],
+    visible: false
+  }
+}
+
+const visibleCount = (toasts) => toasts.filter((toast) => toast.visible).length
+
+// The inline style of the toast at `index`: full, a collapsed peek strip under
+// the newest, or hidden beyond the third.
+export function toastStyle(toasts, index, expanded) {
+  const toast = toasts[index]
+  if (!toast || !toast.visible) {
+    return "opacity: 0; transform: scale(0.7); max-height: 0; margin-top: 0; padding: 0; overflow: hidden;"
+  }
+
+  const collapsed = !expanded && visibleCount(toasts) > 1
+  if (!collapsed || index === 0) {
+    return "opacity: 1; transform: scale(1) translateY(0); margin-top: " + (index > 0 ? "0.35rem" : "0") + "; max-height: 20rem;"
+  }
+
+  if (index <= 2) {
+    const scale = 1 - (index * 0.03)
+    const opacity = 0.7 - ((index - 1) * 0.15)
+    return "display: flex; flex-direction: column; justify-content: flex-end; transform: scale(" + scale +
+      ") translateY(0); max-height: 0.5rem; overflow: hidden; opacity: " + opacity +
+      "; margin-top: 0.15rem; pointer-events: auto; cursor: pointer;"
+  }
+
+  return "max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; pointer-events: none;"
+}
+
+export function toastShadowClass(toasts, index) {
+  if (visibleCount(toasts) <= 1) return "toast-shadow-all"
+  return index === 0 ? "toast-shadow-top" : "toast-shadow-bottom"
+}
+
+// $store.toasts. Methods read `this`, so they run on Alpine's reactive proxy
+// when Alpine calls them and on the plain object in a test.
+export function createToastStore({ win } = {}) {
+  const host = win || globalThis
+  const later = (fn, ms) => host.setTimeout(fn, ms)
+  const nextTick = (fn) => {
+    const alpine = host.Alpine
+    if (alpine && typeof alpine.nextTick === "function") alpine.nextTick(fn)
+    else later(fn, 0)
+  }
+
+  return {
+    toasts: [],
+    expanded: false,
+    _nextId: 0,
+    _page: 0,
+
+    add(detail) {
+      const id = ++this._nextId
+      this.toasts.unshift(buildToast(detail, id))
+      while (this.toasts.length > TOAST_CAP) this.toasts.pop()
+      this.expanded = false
+
+      nextTick(() => {
+        const toast = this.toasts.find((entry) => entry.id === id)
+        if (toast) toast.visible = true
+      })
+
+      const duration = toastDuration(detail)
+      if (duration > 0) later(() => this.dismiss(id), duration)
+      return id
+    },
+
+    // Each message after the last, as the flash arrives. A message still
+    // waiting when its page leaves (clear) is dropped.
+    seed(messages) {
+      const page = this._page;
+      (messages || []).forEach((message, index) => {
+        later(() => { if (this._page === page) this.add(message) }, index * SEED_STAGGER_MS + SEED_DELAY_MS)
+      })
+    },
+
+    dismiss(id) {
+      const toast = this.toasts.find((entry) => entry.id === id)
+      if (!toast || !toast.visible) return
+      toast.visible = false
+      later(() => {
+        this.toasts = this.toasts.filter((entry) => entry.id !== id)
+        if (visibleCount(this.toasts) <= 1) this.expanded = false
+      }, LEAVE_MS)
+    },
+
+    // The queue leaves with its page. A timer that fires later finds no toast.
+    clear() {
+      this._page += 1
+      this.toasts = []
+      this.expanded = false
+    },
+
+    hasVisible() { return this.toasts.some((toast) => toast.visible) },
+
+    handlePeekClick(index) {
+      if (!this.expanded && index > 0 && this.toasts.length > 1) this.expanded = true
+    },
+
+    toastStyle(index) { return toastStyle(this.toasts, index, this.expanded) },
+    toastShadowClass(index) { return toastShadowClass(this.toasts, index) }
+  }
+}
+
+// The flash messages a rendered root carries. Anything unreadable is no flash.
+export function initialToasts(element) {
+  const raw = element && element.getAttribute ? element.getAttribute(INITIAL_ATTRIBUTE) : null
+  if (!raw) return []
+  try {
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? parsed : []
+  } catch (_error) {
+    return []
+  }
+}
+
+// Registers $store.toasts unless Alpine already has one. Returns the store
+// Alpine holds (its reactive proxy), or null before Alpine exists.
+export function registerToastStore(Alpine, deps = {}) {
+  if (!Alpine || typeof Alpine.store !== "function") return null
+  if (!Alpine.store("toasts")) Alpine.store("toasts", createToastStore(deps))
+  return Alpine.store("toasts")
+}
+
+const seeded = new WeakSet()
+
+// Queues a root's flash messages, once per element. False when there is no
+// store yet, so a later path seeds it.
+export function seedToasts(element, { win } = {}) {
+  const host = win || globalThis
+  if (!element || seeded.has(element)) return false
+  const store = registerToastStore(host.Alpine, { win: host })
+  if (!store) return false
+  seeded.add(element)
+  store.seed(initialToasts(element))
+  return true
+}
+
+// A cached Turbo snapshot keeps the root's flash attribute, and a restored page
+// would replay it. Emptied here, before the snapshot is taken.
+export function forgetInitialToasts(element) {
+  if (element && element.hasAttribute && element.hasAttribute(INITIAL_ATTRIBUTE)) {
+    element.setAttribute(INITIAL_ATTRIBUTE, "[]")
+  }
+}
+
+const toastRoots = (root) =>
+  (root && typeof root.querySelectorAll === "function" ? Array.from(root.querySelectorAll(TOAST_ROOT)) : [])
+
+export function seedAllToasts({ win, doc } = {}) {
+  const host = win || globalThis
+  toastRoots(doc || host.document).forEach((element) => seedToasts(element, { win: host }))
+}
+
+// The page is leaving for Turbo's cache: its queue goes, and its roots forget
+// their flash.
+export function leavePage({ win, doc } = {}) {
+  const host = win || globalThis
+  const store = host.Alpine && typeof host.Alpine.store === "function" ? host.Alpine.store("toasts") : null
+  if (store && typeof store.clear === "function") store.clear()
+  toastRoots(doc || host.document).forEach(forgetInitialToasts)
+}
+
+// The `toast` event's handler. A toast raised before Alpine exists is dropped,
+// as it was when the listener was an Alpine binding.
+export function raiseToast(detail, { win } = {}) {
+  const host = win || globalThis
+  const store = registerToastStore(host.Alpine, { win: host })
+  if (!store) return null
+  return store.add(detail || {})
+}
+
+const installed = new WeakSet()
+
+// Once per window: a second call adds no second listener.
+export function installToast({ 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)
+
+  root.addEventListener("alpine:init", () => registerToastStore(host.Alpine, { win: host }))
+  root.addEventListener("alpine:initialized", () => seedAllToasts({ win: host, doc: root }))
+  root.addEventListener("turbo:load", () => seedAllToasts({ win: host, doc: root }))
+  root.addEventListener("turbo:before-cache", () => leavePage({ win: host, doc: root }))
+  host.addEventListener("toast", (event) => raiseToast(event.detail, { win: host }))
+
+  // Alpine already started (a host that loads it ahead of the module tags).
+  if (host.Alpine && host.Alpine.version) {
+    registerToastStore(host.Alpine, { win: host })
+    seedAllToasts({ win: host, doc: root })
+  }
+  return true
+}
+
+if (typeof window !== "undefined") installToast({ win: window, doc: document })

data/app/views/components/_link_sidebar.html.erb

@@ -1,7 +1,6 @@
 <%# The link sidebar — the engine's out-of-the-box navigation panel (lifted
     from the mcritchie-studio hub). Renders the host's Studio.sidebar_sections
-    as a slide-out link tree in dual desktop/mobile panels, and carries its
-    own store bridge so a single render is self-sufficient. Render it once,
+    as a slide-out link tree in dual desktop/mobile panels. Render it once,
     outside any sticky/backdrop-filter header (a fixed panel inside one
     positions against the header, not the viewport); the engine navbar does
     this automatically when sections are declared. %>
@@ -17,104 +16,10 @@
   html { overflow-x: clip; }
 </style>
 
-<script>
-  // Store bridge (engine-owned): registers the Alpine `sidebars` store and
-  // keeps it healthy across Turbo navigations and bfcache restores. The
-  // panel's open/closed state is driven ENTIRELY by the store flag via
-  // x-show + x-transition — this bridge only flips the flag, never `display`
-  // directly, because an imperative display:none bakes an inline style that
-  // makes Alpine skip its enter transition (the panel pops instead of
-  // sliding). On turbo:before-cache / bfcache the flag drops so a restored
-  // page is closed. The document-level capture handlers make the trigger
-  // work even for clicks that land before Alpine initializes.
-  (function () {
-    // The panels this component renders — the scope for every handler below that
-    // claims a click. Declared once so the selector cannot drift from the ids.
-    var LINK_SIDEBAR_PANELS = '#studio-link-sidebar, #studio-link-sidebar-mobile';
-
-    function ensureLinkSidebarStore() {
-      if (!window.Alpine) return null;
-
-      var 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;
-    }
-
-    function setLinkSidebarOpen(open) {
-      var sidebars = ensureLinkSidebarStore();
-      if (sidebars) sidebars.linkTreeOpen = open;
-    }
-
-    function closeLinkSidebar() {
-      setLinkSidebarOpen(false);
-    }
-
-    function handleLinkSidebarClick(event) {
-      // SCOPED TO THIS COMPONENT'S OWN PANELS, and that scope is the whole of it.
-      // components/_sidebar_panel is SHARED: every panel built on it stamps its close
-      // button data-link-sidebar-close, so an unscoped match here claimed the close
-      // click of EVERY other panel on the page — stopImmediatePropagation in the
-      // capture phase, before that panel's own @click could run — and closed this
-      // sidebar instead. The other panel's × then did nothing at all: no error, no
-      // console line. Measured 2026-09-18 on the hub's /deployments summary sidebars,
-      // where the click never reached a document-level listener and the panel stayed
-      // open (mcritchie-studio worked around it with a close button of its own).
-      // The two ids are the panels this file renders, below.
-      var closeTrigger = event.target.closest('[data-link-sidebar-close]');
-      if (closeTrigger && closeTrigger.closest(LINK_SIDEBAR_PANELS)) {
-        event.preventDefault();
-        event.stopPropagation();
-        event.stopImmediatePropagation();
-        closeLinkSidebar();
-        return;
-      }
-
-      var trigger = event.target.closest('[data-link-sidebar-trigger], [data-username-display], [data-profile-image-toggle]');
-      if (trigger && trigger.matches('[aria-controls~="studio-link-sidebar"]')) {
-        var sidebars = ensureLinkSidebarStore();
-        if (!sidebars) return;
-
-        event.preventDefault();
-        event.stopPropagation();
-        event.stopImmediatePropagation();
-        sidebars.linkTreeOpen = !sidebars.linkTreeOpen;
-        return;
-      }
-
-      var sidebars = ensureLinkSidebarStore();
-      if (!sidebars || !sidebars.linkTreeOpen) return;
-      if (event.target.closest(LINK_SIDEBAR_PANELS)) return;
-
-      closeLinkSidebar();
-    }
-
-    function handleLinkSidebarKeydown(event) {
-      if (event.key === 'Escape') closeLinkSidebar();
-    }
-
-    if (!window.__studioLinkSidebarBridge) {
-      window.__studioLinkSidebarBridge = true;
-      document.addEventListener('alpine:init', ensureLinkSidebarStore);
-      document.addEventListener('turbo:load', ensureLinkSidebarStore);
-      document.addEventListener('turbo:before-cache', closeLinkSidebar);
-      window.addEventListener('pageshow', function (event) {
-        if (event.persisted) closeLinkSidebar();
-      });
-      document.addEventListener('click', handleLinkSidebarClick, true);
-      document.addEventListener('keydown', handleLinkSidebarKeydown, true);
-    }
-
-    ensureLinkSidebarStore();
-  })();
-</script>
+<%# The open flag ($store.sidebars.linkTreeOpen) and the document handlers that
+    flip it are studio/link_sidebar, a nonced module the head loads. This anchor
+    is the link-sidebar controller's element. %>
+<template data-studio-controller="link-sidebar"></template>
 
 <% body_html = capture do %>
   <nav class="flex-1 min-h-0 overflow-y-auto py-2" aria-label="Studio links">

data/app/views/components/_link_sidebar_trigger.html.erb

@@ -1,8 +1,8 @@
 <%# Link-sidebar toggle button. `class_name` prepends responsive placement
     classes (the navbar mounts one instance `hidden md:inline-flex` in the
     desktop icon rail and one in the mobile sub-navbar row). The click is
-    handled twice on purpose: the Alpine @click for normal operation, and the
-    document-level capture bridge in _link_sidebar for pre-Alpine clicks. %>
+    handled twice on purpose: the Alpine @click for normal operation, and
+    studio/link_sidebar's document-level capture handler for pre-Alpine clicks. %>
 <%# The caller OWNS the display class: a hardcoded inline-flex here beats a
     caller's `hidden md:inline-flex` in the cascade and un-hides the desktop
     trigger on mobile. Bare renders default to inline-flex. %>

data/app/views/layouts/studio/_flash.html.erb

@@ -89,21 +89,25 @@
 <% messages = flash.select { |type, _| %w[notice alert].include?(type) } %>
 <% initial_json = messages.map { |type, msg| { type: type, message: msg } }.to_json %>
 
-<div x-data="toastManager(<%= initial_json %>)"
-     @toast.window="add($event.detail)">
+<%# The queue is studio/toast ($store.toasts): it listens for the `toast` window
+    event and seeds the flash below. The bare x-data is the Alpine scope the
+    bindings need; the toast controller binds the queue to this root's lifetime. %>
+<div x-data
+     data-studio-controller="toast"
+     data-toast-initial-value="<%= initial_json %>">
 
   <%# ── Page blur — half-ellipse backdrop blur behind toasts ── %>
   <div class="toast-page-blur"
-       :style="'opacity: ' + (hasVisible() ? '1' : '0')"></div>
+       :style="'opacity: ' + ($store.toasts.hasVisible() ? '1' : '0')"></div>
 
   <div id="toast-container"
        class="fixed top-0 left-1/2 flex flex-col items-center pointer-events-none"
        style="transform: translateX(-50%); padding: 1rem; width: 100%; max-width: 30rem;">
 
-  <template x-for="(toast, index) in toasts" :key="toast.id">
-    <div :style="toastStyle(index)"
+  <template x-for="(toast, index) in $store.toasts.toasts" :key="toast.id">
+    <div :style="$store.toasts.toastStyle(index)"
          class="toast-wrapper w-full"
-         @click="handlePeekClick(index)">
+         @click="$store.toasts.handlePeekClick(index)">
 
       <%# ── Blur glow (optional) — uses filter:blur on a colored div, not backdrop-filter ── %>
       <template x-if="toast.blurShadow">
@@ -112,7 +116,7 @@
 
       <%# ── Toast card — z-index above all blur backdrops ── %>
       <div class="relative pointer-events-auto bg-surface rounded-lg p-4 w-full flex gap-3 toast-card"
-           :class="toastShadowClass(index)"
+           :class="$store.toasts.toastShadowClass(index)"
            role="status">
 
         <%# ── Image or icon ── %>
@@ -135,7 +139,7 @@
           <div class="flex items-start justify-between gap-2">
             <span x-text="toast.title" class="text-heading font-semibold text-sm"></span>
             <template x-if="toast.dismissible">
-              <button @click.stop="dismiss(toast.id)"
+              <button @click.stop="$store.toasts.dismiss(toast.id)"
                       class="text-muted hover:text-heading shrink-0 cursor-pointer"
                       aria-label="Dismiss">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
@@ -150,7 +154,7 @@
           <template x-if="toast.buttons && toast.buttons.length > 0">
             <div class="flex gap-2" style="margin-top: 0.75rem;">
               <template x-for="btn in toast.buttons" :key="btn.label">
-                <button @click.stop="if (btn.onclick) btn.onclick(); dismiss(toast.id)"
+                <button @click.stop="if (btn.onclick) btn.onclick(); $store.toasts.dismiss(toast.id)"
                         class="btn btn-sm"
                         :class="btn.style === 'primary' ? 'btn-primary' : btn.style === 'danger' ? 'btn-danger' : 'btn-outline'">
                   <span x-text="btn.label"></span>
@@ -165,112 +169,3 @@
   </div>
 </div>
 
-<script>
-  if (!window.toastManager) {
-    window.toastManager = function(initial) {
-      return {
-        toasts: [],
-        _nextId: 0,
-        expanded: false,
-
-        init() {
-          if (initial && initial.length) {
-            initial.forEach((msg, i) => {
-              setTimeout(() => this.add(msg), i * 100 + 50);
-            });
-          }
-        },
-
-        add(detail) {
-          var id = ++this._nextId;
-          var type = detail.type || 'notice';
-          var buttons = detail.buttons || [];
-          this.toasts.unshift({
-            id: id,
-            type: type,
-            title: detail.title || (type === 'notice' ? 'Success' : 'Error'),
-            message: detail.message || '',
-            image: detail.image || null,
-            dismissible: detail.dismissible !== false,
-            blurShadow: detail.blurShadow || false,
-            buttons: buttons,
-            visible: false
-          });
-          // Cap at 5 toasts — dismiss oldest when exceeded
-          while (this.toasts.length > 5) {
-            this.toasts.pop();
-          }
-          this.expanded = false;
-          this.$nextTick(() => {
-            var t = this.toasts.find(function(t) { return t.id === id; });
-            if (t) t.visible = true;
-          });
-          var duration = detail.duration != null ? detail.duration : (buttons.length ? 0 : 4000);
-          if (duration > 0) {
-            var self = this;
-            setTimeout(function() { self.dismiss(id); }, duration);
-          }
-        },
-
-        dismiss(id) {
-          var toast = this.toasts.find(function(t) { return t.id === id; });
-          if (toast && toast.visible) {
-            toast.visible = false;
-            var self = this;
-            setTimeout(function() {
-              self.toasts = self.toasts.filter(function(t) { return t.id !== id; });
-              // Reset expanded when down to 1 or fewer toasts
-              if (self.toasts.filter(function(t) { return t.visible; }).length <= 1) {
-                self.expanded = false;
-              }
-            }, 400);
-          }
-        },
-
-        toastShadowClass(index) {
-          var visibleCount = this.toasts.filter(function(t) { return t.visible; }).length;
-          if (visibleCount <= 1) return 'toast-shadow-all';
-          if (index === 0) return 'toast-shadow-top';
-          return 'toast-shadow-bottom';
-        },
-
-        hasVisible() {
-          return this.toasts.some(function(t) { return t.visible; });
-        },
-
-        handlePeekClick(index) {
-          if (!this.expanded && index > 0 && this.toasts.length > 1) {
-            this.expanded = true;
-          }
-        },
-
-        toastStyle(index) {
-          var toast = this.toasts[index];
-
-          // Leaving — gentle shrink and fade
-          if (!toast.visible) {
-            return 'opacity: 0; transform: scale(0.7); max-height: 0; margin-top: 0; padding: 0; overflow: hidden;';
-          }
-
-          var visibleCount = this.toasts.filter(function(t) { return t.visible; }).length;
-          var isCollapsed = !this.expanded && visibleCount > 1;
-
-          // Full view — latest toast or expanded mode
-          if (!isCollapsed || index === 0) {
-            return 'opacity: 1; transform: scale(1) translateY(0); margin-top: ' + (index > 0 ? '0.35rem' : '0') + '; max-height: 20rem;';
-          }
-
-          // Collapsed peek — thin strip showing card edge
-          if (index <= 2) {
-            var scale = 1 - (index * 0.03);
-            var opacity = 0.7 - ((index - 1) * 0.15);
-            return 'display: flex; flex-direction: column; justify-content: flex-end; transform: scale(' + scale + ') translateY(0); max-height: 0.5rem; overflow: hidden; opacity: ' + opacity + '; margin-top: 0.15rem; pointer-events: auto; cursor: pointer;';
-          }
-
-          // Hidden — beyond visible stack
-          return 'max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; pointer-events: none;';
-        }
-      };
-    };
-  }
-</script>

data/app/views/layouts/studio/_head.html.erb

@@ -1,9 +1,9 @@
-<%# The request's CSP nonce, for the one inline script left in this head and
+<%# The request's CSP nonce, for the two inline scripts left in this head and
     for javascript_import_module_tag below (importmap-rails nonces its own tags).
     nil when the host sets no nonce generator, and then no attribute renders. %>
 <% studio_script_nonce = (content_security_policy_nonce if respond_to?(:content_security_policy_nonce)) %>
-<%# PRE-PAINT THEME. Inline, and the only inline script this head keeps: it adds
-    `dark` before the first paint, which no deferred module can do. The toggle
+<%# PRE-PAINT THEME. Inline: it adds `dark` before the first paint, which no
+    deferred module can do. The toggle
     lives in studio/alpine_stores. %>
 <%= tag.script(nonce: studio_script_nonce) do %>
   (function(){
@@ -12,6 +12,10 @@
     }
   })();
 <% end %>
+<%# THE HOLD BUTTON'S GUARD. Inline, and the other inline script this head keeps:
+    it reports a hold button whose modules failed to load, so it can share no
+    request with them (studio/_hold_button_guard). %>
+<%= render "studio/hold_button_guard", nonce: studio_script_nonce %>
 
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <%# Studio.nav_spinner_min_ms, read by the nav spinner in studio/head_chrome. %>
@@ -37,7 +41,7 @@
 
 <%# Montserrat is VENDORED into the engine (studio/montserrat-latin.woff2 and
     studio/montserrat-latin-ext.woff2) and shipped through the asset pipeline, no CDN,
-    CSP-safe (same-origin :self), mirroring alpine, canvas_confetti and sortable below.
+    CSP-safe (same-origin :self), mirroring alpine and canvas_confetti below.
     PINNED AT Google Fonts v31.
 
     WHAT THIS REPLACED, and why it was never merely a third-party tidy-up:
@@ -113,12 +117,6 @@
     (studio/head_chrome) rides the same global. %>
 <%= javascript_include_tag "studio/canvas_confetti", "data-turbo-track": "reload" %>
 <%= javascript_include_tag "studio/studio_confetti", "data-turbo-track": "reload" %>
-<%# SortableJS is VENDORED into the engine (studio/sortable.js) and shipped through
-    the asset pipeline — no CDN, CSP-safe (same-origin :self). Defines the global
-    `Sortable`; the studio/board primitive (studio/_board_assets -> window.studioBoard)
-    drives it for drag-reorder kanban AND depth-chart boards. Loaded here (deferred)
-    so any board consumer has it with zero per-app wiring, mirroring canvas_confetti. %>
-<%= javascript_include_tag "studio/sortable", defer: true, "data-turbo-track": "reload" %>
 <%# The theme and devMode stores are studio/alpine_stores (its module tag is below).
     showNavSpinner / hideNavSpinner and fireSuccessConfetti are studio/head_chrome,
     installed by studio/alpine_shims. %>
@@ -164,9 +162,16 @@
   <%= stylesheet_link_tag "studio/sticky_table_header", "data-turbo-track": "reload" %>
 <% end %>
 <%= javascript_importmap_tags %>
-<%# THE ENGINE'S BROWSER BOOT (studio/application): its Stimulus application,
-    the pinned stack, and the Alpine shims. A module tag, so it carries the nonce. %>
+<%# THE ENGINE'S BROWSER BOOT (studio/application): its every-page Stimulus
+    controllers, the pinned stack, and the Alpine shims. A module tag, so it
+    carries the nonce. %>
 <%= javascript_import_module_tag "studio/application" %>
+<%# THE STIMULUS APPLICATION, BY ITS OWN DOOR. studio/stimulus starts the engine's
+    Stimulus application and registers the hold button on it. Its only imports
+    are Stimulus, studio/lazy_controllers and the hold button's controller, so
+    a failure elsewhere in the boot's graph leaves a page its hold button. The
+    boot imports it, so this resolves to the same preloaded module. %>
+<%= javascript_import_module_tag "studio/stimulus" %>
 <%# THE STORES, BY THEIR OWN DOOR. Every host's <body> binds $store.devMode and the
     theme toggle binds $store.theme, so a boot that fails to load (a missing digest,
     a network drop, a throw anywhere in its graph) must not take the stores with it.
@@ -182,6 +187,17 @@
     it. It imports nothing, and the modal-host controller imports it, so this
     resolves to the same preloaded module. %>
 <%= javascript_import_module_tag "studio/modal_host" %>
+<%# THE TOAST QUEUE, BY ITS OWN DOOR, for the same reason. studio/toast registers
+    $store.toasts on alpine:init, listens for the `toast` window event and seeds
+    the flash layouts/studio/_flash renders, so a failed boot leaves a page its
+    flash and its toasts. It imports nothing, and the toast controller imports it. %>
+<%= javascript_import_module_tag "studio/toast" %>
+<%# THE LINK SIDEBAR'S FLAG, BY ITS OWN DOOR, for the same reason.
+    components/_link_sidebar binds $store.sidebars.linkTreeOpen; studio/link_sidebar
+    registers it on alpine:init for a page that renders the panel, and installs
+    the document click and Escape handlers. It imports nothing, and the
+    link-sidebar controller imports it. %>
+<%= javascript_import_module_tag "studio/link_sidebar" %>
 <%# ALPINE LOADS AFTER THE MODULE TAGS, and the order is the contract. Deferred
     classic scripts and module scripts execute in document order, so by the time
     Alpine starts, studio/application has defined the shims it evaluates
@@ -190,8 +206,8 @@
     studio/modal_host the one that installs each modal host's store. Moved
     above the module tags, Alpine would evaluate those before they exist (e2e/stimulus_boot.spec.js). %>
 <%# Alpine is VENDORED into the engine (studio/alpine.js) and shipped through the
-    asset pipeline — no CDN, CSP-safe (same-origin :self), mirroring canvas_confetti
-    and sortable below. PINNED AT 3.16.1.
+    asset pipeline — no CDN, CSP-safe (same-origin :self), mirroring canvas_confetti.
+    PINNED AT 3.16.1.
 
     WHAT THIS REPLACED, and why it is worth the 47KB in the repo: the tag here was