studio-engine 0.100.0.rc1 → 0.101.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ccf0cc77e250c21faca747741337d7b492defe5b3af054169b2e78a89a0908a8
-  data.tar.gz: 9fcfe0bcdcfd78e53fc67e0d627cabaf40c822428d997756451ad96b11c34f2d
+  metadata.gz: 2c4e934f3894dd00a374f95b4fbe030e95fcb1f2fc88a5838703c5aed25244c5
+  data.tar.gz: ece60cbff86a6e9bfe6436fbf41fedd8ef0f89a3c1bb907fc5f6990e07910cf2
 SHA512:
-  metadata.gz: 8fa59ab9b1cc9538065e73d21264a7cf49b9afb21d0a4e030091ffe4edaf19a66f511fa00a4a17c8303c0531af1866cfa94e343b7725ed40a187f605a04e7aed
-  data.tar.gz: a90ebd5d35c3f7ab4964bf7ca484d760d44d8fd9ced4c44f3f05dd3423c57c89e972685ed8bb6cadd20ee4eda313980e1312f30503b2845e3270ee27bb01b0fb
+  metadata.gz: 596c703216999cf57ceaa621439093da0c4763b38c8fc4e60147594d623920964bf4d2315a947eb82aeeedba70713a01d00beef3e76351cc640af296f434756d
+  data.tar.gz: 9ec306df7f9f0375c5056aaa895594874cd94b10c486cefc84fa2ca69d383deb993b54c892383ccb020da65efb7851cdef58885e9677abdd33eedb5ebe2619fd

data/CHANGELOG.md

