studio-engine 0.4.12 → 0.4.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 38d351424eeef931252e2c219759db0fdd55605176d2daf7ca10ba283332144f
-  data.tar.gz: d23cacb846cc912b926bca4093bf6d9a8d0de3c1332147244cb0005d82ace99b
+  metadata.gz: 8b6894996dc059e056097232586c6cc442344d2185c2cd435add21e5f78f57f4
+  data.tar.gz: c2a7a5346ac290461292100403af6fda95ee301d346c8b8de23bf05c91fc6ee5
 SHA512:
-  metadata.gz: 6e3af533680b72fc4a010c6c07143d75f332d7f6b82c8f5ef8310bfdd979258f2050d7bb581c39aad61c8187d7510e30abb5d621a7d4626769122f20bafe8957
-  data.tar.gz: 9434c0b55cd9275491cddaad6eae404ca78b30dd7d3e0fe42e29ae0b5ae8f5ee78b7a346b8e00c89ad8c4f881097e512092d9c607d023670bb017416a1bfb2b8
+  metadata.gz: 7280d2c5f81ce34a3a979bd7bad01b767646075949bebf93ebd3c6277758f96f54f0132a59e119abfdd3a8c4ecd01b08f08f4bcd386b8747ed3b3d8348e2dcba
+  data.tar.gz: 8f8e965dcb50315ec81c90f225fa916581bd02f00aba0d5fab9ddebb9d29528239dbff0e876c72854724f74820e6a1dbe1cc262d4bdfd3ab6957f3c2d6d60296

