studio-engine 0.97.0 → 0.98.0.rc1

data/app/views/studio/modals/_image_upload.html.erb

@@ -1,326 +1,13 @@
 <%#
-  Image-upload client behavior for the crop-photo + saving modals.
+  The image-upload behaviour for the crop-photo and saving modals is two
+  modules, published on every page by studio/alpine_scopes:
 
-  Ships three window factories inline (engine convention — see _head /
-  _flash) so they're defined before Alpine processes any x-data that
-  references them:
+    cropPhotoModal()          studio/cropper: x-data for studio/modals/_crop_photo
+    imageUploadHost()         studio/image_upload: a crop-then-save uploader
+    submitFormWithProgress()  studio/image_upload: a Turbo submit behind the
+                              saving card, with a toast at the end
 
-    cropPhotoModal()          x-data for studio/modals/_crop_photo
-    submitFormWithProgress()  loading card + toast around a Turbo submit
-    imageUploadHost()         host for crop-then-immediate-save uploaders
-                              (x-data in the consumer's upload views)
-
-  Rendered once by the modal host. cropper.js itself loads via
+  THIS PARTIAL RENDERS NOTHING. It stays so an app that renders it by name gets
+  no missing-template error. Cropper.js itself loads through
   studio/_cropper_assets on the pages that can open the cropper.
 %>
-<script>
-  // === window.cropPhotoModal — x-data for studio/modals/_crop_photo =========
-  //
-  // The modal hands the cropped Blob back to its opener via the
-  // 'crop-photo-confirmed' window event — the opener's host owns the upload.
-  // The image gets IN two ways:
-  //   * imageUrl prop — the opener already picked a file and passes the data
-  //     URL (avatar uploader / avatar_cropper); the modal jumps to the cropper.
-  //   * no imageUrl — the modal itself is the picker (click/drag-drop empty
-  //     state), then crops (e.g. a banner editor's open()).
-  function cropPhotoModal(opts) {
-    opts = opts || {};
-    return {
-      // Which Alpine store this modal is mounted in. Defaults to 'modals' (the
-      // shared host); the living style guide passes { store: 'dsModals' } so the
-      // crop-photo modal opens on its page-scoped host without colliding with
-      // the app-level shared host.
-      _storeName: opts.store || 'modals',
-      cropper: null,
-      imageUrl: null,
-      fromParent: false,
-      dragging: false,
-      error: null,
-      // Configurable crop output. Defaults = avatar (square 256px, transparent).
-      // Callers override per-use via the modal props, e.g.
-      //   Alpine.store('modals').open('crop-photo',
-      //     { imageUrl, aspectRatio: 3, maxWidth: 900, maxHeight: 300 })
-      aspectRatio: 1,
-      maxWidth: 256,
-      maxHeight: 256,
-      transparent: true,
-      // GIFS BYPASS THE CROPPER ENTIRELY when allowed. They cannot go through
-      // it: confirm() paints the crop onto a canvas and calls toBlob(...,
-      // "image/png"), which keeps frame one and throws the animation away —
-      // silently, with a perfectly good-looking still as the result. So an
-      // allowed GIF is passed through as its ORIGINAL BYTES, uncropped, and the
-      // aspect it was authored at is the aspect that ships.
-      //
-      // Off by default because most upload sites (avatars, square thumbnails)
-      // genuinely want the crop, and an un-cropped image there is a bug.
-      allowGifs: false,
-      autoCropArea: 0.9,
-      // dispatch: keep the modal open after confirm so the opener's host can run
-      // its own processing -> success flow (it replaces the modal). When false
-      // (fromParent, e.g. avatar_cropper) the modal closes itself after confirm.
-      dispatch: false,
-
-      init() {
-        var current = this.$store[this._storeName].current();
-        var props = (current && current.props) || {};
-        if (props.aspectRatio) this.aspectRatio = props.aspectRatio;
-        if (props.maxWidth) this.maxWidth = props.maxWidth;
-        if (props.maxHeight) this.maxHeight = props.maxHeight;
-        if (typeof props.transparent === "boolean") this.transparent = props.transparent;
-        if (typeof props.allowGifs === "boolean") this.allowGifs = props.allowGifs;
-        if (props.dispatch) this.dispatch = true;
-        // Carried through untouched and echoed back on confirm, so the host that
-        // OPENED the cropper is the only one that acts on the result.
-        this.owner = props.owner || null;
-        if (props.autoCropArea) this.autoCropArea = props.autoCropArea;
-        if (props.imageUrl) {
-          this.fromParent = true;
-          this.imageUrl = props.imageUrl;
-          this.mountCropper();
-        }
-      },
-
-      destroy() {
-        if (this.cropper) { this.cropper.destroy(); this.cropper = null; }
-      },
-
-      mountCropper() {
-        var self = this;
-        this.$nextTick(function () {
-          if (typeof Cropper === "undefined") return;
-          if (self.cropper) { self.cropper.destroy(); self.cropper = null; }
-          self.cropper = new Cropper(self.$refs.cropImage, {
-            aspectRatio: self.aspectRatio, viewMode: 1, dragMode: "move",
-            autoCropArea: self.autoCropArea, cropBoxResizable: true,
-            cropBoxMovable: true, background: false, guides: true
-          });
-          // Cropping in progress — lock the modal (no click-outside / escape) so
-          // an accidental click doesn't discard the crop. Cancel still works.
-          // Also reflect the crop sub-state onto the store entry (cropReady) so
-          // an external observer can tell the picker state apart from the crop
-          // state — the modal's own `imageUrl` is LOCAL x-data and never lands on
-          // props, so props alone can't distinguish them. The living style guide
-          // reads this to move its active-card glow from the Image Upload card to
-          // the Crop Photo card the moment an image is loaded (picker -> cropper).
-          var cur = self.$store[self._storeName].current();
-          if (cur && cur.props) { cur.props.dismissible = false; cur.props.cropReady = true; }
-        });
-      },
-
-      readFile(file) {
-        if (!file) return;
-        if (!file.type || file.type.indexOf("image/") !== 0) {
-          this.error = "Please choose an image file.";
-          return;
-        }
-        var self = this;
-
-        if (this.isAnimatedCandidate(file)) {
-          if (!this.allowGifs) {
-            this.error = "GIFs aren't accepted here. Use a PNG, JPG or WebP.";
-            return;
-          }
-          this.error = null;
-          this.passThrough(file);
-          return;
-        }
-
-        var reader = new FileReader();
-        reader.onload = function (e) {
-          self.error = null;
-          self.imageUrl = e.target.result;
-          self.mountCropper();
-        };
-        reader.readAsDataURL(file);
-      },
-
-      // Type, not extension: a file renamed to .gif is still a PNG and belongs in
-      // the cropper, and a .GIF from a Windows machine is still a GIF.
-      isAnimatedCandidate(file) {
-        return (file.type || "").toLowerCase() === "image/gif";
-      },
-
-      // Hand the ORIGINAL file straight to the opener, no canvas in the path.
-      // Same event and the same owner token as a cropped confirm, so every host
-      // downstream is unchanged — the only difference is what is in the blob.
-      passThrough(file) {
-        try {
-          window.dispatchEvent(new CustomEvent("crop-photo-confirmed",
-                                               { detail: { blob: file, owner: this.owner || null,
-                                                           filename: file.name, uncropped: true } }));
-        } catch (_) {}
-        if (this.cropper) { this.cropper.destroy(); this.cropper = null; }
-        if (!this.dispatch) this.$store[this._storeName].close();
-      },
-
-      onFilePicked(event) {
-        var file = event.target.files[0];
-        event.target.value = "";
-        this.readFile(file);
-      },
-
-      onDrop(event) {
-        this.dragging = false;
-        var file = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0];
-        this.readFile(file);
-      },
-
-      cancel() {
-        if (this.cropper) { this.cropper.destroy(); this.cropper = null; }
-        this.$store[this._storeName].close();
-      },
-
-      confirm() {
-        if (!this.cropper) return;
-        var self = this;
-        // Cap WIDTH only. For a fixed-aspect crop the aspect already bounds the
-        // height (= width / aspectRatio); also passing maxHeight makes cropper.js
-        // downscale the whole SOURCE to fit maxHeight when the source is taller
-        // (a 1983x793 upload -> 500/793 ~= 0.63x), tanking fidelity. maxWidth
-        // alone keeps the crop at source resolution up to the cap.
-        var canvasOpts = { maxWidth: this.maxWidth, imageSmoothingQuality: "high" };
-        if (!this.transparent) canvasOpts.fillColor = "#ffffff";
-        var canvas = this.cropper.getCroppedCanvas(canvasOpts);
-        canvas.toBlob(function (blob) {
-          try {
-            // OWNER RIDES WITH THE BLOB. `crop-photo-confirmed` is a WINDOW event, so
-            // every imageUploadHost on the page hears it — and /admin/emails mounts
-            // one host PER ROW. Without an owner, one confirmed crop PATCHed every
-            // row's banner with the same image, destroying any app-owned banner
-            // already there; the FIRST upload an admin ever performed hit it, because
-            // the engine pre-registers two emails. `owner` is the token the opening
-            // host stamped on the crop props, echoed back untouched.
-            window.dispatchEvent(new CustomEvent("crop-photo-confirmed",
-                                                 { detail: { blob: blob, owner: self.owner || null } }));
-          } catch (_) {}
-          if (self.cropper) { self.cropper.destroy(); self.cropper = null; }
-          // dispatch mode: the opener's host owns the post-confirm flow
-          // (processing modal -> success toast), so don't pop the stack here.
-          // fromParent (no dispatch): close the modal now.
-          if (!self.dispatch) self.$store[self._storeName].close();
-        }, "image/png");
-      }
-    };
-  }
-  window.cropPhotoModal = cropPhotoModal;
-  if (typeof Alpine !== "undefined") {
-    Alpine.data("cropPhotoModal", cropPhotoModal);
-  } else {
-    document.addEventListener("alpine:init", function () { Alpine.data("cropPhotoModal", cropPhotoModal); });
-  }
-
-  // === window.submitFormWithProgress — loading card + toast for a Turbo submit
-  //
-  // Swaps in the 'saving' card while the form uploads, then closes it (held
-  // >= ~450ms so it doesn't flash) and toasts on completion. opts: { saving,
-  // success, successMessage, failure, failureMessage, dismissible (default
-  // false), toast (default true), store (Alpine store name, default "modals" —
-  // pass a page-scoped host's name, e.g. "emailModals") }.
-  window.submitFormWithProgress = function (form, opts) {
-    opts = opts || {};
-    var store = window.Alpine && Alpine.store(opts.store || "modals");
-    var hold = (window.StudioModals && window.StudioModals.holdAtLeast)
-      ? window.StudioModals.holdAtLeast(450)
-      : { then: function (cb) { cb(); } };
-    if (store) {
-      store.open("saving", { dismissible: opts.dismissible === true, title: opts.saving || "Saving…" }, { replace: true });
-    }
-    var onEnd = function (e) {
-      form.removeEventListener("turbo:submit-end", onEnd);
-      var ok = e.detail && e.detail.success;
-      hold.then(function () {
-        if (store) store.close();
-        if (opts.toast !== false) {
-          window.dispatchEvent(new CustomEvent("toast", { detail: {
-            type: ok ? "notice" : "alert",
-            title: ok ? (opts.success || "Saved") : (opts.failure || "Couldn't save"),
-            message: ok ? (opts.successMessage || "") : (opts.failureMessage || "Please try again.")
-          } }));
-        }
-      });
-    };
-    form.addEventListener("turbo:submit-end", onEnd);
-    form.requestSubmit();
-  };
-
-  // === window.imageUploadHost — x-data host for crop-then-immediate-save ======
-  //
-  // Two entry points feed the SHARED crop-photo modal in dispatch mode:
-  //   open()           — the modal itself is the click/drag-drop target (banner)
-  //   onFileSelected() — a native file picker hands the image in (avatar)
-  // Both dispatch the cropped Blob via 'crop-photo-confirmed'; applyCrop() drops
-  // it into the host's own hidden form input and submits immediately with a
-  // loading card + toast (submitFormWithProgress). opts = crop config
-  // (aspectRatio, maxWidth, maxHeight, transparent, autoCropArea) + save copy
-  // (saving, success, successMessage, failure, dismissible, toast, filename) +
-  // store (Alpine store name, default "modals"). Pass `store` when the crop and
-  // saving modals are mounted on a PAGE-SCOPED host rather than the app's shared
-  // one — /admin/emails does, so the uploader works even in a host app that
-  // renders no shared modal host at all.
-  window.imageUploadHost = function (opts) {
-    opts = opts || {};
-    var storeName = opts.store || "modals";
-    function cropProps(extra) {
-      var p = {
-        aspectRatio: opts.aspectRatio || 1,
-        transparent: opts.transparent !== false,
-        dispatch: true
-      };
-      if (opts.maxWidth) p.maxWidth = opts.maxWidth;
-      if (opts.maxHeight) p.maxHeight = opts.maxHeight;
-      if (opts.autoCropArea) p.autoCropArea = opts.autoCropArea;
-      if (typeof opts.allowGifs === "boolean") p.allowGifs = opts.allowGifs;
-      if (extra) { for (var k in extra) { p[k] = extra[k]; } }
-      return p;
-    }
-    // A token unique to THIS host instance. Many hosts can be mounted on one page
-    // (one per row on /admin/emails) and they all hear the same window event, so a
-    // confirm has to say WHICH host opened the cropper.
-    var ownerId = "iuh-" + (window.__studioImageUploadHostSeq = (window.__studioImageUploadHostSeq || 0) + 1);
-
-    return {
-      ownerId: ownerId,
-      // Modal-as-picker: the crop modal itself is the file picker / drop target.
-      open() {
-        if (!window.Alpine || !Alpine.store(storeName)) return;
-        Alpine.store(storeName).open("crop-photo", cropProps({ owner: ownerId }));
-      },
-      // The window-event guard: a confirm addressed to a DIFFERENT host is not ours
-      // to act on. An owner-LESS confirm still applies, so every existing
-      // single-host page keeps working unchanged.
-      onCropConfirmed(detail) {
-        if (!detail) return;
-        if (detail.owner && detail.owner !== ownerId) return;
-        // An uncropped pass-through (a GIF) carries its own name and type. The
-        // cropped path does not — it produced a PNG — so it keeps the caller's
-        // filename. Sending "banner.png" for GIF bytes would have the server
-        // store an animated file under a name and content type that say
-        // otherwise, and the inbox would be told it is a PNG.
-        this.applyCrop(detail.blob, detail.filename);
-      },
-      // Native picker: read the chosen image, then hand it to the modal.
-      onFileSelected(event) {
-        var file = event.target.files[0];
-        if (!file) return;
-        var reader = new FileReader();
-        reader.onload = function (e) {
-          Alpine.store(storeName).open("crop-photo", cropProps({ imageUrl: e.target.result, owner: ownerId }));
-        };
-        reader.readAsDataURL(file);
-        event.target.value = "";
-      },
-      applyCrop(blob, filename) {
-        if (!blob) return;
-        // The blob's OWN type when it has one — a pass-through GIF arrives as the
-        // original File and already knows it is image/gif. Only the cropped path
-        // needs the png default, because that is what toBlob produced.
-        var type = blob.type || "image/png";
-        var name = filename || opts.filename || "image.png";
-        var dt = new DataTransfer();
-        dt.items.add(new File([blob], name, { type: type }));
-        this.$refs.fileInput.files = dt.files;
-        window.submitFormWithProgress(this.$refs.form, opts);
-      }
-    };
-  };
-</script>

