studio-engine 0.115.0 → 0.115.1.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c4ec89a15db3597c3fbb5ec688fc5f635f20d16ea4a7354fbf71b6d30265442
-  data.tar.gz: 648bd9c73a07a9868de36cb0188ce0460f912fa24e82f239b269f6fc4e210d5c
+  metadata.gz: e4a692edc7e883547004855e1fbd76ce5adf3da6053fdd3e704edd35727382be
+  data.tar.gz: cc943c4822bf3bdc6c4f27c02513bd625d8a4a9cb2e82fc10c73e8bd29c9c68c
 SHA512:
-  metadata.gz: 86d05be2c55f6e60dc5b896586ea4b8bb0a6aa178c5a52787bd2f3da51ed2a84ceb40b4e83b73f78b3fd641c46e3f94e066ea22c39ed70efeac2936b5f7b7a93
-  data.tar.gz: 3993e767f3bc3b907a0af88e7d209ba94b6ad64d4c1e252fd76adbcb1058a69a2ab29bba012443a1cc7e773168855a06754e4279e4f40ed6ab081821d19cb232
+  metadata.gz: f554a81ad3d547d3150d926e537895377a580c95cda43b490407ecc9d4f161f96767fd3fac23b7e1f62cd795df5371e93677bab6f0c04b9805d4321b14e53378
+  data.tar.gz: cb00d6b834827208724821269ce6adebaf0789e75156769040490a98eda2cef3eb35d0cc62cc899f10ff9cac46974f0e6b732251a5f1e74160bc2487c22e0ba2

data/CHANGELOG.md

@@ -4,6 +4,99 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### Added
+
+- **One Node tooling package, shipped in the gem** (`lib/studio/node_tooling/`,
+  see its `README.md`). `versions.json` pins Node 22, `@playwright/test`
+  1.62.1 and `axe-core` 4.11.0. `playwright_base.js` holds the browser lane's
+  shared defaults; `e2e_helpers.js` holds `watchPageErrors` and
+  `blockOffsiteRequests`; `node_test/register.mjs` lets `node --test` import a
+  module by its importmap name. `bin/rails studio:node:link` links it at
+  `node_modules/.studio-engine` (run it after `npm ci`), and
+  `bin/rails studio:node:check` exits 1, naming each pin a host drifts from. No
+  host change is needed until a host adopts it.
+
+### Changed
+
+- **The engine runs Node 22.** `.tool-versions` reads `nodejs 22`, both
+  `engine-ci.yml` Node steps read it through `node-version-file`, and
+  `package.json` pins `@playwright/test` at exactly 1.62.1. The engine's
+  Playwright config and e2e helpers build on the shared package, and resolve to
+  the same config as before.
+
+### Fixed
+
+- **`studio/studio_confetti` resolves `"canvas-confetti"` on every page.** In
+  0.115.1.rc1 the head loaded it with `javascript_include_tag ..., type:
+  "module"`, which also sends a `Link: rel=modulepreload` response header. The
+  browser acts on that header before it parses the import map, so on a page
+  whose head parsed slowly it resolved the module's bare import against no map
+  and threw `TypeError: Failed to resolve module specifier "canvas-confetti"`
+  (11 hub e2e specs: the boards and `/dreams`). The head now imports it with
+  `javascript_import_module_tag` below the map, which sends no header. No host
+  change is needed. A module the head loads by URL may import no bare specifier
+  (`test/views/head_url_modules_import_no_bare_specifier_test.rb`), and the e2e
+  lab now sends the Link header Rails sends, which its stub had dropped.
+
+## 0.115.1 — 2026-10-27
+
+### Changed
+
+- **Five of the engine's six classic scripts are ES modules.** No host change
+  is needed: every host renders `layouts/studio/head`, which now loads them as
+  modules, and every global a host calls is kept.
+  - `studio/sticky_table_header` and `studio/studio_confetti` moved from
+    `app/assets/javascripts/studio/` to `app/javascript/studio/`, so the
+    importmap pins them as `studio/<name>` like every engine module. Each has a
+    default export (the sticky-header API, `{ burst, cannons }`);
+    `studio/studio_confetti` also exports `burst`, `cannons` and `confetti`.
+  - Alpine and canvas-confetti stay vendored, unedited, in
+    `app/assets/javascripts/studio/`, which now holds only those builds and the
+    classic `studio/session.js`.
+    Alpine loads by a `type="module"` tag; canvas-confetti is pinned as
+    `"canvas-confetti"` and imported by `studio/studio_confetti`, so the head no
+    longer has its own tag for it.
+  - Leaflet is imported by `studio/footer_map` with `import()` of the URL on the
+    map element, not a `<script>` element injected into the head. A failed fetch
+    is retried under `?retry=n`, because a browser never refetches a module whose
+    fetch failed.
+  - Every head script with a `src`, but the session store, is a `type="module"`
+    tag below the import map (a module tag above it makes browsers without
+    dynamic import maps ignore the map). The head adds no inline script, so the
+    strict-nonce count is unchanged.
+  - **Held: `studio/session.js` stays a synchronous classic script**, above the
+    import map, unchanged. Host code registers identity sources with
+    `window.StudioSession` as its own modules evaluate (turf-monster's
+    `wallet_signal.js` calls solana-studio's `walletIdentity.register()` at
+    import), and a host's entry point is the module tag
+    `javascript_importmap_tags` renders, which an engine module tag below the
+    map would follow: the store would not exist yet and the registration would
+    silently be null. It becomes a module once those consumers wait for it.
+  - **Timing.** `window.confetti` and `window.studioConfetti` used to exist
+    while the body parsed (synchronous classic tags); they now exist once the
+    head's modules run, which is still before Alpine starts and before
+    `DOMContentLoaded`. A host's inline body
+    script that calls one of them at parse time, rather than from a handler,
+    would now find it missing. No host on `origin/accepted` does: turf-monster's
+    `confetti()` calls in `solana_utils.js` and `shared/_alpine_factories` run
+    from functions its handlers call, and each checks `typeof confetti` first.
+  - `host.css` no longer scans `app/assets/javascripts` (its `@source` line and
+    the vendored-file exclusion are gone): it holds the vendored builds and
+    `studio/session.js`, which puts no class on a page, and a test measures
+    that. The moved scripts are scanned under `app/javascript`.
+
+### Deprecated
+
+- **Compatibility globals for the converted scripts.** Each stays for classic
+  callers; new code imports the module instead:
+  - `window.studioConfetti`: `import { burst, cannons } from "studio/studio_confetti"`.
+  - `window.confetti` (the canvas-confetti library global) as a host call:
+    `import { confetti } from "studio/studio_confetti"`. turf-monster calls it
+    today; the engine's own `fireSuccessConfetti` still reads it.
+  - `window.StudioStickyTableHeaders`: `import StickyTableHeaders from "studio/sticky_table_header"`.
+  `window.Alpine` and `window.L` are not deprecated: Alpine and Leaflet read
+  their own globals.
+
 ## 0.115.0 — 2026-10-26
 
 ### Breaking

