@scaleflex/uploader 0.1.0

package/dist/react.js

@@ -0,0 +1,125 @@
+import { forwardRef as ee, useRef as c, useLayoutEffect as T, useImperativeHandle as te, useEffect as A, createElement as re } from "react";
+typeof customElements < "u" && import("./define.js");
+const ce = ee(
+  function({
+    config: w,
+    open: j,
+    onFileAdded: H,
+    onFileRemoved: I,
+    onFileRejected: U,
+    onUploadStarted: b,
+    onUploadProgress: k,
+    onUploadComplete: q,
+    onUploadError: z,
+    onUploadRetry: B,
+    onAllComplete: D,
+    onTotalProgress: G,
+    onOpen: J,
+    onClose: K,
+    onCancel: M,
+    className: P,
+    style: C
+  }, R) {
+    const d = c(null), o = c(H), u = c(I), i = c(U), f = c(b), v = c(k), p = c(q), E = c(z), x = c(B), m = c(D), L = c(G), h = c(J), g = c(K), y = c(M);
+    return T(() => {
+      o.current = H, u.current = I, i.current = U, f.current = b, v.current = k, p.current = q, E.current = z, x.current = B, m.current = D, L.current = G, h.current = J, g.current = K, y.current = M;
+    }), te(R, () => ({
+      get element() {
+        return d.current;
+      },
+      open() {
+        var e;
+        (e = d.current) == null || e.open();
+      },
+      close() {
+        var e;
+        (e = d.current) == null || e.close();
+      },
+      upload() {
+        var e;
+        (e = d.current) == null || e.upload();
+      },
+      addFiles(e) {
+        var l;
+        (l = d.current) == null || l.addFiles(e);
+      },
+      resumeUpload(e) {
+        var l;
+        (l = d.current) == null || l.resumeUpload(e);
+      },
+      cancelUpload() {
+        var e;
+        (e = d.current) == null || e.cancelUpload();
+      }
+    })), T(() => {
+      const e = d.current;
+      e && (e.config = w);
+    }, [w]), A(() => {
+      const e = d.current;
+      e && (j === !0 ? e.open() : j === !1 && e.close());
+    }, [j]), A(() => {
+      const e = d.current;
+      if (!e) return;
+      const l = (t) => {
+        var r;
+        const { file: n } = t.detail;
+        (r = o.current) == null || r.call(o, n);
+      }, N = (t) => {
+        var r;
+        const { file: n } = t.detail;
+        (r = u.current) == null || r.call(u, n);
+      }, Q = (t) => {
+        var s;
+        const { file: n, reason: r } = t.detail;
+        (s = i.current) == null || s.call(i, n, r);
+      }, V = (t) => {
+        var r;
+        const { files: n } = t.detail;
+        (r = f.current) == null || r.call(f, n);
+      }, W = (t) => {
+        var a;
+        const { file: n, progress: r, speed: s } = t.detail;
+        (a = v.current) == null || a.call(v, n, r, s);
+      }, X = (t) => {
+        var s;
+        const { file: n, response: r } = t.detail;
+        (s = p.current) == null || s.call(p, n, r);
+      }, Y = (t) => {
+        var s;
+        const { file: n, error: r } = t.detail;
+        (s = E.current) == null || s.call(E, n, r);
+      }, Z = (t) => {
+        var s;
+        const { successful: n, failed: r } = t.detail;
+        (s = m.current) == null || s.call(m, n, r);
+      }, _ = (t) => {
+        var s;
+        const { file: n, attempt: r } = t.detail;
+        (s = x.current) == null || s.call(x, n, r);
+      }, $ = (t) => {
+        var a;
+        const { percentage: n, speed: r, eta: s } = t.detail;
+        (a = L.current) == null || a.call(L, n, r, s);
+      }, F = () => {
+        var t;
+        (t = h.current) == null || t.call(h);
+      }, O = () => {
+        var t;
+        (t = g.current) == null || t.call(g);
+      }, S = () => {
+        var t;
+        (t = y.current) == null || t.call(y);
+      };
+      return e.addEventListener("sfx-file-added", l), e.addEventListener("sfx-file-removed", N), e.addEventListener("sfx-file-rejected", Q), e.addEventListener("sfx-upload-started", V), e.addEventListener("sfx-upload-progress", W), e.addEventListener("sfx-upload-complete", X), e.addEventListener("sfx-upload-error", Y), e.addEventListener("sfx-upload-retry", _), e.addEventListener("sfx-all-complete", Z), e.addEventListener("sfx-total-progress", $), e.addEventListener("sfx-open", F), e.addEventListener("sfx-close", O), e.addEventListener("sfx-cancel", S), () => {
+        e.removeEventListener("sfx-file-added", l), e.removeEventListener("sfx-file-removed", N), e.removeEventListener("sfx-file-rejected", Q), e.removeEventListener("sfx-upload-started", V), e.removeEventListener("sfx-upload-progress", W), e.removeEventListener("sfx-upload-complete", X), e.removeEventListener("sfx-upload-error", Y), e.removeEventListener("sfx-upload-retry", _), e.removeEventListener("sfx-all-complete", Z), e.removeEventListener("sfx-total-progress", $), e.removeEventListener("sfx-open", F), e.removeEventListener("sfx-close", O), e.removeEventListener("sfx-cancel", S);
+      };
+    }, []), re("sfx-uploader", {
+      ref: d,
+      className: P,
+      style: C
+    });
+  }
+);
+export {
+  ce as Uploader
+};

