@masters-union/union-stack 0.1.7 → 0.1.8

package/dist/picker.js

@@ -3,10 +3,10 @@ var STYLE_ID = "unionstack-picker-styles";
 function ensureStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID)) return;
-  const el2 = document.createElement("style");
-  el2.id = STYLE_ID;
-  el2.textContent = BASE_CSS;
-  document.head.appendChild(el2);
+  const el3 = document.createElement("style");
+  el3.id = STYLE_ID;
+  el3.textContent = BASE_CSS;
+  document.head.appendChild(el3);
 }
 function themeToCssVars(theme) {
   const mode = theme?.mode || "light";
@@ -80,6 +80,7 @@ var BASE_CSS = `
   width: 100%; max-width: 480px;
   max-height: min(calc(100dvh - 32px), 680px);
   display: flex; flex-direction: column;
+  position: relative;
   box-shadow:
     0 1px 1px rgba(0,0,0,0.04),
     0 18px 40px -8px rgba(0,0,0,0.18),
@@ -316,6 +317,178 @@ var BASE_CSS = `
 .us-footer a { color: var(--us-muted); text-decoration: none; font-weight: 500; }
 .us-footer a:hover { color: var(--us-fg); }
 
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 source tabs (Device / URL) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.us-source-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  background: var(--us-subtle);
+  border: 1px solid var(--us-border);
+  border-radius: 10px;
+  margin-bottom: 14px;
+}
+.us-source-tab {
+  appearance: none; background: transparent; border: 0;
+  font: inherit; cursor: pointer;
+  padding: 6px 14px; min-height: 30px;
+  border-radius: 7px;
+  font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em;
+  color: var(--us-muted);
+  transition: background 140ms, color 140ms;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.us-source-tab svg { width: 13px; height: 13px; }
+.us-source-tab:hover { color: var(--us-fg); }
+.us-source-tab[data-active="true"] {
+  background: var(--us-bg);
+  color: var(--us-fg);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+}
+.us-source-tab:focus-visible { outline: 2px solid var(--us-primary); outline-offset: 2px; }
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 URL source \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.us-url-source { display: none; }
+.us-url-source[data-active="true"] { display: block; }
+.us-url-form {
+  display: flex; gap: 8px;
+  padding: 16px;
+  border: 1.5px dashed var(--us-border-strong);
+  border-radius: calc(var(--us-radius) - 2px);
+  background: color-mix(in srgb, var(--us-subtle) 60%, transparent);
+}
+.us-url-input {
+  appearance: none;
+  flex: 1; min-width: 0;
+  padding: 9px 12px; min-height: 36px;
+  border-radius: 8px; border: 1px solid var(--us-border);
+  background: var(--us-bg); color: var(--us-fg);
+  font: inherit; font-size: 13px;
+  transition: border-color 140ms, box-shadow 140ms;
+}
+.us-url-input::placeholder { color: var(--us-muted); }
+.us-url-input:focus {
+  outline: none;
+  border-color: var(--us-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--us-primary) 18%, transparent);
+}
+.us-url-hint {
+  margin-top: 8px;
+  font-size: 11.5px; color: var(--us-muted);
+}
+.us-url-hint[data-error="true"] { color: var(--us-danger); }
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 per-row edit button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.us-file-actions { display: inline-flex; gap: 4px; }
+.us-file-action {
+  appearance: none; background: transparent; border: 0; cursor: pointer;
+  width: 28px; height: 28px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--us-muted); border-radius: 6px;
+  transition: background 140ms, color 140ms;
+}
+.us-file-action:hover { background: var(--us-subtle); color: var(--us-fg); }
+.us-file-action:focus-visible { outline: 2px solid var(--us-primary); outline-offset: 1px; }
+.us-file-action svg { width: 15px; height: 15px; }
+.us-file-action[data-edited="true"] { color: var(--us-primary); }
+.us-file:not([data-state="queued"]) .us-file-action { display: none; }
+
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 image editor overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.us-editor {
+  position: absolute; inset: 0; z-index: 2;
+  display: flex; flex-direction: column;
+  background: var(--us-bg);
+  animation: us-fade 140ms ease-out;
+}
+.us-editor-header {
+  display: flex; align-items: center; gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--us-border);
+}
+.us-editor-title { font-weight: 600; font-size: 14px; flex: 1; letter-spacing: -0.01em; }
+.us-editor-back {
+  appearance: none; background: transparent; border: 0; cursor: pointer;
+  width: 32px; height: 32px; border-radius: 8px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--us-muted);
+  transition: background 140ms, color 140ms;
+}
+.us-editor-back:hover { background: var(--us-subtle); color: var(--us-fg); }
+.us-editor-back svg { width: 16px; height: 16px; }
+
+.us-editor-canvas-wrap {
+  flex: 1; min-height: 0;
+  background: var(--us-subtle);
+  display: flex; align-items: center; justify-content: center;
+  padding: 16px;
+  position: relative;
+  overflow: hidden;
+}
+.us-editor-canvas {
+  max-width: 100%; max-height: 100%;
+  border-radius: 6px;
+  display: block;
+  /* Checkerboard for transparency awareness (visible only in circle mode). */
+  background-image:
+    linear-gradient(45deg, var(--us-border) 25%, transparent 25%, transparent 75%, var(--us-border) 75%),
+    linear-gradient(45deg, var(--us-border) 25%, transparent 25%, transparent 75%, var(--us-border) 75%);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+}
+.us-editor-overlay {
+  position: absolute; inset: 0;
+  pointer-events: none;
+}
+
+.us-editor-toolbar {
+  display: flex; gap: 6px; flex-wrap: wrap;
+  padding: 10px 16px;
+  border-top: 1px solid var(--us-border);
+}
+.us-tool {
+  appearance: none; background: transparent; border: 1px solid var(--us-border);
+  font: inherit; cursor: pointer;
+  padding: 6px 11px; min-height: 32px;
+  border-radius: 8px;
+  font-size: 12.5px; font-weight: 500;
+  color: var(--us-fg);
+  display: inline-flex; align-items: center; gap: 6px;
+  transition: background 140ms, border-color 140ms, color 140ms;
+}
+.us-tool:hover { background: var(--us-subtle); border-color: var(--us-border-strong); }
+.us-tool[data-active="true"] {
+  background: color-mix(in srgb, var(--us-primary) 10%, var(--us-bg));
+  border-color: var(--us-primary);
+  color: var(--us-primary);
+}
+.us-tool[disabled] { opacity: 0.45; cursor: not-allowed; }
+.us-tool svg { width: 13px; height: 13px; }
+.us-tool-spacer { flex: 1; }
+
+.us-editor-footer {
+  display: flex; gap: 8px; justify-content: flex-end;
+  padding: 12px 16px;
+  border-top: 1px solid var(--us-border);
+}
+
+/* Crop drag handles. Drawn inside .us-editor-canvas-wrap, positioned over canvas. */
+.us-crop-box {
+  position: absolute;
+  border: 1.5px solid var(--us-primary);
+  box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
+  pointer-events: auto;
+  cursor: move;
+}
+.us-crop-handle {
+  position: absolute;
+  width: 12px; height: 12px;
+  background: var(--us-bg);
+  border: 1.5px solid var(--us-primary);
+  border-radius: 2px;
+  pointer-events: auto;
+}
+.us-crop-handle[data-pos="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
+.us-crop-handle[data-pos="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
+.us-crop-handle[data-pos="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
+.us-crop-handle[data-pos="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }
+
 /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 @media (prefers-reduced-motion: reduce) {
   .us-picker-backdrop,
@@ -325,7 +498,10 @@ var BASE_CSS = `
   .us-dropzone-icon,
   .us-btn,
   .us-file-status,
-  .us-file-progress-bar { animation: none !important; transition: none !important; }
+  .us-file-progress-bar,
+  .us-editor,
+  .us-source-tab,
+  .us-tool { animation: none !important; transition: none !important; }
   .us-file[data-state="uploading"] .us-file-progress-bar::after { animation: none; opacity: 0; }
 }
 
@@ -333,6 +509,409 @@ var BASE_CSS = `
 .us-file-list:empty { display: none; }
 `;
 
+// src/picker/imageEditor.ts
+var MAX_DISPLAY = 720;
+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>`,
+  circle: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/></svg>`,
+  rotate: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.82.93 6.58 2.46L21 8"/><path d="M21 3v5h-5"/></svg>`,
+  undo: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>`,
+  check: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
+};
+var ImageEditor = class {
+  constructor(opts) {
+    this.opts = opts;
+    this.cropBox = null;
+    // What's currently rendered to the user, sized to fit MAX_DISPLAY.
+    this.displayScale = 1;
+    // Tracks whether the working canvas has transparency (post-circle), so
+    // export() can pick PNG vs JPEG correctly.
+    this.hasAlpha = false;
+    this.mode = "none";
+    this.cropRect = null;
+    // display-canvas coords
+    // Drag state for crop interaction.
+    this.dragKind = null;
+    this.dragStart = null;
+    this.onPointerMove = (e) => {
+      if (!this.dragKind || !this.dragStart || !this.cropRect) return;
+      const dx = e.clientX - this.dragStart.px;
+      const dy = e.clientY - this.dragStart.py;
+      const start = this.dragStart.rect;
+      const maxW = this.displayCanvas.width;
+      const maxH = this.displayCanvas.height;
+      const min = 24;
+      let { x, y, w, h } = start;
+      switch (this.dragKind) {
+        case "move":
+          x = clamp(start.x + dx, 0, maxW - start.w);
+          y = clamp(start.y + dy, 0, maxH - start.h);
+          break;
+        case "nw": {
+          const nx = clamp(start.x + dx, 0, start.x + start.w - min);
+          const ny = clamp(start.y + dy, 0, start.y + start.h - min);
+          w = start.w + (start.x - nx);
+          h = start.h + (start.y - ny);
+          x = nx;
+          y = ny;
+          break;
+        }
+        case "ne": {
+          const nw = clamp(start.w + dx, min, maxW - start.x);
+          const ny = clamp(start.y + dy, 0, start.y + start.h - min);
+          h = start.h + (start.y - ny);
+          w = nw;
+          y = ny;
+          break;
+        }
+        case "sw": {
+          const nx = clamp(start.x + dx, 0, start.x + start.w - min);
+          const nh = clamp(start.h + dy, min, maxH - start.y);
+          w = start.w + (start.x - nx);
+          h = nh;
+          x = nx;
+          break;
+        }
+        case "se":
+          w = clamp(start.w + dx, min, maxW - start.x);
+          h = clamp(start.h + dy, min, maxH - start.y);
+          break;
+      }
+      this.cropRect = { x, y, w, h };
+      this.updateCropBox();
+    };
+    this.onPointerUp = () => {
+      this.dragKind = null;
+      this.dragStart = null;
+      document.removeEventListener("pointermove", this.onPointerMove);
+      document.removeEventListener("pointerup", this.onPointerUp);
+    };
+  }
+  async open() {
+    this.mount();
+    try {
+      await this.loadOriginalIntoWorking();
+      if (this.opts.originalFile && this.opts.originalFile !== this.opts.file) {
+        this.markEdited(true);
+      }
+      this.draw();
+    } catch (err) {
+      this.canvasWrap.textContent = `Couldn't load image: ${err.message}`;
+    }
+  }
+  close() {
+    document.removeEventListener("pointermove", this.onPointerMove);
+    document.removeEventListener("pointerup", this.onPointerUp);
+    this.root.remove();
+  }
+  // ---- mount / dom --------------------------------------------------------
+  mount() {
+    this.root = el("div", "us-editor");
+    const header = el("div", "us-editor-header");
+    const back = document.createElement("button");
+    back.type = "button";
+    back.className = "us-editor-back";
+    back.setAttribute("aria-label", "Back");
+    back.innerHTML = ICON.back;
+    back.onclick = () => {
+      this.opts.onCancel();
+      this.close();
+    };
+    header.appendChild(back);
+    header.appendChild(el("div", "us-editor-title", this.opts.title));
+    this.root.appendChild(header);
+    this.canvasWrap = el("div", "us-editor-canvas-wrap");
+    this.displayCanvas = document.createElement("canvas");
+    this.displayCanvas.className = "us-editor-canvas";
+    this.canvasWrap.appendChild(this.displayCanvas);
+    this.root.appendChild(this.canvasWrap);
+    const toolbar = el("div", "us-editor-toolbar");
+    this.cropTool = makeTool("Crop", ICON.crop);
+    this.cropTool.onclick = () => this.toggleCropMode();
+    this.circleTool = makeTool("Circle", ICON.circle);
+    this.circleTool.onclick = () => this.applyCircle();
+    this.rotateTool = makeTool("Rotate 90\xB0", ICON.rotate);
+    this.rotateTool.onclick = () => this.applyRotate();
+    this.revertTool = makeTool("Revert", ICON.undo);
+    this.revertTool.onclick = () => this.revert();
+    this.revertTool.disabled = true;
+    toolbar.appendChild(this.cropTool);
+    toolbar.appendChild(this.circleTool);
+    toolbar.appendChild(this.rotateTool);
+    toolbar.appendChild(el("div", "us-tool-spacer"));
+    toolbar.appendChild(this.revertTool);
+    this.root.appendChild(toolbar);
+    const footer = el("div", "us-editor-footer");
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "us-btn";
+    cancel.textContent = "Cancel";
+    cancel.onclick = () => {
+      this.opts.onCancel();
+      this.close();
+    };
+    this.applyBtn = document.createElement("button");
+    this.applyBtn.type = "button";
+    this.applyBtn.className = "us-btn us-btn-primary";
+    this.applyBtn.innerHTML = `${ICON.check} <span>Apply</span>`;
+    this.applyBtn.onclick = () => this.applyAndClose();
+    footer.appendChild(cancel);
+    footer.appendChild(this.applyBtn);
+    this.root.appendChild(footer);
+    this.opts.host.appendChild(this.root);
+  }
+  // ---- image loading ------------------------------------------------------
+  async loadOriginalIntoWorking() {
+    const img = await loadImage(this.opts.file);
+    const c = document.createElement("canvas");
+    c.width = img.naturalWidth;
+    c.height = img.naturalHeight;
+    const ctx = c.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D context unavailable");
+    ctx.drawImage(img, 0, 0);
+    this.working = c;
+    this.hasAlpha = looksLikePngMime(this.opts.file.type);
+    this.markEdited(false);
+  }
+  // For Revert. Loads the true original (passed-in `originalFile`, or `file`
+  // if the caller didn't distinguish).
+  async loadTrueOriginalIntoWorking() {
+    const source = this.opts.originalFile ?? this.opts.file;
+    const img = await loadImage(source);
+    const c = document.createElement("canvas");
+    c.width = img.naturalWidth;
+    c.height = img.naturalHeight;
+    const ctx = c.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D context unavailable");
+    ctx.drawImage(img, 0, 0);
+    this.working = c;
+    this.hasAlpha = looksLikePngMime(source.type);
+    this.markEdited(false);
+  }
+  // ---- rendering ----------------------------------------------------------
+  draw() {
+    const { width: ww, height: wh } = this.working;
+    const scale = Math.min(1, MAX_DISPLAY / Math.max(ww, wh));
+    const dw = Math.max(1, Math.round(ww * scale));
+    const dh = Math.max(1, Math.round(wh * scale));
+    this.displayCanvas.width = dw;
+    this.displayCanvas.height = dh;
+    this.displayScale = scale;
+    const ctx = this.displayCanvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, dw, dh);
+    ctx.drawImage(this.working, 0, 0, dw, dh);
+    this.updateCropBox();
+  }
+  // ---- mode: crop ---------------------------------------------------------
+  toggleCropMode() {
+    if (this.mode === "crop") {
+      this.applyCrop();
+    } else {
+      this.enterCropMode();
+    }
+  }
+  enterCropMode() {
+    this.mode = "crop";
+    this.cropTool.dataset.active = "true";
+    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 };
+    this.renderCropBox();
+  }
+  exitCropMode() {
+    this.mode = "none";
+    this.cropTool.removeAttribute("data-active");
+    this.cropTool.innerHTML = `${ICON.crop} <span>Crop</span>`;
+    this.cropRect = null;
+    if (this.cropBox) {
+      this.cropBox.remove();
+      this.cropBox = null;
+    }
+  }
+  renderCropBox() {
+    if (!this.cropRect) return;
+    if (this.cropBox) this.cropBox.remove();
+    const box = el("div", "us-crop-box");
+    for (const pos of ["nw", "ne", "sw", "se"]) {
+      const h = el("div", "us-crop-handle");
+      h.dataset.pos = pos;
+      h.addEventListener("pointerdown", (e) => this.beginDrag(e, pos));
+      box.appendChild(h);
+    }
+    box.addEventListener("pointerdown", (e) => {
+      const target = e.target;
+      if (target.classList.contains("us-crop-handle")) return;
+      this.beginDrag(e, "move");
+    });
+    this.canvasWrap.appendChild(box);
+    this.cropBox = box;
+    this.updateCropBox();
+  }
+  updateCropBox() {
+    if (!this.cropBox || !this.cropRect) return;
+    const canvasRect = this.displayCanvas.getBoundingClientRect();
+    const wrapRect = this.canvasWrap.getBoundingClientRect();
+    const left = canvasRect.left - wrapRect.left + this.cropRect.x;
+    const top = canvasRect.top - wrapRect.top + this.cropRect.y;
+    this.cropBox.style.left = `${left}px`;
+    this.cropBox.style.top = `${top}px`;
+    this.cropBox.style.width = `${this.cropRect.w}px`;
+    this.cropBox.style.height = `${this.cropRect.h}px`;
+  }
+  // ---- drag handlers (crop) ----------------------------------------------
+  beginDrag(e, kind) {
+    if (!this.cropRect) return;
+    e.preventDefault();
+    this.dragKind = kind;
+    this.dragStart = { px: e.clientX, py: e.clientY, rect: { ...this.cropRect } };
+    document.addEventListener("pointermove", this.onPointerMove);
+    document.addEventListener("pointerup", this.onPointerUp);
+  }
+  // ---- operations (mutate working canvas) --------------------------------
+  applyCrop() {
+    if (!this.cropRect) {
+      this.exitCropMode();
+      return;
+    }
+    const s = this.displayScale;
+    const sx = Math.round(this.cropRect.x / s);
+    const sy = Math.round(this.cropRect.y / s);
+    const sw = Math.round(this.cropRect.w / s);
+    const sh = Math.round(this.cropRect.h / s);
+    const next = document.createElement("canvas");
+    next.width = sw;
+    next.height = sh;
+    const ctx = next.getContext("2d");
+    if (!ctx) return;
+    ctx.drawImage(this.working, sx, sy, sw, sh, 0, 0, sw, sh);
+    this.working = next;
+    this.exitCropMode();
+    this.markEdited(true);
+    this.draw();
+  }
+  applyRotate() {
+    const { width: w, height: h } = this.working;
+    const next = document.createElement("canvas");
+    next.width = h;
+    next.height = w;
+    const ctx = next.getContext("2d");
+    if (!ctx) return;
+    ctx.translate(h, 0);
+    ctx.rotate(Math.PI / 2);
+    ctx.drawImage(this.working, 0, 0);
+    this.working = next;
+    this.exitCropMode();
+    this.markEdited(true);
+    this.draw();
+  }
+  applyCircle() {
+    const { width: w, height: h } = this.working;
+    const size = Math.min(w, h);
+    const sx = Math.round((w - size) / 2);
+    const sy = Math.round((h - size) / 2);
+    const next = document.createElement("canvas");
+    next.width = size;
+    next.height = size;
+    const ctx = next.getContext("2d");
+    if (!ctx) return;
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.clip();
+    ctx.drawImage(this.working, sx, sy, size, size, 0, 0, size, size);
+    ctx.restore();
+    this.working = next;
+    this.hasAlpha = true;
+    this.exitCropMode();
+    this.markEdited(true);
+    this.draw();
+  }
+  async revert() {
+    await this.loadTrueOriginalIntoWorking();
+    this.exitCropMode();
+    this.draw();
+  }
+  markEdited(edited) {
+    this.revertTool.disabled = !edited;
+  }
+  // ---- apply --------------------------------------------------------------
+  async applyAndClose() {
+    this.applyBtn.disabled = true;
+    try {
+      const file = await this.exportFile();
+      this.opts.onApply(file);
+      this.close();
+    } catch (err) {
+      this.applyBtn.disabled = false;
+      console.error("[union-stack] image export failed", err);
+    }
+  }
+  exportFile() {
+    return new Promise((resolve, reject) => {
+      const mime = this.hasAlpha ? "image/png" : "image/jpeg";
+      const quality = mime === "image/jpeg" ? 0.92 : void 0;
+      this.working.toBlob(
+        (blob) => {
+          if (!blob) return reject(new Error("toBlob returned null"));
+          const baseName = this.opts.file.name.replace(/\.[^.]+$/, "");
+          const ext = mime === "image/png" ? "png" : "jpg";
+          resolve(new File([blob], `${baseName}-edited.${ext}`, { type: mime }));
+        },
+        mime,
+        quality
+      );
+    });
+  }
+};
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== void 0) node.textContent = text;
+  return node;
+}
+function makeTool(label, iconHtml) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "us-tool";
+  btn.innerHTML = `${iconHtml} <span>${escapeText(label)}</span>`;
+  return btn;
+}
+function escapeText(s) {
+  return s.replace(/[&<>"']/g, (c) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  })[c]);
+}
+function clamp(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, v));
+}
+function loadImage(file) {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(img);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("decode failed"));
+    };
+    img.src = url;
+  });
+}
+function looksLikePngMime(mime) {
+  return /^image\/(png|webp|gif)$/.test(mime);
+}
+
 // src/picker/picker.ts
 function mergeConfig(server, runtime) {
   const merged = { ...runtime };
@@ -362,7 +941,7 @@ function mergeConfig(server, runtime) {
 }
 var DEFAULT_TITLE = "Upload files";
 var FOOTER_LINK = "https://unionstack.link";
-var ICON = {
+var ICON2 = {
   upload: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`,
   close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
   check: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`,
@@ -374,28 +953,39 @@ var ICON = {
   pdf: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></svg>`,
   archive: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="5" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><line x1="10" y1="13" x2="14" y2="13"/></svg>`,
   file: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`,
-  zap: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`
+  zap: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`,
+  device: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>`,
+  link: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72"/></svg>`,
+  pencil: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`
 };
 function iconForMime(mime) {
-  if (!mime) return ICON.file;
-  if (mime.startsWith("image/")) return ICON.image;
-  if (mime.startsWith("video/")) return ICON.video;
-  if (mime.startsWith("audio/")) return ICON.audio;
-  if (mime === "application/pdf") return ICON.pdf;
-  if (mime.startsWith("application/zip") || mime.includes("compressed") || mime === "application/x-tar" || mime === "application/gzip") return ICON.archive;
-  return ICON.file;
+  if (!mime) return ICON2.file;
+  if (mime.startsWith("image/")) return ICON2.image;
+  if (mime.startsWith("video/")) return ICON2.video;
+  if (mime.startsWith("audio/")) return ICON2.audio;
+  if (mime === "application/pdf") return ICON2.pdf;
+  if (mime.startsWith("application/zip") || mime.includes("compressed") || mime === "application/x-tar" || mime === "application/gzip") return ICON2.archive;
+  return ICON2.file;
 }
 var Picker = class {
   constructor(client, opts) {
     this.client = client;
     this.opts = opts;
     this.$backdrop = null;
+    this.$panel = null;
     this.$list = null;
     this.$confirm = null;
     this.$cancel = null;
     this.$closeBtn = null;
     this.$input = null;
+    // Source-tab DOM (Device vs URL). Only created when both sources are enabled.
+    this.$deviceSource = null;
+    this.$urlSource = null;
+    this.$urlInput = null;
+    this.$urlHint = null;
+    this.$urlAddBtn = null;
     this.items = [];
+    this.editor = null;
     this.abortCtrl = new AbortController();
     this.uploadStarted = false;
     this.resolved = false;
@@ -438,38 +1028,50 @@ var Picker = class {
     root.addEventListener("click", (e) => {
       if (e.target === root && !this.uploadStarted) this.cancel();
     });
-    const panel = el("div", "us-picker");
-    const header = el("div", "us-picker-header");
-    const logoWrap = el("div", "us-picker-header-logo");
+    const panel = el2("div", "us-picker");
+    const header = el2("div", "us-picker-header");
+    const logoWrap = el2("div", "us-picker-header-logo");
     if (this.opts.branding?.logoUrl) {
       const logo = document.createElement("img");
       logo.src = this.opts.branding.logoUrl;
       logo.alt = "";
       logoWrap.appendChild(logo);
     } else {
-      logoWrap.innerHTML = ICON.zap;
+      logoWrap.innerHTML = ICON2.zap;
     }
     header.appendChild(logoWrap);
-    const title = el("div", "us-picker-title", this.opts.branding?.title ?? DEFAULT_TITLE);
+    const title = el2("div", "us-picker-title", this.opts.branding?.title ?? DEFAULT_TITLE);
     header.appendChild(title);
     this.$closeBtn = document.createElement("button");
     this.$closeBtn.type = "button";
     this.$closeBtn.className = "us-picker-close";
     this.$closeBtn.setAttribute("aria-label", "Close");
-    this.$closeBtn.innerHTML = ICON.close;
+    this.$closeBtn.innerHTML = ICON2.close;
     this.$closeBtn.onclick = () => this.cancel();
     header.appendChild(this.$closeBtn);
     panel.appendChild(header);
-    const body = el("div", "us-picker-body");
-    body.appendChild(this.renderDropzone());
-    this.$list = el("div", "us-file-list");
+    const body = el2("div", "us-picker-body");
+    const sources = this.resolvedSources();
+    if (sources.length > 1) {
+      body.appendChild(this.renderSourceTabs(sources));
+    }
+    if (sources.includes("device")) {
+      this.$deviceSource = this.renderDropzone();
+      body.appendChild(this.$deviceSource);
+    }
+    if (sources.includes("url")) {
+      this.$urlSource = this.renderUrlSource();
+      body.appendChild(this.$urlSource);
+    }
+    this.activateSource(sources[0] ?? "device");
+    this.$list = el2("div", "us-file-list");
     body.appendChild(this.$list);
     panel.appendChild(body);
-    const autoUpload = this.opts.autoUpload !== false;
-    const actions = el("div", "us-actions");
-    this.$summary = el("div", "us-actions-summary", "");
+    const autoUpload = this.opts.autoUpload === true;
+    const actions = el2("div", "us-actions");
+    this.$summary = el2("div", "us-actions-summary", "");
     actions.appendChild(this.$summary);
-    const buttons = el("div", "us-actions-buttons");
+    const buttons = el2("div", "us-actions-buttons");
     this.$cancel = document.createElement("button");
     this.$cancel.type = "button";
     this.$cancel.className = "us-btn";
@@ -480,7 +1082,7 @@ var Picker = class {
       this.$confirm = document.createElement("button");
       this.$confirm.type = "button";
       this.$confirm.className = "us-btn us-btn-primary";
-      this.$confirm.innerHTML = `${ICON.upload} <span>Upload</span>`;
+      this.$confirm.innerHTML = `${ICON2.upload} <span>Upload</span>`;
       this.$confirm.disabled = true;
       this.$confirm.onclick = () => this.startUpload();
       buttons.appendChild(this.$confirm);
@@ -488,24 +1090,123 @@ var Picker = class {
     actions.appendChild(buttons);
     panel.appendChild(actions);
     if (!this.opts.branding?.hideFooter) {
-      const footer = el("div", "us-footer");
-      footer.innerHTML = `${ICON.zap} <span>Powered by <a href="${FOOTER_LINK}" target="_blank" rel="noopener">UnionStack</a></span>`;
+      const footer = el2("div", "us-footer");
+      footer.innerHTML = `${ICON2.zap} <span>Powered by <a href="${FOOTER_LINK}" target="_blank" rel="noopener">UnionStack</a></span>`;
       panel.appendChild(footer);
     }
     root.appendChild(panel);
     (this.opts.container ?? document.body).appendChild(root);
     this.$backdrop = root;
+    this.$panel = panel;
+  }
+  // Resolves which sources to show, honoring opts.fromSources, defaulting to
+  // both. Empty arrays fall back to ['device'] — we never want to leave a
+  // picker with no way to add files.
+  resolvedSources() {
+    const raw = this.opts.fromSources;
+    if (!raw || raw.length === 0) return ["device", "url"];
+    return raw;
+  }
+  renderSourceTabs(sources) {
+    const tabs = el2("div", "us-source-tabs");
+    tabs.setAttribute("role", "tablist");
+    for (const src of sources) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "us-source-tab";
+      btn.setAttribute("role", "tab");
+      btn.dataset.source = src;
+      btn.innerHTML = src === "device" ? `${ICON2.device} <span>My Device</span>` : `${ICON2.link} <span>Link</span>`;
+      btn.onclick = () => this.activateSource(src);
+      tabs.appendChild(btn);
+    }
+    return tabs;
+  }
+  activateSource(source) {
+    if (this.$deviceSource) {
+      const active = source === "device";
+      this.$deviceSource.style.display = active ? "" : "none";
+    }
+    if (this.$urlSource) {
+      this.$urlSource.dataset.active = source === "url" ? "true" : "false";
+    }
+    const tabs = this.$panel?.querySelectorAll(".us-source-tab");
+    tabs?.forEach((t) => {
+      t.dataset.active = t.dataset.source === source ? "true" : "false";
+    });
+  }
+  renderUrlSource() {
+    const wrap = el2("div", "us-url-source");
+    const form = el2("div", "us-url-form");
+    const input = document.createElement("input");
+    input.type = "url";
+    input.className = "us-url-input";
+    input.placeholder = "https://example.com/photo.jpg";
+    input.setAttribute("aria-label", "File URL");
+    input.onkeydown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this.handleUrlAdd();
+      }
+    };
+    this.$urlInput = input;
+    const add = document.createElement("button");
+    add.type = "button";
+    add.className = "us-btn us-btn-primary";
+    add.textContent = "Add file";
+    add.onclick = () => this.handleUrlAdd();
+    this.$urlAddBtn = add;
+    form.appendChild(input);
+    form.appendChild(add);
+    wrap.appendChild(form);
+    const hint = el2("div", "us-url-hint", "Paste a direct file URL. The host must allow CORS so we can fetch it from the browser.");
+    this.$urlHint = hint;
+    wrap.appendChild(hint);
+    return wrap;
+  }
+  async handleUrlAdd() {
+    if (!this.$urlInput || !this.$urlAddBtn || !this.$urlHint) return;
+    const url = this.$urlInput.value.trim();
+    if (!url) {
+      this.setUrlHint("Enter a URL first.", true);
+      return;
+    }
+    if (!/^https?:\/\//i.test(url)) {
+      this.setUrlHint("URL must start with http:// or https://", true);
+      return;
+    }
+    this.$urlAddBtn.disabled = true;
+    const prevLabel = this.$urlAddBtn.textContent;
+    this.$urlAddBtn.textContent = "Fetching\u2026";
+    this.setUrlHint("Downloading\u2026", false);
+    try {
+      const file = await fetchUrlAsFile(url);
+      this.addFiles([file]);
+      this.$urlInput.value = "";
+      this.setUrlHint("Paste a direct file URL. The host must allow CORS so we can fetch it from the browser.", false);
+    } catch (err) {
+      const msg = err.message || "Failed to fetch URL";
+      this.setUrlHint(msg, true);
+    } finally {
+      this.$urlAddBtn.disabled = false;
+      this.$urlAddBtn.textContent = prevLabel || "Add file";
+    }
+  }
+  setUrlHint(text, isError) {
+    if (!this.$urlHint) return;
+    this.$urlHint.textContent = text;
+    this.$urlHint.dataset.error = isError ? "true" : "false";
   }
   renderDropzone() {
-    const dz = el("div", "us-dropzone");
+    const dz = el2("div", "us-dropzone");
     dz.setAttribute("role", "button");
     dz.setAttribute("tabindex", "0");
     dz.setAttribute("aria-label", "Drop files here or click to browse");
-    const icon = el("div", "us-dropzone-icon");
-    icon.innerHTML = ICON.upload;
+    const icon = el2("div", "us-dropzone-icon");
+    icon.innerHTML = ICON2.upload;
     dz.appendChild(icon);
-    dz.appendChild(el("div", "us-dropzone-title", "Drop files to upload"));
-    dz.appendChild(el("div", "us-dropzone-hint", "or click to browse from your device"));
+    dz.appendChild(el2("div", "us-dropzone-title", "Drop files to upload"));
+    dz.appendChild(el2("div", "us-dropzone-hint", "or click to browse from your device"));
     const constraintBits = [];
     if (this.opts.maxFileSize) constraintBits.push(`max ${formatBytes(this.opts.maxFileSize)}`);
     if (this.opts.accept) {
@@ -515,7 +1216,7 @@ var Picker = class {
       }
     }
     if (constraintBits.length > 0) {
-      dz.appendChild(el("div", "us-dropzone-constraints", constraintBits.join("  \xB7  ")));
+      dz.appendChild(el2("div", "us-dropzone-constraints", constraintBits.join("  \xB7  ")));
     }
     const input = document.createElement("input");
     input.type = "file";
@@ -549,8 +1250,13 @@ var Picker = class {
     return dz;
   }
   unmount() {
+    if (this.editor) {
+      this.editor.close();
+      this.editor = null;
+    }
     if (this.$backdrop?.parentNode) this.$backdrop.parentNode.removeChild(this.$backdrop);
     this.$backdrop = null;
+    this.$panel = null;
     for (const item of this.items) {
       if (item.objectUrl) URL.revokeObjectURL(item.objectUrl);
     }
@@ -567,6 +1273,8 @@ var Picker = class {
         const item2 = {
           uploadId: cryptoId(),
           file,
+          originalFile: file,
+          edited: false,
           state: "failed",
           progress: 0,
           error: `File exceeds ${formatBytes(this.opts.maxFileSize)} limit`
@@ -578,6 +1286,8 @@ var Picker = class {
       const item = {
         uploadId: cryptoId(),
         file,
+        originalFile: file,
+        edited: false,
         state: "queued",
         progress: 0
       };
@@ -585,7 +1295,7 @@ var Picker = class {
       this.renderItem(item);
     }
     this.refreshConfirm();
-    const autoUpload = this.opts.autoUpload !== false;
+    const autoUpload = this.opts.autoUpload === true;
     const hasQueued = this.items.some((i) => i.state === "queued");
     if (autoUpload && hasQueued && !this.uploadStarted) {
       requestAnimationFrame(() => {
@@ -595,12 +1305,12 @@ var Picker = class {
   }
   renderItem(item) {
     if (!this.$list) return;
-    const row = el("div", "us-file");
+    const row = el2("div", "us-file");
     row.dataset.state = item.state;
     row.dataset.uploadId = item.uploadId;
     const idx = Math.min(this.items.length - 1, 8);
     row.style.animationDelay = `${idx * 35}ms`;
-    const thumb = el("div", "us-file-thumb");
+    const thumb = el2("div", "us-file-thumb");
     if (item.file.type.startsWith("image/") && typeof URL !== "undefined" && URL.createObjectURL) {
       try {
         const objectUrl = URL.createObjectURL(item.file);
@@ -614,18 +1324,32 @@ var Picker = class {
       thumb.innerHTML = iconForMime(item.file.type);
     }
     row.appendChild(thumb);
-    const main = el("div", "us-file-main");
-    const row1 = el("div", "us-file-row1");
-    row1.appendChild(el("div", "us-file-name", item.file.name));
-    const meta = el("div", "us-file-meta", formatBytes(item.file.size));
+    const main = el2("div", "us-file-main");
+    const row1 = el2("div", "us-file-row1");
+    row1.appendChild(el2("div", "us-file-name", item.file.name));
+    const meta = el2("div", "us-file-meta", formatBytes(item.file.size));
     row1.appendChild(meta);
     main.appendChild(row1);
-    const progress = el("div", "us-file-progress");
-    const bar = el("div", "us-file-progress-bar");
+    const progress = el2("div", "us-file-progress");
+    const bar = el2("div", "us-file-progress-bar");
     progress.appendChild(bar);
     main.appendChild(progress);
     row.appendChild(main);
-    const status = el("div", "us-file-status");
+    const isImage = item.file.type.startsWith("image/");
+    const editingEnabled = this.opts.imageEditing !== false;
+    if (isImage && editingEnabled && item.state === "queued") {
+      const edit = document.createElement("button");
+      edit.type = "button";
+      edit.className = "us-file-action";
+      edit.setAttribute("aria-label", "Edit image");
+      edit.title = "Edit image";
+      edit.innerHTML = ICON2.pencil;
+      edit.dataset.edited = item.edited ? "true" : "false";
+      edit.onclick = () => this.openEditor(item);
+      row.appendChild(edit);
+      item.$edit = edit;
+    }
+    const status = el2("div", "us-file-status");
     status.setAttribute("aria-label", this.statusLabel(item));
     status.innerHTML = this.statusIcon(item.state);
     row.appendChild(status);
@@ -633,21 +1357,74 @@ var Picker = class {
     item.$bar = bar;
     item.$status = status;
     item.$meta = meta;
+    item.$thumb = thumb;
     this.$list.appendChild(row);
     this.updateSummary();
   }
+  // Swap a queued item's file with an edited version. Refreshes thumbnail and
+  // meta in place so the row identity is preserved (uploadId, position).
+  replaceItemFile(item, nextFile, edited) {
+    item.file = nextFile;
+    item.edited = edited;
+    if (item.objectUrl) URL.revokeObjectURL(item.objectUrl);
+    item.objectUrl = void 0;
+    if (item.$thumb) {
+      item.$thumb.style.backgroundImage = "";
+      item.$thumb.removeAttribute("data-image");
+      if (nextFile.type.startsWith("image/") && typeof URL !== "undefined" && URL.createObjectURL) {
+        try {
+          const objectUrl = URL.createObjectURL(nextFile);
+          item.objectUrl = objectUrl;
+          item.$thumb.style.backgroundImage = `url("${objectUrl}")`;
+          item.$thumb.dataset.image = "true";
+          item.$thumb.innerHTML = "";
+        } catch {
+          item.$thumb.innerHTML = iconForMime(nextFile.type);
+        }
+      } else {
+        item.$thumb.innerHTML = iconForMime(nextFile.type);
+      }
+    }
+    if (item.$meta) item.$meta.textContent = formatBytes(nextFile.size);
+    if (item.$row) {
+      const nameEl = item.$row.querySelector(".us-file-name");
+      if (nameEl) nameEl.textContent = nextFile.name;
+    }
+    if (item.$edit) item.$edit.dataset.edited = edited ? "true" : "false";
+  }
+  // Mount the image editor overlay on top of the picker panel for the given
+  // queued item. The editor calls back with either an edited File (Apply) or
+  // nothing (Cancel/Back).
+  openEditor(item) {
+    if (!this.$panel || this.editor || item.state !== "queued") return;
+    this.editor = new ImageEditor({
+      host: this.$panel,
+      file: item.file,
+      originalFile: item.originalFile,
+      title: item.originalFile.name,
+      onApply: (edited) => {
+        const wasEdited = edited !== item.originalFile;
+        this.replaceItemFile(item, edited, wasEdited);
+        this.editor = null;
+      },
+      onCancel: () => {
+        this.editor = null;
+      }
+    });
+    this.editor.open();
+  }
   statusIcon(state) {
     switch (state) {
       case "uploading":
-        return ICON.spinner;
+        return ICON2.spinner;
       case "done":
-        return ICON.check;
+        return ICON2.check;
       case "failed":
-        return ICON.alert;
+        return ICON2.alert;
       case "cancelled":
-        return ICON.alert;
+        return ICON2.alert;
       default:
-        return ICON.spinner;
+        return ICON2.spinner;
     }
   }
   statusLabel(item) {
@@ -813,7 +1590,7 @@ var Picker = class {
     this.resolvePromise(fallback);
   }
 };
-function el(tag, className, text) {
+function el2(tag, className, text) {
   const node = document.createElement(tag);
   if (className) node.className = className;
   if (text !== void 0) node.textContent = text;
@@ -831,6 +1608,56 @@ function cryptoId() {
   }
   return Math.random().toString(36).slice(2) + Date.now().toString(36);
 }
+async function fetchUrlAsFile(url) {
+  let res;
+  try {
+    res = await fetch(url, { mode: "cors", credentials: "omit" });
+  } catch {
+    throw new Error(`Could not reach ${shortHost(url)} \u2014 check the URL or CORS.`);
+  }
+  if (!res.ok) throw new Error(`Server returned ${res.status} \u2014 file unavailable.`);
+  const blob = await res.blob();
+  const filename = filenameFromUrl(url) || "download";
+  const type = blob.type || guessMimeFromExt(filename);
+  return new File([blob], filename, { type });
+}
+function shortHost(url) {
+  try {
+    return new URL(url).host;
+  } catch {
+    return "that host";
+  }
+}
+function filenameFromUrl(url) {
+  try {
+    const u = new URL(url);
+    const last = u.pathname.split("/").filter(Boolean).pop();
+    return last ? decodeURIComponent(last) : "";
+  } catch {
+    return "";
+  }
+}
+function guessMimeFromExt(filename) {
+  const ext = filename.toLowerCase().split(".").pop() || "";
+  const map = {
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    gif: "image/gif",
+    webp: "image/webp",
+    svg: "image/svg+xml",
+    pdf: "application/pdf",
+    mp4: "video/mp4",
+    mov: "video/quicktime",
+    mp3: "audio/mpeg",
+    wav: "audio/wav",
+    zip: "application/zip",
+    json: "application/json",
+    txt: "text/plain",
+    csv: "text/csv"
+  };
+  return map[ext] || "application/octet-stream";
+}
 function openPicker(client, opts) {
   const picker = new Picker(client, opts);
   return {