studio-engine 0.41.0 → 0.42.0

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

@@ -44,6 +44,16 @@
       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
@@ -57,6 +67,7 @@
         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.
@@ -103,6 +114,17 @@
           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;
@@ -112,6 +134,25 @@
         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 = "";
@@ -228,6 +269,7 @@
       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;
     }
@@ -249,7 +291,12 @@
       onCropConfirmed(detail) {
         if (!detail) return;
         if (detail.owner && detail.owner !== ownerId) return;
-        this.applyCrop(detail.blob);
+        // 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) {
@@ -262,10 +309,15 @@
         reader.readAsDataURL(file);
         event.target.value = "";
       },
-      applyCrop(blob) {
+      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], opts.filename || "image.png", { type: "image/png" }));
+        dt.items.add(new File([blob], name, { type: type }));
         this.$refs.fileInput.files = dt.files;
         window.submitFormWithProgress(this.$refs.form, opts);
       }

data/app/views/studio/newsletter_mailer/subscribed.html.erb

@@ -0,0 +1,33 @@
+<%# Body only — branded_mailer supplies the banner + card. Colours mirror
+    user_mailer/magic_link: brand primary for anything actionable, so the two
+    emails read as coming from the same place. %>
+<h1 style="margin:0 0 18px;font-size:22px;line-height:1.3;color:#1f2a1c;">You're on the list</h1>
+
+<p style="margin:0 0 24px;font-size:16px;line-height:1.6;color:#3f4a3c;">
+  Thanks for subscribing to <strong style="color:#1f2a1c;"><%= @app_name %></strong>. We'll send
+  the occasional note about what we're building — no more often than it's worth your time.
+</p>
+
+<p style="margin:0 0 24px;font-size:16px;line-height:1.6;color:#3f4a3c;">
+  Nothing else to do. The next one lands in this inbox.
+</p>
+
+<p style="margin:28px 0 0;font-size:13px;line-height:1.5;color:#6b756a;text-align:center;">
+  We're sending to <strong style="color:#2f3a2c;"><%= @email %></strong>.
+</p>
+
+<% if @unsubscribe_url.present? %>
+  <%# Renders ONLY when the host wired a real URL. A newsletter needs a way out,
+      but an unsubscribe link that goes nowhere is worse than none — it spends
+      the reader's trust and then fails them. %>
+  <p style="margin:24px 0 0;font-size:12px;line-height:1.4;color:#8a948a;text-align:center;">
+    Changed your mind?
+    <a href="<%= @unsubscribe_url %>" style="color:<%= Studio.theme_primary %>;">Unsubscribe</a>.
+  </p>
+<% end %>
+
+<p style="margin:28px 0 0;font-size:12px;line-height:1.5;color:#8a948a;text-align:center;">
+  Didn't sign up? You can safely ignore this email and we won't send another.
+</p>
+
+<p style="margin:20px 0 0;font-size:13px;color:#6b756a;text-align:center;">— <%= @app_name %></p>

data/app/views/studio/newsletter_mailer/subscribed.text.erb

@@ -0,0 +1,13 @@
+You're on the <%= @app_name %> list.
+
+Thanks for subscribing. We'll send the occasional note about what we're
+building — no more often than it's worth your time.
+
+We're sending to <%= @email %>.
+<% if @unsubscribe_url.present? %>
+Changed your mind? Unsubscribe here:
+<%= @unsubscribe_url %>
+<% end %>
+Didn't sign up? You can safely ignore this message and we won't send another.
+
+— <%= @app_name %>

data/app/views/user_mailer/magic_link.html.erb

@@ -1,5 +1,10 @@
-<%# Body only — branded_mailer supplies the banner + card. Uses the theme success
-    color for the button so it matches each app. %>
+<%# Body only — branded_mailer supplies the banner + card.
+
+    The button is theme PRIMARY, not success. Success is the "it worked" green;
+    signing in has not happened yet, and the brand colour is what ties the button
+    to the banner above it. The copy-and-paste link is the SAME colour on purpose
+    — it is the button's fallback, and a green link under a purple button reads
+    as a mistake. %>
 <h1 style="margin:0 0 18px;font-size:22px;line-height:1.3;color:#1f2a1c;">Your sign-in link</h1>
 
 <p style="margin:0 0 24px;font-size:16px;line-height:1.6;color:#3f4a3c;">
@@ -8,7 +13,7 @@
 </p>
 
 <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto;">
-  <tr><td align="center" bgcolor="<%= Studio.theme_success %>" style="border-radius:10px;">
+  <tr><td align="center" bgcolor="<%= Studio.theme_primary %>" style="border-radius:10px;">
     <a href="<%= @magic_url %>" style="display:inline-block;padding:16px 40px;font-size:17px;font-weight:700;color:#ffffff;text-decoration:none;border-radius:10px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;">Sign in to <%= @app_name %> 🪄</a>
   </td></tr>
 </table>