data/app/views/studio/modals/blocks/_birthday.html.erb

@@ -59,9 +59,8 @@
                 resolve take the REFUSED branch, so the guide can show the
                 handoff without a backend. Ignored unless demo.
 
-  Requires window.birthdayModal — render studio/_birthday_assets once at
-  layout level (the factory can’t ship inside this template; a cloned script
-  never runs). Single root element (modal-host template mount rule).
+  The scope, birthdayModal(), is studio/birthday, published on every page by
+  studio/alpine_scopes. Single root element (modal-host template mount rule).
 %>
 <%
   # min_age is OPTIONAL now. Absent (or 0) means this app asks for a birthday and

data/app/views/studio/profiles/_birthday_fields.html.erb

@@ -87,4 +87,3 @@
 
 <p class="text-muted text-xs mt-2">Stored as day, month and year — we use it for birthdays and age checks.</p>
 
-<%= render "studio/profiles/birthday_picker_script" %>

data/app/views/studio/profiles/_identity_mini.html.erb

@@ -52,8 +52,12 @@
 
     ON BY DEFAULT rather than set only in the observer's callback, so the
     early return for a browser without IntersectionObserver — which leaves the
-    bar hidden forever — leaves it inert forever too. %>
+    bar hidden forever — leaves it inert forever too.
+
+    WHEN THE BAR SHOWS is studio/identity_mini, bound by the identity-mini
+    controller on this element. %>
 <div data-studio-identity-mini
