@scaleflex/uploader 0.2.3 → 0.2.4

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

@@ -1,8 +1,8 @@
-import { LitElement as P, css as S, svg as T, html as l, nothing as p, render as ke } from "lit";
-import { property as b, state as x, query as Fe } from "lit/decorators.js";
+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 M } from "lit/directives/unsafe-html.js";
-class Oe {
+import { unsafeHTML as T } from "lit/directives/unsafe-html.js";
+class je {
   constructor(e) {
     this.listeners = /* @__PURE__ */ new Set(), this._notifying = !1, this._pendingState = null, this.state = e;
   }
@@ -49,8 +49,8 @@ function Ce(a, e) {
   const i = new Map(t);
   i.delete(e), a.setState({ files: i });
 }
-function je() {
-  return new Oe({
+function Oe() {
+  return new je({
     files: /* @__PURE__ */ new Map(),
     queueConfig: {
       concurrency: 3,
@@ -79,7 +79,7 @@ function je() {
     isUploading: !1
   });
 }
-class Te {
+class Me {
   constructor(e, t) {
     this.host = e, this.store = t, e.addController(this);
   }
@@ -99,7 +99,7 @@ class Te {
     (e = this.unsubscribe) == null || e.call(this);
   }
 }
-function Me(a, e) {
+function Te(a, e) {
   const t = new XMLHttpRequest();
   let i = !1;
   const o = `${e.apiBase.replace(/\/+$/, "")}/v4/files?folder=${encodeURIComponent(e.folder)}`;
@@ -255,8 +255,8 @@ async function Le(a, e, t, i, r, o = !1) {
   if (u.status === 401)
     throw new le();
   if (!u.ok) {
-    const g = await u.json().catch(() => null);
-    throw new Error((g == null ? void 0 : g.message) || `Companion upload failed (HTTP ${u.status})`);
+    const h = await u.json().catch(() => null);
+    throw new Error((h == null ? void 0 : h.message) || `Companion upload failed (HTTP ${u.status})`);
   }
   return u.json();
 }
@@ -295,18 +295,18 @@ function Ie(a, e) {
     metadata: Object.keys(n).length > 0 ? n : void 0
   }, d).then((c) => {
     if (i) return;
-    const g = `${Ae(t.companionUrl)}/api/${c.token}`;
+    const h = `${Ae(t.companionUrl)}/api/${c.token}`;
     try {
-      r = new WebSocket(g);
+      r = new WebSocket(h);
     } catch {
       e.onError(new Error("Failed to connect to upload progress channel"));
       return;
     }
-    r.onmessage = (h) => {
+    r.onmessage = (x) => {
       var f, m, _;
       if (!i)
         try {
-          const w = JSON.parse(h.data);
+          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);
@@ -466,17 +466,17 @@ class He {
       onComplete: (d) => this.handleComplete(e.id, d),
       onError: (d) => this.handleError(e.id, d)
     }, s = (d, c) => {
-      const u = Date.now(), g = (u - i) / 1e3;
-      if (g > 0) {
-        const f = (d - t) / g;
+      const u = Date.now(), h = (u - i) / 1e3;
+      if (h > 0) {
+        const f = (d - t) / h;
         r = r === 0 ? f : 0.3 * f + 0.7 * r;
       }
       t = d, i = u;
-      const h = c > 0 ? Math.min(d / c * 100, 100) : 0;
-      z(this.store, e.id, { progress: h, bytesUploaded: d, speed: r }), this.updateTotalProgress();
+      const x = c > 0 ? Math.min(d / c * 100, 100) : 0;
+      z(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 = Me(e, { ...o, onProgress: s }), this.activeUploads.set(e.id, 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);
   }
   handleComplete(e, t) {
     this.activeUploads.delete(e), z(this.store, e, {
@@ -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 ? M(e.brandHtml) : T`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
+            ${e.brandHtml ? T(e.brandHtml) : M`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
             ${e.label}
           </button>
         `
@@ -875,7 +875,7 @@ let ae = fe;
 Qe([
   b({ type: Array })
 ], ae.prototype, "sources");
-var ot = Object.defineProperty, O = (a, e, t, i) => {
+var ot = 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;
@@ -953,8 +953,8 @@ const Ue = 3, ue = class ue extends P {
   }
   /** Position the fixed dropdown, choosing above or below based on available space. */
   _positionDropdown() {
-    var g, h;
-    const e = (g = this.shadowRoot) == null ? void 0 : g.querySelector(".more-wrap > button"), t = (h = this.shadowRoot) == null ? void 0 : h.querySelector(".more-dropdown");
+    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");
     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`);
@@ -985,8 +985,8 @@ const Ue = 3, ue = class ue extends P {
       t.stopPropagation(), this._onSourceIconClick(e);
     }}
       >
-        ${e.brandHtml ? M(e.brandHtml) : l`<span class="pill-ico" style=${e.iconColor ? `color:${e.iconColor}` : ""}>
-              ${T`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
+        ${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>`}
             </span>`}
         ${e.label}
       </button>
@@ -1001,8 +1001,8 @@ const Ue = 3, ue = class ue extends P {
       t.stopPropagation(), this._onSourceIconClick(e);
     }}
       >
-        ${e.brandHtml ? l`<span class="card-ico">${M(e.brandHtml)}</span>` : l`<span class="card-ico" style=${e.iconColor ? `color:${e.iconColor}` : ""}>
-              ${T`<svg viewBox="0 0 24 24" class=${e.fillIcon ? "fill-icon" : ""}>${F(e.icon)}</svg>`}
+        ${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>`}
             </span>`}
         <span class="card-label">${e.label}</span>
       </button>
@@ -1026,7 +1026,7 @@ const Ue = 3, ue = class ue extends P {
       (t) => l`
               <button class="more-item" @click=${(i) => this._onMoreItemClick(t, i)}>
                 <div class="more-item-ico">
-                  ${t.brandHtml ? M(t.brandHtml) : t.iconColor ? l`<svg viewBox="0 0 24 24" style="color:${t.iconColor}">${F(t.icon)}</svg>` : T`<svg viewBox="0 0 24 24">${F(t.icon)}</svg>`}
+                  ${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>
@@ -1048,7 +1048,7 @@ const Ue = 3, ue = class ue extends P {
       (t) => l`
               <button class="more-item" @click=${(i) => this._onMoreItemClick(t, i)}>
                 <div class="more-item-ico">
-                  ${t.brandHtml ? M(t.brandHtml) : t.iconColor ? l`<svg viewBox="0 0 24 24" style="color:${t.iconColor}">${F(t.icon)}</svg>` : T`<svg viewBox="0 0 24 24">${F(t.icon)}</svg>`}
+                  ${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>
@@ -1123,7 +1123,7 @@ const Ue = 3, ue = class ue extends P {
         o.stopPropagation(), this._onSourceIconClick(r);
       }}
                     >
-                      ${r.brandHtml ? M(r.brandHtml) : T`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
+                      ${r.brandHtml ? T(r.brandHtml) : M`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
                     </button>
                   `
     )}
@@ -1925,34 +1925,34 @@ ue.styles = S`
     }
   `;
 let U = ue;
-O([
+j([
   b({ type: Boolean, reflect: !0 })
 ], U.prototype, "compact");
-O([
+j([
   b({ type: Boolean, attribute: "external-drag-over" })
 ], U.prototype, "externalDragOver");
-O([
+j([
   b({ type: String })
 ], U.prototype, "accept");
-O([
+j([
   b({ type: Array })
 ], U.prototype, "sources");
-O([
+j([
   b({ type: String, attribute: "sources-layout" })
 ], U.prototype, "sourcesLayout");
-O([
-  x()
+j([
+  g()
 ], U.prototype, "_dragOver");
-O([
-  x()
+j([
+  g()
 ], U.prototype, "_moreOpen");
-O([
-  x()
+j([
+  g()
 ], U.prototype, "_visiblePills");
-O([
+j([
   Fe(".ripple")
 ], U.prototype, "_rippleEl");
-O([
+j([
   Fe('input[type="file"]')
 ], U.prototype, "fileInput");
 const he = class he extends P {
@@ -2050,7 +2050,7 @@ const xe = class xe extends P {
                 title=${r.label}
                 @click=${(o) => this._onSourceClick(o, r)}
               >
-                ${r.brandHtml ? M(r.brandHtml) : T`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
+                ${r.brandHtml ? T(r.brandHtml) : M`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
               </button>
             `)}
             ${i.length > 0 ? l`
@@ -2064,7 +2064,7 @@ const xe = class xe extends P {
                         @click=${(o) => this._onMoreSourceClick(o, r)}
                       >
                         <span class="more-dropdown-ico" style=${r.iconColor && !r.brandHtml ? `color:${r.iconColor}` : ""}>
-                          ${r.brandHtml ? M(r.brandHtml) : T`<svg viewBox="0 0 24 24" class=${r.fillIcon ? "fill-icon" : ""}>${F(r.icon)}</svg>`}
+                          ${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>
@@ -2123,7 +2123,7 @@ xe.styles = S`
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(var(--sfx-up-grid-min, max(24%, 140px)), 1fr));
       gap: 12px;
-      padding: 2px 12px 16px 16px;
+      padding: 0 12px 16px 16px;
     }
 
     @media (max-width: 480px) {
@@ -2406,7 +2406,7 @@ Z([
   b({ type: String })
 ], B.prototype, "accept");
 Z([
-  x()
+  g()
 ], B.prototype, "_moreOpen");
 var at = Object.defineProperty, nt = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
@@ -3021,9 +3021,27 @@ const Pe = 7, ve = class ve extends P {
       new CustomEvent("primary-action", { bubbles: !0, composed: !0 })
     );
   }
+  _retryFile(e) {
+    this.dispatchEvent(
+      new CustomEvent("file-retry", { bubbles: !0, composed: !0, detail: { fileId: e } })
+    );
+  }
+  _retryAll() {
+    this.dispatchEvent(
+      new CustomEvent("retry-all", { bubbles: !0, composed: !0 })
+    );
+  }
+  _close() {
+    this.dispatchEvent(
+      new CustomEvent("close-uploader", { bubbles: !0, composed: !0 })
+    );
+  }
   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;
     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>
+      </button>
       <div class="card" role="status" aria-live="polite">
         <div class="icon ${o ? "error" : r ? "warning" : ""}">
           ${o ? l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -3057,6 +3075,9 @@ const Pe = 7, ve = class ve extends P {
                     <div class="failed-name">${s.name}</div>
                     <div class="failed-reason">${s.error}</div>
                   </div>
+                  <button class="failed-retry" title="Retry" @click=${() => this._retryFile(s.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>
                 </div>
               `)}
             </div>
@@ -3064,6 +3085,7 @@ const Pe = 7, ve = class ve extends P {
 
         <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}
           <button class="btn-primary" @click=${this._primaryAction}>${this.primaryLabel}</button>
         </div>
       </div>
@@ -3076,7 +3098,9 @@ ve.styles = [J, G, S`
       flex: 1;
       justify-content: center;
       align-items: center;
-      padding-bottom: 24px;
+      padding: 24px 0;
+      position: relative;
+      overflow-y: auto;
     }
 
     .card {
@@ -3191,20 +3215,43 @@ ve.styles = [J, G, S`
     /* --- Failed files list --- */
     .failed-list {
       width: 100%;
-      max-width: 360px;
+      max-width: 400px;
+      max-height: 200px;
       margin-bottom: 20px;
       border-radius: 8px;
       border: 1px solid var(--sfx-up-border, #e8eaed);
-      overflow: hidden;
+      overflow-y: auto;
+      overflow-x: hidden;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0,0,0,0.15) transparent;
+    }
+
+    .failed-list::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .failed-list::-webkit-scrollbar-track {
+      background: transparent;
+      margin: 6px 0;
+    }
+
+    .failed-list::-webkit-scrollbar-thumb {
+      background: rgba(0,0,0,0.15);
+      border-radius: 3px;
+    }
+
+    .failed-list::-webkit-scrollbar-thumb:hover {
+      background: rgba(0,0,0,0.25);
     }
 
     .failed-item {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       gap: 8px;
       padding: 8px 12px;
-      border-bottom: 1px solid var(--sfx-up-border, #f1f5f9);
       text-align: left;
+      border-bottom: 1px solid var(--sfx-up-border, #f1f5f9);
+      margin-right: 8px;
     }
 
     .failed-item:last-child {
@@ -3239,6 +3286,62 @@ ve.styles = [J, G, S`
       line-height: 1.4;
     }
 
+    .failed-retry {
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: none;
+      color: var(--sfx-up-primary, #2563eb);
+      cursor: pointer;
+      padding: 4px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      margin-top: -2px;
+    }
+
+    .failed-retry svg { width: 14px; height: 14px; }
+
+    .failed-retry:hover { background: var(--sfx-up-surface, #f8fafc); color: var(--sfx-up-primary-hover, #1d4ed8); }
+
+    .close-btn {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: none;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      padding: 0;
+    }
+
+    .close-btn svg { width: 16px; height: 16px; }
+
+    .close-btn:hover { background: var(--sfx-up-surface, #f8fafc); color: var(--sfx-up-text, #1e293b); }
+
+    .btn-retry-all {
+      padding: 8px 18px;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      border: 1px solid var(--sfx-up-primary, #2563eb);
+      background: #fff;
+      color: var(--sfx-up-primary, #2563eb);
+      cursor: pointer;
+    }
+
+    .btn-retry-all:hover {
+      background: var(--sfx-up-primary-bg, #eff6ff);
+    }
+
     @keyframes fadeUp {
       from {
         opacity: 0;
@@ -3541,28 +3644,28 @@ be.styles = [J, G, S`
       .btn-spin { animation: none; }
     }
   `];
-let j = be;
+let O = be;
 A([
   b({ type: String })
-], j.prototype, "uploadState");
+], O.prototype, "uploadState");
 A([
   b({ type: Number })
-], j.prototype, "fileCount");
+], O.prototype, "fileCount");
 A([
   b({ type: Number })
-], j.prototype, "totalSize");
+], O.prototype, "totalSize");
 A([
   b({ type: Number })
-], j.prototype, "failedCount");
+], O.prototype, "failedCount");
 A([
   b({ type: Boolean })
-], j.prototype, "showFillMetadata");
+], O.prototype, "showFillMetadata");
 A([
   b({ type: Number })
-], j.prototype, "completedCount");
+], O.prototype, "completedCount");
 A([
   b({ type: Number })
-], j.prototype, "uploadProgress");
+], O.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) => {
@@ -3869,13 +3972,13 @@ me.styles = [J, G, S`
   `];
 let W = me;
 pe([
-  x()
+  g()
 ], W.prototype, "_url");
 pe([
-  x()
+  g()
 ], W.prototype, "_name");
 pe([
-  x()
+  g()
 ], W.prototype, "_error");
 var ft = Object.defineProperty, re = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
@@ -4043,16 +4146,16 @@ we.styles = [J, G, S`
   `];
 let q = we;
 re([
-  x()
+  g()
 ], q.prototype, "_stream");
 re([
-  x()
+  g()
 ], q.prototype, "_error");
 re([
-  x()
+  g()
 ], q.prototype, "_captured");
 re([
-  x()
+  g()
 ], q.prototype, "_previewUrl");
 var ut = Object.defineProperty, ee = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
@@ -4259,19 +4362,19 @@ ye.styles = [J, G, S`
   `];
 let L = ye;
 ee([
-  x()
+  g()
 ], L.prototype, "_stream");
 ee([
-  x()
+  g()
 ], L.prototype, "_recording");
 ee([
-  x()
+  g()
 ], L.prototype, "_error");
 ee([
-  x()
+  g()
 ], L.prototype, "_recordedBlob");
 ee([
-  x()
+  g()
 ], L.prototype, "_previewUrl");
 var ht = Object.defineProperty, $ = (a, e, t, i) => {
   for (var r = void 0, o = a.length - 1, s; o >= 0; o--)
@@ -4319,17 +4422,17 @@ 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-9oZjABnB.js");
+            const { SfxSearchProviderBrowser: n } = await import("./search-provider-browser-Dywv08pq.js");
             customElements.define("sfx-search-provider-browser", n);
           }
         } else if (!customElements.get("sfx-provider-browser")) {
-          const { SfxProviderBrowser: n } = await import("./provider-browser-CMbbN8PZ.js");
+          const { SfxProviderBrowser: n } = await import("./provider-browser-ZgbnfTHX.js");
           customElements.define("sfx-provider-browser", n);
         }
         this._activeConnector = e;
       }
     }, this._onUrlSubmit = (e) => {
-      var u, g, h;
+      var u, h, 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);
       if (d) {
@@ -4354,7 +4457,7 @@ const C = (E = class extends P {
           tags: [],
           remoteInfo: null
         };
-        I(this._store, f), this._dispatchPublic(v.FILE_REJECTED, { file: f, reason: d }), (g = r == null ? void 0 : r.onFileRejected) == null || g.call(r, f, d);
+        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);
         return;
       }
       const c = {
@@ -4378,7 +4481,7 @@ const C = (E = class extends P {
         tags: [],
         remoteInfo: null
       };
-      I(this._store, c), this._dispatchPublic(v.FILE_ADDED, { file: c }), (h = r == null ? void 0 : r.onFileAdded) == null || h.call(r, c), this._store.getState().queueConfig.autoProceed && this.upload();
+      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();
     }, this._onUrlCancel = () => {
       this._showUrlDialog = !1;
     }, this._onCameraCapture = (e) => {
@@ -4510,15 +4613,21 @@ const C = (E = class extends P {
     }, this._onInlineDismiss = () => {
       var e, t, i;
       (i = (t = (e = this.config) == null ? void 0 : e.callbacks) == null ? void 0 : t.onCancel) == null || i.call(t), this._dispatchPublic(v.CANCEL, {});
+    }, this._onSuccessCardClose = () => {
+      var e, t, i, r;
+      ((e = this.config) == null ? void 0 : e.mode) === "inline" ? (this._dispatchPublic(v.COMPLETE_ACTION, {}), (r = (i = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : i.onCompleteAction) == null || r.call(i), this._onClearAll()) : this._onModalDismiss();
     }, this._onModalDismiss = () => {
-      var e, t, i;
-      (i = (t = (e = this.config) == null ? void 0 : e.callbacks) == null ? void 0 : t.onCancel) == null || i.call(t), this._dispatchPublic(v.CANCEL, {}), this.close();
+      var e, t, i, r;
+      this._phase === "uploading" && ((e = this._engine) == null || e.cancelAll()), (r = (i = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : i.onCancel) == null || r.call(i), this._dispatchPublic(v.CANCEL, {}), this.close();
     }, this._onMinimize = () => {
       this._isMinimized = !0, this._isPillExpanded = !0, this.requestUpdate();
     }, this._onPillClick = () => {
       this._isPillExpanded = !this._isPillExpanded, this.requestUpdate();
-    }, this._onPillDismiss = () => {
+    }, this._onPillExpand = () => {
       this._isMinimized = !1, this._isPillExpanded = !1, this._isOpen = !0, this.requestUpdate();
+    }, this._onPillDismiss = () => {
+      var e, t, i, r;
+      this._isMinimized = !1, this._isPillExpanded = !1, this._phase === "uploading" && ((e = this._engine) == null || e.cancelAll()), (r = (i = (t = this.config) == null ? void 0 : t.callbacks) == null ? void 0 : i.onCancel) == null || r.call(i), this._dispatchPublic(v.CANCEL, {}), this.close();
     }, this._onModalBackdropClick = (e) => {
       e.target === e.currentTarget && this._onModalDismiss();
     }, this._onBodyDragEnter = (e) => {
@@ -4567,7 +4676,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 = je(), this._storeCtrl = new Te(this, this._store);
+    }, this._store = Oe(), this._storeCtrl = new Me(this, this._store);
   }
   // --- Public API ---
   /** Open the uploader (modal mode). */
@@ -4582,13 +4691,13 @@ const C = (E = class extends P {
   }
   /** Start uploading all queued files. */
   upload() {
-    var r, o, s, n, d;
+    var r, o, s, n, d, c, u;
     if (this._ensureEngine(), !this._engine) {
       console.warn("[sfx-uploader] Cannot upload: auth not resolved yet");
       return;
     }
     const e = [...this._store.getState().files.values()].filter(
-      (c) => c.status === "idle" || c.status === "queued"
+      (h) => h.status === "idle" || h.status === "queued"
     );
     if ((o = (r = this.config) == null ? void 0 : r.callbacks) != null && o.onBeforeUpload && this.config.callbacks.onBeforeUpload(e) === !1)
       return;
@@ -4598,7 +4707,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());
+    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()));
   }
   /** Programmatically add files. */
   addFiles(e) {
@@ -4670,13 +4779,14 @@ const C = (E = class extends P {
     if (document.querySelector("style[data-sfx-upload-float-styles]")) return;
     const e = document.createElement("style");
     e.setAttribute("data-sfx-upload-float-styles", ""), e.textContent = `
-      [data-sfx-upload-float] .upload-float { position:fixed; bottom:24px; right:24px; z-index:10000; width:320px; border-radius:12px; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06); overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; animation:sfxFloatIn .3s ease both; }
+      [data-sfx-upload-float] .upload-float { position:fixed; bottom:24px; right:24px; z-index:10000; width:470px; border-radius:12px; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06); overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; animation:sfxFloatIn .3s ease both; }
       [data-sfx-upload-float] .float-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #e8edf5; }
       [data-sfx-upload-float] .float-header-left { display:flex; align-items:center; gap:8px; }
       [data-sfx-upload-float] .float-icon { width:28px; height:28px; border-radius:6px; background:#eff6ff; color:#2563eb; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
       [data-sfx-upload-float] .float-icon svg { width:14px; height:14px; }
       [data-sfx-upload-float] .float-icon.done { background:#f0fdf4; color:#22c55e; }
       [data-sfx-upload-float] .float-icon.warn { background:#fffbeb; color:#f59e0b; }
+      [data-sfx-upload-float] .float-icon.error { background:#fef2f2; color:#ef4444; }
       [data-sfx-upload-float] .float-title { font-size:13px; font-weight:600; color:#1e293b; }
       [data-sfx-upload-float] .float-subtitle { font-size:11px; color:#94a3b8; }
       [data-sfx-upload-float] .float-actions { display:flex; gap:4px; }
@@ -4689,29 +4799,39 @@ const C = (E = class extends P {
       [data-sfx-upload-float] .float-progress-pct { font-size:12px; font-weight:600; color:#2563eb; }
       [data-sfx-upload-float] .float-progress-pct.done { color:#22c55e; }
       [data-sfx-upload-float] .float-progress-pct.warn { color:#f59e0b; }
+      [data-sfx-upload-float] .float-progress-pct.error { color:#ef4444; }
       [data-sfx-upload-float] .float-bar { height:4px; background:#e8edf5; border-radius:2px; overflow:hidden; }
       [data-sfx-upload-float] .float-bar-fill { height:100%; background:#2563eb; border-radius:2px; transition:width .3s ease; }
       [data-sfx-upload-float] .float-bar-fill.done { background:#22c55e; }
       [data-sfx-upload-float] .float-bar-fill.warn { background:#f59e0b; }
+      [data-sfx-upload-float] .float-bar-fill.error { background:#ef4444; }
       [data-sfx-upload-float] .float-items { max-height:200px; overflow-y:auto; }
-      [data-sfx-upload-float] .float-item { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid #f1f5f9; }
+      [data-sfx-upload-float] .float-item { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid #f1f5f9; overflow:hidden; }
       [data-sfx-upload-float] .float-item:last-child { border-bottom:none; }
       [data-sfx-upload-float] .float-item-thumb { width:32px; height:32px; border-radius:6px; background:#f8fafc; display:flex; align-items:center; justify-content:center; color:#94a3b8; flex-shrink:0; }
       [data-sfx-upload-float] .float-item-thumb svg { width:16px; height:16px; }
-      [data-sfx-upload-float] .float-item-info { flex:1; min-width:0; }
+      [data-sfx-upload-float] .float-item-info { flex:1; min-width:0; overflow:hidden; }
       [data-sfx-upload-float] .float-item-name { font-size:12px; font-weight:500; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
       [data-sfx-upload-float] .float-item-size { font-size:11px; color:#94a3b8; }
       [data-sfx-upload-float] .float-item-done { width:18px; height:18px; border-radius:50%; background:#f0fdf4; color:#22c55e; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
       [data-sfx-upload-float] .float-item-done svg { width:12px; height:12px; }
       [data-sfx-upload-float] .float-item-spinner { width:16px; height:16px; border:2px solid #e8edf5; border-top-color:#2563eb; border-radius:50%; animation:sfxSpin .8s linear infinite; flex-shrink:0; }
-      [data-sfx-upload-float] .float-item-error { color:#ef4444; width:16px; height:16px; flex-shrink:0; cursor:help; }
-      [data-sfx-upload-float] .float-collapsed { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; width:320px; border-radius:12px; }
+      [data-sfx-upload-float] .float-item-status { display:flex; flex-direction:row; align-items:center; gap:4px; flex-shrink:0; }
+      [data-sfx-upload-float] .float-item-error-wrap { position:relative; display:flex; align-items:center; flex-shrink:0; }
+      [data-sfx-upload-float] .float-item-error-icon { width:16px; height:16px; color:#ef4444; flex-shrink:0; cursor:pointer; }
+      [data-sfx-upload-float] .float-item-tooltip { display:none; position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); background:#fff; color:#1e293b; font-size:11px; padding:6px 10px; border-radius:6px; white-space:nowrap; pointer-events:none; z-index:10; box-shadow:0 2px 12px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.08); }
+      [data-sfx-upload-float] .float-item-error-wrap:hover .float-item-tooltip { display:block; }
+      [data-sfx-upload-float] .float-item-retry { width:24px; height:24px; border:none; background:none; color:#2563eb; cursor:pointer; padding:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:4px; }
+      [data-sfx-upload-float] .float-item-retry svg { width:14px; height:14px; }
+      [data-sfx-upload-float] .float-item-retry:hover { background:#f1f5f9; color:#1d4ed8; }
+      [data-sfx-upload-float] .float-collapsed { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; width:470px; border-radius:12px; }
       [data-sfx-upload-float] .float-collapsed-left { display:flex; align-items:center; gap:8px; }
       [data-sfx-upload-float] .float-collapsed-spinner { width:18px; height:18px; border:2.5px solid #e8edf5; border-top-color:#2563eb; border-radius:50%; animation:sfxSpin .8s linear infinite; flex-shrink:0; }
       [data-sfx-upload-float] .float-collapsed-icon { width:18px; height:18px; flex-shrink:0; }
       [data-sfx-upload-float] .float-collapsed-icon svg { width:18px; height:18px; }
       [data-sfx-upload-float] .float-collapsed-icon.done { color:#22c55e; }
       [data-sfx-upload-float] .float-collapsed-icon.warn { color:#f59e0b; }
+      [data-sfx-upload-float] .float-collapsed-icon.error { color:#ef4444; }
       [data-sfx-upload-float] .float-collapsed-text { font-size:13px; font-weight:500; color:#1e293b; white-space:nowrap; }
       [data-sfx-upload-float] .float-collapsed-pct { font-size:13px; font-weight:600; color:#2563eb; }
       [data-sfx-upload-float] .float-collapsed-actions { display:flex; gap:4px; }
@@ -4794,12 +4914,12 @@ const C = (E = class extends P {
    * for file status transitions.
    */
   _onStoreChange() {
-    var r, o, s, n, d, c, u, g;
+    var r, o, s, n, d, c, u, h;
     const e = this._store.getState(), t = this._prevStoreState;
     if (this._prevStoreState = e, !t) return;
     const i = (r = this.config) == null ? void 0 : r.callbacks;
-    for (const [h, f] of e.files) {
-      const m = t.files.get(h);
+    for (const [x, f] of e.files) {
+      const m = t.files.get(x);
       if (m) {
         if (m.status !== f.status)
           switch (f.status) {
@@ -4822,19 +4942,19 @@ const C = (E = class extends P {
       }
     }
     if (e.totalProgress !== t.totalProgress || e.totalSpeed !== t.totalSpeed) {
-      const h = e.totalSpeed > 0 ? (e.totalBytes - e.totalBytesUploaded) / e.totalSpeed : 0;
+      const x = e.totalSpeed > 0 ? (e.totalBytes - e.totalBytesUploaded) / e.totalSpeed : 0;
       this._dispatchPublic(v.TOTAL_PROGRESS, {
         percentage: e.totalProgress,
         speed: e.totalSpeed,
-        eta: h
-      }), (c = i == null ? void 0 : i.onTotalProgress) == null || c.call(i, e.totalProgress, e.totalSpeed, h);
+        eta: x
+      }), (c = i == null ? void 0 : i.onTotalProgress) == null || c.call(i, e.totalProgress, e.totalSpeed, x);
     }
     if (t.isUploading && !e.isUploading) {
-      const h = [...e.files.values()];
-      if (!h.some((m) => m.status === "cancelled")) {
-        const m = h.filter((y) => y.status === "complete"), _ = h.filter((y) => y.status === "failed" || y.status === "error");
+      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 = (g = this.config) == null ? void 0 : g.closeOnComplete;
+        const w = (h = this.config) == null ? void 0 : h.closeOnComplete;
         if (w) {
           const y = typeof w == "number" ? w : 1500;
           this._closeOnCompleteTimer = setTimeout(() => {
@@ -4877,7 +4997,7 @@ const C = (E = class extends P {
     for (const n of e) {
       const d = this._store.getState(), c = Ze(n, d.restrictions, d.files);
       if (c) {
-        const h = n.type.startsWith("image/") ? URL.createObjectURL(n) : null, f = {
+        const x = n.type.startsWith("image/") ? URL.createObjectURL(n) : null, f = {
           id: H(),
           status: "rejected",
           file: n,
@@ -4885,7 +5005,7 @@ const C = (E = class extends P {
           name: n.name,
           size: n.size,
           type: n.type,
-          previewUrl: h,
+          previewUrl: x,
           duration: null,
           progress: 0,
           speed: 0,
@@ -4912,7 +5032,7 @@ const C = (E = class extends P {
       }
       let u = null;
       n.type.startsWith("image/") && (u = URL.createObjectURL(n));
-      const g = {
+      const h = {
         id: H(),
         status: "idle",
         file: n,
@@ -4933,26 +5053,26 @@ const C = (E = class extends P {
         tags: [],
         remoteInfo: null
       };
-      if (I(this._store, g), this._dispatchPublic(v.FILE_ADDED, { file: g }), (s = t == null ? void 0 : t.onFileAdded) == null || s.call(t, g), n.type.startsWith("video/")) {
+      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 (!f) return;
-          const m = this._store.getState(), _ = m.files.get(g.id);
+          const m = this._store.getState(), _ = m.files.get(h.id);
           if (_) {
             const w = new Map(m.files);
-            w.set(g.id, { ..._, previewUrl: f }), this._store.setState({ files: w });
+            w.set(h.id, { ..._, previewUrl: f }), this._store.setState({ files: w });
           } else
             URL.revokeObjectURL(f);
         });
-        const h = document.createElement("video");
-        h.preload = "metadata", h.src = URL.createObjectURL(n), h.onerror = () => {
-          URL.revokeObjectURL(h.src);
-        }, h.onloadedmetadata = () => {
-          const f = h.duration;
-          if (URL.revokeObjectURL(h.src), !isFinite(f)) return;
-          const m = this._store.getState(), _ = m.files.get(g.id);
+        const x = document.createElement("video");
+        x.preload = "metadata", x.src = URL.createObjectURL(n), x.onerror = () => {
+          URL.revokeObjectURL(x.src);
+        }, x.onloadedmetadata = () => {
+          const f = x.duration;
+          if (URL.revokeObjectURL(x.src), !isFinite(f)) return;
+          const m = this._store.getState(), _ = m.files.get(h.id);
           if (_) {
             const w = new Map(m.files);
-            w.set(g.id, { ..._, duration: f }), this._store.setState({ files: w });
+            w.set(h.id, { ..._, duration: f }), this._store.setState({ files: w });
           }
         };
       }
@@ -5000,7 +5120,7 @@ const C = (E = class extends P {
     var s, n;
     if (this._phase === "complete") return p;
     if (this._phase === "uploading") {
-      const d = this._storeCtrl.state, c = [...d.files.values()], u = c.filter((h) => h.status === "complete").length, g = d.totalSpeed > 0 ? (d.totalBytes - d.totalBytesUploaded) / d.totalSpeed : 0;
+      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;
       return l`
         <div class="header upload-header">
           <div class="float-header-left">
@@ -5009,7 +5129,7 @@ const C = (E = class extends P {
             </div>
             <div>
               <div class="float-title">Uploading ${c.length} ${c.length === 1 ? "file" : "files"}</div>
-              <div class="float-subtitle">${u} of ${c.length}${g > 0 ? ` · ~${ie(g)} left` : ""}</div>
+              <div class="float-subtitle">${u} of ${c.length}${h > 0 ? ` · ~${ie(h)} left` : ""}</div>
             </div>
           </div>
         </div>
@@ -5073,15 +5193,18 @@ const C = (E = class extends P {
     return this._isPillExpanded === !1 ? l`
         <div class="upload-float float-collapsed">
           <div class="float-collapsed-left">
-            ${r ? s > 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 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 ? `${s} ${s === 1 ? "file" : "files"} not uploaded` : "Upload complete" : `Uploading ${e.length} ${e.length === 1 ? "file" : "files"}`}</span>
+            ${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>`}
           </div>
           <div class="float-collapsed-actions">
+            <button title="Open uploader" @click=${this._onPillExpand}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+            </button>
             <button title="Expand" @click=${this._onPillClick}>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="18 15 12 9 6 15"/></svg>
             </button>
-            <button title="Dismiss" @click=${this._onPillDismiss}>
+            <button title="Close" @click=${this._onPillDismiss}>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
@@ -5090,19 +5213,22 @@ const C = (E = class extends P {
       <div class="upload-float">
         <div class="float-header">
           <div class="float-header-left">
-            <div class="float-icon ${r ? s > 0 ? "warn" : "done" : ""}">
-              ${r ? s > 0 ? l`<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>` : l`<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>` : l`<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 class="float-icon ${r ? s > 0 ? o > 0 ? "warn" : "error" : "done" : ""}">
+              ${r ? s > 0 ? o > 0 ? l`<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>` : l`<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>` : l`<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>` : l`<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">${r ? s > 0 ? `${s} ${s === 1 ? "file" : "files"} not uploaded` : "Upload complete" : `Uploading ${e.length} ${e.length === 1 ? "file" : "files"}`}</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>
           </div>
           <div class="float-actions">
+            <button title="Expand" @click=${this._onPillExpand}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+            </button>
             <button title="Collapse" @click=${this._onPillClick}>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>
             </button>
-            <button title="Dismiss" @click=${this._onPillDismiss}>
+            <button title="Close" @click=${this._onPillDismiss}>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
@@ -5110,25 +5236,38 @@ const C = (E = class extends P {
         <div class="float-progress">
           <div class="float-progress-top">
             <span class="float-progress-label">Overall progress</span>
-            <span class="float-progress-pct ${r ? s > 0 ? "warn" : "done" : ""}">${r ? "Done" : `${i}%`}</span>
+            <span class="float-progress-pct ${r ? s > 0 ? o > 0 ? "warn" : "error" : "done" : ""}">${r ? "Done" : `${i}%`}</span>
           </div>
-          <div class="float-bar"><div class="float-bar-fill ${r ? s > 0 ? "warn" : "done" : ""}" style="width:${r ? 100 : i}%"></div></div>
+          <div class="float-bar"><div class="float-bar-fill ${r ? s > 0 ? o > 0 ? "warn" : "error" : "done" : ""}" style="width:${r ? 100 : i}%"></div></div>
         </div>
         <div class="float-items">
-          ${e.map((d) => l`
+          ${e.map((d) => {
+      const c = d.status === "failed" || d.status === "error";
+      return l`
             <div class="float-item">
-              <div class="float-item-thumb">
-                <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 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>`}
               </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>` : d.status === "failed" || d.status === "error" ? l`<svg class="float-item-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>${d.error || "Upload failed"}</title><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>` : l`<div class="float-item-spinner"></div>`}
+                ${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`
+                        <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);
+      }}>
+                          <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>`}
               </div>
             </div>
-          `)}
+          `;
+    })}
         </div>
       </div>
     `;
@@ -5304,7 +5443,10 @@ const C = (E = class extends P {
                     .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) => ({ name: c.name, error: c.error || "Upload failed" }))}
+                    .failedFiles=${t.filter((c) => c.status === "failed").map((c) => ({ id: c.id, name: c.name, error: c.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
@@ -5727,19 +5869,11 @@ const C = (E = class extends P {
     }
 
     .preview-layout .file-grid-side::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 14px;
-      width: 1px;
-      background: var(--sfx-up-border, #e8edf5);
-      pointer-events: none;
-      z-index: 3;
+      display: none;
     }
 
     .preview-layout sfx-file-list {
-      padding-right: 16px;
+      padding-right: 6px;
       --sfx-scrollbar-w: 14px;
       --sfx-scrollbar-inset-left: 2px;
       --sfx-scrollbar-inset-right: 6px;
@@ -6030,6 +6164,7 @@ const C = (E = class extends P {
       flex: 1;
       gap: 8px;
       padding: 32px 24px;
+      position: relative;
       animation: fadeUp 0.3s ease both;
     }
 
@@ -6134,7 +6269,7 @@ const C = (E = class extends P {
       bottom: 24px;
       right: 24px;
       z-index: 10000;
-      width: 320px;
+      width: 470px;
       border-radius: 12px;
       background: var(--sfx-up-bg, #fff);
       box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
@@ -6176,6 +6311,11 @@ const C = (E = class extends P {
       color: #22c55e;
     }
 
+    .float-icon.error {
+      background: #fef2f2;
+      color: #ef4444;
+    }
+
     .float-title {
       font-size: 13px;
       font-weight: 600;
@@ -6237,9 +6377,9 @@ const C = (E = class extends P {
       color: var(--sfx-up-primary, #2563eb);
     }
 
-    .float-progress-pct.done {
-      color: #22c55e;
-    }
+    .float-progress-pct.done { color: #22c55e; }
+    .float-progress-pct.warn { color: #f59e0b; }
+    .float-progress-pct.error { color: #ef4444; }
 
     .float-bar {
       height: 4px;
@@ -6255,13 +6395,14 @@ const C = (E = class extends P {
       transition: width 0.3s ease;
     }
 
-    .float-bar-fill.done {
-      background: #22c55e;
-    }
+    .float-bar-fill.done { background: #22c55e; }
+    .float-bar-fill.warn { background: #f59e0b; }
+    .float-bar-fill.error { background: #ef4444; }
 
     .float-items {
       max-height: 200px;
       overflow-y: auto;
+      overflow-x: hidden;
       scrollbar-width: thin;
       scrollbar-color: rgba(0,0,0,0.1) transparent;
     }
@@ -6272,6 +6413,7 @@ const C = (E = class extends P {
       gap: 10px;
       padding: 8px 14px;
       border-bottom: 1px solid #f1f5f9;
+      overflow: hidden;
     }
 
     .float-item:last-child { border-bottom: none; }
@@ -6290,7 +6432,7 @@ const C = (E = class extends P {
 
     .float-item-thumb svg { width: 16px; height: 16px; }
 
-    .float-item-info { flex: 1; min-width: 0; }
+    .float-item-info { flex: 1; min-width: 0; overflow: hidden; }
 
     .float-item-name {
       font-size: 12px;
@@ -6330,13 +6472,69 @@ const C = (E = class extends P {
       flex-shrink: 0;
     }
 
-    .float-item-error {
-      color: #ef4444;
+    .float-item-error-wrap {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .float-item-error-icon {
       width: 16px;
       height: 16px;
+      color: #ef4444;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+
+    .float-item-tooltip {
+      display: none;
+      position: absolute;
+      right: calc(100% + 8px);
+      top: 50%;
+      transform: translateY(-50%);
+      background: #fff;
+      color: #1e293b;
+      font-size: 11px;
+      padding: 6px 10px;
+      border-radius: 6px;
+      white-space: nowrap;
+      pointer-events: none;
+      z-index: 10;
+      box-shadow: 0 2px 12px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
+    }
+
+    .float-item-error-wrap:hover .float-item-tooltip {
+      display: block;
+    }
+
+    .float-item-status {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 4px;
+      flex-shrink: 0;
+    }
+
+    .float-item-retry {
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: none;
+      color: var(--sfx-up-primary, #2563eb);
+      cursor: pointer;
+      padding: 4px;
       flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
     }
 
+    .float-item-retry svg { width: 16px; height: 16px; }
+
+    .float-item-retry:hover { background: var(--sfx-up-surface, #f8fafc); color: var(--sfx-up-primary-hover, #1d4ed8); }
+
     @keyframes floatSlideIn {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
@@ -6604,50 +6802,50 @@ $([
   b({ attribute: !1 })
 ], C.prototype, "config");
 $([
-  x()
+  g()
 ], C.prototype, "_isOpen");
 $([
-  x()
+  g()
 ], C.prototype, "_activeConnector");
 $([
-  x()
+  g()
 ], C.prototype, "_showUrlDialog");
 $([
-  x()
+  g()
 ], C.prototype, "_showCameraDialog");
 $([
-  x()
+  g()
 ], C.prototype, "_showScreenCastDialog");
 $([
-  x()
+  g()
 ], C.prototype, "_previewFileId");
 $([
-  x()
+  g()
 ], C.prototype, "_previewDims");
 $([
-  x()
+  g()
 ], C.prototype, "_fullscreenPreviewUrl");
 $([
-  x()
+  g()
 ], C.prototype, "_fullscreenVideoFile");
 $([
-  x()
+  g()
 ], C.prototype, "_fullscreenZoomed");
 $([
-  x()
+  g()
 ], C.prototype, "_bodyDragOver");
 $([
-  x()
+  g()
 ], C.prototype, "_isMinimized");
 $([
-  x()
+  g()
 ], C.prototype, "_isPillExpanded");
 let Ct = C;
 export {
   le as A,
   X as C,
   v as P,
-  j as S,
+  O as S,
   He as U,
   U as a,
   ne as b,
@@ -6656,9 +6854,9 @@ export {
   ae as e,
   R as f,
   Ct as g,
-  Oe as h,
+  je as h,
   oe as i,
-  je as j,
+  Oe as j,
   Ye as k,
   de as l,
   Je as m,