@dmitryvim/form-builder 0.2.27 → 0.2.29

package/dist/esm/index.js

@@ -2104,30 +2104,58 @@ function isFileExtensionAllowed(fileName, allowedExtensions) {
   const ext = fileName.split(".").pop()?.toLowerCase() ?? "";
   return allowedExtensions.includes(ext);
 }
-function isFileSizeAllowed(file, maxSizeMB) {
+function isSizeWithinLimit(bytes, maxSizeMB) {
   if (maxSizeMB === Infinity) return true;
-  return file.size <= maxSizeMB * 1024 * 1024;
+  return bytes <= maxSizeMB * 1024 * 1024;
+}
+function isFileSizeAllowed(file, maxSizeMB) {
+  return isSizeWithinLimit(file.size, maxSizeMB);
+}
+function getAllowedMimes(accept) {
+  if (!accept) return [];
+  if (typeof accept === "string") return [];
+  if (!Array.isArray(accept.mime)) return [];
+  return accept.mime.map((m) => m.toLowerCase());
+}
+function isMimeAllowed(mimeType, allowedMimes) {
+  if (allowedMimes.length === 0) return true;
+  const normalizedType = mimeType.toLowerCase();
+  return allowedMimes.some((allowed) => {
+    if (allowed.endsWith("/*")) {
+      const prefix = allowed.slice(0, -1);
+      return normalizedType.startsWith(prefix);
+    }
+    return normalizedType === allowed;
+  });
+}
+function inferMimeFromResourceId(resourceId) {
+  const filename = resourceId.split("/").pop() || "file";
+  const extension = filename.split(".").pop()?.toLowerCase();
+  if (extension) {
+    if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
+      return `image/${extension === "jpg" ? "jpeg" : extension}`;
+    }
+    if (["mp4", "webm", "mov", "avi"].includes(extension)) {
+      return `video/${extension === "mov" ? "quicktime" : extension}`;
+    }
+  }
+  return "application/octet-stream";
+}
+function seedInferredResource(resourceId, resourceIndex) {
+  if (resourceIndex.has(resourceId)) return;
+  const filename = resourceId.split("/").pop() || "file";
+  resourceIndex.set(resourceId, {
+    name: filename,
+    type: inferMimeFromResourceId(resourceId),
+    size: 0,
+    uploadedAt: /* @__PURE__ */ new Date(),
+    file: void 0,
+    inferredFromExtension: true
+  });
 }
 function addPrefillFilesToIndex(initialFiles, resourceIndex) {
   for (const resourceId of initialFiles) {
-    if (resourceIndex.has(resourceId)) continue;
-    const filename = resourceId.split("/").pop() || "file";
-    const extension = filename.split(".").pop()?.toLowerCase();
-    let fileType = "application/octet-stream";
-    if (extension) {
-      if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-        fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-      } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-        fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-      }
-    }
-    resourceIndex.set(resourceId, {
-      name: filename,
-      type: fileType,
-      size: 0,
-      uploadedAt: /* @__PURE__ */ new Date(),
-      file: void 0
-    });
+    seedInferredResource(resourceId, resourceIndex);
   }
 }
 
@@ -2404,6 +2432,84 @@ function ensureFileStyles() {
   z-index: 10000;
 }
 
