@scaleflex/uploader 0.1.0

package/dist/sfx-uploader-C2lWIRnU.js

@@ -0,0 +1,3789 @@
+import { LitElement as w, css as _, svg as fe, html as c, nothing as h } from "lit";
+import { property as x, state as g, query as he } from "lit/decorators.js";
+import { unsafeSVG as ge } from "lit/directives/unsafe-svg.js";
+class xe {
+  constructor(e) {
+    this.listeners = /* @__PURE__ */ new Set(), this._notifying = !1, this._pendingState = null, this.state = e;
+  }
+  getState() {
+    return this.state;
+  }
+  setState(e) {
+    if (this._notifying) {
+      this._pendingState = { ...this._pendingState || {}, ...e };
+      return;
+    }
+    const t = this.state;
+    this.state = { ...t, ...e }, this._notifying = !0;
+    try {
+      this.listeners.forEach((r) => r(this.state, t));
+    } finally {
+      this._notifying = !1;
+    }
+    if (this._pendingState) {
+      const r = this._pendingState;
+      this._pendingState = null, this.setState(r);
+    }
+  }
+  subscribe(e) {
+    return this.listeners.add(e), () => this.listeners.delete(e);
+  }
+  destroy() {
+    this.listeners.clear();
+  }
+}
+function y(i, e, t) {
+  const r = i.getState().files, s = r.get(e);
+  if (!s) return;
+  const o = new Map(r);
+  o.set(e, { ...s, ...t }), i.setState({ files: o });
+}
+function j(i, e) {
+  const t = new Map(i.getState().files);
+  t.set(e.id, e), i.setState({ files: t });
+}
+function me(i, e) {
+  const t = i.getState().files;
+  if (!t.has(e)) return;
+  const r = new Map(t);
+  r.delete(e), i.setState({ files: r });
+}
+function ve() {
+  return new xe({
+    files: /* @__PURE__ */ new Map(),
+    queueConfig: {
+      concurrency: 3,
+      autoProceed: !1,
+      retryConfig: {
+        maxRetries: 0,
+        baseDelay: 1e3,
+        maxDelay: 3e4,
+        backoffFactor: 2
+      }
+    },
+    isPaused: !1,
+    restrictions: {
+      maxFileSize: null,
+      maxTotalFilesSize: null,
+      maxNumberOfFiles: null,
+      minNumberOfFiles: null,
+      allowedFileTypes: null,
+      blockedFileTypes: null
+    },
+    targetFolder: "/",
+    totalProgress: 0,
+    totalSpeed: 0,
+    totalBytesUploaded: 0,
+    totalBytes: 0,
+    isUploading: !1
+  });
+}
+class ye {
+  constructor(e, t) {
+    this.host = e, this.store = t, e.addController(this);
+  }
+  get state() {
+    return this.store.getState();
+  }
+  setState(e) {
+    this.store.setState(e);
+  }
+  hostConnected() {
+    this.unsubscribe = this.store.subscribe(() => {
+      this.host.requestUpdate();
+    });
+  }
+  hostDisconnected() {
+    var e;
+    (e = this.unsubscribe) == null || e.call(this);
+  }
+}
+function we(i, e) {
+  const t = new XMLHttpRequest();
+  let r = !1;
+  const o = `${e.apiBase.replace(/\/+$/, "")}/v4/files?folder=${encodeURIComponent(e.folder)}`;
+  t.open("POST", o);
+  for (const [a, l] of Object.entries(e.authHeaders))
+    t.setRequestHeader(a, l);
+  t.upload.addEventListener("progress", (a) => {
+    a.lengthComputable && !r && e.onProgress(a.loaded, a.total);
+  }), t.addEventListener("load", () => {
+    if (r) return;
+    let a;
+    try {
+      a = JSON.parse(t.responseText);
+    } catch {
+      e.onError(new Error(`Invalid JSON response (HTTP ${t.status})`));
+      return;
+    }
+    t.status >= 200 && t.status < 300 && a.status === "success" ? e.onComplete(a) : e.onError(new Error(a.msg || `Upload failed (HTTP ${t.status})`));
+  }), t.addEventListener("error", () => {
+    r || e.onError(new Error("Network error — check your connection"));
+  }), t.addEventListener("timeout", () => {
+    r || e.onError(new Error("Upload timed out"));
+  });
+  const n = new FormData();
+  if (i.file) {
+    const a = {
+      name: i.name,
+      type: i.type
+    };
+    Object.keys(i.meta).length > 0 && (a.meta = i.meta), i.tags.length > 0 && (a.tags = i.tags), n.append("info[files[]]", JSON.stringify(a)), n.append("files[]", i.file, i.name);
+  }
+  return t.timeout = 6e4, t.send(n), {
+    abort() {
+      r = !0, t.abort();
+    }
+  };
+}
+function _e(i, e) {
+  const t = new XMLHttpRequest();
+  let r = !1;
+  const o = `${e.apiBase.replace(/\/+$/, "")}/v4/files/upload_url`;
+  t.open("POST", o);
+  for (const [a, l] of Object.entries(e.authHeaders))
+    t.setRequestHeader(a, l);
+  if (t.setRequestHeader("Content-Type", "application/json"), t.addEventListener("load", () => {
+    if (r) return;
+    let a;
+    try {
+      a = JSON.parse(t.responseText);
+    } catch {
+      e.onError(new Error(`Invalid JSON response (HTTP ${t.status})`));
+      return;
+    }
+    t.status >= 200 && t.status < 300 && a.status === "success" ? e.onComplete(a) : e.onError(new Error(a.msg || `Upload failed (HTTP ${t.status})`));
+  }), t.addEventListener("error", () => {
+    r || e.onError(new Error("Network error — check your connection"));
+  }), t.addEventListener("timeout", () => {
+    r || e.onError(new Error("Upload timed out"));
+  }), !i.remoteUrl)
+    return e.onError(new Error("Remote URL is required for URL upload")), { abort() {
+    } };
+  const n = {
+    files_urls: [{ url: i.remoteUrl, name: i.name }],
+    dir: e.folder
+  };
+  return t.timeout = 6e4, t.send(JSON.stringify(n)), {
+    abort() {
+      r = !0, t.abort();
+    }
+  };
+}
+function N(i) {
+  return {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+    "uppy-auth-token": i
+  };
+}
+function O(i) {
+  return i.replace(/\/+$/, "");
+}
+const ke = {
+  "google-drive": "drive",
+  dropbox: "dropbox",
+  onedrive: "onedrive",
+  box: "box",
+  instagram: "instagram",
+  facebook: "facebook",
+  unsplash: "unsplash"
+};
+function M(i) {
+  return ke[i] ?? i;
+}
+function nt(i, e) {
+  const t = O(i), r = btoa(JSON.stringify({ origin: window.location.origin })), s = M(e);
+  return `${t}/${s}/connect?state=${encodeURIComponent(r)}`;
+}
+async function at(i, e, t, r = "") {
+  const s = O(i), o = r ? `/${r}` : "", n = M(e), a = await fetch(`${s}/${n}/list${o}`, {
+    method: "GET",
+    headers: N(t),
+    credentials: "same-origin"
+  });
+  if (a.status === 401)
+    throw new Q();
+  if (!a.ok) {
+    const l = await a.json().catch(() => null);
+    throw new Error((l == null ? void 0 : l.message) || `Companion list failed (HTTP ${a.status})`);
+  }
+  return a.json();
+}
+async function lt(i, e, t) {
+  const r = O(i), s = await fetch(`${r}/${t}`, {
+    method: "GET",
+    headers: N(e),
+    credentials: "same-origin"
+  });
+  if (s.status === 401)
+    throw new Q();
+  if (!s.ok) {
+    const o = await s.json().catch(() => null);
+    throw new Error((o == null ? void 0 : o.message) || `Companion list failed (HTTP ${s.status})`);
+  }
+  return s.json();
+}
+async function ct(i, e, t, r) {
+  const s = O(i), o = M(e), n = r ? `q=${encodeURIComponent(t)}&${r}` : `q=${encodeURIComponent(t)}`, a = await fetch(`${s}/search/${o}/list?${n}`, {
+    method: "GET",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json"
+    },
+    credentials: "same-origin"
+  });
+  if (!a.ok) {
+    const l = await a.json().catch(() => null);
+    throw new Error((l == null ? void 0 : l.message) || `Search failed (HTTP ${a.status})`);
+  }
+  return a.json();
+}
+async function Ce(i, e, t, r, s, o = !1) {
+  const n = O(i), a = M(e), l = o ? `${n}/search/${a}/get/${r}` : `${n}/${a}/get/${r}`, p = o ? { Accept: "application/json", "Content-Type": "application/json" } : N(t), b = await fetch(l, {
+    method: "POST",
+    headers: p,
+    credentials: "same-origin",
+    body: JSON.stringify({
+      ...s,
+      httpMethod: s.httpMethod ?? "POST",
+      useFormData: s.useFormData ?? !0,
+      fieldname: s.fieldname ?? "files[]"
+    })
+  });
+  if (b.status === 401)
+    throw new Q();
+  if (!b.ok) {
+    const u = await b.json().catch(() => null);
+    throw new Error((u == null ? void 0 : u.message) || `Companion upload failed (HTTP ${b.status})`);
+  }
+  return b.json();
+}
+async function dt(i, e, t) {
+  const r = O(i), s = M(e), o = await fetch(`${r}/${s}/logout`, {
+    method: "GET",
+    headers: N(t),
+    credentials: "same-origin"
+  });
+  return o.ok ? o.json() : { ok: !1, revoked: !1 };
+}
+function Ee(i) {
+  var s;
+  const t = ((s = /^(?:https?:\/\/|\/\/)?(?:[^@\n]+@)?(?:www\.)?([^\n]+)/i.exec(i)) == null ? void 0 : s[1]) ?? i;
+  return `${location.protocol === "https:" ? "wss" : "ws"}://${t}`;
+}
+class Q extends Error {
+  constructor() {
+    super("Authentication expired"), this.name = "AuthExpiredError";
+  }
+}
+function $e(i, e) {
+  const t = i.remoteInfo;
+  if (!t)
+    return e.onError(new Error("remoteInfo is required for companion upload")), { abort() {
+    } };
+  let r = !1, s = null;
+  const n = `${e.apiBase.replace(/\/+$/, "")}/v4/files?folder=${encodeURIComponent(e.folder)}`, a = {};
+  i.meta && Object.keys(i.meta).length > 0 && Object.assign(a, i.meta), i.tags && i.tags.length > 0 && (a.tags = i.tags);
+  const l = !t.token;
+  return Ce(t.companionUrl, t.provider, t.token, t.requestPath, {
+    fileId: t.fileId,
+    endpoint: n,
+    headers: e.authHeaders,
+    size: t.size,
+    metadata: Object.keys(a).length > 0 ? a : void 0
+  }, l).then((p) => {
+    if (r) return;
+    const u = `${Ee(t.companionUrl)}/api/${p.token}`;
+    try {
+      s = new WebSocket(u);
+    } catch {
+      e.onError(new Error("Failed to connect to upload progress channel"));
+      return;
+    }
+    s.onmessage = (d) => {
+      var v, E, S;
+      if (!r)
+        try {
+          const F = JSON.parse(d.data);
+          switch (F.action) {
+            case "progress": {
+              const k = F.payload, C = k.bytesUploaded ?? 0, L = k.bytesTotal ?? (t.size || 1);
+              e.onProgress(C, L);
+              break;
+            }
+            case "success": {
+              const k = F.payload;
+              if (s == null || s.close(), (v = k.response) != null && v.responseText)
+                try {
+                  const C = JSON.parse(k.response.responseText);
+                  if (C.status === "success") {
+                    e.onComplete(C);
+                    return;
+                  }
+                  e.onError(new Error(C.msg || "Upload failed"));
+                  return;
+                } catch {
+                }
+              e.onError(new Error("Upload completed but no valid response received"));
+              break;
+            }
+            case "error": {
+              s == null || s.close();
+              const k = F.payload;
+              let C = ((E = k.error) == null ? void 0 : E.message) || "Upload failed";
+              if ((S = k.response) != null && S.responseText)
+                try {
+                  const L = JSON.parse(k.response.responseText);
+                  C = L.hint || L.msg || L.message || C;
+                } catch {
+                }
+              e.onError(new Error(C));
+              break;
+            }
+          }
+        } catch {
+        }
+    }, s.onerror = () => {
+      r || e.onError(new Error("Upload progress connection failed"));
+    }, s.onclose = () => {
+      s = null;
+    };
+  }).catch((p) => {
+    r || e.onError(p instanceof Error ? p : new Error(String(p)));
+  }), {
+    abort() {
+      if (r = !0, s) {
+        try {
+          s.send(JSON.stringify({ action: "cancel", payload: {} }));
+        } catch {
+        }
+        s.close(), s = null;
+      }
+    }
+  };
+}
+class Se {
+  constructor(e, t) {
+    this.activeUploads = /* @__PURE__ */ new Map(), this.retryTimers = /* @__PURE__ */ new Map(), this.unsubscribe = null, this.store = e, this.config = t;
+  }
+  /**
+   * Start processing the queue. Subscribes to store changes to
+   * automatically pick up newly queued files.
+   */
+  start() {
+    this.unsubscribe || (this.unsubscribe = this.store.subscribe(() => this.processQueue()), this.processQueue());
+  }
+  /**
+   * Upload all queued files. Transitions idle files → queued, then processes.
+   */
+  uploadAll() {
+    const { files: e } = this.store.getState();
+    let t = !1;
+    for (const r of e.values())
+      r.status === "idle" ? (y(this.store, r.id, { status: "queued" }), t = !0) : r.status === "queued" && (t = !0);
+    t && (this.store.setState({ isUploading: !0 }), this.processQueue());
+  }
+  /**
+   * Retry a single failed/errored file.
+   */
+  retryFile(e) {
+    const t = this.store.getState().files.get(e);
+    !t || t.status !== "error" && t.status !== "failed" || (y(this.store, e, {
+      status: "queued",
+      error: null,
+      progress: 0,
+      bytesUploaded: 0,
+      speed: 0
+    }), this.processQueue());
+  }
+  /**
+   * Retry all failed/errored files.
+   */
+  retryAll() {
+    const { files: e } = this.store.getState();
+    for (const t of e.values())
+      (t.status === "error" || t.status === "failed") && y(this.store, t.id, {
+        status: "queued",
+        error: null,
+        progress: 0,
+        bytesUploaded: 0,
+        speed: 0
+      });
+    this.processQueue();
+  }
+  /**
+   * Cancel a single file upload.
+   */
+  cancelFile(e) {
+    this.abortUpload(e), y(this.store, e, { status: "cancelled" });
+  }
+  /**
+   * Cancel all active/queued uploads.
+   */
+  cancelAll() {
+    const { files: e } = this.store.getState();
+    for (const t of e.values())
+      Ue(t.status) && (this.abortUpload(t.id), y(this.store, t.id, { status: "cancelled" }));
+    this.store.setState({ isUploading: !1 });
+  }
+  /**
+   * Update auth config (e.g. after SASS key renewal).
+   */
+  updateConfig(e) {
+    Object.assign(this.config, e);
+  }
+  /**
+   * Clean up: abort all uploads, clear timers, unsubscribe.
+   */
+  destroy() {
+    var e;
+    for (const t of this.activeUploads.keys())
+      this.abortUpload(t);
+    for (const t of this.retryTimers.values())
+      clearTimeout(t);
+    this.retryTimers.clear(), (e = this.unsubscribe) == null || e.call(this), this.unsubscribe = null;
+  }
+  // --- Private ---
+  processQueue() {
+    const e = this.store.getState();
+    if (e.isPaused) return;
+    const { concurrency: t } = e.queueConfig, r = this.activeUploads.size, s = t - r;
+    if (s <= 0) return;
+    const n = [...e.files.values()].filter((a) => a.status === "queued").sort((a, l) => a.retryCount !== l.retryCount ? l.retryCount - a.retryCount : a.addedAt - l.addedAt).slice(0, s);
+    for (const a of n)
+      this.startUpload(a);
+  }
+  startUpload(e) {
+    y(this.store, e.id, { status: "uploading", error: null });
+    let t = 0, r = Date.now();
+    const s = {
+      apiBase: this.config.apiBase,
+      authHeaders: this.config.authHeaders,
+      folder: this.store.getState().targetFolder,
+      onComplete: (a) => this.handleComplete(e.id, a),
+      onError: (a) => this.handleError(e.id, a)
+    }, o = (a, l) => {
+      const p = Date.now(), b = (p - r) / 1e3, u = b > 0 ? (a - t) / b : 0;
+      t = a, r = p;
+      const d = l > 0 ? a / l * 100 : 0;
+      y(this.store, e.id, { progress: d, bytesUploaded: a, speed: u }), this.updateTotalProgress();
+    };
+    let n;
+    e.remoteInfo ? n = $e(e, { ...s, onProgress: o }) : e.remoteUrl ? n = _e(e, s) : n = we(e, { ...s, onProgress: o }), this.activeUploads.set(e.id, n);
+  }
+  handleComplete(e, t) {
+    this.activeUploads.delete(e), y(this.store, e, {
+      status: "complete",
+      progress: 100,
+      response: t
+    }), this.updateTotalProgress(), this.checkAllComplete(), this.processQueue();
+  }
+  handleError(e, t) {
+    this.activeUploads.delete(e);
+    const r = this.store.getState().files.get(e);
+    if (!r) return;
+    const { retryConfig: s } = this.store.getState().queueConfig, o = r.retryCount + 1;
+    if (o <= s.maxRetries) {
+      const n = Math.min(
+        s.baseDelay * Math.pow(s.backoffFactor, r.retryCount),
+        s.maxDelay
+      );
+      y(this.store, e, {
+        status: "retrying",
+        error: t.message,
+        retryCount: o
+      });
+      const a = setTimeout(() => {
+        this.retryTimers.delete(e), y(this.store, e, { status: "queued" }), this.processQueue();
+      }, n);
+      this.retryTimers.set(e, a);
+    } else
+      y(this.store, e, {
+        status: "failed",
+        error: t.message
+      }), this.checkAllComplete(), this.processQueue();
+  }
+  abortUpload(e) {
+    var r;
+    (r = this.activeUploads.get(e)) == null || r.abort(), this.activeUploads.delete(e);
+    const t = this.retryTimers.get(e);
+    t && (clearTimeout(t), this.retryTimers.delete(e));
+  }
+  updateTotalProgress() {
+    const { files: e } = this.store.getState();
+    let t = 0, r = 0, s = 0;
+    for (const o of e.values())
+      (o.status === "uploading" || o.status === "complete") && (t += o.size, r += o.bytesUploaded), o.status === "uploading" && (s += o.speed);
+    this.store.setState({
+      totalBytes: t,
+      totalBytesUploaded: r,
+      totalSpeed: s,
+      totalProgress: t > 0 ? r / t * 100 : 0
+    });
+  }
+  checkAllComplete() {
+    const { files: e } = this.store.getState();
+    ![...e.values()].some(
+      (r) => r.status === "queued" || r.status === "uploading" || r.status === "retrying" || r.status === "preparing"
+    ) && this.store.getState().isUploading && this.store.setState({ isUploading: !1 });
+  }
+}
+function Ue(i) {
+  return i === "queued" || i === "uploading" || i === "retrying" || i === "preparing";
+}
+function Z(i) {
+  return `https://api.filerobot.com/${i}`;
+}
+async function Pe(i, e) {
+  const t = `${Z(i)}/key/${encodeURIComponent(e)}`, r = new AbortController(), s = setTimeout(() => r.abort(), 3e4);
+  try {
+    const o = await fetch(t, { signal: r.signal });
+    if (clearTimeout(s), !o.ok)
+      throw new Error(`SASS key exchange failed (HTTP ${o.status})`);
+    const n = await o.json();
+    if (n.status === "error")
+      throw new Error(`SASS key exchange failed: ${n.msg || "Unknown error"}`);
+    return n.key;
+  } catch (o) {
+    throw clearTimeout(s), o instanceof DOMException && o.name === "AbortError" ? new Error("SASS key exchange timed out") : o;
+  }
+}
+function J(i, e) {
+  const t = {};
+  switch (i.mode) {
+    case "security-template":
+      t["X-Filerobot-Key"] = e ?? i.securityTemplateId;
+      break;
+    case "sass-key":
+      t["X-Filerobot-Key"] = i.sassKey;
+      break;
+    case "session":
+      t["X-Filerobot-Session"] = i.sessionToken, i.companyToken && (t["X-Company-Token"] = i.companyToken), i.projectToken && (t["X-Project-Token"] = i.projectToken);
+      break;
+  }
+  return i.airboxPuid && (t["X-Filerobot-Airbox-Puid"] = i.airboxPuid), t;
+}
+async function ze(i) {
+  const e = Z(i.container);
+  if (i.mode === "security-template") {
+    const t = await Pe(i.container, i.securityTemplateId);
+    return { apiBase: e, headers: J(i, t), sassKey: t };
+  }
+  return { apiBase: e, headers: J(i) };
+}
+const f = {
+  FILE_ADDED: "sfx-file-added",
+  FILE_REMOVED: "sfx-file-removed",
+  FILE_REJECTED: "sfx-file-rejected",
+  UPLOAD_STARTED: "sfx-upload-started",
+  UPLOAD_PROGRESS: "sfx-upload-progress",
+  UPLOAD_COMPLETE: "sfx-upload-complete",
+  UPLOAD_ERROR: "sfx-upload-error",
+  UPLOAD_RETRY: "sfx-upload-retry",
+  ALL_COMPLETE: "sfx-all-complete",
+  TOTAL_PROGRESS: "sfx-total-progress",
+  BEFORE_UPLOAD: "sfx-before-upload",
+  OPEN: "sfx-open",
+  CLOSE: "sfx-close",
+  CANCEL: "sfx-cancel",
+  SOURCE_CHANGE: "sfx-source-change",
+  COMPLETE_ACTION: "sfx-complete-action",
+  CONNECTOR_AUTH: "sfx-connector-auth",
+  CONNECTOR_FILES_ADDED: "sfx-connector-files-added",
+  FILE_PREVIEW: "sfx-file-preview",
+  FILL_METADATA: "sfx-fill-metadata"
+};
+let Re = 0;
+function B() {
+  return `file-${Date.now()}-${++Re}`;
+}
+function Ae(i) {
+  if (i === 0) return "0 B";
+  const e = ["B", "KB", "MB", "GB"], t = Math.min(Math.floor(Math.log(i) / Math.log(1024)), e.length - 1), r = i / Math.pow(1024, t);
+  return `${t === 0 ? r : r.toFixed(1)} ${e[t]}`;
+}
+function Oe(i) {
+  var t;
+  const e = ((t = i.name.split(".").pop()) == null ? void 0 : t.toLowerCase()) ?? "";
+  return i.type.startsWith("image/") ? "image" : i.type.startsWith("video/") || ["mp4", "mov", "avi", "webm", "mkv"].includes(e) ? "vid" : i.type === "application/pdf" || e === "pdf" ? "pdf" : ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "rtf", "odt"].includes(e) ? "doc" : ["zip", "rar", "7z", "tar", "gz", "bz2"].includes(e) ? "zip" : "gen";
+}
+function Te(i) {
+  const e = i.lastIndexOf(".");
+  return e >= 0 ? i.slice(e + 1).toUpperCase() : "";
+}
+const De = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  webp: "image/webp",
+  svg: "image/svg+xml",
+  bmp: "image/bmp",
+  ico: "image/x-icon",
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  webm: "video/webm",
+  pdf: "application/pdf",
+  zip: "application/zip",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+};
+function Le(i) {
+  var t;
+  const e = ((t = i.split(".").pop()) == null ? void 0 : t.toLowerCase()) ?? "";
+  return De[e] || "";
+}
+function Me(i, e, t) {
+  var r, s;
+  if (e.maxFileSize != null && i.size > e.maxFileSize)
+    return `File exceeds ${(e.maxFileSize / 1048576).toFixed(1)} MB limit`;
+  if (e.maxTotalFilesSize != null) {
+    let o = i.size;
+    for (const n of t.values()) o += n.size;
+    if (o > e.maxTotalFilesSize)
+      return "Total file size limit exceeded";
+  }
+  if (e.maxNumberOfFiles != null && t.size >= e.maxNumberOfFiles)
+    return `Maximum ${e.maxNumberOfFiles} files allowed`;
+  if (e.allowedFileTypes != null) {
+    const o = e.allowedFileTypes, n = "." + (((r = i.name.split(".").pop()) == null ? void 0 : r.toLowerCase()) ?? "");
+    if (!o.some((l) => l.startsWith(".") ? n === l.toLowerCase() : l.endsWith("/*") ? i.type.startsWith(l.slice(0, -1)) : i.type === l)) return "File type not allowed";
+  }
+  if (e.blockedFileTypes != null) {
+    const o = e.blockedFileTypes, n = "." + (((s = i.name.split(".").pop()) == null ? void 0 : s.toLowerCase()) ?? "");
+    if (o.some((l) => l.startsWith(".") ? n === l.toLowerCase() : i.type === l)) return "File type is blocked";
+  }
+  return null;
+}
+function Ie(i) {
+  return i.allowedFileTypes ? i.allowedFileTypes.join(",") : "";
+}
+const de = {
+  "google-drive": {
+    id: "google-drive",
+    label: "Google Drive",
+    fillIcon: !0,
+    icon: '<path d="M7.71 3.5L1.15 15l2.98 5.16h3.46L1.15 8.66 4.13 3.5h3.58zm1.04 0L15.3 15l-2.98 5.16H8.86L15.3 8.66 12.33 3.5H8.75zm7.54 5.16L22.85 15l-2.98 5.16-6.56-11.5h6.56z" fill="currentColor"/>'
+  },
+  dropbox: {
+    id: "dropbox",
+    label: "Dropbox",
+    fillIcon: !0,
+    icon: '<path d="M12 2L6.5 5.75 12 9.5l5.5-3.75L12 2zM6.5 5.75L1 9.5l5.5 3.75L12 9.5 6.5 5.75zM17.5 5.75L12 9.5l5.5 3.75L23 9.5l-5.5-3.75zM1 9.5l5.5 3.75L12 9.5 6.5 5.75 1 9.5zm22 0l-5.5 3.75L12 9.5l5.5-3.75L23 9.5zM6.5 14.5L12 18.25l5.5-3.75L12 10.75 6.5 14.5z" fill="currentColor"/>'
+  },
+  onedrive: {
+    id: "onedrive",
+    label: "OneDrive",
+    fillIcon: !0,
+    icon: '<path d="M10.07 8.82a5.5 5.5 0 0 1 8.6 1.43A4.5 4.5 0 0 1 19.5 19H6a4 4 0 0 1-.67-7.95 5.49 5.49 0 0 1 4.74-2.23z" fill="currentColor"/>'
+  },
+  box: {
+    id: "box",
+    label: "Box",
+    fillIcon: !0,
+    icon: '<path d="M12 2L3 7v10l9 5 9-5V7l-9-5zm0 2.18L18.36 7.5 12 10.82 5.64 7.5 12 4.18zM5 8.82l6 3.33v6.67l-6-3.33V8.82zm14 0v6.67l-6 3.33v-6.67l6-3.33z" fill="currentColor"/>'
+  },
+  instagram: {
+    id: "instagram",
+    label: "Instagram",
+    fillIcon: !0,
+    icon: '<path d="M12 2.16c2.94 0 3.29.01 4.45.06 1.07.05 1.8.22 2.43.46.66.25 1.21.6 1.77 1.16.55.55.9 1.1 1.16 1.77.25.64.41 1.37.46 2.43.05 1.16.06 1.51.06 4.45s-.01 3.29-.06 4.45c-.05 1.07-.22 1.8-.46 2.43a4.9 4.9 0 0 1-1.16 1.77c-.55.55-1.1.9-1.77 1.16-.64.25-1.37.41-2.43.46-1.16.05-1.51.06-4.45.06s-3.29-.01-4.45-.06c-1.07-.05-1.8-.22-2.43-.46a4.9 4.9 0 0 1-1.77-1.16 4.9 4.9 0 0 1-1.16-1.77c-.25-.64-.41-1.37-.46-2.43C2.17 15.29 2.16 14.94 2.16 12s.01-3.29.06-4.45c.05-1.07.22-1.8.46-2.43a4.9 4.9 0 0 1 1.16-1.77A4.9 4.9 0 0 1 5.61 2.2c.64-.25 1.37-.41 2.43-.46C9.21 2.17 9.56 2.16 12 2.16zM12 0C8.97 0 8.6.01 7.43.07 6.26.12 5.45.3 4.73.58a6.9 6.9 0 0 0-2.5 1.63A6.9 6.9 0 0 0 .58 4.73C.3 5.45.12 6.26.07 7.43.01 8.6 0 8.97 0 12s.01 3.4.07 4.57c.05 1.17.23 1.98.51 2.7a6.9 6.9 0 0 0 1.63 2.5 6.9 6.9 0 0 0 2.5 1.63c.72.28 1.53.46 2.7.51C8.6 23.99 8.97 24 12 24s3.4-.01 4.57-.07c1.17-.05 1.98-.23 2.7-.51a6.9 6.9 0 0 0 2.5-1.63 6.9 6.9 0 0 0 1.63-2.5c.28-.72.46-1.53.51-2.7.06-1.17.07-1.54.07-4.57s-.01-3.4-.07-4.57c-.05-1.17-.23-1.98-.51-2.7a6.9 6.9 0 0 0-1.63-2.5A6.9 6.9 0 0 0 19.27.58C18.55.3 17.74.12 16.57.07 15.4.01 15.03 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z" fill="currentColor"/>'
+  },
+  facebook: {
+    id: "facebook",
+    label: "Facebook",
+    fillIcon: !0,
+    icon: '<path d="M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07c0 6.02 4.39 11.02 10.12 11.93v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.89v2.26h3.33l-.53 3.49h-2.8v8.44C19.61 23.09 24 18.09 24 12.07z" fill="currentColor"/>'
+  },
+  unsplash: {
+    id: "unsplash",
+    label: "Unsplash",
+    fillIcon: !0,
+    icon: '<path d="M7.5 6.75V0h9v6.75h-9zM0 24V10.5h7.5v6.75h9V10.5H24V24H0z" fill="currentColor"/>'
+  }
+};
+function Fe(i) {
+  return i.filter((e) => e in de).map((e) => de[e]);
+}
+var je = Object.defineProperty, Be = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && je(e, t, s), s;
+};
+const He = '<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"/>', qe = '<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>', Ne = '<path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/>', Ve = '<rect x="2" y="3" width="20" height="14" rx="2"/><circle cx="12" cy="10" r="3"/><path d="M7 21h10"/>', H = [
+  { id: "device", label: "My Device", icon: He },
+  { id: "url", label: "URL link", icon: qe },
+  { id: "camera", label: "Camera", icon: Ne },
+  { id: "screen-cast", label: "Screen cast", icon: Ve }
+], ee = class ee extends w {
+  constructor() {
+    super(...arguments), this.sources = H;
+  }
+  _handleClick(e) {
+    this.dispatchEvent(
+      new CustomEvent("source-click", {
+        detail: { source: e.id },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return c`
+      ${this.sources.map(
+      (e) => c`
+          <button @click=${() => this._handleClick(e)}>
+            ${fe`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${ge(e.icon)}</svg>`}
+            ${e.label}
+          </button>
+        `
+    )}
+    `;
+  }
+};
+ee.styles = _`
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      justify-content: center;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 9px;
+      padding: 13px 24px;
+      border-radius: 50px;
+      border: 1.5px solid var(--sfx-up-border, #e8edf5);
+      background: var(--sfx-up-bg, #fff);
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--sfx-up-text-secondary, #475569);
+      cursor: pointer;
+      transition: all 0.18s ease;
+      white-space: nowrap;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+      font-family: inherit;
+    }
+
+    button:hover {
+      border-color: var(--sfx-up-primary, #2563eb);
+      color: var(--sfx-up-primary, #2563eb);
+      background: var(--sfx-up-primary-bg, #eff6ff);
+      box-shadow: 0 2px 10px var(--sfx-up-primary-glow, rgba(37, 99, 235, 0.18));
+      transform: translateY(-1px);
+    }
+
+    button:active {
+      transform: translateY(0) scale(0.98);
+    }
+
+    svg {
+      width: 17px;
+      height: 17px;
+      flex-shrink: 0;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+    }
+
+    svg.fill-icon {
+      fill: currentColor;
+      stroke: none;
+      stroke-width: 0;
+    }
+  `;
+let W = ee;
+Be([
+  x({ type: Array })
+], W.prototype, "sources");
+var Ye = Object.defineProperty, T = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && Ye(e, t, s), s;
+};
+const te = class te extends w {
+  constructor() {
+    super(...arguments), this.compact = !1, this.accept = "", this.sources = [], this._dragOver = !1, this._dragCounter = 0, this._onDragEnter = (e) => {
+      e.preventDefault(), this._dragCounter++, this._dragCounter === 1 && (this._dragOver = !0);
+    }, this._onDragOver = (e) => {
+      e.preventDefault();
+    }, this._onDragLeave = (e) => {
+      e.preventDefault(), this._dragCounter--, this._dragCounter <= 0 && (this._dragCounter = 0, this._dragOver = !1);
+    }, this._onDrop = (e) => {
+      var r;
+      e.preventDefault(), this._dragCounter = 0, this._dragOver = !1;
+      const t = Array.from(((r = e.dataTransfer) == null ? void 0 : r.files) ?? []);
+      t.length > 0 && this._emitFiles(t);
+    }, this._onClick = (e) => {
+      const t = this.shadowRoot.querySelector(".drop-zone");
+      if (t && this._rippleEl) {
+        const r = t.getBoundingClientRect();
+        this._rippleEl.style.left = `${e.clientX - r.left}px`, this._rippleEl.style.top = `${e.clientY - r.top}px`, this._rippleEl.classList.remove("go"), this._rippleEl.offsetWidth, this._rippleEl.classList.add("go");
+      }
+      this.browse();
+    }, this._onKeyDown = (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.browse());
+    }, this._onFileChange = (e) => {
+      const t = e.target, r = Array.from(t.files ?? []);
+      r.length > 0 && this._emitFiles(r), t.value = "";
+    }, this._onPaste = (e) => {
+      var s;
+      if (!this.isConnected || this.offsetWidth === 0) return;
+      const t = (s = e.clipboardData) == null ? void 0 : s.items;
+      if (!t) return;
+      const r = [];
+      for (const o of t)
+        if (o.kind === "file") {
+          const n = o.getAsFile();
+          n && r.push(n);
+        }
+      r.length > 0 && (e.preventDefault(), this._emitFiles(r));
+    };
+  }
+  /** Programmatically open file browser. */
+  browse() {
+    var e;
+    (e = this.fileInput) == null || e.click();
+  }
+  _onSourceIconClick(e) {
+    this.dispatchEvent(
+      new CustomEvent("source-click", {
+        detail: { source: e.id },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _emitFiles(e) {
+    this.dispatchEvent(
+      new CustomEvent("files-selected", {
+        detail: { files: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("paste", this._onPaste);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("paste", this._onPaste);
+  }
+  render() {
+    const e = [
+      "drop-zone",
+      this._dragOver ? "drag-over" : "",
+      this.compact ? "compact" : ""
+    ].filter(Boolean).join(" ");
+    return c`
+      <div
+        class=${e}
+        role="button"
+        tabindex="0"
+        aria-label="Drop files here or click to browse"
+        @dragenter=${this._onDragEnter}
+        @dragover=${this._onDragOver}
+        @dragleave=${this._onDragLeave}
+        @drop=${this._onDrop}
+        @click=${this._onClick}
+        @keydown=${this._onKeyDown}
+      >
+        <div class="rings">
+          <div class="ring"></div>
+          <div class="ring"></div>
+          <div class="core">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
+              <polyline points="16 16 12 12 8 16" />
+              <line x1="12" y1="12" x2="12" y2="21" />
+              <path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3" />
+            </svg>
+          </div>
+        </div>
+
+        <div class="title">
+          Drag & Drop or click to <span>browse</span>
+        </div>
+        ${this.compact ? h : c`<div class="subtitle">Drop files anywhere on this page</div>`}
+
+        ${this.compact && this.sources.length > 0 ? c`
+              <div class="sources-row">
+                <span class="src-divider"></span>
+                ${this.sources.map(
+      (t) => c`
+                    <button
+                      class="src-ico"
+                      data-tip=${t.label}
+                      @click=${(r) => {
+        r.stopPropagation(), this._onSourceIconClick(t);
+      }}
+                    >
+                      ${fe`<svg viewBox="0 0 24 24" class=${t.fillIcon ? "fill-icon" : ""}>${ge(t.icon)}</svg>`}
+                    </button>
+                  `
+    )}
+              </div>
+            ` : h}
+
+        <div class="ripple"></div>
+        <input
+          type="file"
+          multiple
+          accept=${this.accept || h}
+          @change=${this._onFileChange}
+        />
+      </div>
+    `;
+  }
+};
+te.styles = _`
+    :host {
+      display: block;
+      flex-shrink: 0;
+    }
+
+    .drop-zone {
+      border: 1.5px dashed var(--sfx-up-border, #d8d8d8);
+      border-radius: var(--sfx-up-radius, 16px);
+      background: var(--sfx-up-bg, #ffffff);
+      padding: 52px 40px 44px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: border-color 0.22s, background 0.22s, padding 0.35s ease;
+      user-select: none;
+    }
+
+    .drop-zone:hover {
+      border-color: #bbb;
+      background: #fafafa;
+    }
+
+    /* Drag over state */
+    .drop-zone.drag-over {
+      border: 2px solid var(--sfx-up-primary, #2563eb);
+      background: var(--sfx-up-primary-bg, #eff6ff);
+      box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.06);
+    }
+
+    /* Compact state when files exist */
+    .drop-zone.compact {
+      padding: 14px 24px;
+      flex-direction: row;
+      align-items: center;
+      gap: 12px;
+      justify-content: flex-start;
+      overflow: visible;
+    }
+
+    /* --- Rings --- */
+    .rings {
+      width: 110px;
+      height: 110px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+      flex-shrink: 0;
+    }
+
+    .ring {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      border: 1.5px dashed #c4d5ef;
+      animation: slowSpin 20s linear infinite;
+      transition: border-color 0.3s;
+    }
+
+    .ring:nth-child(2) {
+      inset: 13px;
+      border-color: #d8e5f5;
+      border-style: dotted;
+      animation-direction: reverse;
+      animation-duration: 14s;
+    }
+
+    .drag-over .ring {
+      border-color: var(--sfx-up-primary, #2563eb);
+      animation-duration: 3s;
+    }
+
+    .drag-over .ring:nth-child(2) {
+      border-color: rgba(37, 99, 235, 0.4);
+      animation-duration: 2s;
+    }
+
+    .compact .rings {
+      width: 36px;
+      height: 36px;
+      margin-bottom: 0;
+    }
+
+    .compact .ring {
+      border-width: 1px;
+    }
+
+    /* --- Core icon --- */
+    .core {
+      width: 54px;
+      height: 54px;
+      border-radius: 50%;
+      background: var(--sfx-up-primary-bg, #eff6ff);
+      color: var(--sfx-up-primary, #2563eb);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+      transition: all 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
+      box-shadow: 0 3px 12px rgba(37, 99, 235, 0.15);
+    }
+
+    .core svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    .drop-zone:hover .core {
+      transform: translateY(-2px);
+      box-shadow: 0 5px 18px rgba(37, 99, 235, 0.22);
+    }
+
+    .drag-over .core {
+      background: var(--sfx-up-primary, #2563eb);
+      color: #fff;
+      transform: scale(1.12);
+      box-shadow: 0 8px 24px rgba(37, 99, 235, 0.38);
+    }
+
+    .compact .core {
+      width: 36px;
+      height: 36px;
+      box-shadow: none;
+    }
+
+    .compact .core svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    /* --- Text --- */
+    .title {
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--sfx-up-text, #1e293b);
+      margin-bottom: 5px;
+      transition: font-size 0.3s, margin 0.3s;
+    }
+
+    .title span {
+      color: var(--sfx-up-primary, #2563eb);
+      cursor: pointer;
+    }
+
+    .subtitle {
+      font-size: 13px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      transition: opacity 0.2s;
+    }
+
+    .compact .title {
+      font-size: 13.5px;
+      font-weight: 600;
+      margin-bottom: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .compact .subtitle {
+      display: none;
+    }
+
+    /* --- Source icons row (compact mode) --- */
+    .sources-row {
+      display: none;
+    }
+
+    .compact .sources-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-left: auto;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 20;
+    }
+
+    .src-divider {
+      width: 1px;
+      height: 20px;
+      background: #e5e7eb;
+      margin-right: 2px;
+      flex-shrink: 0;
+    }
+
+    .src-ico {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: none;
+      background: #f3f4f6;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.15s;
+      position: relative;
+      flex-shrink: 0;
+      color: #6b7280;
+      padding: 0;
+      font-family: inherit;
+    }
+
+    .src-ico svg {
+      width: 14px;
+      height: 14px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+    }
+
+    .src-ico svg.fill-icon {
+      fill: currentColor;
+      stroke: none;
+      stroke-width: 0;
+    }
+
+    .src-ico:hover {
+      transform: scale(1.18);
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+      background: #fff;
+      color: #374151;
+    }
+
+    .src-ico::after {
+      content: attr(data-tip);
+      position: absolute;
+      bottom: -28px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #fff;
+      color: #374151;
+      font-size: 10px;
+      font-weight: 500;
+      border: 1px solid #e5e7eb;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      padding: 3px 8px;
+      border-radius: 5px;
+      white-space: nowrap;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.15s, visibility 0.15s;
+      pointer-events: none;
+      z-index: 50;
+      font-family: inherit;
+    }
+
+    .src-ico:hover::after {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    /* --- Ripple --- */
+    .ripple {
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--sfx-up-primary, #2563eb);
+      opacity: 0;
+      pointer-events: none;
+      transform: translate(-50%, -50%) scale(0);
+    }
+
+    .ripple.go {
+      animation: ripple 0.55s ease-out forwards;
+    }
+
+    /* --- Hidden input --- */
+    input[type='file'] {
+      display: none;
+    }
+
+    @keyframes slowSpin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes ripple {
+      from {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0.18;
+      }
+      to {
+        transform: translate(-50%, -50%) scale(12);
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .ring {
+        animation: none;
+      }
+      .ripple.go {
+        animation: none;
+      }
+    }
+  `;
+let $ = te;
+T([
+  x({ type: Boolean })
+], $.prototype, "compact");
+T([
+  x({ type: String })
+], $.prototype, "accept");
+T([
+  x({ type: Array })
+], $.prototype, "sources");
+T([
+  g()
+], $.prototype, "_dragOver");
+T([
+  he(".ripple")
+], $.prototype, "_rippleEl");
+T([
+  he('input[type="file"]')
+], $.prototype, "fileInput");
+const re = class re extends w {
+  render() {
+    return c`
+      <div class="line"></div>
+      <div class="label">or import from</div>
+      <div class="line"></div>
+    `;
+  }
+};
+re.styles = _`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      padding: 20px 0;
+    }
+
+    .line {
+      flex: 1;
+      height: 1px;
+      background: var(--sfx-up-border-light, #f1f5f9);
+    }
+
+    .label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--sfx-up-text-muted, #cbd5e1);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      white-space: nowrap;
+    }
+  `;
+let pe = re;
+var Ke = Object.defineProperty, Je = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && Ke(e, t, s), s;
+};
+const se = class se extends w {
+  constructor() {
+    super(...arguments), this.files = [];
+  }
+  render() {
+    return c`
+      <div class="grid">
+        ${this.files.map(
+      (e) => c`<sfx-file-item .file=${e}></sfx-file-item>`
+    )}
+      </div>
+    `;
+  }
+};
+se.styles = _`
+    :host {
+      display: block;
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
+      gap: 12px;
+    }
+  `;
+let G = se;
+Je([
+  x({ attribute: !1 })
+], G.prototype, "files");
+var We = Object.defineProperty, Ge = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && We(e, t, s), s;
+};
+const oe = class oe extends w {
+  _remove() {
+    this.dispatchEvent(
+      new CustomEvent("file-remove", {
+        detail: { fileId: this.file.id },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _retry() {
+    this.dispatchEvent(
+      new CustomEvent("file-retry", {
+        detail: { fileId: this.file.id },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _preview(e) {
+    e.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("file-preview", {
+        detail: { fileId: this.file.id },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const e = this.file;
+    if (!e) return h;
+    const t = Oe(e), r = t === "image", s = e.status === "complete", o = e.status === "uploading", n = e.status === "error" || e.status === "failed", a = Te(e.name), l = [
+      "tile",
+      s ? "done" : "",
+      o ? "uploading" : ""
+    ].filter(Boolean).join(" ");
+    return c`
+      <div class=${l}>
+        <!-- Preview area -->
+        <div class="preview">
+          ${r && e.previewUrl ? c`<div class="preview-bg" style="background-image:url(${e.previewUrl})"></div>` : c`
+                <div class="preview-bg ${t}"></div>
+                <div class="type-icon">
+                  <div class="type-icon-inner ${t}">
+                    ${this._renderTypeIcon(t)}
+                    ${a ? c`<div class="ext-label">${a}</div>` : h}
+                  </div>
+                </div>
+              `}
+
+          <!-- Preview button -->
+          ${!s && !o && !n && e.status !== "rejected" ? c`
+                <button class="preview-btn" @click=${this._preview} aria-label="Preview file">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                    <circle cx="12" cy="12" r="3"/>
+                  </svg>
+                  Preview
+                </button>
+              ` : h}
+
+          <!-- Spinner overlay -->
+          <div class="spinner-overlay">
+            <div class="spin-ring"></div>
+          </div>
+
+          <!-- Done overlay -->
+          <div class="done-overlay">
+            <div class="done-check">
+              <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+          </div>
+
+          <!-- Progress bar -->
+          ${e.status === "uploading" || s ? c`
+                <div class="progress">
+                  <div class="progress-fill" style="transform:scaleX(${Math.min(e.progress, 100) / 100})"></div>
+                </div>
+              ` : h}
+
+          <!-- Error badge -->
+          ${n && e.error ? c`<div class="error-badge" title=${e.error}>${e.error}</div>` : h}
+        </div>
+
+        <!-- Action buttons -->
+        <div class="actions">
+          ${n ? c`
+                <button class="act-btn retry" @click=${this._retry} title="Retry" aria-label="Retry upload">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+                    <polyline points="23 4 23 10 17 10" />
+                    <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10" />
+                  </svg>
+                </button>
+              ` : h}
+          <button class="act-btn del" @click=${this._remove} title="Remove" aria-label="Remove file">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Info bar -->
+        <div class="info">
+          <div class="name" title=${e.name}>${e.name}</div>
+          <div class="meta">${e.size ? Ae(e.size) : ""}${e.type ? `${e.size ? " · " : ""}${e.type}` : ""}</div>
+        </div>
+      </div>
+    `;
+  }
+  _renderTypeIcon(e) {
+    switch (e) {
+      case "pdf":
+        return c`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`;
+      case "doc":
+        return c`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>`;
+      case "vid":
+        return c`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`;
+      case "zip":
+        return c`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 8v13H3V8"/><path d="M1 3h22v5H1z"/><path d="M10 12h4"/></svg>`;
+      default:
+        return c`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>`;
+    }
+  }
+};
+oe.styles = _`
+    :host {
+      display: block;
+    }
+
+    .tile {
+      border-radius: 6px;
+      overflow: hidden;
+      background: var(--sfx-up-bg, #fff);
+      border: 1px solid #e8eaed;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+      animation: tileIn 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) both;
+      transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
+      cursor: default;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+    }
+
+    .tile:hover {
+      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.11);
+      transform: translateY(-2px);
+      border-color: #d1d5db;
+    }
+
+    /* --- Preview area --- */
+    .preview {
+      position: relative;
+      aspect-ratio: 16 / 10;
+      overflow: hidden;
+      flex-shrink: 0;
+      background: #f3f4f6;
+    }
+
+    .preview-bg {
+      position: absolute;
+      inset: 0;
+      background-size: cover;
+      background-position: center;
+      transition: transform 0.4s ease;
+    }
+
+    .tile:hover .preview-bg {
+      transform: scale(1.03);
+    }
+
+    .preview-bg.pdf { background: linear-gradient(135deg, #fef2f2, #fee2e2); }
+    .preview-bg.doc { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
+    .preview-bg.vid { background: linear-gradient(135deg, #f5f3ff, #ede9fe); }
+    .preview-bg.zip { background: linear-gradient(135deg, #fffbeb, #fef3c7); }
+    .preview-bg.gen { background: linear-gradient(135deg, #f8fafc, #f1f5f9); }
+
+    /* --- File type icon --- */
+    .type-icon {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+    }
+
+    .type-icon-inner {
+      width: 44px;
+      height: 44px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.9);
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+    }
+
+    .type-icon-inner svg {
+      width: 22px;
+      height: 22px;
+    }
+
+    .type-icon-inner.pdf { color: #dc2626; }
+    .type-icon-inner.doc { color: #1d4ed8; }
+    .type-icon-inner.vid { color: #7c3aed; }
+    .type-icon-inner.zip { color: #b45309; }
+    .type-icon-inner.gen { color: #64748b; }
+
+    .ext-label {
+      font-size: 9px;
+      font-weight: 800;
+      text-transform: uppercase;
+      margin-top: 2px;
+    }
+
+    /* --- Info bar --- */
+    .info {
+      padding: 9px 11px 10px;
+      background: var(--sfx-up-bg, #fff);
+      min-width: 0;
+    }
+
+    .name {
+      font-size: 12.5px;
+      font-weight: 600;
+      color: #111827;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 2px;
+    }
+
+    .meta {
+      font-size: 11px;
+      font-weight: 400;
+      color: #9ca3af;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .tile.done .info {
+      opacity: 0.5;
+    }
+
+    /* --- Action buttons --- */
+    .actions {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      display: flex;
+      gap: 3px;
+      opacity: 0;
+      transition: opacity 0.15s;
+      z-index: 10;
+    }
+
+    .tile:hover .actions {
+      opacity: 1;
+    }
+
+    .act-btn {
+      width: 26px;
+      height: 26px;
+      border-radius: 6px;
+      border: none;
+      background: #fff;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s, transform 0.12s;
+      color: #374151;
+      padding: 0;
+    }
+
+    .act-btn:hover {
+      background: #f3f4f6;
+      transform: scale(1.08);
+    }
+
+    .act-btn.del:hover {
+      background: #fee2e2;
+      color: #dc2626;
+    }
+
+    .act-btn.retry:hover {
+      background: #eff6ff;
+      color: var(--sfx-up-primary, #2563eb);
+    }
+
+    .act-btn svg {
+      width: 11px;
+      height: 11px;
+    }
+
+    /* --- Preview button --- */
+    .preview-btn {
+      position: absolute;
+      bottom: 50%;
+      left: 50%;
+      transform: translate(-50%, 50%);
+      padding: 6px 16px;
+      border-radius: 6px;
+      border: 1.5px solid var(--sfx-up-primary, #2563eb);
+      background: #fff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      opacity: 0;
+      transition: all 0.15s ease;
+      color: var(--sfx-up-primary, #2563eb);
+      font-family: inherit;
+      font-size: 11px;
+      font-weight: 600;
+      white-space: nowrap;
+      z-index: 5;
+    }
+
+    .tile:hover .preview-btn {
+      opacity: 1;
+    }
+
+    .preview-btn:hover {
+      background: var(--sfx-up-primary, #2563eb);
+      color: #fff;
+    }
+
+    .preview-btn:hover svg {
+      stroke: #fff;
+    }
+
+    .preview-btn svg {
+      width: 13px;
+      height: 13px;
+    }
+
+    /* --- Progress bar --- */
+    .progress {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: rgba(0, 0, 0, 0.06);
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: var(--sfx-up-primary, #2563eb);
+      transform-origin: left;
+      transition: transform 0.32s ease;
+    }
+
+    .tile.done .progress-fill {
+      background: var(--sfx-up-success, #16a34a);
+    }
+
+    /* --- Uploading spinner overlay --- */
+    .spinner-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.22);
+      opacity: 0;
+      transition: opacity 0.2s;
+      pointer-events: none;
+    }
+
+    .tile.uploading .spinner-overlay {
+      opacity: 1;
+    }
+
+    .spin-ring {
+      width: 28px;
+      height: 28px;
+      border: 2.5px solid rgba(255, 255, 255, 0.22);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: spinRing 0.7s linear infinite;
+    }
+
+    /* --- Done overlay --- */
+    .done-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(5, 150, 105, 0.72);
+      opacity: 0;
+      transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .tile.done .done-overlay {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .done-check {
+      animation: popBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
+    }
+
+    .done-check svg {
+      width: 28px;
+      height: 28px;
+      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
+    }
+
+    /* --- Error state --- */
+    .error-badge {
+      position: absolute;
+      bottom: 28px;
+      left: 6px;
+      right: 6px;
+      font-size: 10px;
+      font-weight: 600;
+      color: #fff;
+      background: rgba(220, 38, 38, 0.88);
+      border-radius: 4px;
+      padding: 3px 6px;
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    @keyframes tileIn {
+      0% {
+        opacity: 0;
+        transform: scale(0.8) translateY(22px);
+        filter: blur(10px);
+      }
+      55% {
+        opacity: 1;
+        filter: blur(0);
+      }
+      80% {
+        transform: scale(1.03) translateY(-3px);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+        filter: blur(0);
+      }
+    }
+
+    @keyframes popBounce {
+      0% { transform: scale(0); opacity: 0; }
+      55% { transform: scale(1.2); opacity: 1; }
+      75% { transform: scale(0.94); }
+      100% { transform: scale(1); }
+    }
+
+    @keyframes spinRing {
+      to { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tile { animation: none; }
+      .done-check { animation: none; }
+      .spin-ring { animation: none; }
+    }
+  `;
+let X = oe;
+Ge([
+  x({ attribute: !1 })
+], X.prototype, "file");
+var Xe = Object.defineProperty, be = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && Xe(e, t, s), s;
+};
+const ie = class ie extends w {
+  constructor() {
+    super(...arguments), this.fileCount = 0, this.primaryLabel = "Done";
+  }
+  _uploadMore() {
+    this.dispatchEvent(
+      new CustomEvent("upload-more", { bubbles: !0, composed: !0 })
+    );
+  }
+  _primaryAction() {
+    this.dispatchEvent(
+      new CustomEvent("primary-action", { bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    const e = this.fileCount === 1 ? "file has" : "files have";
+    return c`
+      <div class="card">
+        <div class="icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </div>
+        <div class="title">Uploaded successfully!</div>
+        <div class="subtitle">
+          All ${this.fileCount} ${e} been uploaded and are ready for review.
+        </div>
+        <div class="actions">
+          <button class="btn-ghost" @click=${this._uploadMore}>Upload more</button>
+          <button class="btn-primary" @click=${this._primaryAction}>${this.primaryLabel}</button>
+        </div>
+      </div>
+    `;
+  }
+};
+ie.styles = _`
+    :host {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .card {
+      background: var(--sfx-up-bg, #fff);
+      border-radius: 20px;
+      border: 1.5px solid #bbf7d0;
+      padding: 64px 48px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      box-shadow: 0 8px 40px rgba(34, 197, 94, 0.08);
+      animation: fadeUp 0.4s ease both;
+    }
+
+    .icon {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #dcfce7, #bbf7d0);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 18px;
+      color: var(--sfx-up-success, #16a34a);
+      box-shadow: 0 4px 18px rgba(22, 163, 74, 0.16);
+      animation: popBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
+    }
+
+    .icon svg {
+      width: 30px;
+      height: 30px;
+    }
+
+    .title {
+      font-size: 21px;
+      font-weight: 800;
+      color: #0f172a;
+      letter-spacing: -0.4px;
+      margin-bottom: 7px;
+    }
+
+    .subtitle {
+      font-size: 13.5px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      line-height: 1.6;
+      max-width: 320px;
+      margin-bottom: 22px;
+    }
+
+    .actions {
+      display: flex;
+      gap: 9px;
+    }
+
+    button {
+      height: 36px;
+      padding: 0 17px;
+      border-radius: 9px;
+      border: none;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      transition: all 0.18s ease;
+      white-space: nowrap;
+    }
+
+    .btn-ghost {
+      background: none;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      border: 1.5px solid var(--sfx-up-border, #e8edf5);
+    }
+
+    .btn-ghost:hover {
+      background: #f8faff;
+      color: #64748b;
+      border-color: #d1dff0;
+    }
+
+    .btn-primary {
+      background: linear-gradient(135deg, var(--sfx-up-primary, #2563eb), var(--sfx-up-primary-mid, #3b82f6));
+      color: #fff;
+      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
+    }
+
+    .btn-primary:hover {
+      background: linear-gradient(135deg, var(--sfx-up-primary-hover, #1d4ed8), var(--sfx-up-primary, #2563eb));
+      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38);
+      transform: translateY(-1px);
+    }
+
+    @keyframes fadeUp {
+      from {
+        opacity: 0;
+        transform: translateY(12px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes popBounce {
+      0% { transform: scale(0); opacity: 0; }
+      55% { transform: scale(1.2); opacity: 1; }
+      75% { transform: scale(0.94); }
+      100% { transform: scale(1); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .card { animation: none; }
+      .icon { animation: none; }
+    }
+  `;
+let q = ie;
+be([
+  x({ type: Number })
+], q.prototype, "fileCount");
+be([
+  x({ type: String })
+], q.prototype, "primaryLabel");
+var Qe = Object.defineProperty, V = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && Qe(e, t, s), s;
+};
+const ne = class ne extends w {
+  constructor() {
+    super(...arguments), this.uploadState = "idle", this.fileCount = 0, this.failedCount = 0, this.showFillMetadata = !1;
+  }
+  _clear() {
+    this.dispatchEvent(new CustomEvent("clear-all", { bubbles: !0, composed: !0 }));
+  }
+  _addMore() {
+    this.dispatchEvent(new CustomEvent("add-more", { bubbles: !0, composed: !0 }));
+  }
+  _fillMetadata() {
+    this.dispatchEvent(new CustomEvent("fill-metadata", { bubbles: !0, composed: !0 }));
+  }
+  _upload() {
+    this.dispatchEvent(new CustomEvent("upload-start", { bubbles: !0, composed: !0 }));
+  }
+  _retryAll() {
+    this.dispatchEvent(new CustomEvent("retry-all", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return c`
+      <div class="left">
+        ${this.showFillMetadata && this.uploadState === "idle" ? c`
+              <button class="btn-sec" @click=${this._fillMetadata}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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="16" y1="13" x2="8" y2="13"/>
+                  <line x1="16" y1="17" x2="8" y2="17"/>
+                  <line x1="10" y1="9" x2="8" y2="9"/>
+                </svg>
+                Fill Metadata
+              </button>
+            ` : h}
+        <div class="count">
+          ${this.fileCount} <span>${this.fileCount === 1 ? "file" : "files"}</span>
+        </div>
+      </div>
+      <div class="right">
+        <button class="btn-ghost" @click=${this._clear}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" />
+          </svg>
+          Clear
+        </button>
+        <button class="btn-sec" @click=${this._addMore}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          Add more
+        </button>
+        ${this.failedCount > 0 ? c`
+              <button class="btn-retry" @click=${this._retryAll}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
+                  <polyline points="23 4 23 10 17 10" />
+                  <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10" />
+                </svg>
+                Retry all (${this.failedCount})
+              </button>
+            ` : h}
+        ${this._renderUploadButton()}
+      </div>
+    `;
+  }
+  _renderUploadButton() {
+    const e = this.uploadState === "uploading", t = this.uploadState === "done", r = ["btn-primary", t ? "done-state" : ""].filter(Boolean).join(" ");
+    return c`
+      <button
+        class=${r}
+        @click=${this._upload}
+        ?disabled=${e}
+      >
+        ${e ? c`<span class="btn-spin"></span> Uploading\u2026` : t ? c`
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+                Done!
+              ` : c`
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
+                  <polyline points="16 16 12 12 8 16" />
+                  <line x1="12" y1="12" x2="12" y2="21" />
+                  <path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3" />
+                </svg>
+                Upload
+              `}
+      </button>
+    `;
+  }
+};
+ne.styles = _`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: var(--sfx-up-bg, #ffffff);
+      border-top: 1px solid #ebebeb;
+      padding: 14px 24px;
+      flex-shrink: 0;
+      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
+    }
+
+    .left {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+    }
+
+    /* --- Buttons --- */
+    button {
+      height: 36px;
+      padding: 0 17px;
+      border-radius: 9px;
+      border: none;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      transition: all 0.18s ease;
+      white-space: nowrap;
+    }
+
+    button svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .btn-ghost {
+      background: none;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      border: 1.5px solid var(--sfx-up-border, #e8edf5);
+    }
+
+    .btn-ghost:hover {
+      background: #f8faff;
+      color: #64748b;
+      border-color: #d1dff0;
+    }
+
+    .btn-sec {
+      background: var(--sfx-up-primary-bg, #eff6ff);
+      color: var(--sfx-up-primary, #2563eb);
+      border: 1.5px solid rgba(37, 99, 235, 0.15);
+    }
+
+    .btn-sec:hover {
+      background: #dbeafe;
+    }
+
+    .btn-retry {
+      background: #fef2f2;
+      color: #dc2626;
+      border: 1.5px solid rgba(220, 38, 38, 0.2);
+    }
+
+    .btn-retry:hover {
+      background: #fee2e2;
+      color: #b91c1c;
+      border-color: rgba(220, 38, 38, 0.35);
+    }
+
+    .btn-primary {
+      background: linear-gradient(135deg, var(--sfx-up-primary, #2563eb), var(--sfx-up-primary-mid, #3b82f6));
+      color: #fff;
+      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
+      min-width: 110px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .btn-primary:hover:not(:disabled) {
+      background: linear-gradient(135deg, var(--sfx-up-primary-hover, #1d4ed8), var(--sfx-up-primary, #2563eb));
+      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38);
+      transform: translateY(-1px);
+    }
+
+    .btn-primary:active {
+      transform: translateY(0);
+    }
+
+    .btn-primary:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    .btn-primary.done-state {
+      background: linear-gradient(135deg, var(--sfx-up-success, #16a34a), #22c55e);
+      box-shadow: 0 2px 10px rgba(22, 163, 74, 0.28);
+    }
+
+    /* --- Spinner --- */
+    .btn-spin {
+      width: 14px;
+      height: 14px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: spinRing 0.7s linear infinite;
+    }
+
+    /* --- Count --- */
+    .count {
+      font-size: 13.5px;
+      font-weight: 700;
+      color: var(--sfx-up-text, #1e293b);
+    }
+
+    .count span {
+      font-weight: 400;
+      color: var(--sfx-up-text-muted, #94a3b8);
+    }
+
+    @keyframes spinRing {
+      to { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .btn-spin { animation: none; }
+    }
+  `;
+let z = ne;
+V([
+  x({ type: String })
+], z.prototype, "uploadState");
+V([
+  x({ type: Number })
+], z.prototype, "fileCount");
+V([
+  x({ type: Number })
+], z.prototype, "failedCount");
+V([
+  x({ type: Boolean })
+], z.prototype, "showFillMetadata");
+var Ze = Object.defineProperty, Y = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && Ze(e, t, s), s;
+};
+const ae = class ae extends w {
+  constructor() {
+    super(...arguments), this._url = "", this._name = "", this._error = "", this._loading = !1, this._onBackdropClick = (e) => {
+      e.target === e.currentTarget && this._cancel();
+    }, this._onUrlInput = (e) => {
+      this._url = e.target.value, this._error = "", this._autoName();
+    }, this._onNameInput = (e) => {
+      this._name = e.target.value;
+    }, this._onKeyDown = (e) => {
+      e.key === "Escape" && this._cancel(), e.key === "Enter" && !this._loading && this._submit();
+    };
+  }
+  _autoName() {
+    var e;
+    if (!this._name)
+      try {
+        const t = new URL(this._url).pathname.split("/"), r = t[t.length - 1];
+        if (r) {
+          const s = (e = this.shadowRoot) == null ? void 0 : e.querySelector("#nameInput");
+          s && (s.placeholder = r);
+        }
+      } catch {
+      }
+  }
+  _cancel() {
+    this.dispatchEvent(new CustomEvent("url-cancel", { bubbles: !0, composed: !0 }));
+  }
+  _submit() {
+    const e = this._url.trim();
+    if (!e) {
+      this._error = "Please enter a URL";
+      return;
+    }
+    try {
+      new URL(e);
+    } catch {
+      this._error = "Please enter a valid URL";
+      return;
+    }
+    this._error = "";
+    let t = this._name.trim();
+    if (!t)
+      try {
+        const r = new URL(e).pathname.split("/");
+        t = r[r.length - 1] || "imported-file";
+      } catch {
+        t = "imported-file";
+      }
+    this.dispatchEvent(
+      new CustomEvent("url-submit", {
+        detail: { url: e, name: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateComplete.then(() => {
+      var e, t;
+      (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("#urlInput")) == null || t.focus();
+    });
+  }
+  render() {
+    return c`
+      <div class="backdrop" @click=${this._onBackdropClick} @keydown=${this._onKeyDown}>
+        <div class="card">
+          <div class="head">
+            <div class="head-icon">
+              <svg viewBox="0 0 24 24">
+                <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" />
+                <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
+              </svg>
+            </div>
+            <div class="title">Import from URL</div>
+            <button class="close-btn" @click=${this._cancel}>\u2715</button>
+          </div>
+          <div class="body">
+            <div class="field">
+              <label>File URL</label>
+              <input
+                id="urlInput"
+                type="url"
+                placeholder="https://example.com/file.pdf"
+                .value=${this._url}
+                @input=${this._onUrlInput}
+              />
+            </div>
+            <div class="field">
+              <label>File name <span class="optional">(optional)</span></label>
+              <input
+                id="nameInput"
+                type="text"
+                placeholder="document.pdf"
+                .value=${this._name}
+                @input=${this._onNameInput}
+              />
+            </div>
+            ${this._error ? c`<div class="error">${this._error}</div>` : ""}
+            <div class="actions">
+              <button class="btn btn-ghost" @click=${this._cancel}>Cancel</button>
+              <button class="btn btn-primary" ?disabled=${this._loading} @click=${this._submit}>
+                Import file
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+ae.styles = _`
+    :host {
+      display: block;
+    }
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      background: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(6px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      animation: fadeIn 0.18s ease both;
+    }
+
+    .card {
+      background: var(--sfx-up-bg, #fff);
+      border-radius: 20px;
+      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.06);
+      width: 100%;
+      max-width: 480px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      transform: translateY(18px) scale(0.97);
+      animation: slideUp 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
+    }
+
+    .head {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 18px 20px 0;
+    }
+
+    .head-icon {
+      width: 34px;
+      height: 34px;
+      border-radius: 10px;
+      background: var(--sfx-up-primary-bg, #f5f5f7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--sfx-up-primary, #2563eb);
+    }
+
+    .head-icon svg {
+      width: 18px;
+      height: 18px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+    }
+
+    .title {
+      font-size: 15px;
+      font-weight: 700;
+      color: var(--sfx-up-text, #1a1a1a);
+      flex: 1;
+    }
+
+    .close-btn {
+      width: 28px;
+      height: 28px;
+      border-radius: 8px;
+      border: none;
+      background: #f0f0f0;
+      color: #888;
+      font-size: 14px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s, color 0.15s;
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .close-btn:hover {
+      background: #e4e4e4;
+      color: #333;
+    }
+
+    .body {
+      padding: 18px 20px 20px;
+    }
+
+    .field {
+      margin-bottom: 14px;
+    }
+
+    label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: #aaa;
+      margin-bottom: 5px;
+      text-transform: uppercase;
+      letter-spacing: 0.7px;
+    }
+
+    label .optional {
+      color: #ccc;
+      font-weight: 400;
+      text-transform: none;
+      letter-spacing: 0;
+    }
+
+    input {
+      width: 100%;
+      height: 42px;
+      border: 1.5px solid #ebebeb;
+      border-radius: 10px;
+      padding: 0 14px;
+      font-size: 14px;
+      font-family: inherit;
+      color: #1a1a1a;
+      background: #fafafa;
+      transition: border-color 0.15s, background 0.15s;
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    input:focus {
+      border-color: var(--sfx-up-primary, #2563eb);
+      background: #fff;
+    }
+
+    input::placeholder {
+      color: #ccc;
+    }
+
+    .error {
+      font-size: 12px;
+      color: #dc2626;
+      margin-top: -6px;
+      margin-bottom: 8px;
+    }
+
+    .actions {
+      display: flex;
+      gap: 9px;
+      justify-content: flex-end;
+      margin-top: 18px;
+    }
+
+    button.btn {
+      height: 36px;
+      padding: 0 17px;
+      border-radius: 9px;
+      border: none;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      transition: all 0.18s ease;
+      white-space: nowrap;
+    }
+
+    .btn-ghost {
+      background: none;
+      color: #94a3b8;
+      border: 1.5px solid #e8edf5;
+    }
+
+    .btn-ghost:hover {
+      background: #f8faff;
+      color: #64748b;
+      border-color: #d1dff0;
+    }
+
+    .btn-primary {
+      background: linear-gradient(135deg, var(--sfx-up-primary, #2563eb), #3b82f6);
+      color: #fff;
+      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .btn-primary:hover:not(:disabled) {
+      background: linear-gradient(135deg, #1d4ed8, var(--sfx-up-primary, #2563eb));
+      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38);
+      transform: translateY(-1px);
+    }
+
+    .btn-primary:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    .btn-spin {
+      width: 14px;
+      height: 14px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes slideUp {
+      from { transform: translateY(18px) scale(0.97); }
+      to { transform: translateY(0) scale(1); }
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+  `;
+let R = ae;
+Y([
+  g()
+], R.prototype, "_url");
+Y([
+  g()
+], R.prototype, "_name");
+Y([
+  g()
+], R.prototype, "_error");
+Y([
+  g()
+], R.prototype, "_loading");
+var et = Object.defineProperty, K = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && et(e, t, s), s;
+};
+const le = class le extends w {
+  constructor() {
+    super(...arguments), this._stream = null, this._error = "", this._captured = null, this._previewUrl = "", this._onBackdropClick = (e) => {
+      e.target === e.currentTarget && this._cancel();
+    }, this._onKeyDown = (e) => {
+      e.key === "Escape" && this._cancel();
+    }, this._capture = () => {
+      var s, o;
+      const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("video"), t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("canvas");
+      if (!e || !t) return;
+      t.width = e.videoWidth, t.height = e.videoHeight, t.getContext("2d").drawImage(e, 0, 0), t.toBlob((n) => {
+        n && (this._captured = n, this._previewUrl = URL.createObjectURL(n), this._stopStream());
+      }, "image/jpeg", 0.92);
+    }, this._retake = () => {
+      this._previewUrl && URL.revokeObjectURL(this._previewUrl), this._captured = null, this._previewUrl = "", this._startCamera();
+    }, this._usePhoto = () => {
+      if (!this._captured) return;
+      const e = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19), t = new File([this._captured], `camera-${e}.jpg`, { type: "image/jpeg" });
+      this.dispatchEvent(new CustomEvent("camera-capture", { detail: { file: t }, bubbles: !0, composed: !0 }));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._startCamera();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._stopStream(), this._previewUrl && URL.revokeObjectURL(this._previewUrl);
+  }
+  async _startCamera() {
+    var e;
+    try {
+      this._stream = await navigator.mediaDevices.getUserMedia({ video: !0, audio: !1 }), await this.updateComplete;
+      const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("video");
+      t && (t.srcObject = this._stream);
+    } catch {
+      this._error = "Could not access camera. Please check your permissions.";
+    }
+  }
+  _stopStream() {
+    var e;
+    (e = this._stream) == null || e.getTracks().forEach((t) => t.stop()), this._stream = null;
+  }
+  _cancel() {
+    this._stopStream(), this.dispatchEvent(new CustomEvent("camera-cancel", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return c`
+      <div class="backdrop" @click=${this._onBackdropClick} @keydown=${this._onKeyDown}>
+        <div class="card">
+          <div class="head">
+            <div class="head-icon">
+              <svg viewBox="0 0 24 24">
+                <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/>
+                <circle cx="12" cy="13" r="4"/>
+              </svg>
+            </div>
+            <div class="title">Camera</div>
+            <button class="close-btn" @click=${this._cancel}>\u2715</button>
+          </div>
+          <div class="body">
+            ${this._error ? c`<div class="error">${this._error}</div>` : this._captured ? c`
+                    <img class="preview-img" src=${this._previewUrl} alt="Captured photo" />
+                    <div class="actions">
+                      <button class="btn btn-ghost" @click=${this._retake}>Retake</button>
+                      <button class="btn btn-primary" @click=${this._usePhoto}>Use photo</button>
+                    </div>
+                  ` : c`
+                    <video autoplay playsinline muted></video>
+                    <canvas></canvas>
+                    <div class="actions">
+                      <button class="btn-capture" @click=${this._capture}></button>
+                    </div>
+                  `}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+le.styles = _`
+    :host { display: block; }
+
+    .backdrop {
+      position: fixed; inset: 0; z-index: 1000;
+      background: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(6px);
+      display: flex; align-items: center; justify-content: center;
+      padding: 20px;
+      animation: fadeIn 0.18s ease both;
+    }
+
+    .card {
+      background: var(--sfx-up-bg, #fff);
+      border-radius: 20px;
+      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.06);
+      width: 100%; max-width: 520px;
+      height: 520px;
+      overflow: hidden; display: flex; flex-direction: column;
+      animation: slideUp 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
+    }
+
+    .head {
+      display: flex; align-items: center; gap: 10px;
+      padding: 18px 20px 0;
+    }
+
+    .head-icon {
+      width: 34px; height: 34px; border-radius: 10px;
+      background: var(--sfx-up-primary-bg, #f5f5f7);
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0; color: var(--sfx-up-primary, #2563eb);
+    }
+
+    .head-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+
+    .title { font-size: 15px; font-weight: 700; color: var(--sfx-up-text, #1a1a1a); flex: 1; }
+
+    .close-btn {
+      width: 28px; height: 28px; border-radius: 8px; border: none;
+      background: #f0f0f0; color: #888; font-size: 14px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: background 0.15s, color 0.15s; flex-shrink: 0; line-height: 1;
+    }
+    .close-btn:hover { background: #e4e4e4; color: #333; }
+
+    .body { padding: 18px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; min-height: 0; justify-content: center; }
+
+    video, canvas {
+      width: 100%; flex: 1; min-height: 0; border-radius: 12px;
+      background: #000; object-fit: cover;
+    }
+
+    canvas { display: none; }
+
+    .preview-img {
+      width: 100%; max-height: 320px; border-radius: 12px;
+      object-fit: contain; background: #000;
+    }
+
+    .error { font-size: 13px; color: #dc2626; text-align: center; padding: 40px 20px; }
+
+    .actions { display: flex; gap: 9px; justify-content: center; width: 100%; }
+
+    button.btn {
+      height: 36px; padding: 0 17px; border-radius: 9px; border: none;
+      font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
+      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+      transition: all 0.18s ease; white-space: nowrap;
+    }
+
+    .btn-ghost { background: none; color: #94a3b8; border: 1.5px solid #e8edf5; }
+    .btn-ghost:hover { background: #f8faff; color: #64748b; border-color: #d1dff0; }
+
+    .btn-primary {
+      background: linear-gradient(135deg, var(--sfx-up-primary, #2563eb), #3b82f6);
+      color: #fff; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
+    }
+    .btn-primary:hover { background: linear-gradient(135deg, #1d4ed8, var(--sfx-up-primary, #2563eb)); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38); transform: translateY(-1px); }
+
+    .btn-capture {
+      width: 52px; height: 52px; border-radius: 50%; padding: 0;
+      background: #dc2626; border: 4px solid #fff;
+      box-shadow: 0 0 0 2px #dc2626, 0 4px 12px rgba(220, 38, 38, 0.3);
+      cursor: pointer; transition: all 0.15s;
+    }
+    .btn-capture:hover { background: #b91c1c; transform: scale(1.05); }
+
+    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes slideUp { from { transform: translateY(18px) scale(0.97); } to { transform: translateY(0) scale(1); } }
+  `;
+let A = le;
+K([
+  g()
+], A.prototype, "_stream");
+K([
+  g()
+], A.prototype, "_error");
+K([
+  g()
+], A.prototype, "_captured");
+K([
+  g()
+], A.prototype, "_previewUrl");
+var tt = Object.defineProperty, I = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && tt(e, t, s), s;
+};
+const ce = class ce extends w {
+  constructor() {
+    super(...arguments), this._stream = null, this._recording = !1, this._error = "", this._recordedBlob = null, this._previewUrl = "", this._recorder = null, this._chunks = [], this._onBackdropClick = (e) => {
+      e.target === e.currentTarget && this._cancel();
+    }, this._onKeyDown = (e) => {
+      e.key === "Escape" && this._cancel();
+    }, this._startRecording = async () => {
+      var e;
+      try {
+        this._stream = await navigator.mediaDevices.getDisplayMedia({
+          video: { width: 1280, height: 720, frameRate: 5 },
+          audio: !0
+        }), this._stream.getVideoTracks()[0].addEventListener("ended", () => {
+          this._stopRecording();
+        }), this._recording = !0, await this.updateComplete;
+        const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("video");
+        t && (t.srcObject = this._stream), this._chunks = [];
+        const r = MediaRecorder.isTypeSupported("video/webm;codecs=vp9") ? "video/webm;codecs=vp9" : "video/webm";
+        this._recorder = new MediaRecorder(this._stream, { mimeType: r }), this._recorder.ondataavailable = (s) => {
+          s.data.size > 0 && this._chunks.push(s.data);
+        }, this._recorder.onstop = () => {
+          var o;
+          const s = new Blob(this._chunks, { type: "video/webm" });
+          this._recordedBlob = s, this._previewUrl = URL.createObjectURL(s), (o = this._stream) == null || o.getTracks().forEach((n) => n.stop()), this._stream = null;
+        }, this._recorder.start();
+      } catch {
+        this._error = "Could not start screen capture. Please check your permissions.";
+      }
+    }, this._stopRecording = () => {
+      var e;
+      this._recording = !1, (e = this._recorder) == null || e.stop(), this._recorder = null;
+    }, this._useRecording = () => {
+      if (!this._recordedBlob) return;
+      const e = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19), t = new File([this._recordedBlob], `screencap-${e}.webm`, { type: "video/webm" });
+      this.dispatchEvent(new CustomEvent("screencast-capture", { detail: { file: t }, bubbles: !0, composed: !0 }));
+    }, this._discard = () => {
+      this._previewUrl && URL.revokeObjectURL(this._previewUrl), this._recordedBlob = null, this._previewUrl = "";
+    };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._stopAll(), this._previewUrl && URL.revokeObjectURL(this._previewUrl);
+  }
+  _stopAll() {
+    var e, t;
+    (e = this._recorder) == null || e.stop(), this._recorder = null, (t = this._stream) == null || t.getTracks().forEach((r) => r.stop()), this._stream = null;
+  }
+  _cancel() {
+    this._stopAll(), this.dispatchEvent(new CustomEvent("screencast-cancel", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return c`
+      <div class="backdrop" @click=${this._onBackdropClick} @keydown=${this._onKeyDown}>
+        <div class="card">
+          <div class="head">
+            <div class="head-icon">
+              <svg viewBox="0 0 24 24">
+                <rect x="2" y="3" width="20" height="14" rx="2"/>
+                <circle cx="12" cy="10" r="3"/>
+                <path d="M7 21h10"/>
+              </svg>
+            </div>
+            <div class="title">Screen cast</div>
+            <button class="close-btn" @click=${this._cancel}>\u2715</button>
+          </div>
+          <div class="body">
+            ${this._error ? c`<div class="error">${this._error}</div>` : this._recordedBlob ? c`
+                    <video src=${this._previewUrl} controls></video>
+                    <div class="actions">
+                      <button class="btn btn-ghost" @click=${this._discard}>Discard</button>
+                      <button class="btn btn-primary" @click=${this._useRecording}>Use recording</button>
+                    </div>
+                  ` : this._recording ? c`
+                      <video autoplay playsinline muted></video>
+                      <div class="status"><div class="rec-dot"></div> Recording...</div>
+                      <div class="actions">
+                        <button class="btn btn-danger" @click=${this._stopRecording}>Stop recording</button>
+                      </div>
+                    ` : c`
+                      <div class="start-view">
+                        <div class="start-icon">
+                          <svg viewBox="0 0 24 24">
+                            <rect x="2" y="3" width="20" height="14" rx="2"/>
+                            <circle cx="12" cy="10" r="3"/>
+                            <path d="M7 21h10"/>
+                          </svg>
+                        </div>
+                        <div class="start-text">Share your screen to record a video that will be added to your uploads.</div>
+                        <div class="actions">
+                          <button class="btn btn-ghost" @click=${this._cancel}>Cancel</button>
+                          <button class="btn btn-primary" @click=${this._startRecording}>Start recording</button>
+                        </div>
+                      </div>
+                    `}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+ce.styles = _`
+    :host { display: block; }
+
+    .backdrop {
+      position: fixed; inset: 0; z-index: 1000;
+      background: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(6px);
+      display: flex; align-items: center; justify-content: center;
+      padding: 20px;
+      animation: fadeIn 0.18s ease both;
+    }
+
+    .card {
+      background: var(--sfx-up-bg, #fff);
+      border-radius: 20px;
+      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.06);
+      width: 100%; max-width: 560px;
+      overflow: hidden; display: flex; flex-direction: column;
+      animation: slideUp 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
+    }
+
+    .head {
+      display: flex; align-items: center; gap: 10px;
+      padding: 18px 20px 0;
+    }
+
+    .head-icon {
+      width: 34px; height: 34px; border-radius: 10px;
+      background: var(--sfx-up-primary-bg, #f5f5f7);
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0; color: var(--sfx-up-primary, #2563eb);
+    }
+
+    .head-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+
+    .title { font-size: 15px; font-weight: 700; color: var(--sfx-up-text, #1a1a1a); flex: 1; }
+
+    .close-btn {
+      width: 28px; height: 28px; border-radius: 8px; border: none;
+      background: #f0f0f0; color: #888; font-size: 14px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: background 0.15s, color 0.15s; flex-shrink: 0; line-height: 1;
+    }
+    .close-btn:hover { background: #e4e4e4; color: #333; }
+
+    .body { padding: 18px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
+
+    video {
+      width: 100%; max-height: 320px; border-radius: 12px;
+      background: #000; object-fit: contain;
+    }
+
+    .error { font-size: 13px; color: #dc2626; text-align: center; padding: 40px 20px; }
+
+    .status {
+      font-size: 13px; color: var(--sfx-up-text-secondary, #475569);
+      display: flex; align-items: center; gap: 8px;
+    }
+
+    .rec-dot {
+      width: 10px; height: 10px; border-radius: 50%;
+      background: #dc2626; animation: pulse 1s ease-in-out infinite;
+    }
+
+    .actions { display: flex; gap: 9px; justify-content: center; width: 100%; }
+
+    button.btn {
+      height: 36px; padding: 0 17px; border-radius: 9px; border: none;
+      font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
+      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+      transition: all 0.18s ease; white-space: nowrap;
+    }
+
+    .btn-ghost { background: none; color: #94a3b8; border: 1.5px solid #e8edf5; }
+    .btn-ghost:hover { background: #f8faff; color: #64748b; border-color: #d1dff0; }
+
+    .btn-primary {
+      background: linear-gradient(135deg, var(--sfx-up-primary, #2563eb), #3b82f6);
+      color: #fff; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
+    }
+    .btn-primary:hover { background: linear-gradient(135deg, #1d4ed8, var(--sfx-up-primary, #2563eb)); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38); transform: translateY(-1px); }
+
+    .btn-danger {
+      background: #dc2626; color: #fff;
+      box-shadow: 0 2px 10px rgba(220, 38, 38, 0.28);
+    }
+    .btn-danger:hover { background: #b91c1c; }
+
+    .start-view {
+      display: flex; flex-direction: column; align-items: center; gap: 16px;
+      padding: 30px 20px; text-align: center;
+    }
+
+    .start-icon {
+      width: 56px; height: 56px; border-radius: 16px;
+      background: var(--sfx-up-primary-bg, #eff6ff);
+      color: var(--sfx-up-primary, #2563eb);
+      display: flex; align-items: center; justify-content: center;
+    }
+
+    .start-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+
+    .start-text {
+      font-size: 14px; color: var(--sfx-up-text-secondary, #475569); max-width: 300px;
+    }
+
+    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes slideUp { from { transform: translateY(18px) scale(0.97); } to { transform: translateY(0) scale(1); } }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+  `;
+let U = ce;
+I([
+  g()
+], U.prototype, "_stream");
+I([
+  g()
+], U.prototype, "_recording");
+I([
+  g()
+], U.prototype, "_error");
+I([
+  g()
+], U.prototype, "_recordedBlob");
+I([
+  g()
+], U.prototype, "_previewUrl");
+var rt = Object.defineProperty, D = (i, e, t, r) => {
+  for (var s = void 0, o = i.length - 1, n; o >= 0; o--)
+    (n = i[o]) && (s = n(e, t, s) || s);
+  return s && rt(e, t, s), s;
+};
+const ue = /* @__PURE__ */ new Set(["unsplash"]);
+var m;
+const P = (m = class extends w {
+  constructor() {
+    super(), this.config = null, this._isOpen = !1, this._activeConnector = null, this._showUrlDialog = !1, this._showCameraDialog = !1, this._showScreenCastDialog = !1, this._engine = null, this._cachedSources = H, this._cachedSourcesConfig = void 0, this._apiBase = null, this._authHeaders = null, this._authResolveId = 0, this._prevStoreState = null, this._unsubStoreEvents = null, this._onFilesSelected = (e) => {
+      this._processIncomingFiles(e.detail.files);
+    }, this._onSourceClick = async (e) => {
+      var o, n;
+      const t = e.detail.source, r = this._mergedSources.find((a) => a.id === t);
+      if (r != null && r.onActivate) {
+        try {
+          r.onActivate(this);
+        } catch (a) {
+          console.error(`[sfx-uploader] onActivate for custom source "${t}" threw:`, a);
+        }
+        return;
+      }
+      if (t === "device") {
+        const a = this.shadowRoot.querySelector("sfx-drop-zone");
+        a == null || a.browse();
+        return;
+      }
+      if (t === "url") {
+        this._showUrlDialog = !0;
+        return;
+      }
+      if (t === "camera") {
+        this._showCameraDialog = !0;
+        return;
+      }
+      if (t === "screen-cast") {
+        this._showScreenCastDialog = !0;
+        return;
+      }
+      if ((((n = (o = this.config) == null ? void 0 : o.connectors) == null ? void 0 : n.providers) ?? []).includes(t)) {
+        if (ue.has(t)) {
+          if (!customElements.get("sfx-search-provider-browser")) {
+            const { SfxSearchProviderBrowser: l } = await import("./search-provider-browser-jCOer2Y9.js");
+            customElements.define("sfx-search-provider-browser", l);
+          }
+        } else if (!customElements.get("sfx-provider-browser")) {
+          const { SfxProviderBrowser: l } = await import("./provider-browser-C-S_MPrC.js");
+          customElements.define("sfx-provider-browser", l);
+        }
+        this._activeConnector = t;
+      }
+    }, this._onUrlSubmit = (e) => {
+      var a, l, p;
+      this._showUrlDialog = !1;
+      const { url: t, name: r } = e.detail, s = Le(r), o = s.startsWith("image/"), n = {
+        id: B(),
+        status: "idle",
+        file: null,
+        remoteUrl: t,
+        name: r,
+        size: 0,
+        type: s,
+        previewUrl: o ? t : null,
+        progress: 0,
+        speed: 0,
+        bytesUploaded: 0,
+        error: null,
+        retryCount: 0,
+        response: null,
+        addedAt: Date.now(),
+        meta: {},
+        tags: [],
+        remoteInfo: null
+      };
+      j(this._store, n), this._dispatchPublic(f.FILE_ADDED, { file: n }), (p = (l = (a = this.config) == null ? void 0 : a.callbacks) == null ? void 0 : l.onFileAdded) == null || p.call(l, n), this._store.getState().queueConfig.autoProceed && this.upload();
+    }, this._onUrlCancel = () => {
+      this._showUrlDialog = !1;
+    }, this._onCameraCapture = (e) => {
+      this._showCameraDialog = !1, this._processIncomingFiles([e.detail.file]);
+    }, this._onCameraCancel = () => {
+      this._showCameraDialog = !1;
+    }, this._onScreenCastCapture = (e) => {
+      this._showScreenCastDialog = !1, this._processIncomingFiles([e.detail.file]);
+    }, this._onScreenCastCancel = () => {
+      this._showScreenCastDialog = !1;
+    }, this._onFileRemove = (e) => {
+      var r, s, o, n;
+      const t = this._store.getState().files.get(e.detail.fileId);
+      t != null && t.previewUrl && URL.revokeObjectURL(t.previewUrl), t && (t.status === "uploading" || t.status === "queued") && ((r = this._engine) == null || r.cancelFile(e.detail.fileId)), me(this._store, e.detail.fileId), t && (this._dispatchPublic(f.FILE_REMOVED, { file: t }), (n = (o = (s = this.config) == null ? void 0 : s.callbacks) == null ? void 0 : o.onFileRemoved) == null || n.call(o, t));
+    }, this._onFilePreview = (e) => {
+      var r, s, o;
+      const t = this._store.getState().files.get(e.detail.fileId);
+      t && (this._dispatchPublic(f.FILE_PREVIEW, { file: t }), (o = (s = (r = this.config) == null ? void 0 : r.callbacks) == null ? void 0 : s.onFilePreview) == null || o.call(s, t));
+    }, this._onFillMetadata = () => {
+      var t, r, s;
+      const e = [...this._store.getState().files.values()].filter(
+        (o) => m._MODIFIABLE_STATUSES.has(o.status)
+      );
+      this._dispatchPublic(f.FILL_METADATA, { files: e }), (s = (r = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : r.onFillMetadata) == null || s.call(r, e);
+    }, this._onFileRetry = (e) => {
+      var t;
+      this._ensureEngine(), (t = this._engine) == null || t.retryFile(e.detail.fileId);
+    }, this._onRetryAll = () => {
+      var e;
+      this._ensureEngine(), (e = this._engine) == null || e.retryAll();
+    }, this._onClearAll = () => {
+      var t, r, s;
+      const e = (t = this.config) == null ? void 0 : t.callbacks;
+      for (const o of this._store.getState().files.values())
+        o.previewUrl && URL.revokeObjectURL(o.previewUrl), this._dispatchPublic(f.FILE_REMOVED, { file: o }), (r = e == null ? void 0 : e.onFileRemoved) == null || r.call(e, o);
+      (s = this._engine) == null || s.cancelAll(), this._store.setState({
+        files: /* @__PURE__ */ new Map(),
+        isUploading: !1,
+        totalProgress: 0,
+        totalSpeed: 0,
+        totalBytesUploaded: 0,
+        totalBytes: 0
+      });
+    }, this._onAddMore = () => {
+      const e = this.shadowRoot.querySelector("sfx-drop-zone");
+      e == null || e.browse();
+    }, this._onUploadStart = () => {
+      if (this._phase === "complete") {
+        this._onClearAll();
+        return;
+      }
+      this.upload();
+    }, this._onUploadMore = () => {
+      this._onClearAll();
+    }, this._onConnectorFilesSelected = (e) => {
+      var r, s;
+      const t = (r = this.config) == null ? void 0 : r.callbacks;
+      for (const o of e.detail.files) {
+        const n = {
+          id: B(),
+          status: "idle",
+          file: null,
+          remoteUrl: null,
+          name: o.name,
+          size: o.size,
+          type: o.mimeType,
+          previewUrl: o.thumbnail,
+          progress: 0,
+          speed: 0,
+          bytesUploaded: 0,
+          error: null,
+          retryCount: 0,
+          response: null,
+          addedAt: Date.now(),
+          meta: {},
+          tags: [],
+          remoteInfo: o
+        };
+        j(this._store, n), this._dispatchPublic(f.FILE_ADDED, { file: n }), (s = t == null ? void 0 : t.onFileAdded) == null || s.call(t, n);
+      }
+      this._activeConnector = null, this._store.getState().queueConfig.autoProceed && this.upload();
+    }, this._onConnectorClose = () => {
+      this._activeConnector = null;
+    }, this._onConnectorBackdropClick = (e) => {
+      e.target === e.currentTarget && (this._activeConnector = null);
+    }, this._onPrimaryAction = () => {
+      var e;
+      this._dispatchPublic(f.COMPLETE_ACTION, {}), ((e = this.config) == null ? void 0 : e.mode) === "modal" && this.close();
+    }, this._onModalDismiss = () => {
+      var e, t, r;
+      (r = (t = (e = this.config) == null ? void 0 : e.callbacks) == null ? void 0 : t.onCancel) == null || r.call(t), this._dispatchPublic(f.CANCEL, {}), this.close();
+    }, this._onModalBackdropClick = (e) => {
+      e.target === e.currentTarget && this._onModalDismiss();
+    }, this._onKeyDown = (e) => {
+      var t;
+      e.key === "Escape" && this._isOpen && ((t = this.config) == null ? void 0 : t.mode) === "modal" && this._onModalDismiss();
+    }, this._store = ve(), this._storeCtrl = new ye(this, this._store);
+  }
+  // --- Public API ---
+  /** Open the uploader (modal mode). */
+  open() {
+    var e, t, r;
+    this._isOpen || (this._isOpen = !0, (r = (t = (e = this.config) == null ? void 0 : e.callbacks) == null ? void 0 : t.onOpen) == null || r.call(t), this._dispatchPublic(f.OPEN, {}), this.requestUpdate());
+  }
+  /** Close the uploader (modal mode). */
+  close() {
+    var e, t, r;
+    this._isOpen && (this._isOpen = !1, (r = (t = (e = this.config) == null ? void 0 : e.callbacks) == null ? void 0 : t.onClose) == null || r.call(t), this._dispatchPublic(f.CLOSE, {}), this.requestUpdate());
+  }
+  /** Start uploading all queued files. */
+  upload() {
+    var s, o, n, a, l;
+    if (this._ensureEngine(), !this._engine) {
+      console.warn("[sfx-uploader] Cannot upload: auth not resolved yet");
+      return;
+    }
+    const e = [...this._store.getState().files.values()].filter(
+      (p) => p.status === "idle" || p.status === "queued"
+    );
+    if ((o = (s = this.config) == null ? void 0 : s.callbacks) != null && o.onBeforeUpload && this.config.callbacks.onBeforeUpload(e) === !1)
+      return;
+    const t = new CustomEvent(f.BEFORE_UPLOAD, {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0,
+      detail: { files: e }
+    });
+    this.dispatchEvent(t) && (this._dispatchPublic(f.UPLOAD_STARTED, { files: e }), (l = (a = (n = this.config) == null ? void 0 : n.callbacks) == null ? void 0 : a.onUploadStarted) == null || l.call(a, e), this._engine.uploadAll());
+  }
+  /** Programmatically add files. */
+  addFiles(e) {
+    this._processIncomingFiles(e);
+  }
+  /** Resume a paused upload (spec §13.2). */
+  resumeUpload(e) {
+    var t;
+    if (e && e.length > 0) {
+      const r = this._store.getState().files, s = new Map(r);
+      let o = !1;
+      for (const n of e) {
+        const a = r.get(n.id);
+        a && (s.set(n.id, { ...a, ...n }), o = !0);
+      }
+      o && this._store.setState({ files: s });
+    }
+    this._ensureEngine(), (t = this._engine) == null || t.uploadAll();
+  }
+  /** Cancel a paused upload (spec §13.2). */
+  cancelUpload() {
+    var e;
+    (e = this._engine) == null || e.cancelAll();
+  }
+  /** Get a snapshot of all current files. */
+  getFiles() {
+    return [...this._store.getState().files.values()];
+  }
+  /** Get a single file by ID. */
+  getFile(e) {
+    return this._store.getState().files.get(e);
+  }
+  /** Update metadata and/or tags for a single file. */
+  updateFileMeta(e, t, r) {
+    const s = this._store.getState().files, o = s.get(e);
+    if (!o || !m._MODIFIABLE_STATUSES.has(o.status)) return;
+    const n = new Map(s);
+    n.set(e, {
+      ...o,
+      meta: t != null ? { ...o.meta, ...t } : o.meta,
+      tags: r ?? o.tags
+    }), this._store.setState({ files: n });
+  }
+  /** Batch-update metadata and/or tags for multiple files. */
+  updateFilesMeta(e) {
+    const t = this._store.getState().files, r = new Map(t);
+    let s = !1;
+    for (const { fileId: o, meta: n, tags: a } of e) {
+      const l = t.get(o);
+      !l || !m._MODIFIABLE_STATUSES.has(l.status) || (r.set(o, {
+        ...l,
+        meta: n != null ? { ...l.meta, ...n } : l.meta,
+        tags: a ?? l.tags
+      }), s = !0);
+    }
+    s && this._store.setState({ files: r });
+  }
+  // --- Lifecycle ---
+  updated(e) {
+    e.has("config") && this.config && this._applyConfig(this.config);
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this._onKeyDown), this._unsubStoreEvents = this._store.subscribe(() => this._onStoreChange());
+  }
+  disconnectedCallback() {
+    var e, t;
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._onKeyDown), (e = this._unsubStoreEvents) == null || e.call(this), this._unsubStoreEvents = null, this._prevStoreState = null, (t = this._engine) == null || t.destroy(), this._engine = null;
+  }
+  // --- Config ---
+  _applyConfig(e) {
+    const t = {};
+    if (e.targetFolder && (t.targetFolder = e.targetFolder), e.restrictions && (t.restrictions = {
+      ...this._store.getState().restrictions,
+      ...e.restrictions
+    }), e.concurrency) {
+      const r = this._store.getState().queueConfig;
+      t.queueConfig = { ...r, concurrency: e.concurrency };
+    }
+    if (e.autoProceed != null) {
+      const r = t.queueConfig ?? this._store.getState().queueConfig;
+      t.queueConfig = { ...r, autoProceed: e.autoProceed };
+    }
+    Object.keys(t).length > 0 && this._store.setState(t), this._resolveAuthAndEngine(e), (e.mode === "inline" || !e.mode) && (this._isOpen = !0);
+  }
+  async _resolveAuthAndEngine(e) {
+    const t = e.auth;
+    if (t.mode === "sass-key" || t.mode === "session") {
+      this._apiBase = Z(t.container), this._authHeaders = J(t), this._ensureEngine(), this._engine.updateConfig({
+        apiBase: this._apiBase,
+        authHeaders: this._authHeaders
+      });
+      return;
+    }
+    const r = ++this._authResolveId;
+    try {
+      const s = await ze(t);
+      if (r !== this._authResolveId) return;
+      this._apiBase = s.apiBase, this._authHeaders = s.headers, this._ensureEngine(), this._engine.updateConfig({
+        apiBase: this._apiBase,
+        authHeaders: this._authHeaders
+      });
+    } catch (s) {
+      if (r !== this._authResolveId) return;
+      console.error("[sfx-uploader] Auth resolution failed:", s);
+    }
+  }
+  _ensureEngine() {
+    !this._engine && this._apiBase && this._authHeaders && (this._engine = new Se(this._store, {
+      apiBase: this._apiBase,
+      authHeaders: this._authHeaders
+    }), this._engine.start());
+  }
+  // --- Public event dispatching (spec §13.1) ---
+  _dispatchPublic(e, t) {
+    this.dispatchEvent(
+      new CustomEvent(e, { bubbles: !0, composed: !0, detail: t })
+    );
+  }
+  /**
+   * React to store changes and dispatch public events + callbacks
+   * for file status transitions.
+   */
+  _onStoreChange() {
+    var s, o, n, a, l, p, b;
+    const e = this._store.getState(), t = this._prevStoreState;
+    if (this._prevStoreState = e, !t) return;
+    const r = (s = this.config) == null ? void 0 : s.callbacks;
+    for (const [u, d] of e.files) {
+      const v = t.files.get(u);
+      if (v) {
+        if (v.status !== d.status)
+          switch (d.status) {
+            case "uploading":
+              break;
+            case "complete":
+              d.response && (this._dispatchPublic(f.UPLOAD_COMPLETE, { file: d, response: d.response }), (o = r == null ? void 0 : r.onUploadComplete) == null || o.call(r, d, d.response));
+              break;
+            case "error":
+            case "failed": {
+              const E = new Error(d.error ?? "Upload failed");
+              this._dispatchPublic(f.UPLOAD_ERROR, { file: d, error: E }), (n = r == null ? void 0 : r.onUploadError) == null || n.call(r, d, E);
+              break;
+            }
+            case "retrying":
+              this._dispatchPublic(f.UPLOAD_RETRY, { file: d, attempt: d.retryCount }), (a = r == null ? void 0 : r.onUploadRetry) == null || a.call(r, d, d.retryCount);
+              break;
+          }
+        d.status === "uploading" && v.progress !== d.progress && (this._dispatchPublic(f.UPLOAD_PROGRESS, { file: d, progress: d.progress, speed: d.speed }), (l = r == null ? void 0 : r.onUploadProgress) == null || l.call(r, d, d.progress, d.speed));
+      }
+    }
+    if (e.totalProgress !== t.totalProgress || e.totalSpeed !== t.totalSpeed) {
+      const u = e.totalSpeed > 0 ? (e.totalBytes - e.totalBytesUploaded) / e.totalSpeed : 0;
+      this._dispatchPublic(f.TOTAL_PROGRESS, {
+        percentage: e.totalProgress,
+        speed: e.totalSpeed,
+        eta: u
+      }), (p = r == null ? void 0 : r.onTotalProgress) == null || p.call(r, e.totalProgress, e.totalSpeed, u);
+    }
+    if (t.isUploading && !e.isUploading) {
+      const u = [...e.files.values()];
+      if (!u.some((v) => v.status === "cancelled")) {
+        const v = u.filter((S) => S.status === "complete"), E = u.filter((S) => S.status === "failed" || S.status === "error");
+        this._dispatchPublic(f.ALL_COMPLETE, { successful: v, failed: E }), (b = r == null ? void 0 : r.onAllComplete) == null || b.call(r, v, E);
+      }
+    }
+  }
+  get _mergedSources() {
+    var n;
+    const e = (n = this.config) == null ? void 0 : n.connectors;
+    if (e === this._cachedSourcesConfig) return this._cachedSources;
+    if (this._cachedSourcesConfig = e, !e)
+      return this._cachedSources = H, this._cachedSources;
+    const t = e.providers.length > 0 ? Fe(e.providers) : [], r = e.customSources ?? [], s = /* @__PURE__ */ new Set(), o = [];
+    for (const a of [...H, ...t, ...r])
+      if (!s.has(a.id)) {
+        if (m._RESERVED_IDS.has(a.id) && a.onActivate) {
+          console.warn(`[sfx-uploader] Custom source id "${a.id}" conflicts with a built-in source and was skipped.`);
+          continue;
+        }
+        s.add(a.id), o.push(a);
+      }
+    return this._cachedSources = o, this._cachedSources;
+  }
+  // --- Phase computation ---
+  get _phase() {
+    const e = this._storeCtrl.state, t = [...e.files.values()];
+    if (t.length === 0) return "empty";
+    if (e.isUploading) return "uploading";
+    const r = /* @__PURE__ */ new Set(["complete", "rejected", "cancelled", "failed"]);
+    return t.every((s) => r.has(s.status)) && t.some((s) => s.status === "complete") ? "complete" : "ready";
+  }
+  // --- File handling ---
+  _processIncomingFiles(e) {
+    var r, s, o;
+    const t = (r = this.config) == null ? void 0 : r.callbacks;
+    for (const n of e) {
+      const a = this._store.getState(), l = Me(n, a.restrictions, a.files);
+      if (l) {
+        const u = {
+          id: B(),
+          status: "rejected",
+          file: n,
+          remoteUrl: null,
+          name: n.name,
+          size: n.size,
+          type: n.type,
+          previewUrl: null,
+          progress: 0,
+          speed: 0,
+          bytesUploaded: 0,
+          error: l,
+          retryCount: 0,
+          response: null,
+          addedAt: Date.now(),
+          meta: {},
+          tags: [],
+          remoteInfo: null
+        };
+        j(this._store, u), this._dispatchPublic(f.FILE_REJECTED, { file: u, reason: l }), (s = t == null ? void 0 : t.onFileRejected) == null || s.call(t, u, l);
+        continue;
+      }
+      let p = null;
+      n.type.startsWith("image/") && (p = URL.createObjectURL(n));
+      const b = {
+        id: B(),
+        status: "idle",
+        file: n,
+        remoteUrl: null,
+        name: n.name,
+        size: n.size,
+        type: n.type,
+        previewUrl: p,
+        progress: 0,
+        speed: 0,
+        bytesUploaded: 0,
+        error: null,
+        retryCount: 0,
+        response: null,
+        addedAt: Date.now(),
+        meta: {},
+        tags: [],
+        remoteInfo: null
+      };
+      j(this._store, b), this._dispatchPublic(f.FILE_ADDED, { file: b }), (o = t == null ? void 0 : t.onFileAdded) == null || o.call(t, b);
+    }
+    this._store.getState().queueConfig.autoProceed && this.upload();
+  }
+  // --- Render ---
+  render() {
+    var t;
+    return (((t = this.config) == null ? void 0 : t.mode) ?? "modal") === "modal" ? this._isOpen ? c`
+        <div class="modal-backdrop" @click=${this._onModalBackdropClick}>
+          <div class="modal-card">
+            ${this._renderHeader()}
+            ${this._renderBody()}
+          </div>
+        </div>
+      ` : h : c`
+      <div class="inline">
+        ${this._renderBody()}
+      </div>
+    `;
+  }
+  _renderHeader() {
+    return c`
+      <div class="header">
+        <div class="header-title">Upload files</div>
+        <button class="close-btn" @click=${this._onModalDismiss}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+  _renderBody() {
+    var n, a;
+    const e = this._storeCtrl.state, t = [...e.files.values()], r = this._phase, s = Ie(e.restrictions), o = t.length > 0;
+    return c`
+      <div class="content"
+        @files-selected=${this._onFilesSelected}
+        @source-click=${this._onSourceClick}
+        @file-remove=${this._onFileRemove}
+        @file-preview=${this._onFilePreview}
+        @file-retry=${this._onFileRetry}
+        @fill-metadata=${this._onFillMetadata}
+        @retry-all=${this._onRetryAll}
+        @clear-all=${this._onClearAll}
+        @add-more=${this._onAddMore}
+        @upload-start=${this._onUploadStart}
+        @upload-more=${this._onUploadMore}
+        @primary-action=${this._onPrimaryAction}
+        @connector-files-selected=${this._onConnectorFilesSelected}
+        @connector-close=${this._onConnectorClose}
+        @url-submit=${this._onUrlSubmit}
+        @url-cancel=${this._onUrlCancel}
+        @camera-capture=${this._onCameraCapture}
+        @camera-cancel=${this._onCameraCancel}
+        @screencast-capture=${this._onScreenCastCapture}
+        @screencast-cancel=${this._onScreenCastCancel}
+      >
+        <div class="body">
+          ${r === "complete" ? c`
+                  <sfx-success-card
+                    .fileCount=${t.length}
+                  ></sfx-success-card>
+                ` : c`
+                  <sfx-drop-zone
+                    .compact=${o}
+                    .accept=${s}
+                    .sources=${this._mergedSources}
+                  ></sfx-drop-zone>
+
+                  ${o ? h : c`
+                        <sfx-import-divider></sfx-import-divider>
+                        <sfx-source-pills .sources=${this._mergedSources}></sfx-source-pills>
+                      `}
+
+                  ${o ? c`
+                        <sfx-file-list .files=${t}></sfx-file-list>
+                      ` : h}
+                `}
+        </div>
+
+        ${o ? c`
+              <sfx-actions-bar
+                .uploadState=${r === "complete" ? "done" : r === "uploading" ? "uploading" : "idle"}
+                .fileCount=${t.length}
+                .failedCount=${t.filter((l) => l.status === "failed" || l.status === "error").length}
+                .showFillMetadata=${!!((n = this.config) != null && n.showFillMetadata)}
+              ></sfx-actions-bar>
+            ` : h}
+
+        ${this._showUrlDialog ? c`<sfx-url-dialog></sfx-url-dialog>` : h}
+        ${this._showCameraDialog ? c`<sfx-camera-dialog></sfx-camera-dialog>` : h}
+        ${this._showScreenCastDialog ? c`<sfx-screen-cast-dialog></sfx-screen-cast-dialog>` : h}
+
+        ${this._activeConnector && ((a = this.config) != null && a.connectors) ? c`
+              <div class="connector-modal-backdrop" @click=${this._onConnectorBackdropClick}>
+                <div class="connector-modal">
+                  ${ue.has(this._activeConnector) ? c`
+                        <sfx-search-provider-browser
+                          .provider=${this._activeConnector}
+                          .companionUrl=${this.config.connectors.companionUrl}
+                        ></sfx-search-provider-browser>
+                      ` : c`
+                        <sfx-provider-browser
+                          .provider=${this._activeConnector}
+                          .companionUrl=${this.config.connectors.companionUrl}
+                        ></sfx-provider-browser>
+                      `}
+                </div>
+              </div>
+            ` : h}
+      </div>
+    `;
+  }
+}, m.styles = _`
+    :host {
+      display: block;
+      font-family: var(--sfx-up-font, 'Inter', system-ui, -apple-system, sans-serif);
+      color: var(--sfx-up-text, #1e293b);
+      --sfx-up-primary: #2563eb;
+      --sfx-up-primary-hover: #1d4ed8;
+      --sfx-up-primary-mid: #3b82f6;
+      --sfx-up-primary-bg: #eff6ff;
+      --sfx-up-primary-glow: rgba(37, 99, 235, 0.18);
+      --sfx-up-success: #16a34a;
+      --sfx-up-error: #dc2626;
+      --sfx-up-text: #1e293b;
+      --sfx-up-text-secondary: #475569;
+      --sfx-up-text-muted: #94a3b8;
+      --sfx-up-border: #e8edf5;
+      --sfx-up-border-light: #f1f5f9;
+      --sfx-up-bg: #ffffff;
+      --sfx-up-radius: 16px;
+      --sfx-up-font: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+
+    /* --- Modal overlay --- */
+    .modal-backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.45);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      animation: fadeIn 0.2s ease;
+    }
+
+    .modal-card {
+      background: var(--sfx-up-bg, #fff);
+      border-radius: 20px;
+      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
+      width: 90vw;
+      max-width: 680px;
+      max-height: 85vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      animation: modalIn 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
+    }
+
+    /* --- Header --- */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 18px 24px;
+      border-bottom: 1px solid var(--sfx-up-border-light, #f1f5f9);
+    }
+
+    .header-title {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--sfx-up-text, #1e293b);
+    }
+
+    .close-btn {
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      transition: all 0.15s;
+    }
+
+    .close-btn:hover {
+      background: #f1f5f9;
+      color: var(--sfx-up-text, #1e293b);
+    }
+
+    .close-btn svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    /* --- Content wrapper (holds body + actions bar) --- */
+    .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    /* --- Body --- */
+    .body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-height: 0;
+    }
+
+    .body sfx-drop-zone {
+      position: relative;
+      z-index: 1;
+    }
+
+    /* --- Inline mode --- */
+    .inline {
+      border: 1px solid var(--sfx-up-border, #e8edf5);
+      border-radius: var(--sfx-up-radius, 16px);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* --- Connector modal overlay --- */
+    .connector-modal-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      background: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(6px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      animation: fadeIn 0.18s ease both;
+    }
+
+    .connector-modal {
+      background: var(--sfx-up-bg, #fff);
+      border-radius: 20px;
+      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.06);
+      width: 100%;
+      max-width: 540px;
+      height: 80vh;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      animation: modalIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes modalIn {
+      from {
+        opacity: 0;
+        transform: scale(0.92) translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .modal-backdrop { animation: none; }
+      .modal-card { animation: none; }
+    }
+  `, m._MODIFIABLE_STATUSES = /* @__PURE__ */ new Set([
+  "idle",
+  "queued",
+  "validating",
+  "rejected"
+]), m._RESERVED_IDS = /* @__PURE__ */ new Set(["device", "camera", "screen-cast", "url"]), m);
+D([
+  x({ attribute: !1 })
+], P.prototype, "config");
+D([
+  g()
+], P.prototype, "_isOpen");
+D([
+  g()
+], P.prototype, "_activeConnector");
+D([
+  g()
+], P.prototype, "_showUrlDialog");
+D([
+  g()
+], P.prototype, "_showCameraDialog");
+D([
+  g()
+], P.prototype, "_showScreenCastDialog");
+let pt = P;
+export {
+  Q as A,
+  H as C,
+  f as P,
+  z as S,
+  Se as U,
+  $ as a,
+  X as b,
+  G as c,
+  pe as d,
+  W as e,
+  q as f,
+  pt as g,
+  xe as h,
+  J as i,
+  ve as j,
+  Pe as k,
+  Z as l,
+  Fe as m,
+  R as n,
+  A as o,
+  U as p,
+  nt as q,
+  ze as r,
+  ct as s,
+  dt as t,
+  at as u,
+  lt as v
+};