@masters-union/union-stack 0.3.10 → 0.3.12

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;
@@ -518,6 +530,26 @@ var BASE_CSS = `
 .us-tool svg { width: 13px; height: 13px; }
 .us-tool-spacer { flex: 1; }
 
+/* Crop dimension inputs \u2014 live W\xD7H readout, editable for free-form crops. */
+.us-crop-dims {
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  padding: 10px 16px 0;
+}
+.us-crop-dims[hidden] { display: none; }
+.us-crop-dims-label {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
+  text-transform: uppercase; color: var(--us-muted);
+}
+.us-crop-dim-input {
+  width: 76px; appearance: none; text-align: center;
+  background: var(--us-overlay); border: 1px solid var(--us-border-strong);
+  border-radius: 8px; padding: 5px 8px; min-height: 30px;
+  font: inherit; font-size: 12px; color: var(--us-fg);
+}
+.us-crop-dim-input:focus { outline: none; border-color: var(--us-primary); }
+.us-crop-dim-input:read-only { opacity: 0.55; cursor: default; }
+.us-crop-dims-x, .us-crop-dims-unit { color: var(--us-muted); font-size: 12px; }
+
 .us-editor-footer {
   display: flex; gap: 8px; justify-content: flex-end;
   padding: 12px 16px;
@@ -763,6 +795,16 @@ var ImageEditor = class {
     this.displayCanvas.className = "us-editor-canvas";
     this.canvasWrap.appendChild(this.displayCanvas);
     this.root.appendChild(this.canvasWrap);
+    this.cropDims = el("div", "us-crop-dims");
+    this.cropDims.hidden = true;
+    this.widthInput = this.makeDimInput("Crop width in pixels", "w");
+    this.heightInput = this.makeDimInput("Crop height in pixels", "h");
+    this.cropDims.appendChild(el("span", "us-crop-dims-label", "Crop size"));
+    this.cropDims.appendChild(this.widthInput);
+    this.cropDims.appendChild(el("span", "us-crop-dims-x", "\xD7"));
+    this.cropDims.appendChild(this.heightInput);
+    this.cropDims.appendChild(el("span", "us-crop-dims-unit", "px"));
+    this.root.appendChild(this.cropDims);
     const toolbar = el("div", "us-editor-toolbar");
     this.cropTool = makeTool("Crop", ICON.crop);
     this.cropTool.onclick = () => this.toggleCropMode();
@@ -856,21 +898,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),
@@ -883,6 +934,12 @@ var ImageEditor = class {
       this.cropRect = { x: inset, y: inset, w: dw - inset * 2, h: dh - inset * 2 };
     }
     this.renderCropBox();
+    const locked = this.aspect !== null;
+    this.widthInput.readOnly = locked;
+    this.heightInput.readOnly = locked;
+    this.cropDims.dataset.locked = locked ? "true" : "false";
+    this.cropDims.hidden = false;
+    this.syncCropDimsInputs();
   }
   exitCropMode() {
     this.mode = "none";
@@ -893,6 +950,46 @@ var ImageEditor = class {
       this.cropBox.remove();
       this.cropBox = null;
     }
+    this.cropDims.hidden = true;
+  }
+  // Build a numeric crop-dimension input. `axis` selects which side it edits.
+  makeDimInput(ariaLabel, axis) {
+    const input = document.createElement("input");
+    input.type = "number";
+    input.min = "1";
+    input.inputMode = "numeric";
+    input.className = "us-crop-dim-input";
+    input.setAttribute("aria-label", ariaLabel);
+    input.addEventListener("input", () => this.onDimInput(axis));
+    input.addEventListener("change", () => this.syncCropDimsInputs());
+    return input;
+  }
+  // Push the current crop frame size (in image/output pixels) into the inputs,
+  // skipping whichever the user is actively editing so we don't fight typing.
+  syncCropDimsInputs() {
+    if (!this.cropRect || !this.widthInput || !this.heightInput) return;
+    const s = this.displayScale || 1;
+    const wImg = Math.max(1, Math.round(this.cropRect.w / s));
+    const hImg = Math.max(1, Math.round(this.cropRect.h / s));
+    if (document.activeElement !== this.widthInput) this.widthInput.value = String(wImg);
+    if (document.activeElement !== this.heightInput) this.heightInput.value = String(hImg);
+  }
+  // Free-form only: resize the crop frame from a typed pixel dimension. Anchored
+  // at the frame's current top-left and clamped to the canvas + the min size.
+  onDimInput(axis) {
+    if (this.aspect !== null || !this.cropRect) return;
+    const s = this.displayScale || 1;
+    const input = axis === "w" ? this.widthInput : this.heightInput;
+    const valImg = parseInt(input.value, 10);
+    if (!Number.isFinite(valImg) || valImg <= 0) return;
+    if (axis === "w") {
+      const maxW = this.displayCanvas.width - this.cropRect.x;
+      this.cropRect = { ...this.cropRect, w: clamp(Math.round(valImg * s), MIN_CROP, maxW) };
+    } else {
+      const maxH = this.displayCanvas.height - this.cropRect.y;
+      this.cropRect = { ...this.cropRect, h: clamp(Math.round(valImg * s), MIN_CROP, maxH) };
+    }
+    this.updateCropBox();
   }
   renderCropBox() {
     if (!this.cropRect) return;
@@ -923,6 +1020,7 @@ var ImageEditor = class {
     this.cropBox.style.top = `${top}px`;
     this.cropBox.style.width = `${this.cropRect.w}px`;
     this.cropBox.style.height = `${this.cropRect.h}px`;
+    this.syncCropDimsInputs();
   }
   // ---- drag handlers (crop) ----------------------------------------------
   beginDrag(e, kind) {
@@ -991,6 +1089,7 @@ var ImageEditor = class {
     this.working = next;
     this.exitCropMode();
     this.markEdited(true);
+    this.opts.onAspectReset?.();
     this.draw();
   }
   applyCircle() {
@@ -1014,11 +1113,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 +1283,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 +1334,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 +1745,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 +1771,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 +1823,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 +1892,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 +1958,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();