@scaleflex/uploader 0.2.1 → 0.2.3

package/.claude/skills/integrate-uploader/SKILL.md

@@ -0,0 +1,458 @@
+---
+name: integrate-uploader
+description: Integrate @scaleflex/uploader into any project — install, configure auth,
+  wire events, theme, and add restrictions. Works with vanilla JS, React, Vue, Angular, Svelte.
+user_invocable: true
+metadata:
+  category: integration
+  tags:
+  - scaleflex
+  - uploader
+  - file-upload
+  - web-component
+  status: ready
+  version: 1
+---
+
+# Scaleflex Uploader Integration Skill
+
+## When to Use
+
+- User says "add uploader", "integrate uploader", "file upload widget", "upload component"
+- User wants to let users upload files to Scaleflex VXP / Filerobot
+- User asks how to use `@scaleflex/uploader` in their project
+
+## Step 1 — Detect the Target Framework
+
+Read the project's `package.json` to determine:
+- **React** (18+): use the React wrapper (`@scaleflex/uploader/react`)
+- **Vue / Angular / Svelte / vanilla JS**: use the Web Component (`@scaleflex/uploader/define`)
+
+## Step 2 — Install
+
+```bash
+npm install @scaleflex/uploader
+```
+
+`lit` is bundled — no extra peer deps for vanilla JS / Vue / Angular / Svelte.
+For React, `react` and `react-dom` (v18+) must already be installed (they're optional peer deps).
+
+### CDN (no bundler)
+
+```html
+<script src="https://scaleflex.cloudimg.io/v7/plugins/scaleflex/uploader/0.2.1/sfx-uploader.min.js"></script>
+```
+
+This registers `<sfx-uploader>` and all sub-components automatically. Replace `0.2.1` with the desired version.
+
+## Step 3 — Add the Uploader
+
+### Vanilla JS / Web Component
+
+```js
+import '@scaleflex/uploader/define';
+
+const uploader = document.querySelector('sfx-uploader')
+  || document.createElement('sfx-uploader');
+document.body.appendChild(uploader);
+
+uploader.config = {
+  auth: {
+    mode: 'security-template',
+    container: 'YOUR_CONTAINER',
+    securityTemplateId: 'SECU_YOUR_TEMPLATE_ID',
+  },
+};
+
+uploader.addEventListener('sfx-all-complete', (e) => {
+  const { successful, failed } = e.detail;
+  console.log('Uploaded:', successful.map(f => f.response.file.url.cdn));
+});
+
+uploader.open();
+```
+
+### React
+
+```tsx
+import { useRef } from 'react';
+import { Uploader, type UploaderRef } from '@scaleflex/uploader/react';
+
+function MyComponent() {
+  const uploaderRef = useRef<UploaderRef>(null);
+
+  return (
+    <>
+      <button onClick={() => uploaderRef.current?.open()}>Upload files</button>
+      <Uploader
+        ref={uploaderRef}
+        config={{
+          auth: {
+            mode: 'security-template' as const,
+            container: 'YOUR_CONTAINER',
+            securityTemplateId: 'SECU_YOUR_TEMPLATE_ID',
+          },
+        }}
+        onUploadComplete={(file, response) => {
+          console.log('Uploaded:', response.file.url.cdn);
+        }}
+        onAllComplete={(successful, failed) => {
+          console.log(`Done: ${successful.length} ok, ${failed.length} failed`);
+        }}
+      />
+    </>
+  );
+}
+```
+
+**React controlled mode** (open state managed by parent):
+
+```tsx
+const [isOpen, setIsOpen] = useState(false);
+
+<Uploader
+  config={config}
+  open={isOpen}
+  onAllComplete={(successful) => { handleFiles(successful); setIsOpen(false); }}
+  onCancel={() => setIsOpen(false)}
+/>
+```
+
+### Vue
+
+```vue
+<template>
+  <sfx-uploader ref="uploader"></sfx-uploader>
+  <button @click="openUploader">Upload files</button>
+</template>
+
+<script setup>
+import '@scaleflex/uploader/define';
+import { ref, onMounted } from 'vue';
+
+const uploader = ref(null);
+
+onMounted(() => {
+  const el = uploader.value;
+  el.config = {
+    auth: {
+      mode: 'security-template',
+      container: 'YOUR_CONTAINER',
+      securityTemplateId: 'SECU_YOUR_TEMPLATE_ID',
+    },
+  };
+
+  el.addEventListener('sfx-all-complete', (e) => {
+    console.log('Uploaded:', e.detail.successful);
+  });
+});
+
+function openUploader() {
+  uploader.value?.open();
+}
+</script>
+```
+
+## Step 4 — Authentication
+
+Ask the user which auth mode they need:
+
+### Security template (recommended for client-side)
+
+The uploader auto-exchanges the template ID for a SASS key on init. Safer for client-side code.
+
+```ts
+auth: {
+  mode: 'security-template',
+  container: string,              // Scaleflex container name
+  securityTemplateId: string,     // From Scaleflex dashboard (SECU_...)
+  airboxPuid?: string,            // Optional: airbox user ID
+}
+```
+
+### SASS key (direct)
+
+Use when you already have a SASS key (e.g. from your backend or inside Scaleflex Hub).
+
+```ts
+auth: {
+  mode: 'sass-key',
+  container: string,
+  sassKey: string,                // X-Filerobot-Key value
+  airboxPuid?: string,
+}
+```
+
+## Step 5 — Configure (Optional)
+
+All options beyond `auth` are optional. Add only what the user needs:
+
+```ts
+uploader.config = {
+  auth: { /* ... */ },
+
+  // Upload target
+  targetFolder: '/user-uploads/',       // Filerobot folder path (default: '/')
+
+  // Display
+  mode: 'modal',                        // 'modal' (default) or 'inline'
+  headerButton: 'close',                // 'none' | 'close' | 'back'
+                                        //   modal default: 'close'
+                                        //   inline default: 'none'
+                                        //   'back': for wizard/step flows
+  sourcesLayout: 'pills',               // 'pills' (default) or 'cards'
+
+  // Upload behavior
+  concurrency: 3,                       // Max concurrent uploads (default: 3)
+  autoProceed: false,                    // Auto-start upload on file add (default: false)
+
+  // File restrictions
+  restrictions: {
+    maxFileSize: 10 * 1024 * 1024,       // 10 MB per file
+    maxTotalFilesSize: 500 * 1024 * 1024, // 500 MB total
+    maxNumberOfFiles: 50,
+    minNumberOfFiles: 1,
+    allowedFileTypes: ['image/*', 'video/*', 'application/pdf'],
+    blockedFileTypes: ['application/exe'],
+  },
+
+  // Cloud connectors (Google Drive, Dropbox, etc.)
+  connectors: {
+    companionUrl: 'https://eu-on-24001.connector.filerobot.com',
+    providers: ['google-drive', 'dropbox', 'onedrive', 'box'],
+  },
+
+  // UI options
+  showFillMetadata: false,               // Show "Fill Metadata" button (default: false)
+  clearOnClose: true,                    // Clear files on modal close (default: true)
+  clearOnComplete: true,                 // Clear files on "Done" action (default: true)
+  rejectedFileAutoRemoveDelay: 4000,     // ms before auto-removing rejected files
+                                         // Set to 0 or false to disable
+};
+```
+
+## Events Reference
+
+All events bubble and cross Shadow DOM (`composed: true`):
+
+| Event | Detail | When |
+|---|---|---|
+| `sfx-file-added` | `{ file: UploadFile }` | File added to queue |
+| `sfx-file-removed` | `{ file: UploadFile }` | File removed from queue |
+| `sfx-file-rejected` | `{ file: UploadFile, reason: string }` | File rejected by restrictions |
+| `sfx-upload-started` | `{ files: UploadFile[] }` | Upload batch started |
+| `sfx-upload-progress` | `{ file: UploadFile, progress: number, speed: number }` | Per-file progress update |
+| `sfx-upload-complete` | `{ file: UploadFile, response: UploadResponse }` | Single file uploaded |
+| `sfx-upload-error` | `{ file: UploadFile, error: Error }` | Single file failed |
+| `sfx-upload-retry` | `{ file: UploadFile, attempt: number }` | File being retried |
+| `sfx-all-complete` | `{ successful: UploadFile[], failed: UploadFile[] }` | All files finished |
+| `sfx-total-progress` | `{ percentage: number, speed: number, eta: number }` | Aggregate progress |
+| `sfx-before-upload` | `{ files: UploadFile[] }` | Before upload starts (cancelable) |
+| `sfx-open` | `{}` | Uploader opened |
+| `sfx-close` | `{}` | Uploader closed |
+| `sfx-cancel` | `{}` | Upload cancelled |
+| `sfx-fill-metadata` | `{ files: UploadFile[] }` | "Fill Metadata" button clicked |
+
+## Public Methods
+
+| Method | Returns | Description |
+|---|---|---|
+| `open()` | `void` | Open the modal |
+| `close()` | `void` | Close the modal (respects `clearOnClose`) |
+| `upload()` | `void` | Start uploading all queued files |
+| `addFiles(files: File[])` | `void` | Programmatically add files |
+| `resumeUpload(files?: UploadFile[])` | `void` | Resume paused upload with optional metadata updates |
+| `cancelUpload()` | `void` | Cancel active uploads |
+| `getFiles()` | `UploadFile[]` | Get snapshot of all files |
+| `getFile(fileId)` | `UploadFile \| undefined` | Get single file by ID |
+| `updateFileMeta(fileId, meta?, tags?)` | `void` | Update metadata on a queued file |
+| `updateFilesMeta(updates)` | `void` | Batch update metadata |
+
+## Config Callbacks (Web Component)
+
+For Web Component usage, callbacks can be passed via `config.callbacks`:
+
+```ts
+uploader.config = {
+  auth: { /* ... */ },
+  callbacks: {
+    onFileAdded: (file) => { /* ... */ },
+    onAllComplete: (successful, failed) => { /* ... */ },
+    onBeforeUpload: (files) => {
+      // Return false to cancel the upload
+      return true;
+    },
+    onFillMetadata: (files) => {
+      // Called when "Fill Metadata" button is clicked
+    },
+    onFilePreview: (file) => {
+      // Called when a file preview is clicked
+    },
+    // ... all other callbacks from the Events table
+  },
+};
+```
+
+`onBeforeUpload`, `onFillMetadata`, and `onFilePreview` are only available via `config.callbacks` (not as React props).
+
+## React Wrapper Props
+
+```ts
+interface UploaderProps {
+  config: UploaderConfig;            // Required
+  open?: boolean;                    // Controlled open state
+
+  // All event callbacks (mirror DOM events)
+  onFileAdded?: (file: UploadFile) => void;
+  onFileRemoved?: (file: UploadFile) => void;
+  onFileRejected?: (file: UploadFile, reason: string) => void;
+  onUploadStarted?: (files: UploadFile[]) => void;
+  onUploadProgress?: (file: UploadFile, progress: number, speed: number) => void;
+  onUploadComplete?: (file: UploadFile, response: UploadResponse) => void;
+  onUploadError?: (file: UploadFile, error: Error) => void;
+  onUploadRetry?: (file: UploadFile, attempt: number) => void;
+  onAllComplete?: (successful: UploadFile[], failed: UploadFile[]) => void;
+  onTotalProgress?: (percentage: number, speed: number, eta: number) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onCancel?: () => void;
+
+  className?: string;
+  style?: CSSProperties;
+}
+```
+
+React ref exposes: `open()`, `close()`, `upload()`, `addFiles()`, `resumeUpload()`, `cancelUpload()`, and `element` (direct Web Component access).
+
+## UploadResponse Shape
+
+```ts
+interface UploadResponse {
+  status: 'success' | 'error';
+  file: {
+    uuid: string;
+    name: string;
+    extension: string;
+    type: string;
+    size: number;
+    url: { public: string; cdn: string };
+    meta: Record<string, unknown>;
+    tags: string[];
+    info: { img_w?: number; img_h?: number };
+    created_at: string;
+    modified_at: string;
+  };
+  msg?: string;
+}
+```
+
+## Theming
+
+Override CSS custom properties on the element or any ancestor. All use `--sfx-up-` prefix:
+
+```css
+sfx-uploader {
+  /* Colors */
+  --sfx-up-primary: #2563eb;
+  --sfx-up-primary-hover: #1d4ed8;
+  --sfx-up-primary-bg: #eff6ff;
+  --sfx-up-success: #16a34a;
+  --sfx-up-error: #dc2626;
+
+  /* Text */
+  --sfx-up-text: #1e293b;
+  --sfx-up-text-secondary: #475569;
+  --sfx-up-text-muted: #94a3b8;
+
+  /* Background & borders */
+  --sfx-up-bg: #ffffff;
+  --sfx-up-surface: #f8fafc;
+  --sfx-up-border: #e8edf5;
+  --sfx-up-backdrop: rgba(0, 0, 0, 0.45);
+
+  /* Typography & shape */
+  --sfx-up-font: 'Inter', system-ui, sans-serif;
+  --sfx-up-radius: 16px;
+  --sfx-up-max-height: 88vh;
+}
+```
+
+## Cloud Connectors
+
+Supported providers:
+
+| Provider ID | Service |
+|---|---|
+| `'google-drive'` | Google Drive |
+| `'dropbox'` | Dropbox |
+| `'onedrive'` | Microsoft OneDrive |
+| `'box'` | Box |
+| `'instagram'` | Instagram |
+| `'facebook'` | Facebook |
+| `'unsplash'` | Unsplash (search-based) |
+
+## Common Patterns
+
+### Image-only uploader
+
+```ts
+config = {
+  auth: { /* ... */ },
+  restrictions: {
+    allowedFileTypes: ['image/*'],
+    maxFileSize: 5 * 1024 * 1024,
+  },
+  autoProceed: true,
+};
+```
+
+### Inline mode (embedded in page)
+
+```ts
+config = {
+  auth: { /* ... */ },
+  mode: 'inline',
+};
+```
+
+### Step/wizard flow (modal with back button)
+
+```ts
+config = {
+  auth: { /* ... */ },
+  mode: 'modal',
+  headerButton: 'back',
+  clearOnClose: false,  // preserve files across open/close
+};
+```
+
+### With cloud connectors
+
+```ts
+config = {
+  auth: { /* ... */ },
+  connectors: {
+    companionUrl: 'https://eu-on-24001.connector.filerobot.com',
+    providers: ['google-drive', 'dropbox'],
+  },
+};
+```
+
+### Intercept before upload (metadata dialog)
+
+```js
+uploader.addEventListener('sfx-before-upload', (e) => {
+  e.preventDefault(); // pause upload
+  showMetadataDialog(e.detail.files).then((updatedFiles) => {
+    uploader.resumeUpload(updatedFiles);
+  });
+});
+```
+
+## Troubleshooting
+
+- **"customElements is not defined"** — SSR environment. The React wrapper handles this automatically. For vanilla JS, guard the import: `if (typeof customElements !== 'undefined') import('@scaleflex/uploader/define');`
+- **Styles not showing** — The component uses Shadow DOM; external CSS won't penetrate. Use `--sfx-up-*` CSS custom properties for theming.
+- **Auth errors** — Check that the security template ID or SASS key is valid and the container name matches.
+- **`open()` does nothing** — `config` must be set before calling `open()`. Ensure `auth` is provided.
+- **Files rejected silently** — Check `restrictions` config. Listen to `sfx-file-rejected` for the reason.

package/README.md

@@ -47,6 +47,12 @@
 npm install @scaleflex/uploader
 ```
 
+Or use the CDN for a no-bundler setup:
+
+```html
+<script src="https://scaleflex.cloudimg.io/v7/plugins/scaleflex/uploader/0.2.1/sfx-uploader.min.js"></script>
+```
+
 ## Quick start
 
 ### Web Component
@@ -114,6 +120,30 @@ function App() {
 | Firefox | 100+ |
 | Safari | 15.4+ |
 
+## Claude Code Integration
+
+If you use [Claude Code](https://docs.anthropic.com/en/docs/claude-code), this package ships with a ready-made skill that helps Claude add the uploader to your project — detecting your framework, wiring auth, events, theming, and restrictions automatically.
+
+**Per-project** (recommended — share with your team via version control):
+
+```bash
+mkdir -p .claude/skills/integrate-uploader
+cp node_modules/@scaleflex/uploader/.claude/skills/integrate-uploader/SKILL.md \
+   .claude/skills/integrate-uploader/SKILL.md
+```
+
+Commit the `.claude/skills/` directory to version control. The skill is now available to everyone on the team.
+
+**Per-user** (available across all your projects):
+
+```bash
+mkdir -p ~/.claude/skills/integrate-uploader
+cp node_modules/@scaleflex/uploader/.claude/skills/integrate-uploader/SKILL.md \
+   ~/.claude/skills/integrate-uploader/SKILL.md
+```
+
+Then type `/integrate-uploader` in Claude Code and it will walk you through the full integration — install, config, events, and theming — tailored to your stack (React, Vue, vanilla JS, etc.).
+
 ## Documentation
 
 See the full documentation and interactive examples at **[scaleflex.github.io/uploader](https://scaleflex.github.io/uploader/)**.

package/dist/components/drop-zone.d.ts

@@ -35,6 +35,7 @@ export declare class SfxDropZone extends LitElement {
     private _onScrollOrResize;
     private _updateVisiblePills;
     connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
     disconnectedCallback(): void;
     private _renderPill;
     private _renderCard;

package/dist/components/drop-zone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drop-zone.d.ts","sourceRoot":"","sources":["../../src/components/drop-zone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAKhD,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAyxBX;IAE0C,OAAO,UAAS;IACE,gBAAgB,UAAS;IAC3D,MAAM,SAAM;IACb,OAAO,EAAE,SAAS,EAAE,CAAM;IACI,aAAa,EAAE,OAAO,GAAG,OAAO,CAAW;IAE3F,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAiB;IAE7B,OAAO,CAAC,SAAS,CAAe;IACrB,SAAS,EAAG,gBAAgB,CAAC;IAE1D,OAAO,CAAC,YAAY,CAAK;IAEzB,0CAA0C;IAC1C,MAAM;IAMN,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,YAAY,CAOlB;IAEF,OAAO,CAAC,OAAO,CAUb;IAIF,OAAO,CAAC,QAAQ,CAad;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,aAAa,CAQnB;IAIF,OAAO,CAAC,QAAQ,CAkBd;IAEF,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,WAAW;IAQnB,qFAAqF;IACrF,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,YAAY,CAA8C;IAElE,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,mBAAmB;IAqB3B,iBAAiB;IAUjB,oBAAoB;IAUpB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,eAAe;IAiCvB,OAAO,CAAC,mBAAmB;IA4B3B,MAAM;CAwGP"}
+{"version":3,"file":"drop-zone.d.ts","sourceRoot":"","sources":["../../src/components/drop-zone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAKhD,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BA8wBX;IAE0C,OAAO,UAAS;IACE,gBAAgB,UAAS;IAC3D,MAAM,SAAM;IACb,OAAO,EAAE,SAAS,EAAE,CAAM;IACI,aAAa,EAAE,OAAO,GAAG,OAAO,CAAW;IAE3F,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,aAAa,CAAiB;IAE7B,OAAO,CAAC,SAAS,CAAe;IACrB,SAAS,EAAG,gBAAgB,CAAC;IAE1D,OAAO,CAAC,YAAY,CAAK;IAEzB,0CAA0C;IAC1C,MAAM;IAMN,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,YAAY,CAOlB;IAEF,OAAO,CAAC,OAAO,CAUb;IAIF,OAAO,CAAC,QAAQ,CAad;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,aAAa,CAQnB;IAIF,OAAO,CAAC,QAAQ,CAkBd;IAEF,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,WAAW;IAQnB,qFAAqF;IACrF,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,YAAY,CAA8C;IAElE,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,mBAAmB;IAqB3B,iBAAiB;IAUjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,oBAAoB;IAUpB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,eAAe;IAiCvB,OAAO,CAAC,mBAAmB;IA2B3B,MAAM;CAuGP"}

package/dist/components/file-item.d.ts

@@ -7,6 +7,7 @@ export declare class SfxFileItem extends LitElement {
     private _retry;
     private _preview;
     render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    private _formatDuration;
     private _renderTypeIcon;
 }
 //# sourceMappingURL=file-item.d.ts.map

package/dist/components/file-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-item.d.ts","sourceRoot":"","sources":["../../src/components/file-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAmWX;IAE8B,IAAI,EAAG,UAAU,CAAC;IAElD,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,QAAQ;IAWhB,MAAM;IA6GN,OAAO,CAAC,eAAe;CAcxB"}
+{"version":3,"file":"file-item.d.ts","sourceRoot":"","sources":["../../src/components/file-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGvD,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAqXX;IAE8B,IAAI,EAAG,UAAU,CAAC;IAElD,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,QAAQ;IAWhB,MAAM;IAiHN,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;CAcxB"}

package/dist/components/file-list.d.ts

@@ -1,8 +1,21 @@
 import { LitElement } from 'lit';
 import { UploadFile } from '../store/store.types';
+import { SourceDef } from '../types/source.types';
 export declare class SfxFileList extends LitElement {
     static styles: import('lit').CSSResult;
     files: UploadFile[];
+    showDropTile: boolean;
+    sources: SourceDef[];
+    accept: string;
+    private _moreOpen;
+    private _outsideClickHandler;
+    private _onDropTileClick;
+    private _onFileInput;
+    private _onSourceClick;
+    private _toggleMore;
+    disconnectedCallback(): void;
+    private _onMoreSourceClick;
+    private _renderDropTile;
     render(): import('lit-html').TemplateResult<1>;
 }
 //# sourceMappingURL=file-list.d.ts.map

package/dist/components/file-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-list.d.ts","sourceRoot":"","sources":["../../src/components/file-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAuCX;IAE8B,KAAK,EAAE,UAAU,EAAE,CAAM;IAEzD,MAAM;CASP"}
+{"version":3,"file":"file-list.d.ts","sourceRoot":"","sources":["../../src/components/file-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqC,MAAM,KAAK,CAAC;AAIpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BA6SX;IAE8B,KAAK,EAAE,UAAU,EAAE,CAAM;IAC5B,YAAY,UAAS;IAClB,OAAO,EAAE,SAAS,EAAE,CAAM;IAC9B,MAAM,SAAM;IAE/B,OAAO,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,oBAAoB,CAO1B;IAEF,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAUnB,oBAAoB;IAMpB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,eAAe;IA6DvB,MAAM;CAUP"}

package/dist/components/success-card.d.ts

@@ -5,6 +5,10 @@ export declare class SfxSuccessCard extends LitElement {
     totalSize: number;
     thumbnails: string[];
     primaryLabel: string;
+    failedFiles: {
+        name: string;
+        error: string;
+    }[];
     private _uploadMore;
     private _primaryAction;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/success-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"success-card.d.ts","sourceRoot":"","sources":["../../src/components/success-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOrD,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BA8HV;IAEyB,SAAS,SAAK;IACd,SAAS,SAAK;IACf,UAAU,EAAE,MAAM,EAAE,CAAM;IACzB,YAAY,SAAU;IAElD,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,cAAc;IAMtB,MAAM;CAoCP"}
+{"version":3,"file":"success-card.d.ts","sourceRoot":"","sources":["../../src/components/success-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOrD,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BAsMV;IAEyB,SAAS,SAAK;IACd,SAAS,SAAK;IACf,UAAU,EAAE,MAAM,EAAE,CAAM;IACzB,YAAY,SAAU;IACvB,WAAW,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAM;IAE/E,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,cAAc;IAMtB,MAAM;CA+DP"}

package/dist/define.cjs

@@ -1 +1 @@
-"use strict";const e=require("./sfx-uploader-ziRTzw0k.cjs"),s=(f,i)=>{typeof customElements<"u"&&!customElements.get(f)&&customElements.define(f,i)};s("sfx-uploader",e.SfxUploader);s("sfx-drop-zone",e.SfxDropZone);s("sfx-import-divider",e.SfxImportDivider);s("sfx-source-pills",e.SfxSourcePills);s("sfx-file-list",e.SfxFileList);s("sfx-file-item",e.SfxFileItem);s("sfx-success-card",e.SfxSuccessCard);s("sfx-actions-bar",e.SfxActionsBar);s("sfx-url-dialog",e.SfxUrlDialog);s("sfx-camera-dialog",e.SfxCameraDialog);s("sfx-screen-cast-dialog",e.SfxScreenCastDialog);
+"use strict";const e=require("./sfx-uploader-DXyLpoIJ.cjs"),s=(f,i)=>{typeof customElements<"u"&&!customElements.get(f)&&customElements.define(f,i)};s("sfx-uploader",e.SfxUploader);s("sfx-drop-zone",e.SfxDropZone);s("sfx-import-divider",e.SfxImportDivider);s("sfx-source-pills",e.SfxSourcePills);s("sfx-file-list",e.SfxFileList);s("sfx-file-item",e.SfxFileItem);s("sfx-success-card",e.SfxSuccessCard);s("sfx-actions-bar",e.SfxActionsBar);s("sfx-url-dialog",e.SfxUrlDialog);s("sfx-camera-dialog",e.SfxCameraDialog);s("sfx-screen-cast-dialog",e.SfxScreenCastDialog);

package/dist/define.js

@@ -1,4 +1,4 @@
-import { g as f, a as i, d as o, e as r, c as l, b as x, f as t, S as c, n as d, o as S, p as m } from "./sfx-uploader-CU9IwNC7.js";
+import { g as f, a as i, d as o, e as r, c as l, b as x, f as t, S as c, n as d, o as S, p as m } from "./sfx-uploader-DTfESjzm.js";
 const s = (e, a) => {
   typeof customElements < "u" && !customElements.get(e) && customElements.define(e, a);
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./sfx-uploader-ziRTzw0k.cjs");exports.CORE_SOURCES=e.CORE_SOURCES;exports.PublicEvents=e.PublicEvents;exports.SfxActionsBar=e.SfxActionsBar;exports.SfxDropZone=e.SfxDropZone;exports.SfxFileItem=e.SfxFileItem;exports.SfxFileList=e.SfxFileList;exports.SfxImportDivider=e.SfxImportDivider;exports.SfxSourcePills=e.SfxSourcePills;exports.SfxSuccessCard=e.SfxSuccessCard;exports.SfxUploader=e.SfxUploader;exports.Store=e.Store;exports.UploadEngine=e.UploadEngine;exports.buildAuthHeaders=e.buildAuthHeaders;exports.createStore=e.createStore;exports.exchangeSassKey=e.exchangeSassKey;exports.getApiBase=e.getApiBase;exports.getProviderSources=e.getProviderSources;exports.resolveAuth=e.resolveAuth;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./sfx-uploader-DXyLpoIJ.cjs");exports.CORE_SOURCES=e.CORE_SOURCES;exports.PublicEvents=e.PublicEvents;exports.SfxActionsBar=e.SfxActionsBar;exports.SfxDropZone=e.SfxDropZone;exports.SfxFileItem=e.SfxFileItem;exports.SfxFileList=e.SfxFileList;exports.SfxImportDivider=e.SfxImportDivider;exports.SfxSourcePills=e.SfxSourcePills;exports.SfxSuccessCard=e.SfxSuccessCard;exports.SfxUploader=e.SfxUploader;exports.Store=e.Store;exports.UploadEngine=e.UploadEngine;exports.buildAuthHeaders=e.buildAuthHeaders;exports.createStore=e.createStore;exports.exchangeSassKey=e.exchangeSassKey;exports.getApiBase=e.getApiBase;exports.getProviderSources=e.getProviderSources;exports.resolveAuth=e.resolveAuth;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { C as e, P as r, S, a as o, b as i, c as t, d as f, e as l, f as x, g as c, h as d, U as u, i as n, j as p, k as g, l as h, m, r as v } from "./sfx-uploader-CU9IwNC7.js";
+import { C as e, P as r, S, a as o, b as i, c as t, d as f, e as l, f as x, g as c, h as d, U as u, i as n, j as p, k as g, l as h, m, r as v } from "./sfx-uploader-DTfESjzm.js";
 export {
   e as CORE_SOURCES,
   r as PublicEvents,

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

@@ -1,7 +1,7 @@
 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";
+import { q as _, t as $, m as z, u as C, A as v, v as I } from "./sfx-uploader-DTfESjzm.js";
 const x = "sfx-uploader-token:";
 function p(n) {
   try {

package/dist/{provider-browser-yW3pZFSP.cjs → provider-browser-DbjyF_Ou.cjs}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),l=require("lit/decorators.js"),b=require("lit/directives/unsafe-html.js"),c=require("./sfx-uploader-ziRTzw0k.cjs"),x="sfx-uploader-token:";function p(o){try{return localStorage.getItem(`${x}${o}`)}catch{return null}}function v(o,e){try{localStorage.setItem(`${x}${o}`,e)}catch{}}function u(o){try{localStorage.removeItem(`${x}${o}`)}catch{}}function k(o,e){const r=i=>{if(i.origin!==new URL(o).origin)return;const t=typeof i.data=="string"?y(i.data):i.data;t!=null&&t.token&&e(t.token)};return window.addEventListener("message",r),()=>window.removeEventListener("message",r)}function y(o){try{return JSON.parse(o)}catch{return null}}var _=Object.defineProperty,d=(o,e,r,i)=>{for(var t=void 0,n=o.length-1,h;n>=0;n--)(h=o[n])&&(t=h(e,r,t)||t);return t&&_(e,r,t),t};const g=class g extends s.LitElement{constructor(){super(...arguments),this.provider="google-drive",this.companionUrl="",this._authenticated=!1,this._loading=!1,this._items=[],this._selectedIds=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 r;const e=c.getAuthUrl(this.companionUrl,this.provider);this._authWindow=window.open(e,"_blank","width=600,height=600"),(r=this._cleanupAuthListener)==null||r.call(this),this._cleanupAuthListener=k(this.companionUrl,i=>{var t,n;(t=this._authWindow)==null||t.close(),this._authWindow=null,(n=this._cleanupAuthListener)==null||n.call(this),this._cleanupAuthListener=null,v(this.provider,i),this._authenticated=!0,this._loadFolder("")})},this._lastClickedIndex=null,this._toggleSelectAll=()=>{const e=this._items.filter(i=>!i.isFolder);e.every(i=>this._selectedIds.has(i.id))?this._selectedIds=new Set:this._selectedIds=new Set(e.map(i=>i.id))},this._onAddSelected=()=>{const e=p(this.provider);if(!e)return;const i=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:i},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 c.logout(this.companionUrl,this.provider,e)}catch{}u(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=new Set,this._breadcrumbs=[],this._nextPagePath=null,this._error=null,this._username=null}_checkAuth(){p(this.provider)&&(this._authenticated=!0,this._loadFolder(""))}get _providerDef(){return c.getProviderSources([this.provider])[0]??null}get _providerLabel(){var e;return((e=this._providerDef)==null?void 0:e.label)??this.provider}async _loadFolder(e){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=new Set,this._lastClickedIndex=null,this._nextPagePath=null;try{const i=await c.listFiles(this.companionUrl,this.provider,r,e);this._items=i.items,this._nextPagePath=i.nextPagePath,i.username&&(this._username=i.username)}catch(i){i instanceof c.AuthExpiredError?(u(this.provider),this._authenticated=!1):this._error=i instanceof Error?i.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 r=this._breadcrumbs[e];this._breadcrumbs=this._breadcrumbs.slice(0,e+1),this._loadFolder(r.path)}}async _onLoadMore(){const e=p(this.provider);if(!(!e||!this._nextPagePath)){this._loadingMore=!0;try{const r=await c.listNextPage(this.companionUrl,e,this._nextPagePath);this._items=[...this._items,...r.items],this._nextPagePath=r.nextPagePath}catch(r){r instanceof c.AuthExpiredError&&(u(this.provider),this._authenticated=!1)}finally{this._loadingMore=!1}}}_toggleSelect(e,r){const i=this._items.filter(n=>!n.isFolder),t=i.findIndex(n=>n.id===e.id);if(r!=null&&r.shiftKey&&this._lastClickedIndex!==null&&t!==-1){const n=Math.min(this._lastClickedIndex,t),h=Math.max(this._lastClickedIndex,t),m=new Set(this._selectedIds);for(let f=n;f<=h;f++)m.add(i[f].id);this._selectedIds=m}else{const n=new Set(this._selectedIds);n.has(e.id)?n.delete(e.id):n.add(e.id),this._selectedIds=n}t!==-1&&(this._lastClickedIndex=t)}render(){return s.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),l=require("lit/decorators.js"),b=require("lit/directives/unsafe-html.js"),c=require("./sfx-uploader-DXyLpoIJ.cjs"),x="sfx-uploader-token:";function p(o){try{return localStorage.getItem(`${x}${o}`)}catch{return null}}function v(o,e){try{localStorage.setItem(`${x}${o}`,e)}catch{}}function u(o){try{localStorage.removeItem(`${x}${o}`)}catch{}}function k(o,e){const r=i=>{if(i.origin!==new URL(o).origin)return;const t=typeof i.data=="string"?y(i.data):i.data;t!=null&&t.token&&e(t.token)};return window.addEventListener("message",r),()=>window.removeEventListener("message",r)}function y(o){try{return JSON.parse(o)}catch{return null}}var _=Object.defineProperty,d=(o,e,r,i)=>{for(var t=void 0,n=o.length-1,h;n>=0;n--)(h=o[n])&&(t=h(e,r,t)||t);return t&&_(e,r,t),t};const g=class g extends s.LitElement{constructor(){super(...arguments),this.provider="google-drive",this.companionUrl="",this._authenticated=!1,this._loading=!1,this._items=[],this._selectedIds=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 r;const e=c.getAuthUrl(this.companionUrl,this.provider);this._authWindow=window.open(e,"_blank","width=600,height=600"),(r=this._cleanupAuthListener)==null||r.call(this),this._cleanupAuthListener=k(this.companionUrl,i=>{var t,n;(t=this._authWindow)==null||t.close(),this._authWindow=null,(n=this._cleanupAuthListener)==null||n.call(this),this._cleanupAuthListener=null,v(this.provider,i),this._authenticated=!0,this._loadFolder("")})},this._lastClickedIndex=null,this._toggleSelectAll=()=>{const e=this._items.filter(i=>!i.isFolder);e.every(i=>this._selectedIds.has(i.id))?this._selectedIds=new Set:this._selectedIds=new Set(e.map(i=>i.id))},this._onAddSelected=()=>{const e=p(this.provider);if(!e)return;const i=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:i},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 c.logout(this.companionUrl,this.provider,e)}catch{}u(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=new Set,this._breadcrumbs=[],this._nextPagePath=null,this._error=null,this._username=null}_checkAuth(){p(this.provider)&&(this._authenticated=!0,this._loadFolder(""))}get _providerDef(){return c.getProviderSources([this.provider])[0]??null}get _providerLabel(){var e;return((e=this._providerDef)==null?void 0:e.label)??this.provider}async _loadFolder(e){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=new Set,this._lastClickedIndex=null,this._nextPagePath=null;try{const i=await c.listFiles(this.companionUrl,this.provider,r,e);this._items=i.items,this._nextPagePath=i.nextPagePath,i.username&&(this._username=i.username)}catch(i){i instanceof c.AuthExpiredError?(u(this.provider),this._authenticated=!1):this._error=i instanceof Error?i.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 r=this._breadcrumbs[e];this._breadcrumbs=this._breadcrumbs.slice(0,e+1),this._loadFolder(r.path)}}async _onLoadMore(){const e=p(this.provider);if(!(!e||!this._nextPagePath)){this._loadingMore=!0;try{const r=await c.listNextPage(this.companionUrl,e,this._nextPagePath);this._items=[...this._items,...r.items],this._nextPagePath=r.nextPagePath}catch(r){r instanceof c.AuthExpiredError&&(u(this.provider),this._authenticated=!1)}finally{this._loadingMore=!1}}}_toggleSelect(e,r){const i=this._items.filter(n=>!n.isFolder),t=i.findIndex(n=>n.id===e.id);if(r!=null&&r.shiftKey&&this._lastClickedIndex!==null&&t!==-1){const n=Math.min(this._lastClickedIndex,t),h=Math.max(this._lastClickedIndex,t),m=new Set(this._selectedIds);for(let f=n;f<=h;f++)m.add(i[f].id);this._selectedIds=m}else{const n=new Set(this._selectedIds);n.has(e.id)?n.delete(e.id):n.add(e.id),this._selectedIds=n}t!==-1&&(this._lastClickedIndex=t)}render(){return s.html`
       ${this._renderHeader()}
       ${this._authenticated?this._loading?this._renderLoading():this._error?this._renderError():this._renderBrowser():this._renderAuthView()}
     `}_renderHeader(){const e=this._providerDef;return s.html`