@masters-union/union-stack 0.3.8 → 0.3.10

package/dist/picker.cjs

@@ -251,6 +251,8 @@ var BASE_CSS = `
 }
 .us-file[data-state="done"]     { border-color: color-mix(in srgb, var(--us-success) 35%, var(--us-border)); }
 .us-file[data-state="failed"]   { border-color: color-mix(in srgb, var(--us-danger)  35%, var(--us-border)); }
+/* Force-crop: image queued but not yet cropped to the required ratio. */
+.us-file[data-crop-required="true"] { border-color: color-mix(in srgb, var(--us-danger) 35%, var(--us-border)); }
 
 .us-file-thumb {
   width: 40px; height: 40px; flex-shrink: 0;
@@ -615,6 +617,7 @@ var BASE_CSS = `
 
 // src/picker/imageEditor.ts
 var MAX_DISPLAY = 720;
+var MIN_CROP = 24;
 var ICON = {
   back: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>`,
   crop: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>`,
@@ -645,7 +648,31 @@ var ImageEditor = class {
       const start = this.dragStart.rect;
       const maxW = this.displayCanvas.width;
       const maxH = this.displayCanvas.height;
-      const min = 24;
+      const min = MIN_CROP;
+      if (this.aspect && this.dragKind !== "move") {
+        switch (this.dragKind) {
+          case "se":
+            this.cropRect = this.lockedRectFromDrag(start.x, start.y, start.w + dx, 1, 1);
+            break;
+          case "nw": {
+            const ax = start.x + start.w, ay = start.y + start.h;
+            this.cropRect = this.lockedRectFromDrag(ax, ay, ax - (start.x + dx), -1, -1);
+            break;
+          }
+          case "ne": {
+            const ay = start.y + start.h;
+            this.cropRect = this.lockedRectFromDrag(start.x, ay, start.w + dx, 1, -1);
+            break;
+          }
+          case "sw": {
+            const ax = start.x + start.w;
+            this.cropRect = this.lockedRectFromDrag(ax, start.y, ax - (start.x + dx), -1, 1);
+            break;
+          }
+        }
+        this.updateCropBox();
+        return;
+      }
       let { x, y, w, h } = start;
       switch (this.dragKind) {
         case "move":
@@ -692,6 +719,12 @@ var ImageEditor = class {
       document.removeEventListener("pointerup", this.onPointerUp);
     };
   }
+  // Locked crop ratio (width / height), or null for free-form. Derived from
+  // opts so there's a single source of truth.
+  get aspect() {
+    const a = this.opts.lockedAspect;
+    return a && a.width > 0 && a.height > 0 ? a.width / a.height : null;
+  }
   async open() {
     this.mount();
     try {
@@ -822,8 +855,33 @@ var ImageEditor = class {
     this.cropTool.innerHTML = `${ICON.check} <span>Apply crop</span>`;
     const dw = this.displayCanvas.width;
     const dh = this.displayCanvas.height;
-    const inset = Math.round(Math.min(dw, dh) * 0.1);
-    this.cropRect = { x: inset, y: inset, w: dw - inset * 2, h: dh - inset * 2 };
+    if (this.aspect) {
+      let w = dw;
+      let h = w / this.aspect;
+      if (h > dh) {
+        h = dh;
+        w = h * this.aspect;
+      }
+      w = Math.max(MIN_CROP, Math.round(w * 0.9));
+      h = Math.max(MIN_CROP, Math.round(w / this.aspect));
+      if (w > dw) {
+        w = dw;
+        h = w / this.aspect;
+      }
+      if (h > dh) {
+        h = dh;
+        w = h * this.aspect;
+      }
+      this.cropRect = {
+        x: Math.round((dw - w) / 2),
+        y: Math.round((dh - h) / 2),
+        w,
+        h
+      };
+    } else {
+      const inset = Math.round(Math.min(dw, dh) * 0.1);
+      this.cropRect = { x: inset, y: inset, w: dw - inset * 2, h: dh - inset * 2 };
+    }
     this.renderCropBox();
   }
   exitCropMode() {
@@ -875,6 +933,28 @@ var ImageEditor = class {
     document.addEventListener("pointermove", this.onPointerMove);
     document.addEventListener("pointerup", this.onPointerUp);
   }
+  // Build a ratio-locked rect from a fixed anchor corner and a desired width.
+  // signX/signY say whether the dragged corner sits to the right/below the
+  // anchor (+1) or left/above (-1). Height is always derived from width to keep
+  // the ratio exact; both are clamped so the rect stays on-canvas.
+  lockedRectFromDrag(anchorX, anchorY, desiredW, signX, signY) {
+    const a = this.aspect;
+    const maxW = this.displayCanvas.width;
+    const maxH = this.displayCanvas.height;
+    let w = Math.max(MIN_CROP, desiredW);
+    let h = w / a;
+    if (h < MIN_CROP) {
+      h = MIN_CROP;
+      w = h * a;
+    }
+    const roomX = signX > 0 ? maxW - anchorX : anchorX;
+    const roomY = signY > 0 ? maxH - anchorY : anchorY;
+    w = Math.min(w, roomX, roomY * a);
+    h = w / a;
+    const x = signX > 0 ? anchorX : anchorX - w;
+    const y = signY > 0 ? anchorY : anchorY - h;
+    return { x, y, w, h };
+  }
   // ---- operations (mutate working canvas) --------------------------------
   applyCrop() {
     if (!this.cropRect) {
@@ -895,6 +975,7 @@ var ImageEditor = class {
     this.working = next;
     this.exitCropMode();
     this.markEdited(true);
+    this.opts.onCropApplied?.();
     this.draw();
   }
   applyRotate() {
@@ -1041,6 +1122,12 @@ function mergeConfig(server, runtime) {
     const types = server.constraints.allowedMimeTypes.filter((t) => t !== "*/*");
     if (types.length > 0) merged.accept = types.join(",");
   }
+  const srvImg = server.image ?? null;
+  const ratio = runtime.cropAspectRatio ?? (srvImg && srvImg.cropRatioW && srvImg.cropRatioH ? { width: srvImg.cropRatioW, height: srvImg.cropRatioH } : void 0);
+  merged.cropAspectRatio = ratio;
+  merged.forceCrop = (runtime.forceCrop ?? srvImg?.forceCrop ?? false) && !!ratio && runtime.imageEditing !== false;
+  merged.minImageWidth = runtime.minImageWidth ?? srvImg?.minWidth ?? void 0;
+  merged.minImageHeight = runtime.minImageHeight ?? srvImg?.minHeight ?? void 0;
   return merged;
 }
 var DEFAULT_TITLE = "Upload files";
@@ -1513,15 +1600,13 @@ var Picker = class {
       };
       this.items.push(item);
       this.renderItem(item);
+      if (this.shouldCheckDimensions(file)) {
+        item.validating = true;
+        this.validateDimensions(item);
+      }
     }
     this.refreshConfirm();
-    const autoUpload = this.opts.autoUpload === true;
-    const hasQueued = this.items.some((i) => i.state === "queued");
-    if (autoUpload && hasQueued && !this.uploadStarted) {
-      requestAnimationFrame(() => {
-        if (!this.uploadStarted) this.startUpload();
-      });
-    }
+    this.maybeAutoUpload();
   }
   renderItem(item) {
     if (!this.$list) return;
@@ -1580,6 +1665,7 @@ var Picker = class {
     item.$thumb = thumb;
     this.$list.appendChild(row);
     this.updateSummary();
+    this.updateItemBadge(item);
   }
   // Swap a queued item's file with an edited version. Refreshes thumbnail and
   // meta in place so the row identity is preserved (uploadId, position).
@@ -1617,15 +1703,27 @@ var Picker = class {
   // nothing (Cancel/Back).
   openEditor(item) {
     if (!this.$panel || this.editor || item.state !== "queued") return;
+    let didRatioCrop = false;
     this.editor = new ImageEditor({
       host: this.$panel,
       file: item.file,
       originalFile: item.originalFile,
       title: item.originalFile.name,
+      lockedAspect: this.opts.cropAspectRatio,
+      onCropApplied: () => {
+        didRatioCrop = true;
+      },
       onApply: (edited) => {
         const wasEdited = edited !== item.originalFile;
         this.replaceItemFile(item, edited, wasEdited);
+        if (didRatioCrop) item.ratioCropped = true;
         this.editor = null;
+        if (this.shouldCheckDimensions(item.file)) {
+          item.validating = true;
+          this.validateDimensions(item);
+        }
+        this.updateItemBadge(item);
+        this.refreshConfirm();
       },
       onCancel: () => {
         this.editor = null;
@@ -1714,10 +1812,77 @@ var Picker = class {
       this.$summary.textContent = `${total} file${total === 1 ? "" : "s"} ready`;
     }
   }
+  // ---- image rules (force-crop + min dimensions) --------------------------
+  // True when force-crop is on and this queued raster image hasn't been cropped
+  // to the locked ratio yet. SVGs are exempt (vector→raster crop is lossy).
+  needsCrop(item) {
+    return this.opts.forceCrop === true && !!this.opts.cropAspectRatio && item.state === "queued" && item.file.type.startsWith("image/") && item.file.type !== "image/svg+xml" && !item.ratioCropped;
+  }
+  hasUncroppedImages() {
+    return this.items.some((i) => this.needsCrop(i));
+  }
+  anyValidating() {
+    return this.items.some((i) => i.validating === true);
+  }
+  // Whether a min-dimension rule applies to this file (image, non-SVG, rule set).
+  shouldCheckDimensions(file) {
+    const minConfigured = !!(this.opts.minImageWidth || this.opts.minImageHeight);
+    return minConfigured && file.type.startsWith("image/") && file.type !== "image/svg+xml";
+  }
+  // Toggle the per-row "crop required" cue. Only touches the meta line for
+  // queued rows (other states own their meta via setItemState).
+  updateItemBadge(item) {
+    if (!item.$row) return;
+    if (this.needsCrop(item)) {
+      item.$row.dataset.cropRequired = "true";
+      if (item.$meta) item.$meta.textContent = "Crop to ratio required";
+    } else {
+      delete item.$row.dataset.cropRequired;
+      if (item.state === "queued" && item.$meta && !item.validating) {
+        item.$meta.textContent = formatBytes(item.file.size);
+      }
+    }
+  }
+  // Decode an image and fail the row if it's below the configured minimum.
+  // Non-decodable inputs are left queued — we can't prove they're too small.
+  async validateDimensions(item) {
+    const minW = this.opts.minImageWidth ?? 0;
+    const minH = this.opts.minImageHeight ?? 0;
+    let dim = null;
+    try {
+      dim = await readImageSize(item.file);
+    } catch {
+      dim = null;
+    }
+    if (item.state !== "queued") {
+      item.validating = false;
+      return;
+    }
+    item.validating = false;
+    if (dim && dim.w > 0 && dim.h > 0 && (dim.w < minW || dim.h < minH)) {
+      const need = `${minW || "?"}\xD7${minH || "?"}`;
+      item.error = `Image too small \u2014 needs at least ${need}px (got ${dim.w}\xD7${dim.h})`;
+      this.setItemState(item, "failed");
+    } else {
+      this.updateItemBadge(item);
+    }
+    this.refreshConfirm();
+    this.maybeAutoUpload();
+  }
+  // Fire auto-upload once nothing is blocking it (no pending validation, no
+  // pending force-crops). Re-checked whenever a validation settles.
+  maybeAutoUpload() {
+    if (this.opts.autoUpload !== true || this.uploadStarted) return;
+    if (this.anyValidating() || this.hasUncroppedImages()) return;
+    if (!this.items.some((i) => i.state === "queued")) return;
+    requestAnimationFrame(() => {
+      if (!this.uploadStarted) this.startUpload();
+    });
+  }
   refreshConfirm() {
     if (!this.$confirm) return;
     const queued = this.items.filter((i) => i.state === "queued").length;
-    this.$confirm.disabled = queued === 0 || this.uploadStarted;
+    this.$confirm.disabled = queued === 0 || this.uploadStarted || this.hasUncroppedImages() || this.anyValidating();
   }
   // Transient message in the actions bar (e.g. "2 files skipped — too large").
   flashNotice(text) {
@@ -1736,6 +1901,15 @@ var Picker = class {
   // ---- upload -------------------------------------------------------------
   async startUpload() {
     if (this.uploadStarted) return;
+    if (this.anyValidating()) {
+      this.flashNotice("Checking image dimensions\u2026");
+      return;
+    }
+    if (this.hasUncroppedImages()) {
+      this.items.forEach((i) => this.updateItemBadge(i));
+      this.flashNotice("Crop required \u2014 crop every image to the set ratio before uploading.");
+      return;
+    }
     const queued = this.items.filter((i) => i.state === "queued");
     if (queued.length === 0) return;
     this.uploadStarted = true;
@@ -1891,6 +2065,34 @@ function cryptoId() {
   }
   return Math.random().toString(36).slice(2) + Date.now().toString(36);
 }
+async function readImageSize(file) {
+  if (typeof createImageBitmap === "function") {
+    try {
+      const bmp = await createImageBitmap(file);
+      const w = bmp.width, h = bmp.height;
+      bmp.close?.();
+      return { w, h };
+    } catch {
+    }
+  }
+  return new Promise((resolve, reject) => {
+    if (typeof URL === "undefined" || !URL.createObjectURL) {
+      reject(new Error("no object URL support"));
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve({ w: img.naturalWidth, h: img.naturalHeight });
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("decode failed"));
+    };
+    img.src = url;
+  });
+}
 async function fetchUrlAsFile(url) {
   let res;
   try {