@@ -4,6 +4,48 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.101.0 — 2026-10-10
+
+### Breaking
+
+- **The hold button takes no JavaScript-string locals.** `studio/_hold_button`
+  no longer writes them to `data-*` attributes and `studio/hold_button_hooks`
+  no longer evaluates them, so the button needs no `unsafe-eval`. Each removed
+  local has an event the button dispatches (they bubble, and every
+  `event.detail` carries `{ id }`, the button's `hold_id`):
+
+  | Removed local | Attribute it wrote | Answer this event |
+  |---|---|---|
+  | `guard:` | `data-guard` | `hold-button:guard`: `preventDefault()` refuses the hold |
+  | `on_hold_start:` | `data-on-hold-start` | `hold-button:start` |
+  | `validate:` | `data-validate` | `hold-button:validate`: `event.detail.waitUntil(answer)`, a boolean or a promise of one |
+  | `early_action:` | `data-early-action` | `hold-button:early`: `preventDefault()` takes the action over |
+  | `early_action_guard:` | `data-early-action-guard` | `hold-button:early`: decide in the listener, and call `preventDefault()` only when the action runs |
+  | `on_success:` | `data-on-success` | `hold-button:success`: `preventDefault()` keeps the button's state for the listener |
+
+  `validate_at:` and `early_action_at:` stay, and time the events.
+
+  A call site that still passes one fails loudly:
+  - `render "studio/hold_button"` with a removed local that is not `nil` raises
+    `ArgumentError` naming each local and its event, in every environment
+    (`Studio::HoldButton.refuse_removed_locals!`).
+  - A `.hold-btn` that carries one of the attributes by hand refuses every
+    press, dispatches nothing, and logs a console error naming the attribute
+    and its event.
+
+  `SUCCESS_SETTLE_MS` is no longer exported by `studio/hold_button_hooks`:
+  `hold-button:success` is dispatched at the full duration, with no half-second
+  delay. The module no longer reads `button.dataset`, so a consumer test that
+  scans it for the attribute names it evaluates finds none.
+
+### Added
+
+- **The navbar takes a `brand_heading` local.** `layouts/_navbar` draws the
+  brand title as the page's `<h1>` by default, exactly as before. Pass
+  `brand_heading: false` on a page that carries its own h1 and the brand is drawn
+  as a `<div>` with the same classes and contents; no other byte of the navbar
+  changes. Styling keys on `.nav-title`, never on the element name.
+
 ## 0.100.0 — 2026-10-10
 
 ### Added

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

@@ -10,7 +10,7 @@
 //                                 touchend->hold-button#end touchcancel->hold-button#end">
 //
 // The timeline, the idle nudge and the fizz portal are studio/hold_button; the
-// events and string locals the timeline asks are studio/hold_button_hooks.
+// events the timeline asks through are studio/hold_button_hooks.
 import { Controller } from "@hotwired/stimulus"
 import { Hold, mountPortal } from "studio/hold_button"
 import { holdHooks } from "studio/hold_button_hooks"

data/app/javascript/studio/hold_button_hooks.js

@@ -1,70 +1,50 @@
 // studio/hold_button_hooks: how one hold button asks its page the timeline's
-// questions (studio/hold_button). Two voices, both heard on every press:
+// questions (studio/hold_button). It dispatches events on the button, which
+// bubble:
 //
-// 1. EVENTS, dispatched on the button and bubbling. This is the API:
+//   hold-button:guard     at the press. preventDefault() refuses the hold.
+//   hold-button:start     the hold began.
+//   hold-button:validate  at validate_at. event.detail.waitUntil(answer)
+//                         takes a boolean or a promise of one; a false or
+//                         failed answer aborts the hold.
+//   hold-button:early     at early_action_at. preventDefault() takes the
+//                         action over: the hold never completes.
+//   hold-button:success   at the full duration. preventDefault() keeps the
+//                         button in its holding state for the listener to
+//                         resolve; otherwise it shows its success face.
 //
-//      hold-button:guard     at the press. preventDefault() refuses the hold.
-//      hold-button:start     the hold began.
-//      hold-button:validate  at validate_at. event.detail.waitUntil(answer)
-//                            takes a boolean or a promise of one; a false or
-//                            failed answer aborts the hold.
-//      hold-button:early     at early_action_at. preventDefault() takes the
-//                            action over: the hold never completes.
-//      hold-button:success   at the full duration. preventDefault() keeps the
-//                            button in its holding state for the listener to
-//                            resolve; otherwise it shows its success face.
+// Every event's detail carries { id }, the button's hold_id.
 //
-//    Every event's detail carries { id }, the button's hold_id.
+//   <div @hold-button:guard="ready || $event.preventDefault()"
+//        @hold-button:success="submit()">
+//     <%= render "studio/hold_button", hold_id: "confirm" %>
+//   </div>
 //
-//      <div @hold-button:guard="ready || $event.preventDefault()"
-//           @hold-button:success="submit()">
-//        <%= render "studio/hold_button", hold_id: "confirm" %>
-//      </div>
+// It evaluates nothing. A button that carries one of REMOVED_HOOKS' attributes
+// was written for the JavaScript-string locals this module no longer runs: every
+// press on it is refused and says so on the console.
 //
-// 2. STRING LOCALS, the partial's guard:, on_hold_start:, validate:,
-//    early_action:, early_action_guard: and on_success:, which arrive as
-//    data-* attributes and are evaluated against the nearest [x-data] scope
-//    with `d` and `data` aliased to its data. They stay while a consumer
-//    passes them (turf-monster does), and go when none does.
-//
-// Either voice can refuse: a hold needs every guard to pass. With an [x-data]
-// ancestor a press is also refused while that scope's `submitting` is true, so
-// a second hold cannot double-submit.
+// With an [x-data] ancestor a press is also refused while that scope's
+// `submitting` is true, so a second hold cannot double-submit.
 //
 // It imports nothing; test/javascript/hold_button_hooks.test.mjs loads it as a
 // data: module.
 
-// How long the button stays in its holding state before a string on_success
-// runs.
-export const SUCCESS_SETTLE_MS = 500
-
-const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
-
-// An expression against an Alpine scope, synchronously.
-function evaluate(Alpine, scope, expression) {
-  const data = Alpine.$data(scope)
-  return Alpine.evaluate(scope, expression, { scope: { d: data, data } })
-}
-
-// The same for an expression that may return a promise. Alpine.evaluate
-// returns before an async expression settles, so this compiles its own
-// function with the names an expression may use.
-function evaluateAsync(Alpine, win, scope, expression) {
-  const data = Alpine.$data(scope)
-  try {
-    const fn = new AsyncFunction("d", "data", "Alpine", "window", '"use strict"; return (' + expression + ");")
-    return fn(data, data, Alpine, win)
-  } catch (error) {
-    return Promise.reject(error)
-  }
+// Attribute => [the removed local that wrote it, the event that answers now].
+// Studio::HoldButton::REMOVED_LOCALS is the same table for the partial.
+export const REMOVED_HOOKS = {
+  "data-guard": ["guard", "hold-button:guard"],
+  "data-on-hold-start": ["on_hold_start", "hold-button:start"],
+  "data-validate": ["validate", "hold-button:validate"],
+  "data-early-action": ["early_action", "hold-button:early"],
+  "data-early-action-guard": ["early_action_guard", "hold-button:early"],
+  "data-on-success": ["on_success", "hold-button:success"]
 }
 
 // The hooks a Hold takes, for one button.
 export function holdHooks(button, { win } = {}) {
   const host = win || globalThis
-  const id = () => button.dataset.holdId || "hold"
-  const warn = (what, error) => host.console.warn(`[hold:${id()}] ${what}`, error || "")
-  const fail = (what, error) => host.console.error(`[hold:${id()}] ${what}`, error)
+  const id = () => button.getAttribute("data-hold-id") || "hold"
 
   const fire = (name, detail = {}) => {
     const event = new host.CustomEvent(`hold-button:${name}`, {
@@ -74,89 +54,50 @@ export function holdHooks(button, { win } = {}) {
     return event
   }
 
-  const scope = () => button.closest("[x-data]")
-  // A string local with nothing to evaluate it against cannot answer.
-  const scopeFor = (name) => {
-    const found = host.Alpine ? scope() : null
-    if (!found) warn(`${name}: no Alpine scope to evaluate it in`)
-    return found
+  // True, and reported, when the button carries a removed hook.
+  const stale = () => {
+    const found = Object.keys(REMOVED_HOOKS).filter((attribute) => button.hasAttribute(attribute))
+    for (const attribute of found) {
+      const [local, event] = REMOVED_HOOKS[attribute]
+      host.console.error(`[hold:${id()}] ${attribute} (the ${local}: local) is no longer evaluated; ` +
+                         `answer ${event} instead. The hold is refused.`)
+    }
+    return found.length > 0
   }
 
   return {
-    // Refused by the scope's `submitting`, by the guard string, or by a
-    // hold-button:guard listener. A guard string that cannot be evaluated
-    // refuses: the caller asked for a check that did not run.
+    // Refused by a removed hook, by the scope's `submitting`, or by a
+    // hold-button:guard listener.
     guard() {
-      const found = host.Alpine ? scope() : null
+      if (stale()) return false
+      const found = host.Alpine ? button.closest("[x-data]") : null
       if (found) {
         const data = host.Alpine.$data(found)
         if (data && data.submitting) return false
       }
-      const expression = button.dataset.guard
-      if (expression) {
-        if (!found) { warn("guard: no Alpine scope to evaluate it in; the hold is refused"); return false }
-        if (!evaluate(host.Alpine, found, expression)) return false
-      }
       return !fire("guard").defaultPrevented
     },
 
     started() {
-      const expression = button.dataset.onHoldStart
-      const found = expression ? scopeFor("on_hold_start") : null
-      if (found) {
-        try { evaluate(host.Alpine, found, expression) } catch (error) { fail("on_hold_start threw", error) }
-      }
       fire("start")
     },
 
-    // True unless the validate string or a hold-button:validate listener says
-    // no. Rejects when either fails, which aborts the hold.
+    // True unless a hold-button:validate listener says no. Rejects when one
+    // fails, which aborts the hold.
     validate() {
       const answers = []
-      const expression = button.dataset.validate
-      if (expression) {
-        const found = scopeFor("validate")
-        if (found) answers.push(evaluateAsync(host.Alpine, host, found, expression))
-      }
       fire("validate", { waitUntil: (answer) => { answers.push(answer) } })
       return Promise.all(answers).then((all) => all.every(Boolean))
     },
 
-    // True when the early action ran, or a hold-button:early listener took
-    // the action over.
+    // True when a hold-button:early listener took the action over.
     early() {
-      let taken = false
-      const expression = button.dataset.earlyAction
-      const found = expression ? scopeFor("early_action") : null
-      if (found) {
-        const guard = button.dataset.earlyActionGuard
-        if (!guard || evaluate(host.Alpine, found, guard)) {
-          taken = true
-          try { evaluate(host.Alpine, found, expression) } catch (error) { fail("early_action threw", error) }
-        }
-      }
-      return fire("early").defaultPrevented || taken
+      return fire("early").defaultPrevented
     },
 
-    // True when a caller owns the button's state from here. A string
-    // on_success runs SUCCESS_SETTLE_MS later, with the button still in its
-    // holding state; if it throws, the button shows its success face.
+    // True when a listener owns the button's state from here.
     completed() {
-      const event = fire("success")
-      const expression = button.dataset.onSuccess
-      if (!expression) return event.defaultPrevented
-
-      host.setTimeout(() => {
-        try {
-          const found = scopeFor("on_success")
-          if (found) evaluate(host.Alpine, found, expression)
-        } catch (error) {
-          fail("on_success threw", error)
-          button.classList.remove("process")
-          button.classList.add("success")
-        }
-      }, SUCCESS_SETTLE_MS)
-      return true
+      return fire("success").defaultPrevented
     }
   }
 }

data/app/views/layouts/_navbar.html.erb

@@ -5,6 +5,9 @@
       balance_html    — raw HTML for balance display (passed through to _user_nav)
       extra_icons_html — raw HTML for extra icon buttons (passed through to _user_nav)
       show_logout_link — boolean, show "Log out" link in user nav (passed through to _user_nav)
+      brand_heading   — boolean, draw the brand title as the page's h1 (default: true).
+                        Pass false on a page that carries its own h1: the brand is
+                        drawn as a div with the same classes and contents.
 %>
 <% show_user = local_assigns.fetch(:show_logged_in, logged_in?) %>
 <% is_preview = local_assigns.fetch(:preview, false) %>
@@ -19,6 +22,7 @@
 <% balance_html = local_assigns.fetch(:balance_html, nil) %>
 <% extra_icons_html = local_assigns.fetch(:extra_icons_html, nil) %>
 <% show_logout_link = local_assigns.fetch(:show_logout_link, false) %>
+<% brand_tag = local_assigns.fetch(:brand_heading, true) ? "h1" : "div" %>
 <%# Out-of-the-box navigation (engine 0.30): when the host declares
     Studio.sidebar_sections, the navbar mounts the link-sidebar trigger in its
     icon rails and renders the slide-out panels after the header. With no
@@ -150,7 +154,7 @@
               overflow that has to be clipped belongs to each word's own box —
               `truncate` on the h1 would clip the flex CONTAINER and leave the
               spans drawing outside it, which is the bug rather than the fix. %>
-          <h1 class="nav-title font-extrabold text-heading tracking-tight min-w-0"><span class="truncate"><%= prefix %></span><span class="text-primary truncate"><%= last_word %></span></h1>
+          <<%= brand_tag %> class="nav-title font-extrabold text-heading tracking-tight min-w-0"><span class="truncate"><%= prefix %></span><span class="text-primary truncate"><%= last_word %></span></<%= brand_tag %>>
         <% end %>
         <%# Desktop nav — Studio.navbar_links %>
         <nav class="hidden md:flex items-center gap-4"<%= ' aria-label="Main"'.html_safe if navbar_links.any? %>>

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

@@ -20,11 +20,9 @@
     hold-button:success   at the full duration; preventDefault() leaves the
                           button's state to the listener
 
-  The JS-expression locals below (guard, on_success, validate, early_action,
-  early_action_guard, on_hold_start) still work: they travel as data-*
-  attributes and are evaluated against the surrounding x-data scope, with `d`
-  and `data` aliased to its data. They stay while a consumer passes them;
-  write new call sites against the events.
+  It takes no JavaScript: the guard, on_hold_start, validate, early_action,
+  early_action_guard and on_success locals are removed, and passing one raises
+  (Studio::HoldButton). Answer the event instead.
 
   Locals:
     default_text       - Button label in idle state (default: "Hold to Confirm")
@@ -32,21 +30,10 @@
     success_text       - Text shown on completion (default: "Confirmed!")
     duration           - Hold duration in ms (default: 2000)
     hold_id            - Unique ID for this button instance (default: "hold")
-    guard              - JS expression that must be truthy to allow hold (default: none = always allow)
-    on_success         - JS expression executed on successful hold (default: none)
-    validate           - JS expression returning Promise<boolean>, called at validate_at ms (default: none)
-    validate_at        - ms into the hold at which validation runs: the validate
-                         string and the hold-button:validate event (default: 750)
-    early_action       - JS expression executed early (for Web3 users) (default: none)
-    early_action_at    - ms into the hold at which the early action runs: the
-                         early_action string and the hold-button:early event
-                         (default: 1500)
-    early_action_guard - JS expression that must be truthy for early action (default: none)
-    on_hold_start      - JS expression executed the instant a hold BEGINS, after
-                         the guard/submitting checks pass (default: none). Used to
-                         kick off work that should run in parallel with the hold
-                         (e.g. the board's authoritative funding pre-check fetch,
-                         resolved by the time the hold completes ~2s later).
+    validate_at        - ms into the hold at which hold-button:validate is
+                         dispatched (default: 750)
+    early_action_at    - ms into the hold at which hold-button:early is
+                         dispatched (default: 1500)
     fizz               - Render the fizz particle layer (default: true). Pass
                          false for a flat button. Specimens: /admin/style.
     fizz_level         - :lively (default) or :calm. Lively rests at a full
@@ -69,20 +56,15 @@
                          the six picked teams' light / dark / alt colors onto
                          --fizz-c-1..18, three per zone in pick order.
 %>
+<% Studio::HoldButton.refuse_removed_locals!(local_assigns) %>
 <% default_text       ||= "Hold to Confirm" %>
 <% hold_text          ||= "Almost there..." %>
 <% success_text       ||= "Confirmed!" %>
 <% error_text         ||= "Entry Blocked" %>
 <% duration           ||= 2000 %>
 <% hold_id            ||= "hold" %>
-<% guard              ||= nil %>
-<% on_success         ||= nil %>
-<% validate           ||= nil %>
 <% validate_at        ||= 750 %>
-<% early_action       ||= nil %>
 <% early_action_at    ||= 1500 %>
-<% early_action_guard ||= nil %>
-<% on_hold_start      ||= nil %>
 <%# `fizz ||= true` would coerce an explicit `fizz: false` back to true, so
     read the key instead of the value. %>
 <% fizz = local_assigns.key?(:fizz) ? local_assigns[:fizz] : true %>
@@ -125,12 +107,8 @@
 <button class="hold-btn"
         data-hold-id="<%= hold_id %>"
         data-duration="<%= duration %>"
-        <% if guard              %>data-guard="<%= guard %>"<% end %>
-        <% if on_hold_start      %>data-on-hold-start="<%= on_hold_start %>"<% end %>
-        <% if on_success         %>data-on-success="<%= on_success %>"<% end %>
-        <% if validate           %>data-validate="<%= validate %>" data-validate-at="<%= validate_at %>"<% elsif local_assigns.key?(:validate_at) %>data-validate-at="<%= validate_at %>"<% end %>
-        <% if early_action       %>data-early-action="<%= early_action %>" data-early-action-at="<%= early_action_at %>"<% elsif local_assigns.key?(:early_action_at) %>data-early-action-at="<%= early_action_at %>"<% end %>
-        <% if early_action_guard %>data-early-action-guard="<%= early_action_guard %>"<% end %>
+        <% if local_assigns.key?(:validate_at)     %>data-validate-at="<%= validate_at %>"<% end %>
+        <% if local_assigns.key?(:early_action_at) %>data-early-action-at="<%= early_action_at %>"<% end %>
         style="--duration: <%= duration %>ms"
         data-studio-action="mousedown->hold-button#start mouseup->hold-button#end mouseleave->hold-button#end touchstart->hold-button#press touchend->hold-button#end touchcancel->hold-button#end">
   <div class="hold-icon">

data/lib/studio/hold_button.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Studio
+  # The locals studio/_hold_button no longer takes. Each carried JavaScript as a
+  # string for the browser to evaluate; a page answers the event instead.
+  module HoldButton
+    # Local => the event that answers now. The browser's half of this table is
+    # REMOVED_HOOKS in app/javascript/studio/hold_button_hooks.js.
+    REMOVED_LOCALS = {
+      guard: "hold-button:guard",
+      on_hold_start: "hold-button:start",
+      validate: "hold-button:validate",
+      early_action: "hold-button:early",
+      early_action_guard: "hold-button:early",
+      on_success: "hold-button:success"
+    }.freeze
+
+    module_function
+
+    # Raises when a caller passes a removed local, in every environment: a
+    # button rendered without the check its caller asked for must not reach a
+    # page.
+    def refuse_removed_locals!(locals)
+      passed = REMOVED_LOCALS.select { |name, _| !locals[name].nil? }
+      return if passed.empty?
+
+      named = passed.map { |name, event| "#{name}: (answer #{event})" }.join(", ")
+      raise ArgumentError, "studio/hold_button no longer evaluates JavaScript-string locals. Remove #{named}. " \
+                           "The events are listed at the top of app/views/studio/_hold_button.html.erb."
+    end
+  end
+end

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.100.0.rc1"
+  VERSION = "0.101.0.rc1"
 end

data/lib/studio.rb

@@ -26,6 +26,7 @@ require "studio/theme_resolver"
 require "studio/ui_primitives"
 require "studio/js_literal"
 require "studio/js_identifier"
+require "studio/hold_button"
 require "studio/partial_block"
 require "studio/sidebar_sections"
 require "studio/site_footer"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.100.0.rc1
+  version: 0.101.0.rc1
 platform: ruby
 authors:
 - Alex McRitchie
@@ -733,6 +733,7 @@ files:
 - lib/studio/geo.rb
 - lib/studio/geo/countries.rb
 - lib/studio/geo/lookup.rb
+- lib/studio/hold_button.rb
 - lib/studio/host_schema.rb
 - lib/studio/image_cache.rb
 - lib/studio/ip_locations.rb