@masters-union/union-stack 0.3.9 → 0.3.11

package/dist/picker.d.cts

@@ -1,6 +1,6 @@
-import { U as UnionStackClient, P as PickerOptions, a as PickerHandle } from './client-DP2jyZzm.cjs';
-export { b as PickerBranding, c as PickerTheme } from './client-DP2jyZzm.cjs';
-import { P as PickResponse } from './types-50o0pbff.cjs';
+import { U as UnionStackClient, P as PickerOptions, a as PickerHandle } from './client-DOTa3Mai.cjs';
+export { b as PickerBranding, c as PickerTheme } from './client-DOTa3Mai.cjs';
+import { P as PickResponse } from './types-ZCfjNZls.cjs';
 
 /**
  * Single-shot file picker modal. Built imperatively (no framework) so it can
@@ -25,6 +25,7 @@ declare class Picker {
     private editor;
     private abortCtrl;
     private uploadStarted;
+    private validateSeqCounter;
     private resolved;
     private resolvePromise;
     private donePromise;
@@ -56,6 +57,13 @@ declare class Picker {
     private statusLabel;
     private setItemState;
     private updateSummary;
+    private needsCrop;
+    private hasUncroppedImages;
+    private anyValidating;
+    private shouldCheckDimensions;
+    private updateItemBadge;
+    private validateDimensions;
+    private maybeAutoUpload;
     private refreshConfirm;
     private flashNotice;
     private startUpload;

package/dist/picker.d.ts

@@ -1,6 +1,6 @@
-import { U as UnionStackClient, P as PickerOptions, a as PickerHandle } from './client-B1KPVLJR.js';
-export { b as PickerBranding, c as PickerTheme } from './client-B1KPVLJR.js';
-import { P as PickResponse } from './types-50o0pbff.js';
+import { U as UnionStackClient, P as PickerOptions, a as PickerHandle } from './client-C0qMOfb3.js';
+export { b as PickerBranding, c as PickerTheme } from './client-C0qMOfb3.js';
+import { P as PickResponse } from './types-ZCfjNZls.js';
 
 /**
  * Single-shot file picker modal. Built imperatively (no framework) so it can
@@ -25,6 +25,7 @@ declare class Picker {
     private editor;
     private abortCtrl;
     private uploadStarted;
+    private validateSeqCounter;
     private resolved;
     private resolvePromise;
     private donePromise;
@@ -56,6 +57,13 @@ declare class Picker {
     private statusLabel;
     private setItemState;
     private updateSummary;
+    private needsCrop;
+    private hasUncroppedImages;
+    private anyValidating;
+    private shouldCheckDimensions;
+    private updateItemBadge;
+    private validateDimensions;
+    private maybeAutoUpload;
     private refreshConfirm;
     private flashNotice;
     private startUpload;

package/dist/picker.js

@@ -105,6 +105,10 @@ var BASE_CSS = `
 .us-picker-backdrop {
   --us-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --us-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  /* Default to a light color-scheme so native controls never inherit the
+     visitor's OS dark mode; picker.ts overrides this to match the resolved
+     theme mode on mount. */
+  color-scheme: light;
   position: fixed; inset: 0; z-index: 2147483000;
   background: rgba(2, 6, 23, 0.4);
   -webkit-backdrop-filter: blur(8px);