@@ -19,7 +24,11 @@
 
 <p style="margin:24px 0 0;font-size:12px;line-height:1.4;color:#8a948a;text-align:center;">
   Button not working? Copy and paste this link:<br>
-  <a href="<%= @magic_url %>" style="font-size:9px;line-height:1.3;color:<%= Studio.theme_success %>;word-break:break-all;"><%= @magic_url %></a>
+  <%# 11px, not the old 9px: this is the link someone falls back to when the
+      button fails, so it has to be readable enough to select by hand. It stays
+      a step under the 12px label above it — the label explains, the URL is the
+      thing you drag across. %>
+  <a href="<%= @magic_url %>" style="font-size:11px;line-height:1.5;color:<%= Studio.theme_primary %>;word-break:break-all;"><%= @magic_url %></a>
 </p>
 
 <p style="margin:28px 0 0;font-size:12px;line-height:1.5;color:#8a948a;text-align:center;">

data/db/migrate/20260812000000_create_studio_email_settings.rb

@@ -0,0 +1,26 @@
+# Per-email, per-APP settings an operator can change from /admin/emails without
+# a deploy — starting with the banner scrim.
+#
+# Separate from ImageCache (which holds the uploaded banner) because this is a
+# NUMBER, not an asset, and separate from the registry (which is code) because
+# the whole point is that an operator can tune it against real artwork and see
+# the result. The registry stays the default; a row here is an override.
+class CreateStudioEmailSettings < ActiveRecord::Migration[7.2]
+  def change
+    create_table :studio_email_settings do |t|
+      # The registry key — "magic_link", "contest_winnings". Not a foreign key:
+      # the catalogue is code, and an app may unregister an email without
+      # wanting its saved settings destroyed.
+      t.string  :email_key, null: false
+
+      # Scrim as a PERCENT (0-100) rather than a float. It is what the operator
+      # types and what the page shows; storing the same units the human uses
+      # keeps the round-trip lossless and the value obvious in the console.
+      t.integer :scrim_percent
+
+      t.timestamps
+    end
+
+    add_index :studio_email_settings, :email_key, unique: true
+  end
+end

data/db/migrate/20260812210000_add_copy_to_studio_email_settings.rb

@@ -0,0 +1,32 @@
+# The banner's WORDS, editable by the operator alongside its tint.
+#
+# Separate migration rather than an edit to CreateStudioEmailSettings: that one
+# has already been installed and run in a host, and rewriting an applied
+# migration is how a schema quietly diverges from the file that claims to
+# describe it.
+#
+# Every column is nullable, and nil means INHERIT — the registry default applies.
+# That distinction is the whole design: "the operator has not set this" and "the
+# operator set this to empty" are different answers, and a NOT NULL default
+# would collapse them.
+class AddCopyToStudioEmailSettings < ActiveRecord::Migration[7.2]
+  def change
+    change_table :studio_email_settings, bulk: true do |t|
+      # Supports a {name} placeholder, which is what keeps the field honest for
+      # an email whose greeting is per-recipient.
+      t.string  :header
+
+      # Used when no name is known. A magic link may be the first contact we
+      # ever have with someone, so "Welcome {name}!" has to have somewhere to
+      # fall back to that is not "Welcome !".
+      t.string  :header_fallback
+
+      t.string  :subtext
+
+      # Blank inherits the registry logo. hide_logo is the deliberate "no logo"
+      # answer — without it, blank would have to mean both inherit and none.
+      t.string  :logo_url
+      t.boolean :hide_logo, null: false, default: false
+    end
+  end
+end

data/db/migrate/20260812220000_add_subject_to_studio_email_settings.rb

@@ -0,0 +1,15 @@
+# The subject line, editable beside the banner's words.
+#
+# Its OWN migration, and that is the point rather than an oversight. The subject
+# column was first written into AddCopyToStudioEmailSettings, which a host had
+# already run — so the column silently never appeared, and the manager offered a
+# field backed by nothing. Editing an applied migration does not re-apply it; it
+# only makes the file disagree with the database it claims to describe.
+class AddSubjectToStudioEmailSettings < ActiveRecord::Migration[7.2]
+  def change
+    # Nullable, because nil means INHERIT the registry default — the same
+    # distinction every other copy column carries. A NOT NULL default would
+    # collapse "never set" into "set to empty".
+    add_column :studio_email_settings, :subject, :string
+  end
+end

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.41.0"
+  VERSION = "0.42.0"
 end