data/README.md

@@ -127,6 +127,23 @@ A migrating host also moves every other reader of the preset, not only the
 build: any production code or test that `require`s or reads the preset's text
 reads `theme.css` instead.
 
+## Node tooling
+
+The gem ships the one Node tooling package every app shares, in
+`lib/studio/node_tooling/` (its `README.md` lists the files): the pins
+(`versions.json`: Node 22, `@playwright/test` 1.62.1, `axe-core` 4.11.0), a
+Playwright config base, the shared e2e helpers, and the `node --test` importmap
+hooks.
+
+```bash
+bin/rails studio:node:link    # node_modules/.studio-engine -> the package; run after npm ci
+bin/rails studio:node:check   # exits 1, naming each pin this app drifts from
+```
+
+An app pins Node in `.tool-versions` (`nodejs 22`), the file mise and
+`actions/setup-node`'s `node-version-file` both read.
+`docs/FRONT_END_STANDARD.md`, "Node tooling", has the rest.
+
 ## Configuration
 
 Each consuming app configures the engine in `config/initializers/studio.rb`:

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

@@ -28,13 +28,15 @@
    files put a utility class on the page is scanned here, relative to this
    file, in every host that imports it, with no host edit: views and
    partials, the ViewComponents (their colour classes live in Ruby), the
-   helpers that build markup (admin_model_table), and both JavaScript trees
-   (classes added at runtime).
-
-   The exclusions are NARROW on purpose: the vendored, minified third-party
-   bundles (Stimulus, Alpine, Leaflet, Sortable, canvas-confetti) are not
-   engine markup, and scanning them mints junk utilities from their
-   identifiers. Never exclude a whole directory: the hub's
+   helpers that build markup (admin_model_table), and the engine's ES modules
+   (app/javascript: classes added at runtime). app/assets/javascripts is not
+   scanned: since the engine's scripts became modules it holds the vendored,
+   minified third-party builds (Alpine, Leaflet, Sortable, canvas-confetti) and
+   studio/session.js, which puts no class on a page (held by
+   test/integration/component_tailwind_source_test.rb).
+
+   The exclusions are NARROW on purpose: the vendored bundles are not engine
+   markup, and scanning them mints junk utilities from their identifiers. Never exclude a whole directory: the hub's
    `@source not "../../../vendor/bundle"` once dropped every one of these
    lines in CI, because the gem itself lives under vendor/bundle there.
 
@@ -47,8 +49,6 @@
 @source "../../../helpers";
 @source "../../../javascript";
 @source not "../../../javascript/studio/vendor";
