@superleapai/flow-ui 1.0.0

package/components/file-input.js

@@ -0,0 +1,533 @@
+/**
+ * S3 File Upload Component
+ * Uploads files to S3 and stores URLs in FlowUI state as an array.
+ * UI aligned with React PublicFileUploadInput / FileUploadLoader / UploadedFilePreviewer.
+ */
+
+(function (global) {
+  "use strict";
+
+  // Tabler-style inline SVGs (no external deps) – match React IconFile, IconCopy, IconEye, IconX
+  var ICONS = {
+    file: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>',
+    fileImage: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
+    filePdf: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 12h6"/><path d="M9 16h6"/><path d="M9 8h1"/></svg>',
+    fileVideo: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>',
+    fileAudio: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>',
+    fileSpreadsheet: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M8 12h8"/><path d="M8 16h8"/><path d="M8 8h8"/></svg>',
+    fileText: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>',
+    copy: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
+    eye: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>',
+    x: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+    loader: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
+  };
+
+  var IMAGE_EXT = /\.(jpe?g|png|gif|webp|bmp|svg|ico|avif)(\?|$)/i;
+  var PDF_EXT = /\.(pdf)(\?|$)/i;
+  var VIDEO_EXT = /\.(mp4|webm|mov|avi|mkv|m4v|ogv)(\?|$)/i;
+  var AUDIO_EXT = /\.(mp3|wav|ogg|m4a|aac|flac|webm)(\?|$)/i;
+  var SPREADSHEET_EXT = /\.(xlsx?|xls|csv|ods)(\?|$)/i;
+  var TEXT_DOC_EXT = /\.(docx?|txt|rtf|odt|pptx?|ppt)(\?|$)/i;
+
+  function getFileTypeIcon(nameOrUrl) {
+    var str = (nameOrUrl || "").toLowerCase();
+    if (IMAGE_EXT.test(str)) return ICONS.fileImage;
+    if (PDF_EXT.test(str)) return ICONS.filePdf;
+    if (VIDEO_EXT.test(str)) return ICONS.fileVideo;
+    if (AUDIO_EXT.test(str)) return ICONS.fileAudio;
+    if (SPREADSHEET_EXT.test(str)) return ICONS.fileSpreadsheet;
+    if (TEXT_DOC_EXT.test(str)) return ICONS.fileText;
+    return ICONS.file;
+  }
+
+  /**
+   * Upload file to S3
+   * @param {File} file - File to upload
+   * @param {boolean} isPrivate - Whether file should be private
+   * @returns {Promise<Object>} Upload response with URLs
+   */
+  async function uploadFileToS3(file, isPrivate = false) {
+    const formData = new FormData();
+    formData.append("file", file, file.name);
+    formData.append("is_private", String(!!isPrivate));
+
+    // Get upload URL - can be configured via global.S3_UPLOAD_URL
+    const uploadUrl = global.S3_UPLOAD_URL || "/org/file/upload";
+    const baseUrl = global.SUPERLEAP_BASE_URL || "https://app.superleap.com/api/v1";
+    const fullUrl = uploadUrl.startsWith("http") ? uploadUrl : `${baseUrl}${uploadUrl}`;
+
+    // Get API key: use FlowUI._getComponent when globals were captured (index.js), else global.superleapClient
+    let apiKey = null;
+    try {
+      const client =
+        global.FlowUI && typeof global.FlowUI._getComponent === "function"
+          ? global.FlowUI._getComponent("superleapClient")
+          : global.superleapClient;
+      if (client && typeof client.getSdk === "function") {
+        const sdk = client.getSdk();
+        apiKey = sdk?.apiKey;
+      }
+    } catch (e) {
+      console.warn("[S3FileUpload] Could not get API key:", e);
+    }
+
+    const headers = {};
+    if (apiKey) {
+      headers.Authorization = `Bearer ${apiKey}`;
+    }
+
+    const response = await fetch(fullUrl, {
+      method: "POST",
+      body: formData,
+      headers,
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`File upload failed (${response.status}): ${errorText}`);
+    }
+
+    const result = await response.json();
+    console.log("[S3FileUpload] Upload response:");
+    
+    const url = result?.data?.url;
+    
+    if (!url) {
+      console.error("[S3FileUpload] No URL found in response:", result);
+      throw new Error("Upload response did not contain a file URL");
+    }
+    
+    return {
+      url: url,
+    };
+  }
+
+  /**
+   * Create S3 file upload component
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field (stores array of URLs)
+   * @param {boolean} config.multiple - Allow multiple files
+   * @param {string} config.accept - Accepted file types (e.g., ".pdf,.jpg,.jpeg")
+   * @param {boolean} config.required - Whether field is required
+   * @param {string} config.helpText - Optional help text for tooltip
+   * @param {boolean} config.isPrivate - Whether files should be private
+   * @param {number} config.maxFiles - Maximum number of files (for multiple mode)
+   * @param {number} config.maxFileSize - Maximum file size in bytes
+   * @returns {HTMLElement} Field element
+   */
+  function create(config) {
+    const {
+      label,
+      fieldId,
+      multiple = true,
+      accept = "*",
+      required = false,
+      helpText = null,
+      isPrivate = false,
+      maxFiles = null,
+      maxFileSize = 10 * 1024 * 1024, // 10MB default
+    } = config;
+
+    if (!global.FlowUI) {
+      throw new Error("FlowUI not available");
+    }
+
+    const FlowUI = global.FlowUI;
+
+    // Create field wrapper
+    const field = FlowUI.createFieldWrapper(label, required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    // Container (match React: space-y-4 → gap-16)
+    const uploadContainer = document.createElement("div");
+    uploadContainer.className = "w-full flex flex-col gap-8";
+
+    // Upload row: button + status + optional end spinner (match Select/MultiSelect trigger)
+    const uploadWrapper = document.createElement("div");
+    uploadWrapper.className = "relative flex w-full items-center justify-between rounded-4 border-1/2 border-border-primary bg-fill-quarternary-fill-white px-8 py-4 hover:border-primary-border focus-within:outline-none focus-within:border-1/2 focus-within:border-primary-border";
+
+    // Left content (button + status) – pointer-events-none so overlay input receives clicks
+    const leftContent = document.createElement("div");
+    leftContent.className = "pointer-events-none flex min-w-0 flex-1 items-center gap-8 truncate";
+
+    const useButtonComponent = global.Button && typeof global.Button.create === "function";
+    const initialButtonText = multiple ? "Choose files" : "Choose a file";
+    const btn = useButtonComponent
+      ? global.Button.create({
+          variant: "outline",
+          size: "small",
+          text: initialButtonText,
+          className: "shrink-0 truncate",
+        })
+      : (function () {
+          const el = document.createElement("div");
+          el.className = "shrink-0 truncate rounded-2 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-1 text-reg-13 text-typography-primary-text transition-colors duration-150 hover:bg-fill-secondary-fill-gray";
+          el.textContent = initialButtonText;
+          return el;
+        })();
+
+    // Status text: "No files chosen" (quaternary) or "X file(s) selected"
+    const statusText = document.createElement("p");
+    statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-quaternary-text";
+
+    // Hidden file input – overlays row, high z-index so it receives clicks
+    const input = document.createElement("input");
+    input.type = "file";
+    input.className = "absolute inset-0 z-10 w-full cursor-pointer opacity-0";
+    input.multiple = multiple;
+    if (accept !== "*") {
+      input.accept = accept;
+    }
+
+    // End icon slot: spinner when uploading (match Select chevron position)
+    const endIconSlot = document.createElement("div");
+    endIconSlot.className = "ml-4 flex size-16 items-center justify-center shrink-0 text-typography-quaternary-text";
+    endIconSlot.style.display = "none";
+
+    // Uploaded files: badge list (match UploadedFilePreviewer – flex-wrap gap-2)
+    const filesList = document.createElement("div");
+    filesList.className = "flex flex-wrap gap-8";
+
+    // Uploading files: badge list (match FileUploadLoader – flex-wrap gap-2)
+    const uploadingList = document.createElement("div");
+    uploadingList.className = "flex flex-wrap gap-8";
+    uploadingList.style.display = "none";
+
+    // State
+    let uploadedFiles = [];
+    let uploadingFiles = [];
+
+    // Load existing URLs from state
+    function loadExistingFiles() {
+      const urls = FlowUI.get(fieldId);
+      if (Array.isArray(urls) && urls.length > 0) {
+        uploadedFiles = urls.map((url) => ({
+          url: url,
+          name: url.split("/").pop() || "File",
+        }));
+        renderFilesList();
+        updateStatus();
+      }
+    }
+
+    function makeCopyBtn(fileUrl) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "shrink-0 rounded-2 p-4 text-typography-quaternary-text transition-colors hover:text-typography-primary-text focus:outline-none";
+      btn.innerHTML = ICONS.copy;
+      btn.setAttribute("aria-label", "Copy URL");
+      btn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        navigator.clipboard.writeText(fileUrl).then(
+          function () {
+            if (global.FlowUI && global.FlowUI.renderAlerts) {
+              const ac = document.getElementById("alerts");
+              if (ac) global.FlowUI.renderAlerts(ac, ["Link copied"], "success");
+            }
+          },
+          function () {
+            if (global.FlowUI && global.FlowUI.renderAlerts) {
+              const ac = document.getElementById("alerts");
+              if (ac) global.FlowUI.renderAlerts(ac, ["Copy failed"], "error");
+            }
+          }
+        );
+      });
+      return btn;
+    }
+
+    function makeViewBtn(fileUrl) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "shrink-0 rounded-2 p-4 text-typography-quaternary-text transition-colors hover:text-typography-primary-text focus:outline-none";
+      btn.innerHTML = ICONS.eye;
+      btn.setAttribute("aria-label", "View file");
+      btn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        window.open(fileUrl, "_blank", "noopener");
+      });
+      return btn;
+    }
+
+    function makeRemoveBtn(onRemove) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "shrink-0 rounded-2 p-4 text-error-text-base transition-colors hover:bg-error-surface focus:outline-none";
+      btn.innerHTML = ICONS.x;
+      btn.setAttribute("aria-label", "Remove file");
+      btn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        onRemove();
+      });
+      return btn;
+    }
+
+    // Render uploaded files as badges (uses Badge component when available)
+    function renderFilesList() {
+      filesList.innerHTML = "";
+      var useBadge = global.Badge && typeof global.Badge.create === "function";
+
+      uploadedFiles.forEach(function (file, index) {
+        var nameEl = document.createElement("p");
+        nameEl.className = "max-w-[100px] truncate text-reg-10 text-typography-secondary-text";
+        nameEl.textContent = file.name;
+        nameEl.title = file.url;
+
+        var actionsWrap = document.createElement("div");
+        actionsWrap.className = "flex items-center gap-2 shrink-0";
+        actionsWrap.appendChild(makeCopyBtn(file.url));
+        actionsWrap.appendChild(makeViewBtn(file.url));
+        actionsWrap.appendChild(makeRemoveBtn(function () {
+          uploadedFiles.splice(index, 1);
+          saveToState();
+          renderFilesList();
+          updateStatus();
+        }));
+
+        var badge;
+        if (useBadge) {
+          badge = global.Badge.create({
+            size: "small",
+            startIcon: getFileTypeIcon(file.name || file.url),
+            content: nameEl,
+            endIcon: actionsWrap,
+            className: "text-typography-primary-text",
+          });
+          var iconWraps = badge.querySelectorAll(".flex.size-16");
+          if (iconWraps.length >= 1) iconWraps[0].classList.add("text-typography-secondary-text");
+        } else {
+          badge = document.createElement("div");
+          badge.className = "inline-flex items-center gap-4 rounded-4 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-2 text-med-12 text-typography-primary-text";
+          var iconWrap = document.createElement("span");
+          iconWrap.className = "flex size-16 shrink-0 items-center justify-center text-typography-secondary-text";
+          iconWrap.innerHTML = getFileTypeIcon(file.name || file.url);
+          badge.appendChild(iconWrap);
+          badge.appendChild(nameEl);
+          badge.appendChild(actionsWrap);
+        }
+
+        filesList.appendChild(badge);
+      });
+    }
+
+    // Render uploading files as badges (uses Badge component when available)
+    function renderUploadingList() {
+      uploadingList.innerHTML = "";
+      var useBadge = global.Badge && typeof global.Badge.create === "function";
+
+      uploadingFiles.forEach(function (item) {
+        var nameEl = document.createElement("p");
+        nameEl.className = "max-w-[100px] truncate text-reg-10 text-typography-secondary-text";
+        nameEl.textContent = item.name;
+
+        var badge;
+        if (useBadge) {
+          badge = global.Badge.create({
+            size: "small",
+            startIcon: ICONS.loader,
+            content: nameEl,
+            className: "text-typography-primary-text",
+          });
+          var iconWraps = badge.querySelectorAll(".flex.size-16");
+          if (iconWraps.length >= 1) iconWraps[0].classList.add("text-typography-secondary-text");
+        } else {
+          badge = document.createElement("div");
+          badge.className = "inline-flex items-center gap-4 rounded-4 border-1/2 border-border-primary bg-fill-tertiary-fill-light-gray px-8 py-2 text-med-12";
+          var iconWrap = document.createElement("span");
+          iconWrap.className = "flex size-16 shrink-0 items-center justify-center text-typography-secondary-text";
+          iconWrap.innerHTML = ICONS.loader;
+          badge.appendChild(iconWrap);
+          badge.appendChild(nameEl);
+        }
+
+        uploadingList.appendChild(badge);
+      });
+
+      uploadingList.style.display = uploadingFiles.length > 0 ? "flex" : "none";
+    }
+
+    // Update button label (match React: "Add more files" / "Replace file" when files chosen)
+    function updateButtonLabel() {
+      const filesChosen = uploadedFiles.length > 0 || uploadingFiles.length > 0;
+      if (multiple) {
+        btn.textContent = filesChosen ? "Add more files" : "Choose files";
+      } else {
+        btn.textContent = filesChosen ? "Replace file" : "Choose a file";
+      }
+    }
+
+    // Update status text and end spinner (match React: Skeleton when uploading, else "X file(s) selected")
+    function updateStatus() {
+      const uploadedCount = uploadedFiles.length;
+      const uploadingCount = uploadingFiles.length;
+      const filesChosen = uploadedCount > 0 || uploadingCount > 0;
+
+      if (!filesChosen) {
+        statusText.textContent = "No files chosen";
+        statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-quaternary-text";
+      } else if (uploadingCount > 0) {
+        statusText.textContent = "Uploading…";
+        statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-quaternary-text";
+      } else {
+        statusText.textContent = `${uploadedCount} file${uploadedCount !== 1 ? "s" : ""} selected`;
+        statusText.className = "text-reg-13 min-w-0 flex-1 truncate text-typography-primary-text";
+      }
+
+      endIconSlot.style.display = uploadingCount > 0 ? "flex" : "none";
+      if (uploadingCount > 0 && endIconSlot.children.length === 0) {
+        const spinnerWrap = document.createElement("span");
+        spinnerWrap.className = "inline-block animate-spin";
+        spinnerWrap.innerHTML = ICONS.loader;
+        endIconSlot.appendChild(spinnerWrap);
+      }
+      updateButtonLabel();
+    }
+
+    // Save URLs to FlowUI state
+    function saveToState() {
+      const urls = uploadedFiles.map((f) => f.url).filter((url) => url);
+      const valueToSave = urls.length > 0 ? urls : null;
+      FlowUI.set(fieldId, valueToSave);
+      console.log(`[S3FileUpload] Saved to ${fieldId}:`, valueToSave);
+    }
+
+    // Validate file
+    function validateFile(file) {
+      if (maxFileSize && file.size > maxFileSize) {
+        return `File "${file.name}" is too large. Maximum size is ${(maxFileSize / 1024 / 1024).toFixed(2)}MB`;
+      }
+
+      if (accept !== "*") {
+        const acceptedTypes = accept.split(",").map((t) => t.trim());
+        const fileExtension = "." + file.name.split(".").pop().toLowerCase();
+        const fileType = file.type;
+
+        const isAccepted = acceptedTypes.some((type) => {
+          if (type.startsWith(".")) {
+            return fileExtension === type.toLowerCase();
+          }
+          if (type.includes("/")) {
+            return fileType === type || fileType.startsWith(type.split("/")[0] + "/");
+          }
+          return false;
+        });
+
+        if (!isAccepted) {
+          return `File "${file.name}" type is not supported. Accepted: ${accept}`;
+        }
+      }
+
+      return null;
+    }
+
+    // Upload a single file
+    async function uploadFile(file) {
+      const error = validateFile(file);
+      if (error) {
+        if (global.FlowUI && global.FlowUI.renderAlerts) {
+          const alertsContainer = document.getElementById("alerts");
+          if (alertsContainer) {
+            global.FlowUI.renderAlerts(alertsContainer, [error], "error");
+          }
+        }
+        return;
+      }
+
+      uploadingFiles.push({ file, name: file.name });
+      renderUploadingList();
+      updateStatus();
+
+      try {
+        const result = await uploadFileToS3(file, isPrivate);
+        const fileUrl = result?.url;
+        if (!fileUrl) {
+          throw new Error(`No URL returned from upload for file "${file.name}"`);
+        }
+        console.log(`[S3FileUpload] File uploaded successfully: ${file.name} -> ${fileUrl}`);
+
+        uploadingFiles = uploadingFiles.filter((f) => f.file !== file);
+        uploadedFiles.push({ url: fileUrl, name: file.name });
+        saveToState();
+        renderFilesList();
+        renderUploadingList();
+        updateStatus();
+      } catch (error) {
+        console.error("[S3FileUpload] Upload error:", error);
+        uploadingFiles = uploadingFiles.filter((f) => f.file !== file);
+        renderUploadingList();
+        updateStatus();
+        if (global.FlowUI && global.FlowUI.renderAlerts) {
+          const alertsContainer = document.getElementById("alerts");
+          if (alertsContainer) {
+            global.FlowUI.renderAlerts(
+              alertsContainer,
+              [`Failed to upload "${file.name}": ${error.message}`],
+              "error"
+            );
+          }
+        }
+      }
+    }
+
+    // Handle file selection
+    input.addEventListener("change", async function (e) {
+      const files = Array.from(e.target.files || []);
+      if (files.length === 0) {return;}
+
+      // Check max files limit
+      if (multiple && maxFiles && uploadedFiles.length + files.length > maxFiles) {
+        const message = `You can only upload ${maxFiles} file${maxFiles !== 1 ? "s" : ""}`;
+        if (global.FlowUI && global.FlowUI.renderAlerts) {
+          const alertsContainer = document.getElementById("alerts");
+          if (alertsContainer) {
+            global.FlowUI.renderAlerts(alertsContainer, [message], "error");
+          }
+        }
+        input.value = "";
+        return;
+      }
+
+      // For single file mode, clear existing and re-render
+      if (!multiple) {
+        uploadedFiles = [];
+        uploadingFiles = [];
+        renderFilesList();
+        renderUploadingList();
+        updateStatus();
+      }
+
+      // Upload all files
+      for (const file of files) {
+        await uploadFile(file);
+      }
+
+      // Reset input
+      input.value = "";
+    });
+
+    // Assemble upload row
+    leftContent.appendChild(btn);
+    leftContent.appendChild(statusText);
+    uploadWrapper.appendChild(leftContent);
+    uploadWrapper.appendChild(endIconSlot);
+    uploadWrapper.appendChild(input);
+    uploadContainer.appendChild(uploadWrapper);
+    uploadContainer.appendChild(uploadingList);
+    uploadContainer.appendChild(filesList);
+    field.appendChild(uploadContainer);
+
+    // Initialize
+    loadExistingFiles();
+    updateStatus();
+
+    return field;
+  }
+
+  // Export API (shadcn name: FileInput)
+  global.FileInput = {
+    create,
+  };
+
+  console.log("[FileInput] Module loaded successfully");
+})(typeof window !== "undefined" ? window : this);