@scaleflex/uploader 0.1.0 → 0.2.1

package/dist/sfx-uploader-C2lWIRnU.js

@@ -1,3789 +0,0 @@
-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
-};