-@source "../../javascripts";
-@source not "../../javascripts/studio/{alpine,canvas_confetti,leaflet,sortable}.js";
 
 /* -- Motion / effect / leveling layer ---------------------------------------
    Last, so the theme and component layer it reads are in scope, as when hosts

data/app/javascript/studio/footer_map.js

@@ -18,8 +18,16 @@
 // fail on its elements: that app's map carries no data-leaflet-js, so there is
 // nothing here to fetch.
 //
-// It imports nothing; test/javascript/footer_map.test.mjs loads it as a data:
-// module. Started by the footer-map controller.
+// LEAFLET IS A MODULE IMPORT. The vendored build (studio/leaflet.js) is
+// imported by the URL the element carries, as a dynamic import(), not a
+// <script> element injected into the head: it assigns window.L when it is
+// evaluated, and an import is governed by the page's script-src exactly as the
+// module that asks for it is. A browser never refetches a module whose fetch
+// failed, so a retry asks for the same file under a fresh query string.
+//
+// It imports nothing statically; test/javascript/footer_map.test.mjs loads it as
+// a data: module and hands installFooterMaps its own importer. Started by the
+// footer-map controller.
 
 export const MAPS = "[data-footer-map][data-leaflet-js]"
 export const TILES = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
@@ -33,15 +41,25 @@ export function mapOptions(dataset) {
   return { at, zoom: parseInt(dataset.zoom, 10) || 15, zoomControl: dataset.controls !== "false" }
 }
 
+// The URL of the nth attempt at one file: the file itself first, then the same
+// file under ?retry=n, because the module map remembers a failed fetch.
+export function attemptUrl(src, attempt) {
+  if (!attempt) return src
+  return `${src}${src.includes("?") ? "&" : "?"}retry=${attempt}`
+}
+
+const importModule = (url) => import(url)
+
 // Installs the footer maps, once per document. Answers the function that arms
 // the maps now on the page (after `load`), whether this call installed it or an
-// earlier one did.
-export function installFooterMaps(win, doc) {
+// earlier one did. `load` is how a module is imported (a test passes its own).
+export function installFooterMaps(win, doc, { load = importModule } = {}) {
   if (win.__studioFooterMapsArmed) return win.__studioFooterMapsArm || (() => {})
   win.__studioFooterMapsArmed = true
 
   let maps = []
   let loading = null
+  let attempts = 0
 
   // Checked on every mount, not once: a page visit that rebuilds the head must
   // not leave a mounted map without its stylesheet.
@@ -57,14 +75,12 @@ export function installFooterMaps(win, doc) {
   function loadLeaflet(src) {
     if (win.L) return Promise.resolve()
     if (loading) return loading
-    loading = new Promise((resolve, reject) => {
-      const s = doc.createElement("script")
-      s.src = src
-      s.onload = resolve
+    const url = attemptUrl(src, attempts)
+    attempts += 1
+    loading = new Promise((resolve) => resolve(load(url)))
+      .then(() => { if (!win.L) throw new Error("leaflet loaded without window.L") })
       // A failed fetch must not be remembered: the next visit tries again.
-      s.onerror = () => { loading = null; s.remove(); reject(new Error("leaflet failed to load")) }
-      doc.head.appendChild(s)
-    })
+      .catch((error) => { loading = null; throw error })
     return loading
   }
 

data/app/{assets/javascripts → javascript}/studio/sticky_table_header.js

@@ -1,3 +1,12 @@
+// studio/sticky_table_header: pins a cloned header row over a long table as it
+// scrolls under the navbar (docs/NAVBAR_SETUP.md). An ES module that installs on
+// import: the head loads it with a type="module" tag when
+// Studio.sticky_table_headers is on (or the head's sticky_table_headers local
+// says so). Its default export is window.StudioStickyTableHeaders
+// ({ loaded, pinnedEdge, placement }), which stays as the compatibility global
+// (CHANGELOG, "Deprecated"). The body stays one function with no import, so
+// test/javascript/sticky_table_header.test.mjs still runs it in a node:vm
+// context per test (cutting the single export line).
 (() => {
   if (window.StudioStickyTableHeaders?.loaded) return;
 
@@ -259,3 +268,5 @@
   window.addEventListener("scroll", scheduleUpdate, { passive: true });
   window.addEventListener("resize", scheduleUpdate, { passive: true });
 })();
+
+export default window.StudioStickyTableHeaders

data/app/javascript/studio/studio_confetti.js

@@ -0,0 +1,118 @@
+/*
+  studio/studio_confetti — two zero-dependency celebration effects built on the
+  vendored canvas-confetti (app/assets/javascripts/studio/canvas_confetti.js,
+  pinned as "canvas-confetti", no CDN).
+
+  An ES module (the head imports it with an inline module tag after the import
+  map, never by URL: a URL tag's Link modulepreload header would resolve the
+  bare import below before the map exists). It imports canvas-confetti for its
+  side effect, which defines the library's global `confetti`, and exports:
+
+    import { burst, cannons, confetti } from "studio/studio_confetti"
+    burst(cardEl)    // radial burst behind a card/modal
+    cannons()        // side-cannons full-screen celebration
+    confetti(opts)   // the canvas-confetti call itself, a no-op if it failed to load
+
+  Ported faithfully from turf-monster:
+    - burst(target)  → the radial card-burst that explodes from BEHIND a card or
+      modal, emanating from its center (TM solana_utils.js fireConfettiFromModal /
+      shared/_alpine_factories fireQuestBadgeConfetti). Pass the DOM element (or a
+      selector, or an {x,y} origin in 0..1 viewport space) to aim it; defaults to
+      screen center.
+    - cannons(opts)  → the full-screen "you joined a contest" celebration: a center
+      burst plus left + right side-cannons firing inward and a top shell (the same
+      choreography as the engine head's window.fireSuccessConfetti).
+
+  Both honor prefers-reduced-motion: reduce (no-op, and disableForReducedMotion is
+  also passed through to canvas-confetti as a second belt). Colors come from
+  window.CONFETTI_COLORS when a host sets it, else a neutral festive default.
+
+  DEPRECATED COMPATIBILITY GLOBALS (CHANGELOG, "Deprecated"): window.studioConfetti
+  ({ burst, cannons }) and the library's own window.confetti stay, because hosts
+  call them from classic code (turf-monster's solana_utils and _alpine_factories).
+  New code imports from this module. Both now exist once the head's modules have
+  run (deferred, before Alpine starts), no longer during the body's parse.
+*/
+import "canvas-confetti"
+
+const DEFAULT_COLORS = [
+  "#4BAF50", "#8E82FE", "#06D6A0", "#FF7C47",
+  "#FFD700", "#00BFFF", "#FF6B9D", "#C084FC"
+]
+
+function colors(opts) {
+  return (opts && opts.colors) || window.CONFETTI_COLORS || DEFAULT_COLORS
+}
+
+function reducedMotion() {
+  return !!(window.matchMedia &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+}
+
+// The canvas-confetti call. Read off the window on every call, not captured at
+// import: the vendored build assigns the global when it is evaluated, and a
+// failed load leaves it undefined, which makes every effect a no-op.
+export function confetti(opts) {
+  if (typeof window.confetti !== "function") return null
+  return window.confetti(opts)
+}
+
+function available() {
+  return typeof window.confetti === "function" && !reducedMotion()
+}
+
+// Resolve a burst origin ({x,y} in 0..1 viewport space) from an element, a
+// selector, or a literal {x,y}. Falls back to screen center when the target is
+// missing or not laid out (e.g. a card that just unmounted).
+function originFor(target) {
+  const el = (typeof target === "string") ? document.querySelector(target) : target
+  if (el && el.nodeType === 1) {
+    const r = el.getBoundingClientRect()
+    if (r.width || r.height) {
+      return {
+        x: (r.left + r.width / 2) / window.innerWidth,
+        y: (r.top + r.height / 2) / window.innerHeight
+      }
+    }
+  }
+  if (target && typeof target.x === "number" && typeof target.y === "number") {
+    return { x: target.x, y: target.y }
+  }
+  return { x: 0.5, y: 0.5 }
+}
+
+// Radial burst from behind a card/modal — spread:360 fires in every direction
+// from the card center, low velocity + gravity keep it clustered around the
+// card rather than blasting off-screen. A smaller follow-shell layers texture,
+// and two bottom-corner sweeps give the moment theatre.
+export function burst(target, opts) {
+  if (!available()) return
+  opts = opts || {}
+  const origin = originFor(target)
+  const c = colors(opts)
+  const z = opts.zIndex || 9999
+  confetti({ particleCount: 140, angle: 90, spread: 360, origin: origin, colors: c, zIndex: z, startVelocity: 30, gravity: 0.7, ticks: 220, scalar: 1.0, disableForReducedMotion: true })
+  setTimeout(() => {
+    confetti({ particleCount: 60, angle: 60, spread: 70, origin: { x: Math.max(0, origin.x - 0.18), y: Math.min(1, origin.y + 0.05) }, colors: c, zIndex: z, startVelocity: 40, gravity: 0.9, ticks: 200, scalar: 0.9, disableForReducedMotion: true })
+    confetti({ particleCount: 60, angle: 120, spread: 70, origin: { x: Math.min(1, origin.x + 0.18), y: Math.min(1, origin.y + 0.05) }, colors: c, zIndex: z, startVelocity: 40, gravity: 0.9, ticks: 200, scalar: 0.9, disableForReducedMotion: true })
+  }, 180)
+}
+
+// Full-screen side-cannon celebration: center burst, then left + right cannons
+// firing inward, then a wide top shell. Mirrors window.fireSuccessConfetti.
+export function cannons(opts) {
+  if (!available()) return
+  opts = opts || {}
+  const c = colors(opts)
+  const z = opts.zIndex || 9999
+  confetti({ particleCount: 150, spread: 100, origin: { x: 0.5, y: 0.5 }, colors: c, zIndex: z, startVelocity: 45, gravity: 0.8, ticks: 300, scalar: 1.2, disableForReducedMotion: true })
+  setTimeout(() => { confetti({ particleCount: 80, angle: 60,  spread: 60,  origin: { x: 0,   y: 0.6 }, colors: c, zIndex: z, startVelocity: 55, gravity: 1,   ticks: 250, disableForReducedMotion: true }) }, 150)
+  setTimeout(() => { confetti({ particleCount: 80, angle: 120, spread: 60,  origin: { x: 1,   y: 0.6 }, colors: c, zIndex: z, startVelocity: 55, gravity: 1,   ticks: 250, disableForReducedMotion: true }) }, 150)
+  setTimeout(() => { confetti({ particleCount: 100, spread: 160, origin: { x: 0.5, y: 0.3 }, colors: c, zIndex: z, startVelocity: 30, gravity: 1.2, ticks: 200, scalar: 0.8, disableForReducedMotion: true }) }, 400)
+}
+
+const studioConfetti = { burst, cannons }
+export default studioConfetti
+
+// DEPRECATED: the compatibility global for classic callers. Import the module.
+window.studioConfetti = studioConfetti

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

@@ -28,7 +28,15 @@
 <%= csrf_meta_tags %>
 <%= csp_meta_tag %>
 <%# The session-drift stamp + browser store. Renders nothing unless the controller
-    includes Studio::ErrorHandling. See studio/_session_stamp. %>
+    includes Studio::ErrorHandling. See studio/_session_stamp.
+
+    THE ONE ENGINE SCRIPT THAT STAYS CLASSIC, AND SYNCHRONOUS. Host code
+    registers identity sources with window.StudioSession as its own modules
+    EVALUATE (turf-monster registers its identity source from a module at
+    import; CHANGELOG, "Held"), and the host's entry point is the module tag
+    javascript_importmap_tags renders, which any engine module tag below the map
+    would follow. A module store would not exist yet, and the registration would
+    silently be null. It becomes a module when those consumers wait for it. %>
 <%= render "studio/session_stamp" %>
 <%= render "layouts/studio/smooth_load" %>
 <%# The favicon's URL carries its content version (Studio::PublicFileVersion),
@@ -116,14 +124,8 @@
   }
 </style>
 
