studio-engine 0.96.2 → 0.97.0.rc1

data/app/views/style/_theme.html.erb

@@ -7,6 +7,8 @@
      itself on save), THIS section intercepts Save + Regenerate and submits them
      via fetch — the page never navigates away, the live preview stays put, and
      the outcome is a toast. The standalone page's own redirect is unchanged.
+     The editor is studio/theme_editor's dsThemeEditor factory, which
+     studio/alpine_shims publishes.
 
      Rendered in two contexts:
        * live in the host app (StyleController sets @theme_setting + @theme_defaults)
@@ -168,56 +170,4 @@
       </div>
     </div>
   </div>
-
-  <script>
-    // Live-preview editor for the Style-guide Theme section. Seeded from the
-    // server-resolved role colors; updates the themeable role vars on the
-    // document as you type so every specimen on the page restyles instantly.
-    // The <input name> fields still carry the real values.
-    //
-    // Save-in-place: Save + Regenerate submit via fetch and stay on THIS page —
-    // preventDefault stops the browser navigating to /admin/theme (which is what
-    // bounced the operator off this section), the live preview persists, and the
-    // outcome is a toast (the engine's shared _flash toast primitive). The
-    // <form> POST still degrades gracefully if Alpine never loads.
-    function dsThemeEditor(seed) {
-      return {
-        colors: Object.assign({ primary: '#000', dark: '#0f172a', light: '#ffffff',
-                                success: '#367E3A', warning: '#FF7C47', danger: '#EF4444',
-                                accent: '#6366F1' }, seed || {}),
-        saving: false,
-        updatePreview() {
-          var d = document.documentElement.style;
-          d.setProperty('--color-cta', this.colors.primary);
-          d.setProperty('--color-cta-fill', this.colors.primary);
-          if (this.colors.success) d.setProperty('--color-success', this.colors.success);
-          if (this.colors.warning) { d.setProperty('--color-warning', this.colors.warning); d.setProperty('--color-warning-fill', this.colors.warning); }
-          if (this.colors.danger)  { d.setProperty('--color-danger', this.colors.danger);   d.setProperty('--color-danger-fill', this.colors.danger); }
-        },
-        persist(form, label) {
-          if (this.saving) return;
-          this.saving = true;
-          // Send the form's REAL method (the editor carries _method=patch) so we
-          // never depend on Rack::MethodOverride parsing a multipart fetch body.
-          var data = new FormData(form);
-          var override = data.get('_method');
-          var method = override ? String(override).toUpperCase() : 'POST';
-          if (override) data.delete('_method');
-          fetch(form.action, { method: method, body: data })
-            .then(function (res) {
-              if (!res.ok) throw new Error('HTTP ' + res.status);
-              return res;
-            })
-            .then((function () { this.toast('notice', label, 'Saved in place — the page stayed put.'); }).bind(this))
-            .catch((function (err) { this.toast('alert', 'Save failed', String((err && err.message) || err)); }).bind(this))
-            .finally((function () { this.saving = false; }).bind(this));
-        },
-        toast(type, title, message) {
-          window.dispatchEvent(new CustomEvent('toast', { detail: { type: type, title: title, message: message } }));
-        },
-        saveTheme(e) { this.persist(e.target, 'Theme saved'); },
-        regenerate(e) { this.persist(e.target, 'Theme cache cleared'); }
-      };
-    }
-  </script>
 </section>

data/app/views/theme_settings/edit.html.erb

@@ -1,4 +1,6 @@
-<div class="max-w-5xl mx-auto px-4 py-8" x-data="themeEditor()">
+<%# The editor is studio/theme_editor's themeEditor factory, seeded with the
+    server-resolved role colours. studio/alpine_shims publishes it. %>
+<div class="max-w-5xl mx-auto px-4 py-8" x-data="themeEditor(<%= @theme_setting.resolved_colors.to_json %>)">
   <div class="flex items-center justify-between mb-8">
     <h1 class="text-2xl font-bold text-heading">Theme</h1>
     <div class="flex gap-3">
@@ -300,84 +302,3 @@
 
   </div>
 </div>
