studio-engine 0.20.0 → 0.22.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3b84a5d11a22ad89cdbf077ba91c6d35374ba8a956c2fdc1207eb7033ec15c5
-  data.tar.gz: 510f09d35fb5dd3562c9435c1df1f5cf8001b9a34dd12678eb32822f91ded766
+  metadata.gz: 15b4c45fed9c5a2fd6056fca154236cbc12b778c483af5922486e47fcec6baac
+  data.tar.gz: d1efa67d91b858e9ba81f9fea1cb63d4b73c1e76a97c08dd0a8ca2afcd0b4522
 SHA512:
-  metadata.gz: 4f6da2882ad34a600e5855c659ba525bda3d191737389d1b8348e0eca8eb01b1da2a48d7df55dec5b5072879acf6ba236439c1ac99fac2c82216ac68b8df6af3
-  data.tar.gz: dbe6979e76badd522119308b4c459b1ebd5a246fa549364b2b78d7ca86e8b828c93523899aaa0813f874d1bb95be37e4c6cd32dab492c60988dbae84051d9ceb
+  metadata.gz: ec7d708e3665fbccf82ee641f82110cc8adfda8dd19528b3748807697ae6127db02c9579e1ef414051e541ea28005cc6b525b554e46ab1d1abd11cc959f48e74
+  data.tar.gz: dbc43339aeaad12be683b260e4cfcac8aa70f9fbf3a23be136b161790ce4468c8711f1e45c2fd608257df4bf867427e7cf3f8b8e52b0100e218c6de6a85dce1c

data/CHANGELOG.md

@@ -2,6 +2,151 @@
 
 The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html) — `MAJOR.MINOR.PATCH`. Consumer Rails apps install the released RubyGems package with `gem "studio-engine", "~> 0.6"`; bumping the gem version and updating consumer lockfiles is a release.
 