-<%# canvas-confetti is VENDORED into the engine (studio/canvas_confetti.js) and
-    shipped through the asset pipeline — no CDN, CSP-safe (same-origin :self),
-    zero-per-app dependency. Defines the global `confetti`; studio_confetti.js
-    then builds window.studioConfetti (burst/cannons). fireSuccessConfetti
-    (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" %>
-<%# The theme and devMode stores are studio/alpine_stores (its module tag is below).
+<%# Confetti is a module now: studio/studio_confetti, loaded below the import map.
+    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. %>
 
@@ -187,6 +189,19 @@
   <%= stylesheet_link_tag "studio/sticky_table_header", "data-turbo-track": "reload" %>
 <% end %>
 <%= javascript_importmap_tags %>
+<%# EVERY ENGINE SCRIPT BELOW IS A MODULE, AND EVERY MODULE TAG COMES AFTER THE
+    IMPORT MAP. A browser without dynamic import maps ignores an import map that
+    arrives after its first module script, so a module tag above this line would
+    take every bare specifier on the page down with it. The ones below that load by
+    URL (type="module" with a src) are external files, not inline scripts: they
+    carry no body and need no nonce under a policy that allows 'self'. The session
+    store (studio/_session_stamp, above) is the one classic script, and says why.
+    A MODULE LOADED BY URL MUST IMPORT NO BARE SPECIFIER. javascript_include_tag
+    also sends a `Link: rel=modulepreload` response header, which the browser
+    acts on before it parses this map, so a bare import in that module can
+    resolve against no map at all and fail for good (0.115.1.rc1, task
+    confetti-resolves-on-hub). A module with bare imports takes a
+    javascript_import_module_tag, which sends no header. %>
 <%# 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. %>
@@ -229,8 +244,21 @@
     module that owns it. Its imports import nothing, and studio/alpine_shims
     imports it, so a failed boot leaves a page its uploads. %>
 <%= javascript_import_module_tag "studio/alpine_scopes" %>
-<%# 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
+<%# CONFETTI, BY ITS OWN DOOR, AND NOT BY URL. studio/studio_confetti imports the
+    vendored canvas-confetti by its bare pin ("canvas-confetti",
+    app/assets/javascripts/studio/canvas_confetti.js: no CDN, same-origin) and
+    exports burst, cannons and confetti. It also keeps the deprecated globals
+    window.studioConfetti and window.confetti, which studio/head_chrome's
+    fireSuccessConfetti and host classic code still call. Before Alpine, so both
+    exist by the time an x-init can fire one.
+    An inline module tag, never javascript_include_tag: that helper's Link
+    modulepreload header had the browser resolve "canvas-confetti" before the
+    map above existed, so on a page whose head parsed slowly (the hub's boards
+    and /dreams) the module failed with "Failed to resolve module specifier"
+    (e2e/confetti_resolves_under_a_slow_head.spec.js). %>
+<%= javascript_import_module_tag "studio/studio_confetti" %>
+<%# ALPINE LOADS AFTER THE MODULE TAGS, and the order is the contract. Module
+    scripts (and deferred classic ones) execute in document order, so by the time
     Alpine starts, studio/application has defined the shims it evaluates
     (x-data="navCollapse()"), studio/alpine_stores has registered the
     `alpine:init` listener that installs $store.theme and $store.devMode, and
@@ -255,7 +283,13 @@
     Investigated as a suspect in the board-filter flake (three PRs reddened in one
     day, 2026-08-15). This removes a real source of run-to-run variance; it does NOT
     claim to be that flake's cause, and the remaining suspect there is untouched. %>
-<%= javascript_include_tag "studio/alpine", defer: true, "data-turbo-track": "reload" %>
+<%# A MODULE TAG, NOT A DEFERRED CLASSIC ONE (it was `defer: true` until the
+    engine's scripts became modules). A module is deferred by definition, so its
+    place in the document order is unchanged. The vendored build is unedited: it
+    assigns window.Alpine and starts Alpine in a microtask after it is evaluated,
+    which as a module is after every module above it. window.Alpine is not
+    deprecated; Alpine itself and every host read it. %>
+<%= javascript_include_tag "studio/alpine", type: "module", "data-turbo-track": "reload" %>
 <% if sticky_table_headers %>
-  <%= javascript_include_tag "studio/sticky_table_header", defer: true, "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "studio/sticky_table_header", type: "module", "data-turbo-track": "reload" %>
 <% end %>

data/config/importmap.rb

@@ -15,6 +15,11 @@
 # is the classic build (app/assets/javascripts/studio/sortable.js), which assigns
 # window.Sortable when it is imported.
 #
+# The vendored canvas-confetti is pinned the same way, as "canvas-confetti", and
+# not preloaded: studio/studio_confetti imports it, and the head loads that
+# module by its own tag. It too is the classic build, which assigns
+# window.confetti when it is imported.
+#
 # `pin`, not `pin_all_from`, so a host can override one: importmap-rails expands
 # a pin_all_from directory AFTER every plain pin, so a directory pin would beat
 # the host's own `pin` of the same name. Plain pins are last-drawn-wins, and the
@@ -28,3 +33,4 @@ Studio::Engine.javascript_module_logical_paths.each do |logical_path|
 end
 pin "@hotwired/stimulus", to: "studio/vendor/stimulus.js", preload: true
 pin "sortablejs", to: "studio/sortable.js", preload: false
+pin "canvas-confetti", to: "studio/canvas_confetti.js", preload: false

data/docs/SITE_FOOTER.md

@@ -279,7 +279,9 @@ element, isolate that element too.
 Leaflet is served by the engine through the app's asset pipeline
 (`studio/leaflet.js`, `studio/leaflet.css`, both in the engine's precompile
 list), so it works on Heroku with no extra step in either a Sprockets or a
-Propshaft app. The engine's copy of the stylesheet drops Leaflet's default marker
+Propshaft app. `studio/footer_map` imports the script as a module, with a
+dynamic `import()` of the URL on the map element, and the vendored build
+assigns `window.L` when it is evaluated. The engine's copy of the stylesheet drops Leaflet's default marker
 image and its layers-control image, which are not shipped: mark a point with
 `L.divIcon`, as the footer does.
 

data/lib/studio/engine.rb

@@ -76,12 +76,16 @@ module Studio
     end
 
     initializer "studio.assets" do |app|
+      # app/assets/javascripts/studio: the vendored third-party builds, each
+      # loaded as an ES module (Alpine by the head's type="module" tag,
+      # canvas-confetti and SortableJS through their importmap pins, Leaflet by
+      # studio/footer_map's import()), and studio/session.js, the one classic
+      # script (layouts/studio/_head says why). The engine's own modules are
+      # under app/javascript, enumerated below.
       app.config.assets.precompile += %w[
         studio/sticky_table_header.css
-        studio/sticky_table_header.js
         studio/alpine.js
         studio/canvas_confetti.js
-        studio/studio_confetti.js
         studio/sortable.js
         studio/leaflet.js
         studio/leaflet.css
@@ -130,9 +134,9 @@ module Studio
     # The contract a module joins by being here:
     #   - it lives under app/javascript/studio/ and is pinned as "studio/<name>";
     #   - pins are NOT preloaded, so a page fetches only the modules it imports;
-    #   - its logical asset path shares the studio/ prefix with the classic
-    #     scripts in app/assets/javascripts/studio, so a module may not reuse one
-    #     of those names (test/integration/engine_importmap_pins_test.rb).
+    #   - its logical asset path shares the studio/ prefix with the files in
+    #     app/assets/javascripts/studio (vendored builds, studio/session.js), so
+    #     a module may not reuse one of those names (test/integration/engine_importmap_pins_test.rb).
     # A host without importmap-rails (a footer-only consumer) skips this.
     initializer "studio.importmap", before: "importmap" do |app|
       next unless app.config.respond_to?(:importmap)

data/lib/studio/node_tooling/README.md

@@ -0,0 +1,27 @@
+# studio-engine Node tooling
+
+The one Node tooling package every host shares. It ships inside the gem, so a
+host gets it with the engine it already bundles: no npm registry, no token.
+
+- `versions.json`: the pin set. Node's major, and the exact version of every
+  shared npm package. A host that declares one of these packages declares it at
+  exactly this version.
+- `playwright_base.js`: the browser lane's shared defaults (one chromium
+  project, one worker, a Rails `webServer` on `/up`).
+- `e2e_helpers.js`: `watchPageErrors` and `blockOffsiteRequests`.
+- `node_test/register.mjs` and `node_test/importmap_hooks.mjs`: let `node --test`
+  import a module by the bare name the importmap pins it under.
+
+Every file here requires only `node:` builtins and its own siblings, because it
+is loaded from the gem's directory, which has no `node_modules`.
+
+A host links the package into its own tree and checks itself against the pins:
+
+```sh
+bin/rails studio:node:link    # node_modules/.studio-engine -> this directory
+bin/rails studio:node:check   # exits 1, naming each pin the host drifts from
+```
+
+Run `link` after `npm ci`, because `npm ci` deletes `node_modules`. Then
+`require("./node_modules/.studio-engine/playwright_base.js")`. The adoption
+steps are in the engine repository's `docs/FRONT_END_STANDARD.md`, "Node tooling".

data/lib/studio/node_tooling/e2e_helpers.js

@@ -0,0 +1,74 @@
+// studio-engine's shared browser-lane helpers. Requires only node: builtins, so it
+// loads from the gem's directory (see README.md).
+
+const fs = require("node:fs");
+
+const LOCAL_HOSTS = new Set(["127.0.0.1", "localhost"]);
+
+function isOffOrigin(url) {
+  if (!url || !/^https?:/.test(url)) return false;
+  return !LOCAL_HOSTS.has(new URL(url).hostname);
+}
+
+// Collect everything the page THREW or logged as an error.
+//
+// `pageerror` is the cheapest detector there is for a script that never ran: the
+// phantom-element defect threw a SyntaxError on every load while the response
+// bytes were valid and the server-side guard passed.
+//
+// It hears every frame on the page, a third party's included: Playwright delivers a
+// cross-origin frame's console to the page's `console` event. `ownOriginOnly: true`
+// scopes that out BY ORIGIN, never by message text. A console error is dropped only
+// when the script that logged it was served from another host, and a thrown error
+// only when every frame of its stack was. An error with no location or no stack is
+// kept, because it cannot be shown to be someone else's. The default counts
+// everything.
+function watchPageErrors(page, { ownOriginOnly = false } = {}) {
+  const errors = [];
+  page.on("pageerror", (error) => {
+    if (ownOriginOnly) {
+      const sources = (error.stack || "").match(/https?:\/\/[^\s)]+/g) || [];
+      if (sources.length > 0 && sources.every(isOffOrigin)) return;
+    }
+    errors.push(`pageerror: ${error.message}`);
+  });
+  page.on("console", (message) => {
+    if (message.type() !== "error") return;
+    if (ownOriginOnly && isOffOrigin(message.location().url)) return;
+    errors.push(`console.error: ${message.text()}`);
+  });
+  return errors;
+}
+
+// Answer every request that leaves this origin, so the lane cannot depend on the
+// public internet.
+//
+// ANSWERED, NOT ABORTED. route.abort() makes Chromium log `Failed to load resource:
+// net::ERR_FAILED`, which watchPageErrors counts. An empty 200 logs nothing, and
+// the page falls back as it would offline.
+//
+// `pinned` maps an off-origin URL to `{ file, contentType }`: a file loaded with
+// Subresource Integrity cannot be answered empty (the digest fails and Chromium
+// logs it), so it is answered with a byte-exact local copy. The response carries
+// `access-control-allow-origin: *`, because a `crossorigin` tag refuses a CORS
+// response without it before checking the digest.
+async function blockOffsiteRequests(page, { pinned = {} } = {}) {
+  await page.route("**/*", (route) => {
+    const url = new URL(route.request().url());
+    if (LOCAL_HOSTS.has(url.hostname)) return route.continue();
+
+    const copy = pinned[url.href];
+    if (copy) {
+      return route.fulfill({
+        status: 200,
+        contentType: copy.contentType,
+        headers: { "access-control-allow-origin": "*" },
+        body: fs.readFileSync(copy.file),
+      });
+    }
+
+    return route.fulfill({ status: 200, body: "" });
+  });
+}
+
+module.exports = { isOffOrigin, watchPageErrors, blockOffsiteRequests };