data/lib/studio.rb

@@ -570,6 +570,18 @@ module Studio
                constraints: { key: /[a-z0-9_]+/ }
         delete "admin/emails/:key",     to: "studio/emails#destroy",
                constraints: { key: /[a-z0-9_]+/ }
+        # Operator-tunable per-email settings (the banner scrim today). Separate
+        # from #update, which takes an image upload.
+        patch  "admin/emails/:key/settings", to: "studio/emails#settings",
+               as: :admin_email_settings, constraints: { key: /[a-z0-9_]+/ }
+        # The banner's words and logo. Its own route so writing a sentence and
+        # nudging the tint save independently.
+        patch  "admin/emails/:key/copy", to: "studio/emails#copy",
+               as: :admin_email_copy, constraints: { key: /[a-z0-9_]+/ }
+        # The per-email logo. Separate from the banner upload above — different
+        # picture, different ImageCache purpose, independently revertible.
+        patch  "admin/emails/:key/logo", to: "studio/emails#logo",
+               as: :admin_email_logo, constraints: { key: /[a-z0-9_]+/ }
       end
 
       # DEPRECATED, kept for ONE release. Not a redirect: consumer-ci.yml runs

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.41.0
+  version: 0.42.0
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-08-12 00:00:00.000000000 Z
+date: 2026-08-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -169,7 +169,10 @@ files:
 - LICENSE
 - README.md
 - app/assets/images/emails/email-change-confirmation.gif
+- app/assets/images/emails/logo-horizontal.png
+- app/assets/images/emails/magic-link-background.gif
 - app/assets/images/emails/magic-link.gif
+- app/assets/images/emails/newsletter-subscribed-background.gif
 - app/assets/images/resend-favicon.png
 - app/assets/images/ses-favicon.png
 - app/assets/javascripts/studio/canvas_confetti.js
@@ -210,6 +213,7 @@ files:
 - app/jobs/error_log_cleanup_job.rb
 - app/jobs/studio/email_delivery_job.rb
 - app/mailers/application_mailer.rb
+- app/mailers/studio/newsletter_mailer.rb
 - app/mailers/user_mailer.rb
 - app/models/concerns/sluggable.rb
 - app/models/concerns/studio/board/rankable.rb
@@ -219,13 +223,16 @@ files:
 - app/models/image_cache.rb
 - app/models/session_context.rb
 - app/models/studio/email_delivery.rb
+- app/models/studio/email_setting.rb
 - app/models/studio/enumeral.rb
 - app/models/studio/link.rb
 - app/models/studio/model_page.rb
 - app/models/theme_setting.rb
 - app/services/google_oauth_validator.rb
+- app/services/studio/banner.rb
 - app/services/studio/email_catalog.rb
 - app/services/studio/email_image.rb
+- app/services/studio/email_preview_target.rb
 - app/views/components/_admin_dropdown.html.erb
 - app/views/components/_avatar.html.erb
 - app/views/components/_avatar_cropper.html.erb
@@ -277,11 +284,17 @@ files:
 - app/views/studio/board/_card_shell.html.erb
 - app/views/studio/board/_column.html.erb
 - app/views/studio/email_images/index.html.erb
+- app/views/studio/emails/_banner_editor.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
 - app/views/studio/emails/show.html.erb
 - app/views/studio/links/confirm.html.erb
 - app/views/studio/local_emails/index.html.erb
+- app/views/studio/mailers/_layered_banner.html.erb
 - app/views/studio/modals/_crop_photo.html.erb
 - app/views/studio/modals/_host.html.erb
 - app/views/studio/modals/_image_upload.html.erb
@@ -315,6 +328,8 @@ files:
 - app/views/studio/modals/templates/_success.html.erb
 - app/views/studio/modals/templates/_wizard.html.erb
 - app/views/studio/models/show.html.erb
+- app/views/studio/newsletter_mailer/subscribed.html.erb
+- app/views/studio/newsletter_mailer/subscribed.text.erb
 - app/views/style/_modal_specimen.html.erb
 - app/views/style/_modals.html.erb
 - app/views/style/_specimen.html.erb
@@ -336,6 +351,9 @@ files:
 - db/migrate/20260620000001_create_studio_links.rb
 - db/migrate/20260620000002_allow_null_image_cache_owner.rb
 - db/migrate/20260623130000_create_studio_enumerals.rb
+- db/migrate/20260812000000_create_studio_email_settings.rb
+- db/migrate/20260812210000_add_copy_to_studio_email_settings.rb
+- db/migrate/20260812220000_add_subject_to_studio_email_settings.rb
 - lib/studio-engine.rb
 - lib/studio.rb
 - lib/studio/cable.rb