@autorender/sdk-core 0.1.19 → 0.1.22

package/dist/index.cjs

@@ -183,119 +183,86 @@ var AutorenderApiClient = class {
     this.apiKey = opts.apiKey;
     this.baseUrl = (opts.baseUrl || getBaseUrl(opts.environment || "prod")).replace(/\/+$/, "");
   }
-  async generateToken(params) {
+  uploadFile(params, onProgress, signal) {
     return new Promise((resolve, reject) => {
+      if (signal?.aborted) {
+        reject(new DOMException("Upload aborted", "AbortError"));
+        return;
+      }
       const xhr = new XMLHttpRequest();
+      if (signal) {
+        signal.addEventListener("abort", () => {
+          xhr.abort();
+          reject(new DOMException("Upload aborted", "AbortError"));
+        });
+      }
+      let lastProgress = 0;
+      xhr.upload.onprogress = (event) => {
+        if (event.lengthComputable && onProgress) {
+          const progress = Math.round(event.loaded / event.total * 100);
+          lastProgress = progress;
+          onProgress(progress);
+        } else if (onProgress && event.loaded > 0) {
+          const estimatedProgress = Math.min(
+            95,
+            Math.round(event.loaded / (event.loaded + 1e6) * 100)
+          );
+          if (estimatedProgress > lastProgress) {
+            lastProgress = estimatedProgress;
+            onProgress(estimatedProgress);
+          }
+        }
+      };
       xhr.onerror = () => {
-        reject(new Error(`Failed to generate token: ${xhr.statusText}`));
+        reject(new Error(`Upload failed: ${xhr.statusText}`));
       };
       xhr.onload = () => {
         try {
           if (xhr.status < 200 || xhr.status >= 300) {
             const errorText = xhr.responseText || xhr.statusText;
-            reject(new Error(`Failed to generate token: ${errorText}`));
-            return;
-          }
-          const response = JSON.parse(xhr.responseText);
-          if (!response.token) {
-            reject(new Error("Token not found in response"));
+            reject(new Error(`Upload failed: ${errorText}`));
             return;
           }
-          resolve(response.token);
+          const newResponse = JSON.parse(xhr.responseText);
+          const response = {
+            success: true,
+            file_no: newResponse.file_no || newResponse.id,
+            name: newResponse.name,
+            url: newResponse.url,
+            file_size: newResponse.size,
+            format: newResponse.format,
+            width: newResponse.width,
+            height: newResponse.height,
+            created_at: newResponse.created_at,
+            path: newResponse.path,
+            workspace_no: newResponse.workspace_id,
+            isDuplicate: newResponse.is_duplicate || false
+          };
+          resolve(response);
         } catch (error) {
-          reject(new Error("Failed to parse token response"));
+          reject(new Error("Failed to parse response"));
         }
       };
-      let folder = params.folderPath || "";
-      if (params.relativePath) {
-        folder = folder ? `${folder}/${params.relativePath}` : params.relativePath;
+      const endpoint = `${this.baseUrl}/uploads`;
+      const formData = new FormData();
+      formData.append("file", params.file);
+      formData.append("file_name", params.file.name);
+      if (params.folderPath) {
+        formData.append("folder", params.folderPath);
       }
-      if (folder && !folder.endsWith("/")) {
-        folder += "/";
+      if (params.settings?.tags?.length) {
+        formData.append("tags", params.settings.tags.join(","));
+      }
+      if (params.settings?.pretransformations) {
+        formData.append("transform", params.settings.pretransformations);
+      }
+      if (params.settings?.custom_id) {
+        formData.append("custom_id", params.settings.custom_id);
       }
-      const tokenRequest = {
-        ...folder && { folder },
-        ...params.settings?.tags && { tags: params.settings.tags },
-        ...params.settings?.pretransformations && { transform: params.settings.pretransformations },
-        max_file_size: params.file.size,
-        allow_override: {
-          folder: true,
-          tags: true,
-          transform: true
-        },
-        random_prefix: !params.settings?.is_unique_suffix_name
-      };
-      const endpoint = `${this.baseUrl}/generate-token`;
       xhr.open("POST", endpoint);
       xhr.setRequestHeader("Authorization", `Bearer ${this.apiKey}`);
-      xhr.setRequestHeader("Content-Type", "application/json");
       xhr.setRequestHeader("accept", "application/json");
-      xhr.send(JSON.stringify(tokenRequest));
-    });
-  }
-  uploadFile(params, onProgress, signal) {
-    return new Promise(async (resolve, reject) => {
-      if (signal?.aborted) {
-        reject(new DOMException("Upload aborted", "AbortError"));
-        return;
-      }
-      try {
-        const token = await this.generateToken(params);
-        if (signal?.aborted) {
-          reject(new DOMException("Upload aborted", "AbortError"));
-          return;
-        }
-        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 = () => {
-          try {
-            if (xhr.status < 200 || xhr.status >= 300) {
-              const errorText = xhr.responseText || xhr.statusText;
-              reject(new Error(`Upload failed: ${errorText}`));
-              return;
-            }
-            const newResponse = JSON.parse(xhr.responseText);
-            const response = {
-              success: true,
-              file_no: newResponse.file_no || newResponse.id,
-              name: newResponse.name,
-              url: newResponse.url,
-              file_size: newResponse.size,
-              format: newResponse.format,
-              width: newResponse.width,
-              height: newResponse.height,
-              created_at: newResponse.created_at,
-              path: newResponse.path,
-              workspace_no: newResponse.workspace_id,
-              isDuplicate: newResponse.is_duplicate || false
-            };
-            resolve(response);
-          } catch (error) {
-            reject(new Error("Failed to parse response"));
-          }
-        };
-        const endpoint = `${this.baseUrl}/uploads/${token}`;
-        xhr.open("POST", endpoint);
-        xhr.setRequestHeader("accept", "application/json");
-        xhr.setRequestHeader("Content-Type", params.file.type || "image/*");
-        xhr.send(params.file);
-      } catch (error) {
-        reject(error);
-      }
+      xhr.send(formData);
     });
   }
 };
@@ -409,7 +376,9 @@ function buildAssetDeliveryUrl(baseUrl, workspace, path, fallback) {
 }
 
 // src/core/uploader-controller.ts
+var import_file_type = require("file-type");
 var DEFAULT_PARALLEL_UPLOADS = 4;
+var MAX_FILE_SIZE_BYTES = 100 * 1024 * 1024;
 var UploaderController = class extends EventTarget {
   constructor(client, target, options) {
     super();
@@ -448,19 +417,44 @@ var UploaderController = class extends EventTarget {
       duplicates: Array.from(this.duplicateConflicts)
     };
   }
-  addFiles(files) {
+  async 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 filesWithMimeType = await Promise.all(
+      files.map(async ({ file, relativePath }) => {
+        let mimeType = file.type;
+        if (!mimeType || mimeType === "application/octet-stream" || mimeType === "") {
+          try {
+            const detected = await (0, import_file_type.fileTypeFromBlob)(file);
+            if (detected?.mime) {
+              mimeType = detected.mime;
+              Object.defineProperty(file, "type", {
+                value: mimeType,
+                writable: false,
+                configurable: true
+              });
+            } else {
+              mimeType = "application/octet-stream";
+            }
+          } catch (error) {
+            mimeType = "application/octet-stream";
+          }
+        }
+        return { file, relativePath, mimeType };
+      })
+    );
+    const newItems = filesWithMimeType.map(({ file, relativePath, mimeType }) => {
       const folderPath = getRelativeFolderPath(
         this.options.folderPath,
         relativePath
       ) ?? "";
-      const previewUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : void 0;
+      const previewUrl = mimeType.startsWith("image/") ? URL.createObjectURL(file) : void 0;
+      const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
+      const info = file.size > MAX_FILE_SIZE_BYTES ? `File size (${fileSizeMB}MB) exceeds the maximum limit of 100MB` : void 0;
       const baseItem = {
         id: generateId(),
         file,
@@ -468,7 +462,8 @@ var UploaderController = class extends EventTarget {
         folderPath,
         status: "pending",
         progress: 0,
-        previewUrl
+        previewUrl,
+        info
       };
       const key = buildKey(file, folderPath, relativePath);
       if (existingKeys.has(key)) {
@@ -651,6 +646,13 @@ var UploaderController = class extends EventTarget {
     await this.runWithConcurrency(tasks, parallel);
   }
   async uploadSingleFile(item, uploadSettings) {
+    if (item.file.size > MAX_FILE_SIZE_BYTES) {
+      const fileSizeMB = (item.file.size / (1024 * 1024)).toFixed(2);
+      item.info = `File size (${fileSizeMB}MB) exceeds the maximum limit of 100MB`;
+      this.dispatch("fileprogress", { item });
+      this.dispatch("statechange");
+      return;
+    }
     item.status = "uploading";
     item.progress = 0;
     this.dispatch("statechange");
@@ -663,7 +665,8 @@ var UploaderController = class extends EventTarget {
         settings: uploadSettings ? {
           pretransformations: uploadSettings.pretransformations,
           tags: uploadSettings.tags,
-          is_unique_suffix_name: uploadSettings.is_unique_suffix_name ?? false
+          is_unique_suffix_name: uploadSettings.is_unique_suffix_name ?? false,
+          custom_id: uploadSettings.custom_id
         } : void 0
       },
       (progress) => {
@@ -1163,7 +1166,8 @@ var widgetStyles = (
   gap: 0.45rem;
   position: relative;
   box-sizing: border-box;
-  height: 50px;
+  min-height: 50px;
+  overflow: hidden;
 }
 
 .ar-file-item.is-grid {
@@ -1180,6 +1184,8 @@ var widgetStyles = (
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  min-width: 0;
+  flex: 1;
 }
 
 .ar-file-header.is-grid {
@@ -1202,6 +1208,17 @@ var widgetStyles = (
   position: relative;
 }
 
+.ar-file-thumb-document {
+  background: rgba(148, 163, 184, 0.15);
+  color: var(--ar-color-muted-foreground);
+}
+
+.ar-file-thumb-document svg {
+  width: 20px;
+  height: 20px;
+  color: currentColor;
+}
+
 .ar-file-thumb.is-grid {
   width: 100%;
   height: 140px;
@@ -1209,6 +1226,11 @@ var widgetStyles = (
   font-size: 1rem;
 }
 
+.ar-file-thumb.is-grid.ar-file-thumb-document svg {
+  width: 48px;
+  height: 48px;
+}
+
 .ar-file-item.is-completed .ar-file-thumb {
   color: #fff;
 }
@@ -1243,13 +1265,39 @@ var widgetStyles = (
   font-size: 0.8rem;
   margin: 0;
   color: var(--ar-color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
 }
 
 .ar-file-meta {
-  display: flex;
-  gap: 0.75rem;
+  display: block;
+  margin-top: 0.25rem;
   font-size: 0.8rem;
   color: var(--ar-color-muted-foreground);
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.ar-file-info {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--ar-color-muted-foreground);
+  font-style: italic;
+  padding: 0.25rem 0.5rem;
+  background: rgba(148, 163, 184, 0.15);
+  border-radius: calc(var(--ar-radius) * 0.5);
+  width: 100%;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.ar-file-item.is-grid .ar-file-info {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.4rem;
 }
 
 .ar-file-item.is-grid .ar-file-meta {
@@ -2075,7 +2123,6 @@ var AutorenderUploaderElement = class extends HTMLElementShim {
     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,
@@ -2451,19 +2498,19 @@ var AutorenderUploaderElement = class extends HTMLElementShim {
       this.dropzone?.classList.remove("is-dragging");
       const files = await this.extractFilesFromEvent(event);
       if (files.length) {
-        this.controller?.addFiles(files);
+        await this.controller?.addFiles(files);
       }
       if (this.fileInput) {
         this.fileInput.value = "";
       }
     });
-    this.fileInput?.addEventListener("change", () => {
+    this.fileInput?.addEventListener("change", async () => {
       const files = this.fileInput?.files ? Array.from(this.fileInput.files) : [];
       const mapped = files.map((file) => ({
         file,
         relativePath: file.webkitRelativePath
       }));
-      this.controller?.addFiles(mapped);
+      await this.controller?.addFiles(mapped);
       if (this.fileInput) this.fileInput.value = "";
     });
     this.uploadButton?.addEventListener("click", () => {
@@ -2657,13 +2704,35 @@ var AutorenderUploaderElement = class extends HTMLElementShim {
       const thumb = document.createElement("div");
       thumb.className = "ar-file-thumb";
       thumb.classList.toggle("is-grid", isGridLayout);
-      if (item.previewUrl) {
+      const isImage = item.file.type.startsWith("image/");
+      if (item.previewUrl && isImage) {
         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();
+        thumb.classList.add("ar-file-thumb-document");
+        const documentIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        documentIcon.setAttribute("viewBox", "0 0 24 24");
+        documentIcon.setAttribute("width", "24");
+        documentIcon.setAttribute("height", "24");
+        documentIcon.setAttribute("fill", "none");
+        documentIcon.setAttribute("aria-hidden", "true");
+        const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path1.setAttribute("d", "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z");
+        path1.setAttribute("stroke", "currentColor");
+        path1.setAttribute("stroke-width", "1.5");
+        path1.setAttribute("stroke-linecap", "round");
+        path1.setAttribute("stroke-linejoin", "round");
+        const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path2.setAttribute("d", "M14 2v6h6");
+        path2.setAttribute("stroke", "currentColor");
+        path2.setAttribute("stroke-width", "1.5");
+        path2.setAttribute("stroke-linecap", "round");
+        path2.setAttribute("stroke-linejoin", "round");
+        documentIcon.appendChild(path1);
+        documentIcon.appendChild(path2);
+        thumb.appendChild(documentIcon);
       }
       if (item.status === "completed") {
         const statusOverlay = document.createElement("div");
@@ -2710,6 +2779,15 @@ var AutorenderUploaderElement = class extends HTMLElementShim {
       header.appendChild(name);
       header.appendChild(removeButton);
       li.appendChild(header);
+      if (item.info) {
+        const metaRow = document.createElement("div");
+        metaRow.className = "ar-file-meta";
+        const infoText = document.createElement("span");
+        infoText.className = "ar-file-info";
+        infoText.textContent = item.info;
+        metaRow.appendChild(infoText);
+        li.appendChild(metaRow);
+      }
       const progressBorder = document.createElement("div");
       progressBorder.className = "ar-progress-border";
       const progressFill = document.createElement("div");
@@ -2720,8 +2798,8 @@ var AutorenderUploaderElement = class extends HTMLElementShim {
       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";
+      const isActive = isUploadingStatus || shouldAnimateTrain || rawProgress > 0 && !isCompleteStatus;
+      const stateLabel = isCompleteStatus ? "complete" : shouldAnimateTrain ? "train" : rawProgress >= 20 ? "progress" : isUploadingStatus ? "progress" : "idle";
       progressBorder.dataset.state = stateLabel;
       progressBorder.dataset.status = item.status;
       progressBorder.dataset.progress = rawProgress.toFixed(0);
@@ -2735,17 +2813,14 @@ var AutorenderUploaderElement = class extends HTMLElementShim {
         progressFill.style.width = "100%";
       } else if (shouldAnimateTrain) {
         progressFill.style.width = "100%";
+      } else if (isUploadingStatus && rawProgress === 0) {
+        progressFill.style.width = "3%";
       } 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";
       li.appendChild(progressBorder);
-      if (metaRow.childNodes.length > 0) {
-        li.appendChild(metaRow);
-      }
       this.fileList?.appendChild(li);
     });
   }
@@ -3054,6 +3129,8 @@ function buildTransformString(transform, defaults, enableDPR = true, connectionQ
       sortKey = "f_" + param;
     } else if (param.startsWith("fl_")) {
       sortKey = "fl_" + param;
+    } else if (param.startsWith("fo_")) {
+      sortKey = "fo_" + param;
     } else if (param.startsWith("flip_")) {
       sortKey = "flip_" + param;
     } else if (param.startsWith("h_")) {
@@ -3133,6 +3210,7 @@ function buildTransformString(transform, defaults, enableDPR = true, connectionQ
   if (transform.ar) addPart("ar_", transform.ar);
   if (transform.p) addPart("p_", transform.p);
   if (transform.ps) addPart("ps_", transform.ps);
+  if (transform.focus) addPart("fo_", transform.focus);
   if (transform.r !== void 0) addPart("r_", transform.r);
   if (transform.z !== void 0) addPart("z_", transform.z);
   if (transform.flip) addPart("flip_", transform.flip);
@@ -3233,6 +3311,7 @@ function buildTransformString(transform, defaults, enableDPR = true, connectionQ
       "ar",
       "p",
       "ps",
+      "focus",
       "r",
       "z",
       "flip",