@@ -249,6 +253,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;
@@ -275,6 +281,14 @@ var BASE_CSS = `
   color: var(--us-muted); font-size: 11px; flex-shrink: 0;
   font-family: var(--us-mono); letter-spacing: 0;
 }
+/* Failure reason \u2014 full-width, danger-colored, wraps. Collapses entirely when
+   empty so non-failed rows keep their original height. */
+.us-file-error {
+  color: var(--us-danger); font-size: 12px; line-height: 1.35;
+  margin-top: 4px; letter-spacing: -0.006em;
+  overflow-wrap: anywhere;
+}
+.us-file-error:empty { display: none; }
 
 .us-file-progress {
   height: 3px; background: var(--us-border); border-radius: 999px; overflow: hidden;
@@ -613,6 +627,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>`,
@@ -643,7 +658,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":
@@ -690,6 +729,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 {
@@ -820,8 +865,42 @@ 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) {
+      const a = this.aspect;
+      let w = dw;
+      let h = w / a;
+      if (h > dh) {
+        h = dh;
+        w = h * a;
+      }
+      w = w * 0.9;
+      h = w / a;
+      if (w < MIN_CROP) {
+        w = MIN_CROP;
+        h = w / a;
+      }
+      if (h < MIN_CROP) {
+        h = MIN_CROP;
+        w = h * a;
+      }
+      if (w > dw) {
+        w = dw;
+        h = w / a;
+      }
+      if (h > dh) {
+        h = dh;
+        w = h * a;
+      }
+      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() {
@@ -873,6 +952,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) {
@@ -893,6 +994,7 @@ var ImageEditor = class {
     this.working = next;
     this.exitCropMode();
     this.markEdited(true);
+    this.opts.onCropApplied?.();
     this.draw();
   }
   applyRotate() {
@@ -908,6 +1010,7 @@ var ImageEditor = class {
     this.working = next;
     this.exitCropMode();
     this.markEdited(true);
+    this.opts.onAspectReset?.();
     this.draw();
   }
   applyCircle() {
@@ -931,11 +1034,13 @@ var ImageEditor = class {
     this.hasAlpha = true;
     this.exitCropMode();
     this.markEdited(true);
+    this.opts.onAspectReset?.();
     this.draw();
   }
   async revert() {
     await this.loadTrueOriginalIntoWorking();
     this.exitCropMode();
+    this.opts.onAspectReset?.();
     this.draw();
   }
   markEdited(edited) {
@@ -1039,6 +1144,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";
@@ -1093,6 +1204,10 @@ var Picker = class {
     this.editor = null;
     this.abortCtrl = new AbortController();
     this.uploadStarted = false;
+    // Monotonic counter so a stale image-dimension decode (e.g. one started before
+    // the user edited the file) can't clobber the row's state — only the latest
+    // validation per item is allowed to mutate it.
+    this.validateSeqCounter = 0;
     this.resolved = false;
     // Element focused before the modal opened, restored on close (a11y).
     this.previouslyFocused = null;
@@ -1140,6 +1255,7 @@ var Picker = class {
     Object.entries(themeToCssVars(this.opts.theme)).forEach(([k, v]) => {
       root.style.setProperty(k, v);
     });
+    root.style.colorScheme = this.opts.theme?.mode === "dark" ? "dark" : "light";
     root.addEventListener("click", (e) => {
       if (e.target === root && !this.uploadStarted) this.cancel();
     });
@@ -1511,15 +1627,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;
@@ -1552,6 +1666,9 @@ var Picker = class {
     const bar = el2("div", "us-file-progress-bar");
     progress.appendChild(bar);
     main.appendChild(progress);
+    const error = el2("div", "us-file-error");
+    if (item.error) error.textContent = item.error;
+    main.appendChild(error);
     row.appendChild(main);
     const isImage = item.file.type.startsWith("image/");
     const editingEnabled = this.opts.imageEditing !== false;
@@ -1575,9 +1692,11 @@ var Picker = class {
     item.$bar = bar;
     item.$status = status;
     item.$meta = meta;
+    item.$error = error;
     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).
@@ -1615,15 +1734,32 @@ 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;
+      },
+      // Rotating/circling/reverting after a crop changes the working aspect, so
+      // the image is no longer guaranteed to match the locked ratio.
+      onAspectReset: () => {
+        didRatioCrop = false;
+      },
       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;
@@ -1677,16 +1813,13 @@ var Picker = class {
         case "uploading":
           item.$meta.textContent = `${size}  \xB7  ${Math.round(item.progress)}%`;
           break;
-        case "done":
-          item.$meta.textContent = size;
-          break;
-        case "failed":
-          item.$meta.textContent = item.error || "Failed";
-          break;
         default:
           item.$meta.textContent = size;
       }
     }
+    if (item.$error) {
+      item.$error.textContent = state === "failed" ? item.error || "Upload failed" : "";
+    }
     this.updateSummary();
   }
   updateSummary() {
@@ -1712,10 +1845,79 @@ 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 seq = ++this.validateSeqCounter;
+    item.validateSeq = seq;
+    const minW = this.opts.minImageWidth ?? 0;
+    const minH = this.opts.minImageHeight ?? 0;
+    const file = item.file;
+    let dim = null;
+    try {
+      dim = await readImageSize(file);
+    } catch {
+      dim = null;
+    }
+    if (item.validateSeq !== seq) return;
+    item.validating = false;
+    if (item.state === "queued") {
+      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) {
@@ -1734,6 +1936,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;
@@ -1889,6 +2100,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 {