@autorender/sdk-core 0.1.4

package/dist/index.cjs

@@ -0,0 +1,2799 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createUploader: () => createUploader,
+  registerAutorenderUploaderElement: () => registerAutorenderUploaderElement
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/constants/defaults.ts
+var DEFAULT_BASE_URL = "https://autorenderv3.vercel.app/api/public";
+var DEFAULT_LABELS = {
+  title: "Upload files",
+  description: "Drag & drop files or click to browse.",
+  selectButton: "Upload files",
+  selectFolderButton: "Upload folder",
+  uploadButton: "Upload",
+  uploading: "Uploading...",
+  uploadComplete: "All files uploaded successfully.",
+  uploadFailed: "Unable to upload files. Please try again.",
+  retry: "Retry",
+  remove: "Remove",
+  addMore: "Add more",
+  done: "Done",
+  clear: "Clear",
+  cancel: "Cancel",
+  dropzoneTitle: "Drop files here",
+  duplicateFileExists: "The following file already exists in this folder:",
+  duplicateFilesExist: "The following files already exist in this folder:",
+  duplicateFileError: "File already exists in this folder.",
+  invalidApiKey: "Invalid API key. Please verify your credentials and try again."
+};
+var DEFAULT_ICONS = {
+  upload: `
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 16a1 1 0 0 1-1-1V7.41l-2.3 2.3a1 1 0 1 1-1.4-1.42l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 1 1-1.4 1.42L13 7.41V15a1 1 0 0 1-1 1Z" />
+      <path d="M5 20a3 3 0 0 1-3-3v-1a1 1 0 0 1 2 0v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1a1 1 0 1 1 2 0v1a3 3 0 0 1-3 3Z" />
+    </svg>
+  `,
+  success: `
+    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
+      <path d="M9.5 17a1 1 0 0 1-.7-.29l-3.5-3.5a1 1 0 1 1 1.4-1.42l2.8 2.79 7.1-7.09a1 1 0 0 1 1.4 1.42l-7.8 7.79a1 1 0 0 1-.7.3Z" fill="currentColor" />
+    </svg>
+  `,
+  error: `
+    <svg viewBox="0 0 24 24" aria-hidden="true" >
+      <path d="m12 13.41 3.29 3.3a1 1 0 0 0 1.42-1.42L13.41 12l3.3-3.29a1 1 0 0 0-1.42-1.42L12 10.59l-3.29-3.3a1 1 0 1 0-1.42 1.42L10.59 12l-3.3 3.29a1 1 0 0 0 1.42 1.42L12 13.41Z" />
+    </svg>
+  `,
+  remove: `
+    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
+      <path
+        d="M9 5.25C9 4.55964 9.55964 4 10.25 4H13.75C14.4404 4 15 4.55964 15 5.25V7H9V5.25Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
+      <path
+        d="M5 7H19"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+      <rect
+        x="6.5"
+        y="7"
+        width="11"
+        height="12.5"
+        rx="2"
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
+      <path
+        d="M10 11.5V16"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+      <path
+        d="M14 11.5V16"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+    </svg>
+  `,
+  close: `
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M13.41 12 18 7.41 16.59 6 12 10.59 7.41 6 6 7.41 10.59 12 6 16.59 7.41 18 12 13.41 16.59 18 18 16.59 13.41 12Z" />
+    </svg>
+  `
+};
+var DEFAULT_SOURCES = [
+  {
+    id: "device",
+    label: "From device",
+    kind: "device",
+    icon: `
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
+        <rect x="4" y="5" width="16" height="14" rx="2" stroke="currentColor" stroke-width="1.5" />
+        <path d="M9.5 4h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    `
+  },
+  {
+    id: "camera",
+    label: "Camera",
+    kind: "camera",
+    icon: `
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
+        <path d="M5 7h2l1-2h8l1 2h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+        <circle cx="12" cy="13" r="3.25" stroke="currentColor" stroke-width="1.5" />
+      </svg>
+    `
+  },
+  {
+    id: "facebook",
+    label: "Facebook",
+    kind: "facebook",
+    icon: `
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
+        <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5" />
+        <path d="M13 8h2V6h-2a3 3 0 0 0-3 3v1H8v2h2v6h2v-6h2v-2h-2V9a1 1 0 0 1 1-1Z" fill="currentColor" />
+      </svg>
+    `
+  },
+  {
+    id: "google-drive",
+    label: "Google Drive",
+    kind: "google-drive",
+    icon: `
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
+        <path d="M6.5 18.5h11l3-5-5-8h-6l-5 8 2 3" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+        <path d="M8 13.5h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    `
+  }
+];
+var DEFAULT_THEME = {
+  appearance: "light",
+  accentColor: "#0C55F9",
+  borderRadius: 8,
+  dropzoneBackground: "var(--ar-color-muted)",
+  dropzoneBorder: "var(--ar-color-border)"
+};
+
+// src/client/api-client.ts
+var AutorenderApiClient = class {
+  constructor(opts) {
+    this.authValidated = false;
+    if (!opts.apiKey) {
+      throw new Error("apiKey is required");
+    }
+    this.apiKey = opts.apiKey;
+    this.baseUrl = DEFAULT_BASE_URL.replace(/\/+$/, "");
+  }
+  async request(path, { method = "POST", body, signal } = {}) {
+    const url = `${this.baseUrl}${path}`;
+    const response = await fetch(url, {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": this.apiKey
+      },
+      body: body ? JSON.stringify(body) : void 0,
+      signal
+    });
+    if (!response.ok) {
+      let errorMessage = `Request failed with status ${response.status}`;
+      let errorPayload;
+      try {
+        const data = await response.json();
+        errorPayload = data;
+        if (data?.error) {
+          errorMessage = data.error;
+        } else if (data?.message) {
+          errorMessage = data.message;
+        }
+      } catch {
+      }
+      const error = new Error(errorMessage);
+      error.status = response.status;
+      error.payload = errorPayload;
+      throw error;
+    }
+    if (response.status === 204) {
+      return void 0;
+    }
+    return await response.json();
+  }
+  async validateApiKey(force = false, signal) {
+    if (this.authValidated && !force) return;
+    await this.request("/auth/validate", { method: "GET", signal });
+    this.authValidated = true;
+  }
+  // Legacy method - kept for backward compatibility but not used by new upload flow
+  completeUpload(payload, signal) {
+    return this.request("/assets/complete", {
+      method: "POST",
+      body: payload,
+      signal
+    });
+  }
+  createFolder(payload, signal) {
+    return this.request(
+      "/assets/folder",
+      {
+        method: "POST",
+        body: payload,
+        signal
+      }
+    );
+  }
+  // New upload flow methods
+  uploadInit(payload, signal) {
+    return this.request("/assets/upload", {
+      method: "POST",
+      body: payload,
+      signal
+    });
+  }
+  /**
+   * Upload file to App Runner /ingest endpoint
+   * This is called directly to App Runner, not through our API
+   */
+  async ingest(file, uploadToken, uploadUrl, onProgress, signal) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      if (signal) {
+        signal.addEventListener("abort", () => {
+          xhr.abort();
+          reject(new DOMException("Upload aborted", "AbortError"));
+        });
+      }
+      xhr.upload.onprogress = (event) => {
+        if (event.lengthComputable && onProgress) {
+          const progress = Math.round(event.loaded / event.total * 100);
+          onProgress(progress);
+        }
+      };
+      xhr.onerror = () => {
+        reject(new Error(`Upload failed: ${xhr.statusText}`));
+      };
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          try {
+            const response = JSON.parse(xhr.responseText);
+            resolve(response);
+          } catch (error) {
+            reject(new Error("Failed to parse response"));
+          }
+        } else {
+          try {
+            const error = JSON.parse(xhr.responseText);
+            reject(new Error(error.message || `Upload failed: ${xhr.statusText}`));
+          } catch {
+            reject(new Error(`Upload failed: ${xhr.statusText}`));
+          }
+        }
+      };
+      xhr.open("POST", uploadUrl);
+      xhr.setRequestHeader("Authorization", `Bearer ${uploadToken}`);
+      xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");
+      xhr.send(file);
+    });
+  }
+  completeUploadNew(payload, signal) {
+    return this.request("/assets/complete", {
+      method: "POST",
+      body: payload,
+      signal
+    });
+  }
+};
+
+// src/utils/helpers.ts
+function generateId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return "id-" + Math.random().toString(36).slice(2, 11);
+}
+function resolveIcon(renderer) {
+  if (typeof renderer === "function") {
+    return resolveIcon(renderer());
+  }
+  if (typeof renderer === "string") {
+    const template = document.createElement("template");
+    template.innerHTML = renderer.trim();
+    return template.content.firstElementChild;
+  }
+  return renderer ? renderer.cloneNode(true) : null;
+}
+function toCssVars(theme) {
+  const variables = {};
+  if (theme.accentColor) {
+    variables["--ar-accent"] = theme.accentColor;
+  }
+  if (theme.borderRadius !== void 0) {
+    variables["--ar-radius"] = `${theme.borderRadius}px`;
+  }
+  if (theme.fontFamily) {
+    variables["--ar-font-family"] = theme.fontFamily;
+  }
+  if (theme.dropzoneBackground) {
+    variables["--ar-dropzone-bg"] = theme.dropzoneBackground;
+  }
+  if (theme.dropzoneBorder) {
+    variables["--ar-dropzone-border"] = theme.dropzoneBorder;
+  }
+  return variables;
+}
+function applyCssVariables(element, variables) {
+  Object.entries(variables).forEach(([key, value]) => {
+    element.style.setProperty(key, value);
+  });
+}
+function getRelativeFolderPath(basePath, relativePath) {
+  if (!relativePath) return void 0;
+  const parts = relativePath.split("/").map((segment) => segment.trim()).filter((segment) => segment && segment !== ".");
+  if (parts.length <= 1) {
+    return void 0;
+  }
+  const folderSegments = parts.slice(0, -1);
+  if (basePath) {
+    const baseSegments = basePath.split("/").map((segment) => segment.trim()).filter((segment) => segment && segment !== ".");
+    let offset = 0;
+    while (offset < baseSegments.length && offset < folderSegments.length && folderSegments[offset] === baseSegments[offset]) {
+      offset += 1;
+    }
+    return offset < folderSegments.length ? folderSegments.slice(offset).join("/") : void 0;
+  }
+  return folderSegments.length ? folderSegments.join("/") : void 0;
+}
+function calculateBatchProgress(items) {
+  if (items.length === 0) return 0;
+  const total = items.reduce((acc, item) => acc + item.progress, 0);
+  return Math.round(total / items.length);
+}
+
+// src/core/uploader-controller.ts
+var DEFAULT_PARALLEL_UPLOADS = 4;
+var UploaderController = class extends EventTarget {
+  constructor(client, target, options) {
+    super();
+    this.items = [];
+    this.abortController = null;
+    this.isUploading = false;
+    this.duplicateConflicts = /* @__PURE__ */ new Set();
+    this.client = client;
+    this.targetElement = target;
+    this.options = options;
+    this.applyTheme();
+  }
+  isAbortError(error) {
+    if (!error) return false;
+    if (error instanceof DOMException && error.name === "AbortError") return true;
+    if (error instanceof Error && error.name === "AbortError") return true;
+    const message = error instanceof Error ? error.message : typeof error === "string" ? error : "";
+    return typeof message === "string" && message.toLowerCase().includes("abort");
+  }
+  setOptions(options) {
+    this.options = {
+      ...this.options,
+      ...options
+    };
+    this.applyTheme();
+    this.dispatch("statechange");
+  }
+  getOptions() {
+    return this.options;
+  }
+  getState() {
+    return {
+      items: this.items,
+      isUploading: this.isUploading,
+      progress: calculateBatchProgress(this.items),
+      duplicates: Array.from(this.duplicateConflicts)
+    };
+  }
+  addFiles(files) {
+    const existingKeys = /* @__PURE__ */ new Map();
+    const basePathKey = this.normalizePath(this.options.folderPath) ?? "";
+    const buildKey = (file, folderPath, relativePath) => `${basePathKey}::${folderPath ?? ""}::${relativePath ?? ""}::${file.name}::${file.size}`;
+    this.items.forEach((item) => {
+      existingKeys.set(buildKey(item.file, item.folderPath, item.relativePath), item);
+    });
+    const newItems = files.map(({ file, relativePath }) => {
+      const folderPath = getRelativeFolderPath(
+        this.options.folderPath,
+        relativePath
+      );
+      const previewUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : void 0;
+      const baseItem = {
+        id: generateId(),
+        file,
+        relativePath,
+        folderPath,
+        status: "pending",
+        progress: 0,
+        previewUrl
+      };
+      const key = buildKey(file, folderPath, relativePath);
+      if (existingKeys.has(key)) {
+        baseItem.status = "completed";
+        baseItem.progress = 100;
+        baseItem.error = void 0;
+        existingKeys.set(key, baseItem);
+        return baseItem;
+      }
+      existingKeys.set(key, baseItem);
+      return baseItem;
+    });
+    this.items = [...this.items, ...newItems];
+    this.dispatch("filesadded", { detail: { items: newItems } });
+    const duplicates = newItems.filter((item) => item.status === "completed");
+    if (duplicates.length) {
+      this.markDuplicatesCompleted(duplicates);
+    }
+    this.dispatch("statechange");
+  }
+  removeFile(id) {
+    const item = this.items.find((entry) => entry.id === id);
+    if (item?.previewUrl) {
+      URL.revokeObjectURL(item.previewUrl);
+    }
+    this.items = this.items.filter((item2) => item2.id !== id);
+    if (item) {
+      this.duplicateConflicts.delete(item.file.name);
+    }
+    this.dispatch("statechange");
+  }
+  reset() {
+    this.abortController?.abort();
+    this.abortController = null;
+    this.isUploading = false;
+    this.cleanupPreviews();
+    this.items = [];
+    this.duplicateConflicts.clear();
+    this.dispatch("statechange");
+  }
+  async uploadAll() {
+    if (this.isUploading) return;
+    if (this.items.length === 0) return;
+    this.duplicateConflicts.clear();
+    this.isUploading = true;
+    this.abortController = new AbortController();
+    this.dispatch("statechange");
+    try {
+      await this.client.validateApiKey(false, this.abortController?.signal ?? void 0);
+      await this.processUploads();
+      this.dispatch("complete", {
+        detail: {
+          items: this.items,
+          files: this.items.filter((item) => item.status === "completed").map((item) => item.response).filter(Boolean)
+        }
+      });
+    } catch (error) {
+      if (this.isAbortError(error)) {
+        this.dispatch("error", { detail: error });
+        return;
+      }
+      this.annotateItemsWithError(error);
+      this.dispatch("error", { detail: error });
+      throw error;
+    } finally {
+      this.isUploading = false;
+      this.abortController = null;
+      this.dispatch("statechange");
+    }
+  }
+  cancel() {
+    this.abortController?.abort();
+    this.abortController = null;
+  }
+  isDuplicateError(error) {
+    if (!error) return false;
+    if (typeof error === "object" && error !== null) {
+      const status = error.status ?? error.statusCode;
+      if (status === 409) {
+        return true;
+      }
+      const code = error.code;
+      if (typeof code === "string" && code.toLowerCase() === "conflict") {
+        return true;
+      }
+    }
+    const message = error instanceof Error ? error.message : typeof error === "string" ? error : "";
+    const normalized = message.toLowerCase();
+    return normalized.includes("duplicate") || normalized.includes("already exists") || normalized.includes("status 409") || normalized.includes("conflict 409") || normalized.includes("409");
+  }
+  markDuplicatesCompleted(items, duplicateNames, options = {}) {
+    const normalizedNames = duplicateNames?.map((name) => name.trim().toLowerCase()).filter(Boolean) ?? [];
+    const targetSet = normalizedNames.length > 0 ? new Set(normalizedNames) : null;
+    const targetItems = targetSet !== null ? items.filter(
+      (item) => targetSet.has(item.file.name.trim().toLowerCase())
+    ) : items;
+    const duplicates = targetSet !== null && targetItems.length === 0 ? items : targetItems;
+    const { annotateError = true } = options;
+    duplicates.forEach((item) => {
+      if (!item) return;
+      const name = item.file.name;
+      if (!this.duplicateConflicts.has(name)) {
+        this.duplicateConflicts.add(name);
+      }
+      item.status = "completed";
+      item.progress = 100;
+      item.error = annotateError ? "duplicate" : void 0;
+      this.dispatch("fileprogress", { detail: { item } });
+    });
+    if (duplicates.length > 0) {
+      this.dispatch("progress", {
+        detail: {
+          progress: calculateBatchProgress(this.items),
+          items: this.items
+        }
+      });
+      this.dispatch("statechange");
+    }
+    return duplicates;
+  }
+  isAuthError(error) {
+    if (!error || typeof error !== "object") {
+      const message2 = error instanceof Error ? error.message : typeof error === "string" ? error : "";
+      return typeof message2 === "string" && message2.toLowerCase().includes("unauthorized");
+    }
+    const status = error.status;
+    if (typeof status === "number" && (status === 401 || status === 403)) {
+      return true;
+    }
+    const message = error instanceof Error ? error.message : typeof error?.message === "string" ? error.message : "";
+    const normalized = String(message).toLowerCase();
+    return normalized.includes("unauthorized") || normalized.includes("forbidden") || normalized.includes("invalid api key");
+  }
+  annotateItemsWithError(error) {
+    const isAuth = this.isAuthError(error);
+    const fallbackMessage = error instanceof Error ? error.message : typeof error?.message === "string" ? error.message : "Upload failed";
+    let mutated = false;
+    this.items.forEach((item) => {
+      if (item.status === "completed") return;
+      mutated = true;
+      item.status = "error";
+      item.progress = item.progress ?? 0;
+      item.error = isAuth ? "invalid-api-key" : fallbackMessage;
+      this.dispatch("fileprogress", { detail: { item } });
+    });
+    if (mutated) {
+      this.dispatch("progress", {
+        detail: {
+          progress: calculateBatchProgress(this.items),
+          items: this.items
+        }
+      });
+      this.dispatch("statechange");
+    }
+  }
+  async processUploads() {
+    const allItems = this.items.filter((item) => item.status !== "completed");
+    if (allItems.length === 0) {
+      return;
+    }
+    const parallel = Math.max(1, this.options.parallelUploads ?? DEFAULT_PARALLEL_UPLOADS);
+    const uploadSettings = this.options.uploadSettings;
+    const tasks = allItems.map((item) => async () => {
+      if (this.abortController?.signal.aborted) {
+        throw new Error("Upload cancelled");
+      }
+      try {
+        await this.uploadSingleFile(item, uploadSettings);
+      } catch (error) {
+        if (this.isAbortError(error)) {
+          return;
+        }
+        if (this.isDuplicateError(error)) {
+          this.markDuplicatesCompleted([item], [item.file.name], {
+            annotateError: true
+          });
+        } else {
+          const err = error instanceof Error ? error : new Error(String(error));
+          item.status = "error";
+          item.error = err.message;
+          this.dispatch("fileprogress", { detail: { item } });
+          this.dispatch("statechange");
+        }
+      }
+    });
+    await this.runWithConcurrency(tasks, parallel);
+  }
+  async uploadSingleFile(item, uploadSettings) {
+    item.status = "uploading";
+    item.progress = 0;
+    this.dispatch("statechange");
+    const folderPath = item.folderPath ? this.combinePaths(this.options.folderPath, item.folderPath) : this.normalizePath(this.options.folderPath);
+    const initResponse = await this.client.uploadInit(
+      {
+        fileName: item.file.name,
+        fileSize: item.file.size,
+        mimeType: item.file.type || "application/octet-stream",
+        path: folderPath,
+        settings: uploadSettings ? {
+          pretransformations: uploadSettings.pretransformations,
+          tags: uploadSettings.tags,
+          is_unique_suffix_name: uploadSettings.is_unique_suffix_name ?? false
+        } : void 0
+      },
+      this.abortController?.signal
+    );
+    item.progress = 10;
+    this.dispatch("fileprogress", { detail: { item } });
+    this.dispatch("statechange");
+    const appRunnerResponse = await this.client.ingest(
+      item.file,
+      initResponse.uploadToken,
+      initResponse.uploadUrl,
+      (progress) => {
+        item.progress = 10 + Math.round(progress * 0.8);
+        this.dispatch("fileprogress", { detail: { item } });
+        this.dispatch("progress", {
+          detail: {
+            progress: calculateBatchProgress(this.items),
+            items: this.items
+          }
+        });
+      },
+      this.abortController?.signal
+    );
+    if (!appRunnerResponse.ok) {
+      throw new Error(appRunnerResponse.message || "Upload failed");
+    }
+    item.progress = 90;
+    this.dispatch("fileprogress", { detail: { item } });
+    this.dispatch("statechange");
+    const completeResponse = await this.client.completeUploadNew(
+      {
+        uploadId: initResponse.uploadId,
+        appRunnerResponse
+      },
+      this.abortController?.signal
+    );
+    item.status = "completed";
+    item.progress = 100;
+    item.response = {
+      file_no: completeResponse.file_no,
+      name: completeResponse.name,
+      url: completeResponse.url,
+      file_size: completeResponse.file_size,
+      folder_no: void 0,
+      // Not available in new response
+      path: completeResponse.path,
+      width: completeResponse.width,
+      height: completeResponse.height,
+      format: completeResponse.format
+    };
+    item.uploadedAt = new Date(completeResponse.created_at);
+    if (completeResponse.isDuplicate) {
+      item.error = "duplicate";
+    }
+    this.dispatch("fileprogress", { detail: { item } });
+    this.dispatch("progress", {
+      detail: {
+        progress: calculateBatchProgress(this.items),
+        items: this.items
+      }
+    });
+    this.dispatch("statechange");
+  }
+  applyTheme() {
+    if (!this.options.theme) return;
+    const vars = toCssVars(this.options.theme);
+    applyCssVariables(this.targetElement, vars);
+    if (this.options.theme.appearance && this.options.theme.appearance !== "system") {
+      this.targetElement.dataset.theme = this.options.theme.appearance;
+    } else {
+      delete this.targetElement.dataset.theme;
+    }
+  }
+  dispatch(event, detail) {
+    const customEvent = new CustomEvent(event, { detail });
+    this.dispatchEvent(customEvent);
+    switch (event) {
+      case "progress":
+        this.options.onProgress?.(
+          detail?.progress ?? calculateBatchProgress(this.items),
+          this.items
+        );
+        break;
+      case "fileprogress":
+        this.options.onFileProgress?.(detail.item);
+        break;
+      case "error":
+        this.options.onError?.(
+          detail instanceof Error ? detail : new Error(String(detail))
+        );
+        break;
+      case "complete":
+        this.options.onSuccess?.({
+          files: detail?.files ?? [],
+          items: this.items
+        });
+        break;
+      default:
+        break;
+    }
+  }
+  async runWithConcurrency(tasks, limit) {
+    const executing = /* @__PURE__ */ new Set();
+    for (const task of tasks) {
+      if (this.abortController?.signal.aborted) {
+        throw new Error("Upload cancelled");
+      }
+      const promise = task().finally(() => {
+        executing.delete(promise);
+      });
+      executing.add(promise);
+      if (executing.size >= limit) {
+        await Promise.race(executing);
+      }
+    }
+    await Promise.all(executing);
+  }
+  cleanupPreviews() {
+    this.items.forEach((item) => {
+      if (item.previewUrl) {
+        URL.revokeObjectURL(item.previewUrl);
+        item.previewUrl = void 0;
+      }
+    });
+  }
+  normalizePath(path) {
+    if (!path) {
+      return void 0;
+    }
+    const normalized = path.split("/").map((segment) => segment.trim()).filter(Boolean).join("/");
+    return normalized.length > 0 ? normalized : void 0;
+  }
+  combinePaths(basePath, relativePath) {
+    const base = this.normalizePath(basePath);
+    const relative = this.normalizePath(relativePath);
+    if (base && relative) {
+      return `${base}/${relative}`;
+    }
+    return base || relative || void 0;
+  }
+};
+
+// src/widget/styles.ts
+var widgetStyles = (
+  /* css */
+  `
+:host {
+  --ar-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --ar-color-bg: hsl(0 0% 100%);
+  --ar-color-bg-muted: hsl(210 40% 96%);
+  --ar-color-border: hsl(214 32% 91%);
+  --ar-color-text: hsl(222 47% 11%);
+  --ar-color-muted-foreground: hsl(215 16% 47%);
+  --ar-color-accent: #0C55F9;
+  --ar-radius: 8px;
+  display: block;
+}
+
+
+:host([data-trigger='inline']) .ar-uploader-root,
+:host([data-trigger='inline']) .ar-inline-upload,
+:host([data-trigger='inline']) .ar-inline-panel {
+  width: 100%;
+  min-width: 0;
+}
+
+:host([data-theme='dark']) {
+  --ar-color-bg: hsl(222 41% 6%);
+  --ar-color-bg-muted: hsl(217 33% 17%);
+  --ar-color-border: hsl(217 19% 27%);
+  --ar-color-text: hsl(213 31% 91%);
+  --ar-color-muted-foreground: hsl(215 20% 65%);
+  --ar-color-accent: #4C8DFF;
+}
+
+.ar-uploader-root {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  font-family: var(--ar-font-family);
+  background-color: var(--ar-color-bg);
+  color: var(--ar-color-text);
+  border: 1px solid var(--ar-color-border);
+  border-radius: var(--ar-radius);
+  padding: 0.5rem 1rem 1rem 1rem;
+}
+
+/* Reduce root gap when sources are empty in inline mode */
+:host([data-trigger='inline']) .ar-uploader-root:has(.ar-inline-upload--no-sources) {
+  gap: 0.75rem;
+}
+
+
+:host([data-theme='dark']) .ar-uploader-root {
+  background-color: hsl(222 41% 6%);
+}
+
+.ar-uploader-root[data-trigger='button'] {
+  border: none;
+  padding: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+.ar-header {
+  display: none;
+}
+
+.ar-uploader-root.has-items .ar-header {
+  display: flex;
+}
+
+.ar-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.ar-description {
+  margin: 0;
+  color: var(--ar-color-muted-foreground);
+  font-size: 0.95rem;
+}
+
+.ar-subtext {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--ar-color-muted-foreground);
+}
+
+.ar-button-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.55rem 1.25rem;
+  font-weight: 600;
+  border-radius: var(--ar-radius);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(248, 250, 252, 0.9);
+  color: var(--ar-color-text);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
+}
+
+:host([data-theme='dark']) .ar-button-trigger {
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  background: rgba(30, 41, 59, 0.75);
+  color: var(--ar-color-text);
+}
+
+.ar-button-trigger:hover {
+  transform: translateY(-1px);
+}
+
+.ar-button-trigger:active {
+  transform: translateY(0);
+}
+
+.ar-button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ar-button-icon svg {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
+
+.ar-inline-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+}
+
+/* Reduce gap when sources are empty in inline mode */
+:host([data-trigger='inline']) .ar-inline-upload--no-sources {
+  gap: 0.5rem;
+}
+
+.ar-inline-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.ar-dropzone {
+  position: relative;
+  border: 1.5px dashed var(--ar-dropzone-border, var(--ar-color-border));
+  border-radius: var(--ar-radius);
+  background: var(--ar-dropzone-bg, var(--ar-color-bg));
+  padding: 3rem 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 1rem;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+  margin: 0.6rem 0rem 1rem 0rem;
+}
+
+/* Reduce bottom margin when sources are empty in inline mode */
+:host([data-trigger='inline']) .ar-modal-body--no-sources .ar-dropzone {
+  margin-bottom: 0.25rem;
+}
+
+.ar-dropzone:hover {
+  border-color: var(--ar-color-accent);
+  background-color: rgba(12, 85, 249, 0.07);
+  transform: translateY(-1px);
+}
+
+.ar-dropzone.is-dragover {
+  border-color: var(--ar-color-accent);
+  background-color: rgba(12, 85, 249, 0.1);
+}
+
+.ar-dropzone.is-dragging {
+  border-color: var(--ar-color-accent);
+  background: rgba(12, 85, 249, 0.08);
+  color: var(--ar-color-accent);
+}
+
+.ar-dropzone-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 999px;
+  background: rgba(12, 85, 249, 0.08);
+  color: var(--ar-color-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ar-dropzone svg {
+  width: 1.75rem;
+  height: 1.75rem;
+  fill: currentColor;
+}
+
+.ar-dropzone-actions {
+  display: none;
+}
+
+.ar-file-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.ar-file-list.is-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 1rem;
+}
+
+.ar-file-item {
+  border: none;
+  border-radius: var(--ar-radius);
+  background: rgba(148, 163, 184, 0.15);
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  position: relative;
+  box-sizing: border-box;
+  height: 50px;
+}
+
+.ar-file-item.is-grid {
+  height: auto;
+  padding: 0px;
+  background: none;
+}
+
+:host([data-theme='dark']) .ar-file-item {
+  background: hsl(222 41% 10%);
+}
+
+.ar-file-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.ar-file-header.is-grid {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.ar-file-thumb {
+  width: 32px;
+  height: 32px;
+  border-radius: calc(var(--ar-radius) * 0.5);
+  background: rgba(12, 85, 249, 0.1);
+  color: var(--ar-color-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  font-weight: 600;
+  overflow: hidden;
+  position: relative;
+}
+
+.ar-file-thumb.is-grid {
+  width: 100%;
+  height: 140px;
+  border-radius: calc(var(--ar-radius) * 0.75);
+  font-size: 1rem;
+}
+
+.ar-file-item.is-completed .ar-file-thumb {
+  color: #fff;
+}
+
+.ar-thumb-status {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #1e9f6d;
+  color: #fff;
+  border: 2px solid var(--ar-color-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
+}
+
+.ar-thumb-status svg {
+  width: 10px;
+  height: 10px;
+  color: currentColor;
+}
+
+.ar-thumb-status.is-error {
+  background: rgba(225, 29, 72, 0.85);
+}
+
+.ar-file-name {
+  font-size: 0.8rem;
+  margin: 0;
+  color: var(--ar-color-text);
+}
+
+.ar-file-meta {
+  display: flex;
+  gap: 0.75rem;
+  font-size: 0.8rem;
+  color: var(--ar-color-muted-foreground);
+}
+
+.ar-file-item.is-grid .ar-file-meta {
+  justify-content: center;
+}
+
+.ar-remove-button {
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  color: var(--ar-color-muted-foreground);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--ar-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.ar-remove-button.is-grid {
+  position: absolute;
+  top: 0.6rem;
+  right: 0.6rem;
+  background: rgba(255, 255, 255, 0.95);
+  color: var(--ar-color-text);
+  padding: 0.35rem;
+  border-radius: var(--ar-radius);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, background 0.2s ease, color 0.2s ease;
+}
+
+.ar-file-item.is-grid:hover .ar-remove-button.is-grid {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+:host([data-theme='dark']) .ar-remove-button.is-grid {
+  background: rgba(15, 23, 42, 0.92);
+  color: var(--ar-color-text);
+  box-shadow: 0 4px 18px rgba(8, 47, 73, 0.45);
+}
+
+.ar-remove-button svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
+.ar-remove-button svg path,
+.ar-remove-button svg line,
+.ar-remove-button svg rect,
+.ar-remove-button svg circle,
+.ar-remove-button svg polyline {
+  stroke: currentColor;
+  fill: none;
+}
+
+.ar-remove-button:hover:not([disabled]) {
+  color: var(--ar-color-text);
+}
+
+.ar-progress-track {
+  width: 100%;
+  height: 4px;
+  border-radius: var(--ar-radius);
+  background-color: rgba(148, 163, 184, 0.35);
+  overflow: hidden;
+}
+
+.ar-file-item.is-uploading {
+  border-color: var(--ar-color-accent);
+}
+
+.ar-file-item.is-error {
+  border: 1px solid rgba(225, 29, 72, 0.4);
+  background: rgba(248, 113, 113, 0.12);
+}
+
+.ar-progress-border {
+  opacity: 0;
+  height: 2px;
+  width: 96%;
+  border-radius: 999px;
+  background: rgba(59, 130, 246, 0.18);
+  overflow: hidden;
+  margin-top: 0.35rem;
+  position: absolute;
+  bottom: 0;
+  left: 6px;
+  right: 6px;
+}
+
+.ar-progress-border.is-active,
+.ar-progress-border.is-complete {
+  opacity: 1;
+}
+
+.ar-progress-border.is-train {
+  background: rgba(59, 130, 246, 0.18);
+}
+
+.ar-progress-fill {
+  height: 100%;
+  width: 0%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
+  transition: width 0.25s ease;
+  transform-origin: left center;
+  animation: none;
+}
+
+.ar-progress-fill.is-train {
+  background-image: linear-gradient(
+    90deg,
+    rgba(245, 250, 241, 0.93) 0%,
+    rgba(240, 242, 247, 0.85) 80%,
+    rgb(30, 101, 212) 100%
+  );
+  background-size: 220% 100%;
+  animation: ar-progress-train 2.4s linear infinite;
+}
+
+.ar-progress-border.is-complete {
+  background: rgba(34, 197, 94, 0.25);
+}
+
+.ar-progress-border.is-complete .ar-progress-fill {
+  background-image: linear-gradient(
+    90deg,
+    rgba(52, 211, 153, 0.3) 0%,
+    rgba(16, 185, 129, 0.85) 50%,
+    rgba(52, 211, 153, 0.3) 100%
+  );
+  animation: none;
+}
+
+@keyframes ar-progress-train {
+  0% {
+    background-position: 240% 0;
+  }
+  100% {
+    background-position: -240% 0;
+  }
+}
+
+.ar-file-item.is-completed {
+  border-color: rgba(30, 159, 109, 0.6);
+}
+
+.ar-file-item.is-grid .ar-file-name {
+  text-align: left;
+  font-size: 0.78rem;
+  color: var(--ar-color-muted-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ar-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--ar-color-muted-foreground);
+}
+
+.ar-status svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ar-status.is-success {
+  color: #1e9f6d;
+}
+
+.ar-status.is-error {
+  color: #e11d48;
+}
+
+.ar-status.is-warning {
+  color: #d97706;
+}
+
+.ar-file-error {
+  font-size: 0.78rem;
+  color: #e11d48;
+}
+
+.ar-error-banner {
+  display: none;
+  margin: 0.5rem 0;
+  color: #b91c1c;
+  font-size: 0.82rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.ar-error-banner:not([hidden]) {
+  display: block;
+}
+
+:host([data-theme='dark']) .ar-error-banner {
+  color: #fecaca;
+}
+
+.ar-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ar-upload-button {
+  border-radius: 10px;
+  padding: 0.65rem 1.5rem;
+  font-weight: 600;
+  border: none;
+  background: var(--ar-color-accent);
+  color: white;
+  cursor: pointer;
+  transition: filter 0.2s ease, transform 0.2s ease;
+  min-width: 140px;
+}
+
+.ar-upload-button:hover:not([disabled]) {
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+
+.ar-upload-button[disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.ar-footer {
+  font-size: 0.78rem;
+  color: var(--ar-color-muted-foreground);
+  text-align: right;
+}
+
+.ar-modal {
+  position: fixed;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.ar-modal.is-open {
+  display: flex;
+}
+
+.ar-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+}
+
+.ar-modal-dialog {
+  position: relative;
+  background: var(--ar-color-bg);
+  border-radius: 16px;
+  border: 1px solid var(--ar-color-border);
+  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.25);
+  width: min(460px, 92vw);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 1rem 1rem 1rem;
+}
+
+.ar-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.ar-modal-header.is-inline {
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.5rem;
+  padding-top:0.5rem;
+}
+
+.ar-modal-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.ar-modal-close {
+  border: none;
+  background: transparent;
+  color: var(--ar-color-muted-foreground);
+  cursor: pointer;
+  border-radius: 999px;
+  padding: 0.3rem;
+  transition: color 0.2s ease, background 0.2s ease;
+}
+
+.ar-modal-close:hover {
+  background: rgba(148, 163, 184, 0.15);
+  color: var(--ar-color-accent);
+}
+
+.ar-modal-close-icon svg {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.ar-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  padding-right: 0.25rem;
+}
+
+/* Reduce gap when source list is hidden in inline mode */
+:host([data-trigger='inline']) .ar-modal-body--no-sources {
+  gap: 0.5rem;
+}
+
+.ar-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.ar-modal-footer.is-inline {
+  padding: 0;
+  border-top: none;
+}
+
+.ar-modal-footer.is-inline .ar-modal-footer-actions {
+  margin-left: auto;
+}
+
+.ar-modal-footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ar-modal-add-more,
+.ar-modal-clear {
+  border-radius: var(--ar-radius);
+  padding: 0.55rem 1.25rem;
+  font-weight: 600;
+  border: 1px solid var(--ar-color-border);
+  background: var(--ar-color-bg);
+  color: var(--ar-color-text);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.ar-modal-add-more:hover {
+  border-color: var(--ar-color-accent);
+  color: var(--ar-color-accent);
+}
+
+.ar-modal-clear {
+  background: rgba(148, 163, 184, 0.12);
+}
+
+.ar-modal-clear[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ar-modal-clear:hover {
+  border-color: var(--ar-color-accent);
+  color: var(--ar-color-accent);
+}
+
+.ar-modal-upload-button,
+.ar-modal-done {
+  border-radius: var(--ar-radius);
+  padding: 0.55rem 1.25rem;
+  font-weight: 600;
+  border: none;
+  background: var(--ar-color-accent);
+  color: white;
+  cursor: pointer;
+  transition: filter 0.2s ease;
+}
+
+.ar-modal-upload-button:hover,
+.ar-modal-done:hover {
+  filter: brightness(1.05);
+}
+
+.ar-uploaded-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  border-top: 1px solid var(--ar-color-border);
+  padding-top: 1rem;
+}
+
+.ar-uploader-root[data-trigger='button'] .ar-uploaded-summary {
+  border: 1px solid var(--ar-color-border);
+  border-radius: var(--ar-radius);
+  padding: 1rem;
+  background: var(--ar-color-bg-muted);
+}
+
+.ar-summary-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.ar-summary-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ar-summary-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ar-summary-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: rgba(12, 85, 249, 0.12);
+  color: var(--ar-color-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+.ar-summary-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.ar-summary-name {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.ar-summary-meta {
+  font-size: 0.8rem;
+  color: var(--ar-color-muted-foreground);
+}
+
+.ar-uploader-root.is-uploading .ar-dropzone {
+  display: none;
+}
+
+.ar-uploader-root.has-items .ar-file-list {
+  display: flex;
+}
+
+.ar-file-list:empty {
+  display: none;
+}
+
+.ar-modal-upload {
+  display: flex;
+  flex-direction: column;
+}
+
+.ar-modal-upload.is-inline {
+  gap: 1rem;
+}
+
+.ar-modal-body .ar-file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 220px;
+  overflow-y: auto;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+button,
+.ar-button-trigger,
+.ar-dropzone-button,
+.ar-upload-button,
+.ar-modal-footer button,
+.ar-actions button,
+.ar-remove-button,
+.ar-modal-header button {
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+@media (max-width: 640px) {
+  .ar-uploader-root {
+    padding: 1rem;
+  }
+
+  .ar-dropzone {
+    padding: 2.25rem 1.25rem;
+  }
+
+  .ar-modal-dialog {
+    width: min(90vw, 420px);
+    padding: 1.25rem;
+  }
+}
+
+.ar-actions-sources,
+.ar-modal-sources {
+  display: none;
+}
+
+.ar-actions-sources.is-visible,
+.ar-modal-sources.is-visible {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.ar-source-list {
+  display: none;
+  flex-direction: column;
+  margin: 1rem 0rem;
+}
+
+/* Remove margin when source list is hidden in inline mode */
+:host([data-trigger='inline']) .ar-source-list:not(.ar-source-list--choices) {
+  margin: 0;
+}
+
+.ar-source-list--choices {
+  display: flex;
+}
+
+.ar-source-option {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  width: 100%;
+  border: none;
+  border-radius: var(--ar-radius);
+  background: transparent;
+  padding: 0.55rem 0.75rem;
+  text-align: left;
+  color: var(--ar-color-text);
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.ar-source-option.is-primary {
+  background: rgba(12, 85, 249, 0.12);
+  color: var(--ar-color-accent);
+}
+
+.ar-source-option:hover:not([disabled]),
+.ar-source-option:focus-visible {
+  background: rgba(12, 85, 249, 0.08);
+  color: var(--ar-color-accent);
+}
+
+.ar-source-option[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ar-source-option-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--ar-color-muted-foreground);
+}
+
+.ar-source-option-label {
+  flex: 1;
+  font-size: 0.95rem;
+}
+
+.ar-source-inline {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.ar-source-inline-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  border: 1px solid var(--ar-color-border);
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ar-color-text);
+  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.ar-source-inline-button:hover:not([disabled]) {
+  background: rgba(12, 85, 249, 0.12);
+  color: var(--ar-color-accent);
+  border-color: rgba(12, 85, 249, 0.2);
+}
+
+.ar-source-inline-button svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+.ar-modal-cancel {
+  background: rgba(148, 163, 184, 0.15);
+  border: none;
+  color: var(--ar-color-text);
+  padding:0.5rem 1rem;
+  border-radius: var(--ar-radius);
+}
+
+.ar-modal-cancel:hover:not([disabled]) {
+  background: rgba(148, 163, 184, 0.25);
+}
+
+.ar-modal-cancel.is-fullwidth {
+  width: 100%;
+  justify-content: center;
+  border-radius: var(--ar-radius);
+  cursor: pointer;
+}
+
+.ar-modal-powered,
+.ar-inline-powered {
+  margin-top: 12px;
+  font-size: 0.75rem;
+  color: var(--ar-color-muted-foreground);
+  text-align: center;
+}
+
+/* Reduce margin when sources are empty in inline mode */
+:host([data-trigger='inline']) .ar-inline-upload--no-sources .ar-inline-powered {
+  margin-top: 0.5rem;
+}
+
+.ar-duplicate-banner {
+  display: none;
+  margin: 0.75rem 0;
+  padding: 0.75rem;
+  border-radius: var(--ar-radius);
+  background: rgba(248, 113, 113, 0.12);
+  color: #9f1239;
+  font-size: 0.85rem;
+  line-height: 1.3;
+}
+
+.ar-duplicate-banner[hidden] {
+  display: none !important;
+}
+
+`
+);
+
+// src/widget/uploader-element.ts
+var AutorenderUploaderElement = class extends HTMLElement {
+  constructor() {
+    super();
+    this.controller = null;
+    this.labels = DEFAULT_LABELS;
+    this.icons = DEFAULT_ICONS;
+    this.classNames = {};
+    this.sourceOptions = [];
+    this.triggerType = "inline";
+    this.isModalOpen = false;
+    this.fileLayout = "list";
+    this.showGridFileName = true;
+    this.rootElement = null;
+    this.dropzone = null;
+    this.fileList = null;
+    this.sourceLists = [];
+    this.modalBody = null;
+    this.inlineUpload = null;
+    this.uploadButton = null;
+    this.triggerButton = null;
+    this.modalElement = null;
+    this.modalCloseButton = null;
+    this.modalDoneButton = null;
+    this.modalClearButton = null;
+    this.modalUploadButton = null;
+    this.modalCancelButton = null;
+    this.modalAddMoreButton = null;
+    this.modalFooterActions = null;
+    this.modalSourceContainer = null;
+    this.actionsSourceContainer = null;
+    this.modalTitleElement = null;
+    this.modalHeaderElement = null;
+    this.modalPoweredElement = null;
+    this.inlinePoweredElement = null;
+    this.duplicateBanners = [];
+    this.errorBannerElement = null;
+    this.globalErrorMessage = null;
+    this.controllerListeners = /* @__PURE__ */ new Map();
+    this.handleKeydown = (event) => {
+      if (event.key === "Escape" && this.isModalOpen) {
+        this.isModalOpen = false;
+        this.render();
+      }
+    };
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  isAbortError(error) {
+    if (!error) return false;
+    if (error instanceof DOMException && error.name === "AbortError") return true;
+    if (error instanceof Error && error.name === "AbortError") return true;
+    const message = error instanceof Error ? error.message : typeof error === "string" ? error : "";
+    return typeof message === "string" && message.toLowerCase().includes("abort");
+  }
+  connectedCallback() {
+    this.render();
+  }
+  disconnectedCallback() {
+    this.detachController();
+    window.removeEventListener("keydown", this.handleKeydown);
+  }
+  setController(controller, options) {
+    this.detachController();
+    this.controller = controller;
+    this.globalErrorMessage = null;
+    this.applyOptions(options);
+    this.attachController();
+    this.render();
+  }
+  updateOptions(options) {
+    if (!this.controller) return;
+    this.applyOptions({ ...this.options, ...options });
+    this.controller.setOptions(this.options);
+    this.render();
+  }
+  openFileDialog() {
+    if (this.triggerType === "button" && !this.isModalOpen) {
+      this.isModalOpen = true;
+      this.render();
+      requestAnimationFrame(() => this.fileInput?.click());
+      return;
+    }
+    this.fileInput?.click();
+  }
+  applyOptions(options) {
+    const previousOptions = this.options ?? {};
+    const themeInput = options.theme ?? previousOptions.theme ?? DEFAULT_THEME;
+    const resolvedTheme = {
+      appearance: themeInput.appearance ?? DEFAULT_THEME.appearance,
+      accentColor: themeInput.accentColor ?? DEFAULT_THEME.accentColor,
+      borderRadius: themeInput.borderRadius ?? DEFAULT_THEME.borderRadius,
+      dropzoneBackground: themeInput.dropzoneBackground ?? DEFAULT_THEME.dropzoneBackground,
+      dropzoneBorder: themeInput.dropzoneBorder ?? DEFAULT_THEME.dropzoneBorder,
+      fontFamily: themeInput.fontFamily ?? previousOptions.theme?.fontFamily
+    };
+    const resolvedSources = options.sources ?? previousOptions.sources ?? [];
+    const previousSourceIds = this.sourceOptions?.map((s) => s.id).sort().join(",") ?? "";
+    this.options = {
+      ...previousOptions,
+      ...options,
+      theme: resolvedTheme,
+      sources: resolvedSources
+    };
+    this.labels = {
+      ...DEFAULT_LABELS,
+      ...this.options.labels ?? {}
+    };
+    this.icons = DEFAULT_ICONS;
+    const currentSourceIds = resolvedSources.map((s) => s.id).sort().join(",");
+    const sourcesChanged = previousSourceIds !== currentSourceIds;
+    this.sourceOptions = resolvedSources;
+    this.options.onSourceSelect = options.onSourceSelect ?? previousOptions.onSourceSelect;
+    const requestedType = this.options.type ?? "inline";
+    this.triggerType = requestedType === "button" ? "button" : "inline";
+    this.fileLayout = this.options.fileLayout ?? "list";
+    this.showGridFileName = this.options.showGridFileName ?? true;
+    this.classNames = this.options.classNames ?? {};
+    if (this.options.autoUpload === void 0 && this.triggerType === "inline") {
+      this.options.autoUpload = true;
+    }
+    if (this.rootElement && sourcesChanged) {
+      const hasItems = this.controller?.getState().items.length > 0;
+      this.renderSourceOptions(hasItems);
+    }
+  }
+  attachController() {
+    if (!this.controller) return;
+    const stateListener = () => this.updateState();
+    const progressListener = () => this.updateState();
+    const filesAddedListener = (event) => {
+      const detail = event.detail;
+      if (this.options.autoUpload && detail?.items?.length) {
+        void this.controller?.uploadAll();
+      }
+    };
+    const completeListener = () => {
+      this.clearGlobalError();
+      this.render();
+    };
+    const errorListener = (event) => {
+      const detail = event.detail;
+      this.handleControllerError(detail);
+    };
+    this.controller.addEventListener("statechange", stateListener);
+    this.controller.addEventListener("progress", progressListener);
+    this.controller.addEventListener("fileprogress", progressListener);
+    this.controller.addEventListener("filesadded", filesAddedListener);
+    this.controller.addEventListener("complete", completeListener);
+    this.controller.addEventListener("error", errorListener);
+    this.controllerListeners.set("statechange", stateListener);
+    this.controllerListeners.set("progress", progressListener);
+    this.controllerListeners.set("fileprogress", progressListener);
+    this.controllerListeners.set("filesadded", filesAddedListener);
+    this.controllerListeners.set("complete", completeListener);
+    this.controllerListeners.set("error", errorListener);
+  }
+  detachController() {
+    if (!this.controller) return;
+    for (const [event, handler] of this.controllerListeners.entries()) {
+      this.controller.removeEventListener(event, handler);
+    }
+    this.controllerListeners.clear();
+    this.controller = null;
+  }
+  resolveClassName(key, fallback) {
+    const extra = this.classNames[key];
+    return extra ? `${fallback} ${extra}` : fallback;
+  }
+  render() {
+    if (!this.controller) return;
+    this.setAttribute("data-trigger", this.triggerType);
+    const duplicateBannerMarkup = `<div class="ar-duplicate-banner" hidden></div>`;
+    const errorBannerMarkup = `<div class="ar-error-banner" role="alert" hidden></div>`;
+    const dropzoneMarkup = `
+      <div class="${this.resolveClassName("dropzone", "ar-dropzone")}" role="button" tabindex="0">
+        <div class="ar-dropzone-icon"></div>
+        <p class="ar-description">${this.labels.dropzoneTitle}</p>
+      </div>
+    `;
+    const fileListMarkup = `<ul class="${this.resolveClassName("fileList", "ar-file-list")}"></ul>`;
+    const sourceListMarkup = '<div class="ar-source-list"></div>';
+    const modalHeaderMarkup = `
+      <div class="ar-modal-header">
+        <h3 class="ar-modal-title">${this.labels.title}</h3>
+        <button type="button" class="ar-modal-close" aria-label="Close"><span class="ar-modal-close-icon"></span></button>
+      </div>
+    `;
+    const inlineHeaderMarkup = `
+      <div class="ar-modal-header is-inline">
+        <h3 class="ar-modal-title">${this.labels.title}</h3>
+      </div>
+    `;
+    const uploadPanelMarkup = `
+      <div class="ar-modal-body">
+        <div class="ar-modal-upload${this.triggerType === "inline" ? " is-inline" : ""}">
+          ${dropzoneMarkup}
+          ${errorBannerMarkup}
+          ${duplicateBannerMarkup}
+          ${sourceListMarkup}
+          ${fileListMarkup}
+        </div>
+      </div>
+    `;
+    const footerMarkup = `
+      <div class="ar-modal-footer${this.triggerType === "inline" ? " is-inline" : ""}">
+        <button type="button" class="ar-modal-clear">${this.labels.clear}</button>
+        <button type="button" class="ar-modal-cancel">${this.labels.cancel}</button>
+        <div class="ar-modal-footer-actions">
+          <div class="ar-modal-sources"></div>
+          <button type="button" class="ar-modal-add-more">${this.labels.addMore}</button>
+          <button type="button" class="ar-modal-upload-button">${this.labels.uploadButton}</button>
+          <button type="button" class="ar-modal-done">${this.labels.done}</button>
+        </div>
+      </div>
+    `;
+    const modalMarkup = this.triggerType === "button" ? `
+      <div class="${this.resolveClassName("modal", "ar-modal")} ${this.isModalOpen ? "is-open" : ""}">
+        <div class="ar-modal-backdrop"></div>
+        <div class="ar-modal-dialog">
+          ${modalHeaderMarkup}
+          ${uploadPanelMarkup}
+          ${footerMarkup}
+          <div class="ar-modal-powered">Powered by Autorender</div>
+        </div>
+      </div>
+    ` : "";
+    const inlineMarkup = this.triggerType === "inline" ? `
+        <div class="ar-inline-upload">
+          <div class="ar-inline-panel">
+            ${inlineHeaderMarkup}
+            ${uploadPanelMarkup}
+            ${footerMarkup}
+          </div>
+          <div class="ar-inline-powered">Powered by Autorender</div>
+        </div>
+      ` : "";
+    const template = document.createElement("template");
+    template.innerHTML = `
+      <style>${widgetStyles}</style>
+      <div class="${this.resolveClassName("root", "ar-uploader-root")}" data-trigger="${this.triggerType}">
+        <input type="file" class="ar-file-input" hidden />
+        ${this.triggerType === "button" ? `<button type="button" class="${this.resolveClassName("triggerButton", "ar-button-trigger")}" ${this.isModalOpen ? 'style="display: none;"' : ""}><span class="ar-button-icon"></span><span>${this.labels.selectButton}</span></button>` : inlineMarkup}
+        ${modalMarkup}
+      </div>
+    `;
+    this.shadow.innerHTML = "";
+    this.shadow.appendChild(template.content.cloneNode(true));
+    this.captureElements();
+    this.applyDimensions();
+    this.configureInputs();
+    this.bindEvents();
+    this.applyThemeVariables();
+    this.updateState();
+    if (this.triggerType === "button") {
+      if (this.isModalOpen) {
+        window.addEventListener("keydown", this.handleKeydown);
+      } else {
+        window.removeEventListener("keydown", this.handleKeydown);
+      }
+    }
+  }
+  captureElements() {
+    this.rootElement = this.shadow.querySelector(".ar-uploader-root");
+    this.fileInput = this.shadow.querySelector(".ar-file-input");
+    this.dropzone = this.shadow.querySelector(".ar-dropzone");
+    this.fileList = this.shadow.querySelector(".ar-file-list");
+    this.sourceLists = Array.from(this.shadow.querySelectorAll(".ar-source-list"));
+    this.modalBody = this.shadow.querySelector(".ar-modal-body");
+    this.inlineUpload = this.shadow.querySelector(".ar-inline-upload");
+    this.uploadButton = this.shadow.querySelector(".ar-upload-button");
+    this.triggerButton = this.shadow.querySelector(".ar-button-trigger");
+    this.modalElement = this.shadow.querySelector(".ar-modal");
+    this.modalCloseButton = this.shadow.querySelector(".ar-modal-close");
+    this.modalDoneButton = this.shadow.querySelector(".ar-modal-done");
+    this.modalClearButton = this.shadow.querySelector(".ar-modal-clear");
+    this.modalUploadButton = this.shadow.querySelector(".ar-modal-upload-button");
+    this.modalCancelButton = this.shadow.querySelector(".ar-modal-cancel");
+    this.modalAddMoreButton = this.shadow.querySelector(".ar-modal-add-more");
+    this.modalFooterActions = this.shadow.querySelector(".ar-modal-footer-actions");
+    this.modalSourceContainer = this.shadow.querySelector(".ar-modal-sources");
+    this.actionsSourceContainer = this.shadow.querySelector(".ar-actions-sources");
+    this.modalTitleElement = this.shadow.querySelector(".ar-modal-title");
+    this.modalHeaderElement = this.shadow.querySelector(".ar-modal-header");
+    this.modalPoweredElement = this.shadow.querySelector(".ar-modal-powered");
+    this.inlinePoweredElement = this.shadow.querySelector(".ar-inline-powered");
+    this.duplicateBanners = Array.from(
+      this.shadow.querySelectorAll(".ar-duplicate-banner")
+    );
+    this.errorBannerElement = this.shadow.querySelector(".ar-error-banner");
+    this.updateErrorBanner();
+    const icon = resolveIcon(this.icons.upload);
+    const iconContainer = this.shadow.querySelector(".ar-dropzone-icon");
+    if (icon && iconContainer) {
+      iconContainer.innerHTML = "";
+      iconContainer.appendChild(icon);
+    }
+    const buttonIcon = resolveIcon(this.icons.upload);
+    const triggerIconContainer = this.shadow.querySelector(".ar-button-icon");
+    if (buttonIcon && triggerIconContainer) {
+      triggerIconContainer.innerHTML = "";
+      triggerIconContainer.appendChild(buttonIcon);
+    }
+    const closeIcon = resolveIcon(this.icons.close);
+    const closeIconContainer = this.shadow.querySelector(".ar-modal-close-icon");
+    if (closeIcon && closeIconContainer) {
+      closeIconContainer.innerHTML = "";
+      closeIconContainer.appendChild(closeIcon);
+    }
+  }
+  applyDimensions() {
+    if (!this.rootElement) return;
+    const requestedWidth = this.options.width;
+    if (requestedWidth === void 0 || requestedWidth === null || requestedWidth === "") {
+      if (this.triggerType === "inline") {
+        this.rootElement.style.width = "100%";
+      } else {
+        this.rootElement.style.removeProperty("width");
+      }
+      return;
+    }
+    const normalizedWidth = typeof requestedWidth === "number" ? `${requestedWidth}px` : requestedWidth;
+    this.rootElement.style.width = normalizedWidth;
+  }
+  configureInputs() {
+    this.fileInput?.removeAttribute("webkitdirectory");
+    this.fileInput?.removeAttribute("mozdirectory");
+    this.fileInput?.removeAttribute("directory");
+    if (this.options.allowMultiple === false) {
+      this.fileInput?.removeAttribute("multiple");
+    } else {
+      this.fileInput?.setAttribute("multiple", "");
+    }
+    if (this.options.accept?.length) {
+      this.fileInput.accept = this.options.accept.join(",");
+    }
+  }
+  bindEvents() {
+    this.triggerButton?.addEventListener("click", () => {
+      this.isModalOpen = true;
+      this.render();
+    });
+    this.modalCloseButton?.addEventListener("click", () => {
+      this.isModalOpen = false;
+      this.render();
+    });
+    this.modalElement?.addEventListener("click", (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (target === this.modalElement || target.classList.contains("ar-modal-backdrop")) {
+        this.isModalOpen = false;
+        this.render();
+      }
+    });
+    this.modalUploadButton?.addEventListener("click", () => {
+      if (!this.controller) return;
+      if (this.controller.getState().isUploading) return;
+      void this.controller.uploadAll();
+    });
+    this.modalDoneButton?.addEventListener("click", () => {
+      if (!this.controller) return;
+      const state = this.controller.getState();
+      const allCompleted = state.items.length > 0 && state.items.every((item) => item.status === "completed");
+      if (this.triggerType === "inline") {
+        if (state.isUploading) {
+          return;
+        }
+        if (allCompleted || state.items.length === 0) {
+          this.controller.reset();
+          this.updateState();
+        }
+        return;
+      }
+      if (state.isUploading) {
+        this.closeModal();
+        return;
+      }
+      if (allCompleted) {
+        this.closeModal();
+        return;
+      }
+      this.closeModal();
+    });
+    this.modalClearButton?.addEventListener("click", () => {
+      if (!this.controller) return;
+      const { isUploading } = this.controller.getState();
+      if (isUploading) {
+        return;
+      }
+      this.controller.reset();
+      this.updateState();
+    });
+    this.modalCancelButton?.addEventListener("click", () => {
+      if (!this.controller) return;
+      const currentState = this.controller.getState();
+      if (currentState.isUploading) return;
+      this.controller.reset();
+      if (this.triggerType === "inline") {
+        this.updateState();
+        return;
+      }
+      this.isModalOpen = false;
+      this.render();
+    });
+    this.modalAddMoreButton?.addEventListener("click", () => {
+      this.openFileDialog();
+    });
+    this.dropzone?.addEventListener("click", () => this.openFileDialog());
+    this.dropzone?.addEventListener("dragenter", (event) => {
+      event.preventDefault();
+      this.dropzone?.classList.add("is-dragging");
+    });
+    this.dropzone?.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      this.dropzone?.classList.add("is-dragging");
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy";
+      }
+    });
+    this.dropzone?.addEventListener("dragleave", (event) => {
+      if (event.target === this.dropzone) {
+        this.dropzone?.classList.remove("is-dragging");
+      }
+    });
+    this.dropzone?.addEventListener("drop", async (event) => {
+      event.preventDefault();
+      this.dropzone?.classList.remove("is-dragging");
+      const files = await this.extractFilesFromEvent(event);
+      if (files.length) {
+        this.controller?.addFiles(files);
+      }
+      if (this.fileInput) {
+        this.fileInput.value = "";
+      }
+    });
+    this.fileInput?.addEventListener("change", () => {
+      const files = this.fileInput?.files ? Array.from(this.fileInput.files) : [];
+      const mapped = files.map((file) => ({
+        file,
+        relativePath: file.webkitRelativePath
+      }));
+      this.controller?.addFiles(mapped);
+      if (this.fileInput) this.fileInput.value = "";
+    });
+    this.uploadButton?.addEventListener("click", () => {
+      if (this.controller?.getState().isUploading) return;
+      void this.controller?.uploadAll();
+    });
+  }
+  async extractFilesFromEvent(event) {
+    const items = event.dataTransfer?.items;
+    if (!items) {
+      const files = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
+      return files.map((file) => ({
+        file,
+        relativePath: file.webkitRelativePath
+      }));
+    }
+    const entries = Array.from(items).map((item) => item.webkitGetAsEntry ? item.webkitGetAsEntry() : null).filter(Boolean);
+    const collected = [];
+    for (const entry of entries) {
+      const files = await this.readEntry(entry, "");
+      collected.push(...files);
+    }
+    return collected;
+  }
+  readEntry(entry, path = "") {
+    return new Promise((resolve) => {
+      if (entry.isFile) {
+        entry.file((file) => {
+          resolve([{ file, relativePath: path ? `${path}/${file.name}` : file.name }]);
+        });
+      } else if (entry.isDirectory) {
+        const reader = entry.createReader();
+        reader.readEntries(async (entries) => {
+          const results = await Promise.all(
+            entries.map((child) => this.readEntry(child, path ? `${path}/${entry.name}` : entry.name))
+          );
+          resolve(results.flat());
+        });
+      } else {
+        resolve([]);
+      }
+    });
+  }
+  closeModal() {
+    this.isModalOpen = false;
+    this.render();
+  }
+  setGlobalError(message) {
+    this.globalErrorMessage = message;
+    this.updateErrorBanner();
+  }
+  clearGlobalError() {
+    this.setGlobalError(null);
+  }
+  updateErrorBanner() {
+    if (!this.errorBannerElement) return;
+    if (this.globalErrorMessage) {
+      this.errorBannerElement.hidden = false;
+      this.errorBannerElement.textContent = this.globalErrorMessage;
+    } else {
+      this.errorBannerElement.hidden = true;
+      this.errorBannerElement.textContent = "";
+    }
+  }
+  handleControllerError(error) {
+    if (this.isAbortError(error)) {
+      this.clearGlobalError();
+      return;
+    }
+    const status = typeof error === "object" && error !== null && "status" in error ? error.status : void 0;
+    const messageCandidate = error instanceof Error ? error.message : typeof error?.message === "string" ? error.message : typeof error === "string" ? error : "";
+    const normalized = String(messageCandidate ?? "").toLowerCase();
+    const isAuthError = typeof status === "number" && (status === 401 || status === 403) || normalized.includes("unauthorized") || normalized.includes("forbidden") || normalized.includes("invalid api key");
+    if (isAuthError) {
+      this.setGlobalError(this.labels.invalidApiKey);
+    } else if (messageCandidate) {
+      this.setGlobalError(String(messageCandidate));
+    } else {
+      this.setGlobalError(this.labels.uploadFailed);
+    }
+  }
+  updateState() {
+    if (!this.controller) return;
+    if (!this.fileList) return;
+    const state = this.controller.getState();
+    const { items, isUploading, duplicates } = state;
+    const hasItems = items.length > 0;
+    const hasAuthError = items.some((item) => item.error === "invalid-api-key");
+    if (hasAuthError) {
+      this.setGlobalError(this.labels.invalidApiKey);
+    }
+    if (this.rootElement) {
+      this.rootElement.classList.toggle("is-uploading", isUploading);
+      this.rootElement.classList.toggle("has-items", hasItems);
+    }
+    if (this.dropzone) {
+      if (hasItems) {
+        this.dropzone.style.display = "none";
+      } else {
+        this.dropzone.style.display = "flex";
+      }
+    }
+    this.renderFileList(items);
+    this.updateErrorBanner();
+    this.renderSourceOptions(hasItems);
+    this.updateModalTitle(items, isUploading);
+    this.updateDuplicateBanners(duplicates);
+    if (this.modalHeaderElement) {
+      this.modalHeaderElement.style.display = hasItems ? "" : "none";
+    }
+    if (this.modalPoweredElement) {
+      this.modalPoweredElement.style.display = hasItems ? "none" : "";
+    }
+    if (this.inlinePoweredElement) {
+      this.inlinePoweredElement.style.display = hasItems ? "none" : "";
+    }
+    if (this.triggerType === "button" || this.triggerType === "inline") {
+      const completedCount = items.filter((item) => item.status === "completed").length;
+      const allCompleted = hasItems && completedCount === items.length && completedCount > 0;
+      if (this.modalFooterActions) {
+        this.modalFooterActions.style.display = hasItems ? "" : "none";
+      }
+      const uploadButton = this.modalUploadButton;
+      const doneButton = this.modalDoneButton;
+      const cancelButton = this.modalCancelButton;
+      const clearButton = this.modalClearButton;
+      const addMoreButton = this.modalAddMoreButton;
+      const showUpload = hasItems && !isUploading && !allCompleted;
+      const showAddMore = hasItems && !isUploading && !allCompleted;
+      const showDone = hasItems && (isUploading || allCompleted);
+      const showClear = hasItems && (isUploading || allCompleted);
+      const showInlineCancel = this.triggerType === "inline" && hasItems && !isUploading && !allCompleted;
+      const showButtonCancel = this.triggerType === "button" && !isUploading && (!allCompleted || !hasItems);
+      const showCancel = showInlineCancel || showButtonCancel;
+      if (uploadButton) {
+        uploadButton.style.display = showUpload ? "" : "none";
+        uploadButton.toggleAttribute("disabled", !showUpload);
+      }
+      if (doneButton) {
+        doneButton.style.display = showDone ? "" : "none";
+        doneButton.textContent = this.labels.done;
+        doneButton.toggleAttribute("disabled", !showDone);
+      }
+      if (clearButton) {
+        clearButton.style.display = showClear ? "" : "none";
+        clearButton.toggleAttribute("disabled", isUploading);
+      }
+      if (cancelButton) {
+        cancelButton.style.display = showCancel ? "" : "none";
+        cancelButton.classList.toggle(
+          "is-fullwidth",
+          this.triggerType === "button" && !hasItems
+        );
+      }
+      if (addMoreButton) {
+        addMoreButton.style.display = showAddMore ? "" : "none";
+        addMoreButton.toggleAttribute("disabled", !showAddMore);
+      }
+    }
+  }
+  renderFileList(items) {
+    if (!this.fileList) return;
+    this.fileList.innerHTML = "";
+    if (items.length === 0) {
+      this.fileList.style.display = "none";
+      this.fileList.classList.remove("is-grid");
+      return;
+    }
+    const isGridLayout = this.fileLayout === "grid";
+    this.fileList.style.display = isGridLayout ? "grid" : "flex";
+    this.fileList.classList.toggle("is-grid", isGridLayout);
+    if (isGridLayout) {
+      this.fileList.style.gridTemplateColumns = "repeat(auto-fill, minmax(140px, 1fr))";
+      this.fileList.style.gap = "1rem";
+    } else {
+      this.fileList.style.removeProperty("grid-template-columns");
+      this.fileList.style.removeProperty("gap");
+    }
+    const isUploading = this.controller?.getState().isUploading ?? false;
+    items.forEach((item) => {
+      const li = document.createElement("li");
+      li.className = "ar-file-item";
+      li.classList.toggle("is-grid", isGridLayout);
+      const isInvalidApiKeyError = item.error === "invalid-api-key";
+      if (item.status === "uploading" || item.status === "pending") li.classList.add("is-uploading");
+      if (item.status === "completed") li.classList.add("is-completed");
+      if (item.status === "error" && !isInvalidApiKeyError) li.classList.add("is-error");
+      const header = document.createElement("div");
+      header.className = "ar-file-header";
+      header.classList.toggle("is-grid", isGridLayout);
+      const thumb = document.createElement("div");
+      thumb.className = "ar-file-thumb";
+      thumb.classList.toggle("is-grid", isGridLayout);
+      if (item.previewUrl) {
+        const img = document.createElement("img");
+        img.src = item.previewUrl;
+        img.alt = item.file.name;
+        thumb.appendChild(img);
+      } else {
+        thumb.textContent = item.file.name.charAt(0).toUpperCase();
+      }
+      if (item.status === "completed") {
+        const statusOverlay = document.createElement("div");
+        statusOverlay.className = "ar-thumb-status";
+        const successIcon = resolveIcon(this.icons.success);
+        if (successIcon) {
+          statusOverlay.appendChild(successIcon);
+        }
+        thumb.appendChild(statusOverlay);
+      } else if (item.status === "error" && !isInvalidApiKeyError) {
+        const statusOverlay = document.createElement("div");
+        statusOverlay.className = "ar-thumb-status is-error";
+        const errorIcon = resolveIcon(this.icons.error);
+        if (errorIcon) {
+          statusOverlay.appendChild(errorIcon);
+        }
+        thumb.appendChild(statusOverlay);
+      }
+      const name = document.createElement("span");
+      name.className = "ar-file-name";
+      name.textContent = item.file.name;
+      if (isGridLayout && !this.showGridFileName) {
+        name.style.display = "none";
+      } else {
+        name.style.display = "";
+      }
+      const removeButton = document.createElement("button");
+      removeButton.type = "button";
+      removeButton.className = "ar-remove-button";
+      const shouldShowRemove = (item.status === "pending" || item.status === "error" && isInvalidApiKeyError) && !isUploading;
+      removeButton.disabled = !shouldShowRemove;
+      removeButton.hidden = !shouldShowRemove;
+      removeButton.style.display = shouldShowRemove ? "inline-flex" : "none";
+      removeButton.classList.toggle("is-grid", isGridLayout);
+      const removeIcon = resolveIcon(this.icons.remove);
+      if (removeIcon) {
+        removeButton.appendChild(removeIcon);
+      }
+      removeButton.addEventListener("click", () => {
+        if (this.controller?.getState().isUploading) return;
+        this.controller?.removeFile(item.id);
+      });
+      header.appendChild(thumb);
+      header.appendChild(name);
+      header.appendChild(removeButton);
+      li.appendChild(header);
+      const progressBorder = document.createElement("div");
+      progressBorder.className = "ar-progress-border";
+      const progressFill = document.createElement("div");
+      progressFill.className = "ar-progress-fill";
+      const isPendingStatus = item.status === "pending";
+      const isUploadingStatus = item.status === "uploading";
+      const isCompleteStatus = item.status === "completed";
+      const rawProgress = Math.max(0, Math.min(100, item.progress ?? 0));
+      const calculatedTrain = !isCompleteStatus && rawProgress < 20;
+      const shouldAnimateTrain = (isUploadingStatus || isUploading && isPendingStatus) && calculatedTrain;
+      const isActive = shouldAnimateTrain || rawProgress > 0 && !isCompleteStatus;
+      const stateLabel = isCompleteStatus ? "complete" : shouldAnimateTrain ? "train" : rawProgress >= 20 ? "progress" : "idle";
+      progressBorder.dataset.state = stateLabel;
+      progressBorder.dataset.status = item.status;
+      progressBorder.dataset.progress = rawProgress.toFixed(0);
+      progressBorder.classList.toggle("is-active", isActive);
+      progressBorder.classList.toggle("is-train", shouldAnimateTrain);
+      progressBorder.classList.toggle("is-complete", isCompleteStatus);
+      progressBorder.style.display = isCompleteStatus ? "none" : "";
+      progressFill.classList.toggle("is-train", shouldAnimateTrain);
+      progressFill.classList.toggle("is-animating", shouldAnimateTrain);
+      if (isCompleteStatus) {
+        progressFill.style.width = "100%";
+      } else if (shouldAnimateTrain) {
+        progressFill.style.width = "100%";
+      } else {
+        const computedWidth = Math.max(rawProgress, 3);
+        progressFill.style.width = `${Math.min(computedWidth, 100)}%`;
+      }
+      progressBorder.appendChild(progressFill);
+      const metaRow = document.createElement("div");
+      metaRow.className = "ar-file-meta";
+      if (item.status === "completed" && item.error === "duplicate") {
+        const duplicateBadge = document.createElement("span");
+        duplicateBadge.className = "ar-status is-warning";
+        duplicateBadge.appendChild(document.createTextNode(this.labels.duplicateFileError));
+        metaRow.appendChild(duplicateBadge);
+      }
+      li.appendChild(progressBorder);
+      if (metaRow.childNodes.length > 0) {
+        li.appendChild(metaRow);
+      }
+      this.fileList?.appendChild(li);
+    });
+  }
+  renderSourceOptions(hasItems) {
+    const enabledSources = this.sourceOptions.filter((option) => !option.disabled);
+    const hasSourcesConfigured = enabledSources.length > 0;
+    const renderChoiceList = (container) => {
+      container.innerHTML = "";
+      if (!hasSourcesConfigured) {
+        container.style.display = "none";
+        container.classList.remove("ar-source-list--choices");
+        return;
+      }
+      container.style.display = hasItems ? "none" : "flex";
+      container.classList.toggle("ar-source-list--choices", !hasItems);
+      if (hasItems) return;
+      enabledSources.forEach((option) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "ar-source-option";
+        const icon = resolveIcon(option.icon ?? this.icons.upload);
+        if (icon) {
+          const iconWrapper = document.createElement("span");
+          iconWrapper.className = "ar-source-option-icon";
+          iconWrapper.appendChild(icon);
+          button.appendChild(iconWrapper);
+        }
+        const label = document.createElement("span");
+        label.className = "ar-source-option-label";
+        label.textContent = option.label;
+        button.appendChild(label);
+        button.addEventListener("click", () => this.handleSourceOption(option));
+        container.appendChild(button);
+      });
+    };
+    this.sourceLists.forEach((container) => {
+      renderChoiceList(container);
+    });
+    if (this.modalSourceContainer) {
+      this.modalSourceContainer.classList.toggle("is-visible", hasSourcesConfigured && !hasItems);
+      this.modalSourceContainer.style.display = hasSourcesConfigured ? "" : "none";
+      this.modalSourceContainer.innerHTML = "";
+    }
+    if (this.actionsSourceContainer) {
+      this.actionsSourceContainer.classList.toggle("is-visible", hasSourcesConfigured && !hasItems);
+      this.actionsSourceContainer.style.display = hasSourcesConfigured ? "" : "none";
+      this.actionsSourceContainer.innerHTML = "";
+    }
+    if (this.triggerType === "inline") {
+      if (this.modalBody) {
+        this.modalBody.classList.toggle("ar-modal-body--no-sources", !hasSourcesConfigured);
+      }
+      if (this.inlineUpload) {
+        this.inlineUpload.classList.toggle("ar-inline-upload--no-sources", !hasSourcesConfigured);
+      }
+    }
+  }
+  updateModalTitle(items, isUploading) {
+    if (!this.modalTitleElement) return;
+    if (items.length === 0) {
+      this.modalTitleElement.textContent = isUploading ? this.labels.uploading : this.labels.title;
+      this.modalTitleElement.classList.remove("is-dynamic", "is-success");
+      return;
+    }
+    const total = items.length;
+    const modalTitle = this.modalTitleElement;
+    const suffix = total === 1 ? "file" : "files";
+    const completedCount = items.filter((item) => item.status === "completed").length;
+    modalTitle.classList.add("is-dynamic");
+    modalTitle.classList.toggle("is-success", completedCount === total);
+    if (isUploading) {
+      modalTitle.textContent = `Uploading ${completedCount}/${total} ${suffix}`;
+      return;
+    }
+    if (completedCount === total) {
+      modalTitle.textContent = `${total} ${suffix} uploaded`;
+      return;
+    }
+    modalTitle.textContent = `${total} ${suffix} ready`;
+  }
+  updateDuplicateBanners(duplicates) {
+    const hasDuplicates = duplicates.length > 0;
+    const prefix = duplicates.length === 1 ? this.labels.duplicateFileExists : this.labels.duplicateFilesExist;
+    const message = hasDuplicates ? `${prefix} ${duplicates.join(", ")}` : "";
+    this.duplicateBanners.forEach((banner) => {
+      banner.hidden = !hasDuplicates;
+      banner.textContent = message;
+    });
+  }
+  handleSourceOption(option) {
+    if (option.disabled) return;
+    this.options.onSourceSelect?.(option);
+    this.dispatchEvent(new CustomEvent("sourceselect", { detail: option }));
+    if (option.kind === "device" && !option.action) {
+      this.openFileDialog();
+      return;
+    }
+    if (option.action) {
+      try {
+        option.action();
+      } catch (error) {
+        console.error("[AutorenderUploader] Source action failed", error);
+      }
+      return;
+    }
+    console.warn("[AutorenderUploader] No handler configured for source option", option);
+  }
+  applyThemeVariables() {
+    const theme = this.options.theme ?? {};
+    const borderRadius = theme.borderRadius;
+    const accentColor = theme.accentColor ?? DEFAULT_THEME.accentColor;
+    const dropzoneBackground = theme.dropzoneBackground ?? DEFAULT_THEME.dropzoneBackground;
+    const dropzoneBorder = theme.dropzoneBorder ?? DEFAULT_THEME.dropzoneBorder;
+    const fontFamily = theme.fontFamily;
+    if (borderRadius !== void 0) {
+      this.style.setProperty(
+        "--ar-radius",
+        typeof borderRadius === "number" ? `${borderRadius}px` : String(borderRadius)
+      );
+    } else {
+      this.style.removeProperty("--ar-radius");
+    }
+    this.style.setProperty("--ar-color-accent", accentColor);
+    if (dropzoneBackground) {
+      this.style.setProperty("--ar-dropzone-bg", dropzoneBackground);
+    }
+    if (dropzoneBorder) {
+      this.style.setProperty("--ar-dropzone-border", dropzoneBorder);
+    }
+    if (fontFamily) {
+      this.style.setProperty("--ar-font-family", fontFamily);
+    }
+    const appearance = theme.appearance ?? DEFAULT_THEME.appearance;
+    let resolvedAppearance = appearance;
+    if (appearance === "system" && typeof window !== "undefined") {
+      resolvedAppearance = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    this.setAttribute("data-theme", resolvedAppearance);
+  }
+};
+AutorenderUploaderElement.tagName = "autorender-uploader";
+
+// src/index.ts
+var SOURCE_ALIAS_MAP = {
+  local: "device",
+  device: "device",
+  fromdevice: "device",
+  camera: "camera",
+  facebook: "facebook",
+  fb: "facebook",
+  insta: "facebook",
+  instagram: "facebook",
+  gdrive: "google-drive",
+  googledrive: "google-drive",
+  google: "google-drive",
+  googledisk: "google-drive",
+  "google-drive": "google-drive"
+};
+function ensureCustomElement() {
+  if (!customElements.get(AutorenderUploaderElement.tagName)) {
+    customElements.define(AutorenderUploaderElement.tagName, AutorenderUploaderElement);
+  }
+}
+function resolveTarget(target) {
+  if (typeof target === "string") {
+    const element = document.querySelector(target);
+    if (!element) {
+      throw new Error(`Target element "${target}" not found`);
+    }
+    return element;
+  }
+  return target;
+}
+function resolveThemePreset(theme) {
+  const base = {
+    borderRadius: DEFAULT_THEME.borderRadius,
+    dropzoneBackground: DEFAULT_THEME.dropzoneBackground,
+    dropzoneBorder: DEFAULT_THEME.dropzoneBorder
+  };
+  switch (theme) {
+    case "dark":
+      return {
+        appearance: "dark",
+        accentColor: "#4C8DFF",
+        ...base
+      };
+    case "system":
+      return {
+        appearance: "system",
+        accentColor: DEFAULT_THEME.accentColor,
+        ...base
+      };
+    default:
+      return {
+        appearance: "light",
+        accentColor: DEFAULT_THEME.accentColor,
+        ...base
+      };
+  }
+}
+function resolveSourcesConfig(input) {
+  if (input === void 0 || input === null) {
+    return [];
+  }
+  const provided = Array.isArray(input) ? input : input.split(",").map((entry) => entry.trim()).filter(Boolean);
+  if (provided.length === 0) {
+    return [];
+  }
+  const resolved = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const entry of provided) {
+    const normalized = entry.toLowerCase().replace(/[\s_-]+/g, "");
+    const mappedId = SOURCE_ALIAS_MAP[normalized] ?? normalized;
+    if (seen.has(mappedId)) continue;
+    const match = DEFAULT_SOURCES.find((option) => option.id === mappedId);
+    if (match) {
+      resolved.push(match);
+      seen.add(mappedId);
+    }
+  }
+  return resolved;
+}
+function normalizeOptions(options, applyDefaults = false) {
+  const {
+    type,
+    theme,
+    sources,
+    classNames,
+    labels,
+    fileLayout,
+    showGridFileName,
+    apiKey: _apiKey,
+    target: _target,
+    ...rest
+  } = options;
+  const normalized = { ...rest };
+  if (type !== void 0) {
+    normalized.type = type === "button" ? "button" : "inline";
+  } else if (applyDefaults) {
+    normalized.type = "inline";
+  }
+  if (theme !== void 0) {
+    normalized.theme = resolveThemePreset(theme);
+  } else if (applyDefaults) {
+    normalized.theme = resolveThemePreset("light");
+  }
+  if (sources !== void 0) {
+    normalized.sources = resolveSourcesConfig(sources);
+  } else if ("sources" in options) {
+    normalized.sources = [];
+  } else if (applyDefaults) {
+    normalized.sources = [];
+  }
+  if (classNames !== void 0) {
+    normalized.classNames = classNames;
+  }
+  if (labels !== void 0) {
+    normalized.labels = labels;
+  }
+  if (fileLayout !== void 0) {
+    normalized.fileLayout = fileLayout;
+  } else if (applyDefaults) {
+    normalized.fileLayout = "list";
+  }
+  if (showGridFileName !== void 0) {
+    normalized.showGridFileName = showGridFileName;
+  } else if (applyDefaults) {
+    normalized.showGridFileName = true;
+  }
+  return normalized;
+}
+function createUploader(options) {
+  const target = resolveTarget(options.target);
+  ensureCustomElement();
+  const widget = document.createElement(
+    AutorenderUploaderElement.tagName
+  );
+  target.innerHTML = "";
+  target.appendChild(widget);
+  const client = new AutorenderApiClient({
+    apiKey: options.apiKey
+  });
+  const controllerOptions = normalizeOptions(options, true);
+  const controller = new UploaderController(
+    client,
+    widget,
+    controllerOptions
+  );
+  widget.setController(controller, controllerOptions);
+  return {
+    openFileDialog: () => widget.openFileDialog(),
+    startUpload: () => controller.uploadAll(),
+    reset: () => controller.reset(),
+    destroy: () => {
+      controller.cancel();
+      controller.reset();
+      widget.remove();
+    },
+    updateOptions: (partialOptions) => {
+      const normalized = normalizeOptions(partialOptions, false);
+      controller.setOptions(normalized);
+      widget.updateOptions(normalized);
+    },
+    getState: () => controller.getState()
+  };
+}
+function registerAutorenderUploaderElement() {
+  ensureCustomElement();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createUploader,
+  registerAutorenderUploaderElement
+});
+//# sourceMappingURL=index.cjs.map