-
-<script>
-  function themeEditor() {
-    return {
-      colors: {
-        primary: '<%= @theme_setting.resolved_colors[:primary] %>',
-        success: '<%= @theme_setting.resolved_colors[:success] %>',
-        accent:  '<%= @theme_setting.resolved_colors[:accent] %>',
-        warning: '<%= @theme_setting.resolved_colors[:warning] %>',
-        danger:  '<%= @theme_setting.resolved_colors[:danger] %>',
-        dark:    '<%= @theme_setting.resolved_colors[:dark] %>',
-        light:   '<%= @theme_setting.resolved_colors[:light] %>'
-      },
-
-      resetColor(role, defaultVal) {
-        this.colors[role] = defaultVal;
-        this.updatePreview();
-      },
-
-      normalizeHex(role) {
-        let val = this.colors[role].trim();
-        if (!val.startsWith('#')) val = '#' + val;
-        if (/^#[0-9a-fA-F]{3}$/.test(val)) {
-          val = '#' + val[1] + val[1] + val[2] + val[2] + val[3] + val[3];
-        }
-        if (/^#[0-9a-fA-F]{6}$/.test(val)) {
-          this.colors[role] = val;
-        }
-        this.updatePreview();
-      },
-
-      updatePreview() {
-        // Update live CSS vars on the document for immediate feedback
-        document.documentElement.style.setProperty('--color-cta', this.colors.primary);
-        document.documentElement.style.setProperty('--color-success', this.colors.success);
-        document.documentElement.style.setProperty('--color-warning', this.colors.warning || '#FF7C47');
-        document.documentElement.style.setProperty('--color-danger', this.colors.danger || '#EF4444');
-        // btn-warning/btn-danger paint --color-<role>-fill first (the resolver
-        // emits it for the engine defaults), so a typed colour must set it too
-        // or the specimens keep the default fill. Cleared: drop the override.
-        ['warning', 'danger'].forEach((role) => {
-          if (this.colors[role]) document.documentElement.style.setProperty(`--color-${role}-fill`, this.colors[role]);
-          else document.documentElement.style.removeProperty(`--color-${role}-fill`);
-        });
-      },
-
-      darkPreviewStyle() {
-        return { backgroundColor: this.colors.dark, borderRadius: '0' };
-      },
-
-      darkSurfaceStyle() {
-        return {
-          backgroundColor: this.lightenColor(this.colors.dark, 0.3),
-          border: '1px solid rgba(255,255,255,0.1)'
-        };
-      },
-
-      lightPreviewStyle() {
-        return { backgroundColor: this.colors.light, borderRadius: '0' };
-      },
-
-      lightSurfaceStyle() {
-        return {
-          backgroundColor: '#ffffff',
-          border: '1px solid #e2e8f0'
-        };
-      },
-
-      lightenColor(hex, amount) {
-        hex = hex.replace('#', '');
-        const r = parseInt(hex.substring(0, 2), 16);
-        const g = parseInt(hex.substring(2, 4), 16);
-        const b = parseInt(hex.substring(4, 6), 16);
-        const nr = Math.round(r + (255 - r) * amount);
-        const ng = Math.round(g + (255 - g) * amount);
-        const nb = Math.round(b + (255 - b) * amount);
-        return '#' + [nr, ng, nb].map(c => c.toString(16).padStart(2, '0')).join('');
-      }
-    };
-  }
-</script>

data/config/importmap.rb

@@ -10,6 +10,11 @@
 # "@hotwired/stimulus" is the engine's Stimulus. A host that pins its own
 # (stimulus-rails) wins, and the engine's controllers run on that copy.
 #
+# The vendored SortableJS is pinned the same way, as "sortablejs", and never
+# preloaded: studio/board imports it dynamically, on a page that drags. The file
+# is the classic build (app/assets/javascripts/studio/sortable.js), which assigns
+# window.Sortable 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
@@ -22,3 +27,4 @@ Studio::Engine.javascript_module_logical_paths.each do |logical_path|
   pin name, to: logical_path, preload: boot.include?(name)
 end
 pin "@hotwired/stimulus", to: "studio/vendor/stimulus.js", preload: true