+## 0.22.0 — 2026-07-28
+
+Two additive batches for the living style guide, converged under one release.
+No existing shared primitive changes its defaults, so MS and TM render identically
+on the bump.
+
+Modal convergence, Phase 3: homes Turf Monster's quest/leveling activity modals
+(change username + the quest flows) as engine primitives, each supporting BOTH
+modes behind the `:leveling` capability flag. Plus a Tricks batch: three
+celebration/attention effects lifted from Turf Monster into engine primitives, all
+demoed on `/admin/style`.
+
+### Added
+
+- **Leveling-activity modal — `studio/modals/blocks/_leveling_activity`.** ONE
+  primitive, **two modes**, decided by `Studio.feature?(:leveling)`:
+  - **leveling on** — the full quest framing: a "Quest N of N" pill, and on
+    success the seeds celebration (progress bar + level-up + Free Entry), composed
+    from the existing `card_header` + `_seeds_bar` chrome.
+  - **leveling off** — the plain action modal: just the action + Save, then a
+    Saved state. No quest pill, no seeds. This is the McRitchie Studio shape (MS
+    has no leveling; Turf Monster does).
+
+  It renders a title, app-authored description, an optional single-line input
+  (`input` / `input_type` / validation attrs), and a configurable CTA. Callers
+  override the `leveling` gate per callsite (the style guide passes both) or let
+  it default to the app flag.
+
+- **Change-username modal — `studio/modals/blocks/_change_username`.** A named
+  engine primitive and a thin specialization of `_leveling_activity` with username
+  defaults (3–30 char input, the on-chain-neutral default copy, a
+  `studio:username-saved` event). This is the primary migrated modal.
+
+- **`levelingActionModal` factory — `studio/_leveling_activity_assets`.** The
+  Alpine data behind both modals, shipped at page level (a `<script>` cloned out
+  of a modal-host template never runs), like `ageVerifyModal`.
+
+  **CRITICAL BOUNDARY — UI ONLY.** The actual save is an **app-supplied callback**:
+  the modal POSTs to `submit_url` and reacts to a **domain-neutral** JSON contract
+  (`{ status: "saved" | "needs_step" | "error" }`). Any second step some apps need
+  (e.g. a managed-wallet write) is delegated **opaquely**: the engine hands the
+  app-returned `challenge` blob to an app-supplied `window[finalize_hook]` and
+  POSTs back the opaque `proof` the app returns — it never inspects, parses, or
+  decodes either blob. No wallet taxonomy, signing, keys, or on-chain writes live
+  anywhere in the engine; the custodial-vs-Phantom branch stays server-side. Turf
+  Monster wires the managed-wallet write; McRitchie Studio wires a trivial endpoint
+  that returns `{ status: "saved" }`.
+
+- **Living style guide — new "Leveling activities" group.** Adds four specimens to
+  the `/admin/style` Modals section — **change username** and a generic **quest
+  activity** (a newsletter-join), each shown **both ways** (leveling on and off) so
+  the two modes are visible regardless of the app's flag. Each demo resolves the
+  save locally, wires the active-card glow, and carries an agent-ready reference.
+
+- **`window.studioConfetti` — a zero-dependency, no-CDN confetti effect.**
+  canvas-confetti (v1.9.3, MIT) is now **vendored into the engine**
+  (`app/assets/javascripts/studio/canvas_confetti.js`) and shipped through the
+  asset pipeline instead of loaded from a CDN — CSP-safe (same-origin `:self`),
+  zero per-app dependency. `studio/studio_confetti.js` builds two callable
+  effects on top, both honoring `prefers-reduced-motion: reduce`:
+  - **`studioConfetti.burst(target)`** — the radial card-burst that explodes from
+    *behind* a card/modal, emanating from its center. Aim it with a DOM element,
+    a selector, or an `{x, y}` origin (0..1 viewport space); defaults to screen
+    center. Ported from turf-monster's `fireConfettiFromModal`.
+  - **`studioConfetti.cannons()`** — the full-screen "you joined a contest"
+    celebration: a center burst plus left + right side-cannons firing inward.
+    Same choreography as the engine head's `window.fireSuccessConfetti`.
+
+- **`.pulse-cta` — an attention pulse/glow for a CTA button**
+  (`engine-motion.css`). A gentle scale + expanding fading ring on a loop, themed
+  off the CTA role token (`--pulse-cta-color`, default `--color-cta`) so it
+  restyles per app, reduced-motion aware. Ported from turf-monster's
+  "Change Username" quest CTA (`.quest-pulse`). Named `.pulse-cta` (not
+  `.btn-pulse`) so it stays a plain motion-layer effect, not a `.btn` component
+  variant the `engine.css` contract would demand.
+
+- **Three `/admin/style` Tricks specimens** — a "Confetti & pulse" group renders
+  all three live: a "Fire burst" and "Fire cannons" demo (each surfacing the
+  `window.studioConfetti.*` call name + a copyable snippet) and the `.pulse-cta`
+  button.
+
+### Changed
+
+- The engine head (`layouts/studio/_head.html.erb`) now loads the **vendored**
+  canvas-confetti via `javascript_include_tag` rather than the jsDelivr CDN.
+  `window.fireSuccessConfetti` is unchanged and rides the same global — behavior
+  is identical, only the script source moves from CDN to a bundled engine asset.
+
+## 0.21.0 — 2026-07-27
+
+Phase 2 of the studio-engine modal convergence: homes the entry-time age-gate DOB
+modal as a policy-free engine primitive, and documents the app-specific entry-token
+purchase flow as a living-style-guide specimen.
+
+### Added
+
+- **Age-gate DOB modal — `studio/modals/blocks/_age_verify`.** The entry-time
+  date-of-birth gate (Month / Day / Year + a live "too young" hint + submit),
+  homed in the engine as the heavier sibling of the existing
+  `studio/modals/shared/_age_attestation` checkbox. **Run one or the other:** the
+  attestation is a signup-time "I confirm I'm of legal age" checkbox; this is an
+  entry-time DOB gate a server can recompute and stamp.
+
+  **The engine hardcodes NO legal policy** — the whole seam is app-supplied:
+  `min_age` (REQUIRED, with **no engine default** — 18 is itself a policy value),
+  `submit_url` (the app owns the authoritative recompute + DOB persistence),
+  `state` (an optional PASSIVE jurisdiction label — the modal never detects
+  geography and never offers an editable state field, so a spoofed client state
+  can't lower the bar), and `fine_print` (the app's per-jurisdiction legal copy;
+  the engine ships only a neutral, policy-free default). The per-state age table
+  that the app's policy encodes never enters the engine.
+
+- **`ageVerifyModal` factory — `studio/_age_verify_assets`.** The Alpine data for
+  the DOB modal, shipped at page level (a `<script>` cloned out of a modal-host
+  template never runs). A consumer renders it once in its layout, like the shared
+  alpine factories; mirrors how `studio/_cropper_assets` homes `cropPhotoModal`.
+  The factory carries zero policy — no age default, no state table; the client
+  age math is UX only, the server recompute stays authoritative.
+
+- **Living style guide — new "Eligibility & entry" group.** Adds two specimens to
+  the `/admin/style` Modals section:
+  - The **age-gate** specimen, opened with a clearly-labelled DEMO policy (21+ in
+    CA) that documents the app-supplied seam, gated by
+    `Studio.feature?(:age_gate)` — disabled-but-present-yet-openable when off,
+    like the web3 specimens.
+  - The **entry-tokens** specimen — the app-specific purchase flow
+    (picker → confirming → minted) documented by composing engine chrome
+    (`shell`, `card_header`, `progress_pill`) with illustrative demo packs. The
+    engine does NOT own the packs, pricing, rails, or the on-chain mint. The copy
+    reflects the real on-chain model: an entry token is a **prepaid entry credit
+    recorded on-chain** (not a wallet-held SPL token), **minted server-side** once
+    payment clears and **consumed** when the app's hold-to-confirm creates the
+    entry.
+
+### Capability gating
+
+- **`:age_gate`** — a new, independent capability flag gating the age-gate
+  specimen (and the intended consumer mount). Off by default; a consumer opts in
+  via `config.features`.
+
+### Unchanged
+
+- Backward compatible: every addition is additive/optional. Nothing existing
+  changes behaviour, and the lighter `_age_attestation` checkbox is untouched.
+
 ## 0.20.0 — 2026-07-27
 
 Phase 1 of the studio-engine modal convergence: the engine now OWNS the wallet

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

