@scaleflex/uploader 0.2.4 → 0.2.6

package/dist/{sfx-uploader-DfRa5s6H.js → sfx-uploader-C3Z9k-Q8.js}

@@ -1,8 +1,8 @@
-import { LitElement as P, css as S, svg as M, html as l, nothing as p, render as ke } from "lit";
-import { property as b, state as g, query as Fe } from "lit/decorators.js";
-import { unsafeSVG as F } from "lit/directives/unsafe-svg.js";
-import { unsafeHTML as T } from "lit/directives/unsafe-html.js";
-class je {
+import { LitElement as U, css as S, svg as R, html as l, render as T, nothing as c } from "lit";
+import { property as b, state as g, query as je } from "lit/decorators.js";
+import { unsafeSVG as O } from "lit/directives/unsafe-svg.js";
+import { unsafeHTML as M } from "lit/directives/unsafe-html.js";
+class Oe {
   constructor(e) {
     this.listeners = /* @__PURE__ */ new Set(), this._notifying = !1, this._pendingState = null, this.state = e;
   }
@@ -33,13 +33,13 @@ class je {
     this.listeners.clear();
   }
 }
-function z(a, e, t) {
+function P(a, e, t) {
   const i = a.getState().files, r = i.get(e);
   if (!r) return;
   const o = new Map(i);
   o.set(e, { ...r, ...t }), a.setState({ files: o });
 }
-function I(a, e) {
+function H(a, e) {
   const t = new Map(a.getState().files);
   t.set(e.id, e), a.setState({ files: t });
 }
@@ -49,8 +49,8 @@ function Ce(a, e) {
   const i = new Map(t);
   i.delete(e), a.setState({ files: i });
 }
-function Oe() {
-  return new je({
+function Re() {
+  return new Oe({
     files: /* @__PURE__ */ new Map(),
     queueConfig: {
       concurrency: 3,
@@ -171,17 +171,17 @@ function Be(a, e) {
     }
   };
 }
-function te(a) {
+function re(a) {
   return {
     Accept: "application/json",
     "Content-Type": "application/json",
     "uppy-auth-token": a
   };
 }
-function V(a) {
+function N(a) {
   return a.replace(/\/+$/, "");
 }
-const Re = {
+const Le = {
   "google-drive": "drive",
   dropbox: "dropbox",
   onedrive: "onedrive",
@@ -190,43 +190,43 @@ const Re = {
   facebook: "facebook",
   unsplash: "unsplash"
 };
-function K(a) {
-  return Re[a] ?? a;
+function G(a) {
+  return Le[a] ?? a;
 }
-function mt(a, e) {
-  const t = V(a), i = btoa(JSON.stringify({ origin: window.location.origin })), r = K(e);
+function wt(a, e) {
+  const t = N(a), i = btoa(JSON.stringify({ origin: window.location.origin })), r = G(e);
   return `${t}/${r}/connect?state=${encodeURIComponent(i)}`;
 }
-async function wt(a, e, t, i = "") {
-  const r = V(a), o = i ? `/${i}` : "", s = K(e), n = await fetch(`${r}/${s}/list${o}`, {
+async function yt(a, e, t, i = "") {
+  const r = N(a), o = i ? `/${i}` : "", s = G(e), n = await fetch(`${r}/${s}/list${o}`, {
     method: "GET",
-    headers: te(t),
+    headers: re(t),
     credentials: "same-origin"
   });
   if (n.status === 401)
-    throw new le();
+    throw new de();
   if (!n.ok) {
     const d = await n.json().catch(() => null);
     throw new Error((d == null ? void 0 : d.message) || `Companion list failed (HTTP ${n.status})`);
   }
   return n.json();
 }
-async function yt(a, e, t) {
-  const i = V(a), r = await fetch(`${i}/${t}`, {
+async function _t(a, e, t) {
+  const i = N(a), r = await fetch(`${i}/${t}`, {
     method: "GET",
-    headers: te(e),
+    headers: re(e),
     credentials: "same-origin"
   });
   if (r.status === 401)
-    throw new le();
+    throw new de();
   if (!r.ok) {
     const o = await r.json().catch(() => null);
     throw new Error((o == null ? void 0 : o.message) || `Companion list failed (HTTP ${r.status})`);
   }
   return r.json();
 }
-async function _t(a, e, t, i) {
-  const r = V(a), o = K(e), s = i ? `q=${encodeURIComponent(t)}&${i}` : `q=${encodeURIComponent(t)}`, n = await fetch(`${r}/search/${o}/list?${s}`, {
+async function kt(a, e, t, i) {
+  const r = N(a), o = G(e), s = i ? `q=${encodeURIComponent(t)}&${i}` : `q=${encodeURIComponent(t)}`, n = await fetch(`${r}/search/${o}/list?${s}`, {
     method: "GET",
     headers: {
       Accept: "application/json",
@@ -240,10 +240,10 @@ async function _t(a, e, t, i) {
   }
   return n.json();
 }
-async function Le(a, e, t, i, r, o = !1) {
-  const s = V(a), n = K(e), d = o ? `${s}/search/${n}/get/${i}` : `${s}/${n}/get/${i}`, c = o ? { Accept: "application/json", "Content-Type": "application/json" } : te(t), u = await fetch(d, {
+async function Ae(a, e, t, i, r, o = !1) {
+  const s = N(a), n = G(e), d = o ? `${s}/search/${n}/get/${i}` : `${s}/${n}/get/${i}`, p = o ? { Accept: "application/json", "Content-Type": "application/json" } : re(t), h = await fetch(d, {
     method: "POST",
-    headers: c,
+    headers: p,
     credentials: "same-origin",
     body: JSON.stringify({
       ...r,
@@ -252,33 +252,33 @@ async function Le(a, e, t, i, r, o = !1) {
       fieldname: r.fieldname ?? "files[]"
     })
   });
-  if (u.status === 401)
-    throw new le();
-  if (!u.ok) {
-    const h = await u.json().catch(() => null);
-    throw new Error((h == null ? void 0 : h.message) || `Companion upload failed (HTTP ${u.status})`);
+  if (h.status === 401)
+    throw new de();
+  if (!h.ok) {
+    const u = await h.json().catch(() => null);
+    throw new Error((u == null ? void 0 : u.message) || `Companion upload failed (HTTP ${h.status})`);
   }
-  return u.json();
+  return h.json();
 }
-async function kt(a, e, t) {
-  const i = V(a), r = K(e), o = await fetch(`${i}/${r}/logout`, {
+async function Ct(a, e, t) {
+  const i = N(a), r = G(e), o = await fetch(`${i}/${r}/logout`, {
     method: "GET",
-    headers: te(t),
+    headers: re(t),
     credentials: "same-origin"
   });
   return o.ok ? o.json() : { ok: !1, revoked: !1 };
 }
-function Ae(a) {
+function Ie(a) {
   var r;
   const t = ((r = /^(?:https?:\/\/|\/\/)?(?:[^@\n]+@)?(?:www\.)?([^\n]+)/i.exec(a)) == null ? void 0 : r[1]) ?? a;
   return `${location.protocol === "https:" ? "wss" : "ws"}://${t}`;
 }
-class le extends Error {
+class de extends Error {
   constructor() {
     super("Authentication expired"), this.name = "AuthExpiredError";
   }
 }
-function Ie(a, e) {
+function He(a, e) {
   const t = a.remoteInfo;
   if (!t)
     return e.onError(new Error("remoteInfo is required for companion upload")), { abort() {
@@ -287,17 +287,17 @@ function Ie(a, e) {
   const s = `${e.apiBase.replace(/\/+$/, "")}/v4/files?folder=${encodeURIComponent(e.folder)}`, n = {};
   a.meta && Object.keys(a.meta).length > 0 && Object.assign(n, a.meta), a.tags && a.tags.length > 0 && (n.tags = a.tags);
   const d = !t.token;
-  return Le(t.companionUrl, t.provider, t.token, t.requestPath, {
+  return Ae(t.companionUrl, t.provider, t.token, t.requestPath, {
     fileId: t.fileId,
     endpoint: s,
     headers: e.authHeaders,
     size: t.size,
     metadata: Object.keys(n).length > 0 ? n : void 0
-  }, d).then((c) => {
+  }, d).then((p) => {
     if (i) return;
-    const h = `${Ae(t.companionUrl)}/api/${c.token}`;
+    const u = `${Ie(t.companionUrl)}/api/${p.token}`;
     try {
-      r = new WebSocket(h);
+      r = new WebSocket(u);
     } catch {
       e.onError(new Error("Failed to connect to upload progress channel"));
       return;
@@ -309,20 +309,20 @@ function Ie(a, e) {
           const w = JSON.parse(x.data);
           switch (w.action) {
             case "progress": {
-              const y = w.payload, k = y.bytesUploaded ?? 0, D = y.bytesTotal ?? (t.size || 1);
-              e.onProgress(k, D);
+              const y = w.payload, C = y.bytesUploaded ?? 0, D = y.bytesTotal ?? (t.size || 1);
+              e.onProgress(C, D);
               break;
             }
             case "success": {
               const y = w.payload;
               if (r == null || r.close(), (f = y.response) != null && f.responseText)
                 try {
-                  const k = JSON.parse(y.response.responseText);
-                  if (k.status === "success") {
-                    e.onComplete(k);
+                  const C = JSON.parse(y.response.responseText);
+                  if (C.status === "success") {
+                    e.onComplete(C);
                     return;
                   }
-                  e.onError(new Error(k.msg || "Upload failed"));
+                  e.onError(new Error(C.msg || "Upload failed"));
                   return;
                 } catch {
                 }
@@ -332,14 +332,14 @@ function Ie(a, e) {
             case "error": {
               r == null || r.close();
               const y = w.payload;
-              let k = ((m = y.error) == null ? void 0 : m.message) || "Upload failed";
+              let C = ((m = y.error) == null ? void 0 : m.message) || "Upload failed";
               if ((_ = y.response) != null && _.responseText)
                 try {
                   const D = JSON.parse(y.response.responseText);
-                  k = D.hint || D.msg || D.message || k;
+                  C = D.hint || D.msg || D.message || C;
                 } catch {
                 }
-              e.onError(new Error(k));
+              e.onError(new Error(C));
               break;
             }
           }
@@ -350,8 +350,8 @@ function Ie(a, e) {
     }, r.onclose = () => {
       r = null;
     };
-  }).catch((c) => {
-    i || e.onError(c instanceof Error ? c : new Error(String(c)));
+  }).catch((p) => {
+    i || e.onError(p instanceof Error ? p : new Error(String(p)));
   }), {
     abort() {
       if (i = !0, r) {
@@ -364,7 +364,7 @@ function Ie(a, e) {
     }
   };
 }
-class He {
+class qe {
   constructor(e, t) {
     this.activeUploads = /* @__PURE__ */ new Map(), this.retryTimers = /* @__PURE__ */ new Map(), this.unsubscribe = null, this.store = e, this.config = t;
   }
@@ -382,7 +382,7 @@ class He {
     const { files: e } = this.store.getState();
     let t = !1;
     for (const i of e.values())
-      i.status === "idle" ? (z(this.store, i.id, { status: "queued" }), t = !0) : i.status === "queued" && (t = !0);
+      i.status === "idle" ? (P(this.store, i.id, { status: "queued" }), t = !0) : i.status === "queued" && (t = !0);
     t && (this.store.setState({ isUploading: !0 }), this.processQueue());
   }
   /**
@@ -390,7 +390,7 @@ class He {
    */
   retryFile(e) {
     const t = this.store.getState().files.get(e);
-    !t || t.status !== "error" && t.status !== "failed" || (z(this.store, e, {
+    !t || t.status !== "error" && t.status !== "failed" || (P(this.store, e, {
       status: "queued",
       error: null,
       progress: 0,
@@ -404,7 +404,7 @@ class He {
   retryAll() {
     const { files: e } = this.store.getState();
     for (const t of e.values())
-      (t.status === "error" || t.status === "failed") && z(this.store, t.id, {
+      (t.status === "error" || t.status === "failed") && P(this.store, t.id, {
         status: "queued",
         error: null,
         progress: 0,
@@ -418,7 +418,7 @@ class He {
    */
   cancelFile(e) {
     const t = this.store.getState().files.get(e);
-    !t || !$e(t.status) || (this.abortUpload(e), z(this.store, e, { status: "cancelled" }));
+    !t || !$e(t.status) || (this.abortUpload(e), P(this.store, e, { status: "cancelled" }));
   }
   /**
    * Cancel all active/queued uploads.
@@ -426,7 +426,7 @@ class He {
   cancelAll() {
     const { files: e } = this.store.getState();
     for (const t of e.values())
-      $e(t.status) && (this.abortUpload(t.id), z(this.store, t.id, { status: "cancelled" }));
+      $e(t.status) && (this.abortUpload(t.id), P(this.store, t.id, { status: "cancelled" }));
     this.store.setState({ isUploading: !1 });
   }
   /**
@@ -457,7 +457,7 @@ class He {
       this.startUpload(n);
   }
   startUpload(e) {
-    z(this.store, e.id, { status: "uploading", error: null });
+    P(this.store, e.id, { status: "uploading", error: null });
     let t = 0, i = Date.now(), r = 0;
     const o = {
       apiBase: this.config.apiBase,
@@ -465,21 +465,21 @@ class He {
       folder: this.store.getState().targetFolder,
       onComplete: (d) => this.handleComplete(e.id, d),
       onError: (d) => this.handleError(e.id, d)
-    }, s = (d, c) => {
-      const u = Date.now(), h = (u - i) / 1e3;
-      if (h > 0) {
-        const f = (d - t) / h;
+    }, s = (d, p) => {
+      const h = Date.now(), u = (h - i) / 1e3;
+      if (u > 0) {
+        const f = (d - t) / u;
         r = r === 0 ? f : 0.3 * f + 0.7 * r;
       }
-      t = d, i = u;
-      const x = c > 0 ? Math.min(d / c * 100, 100) : 0;
-      z(this.store, e.id, { progress: x, bytesUploaded: d, speed: r }), this.updateTotalProgress();
+      t = d, i = h;
+      const x = p > 0 ? Math.min(d / p * 100, 100) : 0;
+      P(this.store, e.id, { progress: x, bytesUploaded: d, speed: r }), this.updateTotalProgress();
     };
     let n;
-    e.remoteInfo ? n = Ie(e, { ...o, onProgress: s }) : e.remoteUrl ? n = Be(e, o) : n = Te(e, { ...o, onProgress: s }), this.activeUploads.set(e.id, n);
+    e.remoteInfo ? n = He(e, { ...o, onProgress: s }) : e.remoteUrl ? n = Be(e, o) : n = Te(e, { ...o, onProgress: s }), this.activeUploads.set(e.id, n);
   }
   handleComplete(e, t) {
-    this.activeUploads.delete(e), z(this.store, e, {
+    this.activeUploads.delete(e), P(this.store, e, {
       status: "complete",
       progress: 100,
       response: t
@@ -495,17 +495,17 @@ class He {
         r.baseDelay * Math.pow(r.backoffFactor, i.retryCount),
         r.maxDelay
       );
-      z(this.store, e, {
+      P(this.store, e, {
         status: "retrying",
         error: t.message,
         retryCount: o
       });
       const n = setTimeout(() => {
-        this.retryTimers.delete(e), z(this.store, e, { status: "queued" }), this.processQueue();
+        this.retryTimers.delete(e), P(this.store, e, { status: "queued" }), this.processQueue();
       }, s);
       this.retryTimers.set(e, n);
     } else
-      z(this.store, e, {
+      P(this.store, e, {
         status: "failed",
         error: t.message
       }), this.checkAllComplete(), this.processQueue();
@@ -538,11 +538,11 @@ class He {
 function $e(a) {
   return a === "queued" || a === "uploading" || a === "retrying";
 }
-function de(a) {
+function pe(a) {
   return `https://api.filerobot.com/${a}`;
 }
 async function Ye(a, e) {
-  const t = `${de(a)}/key/${encodeURIComponent(e)}`, i = new AbortController(), r = setTimeout(() => i.abort(), 3e4);
+  const t = `${pe(a)}/key/${encodeURIComponent(e)}`, i = new AbortController(), r = setTimeout(() => i.abort(), 3e4);
   try {
     const o = await fetch(t, { signal: i.signal });
     if (clearTimeout(r), !o.ok)
@@ -555,7 +555,7 @@ async function Ye(a, e) {
     throw clearTimeout(r), o instanceof DOMException && o.name === "AbortError" ? new Error("SASS key exchange timed out") : o;
   }
 }
-function oe(a, e) {
+function se(a, e) {
   const t = {};
   switch (a.mode) {
     case "security-template":
@@ -571,13 +571,13 @@ function oe(a, e) {
   }
   return a.airboxPuid && (t["X-Filerobot-Airbox-Puid"] = a.airboxPuid), t;
 }
-async function qe(a) {
-  const e = de(a.container);
+async function Ve(a) {
+  const e = pe(a.container);
   if (a.mode === "security-template") {
     const t = await Ye(a.container, a.securityTemplateId);
-    return { apiBase: e, headers: oe(a, t), sassKey: t };
+    return { apiBase: e, headers: se(a, t), sassKey: t };
   }
-  return { apiBase: e, headers: oe(a) };
+  return { apiBase: e, headers: se(a) };
 }
 const v = {
   FILE_ADDED: "sfx-file-added",
@@ -598,32 +598,32 @@ const v = {
   FILE_PREVIEW: "sfx-file-preview",
   FILL_METADATA: "sfx-fill-metadata"
 };
-let Ve = 0;
-function H() {
-  return `file-${Date.now()}-${++Ve}`;
+let Ne = 0;
+function q() {
+  return `file-${Date.now()}-${++Ne}`;
 }
 function Y(a) {
   if (a <= 0) return "0 B";
   const e = ["B", "KB", "MB", "GB"], t = Math.min(Math.floor(Math.log(a) / Math.log(1024)), e.length - 1), i = a / Math.pow(1024, t);
   return `${t === 0 ? i : i.toFixed(1)} ${e[t]}`;
 }
-function ie(a) {
+function oe(a) {
   if (!isFinite(a) || a <= 0) return "0s";
   const e = Math.round(a);
   if (e < 60) return `${e}s`;
   const t = Math.floor(e / 60), i = e % 60;
   return i > 0 ? `${t}m ${i}s` : `${t}m`;
 }
-function N(a) {
+function X(a) {
   var t;
   const e = ((t = a.name.split(".").pop()) == null ? void 0 : t.toLowerCase()) ?? "";
   return a.type.startsWith("image/") ? "image" : a.type.startsWith("video/") || ["mp4", "mov", "avi", "webm", "mkv"].includes(e) ? "vid" : a.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 Ne(a) {
+function Xe(a) {
   const e = a.lastIndexOf(".");
   return e >= 0 ? a.slice(e + 1).toUpperCase() : "";
 }
-const Xe = {
+const We = {
   jpg: "image/jpeg",
   jpeg: "image/jpeg",
   png: "image/png",
@@ -641,12 +641,12 @@ const Xe = {
   doc: "application/msword",
   docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
 };
-function We(a) {
+function Ke(a) {
   var t;
   const e = ((t = a.split(".").pop()) == null ? void 0 : t.toLowerCase()) ?? "";
-  return Xe[e] || "";
+  return We[e] || "";
 }
-function Ke(a) {
+function Ge(a) {
   return new Promise((e) => {
     const t = document.createElement("video");
     t.preload = "metadata", t.muted = !0, t.playsInline = !0;
@@ -674,7 +674,7 @@ function Ke(a) {
     }, { once: !0 });
   });
 }
-function se(a, e, t) {
+function ae(a, e, t) {
   var i, r;
   if (e.maxFileSize != null && a.size > 0 && a.size > e.maxFileSize)
     return `File exceeds ${(e.maxFileSize / 1048576).toFixed(1)} MB limit`;
@@ -703,7 +703,7 @@ function se(a, e, t) {
   return null;
 }
 function Ze(a, e, t) {
-  return se(a, e, t);
+  return ae(a, e, t);
 }
 function Se(a) {
   return a.allowedFileTypes ? a.allowedFileTypes.join(",") : "";
@@ -762,19 +762,19 @@ const Ee = {
 function Je(a) {
   return a.filter((e) => e in Ee).map((e) => Ee[e]);
 }
-var Ge = Object.defineProperty, Qe = (a, e, t, i) => {
+var Qe = Object.defineProperty, et = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
-  return r && Ge(e, t, r), r;
+  return r && Qe(e, t, r), r;
 };
-const et = '<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"/>', tt = '<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"/>', rt = '<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"/>', it = '<rect x="2" y="3" width="20" height="14" rx="2"/><circle cx="12" cy="10" r="1"/><path d="M7 21l5-5 5 5"/>', X = [
-  { id: "device", label: "My Device", icon: et, iconColor: "#2563eb" },
-  { id: "url", label: "URL link", icon: tt, iconColor: "#16a34a" },
-  { id: "camera", label: "Camera", icon: rt, iconColor: "#7c3aed" },
-  { id: "screen-cast", label: "Screen capture", icon: it, iconColor: "#ea580c" }
-], fe = class fe extends P {
+const tt = '<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"/>', rt = '<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"/>', it = '<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"/>', ot = '<rect x="2" y="3" width="20" height="14" rx="2"/><circle cx="12" cy="10" r="1"/><path d="M7 21l5-5 5 5"/>', W = [
+  { id: "device", label: "My Device", icon: tt, iconColor: "#2563eb" },
+  { id: "url", label: "URL link", icon: rt, iconColor: "#16a34a" },
+  { id: "camera", label: "Camera", icon: it, iconColor: "#7c3aed" },
+  { id: "screen-cast", label: "Screen capture", icon: ot, iconColor: "#ea580c" }
+], he = class he extends U {
   constructor() {
-    super(...arguments), this.sources = X;
+    super(...arguments), this.sources = W;
   }
   _handleClick(e) {
     this.dispatchEvent(
@@ -790,7 +790,7 @@ const et = '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21
       ${this.sources.map(
       (e) => l`
           <button @click=${() => this._handleClick(e)}>
-            ${e.brandHtml ? T(e.brandHtml) : M`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
+            ${e.brandHtml ? M(e.brandHtml) : R`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${O(e.icon)}</svg>`}
             ${e.label}
           </button>
         `
@@ -798,7 +798,7 @@ const et = '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21
     `;
   }
 };
-fe.styles = S`
+he.styles = S`
     :host {
       display: flex;
       flex-wrap: wrap;
@@ -871,18 +871,27 @@ fe.styles = S`
       stroke-width: 0;
     }
   `;
-let ae = fe;
-Qe([
+let ne = he;
+et([
   b({ type: Array })
-], ae.prototype, "sources");
-var ot = Object.defineProperty, j = (a, e, t, i) => {
+], ne.prototype, "sources");
+function Fe(a) {
+  let e = a;
+  for (; e; ) {
+    if (e instanceof HTMLDialogElement && e.open)
+      return e;
+    e instanceof ShadowRoot ? e = e.host : e = e.parentNode;
+  }
+  return document.body;
+}
+var st = Object.defineProperty, j = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
-  return r && ot(e, t, r), r;
+  return r && st(e, t, r), r;
 };
-const Ue = 3, ue = class ue extends P {
+const ze = 3, ue = class ue extends U {
   constructor() {
-    super(...arguments), this.compact = !1, this.externalDragOver = !1, this.accept = "", this.sources = [], this.sourcesLayout = "pills", this._dragOver = !1, this._moreOpen = !1, this._visiblePills = Ue, this._dragCounter = 0, this._onDragEnter = (e) => {
+    super(...arguments), this.compact = !1, this.externalDragOver = !1, this.accept = "", this.sources = [], this.sourcesLayout = "pills", this._dragOver = !1, this._moreOpen = !1, this._visiblePills = ze, this._dragCounter = 0, this._onDragEnter = (e) => {
       e.preventDefault(), this._dragCounter++, this._dragCounter === 1 && (this._dragOver = !0);
     }, this._onDragOver = (e) => {
       e.preventDefault();
@@ -917,10 +926,11 @@ const Ue = 3, ue = class ue extends P {
           s && i.push(s);
         }
       i.length > 0 && (e.preventDefault(), this._emitFiles(i));
-    }, this._onDocClick = () => {
-      this._moreOpen && (this._moreOpen = !1);
+    }, this._portalContainer = null, this._onDocClick = (e) => {
+      var t;
+      this._moreOpen && ((t = this._portalContainer) != null && t.contains(e.target) || (this._moreOpen = !1, this._updateDropdownPortal()));
     }, this._onDocKeyDown = (e) => {
-      e.key === "Escape" && this._moreOpen && (this._moreOpen = !1);
+      e.key === "Escape" && this._moreOpen && (this._moreOpen = !1, this._updateDropdownPortal());
     }, this._resizeTimer = null, this._onScrollOrResize = () => {
       this._moreOpen && this._positionDropdown(), this._resizeTimer && clearTimeout(this._resizeTimer), this._resizeTimer = setTimeout(() => this._updateVisiblePills(), 100);
     };
@@ -949,24 +959,60 @@ const Ue = 3, ue = class ue extends P {
     );
   }
   _toggleMore(e) {
-    e.stopPropagation(), this._moreOpen = !this._moreOpen, this._moreOpen && requestAnimationFrame(() => this._positionDropdown());
+    e.stopPropagation(), this._moreOpen = !this._moreOpen, this._updateDropdownPortal();
+  }
+  _updateDropdownPortal() {
+    if (this._moreOpen) {
+      const e = this.sources.slice(this._visiblePills);
+      this._portalContainer || (this._portalContainer = document.createElement("div"), this._portalContainer.setAttribute("data-sfx-more-dropdown", ""), this._injectDropdownStyles(), Fe(this).appendChild(this._portalContainer)), T(
+        l`<div class="sfx-more-dropdown open">
+          ${e.map(
+          (t) => l`
+              <button class="sfx-more-item" @click=${(i) => this._onMoreItemClick(t, i)}>
+                <div class="sfx-more-item-ico">
+                  ${t.brandHtml ? M(t.brandHtml) : t.iconColor ? l`<svg viewBox="0 0 24 24" style="color:${t.iconColor}">${O(t.icon)}</svg>` : R`<svg viewBox="0 0 24 24">${O(t.icon)}</svg>`}
+                </div>
+                ${t.label}
+              </button>
+            `
+        )}
+        </div>`,
+        this._portalContainer
+      ), requestAnimationFrame(() => this._positionDropdown());
+    } else this._portalContainer && (T(c, this._portalContainer), this._portalContainer.remove(), this._portalContainer = null);
+  }
+  _injectDropdownStyles() {
+    if (document.querySelector("style[data-sfx-more-dropdown-styles]")) return;
+    const e = document.createElement("style");
+    e.setAttribute("data-sfx-more-dropdown-styles", ""), e.textContent = `
+      [data-sfx-more-dropdown] .sfx-more-dropdown { position:fixed; background:#fff; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,0.14),0 2px 8px rgba(0,0,0,0.06); border:1px solid #e8edf5; padding:6px; min-width:210px; max-height:340px; overflow-y:auto; z-index:99999; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease,visibility .18s ease,transform .18s ease; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
+      [data-sfx-more-dropdown] .sfx-more-dropdown.open { opacity:1; visibility:visible; pointer-events:all; }
+      [data-sfx-more-dropdown] .sfx-more-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:6px; border:none; background:none; width:100%; font-size:13px; font-weight:500; color:#1e293b; cursor:pointer; transition:background .15s; font-family:inherit; white-space:nowrap; }
+      [data-sfx-more-dropdown] .sfx-more-item:hover { background:#f5f7fa; }
+      [data-sfx-more-dropdown] .sfx-more-item-ico { width:32px; height:32px; border-radius:8px; background:#f8fafc; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+      [data-sfx-more-dropdown] .sfx-more-item-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
+      [data-sfx-more-dropdown] .sfx-more-item .brand-ico { width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+      [data-sfx-more-dropdown] .sfx-more-item .brand-ico svg { fill:white; stroke:none; stroke-width:0; }
+      [data-sfx-more-dropdown] .sfx-more-item .canva-ico { width:22px; height:22px; }
+      [data-sfx-more-dropdown] .sfx-more-item .canva-ico svg { width:22px; height:22px; }
+    `, document.head.appendChild(e);
   }
   /** Position the fixed dropdown, choosing above or below based on available space. */
   _positionDropdown() {
-    var h, x;
-    const e = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".more-wrap > button"), t = (x = this.shadowRoot) == null ? void 0 : x.querySelector(".more-dropdown");
+    var u, x;
+    const e = (u = this.shadowRoot) == null ? void 0 : u.querySelector(".more-wrap > button"), t = (x = this._portalContainer) == null ? void 0 : x.querySelector(".sfx-more-dropdown");
     if (!e || !t) return;
     const i = e.getBoundingClientRect(), r = 8, o = t.scrollHeight, s = t.offsetWidth, n = i.top, d = window.innerHeight - i.bottom;
-    n >= o + r || n > d ? (t.classList.add("above"), t.classList.remove("below"), t.style.top = `${i.top - o - r}px`) : (t.classList.add("below"), t.classList.remove("above"), t.style.top = `${i.bottom + r}px`);
-    let u = i.right - s;
-    u = Math.max(8, Math.min(u, window.innerWidth - s - 8)), t.style.left = `${u}px`;
+    n >= o + r || n > d ? t.style.top = `${i.top - o - r}px` : t.style.top = `${i.bottom + r}px`;
+    let h = i.right - s;
+    h = Math.max(8, Math.min(h, window.innerWidth - s - 8)), t.style.left = `${h}px`;
   }
   _onMoreItemClick(e, t) {
     t.stopPropagation(), this._moreOpen = !1, this._onSourceIconClick(e);
   }
   _updateVisiblePills() {
     const e = window.innerWidth;
-    this.sourcesLayout === "cards" ? e <= 480 ? this._visiblePills = 2 : e <= 768 ? this._visiblePills = 3 : this._visiblePills = 5 : e <= 480 ? this._visiblePills = 1 : e <= 768 ? this._visiblePills = 2 : this._visiblePills = Ue;
+    this.sourcesLayout === "cards" ? e <= 480 ? this._visiblePills = 2 : e <= 768 ? this._visiblePills = 3 : this._visiblePills = 5 : e <= 480 ? this._visiblePills = 1 : e <= 768 ? this._visiblePills = 2 : this._visiblePills = ze;
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("paste", this._onPaste), document.addEventListener("click", this._onDocClick), document.addEventListener("keydown", this._onDocKeyDown), window.addEventListener("scroll", this._onScrollOrResize, !0), window.addEventListener("resize", this._onScrollOrResize), this._updateVisiblePills();
@@ -975,7 +1021,7 @@ const Ue = 3, ue = class ue extends P {
     e.has("sourcesLayout") && this._updateVisiblePills();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("paste", this._onPaste), document.removeEventListener("click", this._onDocClick), document.removeEventListener("keydown", this._onDocKeyDown), window.removeEventListener("scroll", this._onScrollOrResize, !0), window.removeEventListener("resize", this._onScrollOrResize), this._resizeTimer && clearTimeout(this._resizeTimer);
+    super.disconnectedCallback(), document.removeEventListener("paste", this._onPaste), document.removeEventListener("click", this._onDocClick), document.removeEventListener("keydown", this._onDocKeyDown), window.removeEventListener("scroll", this._onScrollOrResize, !0), window.removeEventListener("resize", this._onScrollOrResize), this._resizeTimer && clearTimeout(this._resizeTimer), this._portalContainer && (T(c, this._portalContainer), this._portalContainer.remove(), this._portalContainer = null);
   }
   _renderPill(e) {
     return l`
@@ -985,8 +1031,8 @@ const Ue = 3, ue = class ue extends P {
       t.stopPropagation(), this._onSourceIconClick(e);
     }}
       >
-        ${e.brandHtml ? T(e.brandHtml) : l`<span class="pill-ico" style=${e.iconColor ? `color:${e.iconColor}` : ""}>
-              ${M`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
+        ${e.brandHtml ? M(e.brandHtml) : l`<span class="pill-ico" style=${e.iconColor ? `color:${e.iconColor}` : ""}>
+              ${R`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${O(e.icon)}</svg>`}
             </span>`}
         ${e.label}
       </button>
@@ -1001,17 +1047,17 @@ const Ue = 3, ue = class ue extends P {
       t.stopPropagation(), this._onSourceIconClick(e);
     }}
       >
-        ${e.brandHtml ? l`<span class="card-ico">${T(e.brandHtml)}</span>` : l`<span class="card-ico" style=${e.iconColor ? `color:${e.iconColor}` : ""}>
-              ${M`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
+        ${e.brandHtml ? l`<span class="card-ico">${M(e.brandHtml)}</span>` : l`<span class="card-ico" style=${e.iconColor ? `color:${e.iconColor}` : ""}>
+              ${R`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${O(e.icon)}</svg>`}
             </span>`}
         <span class="card-label">${e.label}</span>
       </button>
     `;
   }
-  _renderMoreCard(e) {
+  _renderMoreCard() {
     return l`
       <div class="more-wrap ${this._moreOpen ? "open" : ""}">
-        <button class="src-card" @click=${(t) => this._toggleMore(t)}>
+        <button class="src-card" @click=${(e) => this._toggleMore(e)}>
           <span class="card-ico" style="color: var(--sfx-up-text-muted, #94a3b8)">
             <svg viewBox="0 0 24 24" style="fill: currentColor; stroke: none">
               <circle cx="5" cy="12" r="2.5"/>
@@ -1021,40 +1067,16 @@ const Ue = 3, ue = class ue extends P {
           </span>
           <span class="card-label">More</span>
         </button>
-        <div class="more-dropdown">
-          ${e.map(
-      (t) => l`
-              <button class="more-item" @click=${(i) => this._onMoreItemClick(t, i)}>
-                <div class="more-item-ico">
-                  ${t.brandHtml ? T(t.brandHtml) : t.iconColor ? l`<svg viewBox="0 0 24 24" style="color:${t.iconColor}">${F(t.icon)}</svg>` : M`<svg viewBox="0 0 24 24">${F(t.icon)}</svg>`}
-                </div>
-                ${t.label}
-              </button>
-            `
-    )}
-        </div>
       </div>
     `;
   }
-  _renderMoreDropdown(e) {
+  _renderMoreDropdown() {
     return l`
       <div class="more-wrap ${this._moreOpen ? "open" : ""}">
-        <button class="more-pill" @click=${(t) => this._toggleMore(t)}>
+        <button class="more-pill" @click=${(e) => this._toggleMore(e)}>
           More
           <svg class="more-chevron" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
         </button>
-        <div class="more-dropdown">
-          ${e.map(
-      (t) => l`
-              <button class="more-item" @click=${(i) => this._onMoreItemClick(t, i)}>
-                <div class="more-item-ico">
-                  ${t.brandHtml ? T(t.brandHtml) : t.iconColor ? l`<svg viewBox="0 0 24 24" style="color:${t.iconColor}">${F(t.icon)}</svg>` : M`<svg viewBox="0 0 24 24">${F(t.icon)}</svg>`}
-                </div>
-                ${t.label}
-              </button>
-            `
-    )}
-        </div>
       </div>
     `;
   }
@@ -1093,22 +1115,22 @@ const Ue = 3, ue = class ue extends P {
         <div class="title">
           Drag & Drop or click to <span>browse</span>
         </div>
-        ${this.compact ? p : l`<div class="subtitle">Drop files anywhere on this page</div>`}
+        ${this.compact ? c : l`<div class="subtitle">Drop files anywhere on this page</div>`}
 
         ${!this.compact && this.sources.length > 0 ? l`
               <div class="import-divider"><span>or import from</span></div>
               ${this.sourcesLayout === "cards" ? l`
                     <div class="sources-cards">
                       ${t.map((r) => this._renderCard(r))}
-                      ${i.length > 0 ? this._renderMoreCard(i) : p}
+                      ${i.length > 0 ? this._renderMoreCard() : c}
                     </div>
                   ` : l`
                     <div class="sources-grid">
                       ${t.map((r) => this._renderPill(r))}
-                      ${i.length > 0 ? this._renderMoreDropdown(i) : p}
+                      ${i.length > 0 ? this._renderMoreDropdown() : c}
                     </div>
                   `}
-            ` : p}
+            ` : c}
 
         ${this.compact && this.sources.length > 0 ? l`
               <div class="sources-row">
@@ -1123,18 +1145,18 @@ const Ue = 3, ue = class ue extends P {
         o.stopPropagation(), this._onSourceIconClick(r);
       }}
                     >
-                      ${r.brandHtml ? T(r.brandHtml) : M`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
+                      ${r.brandHtml ? M(r.brandHtml) : R`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${O(r.icon)}</svg>`}
                     </button>
                   `
     )}
               </div>
-            ` : p}
+            ` : c}
 
         <div class="ripple"></div>
         <input
           type="file"
           multiple
-          accept=${this.accept || p}
+          accept=${this.accept || c}
           @change=${this._onFileChange}
         />
       </div>
@@ -1924,38 +1946,38 @@ ue.styles = S`
       }
     }
   `;
-let U = ue;
+let z = ue;
 j([
   b({ type: Boolean, reflect: !0 })
-], U.prototype, "compact");
+], z.prototype, "compact");
 j([
   b({ type: Boolean, attribute: "external-drag-over" })
-], U.prototype, "externalDragOver");
+], z.prototype, "externalDragOver");
 j([
   b({ type: String })
-], U.prototype, "accept");
+], z.prototype, "accept");
 j([
   b({ type: Array })
-], U.prototype, "sources");
+], z.prototype, "sources");
 j([
   b({ type: String, attribute: "sources-layout" })
-], U.prototype, "sourcesLayout");
+], z.prototype, "sourcesLayout");
 j([
   g()
-], U.prototype, "_dragOver");
+], z.prototype, "_dragOver");
 j([
   g()
-], U.prototype, "_moreOpen");
+], z.prototype, "_moreOpen");
 j([
   g()
-], U.prototype, "_visiblePills");
+], z.prototype, "_visiblePills");
 j([
-  Fe(".ripple")
-], U.prototype, "_rippleEl");
+  je(".ripple")
+], z.prototype, "_rippleEl");
 j([
-  Fe('input[type="file"]')
-], U.prototype, "fileInput");
-const he = class he extends P {
+  je('input[type="file"]')
+], z.prototype, "fileInput");
+const xe = class xe extends U {
   render() {
     return l`
       <div class="line"></div>
@@ -1964,7 +1986,7 @@ const he = class he extends P {
     `;
   }
 };
-he.styles = S`
+xe.styles = S`
     :host {
       display: flex;
       align-items: center;
@@ -1987,17 +2009,23 @@ he.styles = S`
       white-space: nowrap;
     }
   `;
-let ze = he;
-var st = Object.defineProperty, Z = (a, e, t, i) => {
+let Pe = xe;
+var at = Object.defineProperty, Z = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
-  return r && st(e, t, r), r;
+  return r && at(e, t, r), r;
 };
-const xe = class xe extends P {
+const ge = class ge extends U {
   constructor() {
-    super(...arguments), this.files = [], this.showDropTile = !1, this.sources = [], this.accept = "", this._moreOpen = !1, this._outsideClickHandler = (e) => {
-      const t = e.composedPath(), i = this.renderRoot.querySelector(".drop-tile-more-wrap");
-      i && !t.includes(i) && (this._moreOpen = !1, document.removeEventListener("click", this._outsideClickHandler, !0));
+    super(...arguments), this.files = [], this.showDropTile = !1, this.sources = [], this.accept = "", this._moreOpen = !1, this._portalContainer = null, this._outsideClickHandler = (e) => {
+      var r;
+      if ((r = this._portalContainer) != null && r.contains(e.target)) return;
+      const t = this.renderRoot.querySelector(".drop-tile-more-wrap"), i = e.composedPath();
+      t && i.includes(t) || (this._moreOpen = !1, this._closePortal(), document.removeEventListener("click", this._outsideClickHandler, !0));
+    }, this._onScrollOrResize = () => {
+      this._moreOpen && this._positionPortal();
+    }, this._onKeyDown = (e) => {
+      e.key === "Escape" && this._moreOpen && (this._moreOpen = !1, this._closePortal(), this._removeGlobalListeners());
     };
   }
   _onDropTileClick() {
@@ -2016,14 +2044,68 @@ const xe = class xe extends P {
     }
     this.dispatchEvent(new CustomEvent("source-click", { detail: { source: t }, bubbles: !0, composed: !0 }));
   }
+  _addGlobalListeners() {
+    requestAnimationFrame(() => document.addEventListener("click", this._outsideClickHandler, !0)), document.addEventListener("keydown", this._onKeyDown), window.addEventListener("scroll", this._onScrollOrResize, !0), window.addEventListener("resize", this._onScrollOrResize);
+  }
+  _removeGlobalListeners() {
+    document.removeEventListener("click", this._outsideClickHandler, !0), document.removeEventListener("keydown", this._onKeyDown), window.removeEventListener("scroll", this._onScrollOrResize, !0), window.removeEventListener("resize", this._onScrollOrResize);
+  }
   _toggleMore(e) {
-    e.stopPropagation(), this._moreOpen = !this._moreOpen, this._moreOpen ? requestAnimationFrame(() => document.addEventListener("click", this._outsideClickHandler, !0)) : document.removeEventListener("click", this._outsideClickHandler, !0);
+    e.stopPropagation(), this._moreOpen = !this._moreOpen, this._moreOpen ? (this._openPortal(), this._addGlobalListeners()) : (this._closePortal(), this._removeGlobalListeners());
+  }
+  _openPortal() {
+    const e = this.sources.slice(3);
+    this._portalContainer || (this._portalContainer = document.createElement("div"), this._portalContainer.setAttribute("data-sfx-tile-dropdown", ""), this._injectTileDropdownStyles(), Fe(this).appendChild(this._portalContainer)), T(
+      l`<div class="sfx-tile-dropdown">
+        ${e.map((t) => l`
+          <button
+            class="sfx-tile-dropdown-item"
+            @click=${(i) => this._onMoreSourceClick(i, t)}
+          >
+            <span class="sfx-tile-dropdown-ico" style=${t.iconColor && !t.brandHtml ? `color:${t.iconColor}` : ""}>
+              ${t.brandHtml ? M(t.brandHtml) : R`<svg viewBox="0 0 24 24" class=${t.fillIcon ? "fill-icon" : ""}>${O(t.icon)}</svg>`}
+            </span>
+            ${t.label}
+          </button>
+        `)}
+      </div>`,
+      this._portalContainer
+    ), requestAnimationFrame(() => this._positionPortal());
+  }
+  _positionPortal() {
+    var u;
+    const e = this.renderRoot.querySelector(".drop-tile-more"), t = (u = this._portalContainer) == null ? void 0 : u.querySelector(".sfx-tile-dropdown");
+    if (!e || !t) return;
+    const i = e.getBoundingClientRect(), r = 6, o = t.scrollHeight, s = t.offsetWidth, n = i.top, d = window.innerHeight - i.bottom;
+    n >= o + r || n > d ? t.style.top = `${i.top - o - r}px` : t.style.top = `${i.bottom + r}px`;
+    let h = i.right - s;
+    h = Math.max(8, Math.min(h, window.innerWidth - s - 8)), t.style.left = `${h}px`;
+  }
+  _closePortal() {
+    this._portalContainer && (T(c, this._portalContainer), this._portalContainer.remove(), this._portalContainer = null);
+  }
+  _injectTileDropdownStyles() {
+    if (document.querySelector("style[data-sfx-tile-dropdown-styles]")) return;
+    const e = document.createElement("style");
+    e.setAttribute("data-sfx-tile-dropdown-styles", ""), e.textContent = `
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown { position:fixed; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.12); padding:6px; z-index:99999; min-width:180px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; animation:sfxTileDropIn .15s ease; }
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown-item { display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px; border:none; background:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; color:#1e293b; white-space:nowrap; transition:background .15s; font-family:inherit; }
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown-item:hover { background:#f5f7fa; }
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown-ico { width:32px; height:32px; border-radius:8px; background:#f8fafc; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown-ico svg.fill-icon { fill:currentColor; stroke:none; }
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown-ico .brand-ico { width:20px; height:20px; border-radius:5px; display:flex; align-items:center; justify-content:center; }
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown-ico .brand-ico svg { fill:white; stroke:none; stroke-width:0; }
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown-ico .canva-ico { width:22px; height:22px; }
+      [data-sfx-tile-dropdown] .sfx-tile-dropdown-ico .canva-ico svg { width:22px; height:22px; }
+      @keyframes sfxTileDropIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
+    `, document.head.appendChild(e);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._moreOpen = !1, document.removeEventListener("click", this._outsideClickHandler, !0);
+    super.disconnectedCallback(), this._moreOpen = !1, this._closePortal(), this._removeGlobalListeners();
   }
   _onMoreSourceClick(e, t) {
-    this._moreOpen = !1, document.removeEventListener("click", this._outsideClickHandler, !0), this._onSourceClick(e, t);
+    this._moreOpen = !1, this._closePortal(), this._removeGlobalListeners(), this._onSourceClick(e, t);
   }
   _renderDropTile() {
     const t = this.sources.slice(0, 3), i = this.sources.slice(3);
@@ -2050,39 +2132,24 @@ const xe = class xe extends P {
                 title=${r.label}
                 @click=${(o) => this._onSourceClick(o, r)}
               >
-                ${r.brandHtml ? T(r.brandHtml) : M`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
+                ${r.brandHtml ? M(r.brandHtml) : R`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${O(r.icon)}</svg>`}
               </button>
             `)}
             ${i.length > 0 ? l`
               <div class="drop-tile-more-wrap">
                 <button class="drop-tile-more" title="More sources" @click=${(r) => this._toggleMore(r)}>···</button>
-                ${this._moreOpen ? l`
-                  <div class="more-dropdown">
-                    ${i.map((r) => l`
-                      <button
-                        class="more-dropdown-item"
-                        @click=${(o) => this._onMoreSourceClick(o, r)}
-                      >
-                        <span class="more-dropdown-ico" style=${r.iconColor && !r.brandHtml ? `color:${r.iconColor}` : ""}>
-                          ${r.brandHtml ? T(r.brandHtml) : M`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
-                        </span>
-                        ${r.label}
-                      </button>
-                    `)}
-                  </div>
-                ` : p}
               </div>
-            ` : p}
+            ` : c}
           </div>
-        ` : p}
-        <input type="file" multiple accept=${this.accept || p} @change=${this._onFileInput} />
+        ` : c}
+        <input type="file" multiple accept=${this.accept || c} @change=${this._onFileInput} />
       </div>
     `;
   }
   render() {
     return l`
       <div class="grid">
-        ${this.showDropTile ? this._renderDropTile() : p}
+        ${this.showDropTile ? this._renderDropTile() : c}
         ${this.files.map(
       (e, t) => l`<sfx-file-item .file=${e} style="--tile-index:${t}"></sfx-file-item>`
     )}
@@ -2090,7 +2157,7 @@ const xe = class xe extends P {
     `;
   }
 };
-xe.styles = S`
+ge.styles = S`
     :host {
       display: block;
       flex: 1;
@@ -2142,10 +2209,10 @@ xe.styles = S`
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      gap: 6px;
       cursor: pointer;
       transition: all 0.18s ease;
-      padding: 16px 12px;
+      padding: 12px 10px;
       position: relative;
       z-index: 1;
       min-height: 0;
@@ -2158,8 +2225,8 @@ xe.styles = S`
     }
 
     .drop-tile-rings {
-      width: clamp(48px, 8vw, 72px);
-      height: clamp(48px, 8vw, 72px);
+      width: clamp(40px, 6vw, 60px);
+      height: clamp(40px, 6vw, 60px);
       position: relative;
       display: flex;
       align-items: center;
@@ -2188,8 +2255,8 @@ xe.styles = S`
     }
 
     .drop-tile-core {
-      width: clamp(28px, 5vw, 40px);
-      height: clamp(28px, 5vw, 40px);
+      width: clamp(24px, 4vw, 34px);
+      height: clamp(24px, 4vw, 34px);
       border-radius: 50%;
       background: var(--sfx-up-primary-bg, #eff6ff);
       color: var(--sfx-up-primary, #2563eb);
@@ -2207,16 +2274,16 @@ xe.styles = S`
     }
 
     .drop-tile-core svg {
-      width: 20px;
-      height: 20px;
+      width: 16px;
+      height: 16px;
     }
 
     .drop-tile-text {
-      font-size: 12px;
+      font-size: 11px;
       font-weight: 500;
       color: var(--sfx-up-text-secondary, #475569);
       text-align: center;
-      line-height: 1.4;
+      line-height: 1.3;
     }
 
     .drop-tile-text span {
@@ -2226,8 +2293,8 @@ xe.styles = S`
 
     .drop-tile-sources {
       display: flex;
-      gap: 4px;
-      margin-top: 4px;
+      gap: 3px;
+      margin-top: 2px;
     }
 
     .drop-tile-src {
@@ -2392,7 +2459,7 @@ xe.styles = S`
       display: none;
     }
   `;
-let B = xe;
+let B = ge;
 Z([
   b({ attribute: !1 })
 ], B.prototype, "files");
@@ -2408,12 +2475,12 @@ Z([
 Z([
   g()
 ], B.prototype, "_moreOpen");
-var at = Object.defineProperty, nt = (a, e, t, i) => {
+var nt = Object.defineProperty, lt = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
-  return r && at(e, t, r), r;
+  return r && nt(e, t, r), r;
 };
-const ge = class ge extends P {
+const ve = class ve extends U {
   _remove() {
     this.dispatchEvent(
       new CustomEvent("file-remove", {
@@ -2443,8 +2510,8 @@ const ge = class ge extends P {
   }
   render() {
     const e = this.file;
-    if (!e) return p;
-    const t = N(e), i = e.status === "complete", r = e.status === "uploading", o = e.status === "error" || e.status === "failed", s = e.status === "rejected", n = Ne(e.name), d = [
+    if (!e) return c;
+    const t = X(e), i = e.status === "complete", r = e.status === "uploading", o = e.status === "error" || e.status === "failed", s = e.status === "rejected", n = Xe(e.name), d = [
       "tile",
       i ? "done" : "",
       r ? "uploading" : "",
@@ -2459,7 +2526,7 @@ const ge = class ge extends P {
                 <div class="type-icon">
                   <div class="type-icon-inner ${t}">
                     ${this._renderTypeIcon(t)}
-                    ${n ? l`<div class="ext-label">${n}</div>` : p}
+                    ${n ? l`<div class="ext-label">${n}</div>` : c}
                   </div>
                 </div>
               `}
@@ -2473,7 +2540,7 @@ const ge = class ge extends P {
                   </svg>
                   Preview
                 </button>
-              ` : p}
+              ` : c}
 
           <!-- Spinner overlay -->
           <div class="spinner-overlay">
@@ -2485,20 +2552,20 @@ const ge = class ge extends P {
                 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round">
                   <polyline points="20 6 9 17 4 12" />
                 </svg>
-              </div>` : p}
+              </div>` : c}
 
           <!-- Progress bar -->
           ${e.status === "uploading" ? l`
                 <div class="progress">
                   <div class="progress-fill" style="transform:scaleX(${Math.min(e.progress, 100) / 100})"></div>
                 </div>
-              ` : p}
+              ` : c}
 
           <!-- Error / rejected badge -->
-          ${(o || s) && e.error ? l`<div class="error-badge" title=${e.error}>${e.error}</div>` : p}
+          ${(o || s) && e.error ? l`<div class="error-badge" title=${e.error}>${e.error}</div>` : c}
 
           <!-- Video duration badge (hidden when error badge is shown to avoid overlap) -->
-          ${!(o || s) && e.duration != null && e.duration > 0 ? l`<div class="duration-badge">${this._formatDuration(e.duration)}</div>` : p}
+          ${!(o || s) && e.duration != null && e.duration > 0 ? l`<div class="duration-badge">${this._formatDuration(e.duration)}</div>` : c}
         </div>
 
         <!-- Action buttons -->
@@ -2510,7 +2577,7 @@ const ge = class ge extends P {
                     <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10" />
                   </svg>
                 </button>
-              ` : p}
+              ` : c}
           <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="1.5" stroke-linecap="round" stroke-linejoin="round">
               <polyline points="3 6 5 6 21 6" />
@@ -2549,7 +2616,7 @@ const ge = class ge extends P {
     }
   }
 };
-ge.styles = S`
+ve.styles = S`
     :host {
       display: block;
     }
@@ -2579,15 +2646,23 @@ ge.styles = S`
       aspect-ratio: 16 / 10;
       overflow: hidden;
       flex-shrink: 0;
-      background: var(--sfx-up-border-light, #f3f4f6);
+      background-color: var(--sfx-up-checker-bg, #fff);
+      background-image:
+        linear-gradient(45deg, var(--sfx-up-checker-tile, #f0f0f0) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--sfx-up-checker-tile, #f0f0f0) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--sfx-up-checker-tile, #f0f0f0) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--sfx-up-checker-tile, #f0f0f0) 75%);
+      background-size: 16px 16px;
+      background-position: 0 0, 0 8px, 8px -8px, -8px 0;
       border-radius: 10px 10px 0 0;
     }
 
     .preview-bg {
       position: absolute;
       inset: 0;
-      background-size: cover;
+      background-size: contain;
       background-position: center;
+      background-repeat: no-repeat;
       transition: transform 0.4s ease;
     }
 
@@ -2923,10 +2998,10 @@ ge.styles = S`
       .spin-ring { animation: none; }
     }
   `;
-let ne = ge;
-nt([
+let le = ve;
+lt([
   b({ attribute: !1 })
-], ne.prototype, "file");
+], le.prototype, "file");
 const J = S`
   .btn,
   .btn-ghost,
@@ -2996,18 +3071,18 @@ const J = S`
     opacity: 0.55;
     cursor: not-allowed;
   }
-`, G = S`
+`, Q = S`
   button:focus-visible {
     outline: 2px solid var(--sfx-up-ring, oklch(0.578 0.198 268.129 / 0.7));
     outline-offset: 2px;
   }
 `;
-var lt = Object.defineProperty, Q = (a, e, t, i) => {
+var dt = Object.defineProperty, ee = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
-  return r && lt(e, t, r), r;
+  return r && dt(e, t, r), r;
 };
-const Pe = 7, ve = class ve extends P {
+const Ue = 7, be = class be extends U {
   constructor() {
     super(...arguments), this.fileCount = 0, this.totalSize = 0, this.thumbnails = [], this.primaryLabel = "Done", this.failedFiles = [];
   }
@@ -3037,7 +3112,7 @@ const Pe = 7, ve = class ve extends P {
     );
   }
   render() {
-    const e = this.thumbnails.slice(0, Pe), t = this.thumbnails.length - Pe, i = this.fileCount > 0, r = this.failedFiles.length > 0, o = r && !i;
+    const e = this.thumbnails.slice(0, Ue), t = this.thumbnails.length - Ue, i = this.fileCount > 0, r = this.failedFiles.length > 0, o = r && !i;
     return l`
       <button class="close-btn" title="Close" @click=${this._close}>
         <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>
@@ -3060,11 +3135,11 @@ const Pe = 7, ve = class ve extends P {
                 ${e.map(
       (s) => l`<img class="thumb" src=${s} alt="" />`
     )}
-                ${t > 0 ? l`<div class="thumb-more">+${t}</div>` : p}
+                ${t > 0 ? l`<div class="thumb-more">+${t}</div>` : c}
               </div>
-            ` : p}
+            ` : c}
 
-        ${i ? l`<div class="summary">${this.fileCount} ${this.fileCount === 1 ? "file" : "files"} · ${Y(this.totalSize)} uploaded</div>` : p}
+        ${i ? l`<div class="summary">${this.fileCount} ${this.fileCount === 1 ? "file" : "files"} · ${Y(this.totalSize)} uploaded</div>` : c}
 
         ${r ? l`
             <div class="failed-list">
@@ -3081,18 +3156,18 @@ const Pe = 7, ve = class ve extends P {
                 </div>
               `)}
             </div>
-          ` : p}
+          ` : c}
 
         <div class="actions">
           <button class="btn-ghost" @click=${this._uploadMore}>Upload more</button>
-          ${r ? l`<button class="btn-retry-all" @click=${this._retryAll}>Retry all (${this.failedFiles.length})</button>` : p}
+          ${r ? l`<button class="btn-retry-all" @click=${this._retryAll}>Retry all (${this.failedFiles.length})</button>` : c}
           <button class="btn-primary" @click=${this._primaryAction}>${this.primaryLabel}</button>
         </div>
       </div>
     `;
   }
 };
-ve.styles = [J, G, S`
+be.styles = [J, Q, S`
     :host {
       display: flex;
       flex: 1;
@@ -3372,28 +3447,28 @@ ve.styles = [J, G, S`
       .icon { animation: none; }
     }
   `];
-let R = ve;
-Q([
+let L = be;
+ee([
   b({ type: Number })
-], R.prototype, "fileCount");
-Q([
+], L.prototype, "fileCount");
+ee([
   b({ type: Number })
-], R.prototype, "totalSize");
-Q([
+], L.prototype, "totalSize");
+ee([
   b({ type: Array })
-], R.prototype, "thumbnails");
-Q([
+], L.prototype, "thumbnails");
+ee([
   b({ type: String })
-], R.prototype, "primaryLabel");
-Q([
+], L.prototype, "primaryLabel");
+ee([
   b({ type: Array })
-], R.prototype, "failedFiles");
-var dt = Object.defineProperty, A = (a, e, t, i) => {
+], L.prototype, "failedFiles");
+var pt = Object.defineProperty, I = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
-  return r && dt(e, t, r), r;
+  return r && pt(e, t, r), r;
 };
-const be = class be extends P {
+const me = class me extends U {
   constructor() {
     super(...arguments), this.uploadState = "idle", this.fileCount = 0, this.totalSize = 0, this.failedCount = 0, this.showFillMetadata = !1, this.completedCount = 0, this.uploadProgress = 0;
   }
@@ -3422,7 +3497,7 @@ const be = class be extends P {
               </div>
               <span class="progress-label">${this.completedCount}/${this.fileCount} files</span>
             </div>
-          ` : p}
+          ` : c}
       <div class="buttons-row">
         <div class="left">
           ${this.showFillMetadata && this.uploadState === "idle" ? l`
@@ -3436,7 +3511,7 @@ const be = class be extends P {
                   </svg>
                   Fill Metadata
                 </button>
-              ` : p}
+              ` : c}
         </div>
         <div class="right">
           <button class="btn-ghost" @click=${this._clear}>
@@ -3464,7 +3539,7 @@ const be = class be extends P {
                   </svg>
                   Retry all (${this.failedCount})
                 </button>
-              ` : p}
+              ` : c}
           ${this._renderUploadButton()}
         </div>
       </div>
@@ -3495,7 +3570,7 @@ const be = class be extends P {
     `;
   }
 };
-be.styles = [J, G, S`
+me.styles = [J, Q, S`
     :host {
       display: flex;
       flex-direction: column;
@@ -3644,28 +3719,28 @@ be.styles = [J, G, S`
       .btn-spin { animation: none; }
     }
   `];
-let O = be;
-A([
+let F = me;
+I([
   b({ type: String })
-], O.prototype, "uploadState");
-A([
+], F.prototype, "uploadState");
+I([
   b({ type: Number })
-], O.prototype, "fileCount");
-A([
+], F.prototype, "fileCount");
+I([
   b({ type: Number })
-], O.prototype, "totalSize");
-A([
+], F.prototype, "totalSize");
+I([
   b({ type: Number })
-], O.prototype, "failedCount");
-A([
+], F.prototype, "failedCount");
+I([
   b({ type: Boolean })
-], O.prototype, "showFillMetadata");
-A([
+], F.prototype, "showFillMetadata");
+I([
   b({ type: Number })
-], O.prototype, "completedCount");
-A([
+], F.prototype, "completedCount");
+I([
   b({ type: Number })
-], O.prototype, "uploadProgress");
+], F.prototype, "uploadProgress");
 const ct = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function ce(a, e) {
   return (t) => {
@@ -3680,12 +3755,12 @@ function ce(a, e) {
     t.shiftKey ? (d === s || !r.contains(d)) && (t.preventDefault(), n.focus()) : (d === n || !r.contains(d)) && (t.preventDefault(), s.focus());
   };
 }
-var pt = Object.defineProperty, pe = (a, e, t, i) => {
+var ft = Object.defineProperty, fe = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
-  return r && pt(e, t, r), r;
+  return r && ft(e, t, r), r;
 };
-const me = class me extends P {
+const we = class we extends U {
   constructor() {
     super(...arguments), this._url = "", this._name = "", this._error = "", this._onBackdropClick = (e) => {
       e.target === e.currentTarget && this._cancel();
@@ -3796,7 +3871,7 @@ const me = class me extends P {
     `;
   }
 };
-me.styles = [J, G, S`
+we.styles = [J, Q, S`
     :host {
       display: block;
     }
@@ -3970,22 +4045,22 @@ me.styles = [J, G, S`
     }
 
   `];
-let W = me;
-pe([
+let K = we;
+fe([
   g()
-], W.prototype, "_url");
-pe([
+], K.prototype, "_url");
+fe([
   g()
-], W.prototype, "_name");
-pe([
+], K.prototype, "_name");
+fe([
   g()
-], W.prototype, "_error");
-var ft = Object.defineProperty, re = (a, e, t, i) => {
+], K.prototype, "_error");
+var ht = Object.defineProperty, ie = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
-  return r && ft(e, t, r), r;
+  return r && ht(e, t, r), r;
 };
-const we = class we extends P {
+const ye = class ye extends U {
   constructor() {
     super(...arguments), this._stream = null, this._error = "", this._captured = null, this._previewUrl = "", this._onBackdropClick = (e) => {
       e.target === e.currentTarget && this._cancel();
@@ -4063,7 +4138,7 @@ const we = class we extends P {
     `;
   }
 };
-we.styles = [J, G, S`
+ye.styles = [J, Q, S`
     :host { display: block; }
 
     .backdrop {
@@ -4144,25 +4219,25 @@ we.styles = [J, G, S`
     @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
     @keyframes slideUp { from { transform: translateY(18px) scale(0.97); } to { transform: translateY(0) scale(1); } }
   `];
-let q = we;
-re([
+let V = ye;
+ie([
   g()
-], q.prototype, "_stream");
-re([
+], V.prototype, "_stream");
+ie([
   g()
-], q.prototype, "_error");
-re([
+], V.prototype, "_error");
+ie([
   g()
-], q.prototype, "_captured");
-re([
+], V.prototype, "_captured");
+ie([
   g()
-], q.prototype, "_previewUrl");
-var ut = Object.defineProperty, ee = (a, e, t, i) => {
+], V.prototype, "_previewUrl");
+var ut = Object.defineProperty, te = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
   return r && ut(e, t, r), r;
 };
-const ye = class ye extends P {
+const _e = class _e extends U {
   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();
@@ -4261,7 +4336,7 @@ const ye = class ye extends P {
     `;
   }
 };
-ye.styles = [J, G, S`
+_e.styles = [J, Q, S`
     :host { display: block; }
 
     .backdrop {
@@ -4360,32 +4435,32 @@ ye.styles = [J, G, S`
     @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 L = ye;
-ee([
+let A = _e;
+te([
   g()
-], L.prototype, "_stream");
-ee([
+], A.prototype, "_stream");
+te([
   g()
-], L.prototype, "_recording");
-ee([
+], A.prototype, "_recording");
+te([
   g()
-], L.prototype, "_error");
-ee([
+], A.prototype, "_error");
+te([
   g()
-], L.prototype, "_recordedBlob");
-ee([
+], A.prototype, "_recordedBlob");
+te([
   g()
-], L.prototype, "_previewUrl");
-var ht = Object.defineProperty, $ = (a, e, t, i) => {
+], A.prototype, "_previewUrl");
+var xt = Object.defineProperty, $ = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
     (s = a[o]) && (r = s(e, t, r) || r);
-  return r && ht(e, t, r), r;
+  return r && xt(e, t, r), r;
 };
 const De = /* @__PURE__ */ new Set(["unsplash"]);
 var E;
-const C = (E = class extends P {
+const k = (E = class extends U {
   constructor() {
-    super(), this.config = null, this._isOpen = !1, this._activeConnector = null, this._showUrlDialog = !1, this._showCameraDialog = !1, this._showScreenCastDialog = !1, this._previewFileId = null, this._previewDims = "—", this._fullscreenPreviewUrl = null, this._fullscreenVideoFile = null, this._fullscreenZoomed = !1, this._fsPanX = 0, this._fsPanY = 0, this._fsDragging = !1, this._fsDragStartX = 0, this._fsDragStartY = 0, this._fsPanStartX = 0, this._fsPanStartY = 0, this._bodyDragOver = !1, this._isMinimized = !1, this._isPillExpanded = !1, this._bodyDragCounter = 0, this._videoBlobUrls = /* @__PURE__ */ new Map(), this._engine = null, this._cachedSources = X, this._cachedSourcesConfig = void 0, this._rejectedTimers = /* @__PURE__ */ new Map(), this._closeOnCompleteTimer = null, this._apiBase = null, this._authHeaders = null, this._authResolveId = 0, this._prevStoreState = null, this._unsubStoreEvents = null, this._portalContainer = null, this._onFilesSelected = (e) => {
+    super(), this.config = null, this._isOpen = !1, this._activeConnector = null, this._showUrlDialog = !1, this._showCameraDialog = !1, this._showScreenCastDialog = !1, this._previewFileId = null, this._previewDims = "—", this._splitPct = 68, this._isResizing = !1, this._splitRafId = 0, this._fullscreenPreviewUrl = null, this._fullscreenVideoFile = null, this._fullscreenZoomed = !1, this._fsPanX = 0, this._fsPanY = 0, this._fsDragging = !1, this._fsDragStartX = 0, this._fsDragStartY = 0, this._fsPanStartX = 0, this._fsPanStartY = 0, this._bodyDragOver = !1, this._isMinimized = !1, this._isPillExpanded = !1, this._bodyDragCounter = 0, this._videoBlobUrls = /* @__PURE__ */ new Map(), this._engine = null, this._cachedSources = W, this._cachedSourcesConfig = void 0, this._rejectedTimers = /* @__PURE__ */ new Map(), this._closeOnCompleteTimer = null, this._apiBase = null, this._authHeaders = null, this._authResolveId = 0, this._prevStoreState = null, this._unsubStoreEvents = null, this._portalContainer = null, this._onFilesSelected = (e) => {
       this._processIncomingFiles(e.detail.files);
     }, this._onDropTileSourceClick = (e) => {
       this._handleSourceActivation(e.detail.source.id);
@@ -4422,22 +4497,22 @@ const C = (E = class extends P {
       if ((((o = (r = this.config) == null ? void 0 : r.connectors) == null ? void 0 : o.providers) ?? []).includes(e)) {
         if (De.has(e)) {
           if (!customElements.get("sfx-search-provider-browser")) {
-            const { SfxSearchProviderBrowser: n } = await import("./search-provider-browser-Dywv08pq.js");
+            const { SfxSearchProviderBrowser: n } = await import("./search-provider-browser-Cn0v6Gcq.js");
             customElements.define("sfx-search-provider-browser", n);
           }
         } else if (!customElements.get("sfx-provider-browser")) {
-          const { SfxProviderBrowser: n } = await import("./provider-browser-ZgbnfTHX.js");
+          const { SfxProviderBrowser: n } = await import("./provider-browser-DcYDZQos.js");
           customElements.define("sfx-provider-browser", n);
         }
         this._activeConnector = e;
       }
     }, this._onUrlSubmit = (e) => {
-      var u, h, x;
+      var h, u, x;
       this._showUrlDialog = !1;
-      const { url: t, name: i } = e.detail, r = (u = this.config) == null ? void 0 : u.callbacks, o = We(i), s = o.startsWith("image/"), n = this._store.getState(), d = se({ name: i, size: 0, type: o }, n.restrictions, n.files);
+      const { url: t, name: i } = e.detail, r = (h = this.config) == null ? void 0 : h.callbacks, o = Ke(i), s = o.startsWith("image/"), n = this._store.getState(), d = ae({ name: i, size: 0, type: o }, n.restrictions, n.files);
       if (d) {
         const f = {
-          id: H(),
+          id: q(),
           status: "rejected",
           file: null,
           remoteUrl: t,
@@ -4457,11 +4532,11 @@ const C = (E = class extends P {
           tags: [],
           remoteInfo: null
         };
-        I(this._store, f), this._dispatchPublic(v.FILE_REJECTED, { file: f, reason: d }), (h = r == null ? void 0 : r.onFileRejected) == null || h.call(r, f, d);
+        H(this._store, f), this._dispatchPublic(v.FILE_REJECTED, { file: f, reason: d }), (u = r == null ? void 0 : r.onFileRejected) == null || u.call(r, f, d);
         return;
       }
-      const c = {
-        id: H(),
+      const p = {
+        id: q(),
         status: "idle",
         file: null,
         remoteUrl: t,
@@ -4481,7 +4556,7 @@ const C = (E = class extends P {
         tags: [],
         remoteInfo: null
       };
-      I(this._store, c), this._dispatchPublic(v.FILE_ADDED, { file: c }), (x = r == null ? void 0 : r.onFileAdded) == null || x.call(r, c), this._store.getState().queueConfig.autoProceed && this.upload();
+      H(this._store, p), this._dispatchPublic(v.FILE_ADDED, { file: p }), (x = r == null ? void 0 : r.onFileAdded) == null || x.call(r, p), this._store.getState().queueConfig.autoProceed && this.upload();
     }, this._onUrlCancel = () => {
       this._showUrlDialog = !1;
     }, this._onCameraCapture = (e) => {
@@ -4549,14 +4624,14 @@ const C = (E = class extends P {
       var i, r, o;
       const t = (i = this.config) == null ? void 0 : i.callbacks;
       for (const s of e.detail.files) {
-        const n = this._store.getState(), d = se(
+        const n = this._store.getState(), d = ae(
           { name: s.name, size: s.size, type: s.mimeType },
           n.restrictions,
           n.files
         );
         if (d) {
-          const u = {
-            id: H(),
+          const h = {
+            id: q(),
             status: "rejected",
             file: null,
             remoteUrl: null,
@@ -4576,11 +4651,11 @@ const C = (E = class extends P {
             tags: [],
             remoteInfo: s
           };
-          I(this._store, u), this._dispatchPublic(v.FILE_REJECTED, { file: u, reason: d }), (r = t == null ? void 0 : t.onFileRejected) == null || r.call(t, u, d);
+          H(this._store, h), this._dispatchPublic(v.FILE_REJECTED, { file: h, reason: d }), (r = t == null ? void 0 : t.onFileRejected) == null || r.call(t, h, d);
           continue;
         }
-        const c = {
-          id: H(),
+        const p = {
+          id: q(),
           status: "idle",
           file: null,
           remoteUrl: null,
@@ -4600,7 +4675,7 @@ const C = (E = class extends P {
           tags: [],
           remoteInfo: s
         };
-        I(this._store, c), this._dispatchPublic(v.FILE_ADDED, { file: c }), (o = t == null ? void 0 : t.onFileAdded) == null || o.call(t, c);
+        H(this._store, p), this._dispatchPublic(v.FILE_ADDED, { file: p }), (o = t == null ? void 0 : t.onFileAdded) == null || o.call(t, p);
       }
       this._activeConnector = null, this._store.getState().queueConfig.autoProceed && this.upload();
     }, this._onConnectorClose = () => {
@@ -4652,7 +4727,28 @@ const C = (E = class extends P {
         }
         this._isOpen && ((t = this.config) == null ? void 0 : t.mode) === "modal" && (((i = this.config) == null ? void 0 : i.headerButton) ?? "close") !== "none" && this._onModalDismiss();
       }
-    }, this._dimCache = /* @__PURE__ */ new Map(), this._onFsToggleZoom = (e) => {
+    }, this._dimCache = /* @__PURE__ */ new Map(), this._onSplitPointerDown = (e) => {
+      var i;
+      e.preventDefault(), this._isResizing = !0;
+      const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".preview-layout");
+      t == null || t.classList.add("resizing"), e.target.setPointerCapture(e.pointerId);
+    }, this._onSplitPointerMove = (e) => {
+      if (!this._isResizing || this._splitRafId) return;
+      const t = e.clientX;
+      this._splitRafId = requestAnimationFrame(() => {
+        var s;
+        this._splitRafId = 0;
+        const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".preview-layout");
+        if (!i) return;
+        const r = i.getBoundingClientRect(), o = (t - r.left) / r.width * 100;
+        this._splitPct = Math.max(25, Math.min(75, o));
+      });
+    }, this._onSplitPointerUp = () => {
+      var t;
+      this._isResizing = !1, this._splitRafId && (cancelAnimationFrame(this._splitRafId), this._splitRafId = 0);
+      const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".preview-layout");
+      e == null || e.classList.remove("resizing");
+    }, this._onFsToggleZoom = (e) => {
       e == null || e.stopPropagation(), this._fullscreenZoomed = !this._fullscreenZoomed, this._fullscreenZoomed || (this._fsPanX = 0, this._fsPanY = 0);
     }, this._onFsOverlayClick = (e) => {
       this._fsDragDidMove || this._onFsToggleZoom(e);
@@ -4676,7 +4772,7 @@ const C = (E = class extends P {
       (Math.abs(i) > 3 || Math.abs(r) > 3) && (this._fsDragDidMove = !0), this._fsPanX = this._fsPanStartX + i, this._fsPanY = this._fsPanStartY + r, this.requestUpdate(), e.preventDefault();
     }, this._onFsClose = (e) => {
       e == null || e.stopPropagation(), this._fullscreenPreviewUrl = null, this._fullscreenVideoFile = null, this._fullscreenZoomed = !1, this._fsPanX = 0, this._fsPanY = 0;
-    }, this._store = Oe(), this._storeCtrl = new Me(this, this._store);
+    }, this._store = Re(), this._storeCtrl = new Me(this, this._store);
   }
   // --- Public API ---
   /** Open the uploader (modal mode). */
@@ -4691,13 +4787,13 @@ const C = (E = class extends P {
   }
   /** Start uploading all queued files. */
   upload() {
-    var r, o, s, n, d, c, u;
+    var r, o, s, n, d, p, h;
     if (this._ensureEngine(), !this._engine) {
       console.warn("[sfx-uploader] Cannot upload: auth not resolved yet");
       return;
     }
     const e = [...this._store.getState().files.values()].filter(
-      (h) => h.status === "idle" || h.status === "queued"
+      (u) => u.status === "idle" || u.status === "queued"
     );
     if ((o = (r = this.config) == null ? void 0 : r.callbacks) != null && o.onBeforeUpload && this.config.callbacks.onBeforeUpload(e) === !1)
       return;
@@ -4707,7 +4803,7 @@ const C = (E = class extends P {
       cancelable: !0,
       detail: { files: e }
     });
-    this.dispatchEvent(t) && (this._dispatchPublic(v.UPLOAD_STARTED, { files: e }), (d = (n = (s = this.config) == null ? void 0 : s.callbacks) == null ? void 0 : n.onUploadStarted) == null || d.call(n, e), this._engine.uploadAll(), (c = this.config) != null && c.minimizeOnUpload && ((u = this.config) == null ? void 0 : u.mode) !== "inline" && (this._isMinimized = !0, this._isPillExpanded = !0, this.requestUpdate()));
+    this.dispatchEvent(t) && (this._dispatchPublic(v.UPLOAD_STARTED, { files: e }), (d = (n = (s = this.config) == null ? void 0 : s.callbacks) == null ? void 0 : n.onUploadStarted) == null || d.call(n, e), this._engine.uploadAll(), (p = this.config) != null && p.minimizeOnUpload && ((h = this.config) == null ? void 0 : h.mode) !== "inline" && (this._isMinimized = !0, this._isPillExpanded = !0, this.requestUpdate()));
   }
   /** Programmatically add files. */
   addFiles(e) {
@@ -4844,7 +4940,7 @@ const C = (E = class extends P {
   }
   _updateFloatingPortal() {
     const e = [...this._storeCtrl.state.files.values()];
-    this._isMinimized && e.length > 0 ? (this._injectFloatStyles(), this._portalContainer || (this._portalContainer = document.createElement("div"), this._portalContainer.setAttribute("data-sfx-upload-float", ""), document.body.appendChild(this._portalContainer)), ke(this._renderFloatingPill(e), this._portalContainer)) : this._portalContainer && (ke(p, this._portalContainer), this._portalContainer.remove(), this._portalContainer = null);
+    this._isMinimized && e.length > 0 ? (this._injectFloatStyles(), this._portalContainer || (this._portalContainer = document.createElement("div"), this._portalContainer.setAttribute("data-sfx-upload-float", ""), document.body.appendChild(this._portalContainer)), T(this._renderFloatingPill(e), this._portalContainer)) : this._portalContainer && (T(c, this._portalContainer), this._portalContainer.remove(), this._portalContainer = null);
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("keydown", this._onKeyDown), this._prevStoreState = this._store.getState(), this._unsubStoreEvents = this._store.subscribe(() => this._onStoreChange());
@@ -4878,7 +4974,7 @@ const C = (E = class extends P {
     var r, o;
     const t = e.auth;
     if (t.mode === "sass-key") {
-      this._apiBase = de(t.container), this._authHeaders = oe(t), this._ensureEngine(), (r = this._engine) == null || r.updateConfig({
+      this._apiBase = pe(t.container), this._authHeaders = se(t), this._ensureEngine(), (r = this._engine) == null || r.updateConfig({
         apiBase: this._apiBase,
         authHeaders: this._authHeaders
       });
@@ -4886,7 +4982,7 @@ const C = (E = class extends P {
     }
     const i = ++this._authResolveId;
     try {
-      const s = await qe(t);
+      const s = await Ve(t);
       if (i !== this._authResolveId) return;
       this._apiBase = s.apiBase, this._authHeaders = s.headers, this._ensureEngine(), (o = this._engine) == null || o.updateConfig({
         apiBase: this._apiBase,
@@ -4898,7 +4994,7 @@ const C = (E = class extends P {
     }
   }
   _ensureEngine() {
-    !this._engine && this._apiBase && this._authHeaders && (this._engine = new He(this._store, {
+    !this._engine && this._apiBase && this._authHeaders && (this._engine = new qe(this._store, {
       apiBase: this._apiBase,
       authHeaders: this._authHeaders
     }), this._engine.start());
@@ -4914,7 +5010,7 @@ const C = (E = class extends P {
    * for file status transitions.
    */
   _onStoreChange() {
-    var r, o, s, n, d, c, u, h;
+    var r, o, s, n, d, p, h, u;
     const e = this._store.getState(), t = this._prevStoreState;
     if (this._prevStoreState = e, !t) return;
     const i = (r = this.config) == null ? void 0 : r.callbacks;
@@ -4947,19 +5043,19 @@ const C = (E = class extends P {
         percentage: e.totalProgress,
         speed: e.totalSpeed,
         eta: x
-      }), (c = i == null ? void 0 : i.onTotalProgress) == null || c.call(i, e.totalProgress, e.totalSpeed, x);
+      }), (p = i == null ? void 0 : i.onTotalProgress) == null || p.call(i, e.totalProgress, e.totalSpeed, x);
     }
     if (t.isUploading && !e.isUploading) {
       const x = [...e.files.values()];
       if (!x.some((m) => m.status === "cancelled")) {
         const m = x.filter((y) => y.status === "complete"), _ = x.filter((y) => y.status === "failed" || y.status === "error");
-        this._dispatchPublic(v.ALL_COMPLETE, { successful: m, failed: _ }), (u = i == null ? void 0 : i.onAllComplete) == null || u.call(i, m, _);
-        const w = (h = this.config) == null ? void 0 : h.closeOnComplete;
+        this._dispatchPublic(v.ALL_COMPLETE, { successful: m, failed: _ }), (h = i == null ? void 0 : i.onAllComplete) == null || h.call(i, m, _);
+        const w = (u = this.config) == null ? void 0 : u.closeOnComplete;
         if (w) {
           const y = typeof w == "number" ? w : 1500;
           this._closeOnCompleteTimer = setTimeout(() => {
-            var k, D, _e;
-            this._closeOnCompleteTimer = null, this._phase === "complete" && (this._dispatchPublic(v.COMPLETE_ACTION, {}), (_e = (D = (k = this.config) == null ? void 0 : k.callbacks) == null ? void 0 : D.onCompleteAction) == null || _e.call(D), this.close());
+            var C, D, ke;
+            this._closeOnCompleteTimer = null, this._phase === "complete" && (this._dispatchPublic(v.COMPLETE_ACTION, {}), (ke = (D = (C = this.config) == null ? void 0 : C.callbacks) == null ? void 0 : D.onCompleteAction) == null || ke.call(D), this.close());
           }, y);
         }
       }
@@ -4970,15 +5066,15 @@ const C = (E = class extends P {
     const e = (d = this.config) == null ? void 0 : d.connectors;
     if (e === this._cachedSourcesConfig) return this._cachedSources;
     if (this._cachedSourcesConfig = e, !e)
-      return this._cachedSources = X, this._cachedSources;
-    const t = e.providers.length > 0 ? Je(e.providers) : [], i = e.customSources ?? [], r = X.filter((c) => c.id === "device" || c.id === "url"), o = X.filter((c) => c.id !== "device" && c.id !== "url"), s = /* @__PURE__ */ new Set(), n = [];
-    for (const c of [...r, ...t, ...o, ...i])
-      if (!s.has(c.id)) {
-        if (E._RESERVED_IDS.has(c.id) && c.onActivate) {
-          console.warn(`[sfx-uploader] Custom source id "${c.id}" conflicts with a built-in source and was skipped.`);
+      return this._cachedSources = W, this._cachedSources;
+    const t = e.providers.length > 0 ? Je(e.providers) : [], i = e.customSources ?? [], r = W.filter((p) => p.id === "device" || p.id === "url"), o = W.filter((p) => p.id !== "device" && p.id !== "url"), s = /* @__PURE__ */ new Set(), n = [];
+    for (const p of [...r, ...t, ...o, ...i])
+      if (!s.has(p.id)) {
+        if (E._RESERVED_IDS.has(p.id) && p.onActivate) {
+          console.warn(`[sfx-uploader] Custom source id "${p.id}" conflicts with a built-in source and was skipped.`);
           continue;
         }
-        s.add(c.id), n.push(c);
+        s.add(p.id), n.push(p);
       }
     return this._cachedSources = n, this._cachedSources;
   }
@@ -4995,10 +5091,10 @@ const C = (E = class extends P {
     var i, r, o, s;
     const t = (i = this.config) == null ? void 0 : i.callbacks;
     for (const n of e) {
-      const d = this._store.getState(), c = Ze(n, d.restrictions, d.files);
-      if (c) {
+      const d = this._store.getState(), p = Ze(n, d.restrictions, d.files);
+      if (p) {
         const x = n.type.startsWith("image/") ? URL.createObjectURL(n) : null, f = {
-          id: H(),
+          id: q(),
           status: "rejected",
           file: n,
           remoteUrl: null,
@@ -5010,7 +5106,7 @@ const C = (E = class extends P {
           progress: 0,
           speed: 0,
           bytesUploaded: 0,
-          error: c,
+          error: p,
           retryCount: 0,
           response: null,
           addedAt: Date.now(),
@@ -5018,29 +5114,29 @@ const C = (E = class extends P {
           tags: [],
           remoteInfo: null
         };
-        I(this._store, f), this._dispatchPublic(v.FILE_REJECTED, { file: f, reason: c }), (r = t == null ? void 0 : t.onFileRejected) == null || r.call(t, f, c);
+        H(this._store, f), this._dispatchPublic(v.FILE_REJECTED, { file: f, reason: p }), (r = t == null ? void 0 : t.onFileRejected) == null || r.call(t, f, p);
         const m = (o = this.config) == null ? void 0 : o.rejectedFileAutoRemoveDelay, _ = m === !1 || m === 0 || m === void 0 ? 0 : m;
         if (_ > 0) {
           const w = f.id, y = setTimeout(() => {
             this._rejectedTimers.delete(w);
-            const k = this._store.getState().files.get(w);
-            k && k.status === "rejected" && Ce(this._store, w);
+            const C = this._store.getState().files.get(w);
+            C && C.status === "rejected" && Ce(this._store, w);
           }, _);
           this._rejectedTimers.set(w, y);
         }
         continue;
       }
-      let u = null;
-      n.type.startsWith("image/") && (u = URL.createObjectURL(n));
-      const h = {
-        id: H(),
+      let h = null;
+      n.type.startsWith("image/") && (h = URL.createObjectURL(n));
+      const u = {
+        id: q(),
         status: "idle",
         file: n,
         remoteUrl: null,
         name: n.name,
         size: n.size,
         type: n.type,
-        previewUrl: u,
+        previewUrl: h,
         duration: null,
         progress: 0,
         speed: 0,
@@ -5053,13 +5149,13 @@ const C = (E = class extends P {
         tags: [],
         remoteInfo: null
       };
-      if (I(this._store, h), this._dispatchPublic(v.FILE_ADDED, { file: h }), (s = t == null ? void 0 : t.onFileAdded) == null || s.call(t, h), n.type.startsWith("video/")) {
-        Ke(n).then((f) => {
+      if (H(this._store, u), this._dispatchPublic(v.FILE_ADDED, { file: u }), (s = t == null ? void 0 : t.onFileAdded) == null || s.call(t, u), n.type.startsWith("video/")) {
+        Ge(n).then((f) => {
           if (!f) return;
-          const m = this._store.getState(), _ = m.files.get(h.id);
+          const m = this._store.getState(), _ = m.files.get(u.id);
           if (_) {
             const w = new Map(m.files);
-            w.set(h.id, { ..._, previewUrl: f }), this._store.setState({ files: w });
+            w.set(u.id, { ..._, previewUrl: f }), this._store.setState({ files: w });
           } else
             URL.revokeObjectURL(f);
         });
@@ -5069,10 +5165,10 @@ const C = (E = class extends P {
         }, x.onloadedmetadata = () => {
           const f = x.duration;
           if (URL.revokeObjectURL(x.src), !isFinite(f)) return;
-          const m = this._store.getState(), _ = m.files.get(h.id);
+          const m = this._store.getState(), _ = m.files.get(u.id);
           if (_) {
             const w = new Map(m.files);
-            w.set(h.id, { ..._, duration: f }), this._store.setState({ files: w });
+            w.set(u.id, { ..._, duration: f }), this._store.setState({ files: w });
           }
         };
       }
@@ -5085,14 +5181,14 @@ const C = (E = class extends P {
     if (!t) return;
     const i = { ...t };
     if ((this._fullscreenPreviewUrl && this._fullscreenPreviewUrl === t.previewUrl || this._fullscreenVideoFile && this._fullscreenVideoFile === t.file) && (this._fullscreenPreviewUrl = null, this._fullscreenVideoFile = null), t.previewUrl && URL.revokeObjectURL(t.previewUrl), t.file) {
-      const c = this._videoBlobUrls.get(t.file);
-      c && (URL.revokeObjectURL(c), this._videoBlobUrls.delete(t.file));
+      const p = this._videoBlobUrls.get(t.file);
+      p && (URL.revokeObjectURL(p), this._videoBlobUrls.delete(t.file));
     }
     (t.status === "uploading" || t.status === "queued" || t.status === "retrying") && ((o = this._engine) == null || o.cancelFile(e)), Ce(this._store, e), this._dimCache.delete(e);
     const r = this._rejectedTimers.get(e);
     if (r && (clearTimeout(r), this._rejectedTimers.delete(e)), this._previewFileId === e) {
-      const c = [...this._store.getState().files.values()];
-      this._previewFileId = c.length > 0 ? c[0].id : null;
+      const p = [...this._store.getState().files.values()];
+      this._previewFileId = p.length > 0 ? p[0].id : null;
     }
     this._dispatchPublic(v.FILE_REMOVED, { file: i }), (d = (n = (s = this.config) == null ? void 0 : s.callbacks) == null ? void 0 : n.onFileRemoved) == null || d.call(n, i);
   }
@@ -5108,7 +5204,7 @@ const C = (E = class extends P {
               ${this._renderBody()}
             </div>
           </div>
-        ` : p}
+        ` : c}
       ` : l`
       <div class="inline">
         ${this._renderHeader()}
@@ -5118,9 +5214,9 @@ const C = (E = class extends P {
   }
   _renderHeader() {
     var s, n;
-    if (this._phase === "complete") return p;
+    if (this._phase === "complete") return c;
     if (this._phase === "uploading") {
-      const d = this._storeCtrl.state, c = [...d.files.values()], u = c.filter((x) => x.status === "complete").length, h = d.totalSpeed > 0 ? (d.totalBytes - d.totalBytesUploaded) / d.totalSpeed : 0;
+      const d = this._storeCtrl.state, p = [...d.files.values()], h = p.filter((x) => x.status === "complete").length, u = d.totalSpeed > 0 ? (d.totalBytes - d.totalBytesUploaded) / d.totalSpeed : 0;
       return l`
         <div class="header upload-header">
           <div class="float-header-left">
@@ -5128,8 +5224,8 @@ const C = (E = class extends P {
               <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="float-title">Uploading ${c.length} ${c.length === 1 ? "file" : "files"}</div>
-              <div class="float-subtitle">${u} of ${c.length}${h > 0 ? ` · ~${ie(h)} left` : ""}</div>
+              <div class="float-title">Uploading ${p.length} ${p.length === 1 ? "file" : "files"}</div>
+              <div class="float-subtitle">${h} of ${p.length}${u > 0 ? ` · ~${oe(u)} left` : ""}</div>
             </div>
           </div>
         </div>
@@ -5139,12 +5235,12 @@ const C = (E = class extends P {
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <polyline points="15 18 9 12 15 6"/>
           </svg>
-        </button>` : p, o = t === "close" ? l`<button class="header-btn header-btn-close" aria-label="Close" @click=${i}>
+        </button>` : c, o = t === "close" ? l`<button class="header-btn header-btn-close" aria-label="Close" @click=${i}>
           <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>` : p;
+        </button>` : c;
     return l`
       <div class="header">
         ${r}
@@ -5155,7 +5251,7 @@ const C = (E = class extends P {
             <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>` : p}
+        </div>` : c}
         <div class="header-title">Upload Files</div>
         ${o}
       </div>
@@ -5180,11 +5276,11 @@ const C = (E = class extends P {
         <div class="upload-overlay-spinner"></div>
         <div class="upload-overlay-percent">${i}%</div>
         <div class="upload-overlay-title">Uploading ${e.length} ${e.length === 1 ? "file" : "files"}</div>
-        <div class="upload-overlay-subtitle">${r} of ${e.length} complete${o > 0 ? l` · ~${ie(o)} left` : p}</div>
+        <div class="upload-overlay-subtitle">${r} of ${e.length} complete${o > 0 ? l` · ~${oe(o)} left` : c}</div>
         <div class="upload-overlay-bar">
           <div class="upload-overlay-bar-fill" style="width:${i}%"></div>
         </div>
-        ${(s = this.config) != null && s.minimizeOnUpload ? l`<button class="upload-overlay-minimize" @click=${this._onMinimize}>Minimize & continue in background</button>` : p}
+        ${(s = this.config) != null && s.minimizeOnUpload ? l`<button class="upload-overlay-minimize" @click=${this._onMinimize}>Minimize & continue in background</button>` : c}
       </div>
     `;
   }
@@ -5195,7 +5291,7 @@ const C = (E = class extends P {
           <div class="float-collapsed-left">
             ${r ? s > 0 ? o > 0 ? l`<div class="float-collapsed-icon warn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>` : l`<div class="float-collapsed-icon error"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>` : l`<div class="float-collapsed-icon done"><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>` : l`<div class="float-collapsed-spinner"></div>`}
             <span class="float-collapsed-text">${r ? s > 0 ? o > 0 ? "Partially uploaded" : "Upload failed" : "Upload complete" : `Uploading ${e.length} ${e.length === 1 ? "file" : "files"}`}</span>
-            ${r ? p : l`<span class="float-collapsed-pct">${i}%</span>`}
+            ${r ? c : l`<span class="float-collapsed-pct">${i}%</span>`}
           </div>
           <div class="float-collapsed-actions">
             <button title="Open uploader" @click=${this._onPillExpand}>
@@ -5218,7 +5314,7 @@ const C = (E = class extends P {
             </div>
             <div>
               <div class="float-title">${r ? s > 0 ? o > 0 ? "Partially uploaded" : "Upload failed" : "Upload complete" : `Uploading ${e.length} ${e.length === 1 ? "file" : "files"}`}</div>
-              <div class="float-subtitle">${r ? `${o} ${o === 1 ? "file" : "files"} uploaded${s > 0 ? `, ${s} failed` : ""}` : `${o} of ${e.length}${n > 0 ? ` · ~${ie(n)} left` : ""}`}</div>
+              <div class="float-subtitle">${r ? `${o} ${o === 1 ? "file" : "files"} uploaded${s > 0 ? `, ${s} failed` : ""}` : `${o} of ${e.length}${n > 0 ? ` · ~${oe(n)} left` : ""}`}</div>
             </div>
           </div>
           <div class="float-actions">
@@ -5242,25 +5338,25 @@ const C = (E = class extends P {
         </div>
         <div class="float-items">
           ${e.map((d) => {
-      const c = d.status === "failed" || d.status === "error";
+      const p = d.status === "failed" || d.status === "error";
       return l`
             <div class="float-item">
               <div class="float-item-thumb" style=${d.previewUrl ? `background-image:url(${d.previewUrl});background-size:cover;background-position:center` : ""}>
-                ${d.previewUrl ? p : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`}
+                ${d.previewUrl ? c : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`}
               </div>
               <div class="float-item-info">
                 <div class="float-item-name">${d.name}</div>
                 <div class="float-item-size">${Y(d.size)}</div>
               </div>
               <div class="float-item-status">
-                ${d.status === "complete" ? l`<div class="float-item-done"><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>` : c ? l`
+                ${d.status === "complete" ? l`<div class="float-item-done"><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>` : p ? l`
                         <div class="float-item-error-wrap">
                           <svg class="float-item-error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                           <span class="float-item-tooltip">${d.error || "Upload failed"}</span>
                         </div>
                         <button class="float-item-retry" @click=${() => {
-        var u;
-        this._ensureEngine(), (u = this._engine) == null || u.retryFile(d.id);
+        var h;
+        this._ensureEngine(), (h = this._engine) == null || h.retryFile(d.id);
       }}>
                           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/></svg>
                         </button>` : l`<div class="float-item-spinner"></div>`}
@@ -5274,12 +5370,12 @@ const C = (E = class extends P {
   }
   _renderPreviewLayout(e) {
     var n;
-    if (e.length === 0) return p;
-    const t = e.find((d) => d.id === this._previewFileId) ?? e[0], i = ((n = t.name.split(".").pop()) == null ? void 0 : n.toUpperCase()) || "", r = new Date(t.addedAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }), o = this._store.getState().targetFolder, s = e.reduce((d, c) => d + (c.size || 0), 0);
+    if (e.length === 0) return c;
+    const t = e.find((d) => d.id === this._previewFileId) ?? e[0], i = ((n = t.name.split(".").pop()) == null ? void 0 : n.toUpperCase()) || "", r = new Date(t.addedAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }), o = this._store.getState().targetFolder, s = e.reduce((d, p) => d + (p.size || 0), 0);
     return l`
       <div class="preview-topbar"></div>
       <div class="preview-layout">
-        <div class="file-grid-side">
+        <div class="file-grid-side" style="flex:${this._splitPct}">
           <div class="file-grid-header">
             <span class="file-grid-header-text">${e.length} ${e.length === 1 ? "asset" : "assets"} · ${Y(s)}</span>
           </div>
@@ -5291,8 +5387,13 @@ const C = (E = class extends P {
             @source-click=${this._onDropTileSourceClick}
           ></sfx-file-list>
         </div>
-        <div class="preview-divider"></div>
-        <div class="preview-panel">
+        <div class="preview-divider"
+          @pointerdown=${this._onSplitPointerDown}
+          @pointermove=${this._onSplitPointerMove}
+          @pointerup=${this._onSplitPointerUp}
+          @lostpointercapture=${this._onSplitPointerUp}
+        ></div>
+        <div class="preview-panel" style="flex:${100 - this._splitPct}">
           <div class="preview-panel-header">
             <span class="preview-panel-filename" title=${t.name}>${t.name}</span>
             <div class="preview-header-actions">
@@ -5307,7 +5408,7 @@ const C = (E = class extends P {
                     <line x1="3" y1="21" x2="10" y2="14" />
                   </svg>
                 </button>
-              ` : p}
+              ` : c}
               <button @click=${() => {
       this._previewFileId = null;
     }} title="Close">
@@ -5339,10 +5440,10 @@ const C = (E = class extends P {
                   </button>
                 </div>
               ` : l`
-                <div class="preview-doc-wrap ${N(t)}">
-                  <div class="preview-doc-icon ${N(t)}">
-                    ${this._renderDocTypeIcon(N(t))}
-                    <span class="preview-doc-ext ${N(t)}">${i}</span>
+                <div class="preview-doc-wrap ${X(t)}">
+                  <div class="preview-doc-icon ${X(t)}">
+                    ${this._renderDocTypeIcon(X(t))}
+                    <span class="preview-doc-ext ${X(t)}">${i}</span>
                   </div>
                   <button class="preview-nav prev" ?disabled=${e.indexOf(t) === 0} @click=${() => this._navigatePreview(e, -1)}>
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
@@ -5433,23 +5534,23 @@ const C = (E = class extends P {
       >
         <div
           class="body ${o ? "has-files" : ""} ${this._bodyDragOver ? "body-drag-over" : ""}"
-          @dragenter=${o ? this._onBodyDragEnter : p}
-          @dragover=${o ? this._onBodyDragOver : p}
-          @dragleave=${o ? this._onBodyDragLeave : p}
-          @drop=${o ? this._onBodyDrop : p}
+          @dragenter=${o ? this._onBodyDragEnter : c}
+          @dragover=${o ? this._onBodyDragOver : c}
+          @dragleave=${o ? this._onBodyDragLeave : c}
+          @drop=${o ? this._onBodyDrop : c}
         >
           ${i === "complete" ? l`
                   <sfx-success-card
-                    .fileCount=${t.filter((c) => c.status === "complete").length}
-                    .totalSize=${t.filter((c) => c.status === "complete").reduce((c, u) => c + (u.size || 0), 0)}
-                    .thumbnails=${t.filter((c) => c.status === "complete" && c.previewUrl).map((c) => c.previewUrl)}
-                    .failedFiles=${t.filter((c) => c.status === "failed").map((c) => ({ id: c.id, name: c.name, error: c.error || "Upload failed" }))}
+                    .fileCount=${t.filter((p) => p.status === "complete").length}
+                    .totalSize=${t.filter((p) => p.status === "complete").reduce((p, h) => p + (h.size || 0), 0)}
+                    .thumbnails=${t.filter((p) => p.status === "complete" && p.previewUrl).map((p) => p.previewUrl)}
+                    .failedFiles=${t.filter((p) => p.status === "failed").map((p) => ({ id: p.id, name: p.name, error: p.error || "Upload failed" }))}
                     @close-uploader=${this._onSuccessCardClose}
                     @file-retry=${this._onFileRetry}
                     @retry-all=${this._onRetryAll}
                   ></sfx-success-card>
                 ` : i === "uploading" ? this._renderUploadOverlay(t) : l`
-                  ${o ? p : l`<sfx-drop-zone
+                  ${o ? c : l`<sfx-drop-zone
                         .compact=${o}
                         .externalDragOver=${this._bodyDragOver}
                         .accept=${r}
@@ -5458,7 +5559,7 @@ const C = (E = class extends P {
                       ></sfx-drop-zone>`}
 
                   ${o ? this._previewFileId ? this._renderPreviewLayout(t) : l`
-                          <div class="asset-count">${t.length} ${t.length === 1 ? "file" : "files"} · ${Y(t.reduce((c, u) => c + (u.size || 0), 0))}</div>
+                          <div class="asset-count">${t.length} ${t.length === 1 ? "file" : "files"} · ${Y(t.reduce((p, h) => p + (h.size || 0), 0))}</div>
                           <sfx-file-list
                             .files=${t}
                             .showDropTile=${!0}
@@ -5466,7 +5567,7 @@ const C = (E = class extends P {
                             .accept=${r}
                             @source-click=${this._onDropTileSourceClick}
                           ></sfx-file-list>
-                        ` : p}
+                        ` : c}
                 `}
         </div>
 
@@ -5474,17 +5575,17 @@ const C = (E = class extends P {
               <sfx-actions-bar
                 .uploadState=${"idle"}
                 .fileCount=${t.length}
-                .totalSize=${t.reduce((c, u) => c + (u.size || 0), 0)}
-                .failedCount=${t.filter((c) => c.status === "failed" || c.status === "error").length}
-                .completedCount=${t.filter((c) => c.status === "complete").length}
+                .totalSize=${t.reduce((p, h) => p + (h.size || 0), 0)}
+                .failedCount=${t.filter((p) => p.status === "failed" || p.status === "error").length}
+                .completedCount=${t.filter((p) => p.status === "complete").length}
                 .uploadProgress=${e.totalProgress ?? 0}
                 .showFillMetadata=${!!((n = this.config) != null && n.showFillMetadata)}
               ></sfx-actions-bar>
-            ` : p}
+            ` : c}
 
-        ${this._showUrlDialog ? l`<sfx-url-dialog></sfx-url-dialog>` : p}
-        ${this._showCameraDialog ? l`<sfx-camera-dialog></sfx-camera-dialog>` : p}
-        ${this._showScreenCastDialog ? l`<sfx-screen-cast-dialog></sfx-screen-cast-dialog>` : p}
+        ${this._showUrlDialog ? l`<sfx-url-dialog></sfx-url-dialog>` : c}
+        ${this._showCameraDialog ? l`<sfx-camera-dialog></sfx-camera-dialog>` : c}
+        ${this._showScreenCastDialog ? l`<sfx-screen-cast-dialog></sfx-screen-cast-dialog>` : c}
         ${this._activeConnector && ((d = this.config) != null && d.connectors) ? l`
               <div class="connector-modal-backdrop" @click=${this._onConnectorBackdropClick}>
                 <div class="connector-modal">
@@ -5501,7 +5602,7 @@ const C = (E = class extends P {
                       `}
                 </div>
               </div>
-            ` : p}
+            ` : c}
 
         ${this._fullscreenPreviewUrl || this._fullscreenVideoFile ? l`
               <div
@@ -5515,7 +5616,7 @@ const C = (E = class extends P {
                 @touchmove=${this._onFsTouchMove}
                 @touchend=${this._onFsPanEnd}
               >
-                <div class="fs-toolbar" @click=${(c) => c.stopPropagation()}>
+                <div class="fs-toolbar" @click=${(p) => p.stopPropagation()}>
                   <button class="fs-btn" @click=${this._onFsToggleZoom} title="${this._fullscreenZoomed ? "Zoom out" : "Zoom in"}">
                     ${this._fullscreenZoomed ? l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>` : l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>`}
                   </button>
@@ -5530,7 +5631,7 @@ const C = (E = class extends P {
                       src=${this._getVideoBlobUrl(this._fullscreenVideoFile)}
                       controls playsinline
                       draggable="false"
-                      @click=${(c) => c.stopPropagation()}
+                      @click=${(p) => p.stopPropagation()}
                     ></video>` : l`<img
                       class="fs-img"
                       src=${this._fullscreenPreviewUrl}
@@ -5538,18 +5639,18 @@ const C = (E = class extends P {
                       style=${this._fullscreenZoomed ? `transform: scale(2) translate(${this._fsPanX}px, ${this._fsPanY}px)` : ""}
                       draggable="false"
                     />`}
-                <button class="fs-nav prev" @click=${(c) => {
-      c.stopPropagation(), this._navigateFs(-1);
+                <button class="fs-nav prev" @click=${(p) => {
+      p.stopPropagation(), this._navigateFs(-1);
     }}>
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
                 </button>
-                <button class="fs-nav next" @click=${(c) => {
-      c.stopPropagation(), this._navigateFs(1);
+                <button class="fs-nav next" @click=${(p) => {
+      p.stopPropagation(), this._navigateFs(1);
     }}>
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 6 15 12 9 18"/></svg>
                 </button>
               </div>
-            ` : p}
+            ` : c}
       </div>
     `;
   }
@@ -5598,6 +5699,8 @@ const C = (E = class extends P {
       --sfx-up-backdrop: rgba(0, 0, 0, 0.45);
       --sfx-up-ring: var(--ring, oklch(0.578 0.198 268.129 / 0.7));
       --sfx-up-max-height: 88vh;
+      --sfx-up-checker-bg: #fff;
+      --sfx-up-checker-tile: #f0f0f0;
     }
 
     /* --- Modal overlay --- */
@@ -5858,14 +5961,14 @@ const C = (E = class extends P {
     }
 
     .preview-layout .file-grid-side {
-      flex: 54;
+      flex: 68;
       min-width: 0;
       min-height: 100%;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       position: relative;
-      --sfx-up-grid-min: max(48%, 140px);
+      --sfx-up-grid-min: max(30%, 140px);
     }
 
     .preview-layout .file-grid-side::after {
@@ -5911,21 +6014,59 @@ const C = (E = class extends P {
     }
 
     .preview-divider {
-      width: 1px;
-      background: var(--sfx-up-border, #e8edf5);
+      width: 9px;
       flex-shrink: 0;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
+      cursor: col-resize;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .preview-divider::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 4px;
+      width: 1px;
+      background: var(--sfx-up-border, #e8edf5);
     }
 
     .preview-divider::after {
-      display: none;
+      content: '';
+      width: 3px;
+      height: 28px;
+      border-radius: 2px;
+      background: var(--sfx-up-border, #d0d7e2);
+      opacity: 0;
+      transition: opacity 0.15s;
+      z-index: 1;
+    }
+
+    .preview-divider:hover::after,
+    .preview-layout.resizing .preview-divider::after {
+      opacity: 1;
+    }
+
+    .preview-layout.resizing {
+      cursor: col-resize;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .preview-layout.resizing * {
+      pointer-events: none;
+    }
+
+    .preview-layout.resizing .preview-divider {
+      pointer-events: auto;
     }
 
     .preview-panel {
-      flex: 46;
+      flex: 32;
       min-width: 0;
       display: flex;
       flex-direction: column;
@@ -6060,7 +6201,14 @@ const C = (E = class extends P {
       position: relative;
       flex: 1;
       min-height: 0;
-      background: var(--sfx-up-surface, #f1f5f9);
+      background-color: var(--sfx-up-checker-bg);
+      background-image:
+        linear-gradient(45deg, var(--sfx-up-checker-tile) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--sfx-up-checker-tile) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--sfx-up-checker-tile) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--sfx-up-checker-tile) 75%);
+      background-size: 16px 16px;
+      background-position: 0 0, 0 8px, 8px -8px, -8px 0;
     }
 
     .preview-image {
@@ -6800,73 +6948,76 @@ const C = (E = class extends P {
 ]), E._RESERVED_IDS = /* @__PURE__ */ new Set(["device", "camera", "url", "screen-cast"]), E);
 $([
   b({ attribute: !1 })
-], C.prototype, "config");
+], k.prototype, "config");
+$([
+  g()
+], k.prototype, "_isOpen");
 $([
   g()
-], C.prototype, "_isOpen");
+], k.prototype, "_activeConnector");
 $([
   g()
-], C.prototype, "_activeConnector");
+], k.prototype, "_showUrlDialog");
 $([
   g()
-], C.prototype, "_showUrlDialog");
+], k.prototype, "_showCameraDialog");
 $([
   g()
-], C.prototype, "_showCameraDialog");
+], k.prototype, "_showScreenCastDialog");
 $([
   g()
-], C.prototype, "_showScreenCastDialog");
+], k.prototype, "_previewFileId");
 $([
   g()
-], C.prototype, "_previewFileId");
+], k.prototype, "_previewDims");
 $([
   g()
-], C.prototype, "_previewDims");
+], k.prototype, "_splitPct");
 $([
   g()
-], C.prototype, "_fullscreenPreviewUrl");
+], k.prototype, "_fullscreenPreviewUrl");
 $([
   g()
-], C.prototype, "_fullscreenVideoFile");
+], k.prototype, "_fullscreenVideoFile");
 $([
   g()
-], C.prototype, "_fullscreenZoomed");
+], k.prototype, "_fullscreenZoomed");
 $([
   g()
-], C.prototype, "_bodyDragOver");
+], k.prototype, "_bodyDragOver");
 $([
   g()
-], C.prototype, "_isMinimized");
+], k.prototype, "_isMinimized");
 $([
   g()
-], C.prototype, "_isPillExpanded");
-let Ct = C;
+], k.prototype, "_isPillExpanded");
+let $t = k;
 export {
-  le as A,
-  X as C,
+  de as A,
+  W as C,
   v as P,
-  O as S,
-  He as U,
-  U as a,
-  ne as b,
+  F as S,
+  qe as U,
+  z as a,
+  le as b,
   B as c,
-  ze as d,
-  ae as e,
-  R as f,
-  Ct as g,
-  je as h,
-  oe as i,
-  Oe as j,
+  Pe as d,
+  ne as e,
+  L as f,
+  $t as g,
+  Oe as h,
+  se as i,
+  Re as j,
   Ye as k,
-  de as l,
+  pe as l,
   Je as m,
-  W as n,
-  q as o,
-  L as p,
-  mt as q,
-  qe as r,
-  _t as s,
-  kt as t,
-  wt as u,
-  yt as v
+  K as n,
+  V as o,
+  A as p,
+  wt as q,
+  Ve as r,
+  kt as s,
+  Ct as t,
+  yt as u,
+  _t as v
 };