+pin "sortablejs", to: "studio/sortable.js", preload: false

data/docs/BOOKING.md

@@ -297,11 +297,12 @@ An app that enforces a policy must allow the frame:
 |-----------|--------|-----|
 | `frame-src` | `https://calendar.google.com` | The booking frame and the popup |
 
-The primitives' own `<style>` and `<script>` blocks are inline and carry no
-nonce, like the rest of the engine's partials, and a cropped wrapper carries its
-numbers in an inline `style` attribute. A policy that forbids inline script or
-style needs `'unsafe-inline'` for them (or hashes), exactly as it does for the
-engine's head partial today.
+The primitives carry no inline script: their behaviour is the same-origin
+module `studio/booking`, started by the `booking` controller on the frame's
+wrapper and the popup's dialog. Their own `<style>` block is inline and carries
+no nonce, and a cropped wrapper carries its numbers in an inline `style`
+attribute. A policy that forbids inline style needs `'unsafe-inline'` in
+`style-src` for them (or hashes).
 
 ## Limits
 

data/docs/SITE_FOOTER.md

@@ -319,14 +319,19 @@ The frame, its crop, the popup, the `/schedule` page, an app's own booking page
 
 ## What it costs a page
 
-- The footer's CSS and scripts are inline, rendered once per page, and scoped
-  (`.ftr-*`, `.booking-*`). They read the theme's custom properties with a
+- The footer's CSS is inline, rendered once per page, and scoped (`.ftr-*`,
+  `.booking-*`). They read the theme's custom properties with a
   fallback beside each, so the footer lays out the same in an app whose Tailwind
   build has never seen these views. Do not restyle it with utilities that your
   build may not emit.