@@ -0,0 +1,17 @@
+/*
+  canvas-confetti v1.9.3 — VENDORED into studio-engine (no CDN, CSP-safe).
+  Source: https://github.com/catdad/canvas-confetti (MIT, (c) Kiril Vatev).
+  Minified build: https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js
+  Shipped as an engine asset so consumers get zero-per-app confetti with no
+  third-party CDN dependency. Defines the global `confetti`; studio_confetti.js
+  builds window.studioConfetti (burst/cannons) on top. To re-vendor on a bump:
+  re-fetch the pinned dist file above, keep this header, bump the version.
+*/
+/**
+ * Minified by jsDelivr using Terser v5.37.0.
+ * Original file: /npm/canvas-confetti@1.9.3/dist/confetti.browser.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+!function(t,e){!function t(e,a,n,r){var o=!!(e.Worker&&e.Blob&&e.Promise&&e.OffscreenCanvas&&e.OffscreenCanvasRenderingContext2D&&e.HTMLCanvasElement&&e.HTMLCanvasElement.prototype.transferControlToOffscreen&&e.URL&&e.URL.createObjectURL),i="function"==typeof Path2D&&"function"==typeof DOMMatrix,l=function(){if(!e.OffscreenCanvas)return!1;var t=new OffscreenCanvas(1,1),a=t.getContext("2d");a.fillRect(0,0,1,1);var n=t.transferToImageBitmap();try{a.createPattern(n,"no-repeat")}catch(t){return!1}return!0}();function s(){}function c(t){var n=a.exports.Promise,r=void 0!==n?n:e.Promise;return"function"==typeof r?new r(t):(t(s,s),null)}var h,f,u,d,m,g,p,b,M,v,y,w=(h=l,f=new Map,{transform:function(t){if(h)return t;if(f.has(t))return f.get(t);var e=new OffscreenCanvas(t.width,t.height);return e.getContext("2d").drawImage(t,0,0),f.set(t,e),e},clear:function(){f.clear()}}),x=(m=Math.floor(1e3/60),g={},p=0,"function"==typeof requestAnimationFrame&&"function"==typeof cancelAnimationFrame?(u=function(t){var e=Math.random();return g[e]=requestAnimationFrame((function a(n){p===n||p+m-1<n?(p=n,delete g[e],t()):g[e]=requestAnimationFrame(a)})),e},d=function(t){g[t]&&cancelAnimationFrame(g[t])}):(u=function(t){return setTimeout(t,m)},d=function(t){return clearTimeout(t)}),{frame:u,cancel:d}),C=(v={},function(){if(b)return b;if(!n&&o){var e=["var CONFETTI, SIZE = {}, module = {};","("+t.toString()+")(this, module, true, SIZE);","onmessage = function(msg) {","  if (msg.data.options) {","    CONFETTI(msg.data.options).then(function () {","      if (msg.data.callback) {","        postMessage({ callback: msg.data.callback });","      }","    });","  } else if (msg.data.reset) {","    CONFETTI && CONFETTI.reset();","  } else if (msg.data.resize) {","    SIZE.width = msg.data.resize.width;","    SIZE.height = msg.data.resize.height;","  } else if (msg.data.canvas) {","    SIZE.width = msg.data.canvas.width;","    SIZE.height = msg.data.canvas.height;","    CONFETTI = module.exports.create(msg.data.canvas);","  }","}"].join("\n");try{b=new Worker(URL.createObjectURL(new Blob([e])))}catch(t){return void 0!==typeof console&&"function"==typeof console.warn&&console.warn("🎊 Could not load worker",t),null}!function(t){function e(e,a){t.postMessage({options:e||{},callback:a})}t.init=function(e){var a=e.transferControlToOffscreen();t.postMessage({canvas:a},[a])},t.fire=function(a,n,r){if(M)return e(a,null),M;var o=Math.random().toString(36).slice(2);return M=c((function(n){function i(e){e.data.callback===o&&(delete v[o],t.removeEventListener("message",i),M=null,w.clear(),r(),n())}t.addEventListener("message",i),e(a,o),v[o]=i.bind(null,{data:{callback:o}})}))},t.reset=function(){for(var e in t.postMessage({reset:!0}),v)v[e](),delete v[e]}}(b)}return b}),I={particleCount:50,angle:90,spread:45,startVelocity:45,decay:.9,gravity:1,drift:0,ticks:200,x:.5,y:.5,shapes:["square","circle"],zIndex:100,colors:["#26ccff","#a25afd","#ff5e7e","#88ff5a","#fcff42","#ffa62d","#ff36ff"],disableForReducedMotion:!1,scalar:1};function T(t,e,a){return function(t,e){return e?e(t):t}(t&&null!=t[e]?t[e]:I[e],a)}function E(t){return t<0?0:Math.floor(t)}function P(t){return parseInt(t,16)}function S(t){return t.map(O)}function O(t){var e=String(t).replace(/[^0-9a-f]/gi,"");return e.length<6&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]),{r:P(e.substring(0,2)),g:P(e.substring(2,4)),b:P(e.substring(4,6))}}function k(t){t.width=document.documentElement.clientWidth,t.height=document.documentElement.clientHeight}function B(t){var e=t.getBoundingClientRect();t.width=e.width,t.height=e.height}function F(t,e){e.x+=Math.cos(e.angle2D)*e.velocity+e.drift,e.y+=Math.sin(e.angle2D)*e.velocity+e.gravity,e.velocity*=e.decay,e.flat?(e.wobble=0,e.wobbleX=e.x+10*e.scalar,e.wobbleY=e.y+10*e.scalar,e.tiltSin=0,e.tiltCos=0,e.random=1):(e.wobble+=e.wobbleSpeed,e.wobbleX=e.x+10*e.scalar*Math.cos(e.wobble),e.wobbleY=e.y+10*e.scalar*Math.sin(e.wobble),e.tiltAngle+=.1,e.tiltSin=Math.sin(e.tiltAngle),e.tiltCos=Math.cos(e.tiltAngle),e.random=Math.random()+2);var a=e.tick++/e.totalTicks,n=e.x+e.random*e.tiltCos,r=e.y+e.random*e.tiltSin,o=e.wobbleX+e.random*e.tiltCos,l=e.wobbleY+e.random*e.tiltSin;if(t.fillStyle="rgba("+e.color.r+", "+e.color.g+", "+e.color.b+", "+(1-a)+")",t.beginPath(),i&&"path"===e.shape.type&&"string"==typeof e.shape.path&&Array.isArray(e.shape.matrix))t.fill(function(t,e,a,n,r,o,i){var l=new Path2D(t),s=new Path2D;s.addPath(l,new DOMMatrix(e));var c=new Path2D;return c.addPath(s,new DOMMatrix([Math.cos(i)*r,Math.sin(i)*r,-Math.sin(i)*o,Math.cos(i)*o,a,n])),c}(e.shape.path,e.shape.matrix,e.x,e.y,.1*Math.abs(o-n),.1*Math.abs(l-r),Math.PI/10*e.wobble));else if("bitmap"===e.shape.type){var s=Math.PI/10*e.wobble,c=.1*Math.abs(o-n),h=.1*Math.abs(l-r),f=e.shape.bitmap.width*e.scalar,u=e.shape.bitmap.height*e.scalar,d=new DOMMatrix([Math.cos(s)*c,Math.sin(s)*c,-Math.sin(s)*h,Math.cos(s)*h,e.x,e.y]);d.multiplySelf(new DOMMatrix(e.shape.matrix));var m=t.createPattern(w.transform(e.shape.bitmap),"no-repeat");m.setTransform(d),t.globalAlpha=1-a,t.fillStyle=m,t.fillRect(e.x-f/2,e.y-u/2,f,u),t.globalAlpha=1}else if("circle"===e.shape)t.ellipse?t.ellipse(e.x,e.y,Math.abs(o-n)*e.ovalScalar,Math.abs(l-r)*e.ovalScalar,Math.PI/10*e.wobble,0,2*Math.PI):function(t,e,a,n,r,o,i,l,s){t.save(),t.translate(e,a),t.rotate(o),t.scale(n,r),t.arc(0,0,1,i,l,s),t.restore()}(t,e.x,e.y,Math.abs(o-n)*e.ovalScalar,Math.abs(l-r)*e.ovalScalar,Math.PI/10*e.wobble,0,2*Math.PI);else if("star"===e.shape)for(var g=Math.PI/2*3,p=4*e.scalar,b=8*e.scalar,M=e.x,v=e.y,y=5,x=Math.PI/y;y--;)M=e.x+Math.cos(g)*b,v=e.y+Math.sin(g)*b,t.lineTo(M,v),g+=x,M=e.x+Math.cos(g)*p,v=e.y+Math.sin(g)*p,t.lineTo(M,v),g+=x;else t.moveTo(Math.floor(e.x),Math.floor(e.y)),t.lineTo(Math.floor(e.wobbleX),Math.floor(r)),t.lineTo(Math.floor(o),Math.floor(l)),t.lineTo(Math.floor(n),Math.floor(e.wobbleY));return t.closePath(),t.fill(),e.tick<e.totalTicks}function A(t,a){var i,l=!t,s=!!T(a||{},"resize"),h=!1,f=T(a,"disableForReducedMotion",Boolean),u=o&&!!T(a||{},"useWorker")?C():null,d=l?k:B,m=!(!t||!u)&&!!t.__confetti_initialized,g="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion)").matches;function p(e,a,o){for(var l,s,h,f,u,m=T(e,"particleCount",E),g=T(e,"angle",Number),p=T(e,"spread",Number),b=T(e,"startVelocity",Number),M=T(e,"decay",Number),v=T(e,"gravity",Number),y=T(e,"drift",Number),C=T(e,"colors",S),I=T(e,"ticks",Number),P=T(e,"shapes"),O=T(e,"scalar"),k=!!T(e,"flat"),B=function(t){var e=T(t,"origin",Object);return e.x=T(e,"x",Number),e.y=T(e,"y",Number),e}(e),A=m,R=[],N=t.width*B.x,z=t.height*B.y;A--;)R.push((l={x:N,y:z,angle:g,spread:p,startVelocity:b,color:C[A%C.length],shape:P[(f=0,u=P.length,Math.floor(Math.random()*(u-f))+f)],ticks:I,decay:M,gravity:v,drift:y,scalar:O,flat:k},s=void 0,h=void 0,s=l.angle*(Math.PI/180),h=l.spread*(Math.PI/180),{x:l.x,y:l.y,wobble:10*Math.random(),wobbleSpeed:Math.min(.11,.1*Math.random()+.05),velocity:.5*l.startVelocity+Math.random()*l.startVelocity,angle2D:-s+(.5*h-Math.random()*h),tiltAngle:(.5*Math.random()+.25)*Math.PI,color:l.color,shape:l.shape,tick:0,totalTicks:l.ticks,decay:l.decay,drift:l.drift,random:Math.random()+2,tiltSin:0,tiltCos:0,wobbleX:0,wobbleY:0,gravity:3*l.gravity,ovalScalar:.6,scalar:l.scalar,flat:l.flat}));return i?i.addFettis(R):(i=function(t,e,a,o,i){var l,s,h=e.slice(),f=t.getContext("2d"),u=c((function(e){function c(){l=s=null,f.clearRect(0,0,o.width,o.height),w.clear(),i(),e()}l=x.frame((function e(){!n||o.width===r.width&&o.height===r.height||(o.width=t.width=r.width,o.height=t.height=r.height),o.width||o.height||(a(t),o.width=t.width,o.height=t.height),f.clearRect(0,0,o.width,o.height),(h=h.filter((function(t){return F(f,t)}))).length?l=x.frame(e):c()})),s=c}));return{addFettis:function(t){return h=h.concat(t),u},canvas:t,promise:u,reset:function(){l&&x.cancel(l),s&&s()}}}(t,R,d,a,o),i.promise)}function b(a){var n=f||T(a,"disableForReducedMotion",Boolean),r=T(a,"zIndex",Number);if(n&&g)return c((function(t){t()}));l&&i?t=i.canvas:l&&!t&&(t=function(t){var e=document.createElement("canvas");return e.style.position="fixed",e.style.top="0px",e.style.left="0px",e.style.pointerEvents="none",e.style.zIndex=t,e}(r),document.body.appendChild(t)),s&&!m&&d(t);var o={width:t.width,height:t.height};function b(){if(u){var e={getBoundingClientRect:function(){if(!l)return t.getBoundingClientRect()}};return d(e),void u.postMessage({resize:{width:e.width,height:e.height}})}o.width=o.height=null}function M(){i=null,s&&(h=!1,e.removeEventListener("resize",b)),l&&t&&(document.body.contains(t)&&document.body.removeChild(t),t=null,m=!1)}return u&&!m&&u.init(t),m=!0,u&&(t.__confetti_initialized=!0),s&&!h&&(h=!0,e.addEventListener("resize",b,!1)),u?u.fire(a,o,M):p(a,o,M)}return b.reset=function(){u&&u.reset(),i&&i.reset()},b}function R(){return y||(y=A(null,{useWorker:!0,resize:!0})),y}a.exports=function(){return R().apply(this,arguments)},a.exports.reset=function(){R().reset()},a.exports.create=A,a.exports.shapeFromPath=function(t){if(!i)throw new Error("path confetti are not supported in this browser");var e,a;"string"==typeof t?e=t:(e=t.path,a=t.matrix);var n=new Path2D(e),r=document.createElement("canvas").getContext("2d");if(!a){for(var o,l,s=1e3,c=s,h=s,f=0,u=0,d=0;d<s;d+=2)for(var m=0;m<s;m+=2)r.isPointInPath(n,d,m,"nonzero")&&(c=Math.min(c,d),h=Math.min(h,m),f=Math.max(f,d),u=Math.max(u,m));o=f-c,l=u-h;var g=Math.min(10/o,10/l);a=[g,0,0,g,-Math.round(o/2+c)*g,-Math.round(l/2+h)*g]}return{type:"path",path:e,matrix:a}},a.exports.shapeFromText=function(t){var e,a=1,n="#000000",r='"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "Twemoji Mozilla", "system emoji", sans-serif';"string"==typeof t?e=t:(e=t.text,a="scalar"in t?t.scalar:a,r="fontFamily"in t?t.fontFamily:r,n="color"in t?t.color:n);var o=10*a,i=o+"px "+r,l=new OffscreenCanvas(o,o),s=l.getContext("2d");s.font=i;var c=s.measureText(e),h=Math.ceil(c.actualBoundingBoxRight+c.actualBoundingBoxLeft),f=Math.ceil(c.actualBoundingBoxAscent+c.actualBoundingBoxDescent),u=c.actualBoundingBoxLeft+2,d=c.actualBoundingBoxAscent+2;h+=4,f+=4,(s=(l=new OffscreenCanvas(h,f)).getContext("2d")).font=i,s.fillStyle=n,s.fillText(e,u,d);var m=1/a;return{type:"bitmap",bitmap:l.transferToImageBitmap(),matrix:[m,0,0,m,-h*m/2,-f*m/2]}}}(function(){return void 0!==t?t:"undefined"!=typeof self?self:this||{}}(),e,!1),t.confetti=e.exports}(window,{});
+//# sourceMappingURL=/sm/0e9ac22f62a550282b886b288da51d7892173a94bbd286c2ffc6e7b881509c88.map

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

@@ -0,0 +1,93 @@
+/*
+  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;
+})();

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

@@ -21,6 +21,7 @@
     .studio-glow          soft themed glow halo               (authored fresh)
     .surface-glass        frosted translucent glass panel     (authored fresh)
     .conic-surface        slow rotating conic-gradient wash   (authored fresh)
+    .pulse-cta            attention pulse/glow for a CTA       (ported, TM)
 
   Leveling:
     .level-badge(-1..-10) progressive level pill ladder       (ported, TM)
@@ -1111,3 +1112,49 @@ body.modal-open { overflow: hidden; }
   @keyframes modal-card-slide-out-left  { from { opacity: 1; } to { opacity: 0; } }
   @keyframes modal-card-slide-in-right  { from { opacity: 0; } to { opacity: 1; } }
 }
+
+/* =============================================================================
+   12. pulse-cta — attention pulse/glow for a CTA button
+   A gentle "look at me" beat: the element scales up a hair while an expanding,
+   fading ring radiates from its edge, then rests, on a loop. Ported from turf-
+   monster's "Change Username" quest CTA (.quest-pulse), re-themed off the CTA
+   role token so it restyles per app (purple on McRitchie Studio) rather than TM's
+   hardcoded green. Drop it on a .btn (or any element with a solid background); for
+   a green "go" pulse set --pulse-cta-color: var(--color-success) at the call site.
+   Named pulse-cta (not btn-pulse) so it stays a plain motion-layer effect, not a
+   .btn component variant the engine.css component contract would demand.
+
+   Usage:  <button class="btn btn-primary pulse-cta">Change Username</button>
+           green pulse:  style="--pulse-cta-color: var(--color-success)"
+   Tune:   --pulse-cta-color / --pulse-cta-speed / --pulse-cta-scale /
+           --pulse-cta-ring / --pulse-cta-strength
+   ========================================================================== */
+.pulse-cta {
+  --pulse-cta-color: var(--color-cta);
+  --pulse-cta-speed: 3s;
+  --pulse-cta-scale: 1.03;
+  --pulse-cta-ring: 10px;
+  --pulse-cta-strength: 0.5;
+  animation: pulse-cta var(--pulse-cta-speed) ease-out infinite;
+}
+@keyframes pulse-cta {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 100%), transparent);
+  }
+  10% {
+    transform: scale(var(--pulse-cta-scale));
+    box-shadow: 0 0 0 calc(var(--pulse-cta-ring) * 0.6) color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 50%), transparent);
+  }
+  22% {
+    transform: scale(1);
+    box-shadow: 0 0 0 var(--pulse-cta-ring) color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pulse-cta { animation: none; }
+}

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