package/dist/search-provider-browser-DxmLznEB.cjs

@@ -0,0 +1,390 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("lit"),n=require("lit/decorators.js"),l=require("./sfx-uploader-BVDK-9xi.cjs");var u=Object.defineProperty,a=(c,t,e,s)=>{for(var i=void 0,d=c.length-1,h;d>=0;d--)(h=c[d])&&(i=h(t,e,i)||i);return i&&u(t,e,i),i};const p=class p extends r.LitElement{constructor(){super(...arguments),this.provider="unsplash",this.companionUrl="",this._loading=!1,this._loadingMore=!1,this._items=[],this._selectedIds=new Set,this._error=null,this._searchQuery="",this._nextPageQuery=null,this._searched=!1,this._onResultsScroll=t=>{if(!this._nextPageQuery||this._loadingMore)return;const e=t.target;e.scrollHeight-e.scrollTop-e.clientHeight<200&&this._onLoadMore()},this._onSearchInput=t=>{this._searchQuery=t.target.value},this._onSearchKeydown=t=>{t.key==="Enter"&&this._doSearch()},this._onAddSelected=()=>{const e=this._items.filter(s=>this._selectedIds.has(s.id)).map(s=>({companionUrl:this.companionUrl,provider:this.provider,token:"",requestPath:s.requestPath,fileId:s.id,name:s.name||s.id,mimeType:s.mimeType,size:s.size,thumbnail:s.thumbnail}));this.dispatchEvent(new CustomEvent("connector-files-selected",{detail:{files:e},bubbles:!0,composed:!0}))},this._onClose=()=>{this.dispatchEvent(new CustomEvent("connector-close",{bubbles:!0,composed:!0}))}}get _providerLabel(){var e;return((e=l.getProviderSources([this.provider])[0])==null?void 0:e.label)??this.provider}async _doSearch(){const t=this._searchQuery.trim();if(t){this._loading=!0,this._error=null,this._items=[],this._selectedIds=new Set,this._nextPageQuery=null,this._searched=!0;try{const e=await l.searchProvider(this.companionUrl,this.provider,t),s=new Set;this._items=e.items.filter(i=>s.has(i.id)?!1:(s.add(i.id),!0)),this._nextPageQuery=e.nextPageQuery}catch(e){this._error=e instanceof Error?e.message:"Search failed"}finally{this._loading=!1}}}async _onLoadMore(){if(!(!this._nextPageQuery||this._loadingMore)){this._loadingMore=!0;try{const t=await l.searchProvider(this.companionUrl,this.provider,this._searchQuery.trim(),this._nextPageQuery),e=new Set(this._items.map(i=>i.id)),s=t.items.filter(i=>!e.has(i.id));this._items=[...this._items,...s],this._nextPageQuery=t.nextPageQuery}catch{}finally{this._loadingMore=!1}}}_toggleSelect(t){const e=new Set(this._selectedIds);e.has(t.id)?e.delete(t.id):e.add(t.id),this._selectedIds=e}render(){return r.html`
+      ${this._renderHeader()}
+      ${this._renderSearchBar()}
+      ${this._loading?this._renderLoading():this._error?this._renderError():this._renderResults()}
+    `}_renderHeader(){return r.html`
+      <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>
+      </div>
+    `}_renderSearchBar(){return r.html`
+      <div class="search-bar">
+        <input
+          class="search-input"
+          type="text"
+          placeholder="Search for images..."
+          .value=${this._searchQuery}
+          @input=${this._onSearchInput}
+          @keydown=${this._onSearchKeydown}
+        />
+        <button
+          class="search-btn"
+          ?disabled=${!this._searchQuery.trim()||this._loading}
+          @click=${()=>this._doSearch()}
+        >
+          Search
+        </button>
+      </div>
+    `}_renderLoading(){return r.html`
+      <div class="loading">
+        <div class="spinner"></div>
+      </div>
+    `}_renderError(){return r.html`
+      <div class="error-view">
+        <div class="error-text">${this._error}</div>
+        <button class="retry-btn" @click=${()=>this._doSearch()}>Retry</button>
+      </div>
+    `}_renderResults(){const t=this._selectedIds.size;return this._searched?this._items.length===0?r.html`
+        <div class="empty-state">
+          <div class="empty-text">No results found</div>
+        </div>
+      `:r.html`
+      <div class="results" @scroll=${this._onResultsScroll}>
+        <div class="results-grid">
+          ${this._items.map(e=>{var s;return r.html`
+              <div
+                class="result-item ${this._selectedIds.has(e.id)?"selected":""}"
+                @click=${()=>this._toggleSelect(e)}
+              >
+                ${e.thumbnail?r.html`<img src=${e.thumbnail} alt=${e.name} loading="lazy" referrerpolicy="no-referrer" />`:r.nothing}
+                <div class="check">
+                  ${this._selectedIds.has(e.id)?r.html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12" /></svg>`:r.nothing}
+                </div>
+                ${(s=e.author)!=null&&s.name?r.html`<div class="author">${e.author.name}</div>`:r.nothing}
+              </div>
+            `})}
+        </div>
+        ${this._loadingMore?r.html`<div class="loading" style="padding:16px 0"><div class="spinner"></div></div>`:r.nothing}
+      </div>
+
+      ${this._items.length>0?r.html`
+            <div class="browser-footer">
+              <span class="selected-count">
+                ${t>0?`${t} image${t===1?"":"s"} selected`:"Select images to add"}
+              </span>
+              <button
+                class="add-btn"
+                ?disabled=${t===0}
+                @click=${this._onAddSelected}
+              >
+                Add ${t>0?t:""} image${t===1?"":"s"}
+              </button>
+            </div>
+          `:r.nothing}
+    `:r.html`
+        <div class="empty-state">
+          <div class="empty-text">Enter text to search for images</div>
+        </div>
+      `}};p.styles=r.css`
+    :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);
+    }
+
+    .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;
+    }
+
+    /* --- Search bar --- */
+    .search-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 20px;
+      border-bottom: 1px solid var(--sfx-up-border-light, #f1f5f9);
+      flex-shrink: 0;
+    }
+
+    .search-input {
+      flex: 1;
+      height: 36px;
+      padding: 0 12px;
+      border: 1.5px solid var(--sfx-up-border, #e8edf5);
+      border-radius: 9px;
+      font-family: inherit;
+      font-size: 13px;
+      color: var(--sfx-up-text, #1e293b);
+      background: #fff;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .search-input:focus {
+      border-color: var(--sfx-up-primary, #2563eb);
+    }
+
+    .search-input::placeholder {
+      color: var(--sfx-up-text-muted, #94a3b8);
+    }
+
+    .search-btn {
+      height: 36px;
+      padding: 0 16px;
+      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;
+      flex-shrink: 0;
+    }
+
+    .search-btn:hover:not(:disabled) {
+      transform: translateY(-1px);
+    }
+
+    .search-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* --- Results grid --- */
+    .results {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 12px;
+      min-height: 0;
+    }
+
+    .results-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+      gap: 8px;
+    }
+
+    .result-item {
+      position: relative;
+      aspect-ratio: 1;
+      border-radius: 10px;
+      overflow: hidden;
+      cursor: pointer;
+      border: 2px solid transparent;
+      transition: border-color 0.15s;
+    }
+
+    .result-item.selected {
+      border-color: var(--sfx-up-primary, #2563eb);
+    }
+
+    .result-item img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .result-item .check {
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      width: 22px;
+      height: 22px;
+      border-radius: 6px;
+      background: rgba(255, 255, 255, 0.85);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    .result-item:hover .check,
+    .result-item.selected .check {
+      opacity: 1;
+    }
+
+    .result-item.selected .check {
+      background: var(--sfx-up-primary, #2563eb);
+      color: #fff;
+    }
+
+    .check svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .result-item .author {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 4px 8px;
+      background: linear-gradient(transparent, rgba(0,0,0,0.5));
+      font-size: 10px;
+      color: #fff;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    .result-item:hover .author {
+      opacity: 1;
+    }
+
+    /* --- 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;
+    }
+
+    /* --- States --- */
+    .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;
+    }
+
+    .empty-text {
+      font-size: 14px;
+      color: var(--sfx-up-text-muted, #94a3b8);
+    }
+
+    .load-more-btn {
+      display: block;
+      margin: 12px 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);
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner { animation: none; }
+    }
+  `;let o=p;a([n.property({type:String})],o.prototype,"provider");a([n.property({type:String})],o.prototype,"companionUrl");a([n.state()],o.prototype,"_loading");a([n.state()],o.prototype,"_loadingMore");a([n.state()],o.prototype,"_items");a([n.state()],o.prototype,"_selectedIds");a([n.state()],o.prototype,"_error");a([n.state()],o.prototype,"_searchQuery");a([n.state()],o.prototype,"_nextPageQuery");a([n.state()],o.prototype,"_searched");exports.SfxSearchProviderBrowser=o;