-- A page with no address never names Leaflet: the map's styles and its mount
-  script are rendered only with a map (`studio/site_footer/_map_assets`). A page
-  with no `booking_url` carries no booking script.
+- The map and the booking primitives run from ES modules (`studio/footer_map`,
+  `studio/booking`), each behind a controller the engine registers lazily: the
+  module is fetched only by a page that renders the element naming it
+  (`data-studio-controller="footer-map"` on the map, `"booking"` on the frame's
+  wrapper and the popup's dialog).
+- A page with no address never names Leaflet: the map's styles are rendered
+  only with a map (`studio/site_footer/_map_assets`), and nothing fetches its
+  module. A page with no `booking_url` fetches no booking module.
 - A facts callable that raises costs the footer, not the page: in production the
   error is logged once and the page renders without a footer. In development and
   test it raises.
@@ -370,18 +375,17 @@ origins (the booking frame's `frame-src` is in [`BOOKING.md`](BOOKING.md#content
 Leaflet itself is same-origin (`script-src 'self'`, `style-src 'self'`), since it
 is served from the app's own assets.
 
-The footer's own `<style>` and `<script>` blocks are
-inline and carry no nonce, like the rest of the engine's partials, and Leaflet
-positions its tiles with inline `style` attributes. A policy that forbids inline
-script or style needs `'unsafe-inline'` for them (or hashes), exactly as it does
-for the engine's head partial today.
+The footer carries no inline script: its behaviour is same-origin modules.
+Its own `<style>` blocks are inline and carry no nonce, and Leaflet positions
+its tiles with inline `style` attributes. A policy that forbids inline style
+needs `'unsafe-inline'` in `style-src` for them (or hashes).
 
 ## Coexisting with an app's own copy
 
 An app that still renders a local footer partial uses the same
-`data-footer-map` attribute. The engine's script keeps out of its way: its guard
+`data-footer-map` attribute. The engine's module keeps out of its way: its guard
 is an engine name (`__studioFooterMapsArmed`), and it acts only on
-engine-rendered maps, which carry `data-leaflet-js`. The booking scripts follow
+engine-rendered maps, which carry `data-leaflet-js`. The booking module follows
 the same rule ([`BOOKING.md`](BOOKING.md#coexisting-with-an-apps-own-copy)).
 
 ## Markup hooks

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.96.2"
+  VERSION = "0.97.0.rc1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.96.2
+  version: 0.97.0.rc1
 platform: ruby
 authors:
 - Alex McRitchie
@@ -412,13 +412,39 @@ files:
 - app/javascript/studio/alpine_shims.js
 - app/javascript/studio/alpine_stores.js
 - app/javascript/studio/application.js
+- app/javascript/studio/board.js
+- app/javascript/studio/booking.js
+- app/javascript/studio/controllers/board_controller.js
+- app/javascript/studio/controllers/booking_controller.js
+- app/javascript/studio/controllers/email_banner_scale_controller.js
+- app/javascript/studio/controllers/footer_map_controller.js
+- app/javascript/studio/controllers/geo_settings_controller.js
+- app/javascript/studio/controllers/hold_button_controller.js
+- app/javascript/studio/controllers/link_preview_card_controller.js
+- app/javascript/studio/controllers/link_sidebar_controller.js
 - app/javascript/studio/controllers/modal_host_controller.js
 - app/javascript/studio/controllers/nav_collapse_controller.js
+- app/javascript/studio/controllers/survey_controller.js
+- app/javascript/studio/controllers/toast_controller.js
+- app/javascript/studio/email_banner.js
+- app/javascript/studio/email_banner_scale.js
+- app/javascript/studio/footer_map.js
+- app/javascript/studio/geo_settings.js
 - app/javascript/studio/head_chrome.js
+- app/javascript/studio/hold_button.js
+- app/javascript/studio/hold_button_hooks.js
+- app/javascript/studio/lazy_controllers.js
+- app/javascript/studio/leveling_activity.js
+- app/javascript/studio/link_preview_card.js
+- app/javascript/studio/link_sidebar.js
 - app/javascript/studio/local_path.js
 - app/javascript/studio/modal_host.js
 - app/javascript/studio/nav_collapse.js
 - app/javascript/studio/pinned_stack.js
+- app/javascript/studio/stimulus.js
+- app/javascript/studio/survey.js
+- app/javascript/studio/theme_editor.js
+- app/javascript/studio/toast.js
 - app/javascript/studio/vendor/stimulus.js
 - app/jobs/error_log_cleanup_job.rb
 - app/jobs/studio/email_delivery_job.rb
@@ -488,6 +514,7 @@ files:
 - app/views/studio/_cropper_assets.html.erb
 - app/views/studio/_fizz_layer.html.erb
 - app/views/studio/_hold_button.html.erb
+- app/views/studio/_hold_button_guard.html.erb
 - app/views/studio/_leveling_activity_assets.html.erb
 - app/views/studio/_session_stamp.html.erb
 - app/views/studio/admin_models/_arenas_table.html.erb
@@ -514,7 +541,6 @@ files:
 - app/views/studio/emails/_banner_preview.html.erb
 - app/views/studio/emails/_banner_scale.html.erb
 - app/views/studio/emails/_recipient_picker.html.erb
-- app/views/studio/emails/_recipient_repaint.html.erb
 - app/views/studio/emails/_row.html.erb
 - app/views/studio/emails/index.html.erb
 - app/views/studio/emails/orphan.html.erb
@@ -601,7 +627,6 @@ files:
 - app/views/studio/site_footer/_social_icon.html.erb
 - app/views/studio/site_identities/edit.html.erb
 - app/views/studio/surveys/_question.html.erb
-- app/views/studio/surveys/_script.html.erb
 - app/views/studio/surveys/_styles.html.erb
 - app/views/studio/surveys/not_found.html.erb
 - app/views/studio/surveys/show.html.erb

data/app/views/studio/emails/_recipient_repaint.html.erb

@@ -1,122 +0,0 @@
-<%# Repaints EVERY row on the emails list when the example recipient changes.
-
-    The list shows each email's banner and subject as they would arrive. Both are
-    per-recipient — the banner greets by first name and the subject may too — so
-    a list rendered for one person is a list of half-truths about everyone else.
-    Changing the selection has to repaint all of them.
-
-    WHY THE TEMPLATES RIDE ON THE ROW
-    Each row carries its own header / fallback / subject templates as data
-    attributes, and this reads them from the DOM. The alternative was a second
-    JSON payload listing every email, which would have to be kept in step with
-    the rows themselves — and a row whose payload entry went missing would
-    silently stop repainting while still looking correct for whoever was selected
-    at page load.
-
-    The placeholder rule is the same one Studio::Banner applies server-side, and
-    the same one the detail page's editor applies. It is small, and it is pinned
-    on both sides. If they disagree, the server is right. %>
-<script>
-  (function () {
-    function recipients(config) {
-      return {
-        targets: config.targets || [],
-        targetId: config.targetId,
-        pickerOpen: false,
-
-        init() {
-          this.paint();
-          this.$watch("targetId", () => this.paint());
-        },
-
-        target() {
-          return this.targets.find((t) => t.id === this.targetId) || this.targets[0] || {};
-        },
-
-        firstName() {
-          return (this.target().name || "").trim().split(/\s+/)[0] || "";
-        },
-
-        resolve(template, fallback) {
-          var first = this.firstName();
-          var app = config.appName || "";
-          var text = (template || "").replace(/\{app\}/g, app);
-          if (first) return text.replace(/\{name\}/g, first);
-          if (text.indexOf("{name}") !== -1) return (fallback || "").replace(/\{app\}/g, app);
-          return text;
-        },
-
-        // A subject has no second field for the nameless case, so an unresolved
-        // placeholder is removed along with the punctuation holding it — the
-        // same two passes Studio::Banner.interpolate makes, so "Sign in, {name}"
-        // reads "Sign in" here exactly as it would in an inbox.
-        resolveSubject(template) {
-          var app = config.appName || "";
-          var text = (template || "").replace(/\{app\}/g, app);
-          var first = this.firstName();
-          if (first) return text.replace(/\{name\}/g, first);
-          return text.replace(/[,;:—-]?\s*\{name\}/g, "")
-                     .replace(/^\s*[,;:—-]\s*/, "")
-                     .replace(/\s+/g, " ")
-                     .trim();
-        },
-
-        // A row's banner lives in an IFRAME — the email's table is its own
-        // document so it cannot nest rows inside the list. Same-origin srcdoc,
-        // so its nodes are reachable; contentDocument is null until the frame
-        // has parsed, which is why the load listener is wired as well as the
-        // immediate attempt.
-        bannerNode(row, selector) {
-          var frame = row.querySelector("iframe[data-email-banner-preview]");
-          if (frame) {
-            try { return frame.contentDocument && frame.contentDocument.querySelector(selector); }
-            catch (_) { return null; }
-          }
-          return row.querySelector(selector);
-        },
-
-        paintRow(row) {
-          var header = this.bannerNode(row, "[data-banner-header]");
-          var subject = row.querySelector("[data-row-subject]");
-          if (header) {
-            header.textContent = this.resolve(row.dataset.header, row.dataset.headerFallback);
-          }
-          if (subject) subject.textContent = this.resolveSubject(row.dataset.subject);
-        },
-
-        paint() {
-          var self = this;
-          this.$root.querySelectorAll("[data-email-row]").forEach(function (row) {
-            self.paintRow(row);
-            var frame = row.querySelector("iframe[data-email-banner-preview]");
-            if (frame && !frame.dataset.repaintBound) {
-              frame.dataset.repaintBound = "1";
-              frame.addEventListener("load", function () { self.paintRow(row); });
-            }
-          });
-        },
-
-        // Anything interactive keeps its own behaviour; everything else opens
-        // the email. Without the closest() guard, clicking Upload would both
-        // open the cropper and navigate away from it.
-        openRow(event, row) {
-          // The listener sits on the tbody, so a click can land between rows and
-          // arrive with no row at all.
-          if (!row) return;
-          if (event.target.closest("a, button, input, label, form")) return;
-          var path = row.dataset.emailPath;
-          if (path) window.location = path;
-        }
-      };
-    }
-
-    window.emailRecipients = recipients;
-    if (typeof Alpine !== "undefined") {
-      Alpine.data("emailRecipients", recipients);
-    } else {
-      document.addEventListener("alpine:init", function () {
-        Alpine.data("emailRecipients", recipients);
-      });
-    }
-  })();
-</script>