@scaleflex/uploader 0.1.0

package/dist/provider-browser-C-S_MPrC.js

@@ -0,0 +1,832 @@
+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";
+const x = "sfx-uploader-token:";
+function p(o) {
+  try {
+    return localStorage.getItem(`${x}${o}`);
+  } catch {
+    return null;
+  }
+}
+function C(o, e) {
+  try {
+    localStorage.setItem(`${x}${o}`, e);
+  } catch {
+  }
+}
+function f(o) {
+  try {
+    localStorage.removeItem(`${x}${o}`);
+  } 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;
+    t != null && t.token && e(t.token);
+  };
+  return window.addEventListener("message", i), () => window.removeEventListener("message", i);
+}
+function L(o) {
+  try {
+    return JSON.parse(o);
+  } 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;
+};
+const b = class b extends _ {
+  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("");
+      });
+    }, 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));
+    }, this._onAddSelected = () => {
+      const e = p(this.provider);
+      if (!e) return;
+      const r = this._items.filter(
+        (t) => !t.isFolder && this._selectedIds.has(t.id)
+      ).map((t) => ({
+        companionUrl: this.companionUrl,
+        provider: this.provider,
+        token: e,
+        requestPath: t.requestPath,
+        fileId: t.id,
+        name: t.name,
+        mimeType: t.mimeType,
+        size: t.size,
+        thumbnail: t.thumbnail
+      }));
+      this.dispatchEvent(
+        new CustomEvent("connector-files-selected", {
+          detail: { files: r },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._onClose = () => {
+      this.dispatchEvent(
+        new CustomEvent("connector-close", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this._handleLogout = async () => {
+      const e = p(this.provider);
+      if (e) {
+        try {
+          await w(this.companionUrl, this.provider, e);
+        } catch {
+        }
+        f(this.provider);
+      }
+      this._reset();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._checkAuth();
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._cleanupAuthListener) == null || e.call(this), this._cleanupAuthListener = null;
+  }
+  updated(e) {
+    e.has("provider") && (this._reset(), this._checkAuth());
+  }
+  _reset() {
+    this._authenticated = !1, this._loading = !1, this._items = [], this._selectedIds = /* @__PURE__ */ new Set(), this._breadcrumbs = [], this._nextPagePath = null, this._error = null, this._username = null;
+  }
+  _checkAuth() {
+    p(this.provider) && (this._authenticated = !0, this._loadFolder(""));
+  }
+  get _providerLabel() {
+    var i;
+    return ((i = $([this.provider])[0]) == null ? void 0 : i.label) ?? this.provider;
+  }
+  // --- Folder navigation ---
+  async _loadFolder(e) {
+    const i = p(this.provider);
+    if (!i) {
+      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";
+    } finally {
+      this._loading = !1;
+    }
+  }
+  _onFolderClick(e) {
+    this._breadcrumbs = [...this._breadcrumbs, { name: e.name, path: e.requestPath }], this._loadFolder(e.requestPath);
+  }
+  _onBreadcrumbClick(e) {
+    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);
+    }
+  }
+  // --- Load more ---
+  async _onLoadMore() {
+    const e = p(this.provider);
+    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);
+      } 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);
+      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;
+    }
+    t !== -1 && (this._lastClickedIndex = t);
+  }
+  // --- Render ---
+  render() {
+    return n`
+      ${this._renderHeader()}
+      ${this._authenticated ? this._loading ? this._renderLoading() : this._error ? this._renderError() : this._renderBrowser() : this._renderAuthView()}
+    `;
+  }
+  _renderHeader() {
+    return n`
+      <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">
+            <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>
+    `;
+  }
+  _renderAuthView() {
+    return n`
+      <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>
+        <div class="auth-text">
+          Connect to ${this._providerLabel} to browse and select files
+        </div>
+        <button class="connect-btn" @click=${this._handleConnect}>
+          Connect to ${this._providerLabel}
+        </button>
+      </div>
+    `;
+  }
+  _renderLoading() {
+    return n`
+      <div class="skeleton-list">
+        ${[1, 2, 3, 4, 5, 6].map(() => n`
+          <div class="skeleton-row">
+            <div class="skeleton-check"></div>
+            <div class="skeleton-thumb"></div>
+            <div class="skeleton-text">
+              <div class="skeleton-name"></div>
+              <div class="skeleton-size"></div>
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  _renderError() {
+    return n`
+      <div class="error-view">
+        <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
+        </button>
+      </div>
+    `;
+  }
+  _renderBrowser() {
+    const e = this._items.filter((t) => !t.isFolder), i = this._items.filter((t) => t.isFolder), r = this._selectedIds.size;
+    return n`
+      ${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}
+
+        ${i.map(
+      (t) => n`
+            <div class="file-item" @click=${() => this._onFolderClick(t)}>
+              <div class="file-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>
+              </div>
+              <div class="file-info">
+                <div class="file-name">${t.name}</div>
+              </div>
+            </div>
+          `
+    )}
+
+        ${e.map(
+      (t) => n`
+            <div
+              class="file-item ${this._selectedIds.has(t.id) ? "selected" : ""}"
+              @click=${(s) => this._toggleSelect(t, s)}
+            >
+              <input
+                type="checkbox"
+                .checked=${this._selectedIds.has(t.id)}
+                @click=${(s) => s.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;
+        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">
+                      <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>
+            </div>
+          `
+    )}
+
+        ${this._nextPagePath ? n`
+              <button
+                class="load-more-btn"
+                ?disabled=${this._loadingMore}
+                @click=${this._onLoadMore}
+              >
+                ${this._loadingMore ? "Loading..." : "Load more"}
+              </button>
+            ` : h}
+      </div>
+
+      ${e.length > 0 ? n`
+            <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>
+              <button
+                class="add-btn"
+                ?disabled=${r === 0}
+                @click=${this._onAddSelected}
+              >
+                Add ${r > 0 ? r : ""} file${r === 1 ? "" : "s"}
+              </button>
+            </div>
+          ` : h}
+    `;
+  }
+  _renderBreadcrumbs() {
+    return this._breadcrumbs.length === 0 ? h : n`
+      <div class="breadcrumbs">
+        <button class="crumb" @click=${() => this._onBreadcrumbClick(-1)}>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>`}
+          `
+    )}
+      </div>
+    `;
+  }
+};
+b.styles = k`
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: 300px;
+      font-family: var(--sfx-up-font, 'Inter', system-ui, -apple-system, sans-serif);
+      color: var(--sfx-up-text, #1e293b);
+    }
+
+    /* --- Header --- */
+    .browser-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--sfx-up-border-light, #f1f5f9);
+      flex-shrink: 0;
+    }
+
+    .back-btn {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: none;
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      transition: all 0.15s;
+      flex-shrink: 0;
+    }
+
+    .back-btn:hover {
+      background: #f1f5f9;
+      color: var(--sfx-up-text, #1e293b);
+    }
+
+    .back-btn svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .browser-title {
+      font-size: 14px;
+      font-weight: 600;
+      flex: 1;
+    }
+
+    .logout-btn {
+      border: none;
+      background: none;
+      font-family: inherit;
+      font-size: 12px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 6px;
+      transition: all 0.15s;
+      flex-shrink: 0;
+    }
+
+    .logout-btn:hover {
+      background: #fef2f2;
+      color: var(--sfx-up-error, #dc2626);
+    }
+
+    .username {
+      font-size: 12px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+      flex-shrink: 0;
+    }
+
+    /* --- Auth view --- */
+    .auth-view {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      padding: 40px 24px;
+      text-align: center;
+    }
+
+    .auth-icon {
+      width: 56px;
+      height: 56px;
+      border-radius: 16px;
+      background: var(--sfx-up-primary-bg, #eff6ff);
+      color: var(--sfx-up-primary, #2563eb);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .auth-icon svg {
+      width: 28px;
+      height: 28px;
+      fill: currentColor;
+    }
+
+    .auth-text {
+      font-size: 14px;
+      color: var(--sfx-up-text-secondary, #475569);
+      max-width: 280px;
+    }
+
+    .connect-btn {
+      height: 40px;
+      padding: 0 24px;
+      border: none;
+      border-radius: 10px;
+      background: linear-gradient(135deg, var(--sfx-up-primary, #2563eb), var(--sfx-up-primary-mid, #3b82f6));
+      color: #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);
+    }
+
+    .connect-btn:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38);
+    }
+
+    /* --- Breadcrumbs --- */
+    .breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 10px 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;
+    }
+
+    .crumb {
+      cursor: pointer;
+      color: var(--sfx-up-primary, #2563eb);
+      border: none;
+      background: none;
+      font-family: inherit;
+      font-size: 12px;
+      padding: 2px 4px;
+      border-radius: 4px;
+      transition: background 0.15s;
+    }
+
+    .crumb:hover {
+      background: var(--sfx-up-primary-bg, #eff6ff);
+    }
+
+    .crumb-sep {
+      color: var(--sfx-up-text-muted, #94a3b8);
+    }
+
+    .crumb-current {
+      color: var(--sfx-up-text, #1e293b);
+      font-weight: 500;
+    }
+
+    /* --- File list --- */
+    .file-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 12px;
+      min-height: 0;
+    }
+
+    .file-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 12px;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: background 0.15s;
+      user-select: none;
+    }
+
+    .file-item:hover {
+      background: #f8fafc;
+    }
+
+    .file-item.selected {
+      background: var(--sfx-up-primary-bg, #eff6ff);
+    }
+
+    .file-item input[type='checkbox'] {
+      width: 16px;
+      height: 16px;
+      accent-color: var(--sfx-up-primary, #2563eb);
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+
+    .file-thumb {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background: #f1f5f9;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+
+    .file-thumb img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .file-thumb svg {
+      width: 18px;
+      height: 18px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+    }
+
+    .file-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .file-name {
+      font-size: 13px;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .file-size {
+      font-size: 11px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+    }
+
+    /* --- Footer --- */
+    .browser-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 20px;
+      border-top: 1px solid var(--sfx-up-border-light, #f1f5f9);
+      flex-shrink: 0;
+    }
+
+    .selected-count {
+      font-size: 13px;
+      color: var(--sfx-up-text-secondary, #475569);
+      font-weight: 500;
+    }
+
+    .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;
+      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);
+    }
+
+    .add-btn:hover:not(:disabled) {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38);
+    }
+
+    .add-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .select-all-btn {
+      border: none;
+      background: none;
+      font-family: inherit;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--sfx-up-primary, #2563eb);
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 6px;
+      transition: background 0.15s;
+      flex-shrink: 0;
+    }
+
+    .select-all-btn:hover {
+      background: var(--sfx-up-primary-bg, #eff6ff);
+    }
+
+    /* --- Loading / Error --- */
+    .loading, .error-view, .empty-state {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      padding: 40px 24px;
+      text-align: center;
+    }
+
+    .spinner {
+      width: 28px;
+      height: 28px;
+      border: 3px solid var(--sfx-up-border, #e8edf5);
+      border-top-color: var(--sfx-up-primary, #2563eb);
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+    }
+
+    .error-text {
+      font-size: 14px;
+      color: var(--sfx-up-error, #dc2626);
+    }
+
+    .retry-btn {
+      height: 34px;
+      padding: 0 16px;
+      border: 1.5px solid var(--sfx-up-border, #e8edf5);
+      background: none;
+      border-radius: 8px;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      color: var(--sfx-up-text-secondary, #475569);
+      transition: all 0.15s;
+    }
+
+    .retry-btn:hover {
+      background: #f8faff;
+      border-color: #d1dff0;
+    }
+
+    .load-more-btn {
+      display: block;
+      margin: 8px auto;
+      padding: 8px 20px;
+      border: 1.5px solid var(--sfx-up-border, #e8edf5);
+      background: none;
+      border-radius: 8px;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      color: var(--sfx-up-primary, #2563eb);
+      transition: all 0.15s;
+    }
+
+    .load-more-btn:hover {
+      background: var(--sfx-up-primary-bg, #eff6ff);
+    }
+
+    .empty-text {
+      font-size: 14px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+    }
+
+    /* --- Skeleton loading --- */
+    .skeleton-list {
+      flex: 1;
+      padding: 8px 12px;
+      min-height: 0;
+    }
+
+    .skeleton-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 12px;
+    }
+
+    .skeleton-check {
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+      background: #f1f5f9;
+    }
+
+    .skeleton-thumb {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background: #f1f5f9;
+      flex-shrink: 0;
+      animation: shimmer 1.5s ease-in-out infinite;
+    }
+
+    .skeleton-text {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .skeleton-name {
+      height: 14px;
+      border-radius: 6px;
+      background: #f1f5f9;
+      animation: shimmer 1.5s ease-in-out infinite;
+    }
+
+    .skeleton-size {
+      height: 11px;
+      width: 60px;
+      border-radius: 6px;
+      background: #f1f5f9;
+      animation: shimmer 1.5s ease-in-out infinite;
+    }
+
+    .skeleton-row:nth-child(1) .skeleton-name { width: 65%; animation-delay: 0s; }
+    .skeleton-row:nth-child(1) .skeleton-thumb { animation-delay: 0s; }
+    .skeleton-row:nth-child(2) .skeleton-name { width: 45%; animation-delay: 0.1s; }
+    .skeleton-row:nth-child(2) .skeleton-thumb { animation-delay: 0.1s; }
+    .skeleton-row:nth-child(3) .skeleton-name { width: 75%; animation-delay: 0.2s; }
+    .skeleton-row:nth-child(3) .skeleton-thumb { animation-delay: 0.2s; }
+    .skeleton-row:nth-child(4) .skeleton-name { width: 55%; animation-delay: 0.3s; }
+    .skeleton-row:nth-child(4) .skeleton-thumb { animation-delay: 0.3s; }
+    .skeleton-row:nth-child(5) .skeleton-name { width: 60%; animation-delay: 0.4s; }
+    .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; }
+
+    @keyframes shimmer {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner { animation: none; }
+      .skeleton-thumb, .skeleton-name, .skeleton-size { animation: none; }
+    }
+  `;
+let a = b;
+l([
+  v({ type: String })
+], a.prototype, "provider");
+l([
+  v({ type: String })
+], a.prototype, "companionUrl");
+l([
+  d()
+], a.prototype, "_authenticated");
+l([
+  d()
+], a.prototype, "_loading");
+l([
+  d()
+], a.prototype, "_items");
+l([
+  d()
+], a.prototype, "_selectedIds");
+l([
+  d()
+], a.prototype, "_breadcrumbs");
+l([
+  d()
+], a.prototype, "_nextPagePath");
+l([
+  d()
+], a.prototype, "_error");
+l([
+  d()
+], a.prototype, "_loadingMore");
+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]}`;
+}
+export {
+  a as SfxProviderBrowser
+};