+     data-studio-controller="identity-mini"
      class="studio-identity-mini"
      inert>
   <div class="px-4">
@@ -94,64 +98,3 @@
   </div>
 </div>
 
-<script>
-  (function () {
-    var CLASS = "is-visible";
-
-    function wire() {
-      var full = document.querySelector("[data-studio-identity-full]");
-      var mini = document.querySelector("[data-studio-identity-mini]");
-      if (!full || !mini) return;
-
-      // No IntersectionObserver: leave the bar hidden rather than showing a
-      // duplicate header permanently. The page is fully usable without it.
-      if (!("IntersectionObserver" in window)) return;
-
-      if (mini._studioObserver) mini._studioObserver.disconnect();
-
-      // HAND OVER PART-WAY, not once the card has gone. Waiting for the last
-      // pixel left a gap where neither header was on screen, which is the moment
-      // the bar exists to cover. It appears once most of the card has scrolled
-      // past, so the two overlap briefly instead.
-      //
-      // Ratio, not a pixel offset: the card's height changes with the name's
-      // wrap and with whether there is an email under it, so a fixed offset
-      // would mean something different on every account.
-      var SHOW_BELOW_RATIO = 0.6;
-
-      var observer = new IntersectionObserver(function (entries) {
-        var entry = entries[0];
-        // A card taller than the viewport can never reach ratio 1, so "not
-        // intersecting at all" has to count as gone in its own right.
-        var gone = !entry.isIntersecting || entry.intersectionRatio < SHOW_BELOW_RATIO;
-        mini.classList.toggle(CLASS, gone);
-        // The tab order and the accessibility tree follow the same decision the
-        // class does. opacity and pointer-events cannot express "not here".
-        mini.inert = !gone;
-      }, {
-        // The navbar covers the top of the viewport, so pixels behind it are not
-        // visible pixels — without this the card reads as on-screen while it is
-        // hidden under the nav.
-        rootMargin: "-72px 0px 0px 0px",
-        // A spread of thresholds, or the callback only fires at fully-in and
-        // fully-out and the ratio test above never gets a chance to run.
-        threshold: [0, 0.2, 0.4, 0.5, 0.6, 0.8, 1]
-      });
-
-      observer.observe(full);
-      mini._studioObserver = observer;
-    }
-
-    document.addEventListener("turbo:load", wire);
-    document.addEventListener("turbo:before-cache", function () {
-      var mini = document.querySelector("[data-studio-identity-mini]");
-      if (mini) {
-        mini.classList.remove(CLASS);
-        mini.inert = true;
-        if (mini._studioObserver) mini._studioObserver.disconnect();
-      }
-    });
-    if (document.readyState !== "loading") wire();
-    else document.addEventListener("DOMContentLoaded", wire);
-  })();
-</script>

