@scaleflex/uploader 0.1.0 → 0.2.1

package/dist/{provider-browser-C-S_MPrC.js → provider-browser-ixqCA0XP.js}

@@ -1,62 +1,63 @@
-import { LitElement as _, css as k, html as n, nothing as h } from "lit";
-import { property as v, state as d } from "lit/decorators.js";
-import { q as y, t as w, m as $, u as z, A as g, v as I } from "./sfx-uploader-C2lWIRnU.js";
+import { LitElement as y, css as w, html as s, nothing as h } from "lit";
+import { property as k, state as d } from "lit/decorators.js";
+import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
+import { q as _, t as $, m as z, u as C, A as v, v as I } from "./sfx-uploader-CU9IwNC7.js";
 const x = "sfx-uploader-token:";
-function p(o) {
+function p(n) {
   try {
-    return localStorage.getItem(`${x}${o}`);
+    return localStorage.getItem(`${x}${n}`);
   } catch {
     return null;
   }
 }
-function C(o, e) {
+function P(n, e) {
   try {
-    localStorage.setItem(`${x}${o}`, e);
+    localStorage.setItem(`${x}${n}`, e);
   } catch {
   }
 }
-function f(o) {
+function u(n) {
   try {
-    localStorage.removeItem(`${x}${o}`);
+    localStorage.removeItem(`${x}${n}`);
   } catch {
   }
 }
-function P(o, e) {
-  const i = (r) => {
-    if (r.origin !== new URL(o).origin) return;
-    const t = typeof r.data == "string" ? L(r.data) : r.data;
+function S(n, e) {
+  const r = (i) => {
+    if (i.origin !== new URL(n).origin) return;
+    const t = typeof i.data == "string" ? L(i.data) : i.data;
     t != null && t.token && e(t.token);
   };
-  return window.addEventListener("message", i), () => window.removeEventListener("message", i);
+  return window.addEventListener("message", r), () => window.removeEventListener("message", r);
 }
-function L(o) {
+function L(n) {
   try {
-    return JSON.parse(o);
+    return JSON.parse(n);
   } catch {
     return null;
   }
 }
-var S = Object.defineProperty, l = (o, e, i, r) => {
-  for (var t = void 0, s = o.length - 1, c; s >= 0; s--)
-    (c = o[s]) && (t = c(e, i, t) || t);
-  return t && S(e, i, t), t;
+var M = Object.defineProperty, l = (n, e, r, i) => {
+  for (var t = void 0, o = n.length - 1, c; o >= 0; o--)
+    (c = n[o]) && (t = c(e, r, t) || t);
+  return t && M(e, r, t), t;
 };
-const b = class b extends _ {
+const g = class g extends y {
   constructor() {
     super(...arguments), this.provider = "google-drive", this.companionUrl = "", this._authenticated = !1, this._loading = !1, this._items = [], this._selectedIds = /* @__PURE__ */ new Set(), this._breadcrumbs = [], this._nextPagePath = null, this._error = null, this._loadingMore = !1, this._username = null, this._cleanupAuthListener = null, this._authWindow = null, this._handleConnect = () => {
-      var i;
-      const e = y(this.companionUrl, this.provider);
-      this._authWindow = window.open(e, "_blank", "width=600,height=600"), (i = this._cleanupAuthListener) == null || i.call(this), this._cleanupAuthListener = P(this.companionUrl, (r) => {
-        var t, s;
-        (t = this._authWindow) == null || t.close(), this._authWindow = null, (s = this._cleanupAuthListener) == null || s.call(this), this._cleanupAuthListener = null, C(this.provider, r), this._authenticated = !0, this._loadFolder("");
+      var r;
+      const e = _(this.companionUrl, this.provider);
+      this._authWindow = window.open(e, "_blank", "width=600,height=600"), (r = this._cleanupAuthListener) == null || r.call(this), this._cleanupAuthListener = S(this.companionUrl, (i) => {
+        var t, o;
+        (t = this._authWindow) == null || t.close(), this._authWindow = null, (o = this._cleanupAuthListener) == null || o.call(this), this._cleanupAuthListener = null, P(this.provider, i), this._authenticated = !0, this._loadFolder("");
       });
     }, this._lastClickedIndex = null, this._toggleSelectAll = () => {
-      const e = this._items.filter((r) => !r.isFolder);
-      e.every((r) => this._selectedIds.has(r.id)) ? this._selectedIds = /* @__PURE__ */ new Set() : this._selectedIds = new Set(e.map((r) => r.id));
+      const e = this._items.filter((i) => !i.isFolder);
+      e.every((i) => this._selectedIds.has(i.id)) ? this._selectedIds = /* @__PURE__ */ new Set() : this._selectedIds = new Set(e.map((i) => i.id));
     }, this._onAddSelected = () => {
       const e = p(this.provider);
       if (!e) return;
-      const r = this._items.filter(
+      const i = this._items.filter(
         (t) => !t.isFolder && this._selectedIds.has(t.id)
       ).map((t) => ({
         companionUrl: this.companionUrl,
@@ -71,7 +72,7 @@ const b = class b extends _ {
       }));
       this.dispatchEvent(
         new CustomEvent("connector-files-selected", {
-          detail: { files: r },
+          detail: { files: i },
           bubbles: !0,
           composed: !0
         })
@@ -87,10 +88,10 @@ const b = class b extends _ {
       const e = p(this.provider);
       if (e) {
         try {
-          await w(this.companionUrl, this.provider, e);
+          await $(this.companionUrl, this.provider, e);
         } catch {
         }
-        f(this.provider);
+        u(this.provider);
       }
       this._reset();
     };
@@ -111,23 +112,26 @@ const b = class b extends _ {
   _checkAuth() {
     p(this.provider) && (this._authenticated = !0, this._loadFolder(""));
   }
+  get _providerDef() {
+    return z([this.provider])[0] ?? null;
+  }
   get _providerLabel() {
-    var i;
-    return ((i = $([this.provider])[0]) == null ? void 0 : i.label) ?? this.provider;
+    var e;
+    return ((e = this._providerDef) == null ? void 0 : e.label) ?? this.provider;
   }
   // --- Folder navigation ---
   async _loadFolder(e) {
-    const i = p(this.provider);
-    if (!i) {
+    const r = p(this.provider);
+    if (!r) {
       this._authenticated = !1;
       return;
     }
     this.offsetHeight > 0 && (this.style.minHeight = `${this.offsetHeight}px`), this._loading = !0, this._error = null, this._items = [], this._selectedIds = /* @__PURE__ */ new Set(), this._lastClickedIndex = null, this._nextPagePath = null;
     try {
-      const r = await z(this.companionUrl, this.provider, i, e);
-      this._items = r.items, this._nextPagePath = r.nextPagePath, r.username && (this._username = r.username);
-    } catch (r) {
-      r instanceof g ? (f(this.provider), this._authenticated = !1) : this._error = r instanceof Error ? r.message : "Failed to load files";
+      const i = await C(this.companionUrl, this.provider, r, e);
+      this._items = i.items, this._nextPagePath = i.nextPagePath, i.username && (this._username = i.username);
+    } catch (i) {
+      i instanceof v ? (u(this.provider), this._authenticated = !1) : this._error = i instanceof Error ? i.message : "Failed to load files";
     } finally {
       this._loading = !1;
     }
@@ -139,8 +143,8 @@ const b = class b extends _ {
     if (e < 0)
       this._breadcrumbs = [], this._loadFolder("");
     else {
-      const i = this._breadcrumbs[e];
-      this._breadcrumbs = this._breadcrumbs.slice(0, e + 1), this._loadFolder(i.path);
+      const r = this._breadcrumbs[e];
+      this._breadcrumbs = this._breadcrumbs.slice(0, e + 1), this._loadFolder(r.path);
     }
   }
   // --- Load more ---
@@ -149,70 +153,87 @@ const b = class b extends _ {
     if (!(!e || !this._nextPagePath)) {
       this._loadingMore = !0;
       try {
-        const i = await I(this.companionUrl, e, this._nextPagePath);
-        this._items = [...this._items, ...i.items], this._nextPagePath = i.nextPagePath;
-      } catch (i) {
-        i instanceof g && (f(this.provider), this._authenticated = !1);
+        const r = await I(this.companionUrl, e, this._nextPagePath);
+        this._items = [...this._items, ...r.items], this._nextPagePath = r.nextPagePath;
+      } catch (r) {
+        r instanceof v && (u(this.provider), this._authenticated = !1);
       } finally {
         this._loadingMore = !1;
       }
     }
   }
-  _toggleSelect(e, i) {
-    const r = this._items.filter((s) => !s.isFolder), t = r.findIndex((s) => s.id === e.id);
-    if (i != null && i.shiftKey && this._lastClickedIndex !== null && t !== -1) {
-      const s = Math.min(this._lastClickedIndex, t), c = Math.max(this._lastClickedIndex, t), m = new Set(this._selectedIds);
-      for (let u = s; u <= c; u++)
-        m.add(r[u].id);
+  _toggleSelect(e, r) {
+    const i = this._items.filter((o) => !o.isFolder), t = i.findIndex((o) => o.id === e.id);
+    if (r != null && r.shiftKey && this._lastClickedIndex !== null && t !== -1) {
+      const o = Math.min(this._lastClickedIndex, t), c = Math.max(this._lastClickedIndex, t), m = new Set(this._selectedIds);
+      for (let f = o; f <= c; f++)
+        m.add(i[f].id);
       this._selectedIds = m;
     } else {
-      const s = new Set(this._selectedIds);
-      s.has(e.id) ? s.delete(e.id) : s.add(e.id), this._selectedIds = s;
+      const o = new Set(this._selectedIds);
+      o.has(e.id) ? o.delete(e.id) : o.add(e.id), this._selectedIds = o;
     }
     t !== -1 && (this._lastClickedIndex = t);
   }
   // --- Render ---
   render() {
-    return n`
+    return s`
       ${this._renderHeader()}
       ${this._authenticated ? this._loading ? this._renderLoading() : this._error ? this._renderError() : this._renderBrowser() : this._renderAuthView()}
     `;
   }
   _renderHeader() {
-    return n`
+    const e = this._providerDef;
+    return s`
       <div class="browser-header">
-        <button class="back-btn" @click=${this._onClose}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+        <button class="back-btn" @click=${this._onClose} title="Back">
+          <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>
-        <span class="browser-title">${this._providerLabel}</span>
-        ${this._authenticated ? n`
-              ${this._username ? n`<span class="username">${this._username}</span>` : h}
-              <button class="logout-btn" @click=${this._handleLogout}>Log out</button>
-            ` : h}
+        <div class="header-brand">
+          ${e != null && e.brandHtml ? s`<div class="header-logo">${b(e.brandHtml)}</div>` : h}
+
+          <div class="header-title-group">
+            <span class="browser-title">${this._providerLabel}</span>
+            ${this._authenticated && this._username ? s`<span class="header-username">${this._username}</span>` : h}
+          </div>
+        </div>
+        ${this._authenticated ? s`<button class="logout-btn" @click=${this._handleLogout}>Sign out</button>` : h}
       </div>
     `;
   }
   _renderAuthView() {
-    return n`
+    const e = this._providerDef;
+    return s`
       <div class="auth-view">
-        <div class="auth-icon">
-          <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 015 5v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1V7a5 5 0 015-5zm3 8H9v-3a3 3 0 016 0v3z" fill="currentColor"/></svg>
+        <div class="auth-glow"></div>
+        <div class="auth-logo-wrap">
+          <div class="auth-ring">
+            <div class="auth-logo">
+              ${e != null && e.brandHtml ? s`<span style="display:flex;align-items:center;justify-content:center;transform:scale(2.2)">${b(e.brandHtml)}</span>` : s`<svg viewBox="0 0 24 24" fill="none" stroke="var(--sfx-up-primary, #2563eb)" stroke-width="1.5"><path d="M12 2a5 5 0 015 5v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1V7a5 5 0 015-5zm3 8H9v-3a3 3 0 016 0v3z" fill="var(--sfx-up-primary, #2563eb)"/></svg>`}
+            </div>
+          </div>
         </div>
-        <div class="auth-text">
-          Connect to ${this._providerLabel} to browse and select files
+        <div class="auth-content">
+          <div class="auth-title">Connect ${this._providerLabel}</div>
+          <div class="auth-text">
+            Sign in to browse and select files from your ${this._providerLabel} account
+          </div>
         </div>
         <button class="connect-btn" @click=${this._handleConnect}>
-          Connect to ${this._providerLabel}
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3"/>
+          </svg>
+          Sign in to ${this._providerLabel}
         </button>
       </div>
     `;
   }
   _renderLoading() {
-    return n`
+    return s`
       <div class="skeleton-list">
-        ${[1, 2, 3, 4, 5, 6].map(() => n`
+        ${[1, 2, 3, 4, 5, 6, 7].map(() => s`
           <div class="skeleton-row">
             <div class="skeleton-check"></div>
             <div class="skeleton-thumb"></div>
@@ -226,30 +247,47 @@ const b = class b extends _ {
     `;
   }
   _renderError() {
-    return n`
+    return s`
       <div class="error-view">
+        <div class="error-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" y1="9" x2="9" y2="15" />
+            <line x1="9" y1="9" x2="15" y2="15" />
+          </svg>
+        </div>
         <div class="error-text">${this._error}</div>
         <button class="retry-btn" @click=${() => {
       const e = this._breadcrumbs[this._breadcrumbs.length - 1];
       this._loadFolder((e == null ? void 0 : e.path) ?? "");
     }}>
-          Retry
+          Try again
         </button>
       </div>
     `;
   }
   _renderBrowser() {
-    const e = this._items.filter((t) => !t.isFolder), i = this._items.filter((t) => t.isFolder), r = this._selectedIds.size;
-    return n`
+    const e = this._items.filter((t) => !t.isFolder), r = this._items.filter((t) => t.isFolder), i = this._selectedIds.size;
+    return s`
       ${this._renderBreadcrumbs()}
 
       <div class="file-list">
-        ${i.length === 0 && e.length === 0 ? n`<div class="empty-state"><div class="empty-text">This folder is empty</div></div>` : h}
+        ${r.length === 0 && e.length === 0 ? s`
+              <div class="empty-state">
+                <div class="empty-icon">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+                    <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
+                    <line x1="9" y1="14" x2="15" y2="14" />
+                  </svg>
+                </div>
+                <div class="empty-text">This folder is empty</div>
+              </div>
+            ` : h}
 
-        ${i.map(
-      (t) => n`
+        ${r.map(
+      (t) => s`
             <div class="file-item" @click=${() => this._onFolderClick(t)}>
-              <div class="file-thumb">
+              <div class="file-thumb folder-thumb">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                   <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
                 </svg>
@@ -257,42 +295,47 @@ const b = class b extends _ {
               <div class="file-info">
                 <div class="file-name">${t.name}</div>
               </div>
+              <svg class="folder-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                <polyline points="9 18 15 12 9 6" />
+              </svg>
             </div>
           `
     )}
 
         ${e.map(
-      (t) => n`
+      (t) => s`
             <div
               class="file-item ${this._selectedIds.has(t.id) ? "selected" : ""}"
-              @click=${(s) => this._toggleSelect(t, s)}
+              @click=${(o) => this._toggleSelect(t, o)}
             >
               <input
                 type="checkbox"
                 .checked=${this._selectedIds.has(t.id)}
-                @click=${(s) => s.stopPropagation()}
+                @click=${(o) => o.stopPropagation()}
                 @change=${() => this._toggleSelect(t)}
               />
               <div class="file-thumb">
-                ${t.thumbnail ? n`<img src=${t.thumbnail} alt="" loading="lazy" referrerpolicy="no-referrer"
-                      @error=${(s) => {
-        const c = s.target;
+                ${t.thumbnail ? s`<img src=${t.thumbnail} alt="" loading="lazy" referrerpolicy="no-referrer"
+                      @error=${(o) => {
+        const c = o.target;
         c.style.display = "none", c.parentElement.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
       }}
-                    />` : n`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                    />` : s`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                       <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
                       <polyline points="14 2 14 8 20 8" />
                     </svg>`}
               </div>
               <div class="file-info">
                 <div class="file-name">${t.name}</div>
-                ${t.size ? n`<div class="file-size">${A(t.size)}</div>` : h}
+                <div class="file-meta">
+                  ${t.size ? s`<span class="file-size">${A(t.size)}</span>` : h}
+                </div>
               </div>
             </div>
           `
     )}
 
-        ${this._nextPagePath ? n`
+        ${this._nextPagePath ? s`
               <button
                 class="load-more-btn"
                 ?disabled=${this._loadingMore}
@@ -303,40 +346,47 @@ const b = class b extends _ {
             ` : h}
       </div>
 
-      ${e.length > 0 ? n`
+      ${e.length > 0 || i > 0 ? s`
             <div class="browser-footer">
-              <button class="select-all-btn" @click=${this._toggleSelectAll}>
-                ${e.every((t) => this._selectedIds.has(t.id)) ? "Deselect all" : "Select all"}
-              </button>
-              <span class="selected-count">
-                ${r > 0 ? `${r} file${r === 1 ? "" : "s"} selected` : "Select files to add"}
-              </span>
+              <div class="footer-left">
+                <button class="select-all-btn" @click=${this._toggleSelectAll}>
+                  ${e.every((t) => this._selectedIds.has(t.id)) ? "Deselect all" : "Select all"}
+                </button>
+                <span class="selected-count ${i > 0 ? "has-selection" : ""}">
+                  ${i > 0 ? `${i} file${i === 1 ? "" : "s"} selected` : "No files selected"}
+                </span>
+              </div>
               <button
                 class="add-btn"
-                ?disabled=${r === 0}
+                ?disabled=${i === 0}
                 @click=${this._onAddSelected}
               >
-                Add ${r > 0 ? r : ""} file${r === 1 ? "" : "s"}
+                Add${i > 0 ? ` ${i}` : ""} file${i === 1 ? "" : "s"}
               </button>
             </div>
           ` : h}
     `;
   }
   _renderBreadcrumbs() {
-    return this._breadcrumbs.length === 0 ? h : n`
+    return this._breadcrumbs.length === 0 ? h : s`
       <div class="breadcrumbs">
-        <button class="crumb" @click=${() => this._onBreadcrumbClick(-1)}>Root</button>
+        <button class="crumb" @click=${() => this._onBreadcrumbClick(-1)}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="width:12px;height:12px;vertical-align:middle;margin-right:2px">
+            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
+          </svg>
+          Root
+        </button>
         ${this._breadcrumbs.map(
-      (e, i) => n`
-            <span class="crumb-sep">/</span>
-            ${i < this._breadcrumbs.length - 1 ? n`<button class="crumb" @click=${() => this._onBreadcrumbClick(i)}>${e.name}</button>` : n`<span class="crumb-current">${e.name}</span>`}
+      (e, r) => s`
+            <span class="crumb-sep">&rsaquo;</span>
+            ${r < this._breadcrumbs.length - 1 ? s`<button class="crumb" @click=${() => this._onBreadcrumbClick(r)}>${e.name}</button>` : s`<span class="crumb-current">${e.name}</span>`}
           `
     )}
       </div>
     `;
   }
 };
-b.styles = k`
+g.styles = w`
     :host {
       display: flex;
       flex-direction: column;
@@ -344,13 +394,14 @@ b.styles = k`
       min-height: 300px;
       font-family: var(--sfx-up-font, 'Inter', system-ui, -apple-system, sans-serif);
       color: var(--sfx-up-text, #1e293b);
+      background: var(--sfx-up-bg, #fff);
     }
 
     /* --- Header --- */
     .browser-header {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 12px;
       padding: 14px 20px;
       border-bottom: 1px solid var(--sfx-up-border-light, #f1f5f9);
       flex-shrink: 0;
@@ -360,55 +411,89 @@ b.styles = k`
       width: 32px;
       height: 32px;
       border: none;
-      background: none;
+      background: var(--sfx-up-border-light, #f1f5f9);
       border-radius: 8px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--sfx-up-text-muted, #94a3b8);
+      color: var(--sfx-up-text-secondary, #475569);
       transition: all 0.15s;
       flex-shrink: 0;
     }
 
     .back-btn:hover {
-      background: #f1f5f9;
+      background: var(--sfx-up-border, #e8edf5);
       color: var(--sfx-up-text, #1e293b);
     }
 
     .back-btn svg {
-      width: 18px;
-      height: 18px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .header-brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .header-logo {
+      width: 28px;
+      height: 28px;
+      border-radius: 7px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+
+    .header-logo svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .header-title-group {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
     }
 
     .browser-title {
       font-size: 14px;
       font-weight: 600;
-      flex: 1;
+      line-height: 1.2;
+    }
+
+    .header-username {
+      font-size: 11px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .logout-btn {
-      border: none;
+      border: 1px solid var(--sfx-up-border, #e8edf5);
       background: none;
       font-family: inherit;
       font-size: 12px;
+      font-weight: 500;
       color: var(--sfx-up-text-muted, #94a3b8);
       cursor: pointer;
-      padding: 4px 8px;
+      padding: 5px 10px;
       border-radius: 6px;
       transition: all 0.15s;
       flex-shrink: 0;
     }
 
     .logout-btn:hover {
-      background: #fef2f2;
+      background: var(--destructive-10, #fef2f2);
       color: var(--sfx-up-error, #dc2626);
-    }
-
-    .username {
-      font-size: 12px;
-      color: var(--sfx-up-text-muted, #94a3b8);
-      flex-shrink: 0;
+      border-color: #fecaca;
     }
 
     /* --- Auth view --- */
@@ -418,65 +503,125 @@ b.styles = k`
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 16px;
-      padding: 40px 24px;
+      gap: 20px;
+      padding: 40px 32px;
       text-align: center;
+      position: relative;
+      overflow: hidden;
     }
 
-    .auth-icon {
-      width: 56px;
-      height: 56px;
-      border-radius: 16px;
-      background: var(--sfx-up-primary-bg, #eff6ff);
-      color: var(--sfx-up-primary, #2563eb);
+    .auth-glow {
+      position: absolute;
+      width: 280px;
+      height: 280px;
+      border-radius: 50%;
+      background: radial-gradient(circle, var(--sfx-up-primary-bg, #eff6ff) 0%, transparent 70%);
+      opacity: 0.7;
+      pointer-events: none;
+    }
+
+    .auth-logo-wrap {
+      position: relative;
+      z-index: 1;
+    }
+
+    .auth-ring {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      border: 1.5px dashed var(--sfx-up-border, #e8edf5);
       display: flex;
       align-items: center;
       justify-content: center;
+      animation: slowSpin 20s linear infinite;
     }
 
-    .auth-icon svg {
-      width: 28px;
-      height: 28px;
-      fill: currentColor;
+    .auth-logo {
+      width: 64px;
+      height: 64px;
+      border-radius: 18px;
+      background: #fff;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: slowSpin 20s linear infinite reverse;
+    }
+
+    .auth-logo svg {
+      width: 34px;
+      height: 34px;
+    }
+
+    .auth-content {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .auth-title {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--sfx-up-text, #1e293b);
     }
 
     .auth-text {
-      font-size: 14px;
-      color: var(--sfx-up-text-secondary, #475569);
-      max-width: 280px;
+      font-size: 13px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      max-width: 260px;
+      line-height: 1.5;
     }
 
     .connect-btn {
-      height: 40px;
-      padding: 0 24px;
+      position: relative;
+      z-index: 1;
+      height: 42px;
+      padding: 0 28px;
       border: none;
-      border-radius: 10px;
+      border-radius: 11px;
       background: linear-gradient(135deg, var(--sfx-up-primary, #2563eb), var(--sfx-up-primary-mid, #3b82f6));
-      color: #fff;
+      color: var(--primary-foreground, #fff);
       font-family: inherit;
       font-size: 14px;
       font-weight: 600;
       cursor: pointer;
-      transition: all 0.18s;
-      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
+      transition: all 0.2s;
+      box-shadow: 0 4px 16px var(--sfx-up-primary-glow, rgba(37, 99, 235, 0.25));
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 4px;
     }
 
     .connect-btn:hover {
       transform: translateY(-1px);
-      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38);
+      box-shadow: 0 6px 24px var(--sfx-up-primary-glow, rgba(37, 99, 235, 0.35));
+    }
+
+    .connect-btn:active {
+      transform: translateY(0);
+    }
+
+    .connect-btn svg {
+      width: 16px;
+      height: 16px;
     }
 
     /* --- Breadcrumbs --- */
     .breadcrumbs {
       display: flex;
       align-items: center;
-      gap: 4px;
-      padding: 10px 20px;
+      gap: 2px;
+      padding: 8px 20px;
       font-size: 12px;
       color: var(--sfx-up-text-muted, #94a3b8);
       border-bottom: 1px solid var(--sfx-up-border-light, #f1f5f9);
       flex-shrink: 0;
       flex-wrap: wrap;
+      background: var(--sfx-up-border-light, #fafbfd);
     }
 
     .crumb {
@@ -486,9 +631,10 @@ b.styles = k`
       background: none;
       font-family: inherit;
       font-size: 12px;
-      padding: 2px 4px;
-      border-radius: 4px;
+      padding: 3px 6px;
+      border-radius: 5px;
       transition: background 0.15s;
+      font-weight: 500;
     }
 
     .crumb:hover {
@@ -497,18 +643,21 @@ b.styles = k`
 
     .crumb-sep {
       color: var(--sfx-up-text-muted, #94a3b8);
+      font-size: 10px;
     }
 
     .crumb-current {
       color: var(--sfx-up-text, #1e293b);
-      font-weight: 500;
+      font-weight: 600;
+      padding: 3px 6px;
+      font-size: 12px;
     }
 
     /* --- File list --- */
     .file-list {
       flex: 1;
       overflow-y: auto;
-      padding: 8px 12px;
+      padding: 6px 8px;
       min-height: 0;
     }
 
@@ -516,19 +665,21 @@ b.styles = k`
       display: flex;
       align-items: center;
       gap: 12px;
-      padding: 10px 12px;
+      padding: 8px 12px;
       border-radius: 10px;
       cursor: pointer;
-      transition: background 0.15s;
+      transition: all 0.15s;
       user-select: none;
+      border: 1.5px solid transparent;
     }
 
     .file-item:hover {
-      background: #f8fafc;
+      background: var(--sfx-up-border-light, #f8fafc);
     }
 
     .file-item.selected {
       background: var(--sfx-up-primary-bg, #eff6ff);
+      border-color: var(--sfx-up-primary-glow, rgba(37, 99, 235, 0.15));
     }
 
     .file-item input[type='checkbox'] {
@@ -540,10 +691,10 @@ b.styles = k`
     }
 
     .file-thumb {
-      width: 36px;
-      height: 36px;
+      width: 38px;
+      height: 38px;
       border-radius: 8px;
-      background: #f1f5f9;
+      background: var(--sfx-up-border-light, #f1f5f9);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -563,6 +714,14 @@ b.styles = k`
       color: var(--sfx-up-text-muted, #94a3b8);
     }
 
+    .file-thumb.folder-thumb {
+      background: linear-gradient(135deg, #fef3c7, #fde68a);
+    }
+
+    .file-thumb.folder-thumb svg {
+      color: #d97706;
+    }
+
     .file-info {
       flex: 1;
       min-width: 0;
@@ -576,68 +735,104 @@ b.styles = k`
       text-overflow: ellipsis;
     }
 
+    .file-meta {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
     .file-size {
       font-size: 11px;
       color: var(--sfx-up-text-muted, #94a3b8);
     }
 
+    .folder-arrow {
+      width: 16px;
+      height: 16px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      flex-shrink: 0;
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    .file-item:hover .folder-arrow {
+      opacity: 1;
+    }
+
     /* --- Footer --- */
     .browser-footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 12px 20px;
+      padding: 12px 16px;
       border-top: 1px solid var(--sfx-up-border-light, #f1f5f9);
       flex-shrink: 0;
+      gap: 12px;
+      background: var(--sfx-up-bg, #fff);
+    }
+
+    .footer-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
 
     .selected-count {
-      font-size: 13px;
-      color: var(--sfx-up-text-secondary, #475569);
+      font-size: 12px;
+      color: var(--sfx-up-text-muted, #94a3b8);
       font-weight: 500;
     }
 
+    .selected-count.has-selection {
+      color: var(--sfx-up-primary, #2563eb);
+    }
+
     .add-btn {
       height: 36px;
       padding: 0 20px;
       border: none;
       border-radius: 9px;
       background: linear-gradient(135deg, var(--sfx-up-primary, #2563eb), var(--sfx-up-primary-mid, #3b82f6));
-      color: #fff;
+      color: var(--primary-foreground, #fff);
       font-family: inherit;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.18s;
-      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
+      box-shadow: 0 2px 10px var(--sfx-up-primary-glow, rgba(37, 99, 235, 0.28));
+      display: flex;
+      align-items: center;
+      gap: 6px;
     }
 
     .add-btn:hover:not(:disabled) {
       transform: translateY(-1px);
-      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38);
+      box-shadow: 0 4px 16px var(--sfx-up-primary-glow, rgba(37, 99, 235, 0.38));
     }
 
     .add-btn:disabled {
-      opacity: 0.5;
+      opacity: 0.4;
       cursor: not-allowed;
     }
 
     .select-all-btn {
-      border: none;
+      border: 1px solid var(--sfx-up-border, #e8edf5);
       background: none;
       font-family: inherit;
       font-size: 12px;
-      font-weight: 600;
-      color: var(--sfx-up-primary, #2563eb);
+      font-weight: 500;
+      color: var(--sfx-up-text-secondary, #475569);
       cursor: pointer;
-      padding: 4px 8px;
+      padding: 5px 10px;
       border-radius: 6px;
-      transition: background 0.15s;
+      transition: all 0.15s;
       flex-shrink: 0;
     }
 
     .select-all-btn:hover {
       background: var(--sfx-up-primary-bg, #eff6ff);
+      color: var(--sfx-up-primary, #2563eb);
+      border-color: var(--sfx-up-primary-glow, rgba(37, 99, 235, 0.2));
     }
 
     /* --- Loading / Error --- */
@@ -661,11 +856,29 @@ b.styles = k`
       animation: spin 0.7s linear infinite;
     }
 
-    .error-text {
-      font-size: 14px;
+    .error-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 14px;
+      background: #fef2f2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .error-icon svg {
+      width: 24px;
+      height: 24px;
       color: var(--sfx-up-error, #dc2626);
     }
 
+    .error-text {
+      font-size: 13px;
+      color: var(--sfx-up-text-secondary, #475569);
+      max-width: 260px;
+      line-height: 1.4;
+    }
+
     .retry-btn {
       height: 34px;
       padding: 0 16px;
@@ -681,8 +894,8 @@ b.styles = k`
     }
 
     .retry-btn:hover {
-      background: #f8faff;
-      border-color: #d1dff0;
+      background: var(--sfx-up-border-light, #f8faff);
+      border-color: var(--sfx-up-border, #d1dff0);
     }
 
     .load-more-btn {
@@ -704,15 +917,31 @@ b.styles = k`
       background: var(--sfx-up-primary-bg, #eff6ff);
     }
 
+    .empty-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 14px;
+      background: var(--sfx-up-border-light, #f1f5f9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .empty-icon svg {
+      width: 24px;
+      height: 24px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+    }
+
     .empty-text {
-      font-size: 14px;
+      font-size: 13px;
       color: var(--sfx-up-text-muted, #94a3b8);
     }
 
     /* --- Skeleton loading --- */
     .skeleton-list {
       flex: 1;
-      padding: 8px 12px;
+      padding: 6px 8px;
       min-height: 0;
     }
 
@@ -720,21 +949,21 @@ b.styles = k`
       display: flex;
       align-items: center;
       gap: 12px;
-      padding: 10px 12px;
+      padding: 8px 12px;
     }
 
     .skeleton-check {
       width: 16px;
       height: 16px;
       border-radius: 4px;
-      background: #f1f5f9;
+      background: var(--sfx-up-border-light, #f1f5f9);
     }
 
     .skeleton-thumb {
-      width: 36px;
-      height: 36px;
+      width: 38px;
+      height: 38px;
       border-radius: 8px;
-      background: #f1f5f9;
+      background: var(--sfx-up-border-light, #f1f5f9);
       flex-shrink: 0;
       animation: shimmer 1.5s ease-in-out infinite;
     }
@@ -749,7 +978,7 @@ b.styles = k`
     .skeleton-name {
       height: 14px;
       border-radius: 6px;
-      background: #f1f5f9;
+      background: var(--sfx-up-border-light, #f1f5f9);
       animation: shimmer 1.5s ease-in-out infinite;
     }
 
@@ -757,7 +986,7 @@ b.styles = k`
       height: 11px;
       width: 60px;
       border-radius: 6px;
-      background: #f1f5f9;
+      background: var(--sfx-up-border-light, #f1f5f9);
       animation: shimmer 1.5s ease-in-out infinite;
     }
 
@@ -773,6 +1002,8 @@ b.styles = k`
     .skeleton-row:nth-child(5) .skeleton-thumb { animation-delay: 0.4s; }
     .skeleton-row:nth-child(6) .skeleton-name { width: 50%; animation-delay: 0.5s; }
     .skeleton-row:nth-child(6) .skeleton-thumb { animation-delay: 0.5s; }
+    .skeleton-row:nth-child(7) .skeleton-name { width: 70%; animation-delay: 0.6s; }
+    .skeleton-row:nth-child(7) .skeleton-thumb { animation-delay: 0.6s; }
 
     @keyframes shimmer {
       0%, 100% { opacity: 1; }
@@ -783,17 +1014,31 @@ b.styles = k`
       to { transform: rotate(360deg); }
     }
 
+    @keyframes slowSpin {
+      to { transform: rotate(360deg); }
+    }
+
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .auth-view { animation: fadeUp 0.35s ease both; }
+
     @media (prefers-reduced-motion: reduce) {
       .spinner { animation: none; }
       .skeleton-thumb, .skeleton-name, .skeleton-size { animation: none; }
+      .auth-ring { animation: none; }
+      .auth-logo { animation: none; }
+      .auth-view { animation: none; }
     }
   `;
-let a = b;
+let a = g;
 l([
-  v({ type: String })
+  k({ type: String })
 ], a.prototype, "provider");
 l([
-  v({ type: String })
+  k({ type: String })
 ], a.prototype, "companionUrl");
 l([
   d()
@@ -822,10 +1067,10 @@ l([
 l([
   d()
 ], a.prototype, "_username");
-function A(o) {
-  if (o === 0) return "0 B";
-  const e = ["B", "KB", "MB", "GB"], i = Math.min(Math.floor(Math.log(o) / Math.log(1024)), e.length - 1);
-  return `${(o / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${e[i]}`;
+function A(n) {
+  if (n === 0) return "0 B";
+  const e = ["B", "KB", "MB", "GB"], r = Math.min(Math.floor(Math.log(n) / Math.log(1024)), e.length - 1);
+  return `${(n / Math.pow(1024, r)).toFixed(r === 0 ? 0 : 1)} ${e[r]}`;
 }
 export {
   a as SfxProviderBrowser