data/lib/studio/node_tooling/node_test/importmap_hooks.mjs

@@ -0,0 +1,48 @@
+// Resolve importmap specifiers under `node --test` the way the browser does.
+//
+// In the browser, config/importmap.rb pins a directory under a prefix (`board`,
+// `cyvasse`, `studio`), and the modules import each other as "board/colors".
+// Node has no import map, so this hook maps each prefix onto the same files. A
+// bare top-level name with a file of its own in `topLevelDir`
+// (`import … from "chat_follow"`, pinned by name) maps the same way.
+//
+// A Rails app has no package.json "type", so Node has to guess each .js file's
+// format. Files under `esmDirs` are ES modules (that is what the browser loads),
+// so this hook says so instead.
+//
+// Configured by register.mjs through `initialize(data)`; it holds no app's names.
+import { existsSync } from "node:fs";
+
+let prefixes = [];
+let topLevel = null;
+let esmDirs = [];
+
+const asDir = (url) => (url.endsWith("/") ? url : `${url}/`);
+
+export function initialize({ root, prefixes: map = {}, topLevelDir = null, esmDirs: dirs = [] } = {}) {
+  const base = asDir(String(root));
+  prefixes = Object.entries(map).map(([prefix, dir]) => [prefix, asDir(new URL(dir, base).href)]);
+  topLevel = topLevelDir ? asDir(new URL(topLevelDir, base).href) : null;
+  esmDirs = dirs.map((dir) => asDir(new URL(dir, base).href));
+}
+
+function mapped(specifier) {
+  for (const [prefix, dir] of prefixes) {
+    const match = specifier.startsWith(`${prefix}/`) && /^[\w/-]+$/.test(specifier.slice(prefix.length + 1));
+    if (match) return new URL(`${specifier.slice(prefix.length + 1)}.js`, dir).href;
+  }
+  if (topLevel && /^[a-z_]+$/.test(specifier)) {
+    const file = new URL(`${specifier}.js`, topLevel);
+    if (existsSync(file)) return file.href;
+  }
+  return null;
+}
+
+export async function resolve(specifier, context, nextResolve) {
+  const target = mapped(specifier);
+  const resolved = await nextResolve(target || specifier, context);
+  if (resolved.url.endsWith(".js") && esmDirs.some((dir) => resolved.url.startsWith(dir))) {
+    return { ...resolved, format: "module" };
+  }
+  return resolved;
+}

