@masters-union/union-stack 0.3.11 → 0.3.12

package/dist/picker.cjs

@@ -530,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;
@@ -775,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();
@@ -904,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";
@@ -914,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;
@@ -944,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) {