@masters-union/union-stack 0.3.10 → 0.3.11

package/dist/picker.cjs

@@ -107,6 +107,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);
@@ -279,6 +283,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;
@@ -856,21 +868,30 @@ var ImageEditor = class {
     const dw = this.displayCanvas.width;
     const dh = this.displayCanvas.height;
     if (this.aspect) {
+      const a = this.aspect;
       let w = dw;
-      let h = w / this.aspect;
+      let h = w / a;
       if (h > dh) {
         h = dh;
-        w = h * this.aspect;
+        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;
       }
-      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;
+        h = w / a;
       }
       if (h > dh) {
         h = dh;
-        w = h * this.aspect;
+        w = h * a;
       }
       this.cropRect = {
         x: Math.round((dw - w) / 2),
@@ -991,6 +1012,7 @@ var ImageEditor = class {
     this.working = next;
     this.exitCropMode();
     this.markEdited(true);
+    this.opts.onAspectReset?.();
     this.draw();
   }
   applyCircle() {
@@ -1014,11 +1036,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) {
@@ -1182,6 +1206,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;
@@ -1229,6 +1257,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();
     });
@@ -1639,6 +1668,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;
@@ -1662,6 +1694,7 @@ var Picker = class {
     item.$bar = bar;
     item.$status = status;
     item.$meta = meta;
+    item.$error = error;
     item.$thumb = thumb;
     this.$list.appendChild(row);
     this.updateSummary();
@@ -1713,6 +1746,11 @@ var Picker = class {
       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);
@@ -1777,16 +1815,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() {
@@ -1846,25 +1881,27 @@ var Picker = class {
   // 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(item.file);
+      dim = await readImageSize(file);
     } catch {
       dim = null;
     }
-    if (item.state !== "queued") {
-      item.validating = false;
-      return;
-    }
+    if (item.validateSeq !== seq) 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);
+    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();