data/lib/studio/node_tooling/node_test/register.mjs

@@ -0,0 +1,20 @@
+// Installs importmap_hooks.mjs for `node --test`. A host's own register file
+// (loaded with `node --import`) names its prefixes and calls this once:
+//
+//   import { registerImportmapHooks } from "../../../node_modules/.studio-engine/node_test/register.mjs";
+//   registerImportmapHooks({
+//     root: new URL("../../../", import.meta.url),
+//     prefixes: { board: "app/javascript/board/" },
+//     topLevelDir: "app/javascript/",
+//     esmDirs: ["app/javascript/", "test/javascript/"],
+//   });
+//
+// Paths are relative to `root`, the host's Rails root.
+import { register } from "node:module";
+
+export function registerImportmapHooks({ root, prefixes = {}, topLevelDir = null, esmDirs = [] }) {
+  if (!root) throw new Error("registerImportmapHooks: root is required");
+  register("./importmap_hooks.mjs", import.meta.url, {
+    data: { root: String(root), prefixes, topLevelDir, esmDirs },
+  });
+}

data/lib/studio/node_tooling/playwright_base.js

@@ -0,0 +1,63 @@
+// studio-engine's shared Playwright defaults.
+//
+// A plain object, not a defineConfig() call: this file is loaded from the gem's
+// directory, which has no node_modules, so it cannot require @playwright/test.
+// The host requires its own copy and wraps the result:
+//
+//   const { defineConfig } = require("@playwright/test");
+//   const { studioPlaywrightConfig } = require("./node_modules/.studio-engine/playwright_base.js");
+//   module.exports = defineConfig(studioPlaywrightConfig({
+//     defaultPort: "3000",
+//     webServer: { command: "bin/rails server -p $E2E_PORT" },
+//   }));
+//
+// Every key of `overrides` replaces the default of the same name; `use` merges
+// one level deep, so a host can add `reducedMotion` and keep `baseURL`.
+
+const DEFAULTS = Object.freeze({
+  testDir: "./e2e",
+  timeout: 30_000,
+  retries: 0,
+  workers: 1,
+});
+
+// The base URL, from the environment first: PW_BASE_URL (or BASE_URL) points the
+// lane at a stack someone else booted, and then no webServer is started.
+function studioBaseURL({ defaultPort, env = process.env } = {}) {
+  const port = env.E2E_PORT || String(defaultPort);
+  const external = env.PW_BASE_URL || env.BASE_URL || null;
+  return { port, external, baseURL: external || `http://127.0.0.1:${port}` };
+}
+
+// A Rails server Playwright boots and waits on. `/up` is the Rails health check
+// every app in the ecosystem keeps.
+function railsWebServer({ command, port, env = {}, timeout = 120_000, ci = !!process.env.CI }) {
+  if (!command) throw new Error("railsWebServer: a command is required");
+  return {
+    command,
+    url: `http://127.0.0.1:${port}/up`,
+    reuseExistingServer: !ci,
+    timeout,
+    stdout: "pipe",
+    stderr: "pipe",
+    env: { RAILS_ENV: "test", E2E_PORT: String(port), ...env },
+  };
+}
+
+function studioPlaywrightConfig({ defaultPort, webServer, env = process.env, use = {}, ...overrides } = {}) {
+  if (!defaultPort) throw new Error("studioPlaywrightConfig: defaultPort is required");
+  const { port, external, baseURL } = studioBaseURL({ defaultPort, env });
+  const config = {
+    ...DEFAULTS,
+    forbidOnly: !!env.CI,
+    projects: [{ name: "chromium", use: { browserName: "chromium" } }],
+    ...overrides,
+    use: { baseURL, headless: true, ...use },
+  };
+  if (!external && webServer) {
+    config.webServer = railsWebServer({ ci: !!env.CI, ...webServer, port });
+  }
+  return config;
+}
+
+module.exports = { DEFAULTS, studioBaseURL, railsWebServer, studioPlaywrightConfig };