+/* Two-card empty-state layout (upload card + library card) */
+.fb-file-card-row {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+}
+.fb-file-card-row .fb-file-dropzone,
+.fb-file-card-row .fb-file-library-card {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Library picker card \u2014 mirrors .fb-file-dropzone styling */
+.fb-file-library-card {
+  height: 128px;
+  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+  border-radius: var(--fb-border-radius, 0.5rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  background: none;
+  padding: 0;
+  transition:
+    border-color var(--fb-transition-duration, 200ms),
+    background var(--fb-transition-duration, 200ms);
+  width: 100%;
+}
+.fb-file-library-card:hover,
+.fb-file-library-card:focus-visible {
+  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
+  background: var(--fb-background-hover-color, #f9fafb);
+  outline: none;
+}
+.fb-file-library-card-icon {
+  font-size: 24px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.fb-file-library-card-label {
+  font-size: 13px;
+  color: var(--fb-text-secondary-color, #6b7280);
+}
+.fb-file-library-card-hint {
+  font-size: 11px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+}
+
+/* Library "\u{1F4DA}" add-tile \u2014 same size/style as the "+" add tile */
+.fb-tile-add-library {
+  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 24px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+  transition:
+    border-color var(--fb-transition-duration, 200ms),
+    color var(--fb-transition-duration, 200ms);
+  background: none;
+  padding: 0;
+  width: var(--fb-tile-size, 160px);
+  height: var(--fb-tile-size, 160px);
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--fb-border-radius, 0.5rem);
+}
+.fb-tile-add-library:hover,
+.fb-tile-add-library:focus-visible {
+  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
+  color: var(--fb-text-color, #1f2937);
+  outline: none;
+}
+
 /* Hover zoom preview popup for image tiles \u2014 appended to document.body (fixed) */
 .fb-tile-zoom-preview {
   position: fixed;
@@ -2522,22 +2628,34 @@ function setEmptyFileContainer(fileContainer, state, hint) {
     </div>
   `;
 }
+var dragDropHandlers = /* @__PURE__ */ new WeakMap();
 function setupDragAndDrop(element, dropHandler) {
-  element.addEventListener("dragover", (e) => {
+  const prev = dragDropHandlers.get(element);
+  if (prev) {
+    element.removeEventListener("dragover", prev.dragover);
+    element.removeEventListener("dragleave", prev.dragleave);
+    element.removeEventListener("drop", prev.drop);
+  }
+  const dragover = (e) => {
     e.preventDefault();
     element.classList.add("border-blue-500", "bg-blue-50");
-  });
-  element.addEventListener("dragleave", (e) => {
+  };
+  const dragleave = (e) => {
     e.preventDefault();
     element.classList.remove("border-blue-500", "bg-blue-50");
-  });
-  element.addEventListener("drop", (e) => {
+  };
+  const drop = (e) => {
     e.preventDefault();
     element.classList.remove("border-blue-500", "bg-blue-50");
-    if (e.dataTransfer?.files) {
-      dropHandler(e.dataTransfer.files);
+    const files = e.dataTransfer?.files;
+    if (files) {
+      dropHandler(files);
     }
-  });
+  };
+  element.addEventListener("dragover", dragover);
+  element.addEventListener("dragleave", dragleave);
+  element.addEventListener("drop", drop);
+  dragDropHandlers.set(element, { dragover, dragleave, drop });
 }
 
 // src/components/file/preview.ts
@@ -3222,7 +3340,18 @@ async function uploadSingleFile(file, state) {
     throw new Error(`File upload failed: ${err.message}`);
   }
 }
-async function handleFileSelect(file, container, fieldName, state, deps = null, instance, allowedExtensions = [], maxSizeMB = Infinity) {
+async function handleFileSelect(opts) {
+  const {
+    file,
+    container,
+    fieldName,
+    state,
+    deps = null,
+    instance = null,
+    allowedExtensions = [],
+    allowedMimes = [],
+    maxSizeMB = Infinity
+  } = opts;
   if (!isFileExtensionAllowed(file.name, allowedExtensions)) {
     const formats = allowedExtensions.join(", ");
     showFileError(
@@ -3231,6 +3360,14 @@ async function handleFileSelect(file, container, fieldName, state, deps = null,
     );
     return;
   }
+  if (!isMimeAllowed(file.type, allowedMimes)) {
+    const mimes = allowedMimes.join(", ");
+    showFileError(
+      container,
+      t("invalidFileMime", state, { name: file.name, type: file.type, mimes })
+    );
+    return;
+  }
   if (!isFileSizeAllowed(file, maxSizeMB)) {
     showFileError(
       container,
@@ -3290,10 +3427,16 @@ function filterAndSlice(allFiles, currentCount, constraints, state) {
   const afterExt = allFiles.filter(
     (f) => isFileExtensionAllowed(f.name, constraints.allowedExtensions)
   );
-  const rejectedBySize = afterExt.filter(
+  const rejectedByMime = afterExt.filter(
+    (f) => !isMimeAllowed(f.type, constraints.allowedMimes)
+  );
+  const afterMime = afterExt.filter(
+    (f) => isMimeAllowed(f.type, constraints.allowedMimes)
+  );
+  const rejectedBySize = afterMime.filter(
     (f) => !isFileSizeAllowed(f, constraints.maxSize)
   );
-  const valid = afterExt.filter((f) => isFileSizeAllowed(f, constraints.maxSize));
+  const valid = afterMime.filter((f) => isFileSizeAllowed(f, constraints.maxSize));
   const remaining = constraints.maxCount === Infinity ? valid.length : Math.max(0, constraints.maxCount - currentCount);
   const accepted = valid.slice(0, remaining);
   const skippedByCount = valid.length - accepted.length;
@@ -3303,6 +3446,11 @@ function filterAndSlice(allFiles, currentCount, constraints, state) {
     const names = rejectedByExt.map((f) => f.name).join(", ");
     errorParts.push(t("invalidFileExtension", state, { name: names, formats }));
   }
+  if (rejectedByMime.length > 0) {
+    const mimes = constraints.allowedMimes.join(", ");
+    const names = rejectedByMime.map((f) => f.name).join(", ");
+    errorParts.push(t("invalidFileMime", state, { name: names, type: rejectedByMime.map((f) => f.type).join(", "), mimes }));
+  }
   if (rejectedBySize.length > 0) {
     const names = rejectedBySize.map((f) => f.name).join(", ");
     errorParts.push(
@@ -3394,27 +3542,159 @@ function setupFilesPickerHandler(filesPicker, resourceIds, state, updateCallback
   };
 }
 
-// src/components/file/render-edit.ts
-function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps) {
-  if (!state.resourceIndex.has(initial)) {
-    const filename = initial.split("/").pop() || "file";
-    const extension = filename.split(".").pop()?.toLowerCase();
-    let fileType = "application/octet-stream";
-    if (extension) {
-      if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-        fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-      } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-        fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-      }
-    }
-    state.resourceIndex.set(initial, {
-      name: filename,
-      type: fileType,
-      size: 0,
-      uploadedAt: /* @__PURE__ */ new Date(),
-      file: void 0
+// src/components/file/library.ts
+function buildAcceptContext(element) {
+  if (!element.accept) return void 0;
+  if (typeof element.accept === "string") {
+    const exts2 = getAllowedExtensions(element.accept);
+    return exts2.length > 0 ? { extensions: exts2 } : void 0;
+  }
+  const exts = element.accept.extensions ?? [];
+  const mime = element.accept.mime ?? [];
+  const normalizedExts = exts.map((e) => e.toLowerCase());
+  if (normalizedExts.length === 0 && mime.length === 0) return void 0;
+  const result = {};
+  if (normalizedExts.length > 0) result.extensions = normalizedExts;
+  if (mime.length > 0) result.mime = mime;
+  return result;
+}
+function validatePickedResource(resource, allowedExtensions, allowedMimes, maxSizeMB, state) {
+  if (!isFileExtensionAllowed(resource.name, allowedExtensions)) {
+    const formats = allowedExtensions.join(", ");
+    return t("invalidFileExtension", state, { name: resource.name, formats });
+  }
+  if (!isMimeAllowed(resource.type, allowedMimes)) {
+    const mimes = allowedMimes.join(", ");
+    return t("invalidFileMime", state, { name: resource.name, type: resource.type, mimes });
+  }
+  if (!isSizeWithinLimit(resource.size, maxSizeMB)) {
+    return t("fileTooLarge", state, { name: resource.name, maxSize: maxSizeMB });
+  }
+  return null;
+}
+function readCurrentResourceIds(wrapper) {
+  const raw = wrapper.dataset.resourceIds;
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+function registerPickedResource(resource, state) {
+  const existing = state.resourceIndex.get(resource.resourceId);
+  state.resourceIndex.set(resource.resourceId, {
+    name: resource.name,
+    type: resource.type,
+    size: resource.size,
+    uploadedAt: existing?.uploadedAt ?? /* @__PURE__ */ new Date(),
+    file: existing?.file
+  });
+}
+function extractPickerError(error, state) {
+  if (error instanceof Error && error.message) return error.message;
+  return t("pickerError", state);
+}
+async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resourceIds, maxCount, updateCallback, instance) {
+  if (!state.config.pickExistingFiles) return;
+  const allowedExtensions = getAllowedExtensions(element.accept);
+  const allowedMimes = getAllowedMimes(element.accept);
+  const maxSizeMB = element.maxSize ?? Infinity;
+  const currentIds = readCurrentResourceIds(wrapper);
+  const remaining = maxCount === Infinity ? Infinity : Math.max(0, maxCount - currentIds.length);
+  let picked;
+  try {
+    picked = await state.config.pickExistingFiles({
+      fieldPath,
+      mode: "multiple",
+      accept: buildAcceptContext(element),
+      maxSizeMB: maxSizeMB === Infinity ? void 0 : maxSizeMB,
+      remainingSlots: remaining === Infinity ? void 0 : remaining,
+      selectedResourceIds: [...currentIds]
     });
+  } catch (error) {
+    showFileError(wrapper, extractPickerError(error, state));
+    return;
+  }
+  if (picked.length === 0) return;
+  const existingSet = new Set(currentIds);
+  const seen = /* @__PURE__ */ new Set();
+  const deduped = picked.filter((r) => {
+    if (existingSet.has(r.resourceId)) return false;
+    if (seen.has(r.resourceId)) return false;
+    seen.add(r.resourceId);
+    return true;
+  });
+  const validItems = deduped.filter((r) => {
+    const err = validatePickedResource(r, allowedExtensions, allowedMimes, maxSizeMB, state);
+    return err === null;
+  });
+  const freshRemaining = maxCount === Infinity ? validItems.length : Math.max(0, maxCount - resourceIds.length);
+  const accepted = validItems.slice(0, freshRemaining);
+  const skipped = validItems.length - accepted.length;
+  if (accepted.length === 0) return;
+  clearFileError(wrapper);
+  if (skipped > 0) {
+    showFileError(
+      wrapper,
+      t("filesLimitExceeded", state, { skipped, max: maxCount })
+    );
+  }
+  for (const resource of accepted) {
+    registerPickedResource(resource, state);
+    resourceIds.push(resource.resourceId);
+  }
+  wrapper.dataset.resourceIds = JSON.stringify(resourceIds);
+  updateCallback();
+  if (!state.config.readonly) {
+    instance.triggerOnChange(fieldPath, resourceIds);
+  }
+}
+async function handleLibraryPickSingle(state, element, container, fileWrapper, pathKey, fieldPath, renderCallback, instance) {
+  if (!state.config.pickExistingFiles) return;
+  const allowedExtensions = getAllowedExtensions(element.accept);
+  const allowedMimes = getAllowedMimes(element.accept);
+  const maxSizeMB = element.maxSize ?? Infinity;
+  let picked;
+  try {
+    picked = await state.config.pickExistingFiles({
+      fieldPath,
+      mode: "single",
+      accept: buildAcceptContext(element),
+      maxSizeMB: maxSizeMB === Infinity ? void 0 : maxSizeMB,
+      selectedResourceIds: []
+    });
+  } catch (error) {
+    showFileError(container, extractPickerError(error, state));
+    return;
+  }
+  if (picked.length === 0) return;
+  const first = picked[0];
+  const validationError = validatePickedResource(first, allowedExtensions, allowedMimes, maxSizeMB, state);
+  if (validationError !== null) {
+    showFileError(container, validationError);
+    return;
+  }
+  clearFileError(container);
+  registerPickedResource(first, state);
+  let hiddenInput = fileWrapper.querySelector('input[type="hidden"]');
+  if (!hiddenInput) {
+    hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = pathKey;
+    fileWrapper.appendChild(hiddenInput);
+  }
+  hiddenInput.value = first.resourceId;
+  await renderCallback(first.resourceId);
+  if (!state.config.readonly) {
+    instance.triggerOnChange(fieldPath, first.resourceId);
   }
+}
+
+// src/components/file/render-edit.ts
+function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps) {
+  seedInferredResource(initial, state.resourceIndex);
   const meta = state.resourceIndex.get(initial);
   const isVideo = meta?.type?.startsWith("video/");
   if (isVideo) {
@@ -3432,7 +3712,50 @@ function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, sta
   hiddenInput.value = initial;
   fileWrapper.appendChild(hiddenInput);
 }
-function renderResourcePills(container, rids, state, onRemove, hint, countInfo, maxCount, isReadonly = false) {
+var UPLOAD_SVG = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;color:var(--fb-file-upload-text-color,#9ca3af);">
+  <path d="M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
+</svg>`;
+function buildEmptyDropzone(state, primaryText, subHint, openPicker) {
+  const dropzone = document.createElement("div");
+  dropzone.className = "fb-file-dropzone";
+  dropzone.innerHTML = `
+    ${UPLOAD_SVG}
+    <div class="fb-dropzone-primary-text">${escapeHtml(primaryText)}</div>
+    ${subHint ? `<div class="fb-dropzone-hint-text">${escapeHtml(subHint)}</div>` : ""}
+  `;
+  dropzone.onclick = openPicker;
+  return dropzone;
+}
+function buildLibraryButton(variant, state, onClick) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = variant === "card" ? "fb-file-library-card" : "fb-tile fb-tile-add-library";
+  if (variant === "card") {
+    btn.innerHTML = `
+      <span class="fb-file-library-card-icon" aria-hidden="true">\u{1F4DA}</span>
+      <span class="fb-file-library-card-label">${escapeHtml(t("fromLibrary", state))}</span>
+      <span class="fb-file-library-card-hint">${escapeHtml(t("libraryHint", state))}</span>
+    `;
+  } else {
+    btn.innerHTML = `<span aria-hidden="true">\u{1F4DA}</span>`;
+    btn.title = t("fromLibrary", state);
+    btn.setAttribute("aria-label", t("fromLibrary", state));
+  }
+  btn.addEventListener("click", onClick);
+  return btn;
+}
+function renderResourcePills(opts) {
+  const {
+    container,
+    rids,
+    state,
+    onRemove,
+    hint,
+    countInfo,
+    maxCount,
+    isReadonly = false,
+    onLibraryPick
+  } = opts;
   ensureFileStyles();
   const wrapper = container.closest("[data-files-wrapper]");
   if (wrapper) {
@@ -3441,6 +3764,7 @@ function renderResourcePills(container, rids, state, onRemove, hint, countInfo,
   while (container.firstChild) container.removeChild(container.firstChild);
   const ridList = rids ?? [];
   const atMax = maxCount !== void 0 && ridList.length >= maxCount;
+  const hasLibrary = !isReadonly && typeof onLibraryPick === "function";
   const buildSubHint = () => {
     const parts = [];
     if (hint) parts.push(hint);
@@ -3457,18 +3781,26 @@ function renderResourcePills(container, rids, state, onRemove, hint, countInfo,
       emptyEl.className = "fb-tile-empty-text";
       emptyEl.textContent = t("noFilesSelected", state);
       container.appendChild(emptyEl);
+    } else if (hasLibrary) {
+      const row = document.createElement("div");
+      row.className = "fb-file-card-row";
+      const dropzone = buildEmptyDropzone(
+        state,
+        t("clickDragTextMultiple", state),
+        buildSubHint(),
+        openPicker
+      );
+      const libraryBtn = buildLibraryButton("card", state, onLibraryPick);
+      row.appendChild(dropzone);
+      row.appendChild(libraryBtn);
+      container.appendChild(row);
     } else {
-      const dropzone = document.createElement("div");
-      dropzone.className = "fb-file-dropzone";
-      const subHint2 = buildSubHint();
-      dropzone.innerHTML = `
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;color:var(--fb-file-upload-text-color,#9ca3af);">
-          <path d="M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
-        </svg>
-        <div class="fb-dropzone-primary-text">${escapeHtml(t("clickDragTextMultiple", state))}</div>
-        ${subHint2 ? `<div class="fb-dropzone-hint-text">${escapeHtml(subHint2)}</div>` : ""}
-      `;
-      dropzone.onclick = openPicker;
+      const dropzone = buildEmptyDropzone(
+        state,
+        t("clickDragTextMultiple", state),
+        buildSubHint(),
+        openPicker
+      );
       container.appendChild(dropzone);
     }
     return;
@@ -3499,6 +3831,10 @@ function renderResourcePills(container, rids, state, onRemove, hint, countInfo,
     addTile.innerHTML = "+";
     addTile.onclick = openPicker;
     tilesWrap.appendChild(addTile);
+    if (hasLibrary) {
+      const libraryTile = buildLibraryButton("tile", state, onLibraryPick);
+      tilesWrap.appendChild(libraryTile);
+    }
   } else if (!isReadonly && atMax) {
     const chip = document.createElement("div");
     chip.className = "fb-tile-counter";
@@ -3526,12 +3862,16 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
   picker.name = pathKey;
   picker.style.display = "none";
   if (element.accept) {
-    picker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
+    picker.accept = typeof element.accept === "string" ? element.accept : [
+      ...element.accept.extensions?.map((ext) => `.${ext}`) ?? [],
+      ...element.accept.mime ?? []
+    ].join(",") || "";
   }
   const fileContainer = document.createElement("div");
   fileContainer.className = "file-preview-container";
   const initial = ctx.prefill[element.key];
   const allowedExts = getAllowedExtensions(element.accept);
+  const allowedMimes = getAllowedMimes(element.accept);
   const maxSizeMB = element.maxSize ?? Infinity;
   const handlers = {
     fileUploadHandler() {
@@ -3539,16 +3879,17 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
     },
     dragHandler(files) {
       if (files.length > 0) {
-        handleFileSelect(
-          files[0],
-          fileContainer,
-          pathKey,
+        handleFileSelect({
+          file: files[0],
+          container: fileContainer,
+          fieldName: pathKey,
           state,
-          buildDeps(),
-          ctx.instance,
-          allowedExts,
+          deps: buildDeps(),
+          instance: ctx.instance,
+          allowedExtensions: allowedExts,
+          allowedMimes,
           maxSizeMB
-        );
+        });
       }
     },
     setupDrop(container) {
@@ -3569,7 +3910,7 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
         releaseLocalFileUrl(state.resourceIndex.get(currentRid)?.file);
       }
       if (hiddenInput) hiddenInput.value = "";
-      handlers.restoreDropzone();
+      renderEmptySingleState();
     }
   };
   const buildDeps = () => ({
@@ -3579,6 +3920,50 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
     setupDrop: handlers.setupDrop,
     onRemove: handlers.onRemove
   });
+  const renderEmptySingleState = () => {
+    if (state.config.pickExistingFiles && !element.disableLibrary) {
+      fileContainer.className = "file-preview-container";
+      fileContainer.removeAttribute("style");
+      fileContainer.onclick = null;
+      while (fileContainer.firstChild) {
+        fileContainer.removeChild(fileContainer.firstChild);
+      }
+      const row = document.createElement("div");
+      row.className = "fb-file-card-row";
+      row.style.cssText = "display:flex;gap:8px;align-items:stretch;";
+      const hint = makeFieldHint(element, state);
+      const uploadCard = buildEmptyDropzone(
+        state,
+        t("clickDragText", state),
+        hint,
+        handlers.fileUploadHandler
+      );
+      uploadCard.style.cssText = "flex:1;min-width:0;height:128px;";
+      setupDragAndDrop(uploadCard, handlers.dragHandler);
+      const libraryBtn = buildLibraryButton("card", state, () => {
+        handleLibraryPickSingle(
+          state,
+          element,
+          fileContainer,
+          fileWrapper,
+          pathKey,
+          pathKey,
+          async (rid) => {
+            await renderSingleFileEditTile(fileContainer, rid, state, buildDeps());
+          },
+          ctx.instance
+        ).catch((err) => {
+          console.error("Library pick failed:", err);
+        });
+      });
+      libraryBtn.style.cssText = "flex:1;min-width:0;";
+      row.appendChild(uploadCard);
+      row.appendChild(libraryBtn);
+      fileContainer.appendChild(row);
+    } else {
+      handlers.restoreDropzone();
+    }
+  };
   if (initial) {
     handleInitialFileData(
       initial,
@@ -3594,20 +3979,21 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
       setupDragAndDrop(fileContainer, handlers.dragHandler);
     }
   } else {
-    handlers.restoreDropzone();
+    renderEmptySingleState();
   }
   picker.onchange = () => {
     if (picker.files && picker.files.length > 0) {
-      handleFileSelect(
-        picker.files[0],
-        fileContainer,
-        pathKey,
+      handleFileSelect({
+        file: picker.files[0],
+        container: fileContainer,
+        fieldName: pathKey,
         state,
-        buildDeps(),
-        ctx.instance,
-        allowedExts,
+        deps: buildDeps(),
+        instance: ctx.instance,
+        allowedExtensions: allowedExts,
+        allowedMimes,
         maxSizeMB
-      );
+      });
     }
   };
   fileWrapper.appendChild(fileContainer);
@@ -3625,7 +4011,10 @@ function renderFilesElementEdit(element, ctx, wrapper, pathKey) {
   filesPicker.multiple = true;
   filesPicker.style.display = "none";
   if (element.accept) {
-    filesPicker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
+    filesPicker.accept = typeof element.accept === "string" ? element.accept : [
+      ...element.accept.extensions?.map((ext) => `.${ext}`) ?? [],
+      ...element.accept.mime ?? []
+    ].join(",") || "";
   }
   const filesContainer = document.createElement("div");
   filesContainer.className = "files-list-wrapper";
@@ -3639,29 +4028,43 @@ function renderFilesElementEdit(element, ctx, wrapper, pathKey) {
   const filesConstraints = {
     maxCount: Infinity,
     allowedExtensions: getAllowedExtensions(element.accept),
+    allowedMimes: getAllowedMimes(element.accept),
     maxSize: element.maxSize ?? Infinity
   };
   filesContainer.appendChild(list);
   filesWrapper.appendChild(filesPicker);
   filesWrapper.appendChild(filesContainer);
   wrapper.appendChild(filesWrapper);
+  const onLibraryPickFiles = state.config.pickExistingFiles && !element.disableLibrary ? () => {
+    handleLibraryPickMulti(
+      state,
+      element,
+      filesWrapper,
+      pathKey,
+      initialFiles,
+      Infinity,
+      updateFilesList,
+      ctx.instance
+    ).catch((err) => {
+      console.error("Library pick failed:", err);
+    });
+  } : null;
   function updateFilesList() {
     const currentlyReadonly = isElementReadonly(element, state);
-    renderResourcePills(
-      list,
-      initialFiles,
+    renderResourcePills({
+      container: list,
+      rids: initialFiles,
       state,
-      currentlyReadonly ? null : (ridToRemove) => {
+      onRemove: currentlyReadonly ? null : (ridToRemove) => {
         releaseLocalFileUrl(state.resourceIndex.get(ridToRemove)?.file);
         const index = initialFiles.indexOf(ridToRemove);
         if (index > -1) initialFiles.splice(index, 1);
         updateFilesList();
       },
-      filesFieldHint,
-      void 0,
-      void 0,
-      currentlyReadonly
-    );
+      hint: filesFieldHint,
+      isReadonly: currentlyReadonly,
+      onLibraryPick: currentlyReadonly ? null : onLibraryPickFiles
+    });
   }
   updateFilesList();
   setupFilesDropHandler(
@@ -3696,7 +4099,10 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
   filesPicker.multiple = true;
   filesPicker.style.display = "none";
   if (element.accept) {
-    filesPicker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
+    filesPicker.accept = typeof element.accept === "string" ? element.accept : [
+      ...element.accept.extensions?.map((ext) => `.${ext}`) ?? [],
+      ...element.accept.mime ?? []
+    ].join(",") || "";
   }
   const filesContainer = document.createElement("div");
   filesContainer.className = "files-list-wrapper";
@@ -3713,6 +4119,7 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
   const multipleConstraints = {
     maxCount: maxFiles,
     allowedExtensions: getAllowedExtensions(element.accept),
+    allowedMimes: getAllowedMimes(element.accept),
     maxSize: element.maxSize ?? Infinity
   };
   const buildCountInfo = () => {
@@ -3720,22 +4127,37 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
     const minMaxText = minFiles > 0 || maxFiles < Infinity ? ` ${t("fileCountRange", state, { min: minFiles, max: maxFiles })}` : "";
     return countText + minMaxText;
   };
+  const onLibraryPickMultiple = state.config.pickExistingFiles && !element.disableLibrary ? () => {
+    handleLibraryPickMulti(
+      state,
+      element,
+      filesWrapper,
+      pathKey,
+      initialFiles,
+      maxFiles,
+      updateFilesDisplay,
+      ctx.instance
+    ).catch((err) => {
+      console.error("Library pick failed:", err);
+    });
+  } : null;
   const updateFilesDisplay = () => {
     const currentlyReadonly = isElementReadonly(element, state);
-    renderResourcePills(
-      list,
-      initialFiles,
+    renderResourcePills({
+      container: list,
+      rids: initialFiles,
       state,
-      currentlyReadonly ? null : (index) => {
+      onRemove: currentlyReadonly ? null : (index) => {
         releaseLocalFileUrl(state.resourceIndex.get(index)?.file);
         initialFiles.splice(initialFiles.indexOf(index), 1);
         updateFilesDisplay();
       },
-      multipleFilesHint,
-      buildCountInfo(),
-      maxFiles < Infinity ? maxFiles : void 0,
-      currentlyReadonly
-    );
+      hint: multipleFilesHint,
+      countInfo: buildCountInfo(),
+      maxCount: maxFiles < Infinity ? maxFiles : void 0,
+      isReadonly: currentlyReadonly,
+      onLibraryPick: currentlyReadonly ? null : onLibraryPickMultiple
+    });
   };
   setupFilesDropHandler(
     filesContainer,
@@ -3792,18 +4214,29 @@ function validateFileCount(key, resourceIds, element, state, errors) {
     errors.push(`${key}: ${t("maxFiles", state, { max: maxFiles })}`);
   }
 }
-function validateFileExtensions(key, resourceIds, element, state, errors) {
+function validateFileTypes(key, resourceIds, element, state, errors) {
   const acceptField = "accept" in element ? element.accept : void 0;
   const allowedExtensions = getAllowedExtensions(acceptField);
-  if (allowedExtensions.length === 0) return;
+  const allowedMimes = getAllowedMimes(acceptField);
+  if (allowedExtensions.length === 0 && allowedMimes.length === 0) return;
   const formats = allowedExtensions.join(", ");
+  const mimes = allowedMimes.join(", ");
   for (const rid of resourceIds) {
     const meta = state.resourceIndex.get(rid);
     const fileName = meta?.name ?? rid;
-    if (!isFileExtensionAllowed(fileName, allowedExtensions)) {
+    if (allowedExtensions.length > 0 && !isFileExtensionAllowed(fileName, allowedExtensions)) {
       errors.push(
         `${key}: ${t("invalidFileExtension", state, { name: fileName, formats })}`
       );
+      continue;
+    }
+    if (allowedMimes.length > 0 && !meta?.inferredFromExtension) {
+      const mimeType = meta?.type ?? "";
+      if (!isMimeAllowed(mimeType, allowedMimes)) {
+        errors.push(
+          `${key}: ${t("invalidFileMime", state, { name: fileName, type: mimeType, mimes })}`
+        );
+      }
     }
   }
 }
@@ -3827,7 +4260,7 @@ function validateMultiFile(element, key, context) {
   const resourceIds = readMultiFileResourceIds(scopeRoot, fullKey);
   if (!skipValidation) {
     validateFileCount(key, resourceIds, element, state, errors);
-    validateFileExtensions(key, resourceIds, element, state, errors);
+    validateFileTypes(key, resourceIds, element, state, errors);
     validateFileSizes(key, resourceIds, element, state, errors);
   }
   return { value: resourceIds, errors };
@@ -3844,7 +4277,7 @@ function validateSingleFile(element, key, context) {
     return { value: null, errors };
   }
   if (!skipValidation && rid !== "") {
-    validateFileExtensions(key, [rid], element, state, errors);
+    validateFileTypes(key, [rid], element, state, errors);
     validateFileSizes(key, [rid], element, state, errors);
   }
   return { value: rid || null, errors };
@@ -3970,9 +4403,7 @@ function updateFileField(element, fieldPath, value, context) {
     }
     value.forEach((resourceId) => {
       if (resourceId && typeof resourceId === "string") {
-        if (!state.resourceIndex.has(resourceId)) {
-          addResourceToIndex(resourceId, state);
-        }
+        seedInferredResource(resourceId, state.resourceIndex);
       }
     });
     const filesWrapper = scopeRoot.querySelector(
@@ -3997,34 +4428,13 @@ function updateFileField(element, fieldPath, value, context) {
     }
     hiddenInput.value = value != null ? String(value) : "";
     if (value && typeof value === "string") {
-      if (!state.resourceIndex.has(value)) {
-        addResourceToIndex(value, state);
-      }
+      seedInferredResource(value, state.resourceIndex);
       console.info(
         `updateFileField: File field "${fieldPath}" updated. Preview update requires re-render.`
       );
     }
   }
 }
-function addResourceToIndex(resourceId, state) {
-  const filename = resourceId.split("/").pop() || "file";
-  const extension = filename.split(".").pop()?.toLowerCase();
-  let fileType = "application/octet-stream";
-  if (extension) {
-    if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-      fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-    } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-      fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-    }
-  }
-  state.resourceIndex.set(resourceId, {
-    name: filename,
-    type: fileType,
-    size: 0,
-    uploadedAt: /* @__PURE__ */ new Date(),
-    file: void 0
-  });
-}
 
 // src/components/colour.ts
 function normalizeColourValue(value) {
@@ -8668,6 +9078,7 @@ var defaultConfig = {
   enableFilePreview: true,
   maxPreviewSize: "200px",
   readonly: false,
+  pickExistingFiles: null,
   parseTableFile: null,
   locale: "en",
   translations: {
@@ -8704,6 +9115,10 @@ var defaultConfig = {
       fileCountRange: "({min}-{max})",
       uploadingFile: "Uploading\u2026",
       filesCounter: "{count}/{max}",
+      fromLibrary: "From library",
+      libraryEmpty: "Library is empty",
+      libraryHint: "Choose from previously uploaded files",
+      pickerError: "Failed to load files from library",
       // Validation errors
       required: "Required",
       minItems: "Minimum {min} items required",
@@ -8719,6 +9134,7 @@ var defaultConfig = {
       minFiles: "Minimum {min} files required",
       maxFiles: "Maximum {max} files allowed",
       invalidFileExtension: 'File "{name}" has unsupported format. Allowed: {formats}',
+      invalidFileMime: 'File "{name}": file type {type} not allowed (allowed: {mimes})',
       fileTooLarge: 'File "{name}" exceeds maximum size of {maxSize}MB',
       filesLimitExceeded: "{skipped} file(s) skipped: maximum {max} files allowed",
       unsupportedFieldType: "Unsupported field type: {type}",
@@ -8770,6 +9186,10 @@ var defaultConfig = {
       fileCountRange: "({min}-{max})",
       uploadingFile: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
       filesCounter: "{count}/{max}",
+      fromLibrary: "\u0418\u0437 \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0438",
+      libraryEmpty: "\u0411\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430 \u043F\u0443\u0441\u0442\u0430",
+      libraryHint: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0437 \u0440\u0430\u043D\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432",
+      pickerError: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0444\u0430\u0439\u043B\u044B \u0438\u0437 \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0438",
       // Validation errors
       required: "\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0435 \u043F\u043E\u043B\u0435",
       minItems: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C {min} \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432",
@@ -8785,6 +9205,7 @@ var defaultConfig = {
       minFiles: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C {min} \u0444\u0430\u0439\u043B\u043E\u0432",
       maxFiles: "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u0444\u0430\u0439\u043B\u043E\u0432",
       invalidFileExtension: '\u0424\u0430\u0439\u043B "{name}" \u0438\u043C\u0435\u0435\u0442 \u043D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442. \u0414\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u044B\u0435: {formats}',
+      invalidFileMime: '\u0424\u0430\u0439\u043B "{name}": \u0442\u0438\u043F \u0444\u0430\u0439\u043B\u0430 {type} \u043D\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0451\u043D (\u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u044B: {mimes})',
       fileTooLarge: '\u0424\u0430\u0439\u043B "{name}" \u043F\u0440\u0435\u0432\u044B\u0448\u0430\u0435\u0442 \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0430\u0437\u043C\u0435\u0440 {maxSize}\u041C\u0411',
       filesLimitExceeded: "{skipped} \u0444\u0430\u0439\u043B(\u043E\u0432) \u043F\u0440\u043E\u043F\u0443\u0449\u0435\u043D\u043E: \u043C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u0444\u0430\u0439\u043B\u043E\u0432",
       unsupportedFieldType: "\u041D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0442\u0438\u043F \u043F\u043E\u043B\u044F: {type}",