@@ -21,7 +21,13 @@
 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
 
 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
+<%# 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 below
+    is unchanged and rides the same global. %>
+<%= javascript_include_tag "studio/canvas_confetti", "data-turbo-track": "reload" %>
+<%= javascript_include_tag "studio/studio_confetti", "data-turbo-track": "reload" %>
 <script>
   window.fireSuccessConfetti = function() {
     if (typeof confetti === 'undefined') return;

data/app/views/studio/_age_verify_assets.html.erb

@@ -0,0 +1,120 @@
+<%#
+  ageVerifyModal factory — the Alpine data for the engine age-gate DOB modal
+  (studio/modals/blocks/_age_verify). Ships here, at PAGE level, on purpose: the
+  modal partial mounts inside a modal host's single-root template, and a script
+  cloned out of a template never runs. So a consumer renders THIS once in its
+  layout (like the shared alpine factories), and the modal partial anywhere below
+  just references window.ageVerifyModal. Mirrors how studio/_cropper_assets homes
+  the cropPhotoModal factory for the crop modal.
+
+  The factory holds ZERO legal policy — no age default, no state table. minAge is
+  whatever the app hands it (a required prop upstream); the client "too young"
+  hint is UX only, and the server recompute at submit_url stays authoritative.
+
+  opts: { minAge, state, url, store, demo }.
+    minAge  app-supplied minimum age (no engine fallback — 0 means unsupplied).
+    state   passive jurisdiction label (server-detected upstream; never editable).
+    url     app endpoint the DOB POSTs to (the app owns the authoritative check).
+    store   Alpine modal store name backing close() (default "modals").
+    demo    style-guide preview: resolve locally, skip the network POST.
+%>
+<script>
+  (function () {
+    if (window.ageVerifyModal) return;
+    window.ageVerifyModal = function (opts) {
+      opts = opts || {};
+      var now = new Date();
+      return {
+        month: "", day: "", year: "",
+        submitting: false,
+        error: "",
+        // No engine age default: 18 is itself a policy value. The app supplies it.
+        minAge: parseInt(opts.minAge, 10) || 0,
+        stateCode: opts.state || "",
+        url: opts.url || "",
+        store: opts.store || "modals",
+        demo: !!opts.demo,
+        months: [
+          { n: 1, label: "January" }, { n: 2, label: "February" }, { n: 3, label: "March" },
+          { n: 4, label: "April" }, { n: 5, label: "May" }, { n: 6, label: "June" },
+          { n: 7, label: "July" }, { n: 8, label: "August" }, { n: 9, label: "September" },
+          { n: 10, label: "October" }, { n: 11, label: "November" }, { n: 12, label: "December" }
+        ],
+        // Year range: 13 years ago (youngest plausible) back 100 years. This is a
+        // sane input range, not an age bar — the app's minAge decides eligibility.
+        years: (function () {
+          var ys = [], top = now.getFullYear() - 13, bottom = now.getFullYear() - 100;
+          for (var y = top; y >= bottom; y--) ys.push(y);
+          return ys;
+        })(),
+        // Days available for the chosen month/year (handles 28/29/30/31).
+        get dayOptions() {
+          var m = parseInt(this.month, 10), y = parseInt(this.year, 10);
+          var max = 31;
+          if (m) max = new Date(y || 2000, m, 0).getDate();
+          var ds = [];
+          for (var d = 1; d <= max; d++) ds.push(d);
+          return ds;
+        },
+        get complete() {
+          return !!(this.month && this.day && this.year);
+        },
+        get computedAge() {
+          if (!this.complete) return null;
+          var dob = new Date(parseInt(this.year, 10), parseInt(this.month, 10) - 1, parseInt(this.day, 10));
+          var age = now.getFullYear() - dob.getFullYear();
+          var hadBirthday = (now.getMonth() > dob.getMonth()) ||
+            (now.getMonth() === dob.getMonth() && now.getDate() >= dob.getDate());
+          if (!hadBirthday) age -= 1;
+          return age;
+        },
+        // Clamp an out-of-range day when the month changes (e.g. Feb after 31).
+        onMonthChange() {
+          if (this.day && parseInt(this.day, 10) > this.dayOptions.length) this.day = "";
+          this.error = "";
+        },
+        // Success path: flip a session flag if present, close via the app's store,
+        // and let the app resume its own flow (the entry gate listens for this).
+        _finish() {
+          try {
+            var sess = window.Alpine && Alpine.store && Alpine.store("session");
+            if (sess) sess.ageVerified = true;
+          } catch (e) {}
+          try { Alpine.store(this.store).close(); } catch (e) {}
+          window.dispatchEvent(new CustomEvent("age-verified"));
+        },
+        submit() {
+          if (!this.complete || this.submitting) return;
+          this.error = "";
+          // Client courtesy gate only — the server recompute is authoritative.
+          if (this.computedAge !== null && this.minAge && this.computedAge < this.minAge) return;
+          this.submitting = true;
+          var self = this;
+          if (this.demo) {
+            // Style-guide preview: no backend, resolve locally so the modal
+            // demonstrates the success handoff without an endpoint.
+            setTimeout(function () { self.submitting = false; self._finish(); }, 450);
+            return;
+          }
+          var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || "";
+          fetch(this.url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, "Accept": "application/json" },
+            body: JSON.stringify({ year: this.year, month: this.month, day: this.day })
+          })
+            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+            .then(function (res) {
+              self.submitting = false;
+              if (res.ok && res.body && res.body.verified) { self._finish(); return; }
+              self.error = (res.body && res.body.error) ||
+                "We couldn't verify your age. Please check the date and try again.";
+            })
+            .catch(function () {
+              self.submitting = false;
+              self.error = "Network error — please try again.";
+            });
+        }
+      };
+    };
+  })();
+</script>