data/lib/studio/node_tooling/versions.json

@@ -0,0 +1,5 @@
+{
+  "node": "22",
+  "@playwright/test": "1.62.1",
+  "axe-core": "4.11.0"
+}

data/lib/studio/node_tooling.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+require "fileutils"
+require "json"
+require "pathname"
+
+module Studio
+  # The engine's Node tooling package (lib/studio/node_tooling/README.md): the
+  # one pin set, the shared Playwright base and helpers, and the node:test hooks.
+  #
+  # The gem's path is resolved here in Ruby, never by Node running bundler (the
+  # same rule Studio::TailwindEntry keeps). `link!` puts a symlink at a fixed
+  # path in the host, so a host's playwright.config.js or test register file
+  # requires `./node_modules/.studio-engine/...` with no shell-out.
+  #
+  # `drift` holds a host to the pins: Node's major in `.tool-versions` (what
+  # mise and actions/setup-node's `node-version-file` read) and package.json
+  # `engines`, and the exact version of every pinned package the host declares,
+  # in package.json and in package-lock.json. A pinned package the host does not
+  # declare is not drift: no host is made to install what it does not use.
+  module NodeTooling
+    ROOT = Pathname(__dir__).join("node_tooling").freeze
+    LINK = "node_modules/.studio-engine"
+
+    module_function
+
+    def root = ROOT
+
+    # The host the rake tasks act on. A method of its own so a test can point
+    # the tasks at a temporary host without defining a Rails constant.
+    def host_root = ::Rails.root
+
+    def versions = JSON.parse(ROOT.join("versions.json").read)
+
+    def link_path(app_root) = Pathname(app_root).join(LINK)
+
+    # Idempotent. Replaces a stale link (an older gem's directory); refuses a
+    # real directory or file at the path rather than deleting someone's work.
+    def link!(app_root)
+      path = link_path(app_root)
+      if path.symlink?
+        return path if path.readlink == ROOT
+
+        path.delete
+      elsif path.exist?
+        raise ArgumentError, "#{path} exists and is not a symlink; move it aside and link again"
+      end
+      FileUtils.mkdir_p(path.dirname)
+      File.symlink(ROOT, path)
+      path
+    end
+
+    # Every way the host at `app_root` differs from versions.json, one sentence
+    # each. Empty when it matches.
+    def drift(app_root)
+      app_root = Pathname(app_root)
+      pins = versions
+      major = pins.fetch("node")
+      problems = node_version_drift(app_root, major)
+
+      package = read_json(app_root.join("package.json"))
+      return problems unless package
+
+      engines = package.dig("engines", "node")
+      unless engines == "#{major}.x"
+        problems << "package.json engines.node is #{engines.inspect}; the pin is \"#{major}.x\""
+      end
+
+      lock = read_json(app_root.join("package-lock.json"))
+      pins.except("node").each do |name, version|
+        declared = package.dig("devDependencies", name) || package.dig("dependencies", name)
+        next unless declared
+
+        problems << "package.json declares #{name} #{declared.inspect}; the pin is \"#{version}\"" unless declared == version
+        locked = lock&.dig("packages", "node_modules/#{name}", "version")
+        problems << "package-lock.json locks #{name} at #{locked.inspect}; the pin is \"#{version}\"" unless locked == version
+      end
+      problems
+    end
+
+    def node_version_drift(app_root, major)
+      file = app_root.join(".tool-versions")
+      return ["no .tool-versions; it should read \"nodejs #{major}\""] unless file.file?
+
+      line = file.read.lines.map(&:split).find { |tool, *| %w[nodejs node].include?(tool) }
+      return [".tool-versions names no nodejs; it should read \"nodejs #{major}\""] unless line
+      return [] if line[1] == major
+
+      [".tool-versions reads \"#{line.join(" ")}\"; it should read \"nodejs #{major}\""]
+    end
+
+    def read_json(path)
+      path.file? ? JSON.parse(path.read) : nil
+    end
+  end
+end

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.115.0"
+  VERSION = "0.115.1.rc2"
 end

data/lib/studio.rb

@@ -22,6 +22,7 @@ require "studio/geo/lookup"
 require "studio/link_preview"
 require "studio/engine"
 require "studio/tailwind_entry"
+require "studio/node_tooling"
 require "studio/color_scale"
 require "studio/environment_banner"
 require "studio/theme_resolver"

data/lib/tasks/studio_node.rake

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# The engine's Node tooling package (lib/studio/node_tooling/README.md). Neither
+# task loads :environment; both need only Rails.root (Studio::NodeTooling.host_root).
+namespace :studio do
+  namespace :node do
+    desc "Link studio-engine's Node tooling package at node_modules/.studio-engine (run after npm ci)"
+    task :link do
+      root = Studio::NodeTooling.host_root
+      path = Studio::NodeTooling.link!(root)
+      puts "studio-engine: #{path.relative_path_from(root)} -> #{Studio::NodeTooling.root}"
+    end
+
+    desc "Fail when this app's Node pins drift from studio-engine's versions.json"
+    task :check do
+      problems = Studio::NodeTooling.drift(Studio::NodeTooling.host_root)
+      if problems.empty?
+        puts "studio-engine: Node tooling matches the pins #{Studio::NodeTooling.versions.to_json}"
+      else
+        abort(["studio-engine: Node tooling drifts from the pins:", *problems.map { |p| "  - #{p}" }].join("\n"))
+      end
+    end
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.115.0
+  version: 0.115.1.rc2
 platform: ruby
 authors:
 - Alex McRitchie
@@ -365,8 +365,6 @@ files:
 - app/assets/javascripts/studio/leaflet.js
 - app/assets/javascripts/studio/session.js
 - app/assets/javascripts/studio/sortable.js
-- app/assets/javascripts/studio/sticky_table_header.js
-- app/assets/javascripts/studio/studio_confetti.js
 - app/assets/stylesheets/studio/leaflet.css
 - app/assets/stylesheets/studio/sticky_table_header.css
 - app/assets/tailwind/studio_engine/engine-motion.css
@@ -471,7 +469,9 @@ files:
 - app/javascript/studio/newsletter_modal.js
 - app/javascript/studio/pinned_stack.js
 - app/javascript/studio/profile_form.js
+- app/javascript/studio/sticky_table_header.js
 - app/javascript/studio/stimulus.js
+- app/javascript/studio/studio_confetti.js
 - app/javascript/studio/style_guide.js
 - app/javascript/studio/style_modals.js
 - app/javascript/studio/survey.js