data/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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`. Both consumer Rails apps pin to a tag in their `Gemfile`; bumping the tag is a release.
 
+## v0.4.13 (2026-06-02)
+
+Promotes `components/_avatar_cropper` onto the shared crop-photo modal — completing the image-upload extraction started in v0.4.12. The avatar cropper is the **deferred-form-field** counterpart to `imageUploadHost`: it stages a cropped PNG on a hidden file input + shows a round preview, and the enclosing form (signup / profile edit) submits later (vs. `imageUploadHost`, which submits immediately).
+
+### Changed
+- **`components/_avatar_cropper`** now drives its crop through the shared `crop-photo` modal (`Alpine.store('modals').open('crop-photo', { imageUrl })`) and renders `studio/cropper_assets`, replacing the old bespoke `z-[110]` overlay + direct cropper.js load + the `avatarCropper()` factory (now `avatarCropperHost()`). The parent gets the cropped Blob back via the `crop-photo-confirmed` window event.
+
+### Integration
+Consumers rendering `components/avatar_cropper` now need the v0.4.12 image-upload integration: the `crop-photo` modal registered in the modal-host block (see v0.4.12 → Integration). The partial renders `studio/cropper_assets` itself, so cropper.js + the factories load where it's used.
+
+### Migration
+Apps that kept a local override of `components/_avatar_cropper` to route it through the shared modal (Turf Monster) can **delete the override** and use this.
+
 ## v0.4.12 (2026-06-02)
 
 Promotes the image crop-and-upload UI out of Turf Monster into the engine: a shared cropper modal, the immediate-save upload host, the loading-card-around-a-Turbo-submit helper, and the generic "saving" card. Any consumer can now add a cropped image upload (avatar, banner, logo, OG image) with one `imageUploadHost(...)` x-data plus the cropper assets partial — no bespoke JS.

data/app/views/components/_avatar_cropper.html.erb

@@ -1,15 +1,22 @@
-<%# locals: (form_field_name: "user[avatar]") %>
-<%# Self-contained avatar cropper: Cropper.js CDN + Alpine.js component %>
-<%# Output: sets a cropped 256x256 PNG File on the hidden file input for standard Rails upload %>
+<%# Avatar cropper — a deferred form field. Stages a cropped 256x256 PNG on a
+    hidden file input (the enclosing form submits it later) and shows a round
+    preview. The crop interaction runs through the SHARED crop-photo modal
+    (Alpine.store('modals').open('crop-photo', { imageUrl })) — so register that
+    modal in your host block per the v0.4.12 integration. The parent receives the
+    cropped Blob back via the 'crop-photo-confirmed' window event.
 
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
+    Distinct from imageUploadHost (immediate-save): this STAGES the file and
+    lets the enclosing form own the submit (signup / profile edit).
 
-<div x-data="avatarCropper()" class="space-y-3">
-  <%# Hidden file input that receives the cropped file %>
+    Locals: form_field_name (e.g. "user[avatar]"). %>
+
+<%= render "studio/cropper_assets" %>
+
+<div x-data="avatarCropperHost()"
+     @crop-photo-confirmed.window="applyCrop($event.detail.blob)"
+     class="space-y-3">
   <input type="file" name="<%= form_field_name %>" x-ref="hiddenFileInput" class="hidden">
 
-  <%# Preview + pick button %>
   <div class="flex items-center gap-4">
     <div class="relative w-16 h-16 rounded-full overflow-hidden bg-surface-alt border-2 border-subtle flex-shrink-0">
       <template x-if="croppedUrl">
@@ -23,8 +30,7 @@
         </div>
       </template>
     </div>
-    <button type="button" @click="$refs.filePicker.click()"
-            class="btn btn-outline btn-sm">
+    <button type="button" @click="$refs.filePicker.click()" class="btn btn-outline btn-sm">
       <span x-text="croppedUrl ? 'Change Photo' : 'Upload Photo'"></span>
     </button>
     <template x-if="croppedUrl">
@@ -32,101 +38,41 @@
     </template>
   </div>
 
-  <%# Invisible file picker %>
   <input type="file" x-ref="filePicker" @change="onFileSelected($event)" accept="image/*" class="hidden">
-
-  <%# Crop overlay %>
-  <template x-if="showCropModal">
-    <div class="fixed inset-0 z-[110] flex items-center justify-center" @keydown.escape.window="cancelCrop()">
-      <div class="absolute inset-0 bg-black/70" @click="cancelCrop()"></div>
-      <div class="relative bg-surface rounded-2xl border border-subtle shadow-2xl p-6 max-w-md w-full mx-4">
-        <h3 class="text-heading font-bold text-lg mb-4">Crop Photo</h3>
-        <div class="w-full" style="max-height: 360px;">
-          <img x-ref="cropImage" :src="rawImageUrl" class="max-w-full" style="display: block;">
-        </div>
-        <div class="flex justify-end gap-3 mt-4">
-          <button type="button" @click="cancelCrop()" class="btn btn-outline btn-sm">Cancel</button>
-          <button type="button" @click="confirmCrop()" class="btn btn-primary btn-sm">Crop & Save</button>
-        </div>
-      </div>
-    </div>
-  </template>
 </div>
 
 <script>
-function avatarCropper() {
+function avatarCropperHost() {
   return {
-    cropper: null,
-    showCropModal: false,
-    rawImageUrl: null,
     croppedUrl: null,
 
     onFileSelected(event) {
       var file = event.target.files[0];
       if (!file) return;
-
       var self = this;
       var reader = new FileReader();
       reader.onload = function(e) {
-        self.rawImageUrl = e.target.result;
-        self.showCropModal = true;
-        self.$nextTick(function() {
-          self.initCropper();
-        });
+        // Hand the raw image to the shared modal host; the crop-photo modal
+        // owns the cropper UI and posts back via 'crop-photo-confirmed'.
+        Alpine.store('modals').open('crop-photo', { imageUrl: e.target.result });
       };
       reader.readAsDataURL(file);
-      // Reset so same file can be re-selected
-      event.target.value = '';
+      event.target.value = '';  // allow re-selecting the same file
     },
 
-    initCropper() {
-      if (this.cropper) { this.cropper.destroy(); this.cropper = null; }
-      var image = this.$refs.cropImage;
-      this.cropper = new Cropper(image, {
-        aspectRatio: 1,
-        viewMode: 1,
-        dragMode: 'move',
-        autoCropArea: 0.9,
-        cropBoxResizable: true,
-        cropBoxMovable: true,
-        background: false,
-        guides: true
-      });
-    },
-
-    confirmCrop() {
-      var self = this;
-      var canvas = this.cropper.getCroppedCanvas({ width: 256, height: 256 });
-      canvas.toBlob(function(blob) {
-        // Revoke previous blob URL to prevent memory leak
-        if (self.croppedUrl) URL.revokeObjectURL(self.croppedUrl);
-        // Set cropped preview
-        self.croppedUrl = URL.createObjectURL(blob);
-
-        // Assign file to hidden input via DataTransfer
-        var file = new File([blob], 'avatar.png', { type: 'image/png' });
-        var dt = new DataTransfer();
-        dt.items.add(file);
-        self.$refs.hiddenFileInput.files = dt.files;
-
-        self.closeCropModal();
-      }, 'image/png');
-    },
-
-    cancelCrop() {
-      this.closeCropModal();
-    },
-
-    closeCropModal() {
-      if (this.cropper) { this.cropper.destroy(); this.cropper = null; }
-      this.showCropModal = false;
-      this.rawImageUrl = null;
+    applyCrop(blob) {
+      if (!blob) return;
+      if (this.croppedUrl) URL.revokeObjectURL(this.croppedUrl);
+      this.croppedUrl = URL.createObjectURL(blob);
+      var file = new File([blob], 'avatar.png', { type: 'image/png' });
+      var dt = new DataTransfer();
+      dt.items.add(file);
+      this.$refs.hiddenFileInput.files = dt.files;
     },
 
     removePhoto() {
       if (this.croppedUrl) URL.revokeObjectURL(this.croppedUrl);
       this.croppedUrl = null;
-      // Clear the hidden file input
       var dt = new DataTransfer();
       this.$refs.hiddenFileInput.files = dt.files;
     }

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.4.12"
+  VERSION = "0.4.13"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.4.12
+  version: 0.4.13
 platform: ruby
 authors:
 - Alex McRitchie