data/app/views/studio/profiles/_plain_save.html.erb

@@ -0,0 +1,11 @@
+<%# The profile form's plain Save: a submit button inside the form, with no
+    script behind it.
+
+    It is the JS-less path, hidden once Alpine boots the form's scope, because
+    with the save controls up there would be two Saves. It is also what a person
+    saves with when the form's factory failed to load: the guard in the head
+    (studio/_alpine_scopes_guard) shows every data-studio-scope-fallback inside
+    a scope that did not load. %>
+<div class="mt-6" x-show="!alpine" x-cloak data-studio-scope-fallback>
+  <button type="submit" class="btn btn-primary">Save changes</button>
+</div>

data/app/views/studio/profiles/edit.html.erb

@@ -114,16 +114,11 @@
         </section>
       <% end %>
 
-      <%# The JS-less path. Hidden once Alpine boots, because with the bar up
-          there would be two Saves. %>
-      <div class="mt-6" x-show="!alpine" x-cloak>
-        <button type="submit" class="btn btn-primary">Save changes</button>
-      </div>
+      <%= render "studio/profiles/plain_save" %>
     <% end %>
   </div>
 </div>
 
-<%= render "studio/profiles/form_script" %>
 
 <% if avatar_editable %>
   <%# THE `x-data` IS LOAD-BEARING, and this page was missing it. Alpine 3 only