@@ -774,6 +774,13 @@ files:
 - lib/studio/navbar_slots.rb
 - lib/studio/navbar_wordmark.rb
 - lib/studio/newsletter.rb
+- lib/studio/node_tooling.rb
+- lib/studio/node_tooling/README.md
+- lib/studio/node_tooling/e2e_helpers.js
+- lib/studio/node_tooling/node_test/importmap_hooks.mjs
+- lib/studio/node_tooling/node_test/register.mjs
+- lib/studio/node_tooling/playwright_base.js
+- lib/studio/node_tooling/versions.json
 - lib/studio/oauth_identity.rb
 - lib/studio/partial_block.rb
 - lib/studio/profile_image.rb
@@ -799,6 +806,7 @@ files:
 - lib/studio/version.rb
 - lib/tasks/studio_email.rake
 - lib/tasks/studio_knowledge.rake
+- lib/tasks/studio_node.rake
 - lib/tasks/studio_trash.rake
 - studio-engine.gemspec
 homepage: https://github.com/McRitchie-Studio/studio-engine

data/app/assets/javascripts/studio/studio_confetti.js

@@ -1,93 +0,0 @@
-/*
-  studio-engine — window.studioConfetti: two zero-dependency celebration effects
-  built on the vendored canvas-confetti (studio/canvas_confetti.js, no CDN).
-
-  Ported faithfully from turf-monster:
-    - burst(target)  → the radial card-burst that explodes from BEHIND a card or
-      modal, emanating from its center (TM solana_utils.js fireConfettiFromModal /
-      shared/_alpine_factories fireQuestBadgeConfetti). Pass the DOM element (or a
-      selector, or an {x,y} origin in 0..1 viewport space) to aim it; defaults to
-      screen center.
-    - cannons(opts)  → the full-screen "you joined a contest" celebration: a center
-      burst plus left + right side-cannons firing inward and a top shell (the same
-      choreography as the engine head's window.fireSuccessConfetti).
-
-  Both honor prefers-reduced-motion: reduce (no-op, and disableForReducedMotion is
-  also passed through to canvas-confetti as a second belt). Colors come from
-  window.CONFETTI_COLORS when a host sets it, else a neutral festive default.
-
-  Usage:
-    window.studioConfetti.burst(cardEl);   // radial burst behind a card/modal
-    window.studioConfetti.cannons();       // side-cannons full-screen celebration
-*/
-(function () {
-  "use strict";
-
-  var DEFAULT_COLORS = [
-    "#4BAF50", "#8E82FE", "#06D6A0", "#FF7C47",
-    "#FFD700", "#00BFFF", "#FF6B9D", "#C084FC"
-  ];
-
-  function colors(opts) {
-    return (opts && opts.colors) || window.CONFETTI_COLORS || DEFAULT_COLORS;
-  }
-
-  function reducedMotion() {
-    return !!(window.matchMedia &&
-              window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-  }
-
-  // Resolve a burst origin ({x,y} in 0..1 viewport space) from an element, a
-  // selector, or a literal {x,y}. Falls back to screen center when the target is
-  // missing or not laid out (e.g. a card that just unmounted).
-  function originFor(target) {
-    var el = (typeof target === "string") ? document.querySelector(target) : target;
-    if (el && el.nodeType === 1) {
-      var r = el.getBoundingClientRect();
-      if (r.width || r.height) {
-        return {
-          x: (r.left + r.width / 2) / window.innerWidth,
-          y: (r.top + r.height / 2) / window.innerHeight
-        };
-      }
-    }
-    if (target && typeof target.x === "number" && typeof target.y === "number") {
-      return { x: target.x, y: target.y };
-    }
-    return { x: 0.5, y: 0.5 };
-  }
-
-  var studioConfetti = {
-    // Radial burst from behind a card/modal — spread:360 fires in every direction
-    // from the card center, low velocity + gravity keep it clustered around the
-    // card rather than blasting off-screen. A smaller follow-shell layers texture,
-    // and two bottom-corner sweeps give the moment theatre.
-    burst: function (target, opts) {
-      if (typeof confetti === "undefined" || reducedMotion()) return;
-      opts = opts || {};
-      var origin = originFor(target);
-      var c = colors(opts);
-      var z = opts.zIndex || 9999;
-      confetti({ particleCount: 140, angle: 90, spread: 360, origin: origin, colors: c, zIndex: z, startVelocity: 30, gravity: 0.7, ticks: 220, scalar: 1.0, disableForReducedMotion: true });
-      setTimeout(function () {
-        confetti({ particleCount: 60, angle: 60, spread: 70, origin: { x: Math.max(0, origin.x - 0.18), y: Math.min(1, origin.y + 0.05) }, colors: c, zIndex: z, startVelocity: 40, gravity: 0.9, ticks: 200, scalar: 0.9, disableForReducedMotion: true });
-        confetti({ particleCount: 60, angle: 120, spread: 70, origin: { x: Math.min(1, origin.x + 0.18), y: Math.min(1, origin.y + 0.05) }, colors: c, zIndex: z, startVelocity: 40, gravity: 0.9, ticks: 200, scalar: 0.9, disableForReducedMotion: true });
-      }, 180);
-    },
-
-    // Full-screen side-cannon celebration: center burst, then left + right cannons
-    // firing inward, then a wide top shell. Mirrors window.fireSuccessConfetti.
-    cannons: function (opts) {
-      if (typeof confetti === "undefined" || reducedMotion()) return;
-      opts = opts || {};
-      var c = colors(opts);
-      var z = opts.zIndex || 9999;
-      confetti({ particleCount: 150, spread: 100, origin: { x: 0.5, y: 0.5 }, colors: c, zIndex: z, startVelocity: 45, gravity: 0.8, ticks: 300, scalar: 1.2, disableForReducedMotion: true });
-      setTimeout(function () { confetti({ particleCount: 80, angle: 60,  spread: 60,  origin: { x: 0,   y: 0.6 }, colors: c, zIndex: z, startVelocity: 55, gravity: 1,   ticks: 250, disableForReducedMotion: true }); }, 150);
-      setTimeout(function () { confetti({ particleCount: 80, angle: 120, spread: 60,  origin: { x: 1,   y: 0.6 }, colors: c, zIndex: z, startVelocity: 55, gravity: 1,   ticks: 250, disableForReducedMotion: true }); }, 150);
-      setTimeout(function () { confetti({ particleCount: 100, spread: 160, origin: { x: 0.5, y: 0.3 }, colors: c, zIndex: z, startVelocity: 30, gravity: 1.2, ticks: 200, scalar: 0.8, disableForReducedMotion: true }); }, 400);
-    }
-  };
-
-  window.studioConfetti = studioConfetti;
-})();