npm - @dmitryvim/form-builder - Versions diffs - 0.2.26 → 0.2.28 - Mend

@dmitryvim/form-builder 0.2.26 → 0.2.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/README.md +60 -4
package/dist/browser/formbuilder.min.js +534 -184
package/dist/browser/formbuilder.v0.2.28.min.js +956 -0
package/dist/cjs/index.cjs +2002 -1005
package/dist/cjs/index.cjs.map +1 -1
package/dist/esm/index.js +1976 -992
package/dist/esm/index.js.map +1 -1
package/dist/form-builder.js +534 -184
package/dist/types/components/file/constraints.d.ts +62 -0
package/dist/types/components/file/dom.d.ts +44 -0
package/dist/types/components/file/library.d.ts +49 -0
package/dist/types/components/file/preview.d.ts +69 -0
package/dist/types/components/file/render-edit.d.ts +18 -0
package/dist/types/components/file/render-readonly.d.ts +23 -0
package/dist/types/components/file/styles.d.ts +1 -0
package/dist/types/components/file/upload.d.ts +25 -0
package/dist/types/components/file/validate.d.ts +13 -0
package/dist/types/components/file.d.ts +5 -27
package/dist/types/index.d.ts +1 -1
package/dist/types/types/config.d.ts +37 -0
package/dist/types/types/index.d.ts +1 -1
package/dist/types/types/schema.d.ts +13 -6
package/package.json +1 -1
package/dist/browser/formbuilder.v0.2.26.min.js +0 -606

package/dist/cjs/index.cjs CHANGED Viewed

@@ -2119,7 +2119,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
   }
 }
-// src/components/file.ts
+// src/components/file/constraints.ts
 function getAllowedExtensions(accept) {
   if (!accept) return [];
   if (typeof accept === "object" && Array.isArray(accept.extensions)) {
@@ -2131,18 +2131,775 @@ function getAllowedExtensions(accept) {
   return [];
 }
 function isFileExtensionAllowed(fileName, allowedExtensions) {
-  var _a;
+  var _a, _b;
   if (allowedExtensions.length === 0) return true;
-  const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+  const ext = (_b = (_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) != null ? _b : "";
   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) {
+  var _a;
+  const filename = resourceId.split("/").pop() || "file";
+  const extension = (_a = filename.split(".").pop()) == null ? void 0 : _a.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) {
+    seedInferredResource(resourceId, resourceIndex);
+  }
+}
+// src/components/file/styles.ts
+var STYLE_ID = "fb-file-styles";
+function ensureFileStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.setAttribute("data-fb-file-styles", "true");
+  style.textContent = `
+@keyframes fb-spin { to { transform: rotate(360deg); } }
+/* Spinner used during single-file and multi-file upload */
+.fb-spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid rgba(0,0,0,0.12);
+  border-top-color: var(--fb-text-secondary-color, #6b7280);
+  border-radius: 50%;
+  animation: fb-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+/* Base tile: fixed 160\xD7160 square, theme-aware background */
+.fb-tile {
+  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);
+  background: var(--fb-file-upload-bg-color, #f3f4f6);
+}
+/* Uploaded resource tile \u2014 adds a visible border */
+.fb-tile-resource {
+  border: 1px solid var(--fb-file-upload-border-color, #d1d5db);
+}
+/* Uploading placeholder tile \u2014 dashed border, uploading indicator */
+.fb-tile-uploading {
+  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+}
+/* "+" add-more tile */
+.fb-tile-add {
+  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 32px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+  transition:
+    border-color var(--fb-transition-duration, 200ms),
+    color var(--fb-transition-duration, 200ms);
+}
+.fb-tile-add:hover {
+  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
+  color: var(--fb-text-color, #1f2937);
+}
+/* Count chip shown when at maxCount */
+.fb-tile-counter {
+  font-size: 11px;
+  color: var(--fb-text-secondary-color, #6b7280);
+  background: var(--fb-file-upload-bg-color, #f3f4f6);
+  border: 1px solid var(--fb-file-upload-border-color, #d1d5db);
+  border-radius: 4px;
+  padding: 2px 6px;
+  align-self: flex-end;
+  margin-bottom: 4px;
+}
+/* Empty-state dropzone */
+.fb-file-dropzone {
+  width: 100%;
+  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;
+  transition:
+    border-color var(--fb-transition-duration, 200ms),
+    background var(--fb-transition-duration, 200ms);
+}
+.fb-file-dropzone:hover {
+  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
+  background: var(--fb-background-hover-color, #f9fafb);
+}
+/* Inline text inside tiles */
+.fb-tile-label {
+  font-size: 9px;
+  color: var(--fb-text-secondary-color, #6b7280);
+  text-align: center;
+  overflow: hidden;
+  word-break: break-all;
+  max-height: 28px;
+}
+.fb-tile-uploading-text {
+  font-size: 8px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+}
+.fb-tile-hint {
+  font-size: 11px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+  margin-top: 4px;
+}
+.fb-tile-empty-text {
+  font-size: 12px;
+  color: var(--fb-text-secondary-color, #6b7280);
+  padding: 4px 0;
+}
+.fb-dropzone-primary-text {
+  font-size: 13px;
+  color: var(--fb-text-secondary-color, #6b7280);
+}
+.fb-dropzone-hint-text {
+  font-size: 11px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+}
+/* Hover overlay + X-button on resource tiles */
+.fb-tile-overlay {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  transition: background var(--fb-transition-duration, 200ms);
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.fb-tile-resource:hover .fb-tile-overlay {
+  background: var(--fb-tile-hover-overlay-color, rgba(0,0,0,0.4));
+}
+.fb-tile-x-btn {
+  margin: 3px;
+  width: 18px;
+  height: 18px;
+  background: var(--fb-error-color, #ef4444);
+  color: var(--fb-file-bg-color, #fff);
+  border: none;
+  border-radius: 50%;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity var(--fb-transition-duration, 200ms);
+}
+.fb-tile-resource:hover .fb-tile-x-btn {
+  opacity: 1;
+}
+/* Video play button overlay (readonly tiles with video thumbnails) */
+.fb-video-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--fb-tile-hover-overlay-color, rgba(0,0,0,0.25));
+}
+.fb-play-btn {
+  background: var(--fb-file-bg-color, rgba(255,255,255,0.9));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* Edit-mode local video preview wrapper */
+.fb-video-preview-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+/* Hover overlay for edit-mode local video (Remove / Change buttons) */
+.fb-video-btn-overlay {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity var(--fb-transition-duration, 200ms);
+  pointer-events: none;
+}
+.fb-video-preview-wrap:hover .fb-video-btn-overlay {
+  opacity: 1;
+  pointer-events: auto;
+}
+.fb-video-btn {
+  border: none;
+  border-radius: var(--fb-border-radius, 4px);
+  font-size: 11px;
+  padding: 4px 8px;
+  cursor: pointer;
+  color: #fff;
+  line-height: 1.2;
+}
+.fb-video-btn-delete {
+  background: rgba(220, 38, 38, 0.85);
+}
+.fb-video-btn-delete:hover {
+  background: rgba(185, 28, 28, 0.95);
+}
+.fb-video-btn-change {
+  background: rgba(31, 41, 55, 0.85);
+}
+.fb-video-btn-change:hover {
+  background: rgba(17, 24, 39, 0.95);
+}
+/* Tile action icon buttons (download / open / remove) \u2014 shown on tile hover */
+.fb-tile-actions {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
+  opacity: 0;
+  transition: opacity var(--fb-transition-duration, 200ms);
+  z-index: 10;
+}
+.fb-tile-resource:hover .fb-tile-actions {
+  opacity: 1;
+}
+.fb-tile-action-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  background: rgba(31, 41, 55, 0.75);
+  color: #fff;
+  padding: 0;
+  flex-shrink: 0;
+  transition:
+    background var(--fb-transition-duration, 200ms),
+    opacity var(--fb-transition-duration, 200ms);
+}
+.fb-tile-action-btn:hover {
+  background: rgba(17, 24, 39, 0.95);
+}
+.fb-tile-action-remove {
+  background: rgba(220, 38, 38, 0.8);
+}
+.fb-tile-action-remove:hover {
+  background: rgba(185, 28, 28, 0.95);
+}
+/* Actions row inside zoom popup \u2014 always visible while popup is shown */
+.fb-tile-zoom-preview .fb-tile-actions {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  opacity: 1;
+  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;
+  z-index: 9999;
+  background: var(--fb-background-color, #fff);
+  border: 1px solid var(--fb-file-upload-border-color, #d1d5db);
+  border-radius: var(--fb-border-radius, 0.5rem);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+  padding: 4px;
+  width: 350px;
+  height: 350px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.fb-tile-zoom-preview.fb-tile-zoom-preview--visible {
+  opacity: 1;
+}
+.fb-tile-zoom-preview-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+  background: var(--fb-file-upload-bg-color, #f3f4f6);
+  border-radius: calc(var(--fb-border-radius, 0.5rem) - 2px);
+}
+`;
+  document.head.appendChild(style);
+}
+// src/components/file/dom.ts
+var TILE_SIZE = "160px";
+function createFileTile() {
+  ensureFileStyles();
+  const tile = document.createElement("div");
+  tile.className = "fb-tile";
+  return tile;
+}
+function showFileError(container, message) {
+  var _a, _b;
+  const existing = (_a = container.closest(".space-y-2")) == null ? void 0 : _a.querySelector(".file-error-message");
+  if (existing) existing.remove();
+  const errorEl = document.createElement("div");
+  errorEl.className = "file-error-message error-message";
+  errorEl.style.cssText = `
+    color: var(--fb-error-color);
+    font-size: var(--fb-font-size-small);
+    margin-top: 0.25rem;
+  `;
+  errorEl.textContent = message;
+  (_b = container.closest(".space-y-2")) == null ? void 0 : _b.appendChild(errorEl);
+}
+function clearFileError(container) {
+  var _a;
+  const existing = (_a = container.closest(".space-y-2")) == null ? void 0 : _a.querySelector(".file-error-message");
+  if (existing) existing.remove();
+}
+function addDeleteButton(container, state, onDelete) {
+  const existingOverlay = container.querySelector(".delete-overlay");
+  if (existingOverlay) existingOverlay.remove();
+  const overlay = document.createElement("div");
+  overlay.className = "delete-overlay absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center";
+  const deleteBtn = document.createElement("button");
+  deleteBtn.className = "bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 transition-colors";
+  deleteBtn.textContent = t("removeElement", state);
+  deleteBtn.onclick = (e) => {
+    e.stopPropagation();
+    onDelete();
+  };
+  overlay.appendChild(deleteBtn);
+  container.appendChild(overlay);
+}
+function findFilePicker(container) {
+  var _a;
+  let el = container.parentElement;
+  while (el && !el.dataset.filesWrapper) {
+    el = el.parentElement;
+  }
+  return (_a = el == null ? void 0 : el.querySelector('input[type="file"]')) != null ? _a : null;
+}
+function createUploadingTile(fileName, state) {
+  ensureFileStyles();
+  const tile = createFileTile();
+  tile.classList.add("fb-tile-uploading");
+  tile.className += " fb-uploading-tile";
+  const label = fileName.length > 10 ? fileName.substring(0, 8) + "\u2026" : fileName;
+  tile.innerHTML = `
+    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px;padding:4px;">
+      <div class="fb-spinner"></div>
+      <div class="fb-tile-label">${escapeHtml(label)}</div>
+      <div class="fb-tile-uploading-text">${escapeHtml(t("uploadingFile", state))}</div>
+    </div>`;
+  return tile;
+}
+function ensureTilesWrap(list) {
+  const existing = list.querySelector(".fb-tiles-wrap");
+  if (existing) return existing;
+  const dropzone = list.querySelector(".fb-file-dropzone");
+  if (dropzone) dropzone.remove();
+  const tilesWrap = document.createElement("div");
+  tilesWrap.className = "fb-tiles-wrap";
+  tilesWrap.style.cssText = "display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;";
+  const addTile = document.createElement("div");
+  addTile.className = "fb-tile fb-tile-add";
+  addTile.innerHTML = "+";
+  tilesWrap.appendChild(addTile);
+  list.appendChild(tilesWrap);
+  return tilesWrap;
+}
+function setEmptyFileContainer(fileContainer, state, hint) {
+  const hintHtml = hint ? `<div class="text-xs text-gray-500 mt-1">${escapeHtml(hint)}</div>` : "";
+  fileContainer.innerHTML = `
+    <div class="flex flex-col items-center justify-center h-full text-gray-400">
+      <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+      </svg>
+      <div class="text-sm text-center">${escapeHtml(t("clickDragText", state))}</div>
+      ${hintHtml}
+    </div>
+  `;
+}
+function setupDragAndDrop(element, dropHandler) {
+  element.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    element.classList.add("border-blue-500", "bg-blue-50");
+  });
+  element.addEventListener("dragleave", (e) => {
+    e.preventDefault();
+    element.classList.remove("border-blue-500", "bg-blue-50");
+  });
+  element.addEventListener("drop", (e) => {
+    var _a;
+    e.preventDefault();
+    element.classList.remove("border-blue-500", "bg-blue-50");
+    if ((_a = e.dataTransfer) == null ? void 0 : _a.files) {
+      dropHandler(e.dataTransfer.files);
+    }
+  });
+}
+// src/components/file/preview.ts
+var ICON_DOWNLOAD = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`;
+var ICON_OPEN = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>`;
+var ICON_REMOVE = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>`;
+function canDownload(state, meta) {
+  return Boolean(
+    state.config.downloadFile || state.config.getDownloadUrl || state.config.getThumbnail || (meta == null ? void 0 : meta.file)
+  );
+}
+function canOpenInTab(state, meta) {
+  return Boolean(
+    state.config.getDownloadUrl || state.config.getThumbnail || (meta == null ? void 0 : meta.file)
+  );
+}
+function createTileActions(options) {
+  const { canRemove, removeHandler, state, resourceId, fileName, meta } = options;
+  const group = document.createElement("div");
+  group.className = "fb-tile-actions";
+  const makeBtn = (icon, label, cls) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = `fb-tile-action-btn ${cls}`;
+    btn.innerHTML = icon;
+    btn.title = label;
+    btn.setAttribute("aria-label", label);
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    return btn;
+  };
+  if (canDownload(state, meta)) {
+    const dlBtn = makeBtn(ICON_DOWNLOAD, t("downloadFile", state), "fb-tile-action-download");
+    dlBtn.addEventListener("click", () => {
+      triggerTileDownload(resourceId, fileName, state, meta);
+    });
+    group.appendChild(dlBtn);
+  }
+  if (canOpenInTab(state, meta)) {
+    const openBtn = makeBtn(ICON_OPEN, t("openInNewTab", state), "fb-tile-action-open");
+    openBtn.addEventListener("click", () => {
+      triggerTileOpen(resourceId, state, meta).catch((err) => {
+        console.error("Open failed:", err);
+      });
+    });
+    group.appendChild(openBtn);
+  }
+  if (canRemove && removeHandler) {
+    const rmBtn = makeBtn(ICON_REMOVE, t("removeElement", state), "fb-tile-action-remove");
+    rmBtn.addEventListener("click", () => {
+      removeHandler();
+    });
+    group.appendChild(rmBtn);
+  }
+  return group;
+}
+var localFileUrlCache = /* @__PURE__ */ new WeakMap();
+function getLocalFileUrl(file) {
+  let url = localFileUrlCache.get(file);
+  if (!url) {
+    url = URL.createObjectURL(file);
+    localFileUrlCache.set(file, url);
+  }
+  return url;
+}
+function releaseLocalFileUrl(file) {
+  if (!file) return;
+  const url = localFileUrlCache.get(file);
+  if (url) {
+    URL.revokeObjectURL(url);
+    localFileUrlCache.delete(file);
+  }
+}
+function triggerTileDownload(resourceId, fileName, state, meta) {
+  if (state.config.downloadFile) {
+    state.config.downloadFile(resourceId, fileName);
+    return;
+  }
+  if ((meta == null ? void 0 : meta.file) instanceof File) {
+    downloadBlob(meta.file, fileName || meta.file.name);
+    return;
+  }
+  forceDownload(resourceId, fileName, state).catch((err) => {
+    console.error("Download failed:", err);
+  });
+}
+async function triggerTileOpen(resourceId, state, meta) {
+  let url = null;
+  if (state.config.getDownloadUrl) {
+    url = state.config.getDownloadUrl(resourceId);
+  } else if (state.config.getThumbnail) {
+    url = await state.config.getThumbnail(resourceId);
+  } else if ((meta == null ? void 0 : meta.file) instanceof File) {
+    url = getLocalFileUrl(meta.file);
+  }
+  if (url) {
+    window.open(url, "_blank");
+  }
+}
+var sharedZoomPopup = null;
+var zoomTimer = null;
+var zoomHideTimer = null;
+var zoomOwner = null;
+function getOrCreateZoomPopup() {
+  if (!sharedZoomPopup) {
+    sharedZoomPopup = document.createElement("div");
+    sharedZoomPopup.className = "fb-tile-zoom-preview";
+    const img = document.createElement("img");
+    img.className = "fb-tile-zoom-preview-img";
+    sharedZoomPopup.appendChild(img);
+    sharedZoomPopup.addEventListener("mouseenter", cancelHideZoomPopup);
+    sharedZoomPopup.addEventListener("mouseleave", scheduleHideZoomPopup);
+  }
+  return sharedZoomPopup;
+}
+function positionZoomPopup(popup, tile) {
+  const tileRect = tile.getBoundingClientRect();
+  const popupSize = 350;
+  const margin = 6;
+  const padding = 8;
+  let top;
+  if (tileRect.top - popupSize - margin >= padding) {
+    top = tileRect.top - popupSize - margin;
+  } else if (tileRect.bottom + margin + popupSize + padding <= window.innerHeight) {
+    top = tileRect.bottom + margin;
+  } else {
+    top = Math.max(padding, Math.min(window.innerHeight - popupSize - padding, tileRect.top));
+  }
+  const tileCenterX = tileRect.left + tileRect.width / 2;
+  let left = tileCenterX - popupSize / 2;
+  left = Math.max(padding, Math.min(window.innerWidth - popupSize - padding, left));
+  popup.style.top = `${top}px`;
+  popup.style.left = `${left}px`;
+}
+function scheduleHideZoomPopup() {
+  if (zoomHideTimer !== null) {
+    clearTimeout(zoomHideTimer);
+  }
+  zoomHideTimer = setTimeout(() => {
+    zoomHideTimer = null;
+    removeZoomPopupNow();
+  }, 100);
+}
+function cancelHideZoomPopup() {
+  if (zoomHideTimer !== null) {
+    clearTimeout(zoomHideTimer);
+    zoomHideTimer = null;
+  }
+}
+function removeZoomPopupNow() {
+  if (zoomTimer !== null) {
+    clearTimeout(zoomTimer);
+    zoomTimer = null;
+  }
+  if (sharedZoomPopup && sharedZoomPopup.parentNode) {
+    sharedZoomPopup.classList.remove("fb-tile-zoom-preview--visible");
+    sharedZoomPopup.parentNode.removeChild(sharedZoomPopup);
+  }
+  zoomOwner = null;
+}
+function attachZoomHover(tile, src, alt, actionsEl) {
+  tile.dataset.zoomSrc = src;
+  tile.dataset.zoomAlt = alt;
+  tile.addEventListener("mouseenter", () => {
+    cancelHideZoomPopup();
+    if (zoomOwner !== tile) {
+      removeZoomPopupNow();
+    }
+    zoomOwner = tile;
+    zoomTimer = setTimeout(() => {
+      zoomTimer = null;
+      const popup = getOrCreateZoomPopup();
+      const existingActions = popup.querySelector(".fb-tile-actions");
+      if (existingActions) existingActions.remove();
+      const img = popup.querySelector(".fb-tile-zoom-preview-img");
+      img.src = src;
+      img.alt = alt;
+      if (actionsEl) {
+        popup.appendChild(actionsEl.cloneNode(true));
+        attachClonedActionListeners(
+          popup.querySelector(".fb-tile-actions"),
+          actionsEl
+        );
+      }
+      popup.style.pointerEvents = "auto";
+      positionZoomPopup(popup, tile);
+      document.body.appendChild(popup);
+      popup.getBoundingClientRect();
+      popup.classList.add("fb-tile-zoom-preview--visible");
+    }, 200);
+  });
+  tile.addEventListener("mouseleave", () => {
+    if (zoomTimer !== null) {
+      clearTimeout(zoomTimer);
+      zoomTimer = null;
+      zoomOwner = null;
+    } else {
+      scheduleHideZoomPopup();
+    }
+  });
+}
+function attachClonedActionListeners(cloned, original) {
+  const originalBtns = Array.from(original.querySelectorAll(".fb-tile-action-btn"));
+  const clonedBtns = Array.from(cloned.querySelectorAll(".fb-tile-action-btn"));
+  clonedBtns.forEach((clonedBtn, i) => {
+    const origBtn = originalBtns[i];
+    if (origBtn) {
+      clonedBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        origBtn.click();
+      });
+    }
+  });
 }
 function renderLocalImagePreview(container, file, fileName, state) {
   const img = document.createElement("img");
   img.className = "w-full h-full object-contain";
+  img.style.background = "var(--fb-file-upload-bg-color,#f3f4f6)";
   img.alt = fileName || t("previewAlt", state);
   const reader = new FileReader();
   reader.onload = (e) => {
@@ -2152,23 +2909,27 @@ function renderLocalImagePreview(container, file, fileName, state) {
   reader.readAsDataURL(file);
   container.appendChild(img);
 }
-function renderLocalVideoPreview(container, file, videoType, resourceId, state, deps) {
-  const videoUrl = URL.createObjectURL(file);
+function setupDragDropless(container, _deps) {
   container.onclick = null;
   const newContainer = container.cloneNode(false);
   if (container.parentNode) {
     container.parentNode.replaceChild(newContainer, container);
   }
+  return newContainer;
+}
+function renderLocalVideoPreview(container, file, videoType, resourceId, state, deps) {
+  const videoUrl = URL.createObjectURL(file);
+  const newContainer = setupDragDropless(container);
   newContainer.innerHTML = `
-    <div class="relative group h-full">
+    <div class="fb-video-preview-wrap">
       <video class="w-full h-full object-contain" controls preload="auto" muted src="${videoUrl}">
         ${escapeHtml(t("videoNotSupported", state))}
       </video>
-      <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
-        <button class="bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn">
+      <div class="fb-video-btn-overlay">
+        <button class="fb-video-btn fb-video-btn-delete delete-file-btn">
           ${escapeHtml(t("removeElement", state))}
         </button>
-        <button class="bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn">
+        <button class="fb-video-btn fb-video-btn-change change-file-btn">
           ${escapeHtml(t("changeButton", state))}
         </button>
       </div>
@@ -2178,20 +2939,15 @@ function renderLocalVideoPreview(container, file, videoType, resourceId, state,
   return newContainer;
 }
 function attachVideoButtonHandlers(container, resourceId, state, deps) {
-  const changeBtn = container.querySelector(
-    ".change-file-btn"
-  );
+  const changeBtn = container.querySelector(".change-file-btn");
   if (changeBtn) {
     changeBtn.onclick = (e) => {
+      var _a;
       e.stopPropagation();
-      if (deps == null ? void 0 : deps.picker) {
-        deps.picker.click();
-      }
+      (_a = deps == null ? void 0 : deps.picker) == null ? void 0 : _a.click();
     };
   }
-  const deleteBtn = container.querySelector(
-    ".delete-file-btn"
-  );
+  const deleteBtn = container.querySelector(".delete-file-btn");
   if (deleteBtn) {
     deleteBtn.onclick = (e) => {
       e.stopPropagation();
@@ -2211,9 +2967,6 @@ function handleVideoDelete(container, resourceId, state, deps) {
   if (deps == null ? void 0 : deps.fileUploadHandler) {
     container.onclick = deps.fileUploadHandler;
   }
-  if (deps == null ? void 0 : deps.dragHandler) {
-    setupDragAndDrop(container, deps.dragHandler);
-  }
   container.innerHTML = `
     <div class="flex flex-col items-center justify-center h-full text-gray-400">
       <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
@@ -2222,16 +2975,9 @@ function handleVideoDelete(container, resourceId, state, deps) {
       <div class="text-sm text-center">${escapeHtml(t("clickDragText", state))}</div>
     </div>
   `;
-}
-function renderUploadedVideoPreview(container, thumbnailUrl, _videoType, state) {
-  const video = document.createElement("video");
-  video.className = "w-full h-full object-contain";
-  video.controls = true;
-  video.preload = "metadata";
-  video.muted = true;
-  video.src = thumbnailUrl;
-  video.appendChild(document.createTextNode(t("videoNotSupported", state)));
-  container.appendChild(video);
+  if (deps == null ? void 0 : deps.setupDrop) {
+    deps.setupDrop(container);
+  }
 }
 function renderDeleteButton(container, resourceId, state) {
   addDeleteButton(container, state, () => {
@@ -2254,13 +3000,12 @@ function renderDeleteButton(container, resourceId, state) {
   });
 }
 async function renderLocalFilePreview(container, meta, fileName, resourceId, isReadonly, state, deps) {
-  if (!meta.file || !(meta.file instanceof File)) {
-    return;
-  }
-  if (meta.type && meta.type.startsWith("image/")) {
+  var _a, _b, _c;
+  if (!meta.file || !(meta.file instanceof File)) return;
+  if ((_a = meta.type) == null ? void 0 : _a.startsWith("image/")) {
     renderLocalImagePreview(container, meta.file, fileName, state);
-  } else if (meta.type && meta.type.startsWith("video/")) {
-    const newContainer = renderLocalVideoPreview(
+  } else if ((_b = meta.type) == null ? void 0 : _b.startsWith("video/")) {
+    container = renderLocalVideoPreview(
       container,
       meta.file,
       meta.type,
@@ -2268,15 +3013,25 @@ async function renderLocalFilePreview(container, meta, fileName, resourceId, isR
       state,
       deps
     );
-    container = newContainer;
   } else {
-    container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">\u{1F4C1}</div><div class="text-sm">${escapeHtml(fileName)}</div></div>`;
+    container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div style="font-size:36px;" class="mb-2">\u{1F4C1}</div><div class="text-sm">${escapeHtml(fileName)}</div></div>`;
   }
-  if (!isReadonly && !(meta.type && meta.type.startsWith("video/"))) {
+  if (!isReadonly && !((_c = meta.type) == null ? void 0 : _c.startsWith("video/"))) {
     renderDeleteButton(container, resourceId, state);
   }
 }
+function renderUploadedVideoPreview(container, thumbnailUrl, state) {
+  const video = document.createElement("video");
+  video.className = "w-full h-full object-contain";
+  video.controls = true;
+  video.preload = "metadata";
+  video.muted = true;
+  video.src = thumbnailUrl;
+  video.appendChild(document.createTextNode(t("videoNotSupported", state)));
+  container.appendChild(video);
+}
 async function renderUploadedFilePreview(container, resourceId, fileName, meta, state) {
+  var _a;
   if (!state.config.getThumbnail) {
     setEmptyFileContainer(container, state);
     return;
@@ -2285,11 +3040,12 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
     const thumbnailUrl = await state.config.getThumbnail(resourceId);
     if (thumbnailUrl) {
       clear(container);
-      if (meta && meta.type && meta.type.startsWith("video/")) {
-        renderUploadedVideoPreview(container, thumbnailUrl, meta.type, state);
+      if ((_a = meta == null ? void 0 : meta.type) == null ? void 0 : _a.startsWith("video/")) {
+        renderUploadedVideoPreview(container, thumbnailUrl, state);
       } else {
         const img = document.createElement("img");
         img.className = "w-full h-full object-contain";
+        img.style.background = "var(--fb-file-upload-bg-color,#f3f4f6)";
         img.alt = fileName || t("previewAlt", state);
         img.src = thumbnailUrl;
         container.appendChild(img);
@@ -2318,9 +3074,6 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
     );
   }
   clear(container);
-  if (isReadonly) {
-    container.classList.add("cursor-pointer");
-  }
   const meta = state.resourceIndex.get(resourceId);
   if (meta && meta.file && meta.file instanceof File) {
     await renderLocalFilePreview(
@@ -2333,372 +3086,310 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
       deps
     );
   } else {
-    await renderUploadedFilePreview(
-      container,
-      resourceId,
-      fileName,
-      meta,
-      state
-    );
+    await renderUploadedFilePreview(container, resourceId, fileName, meta, state);
     const isVideo = (_a = meta == null ? void 0 : meta.type) == null ? void 0 : _a.startsWith("video/");
     if (!isReadonly && !isVideo) {
       renderDeleteButton(container, resourceId, state);
     }
   }
 }
-async function renderFilePreviewReadonly(resourceId, state, fileName) {
+function resolveFileName(resourceId, meta, fileName) {
+  var _a;
+  if (fileName) return fileName;
+  if ((_a = meta == null ? void 0 : meta.name) == null ? void 0 : _a.includes(".")) return meta.name;
+  const basename = resourceId.includes("/") ? resourceId.split("/").pop() : resourceId;
+  return (basename == null ? void 0 : basename.includes(".")) ? basename : "";
+}
+async function renderFilePreviewReadonly(resourceId, state, fileName, options = {}) {
   var _a, _b;
   const meta = state.resourceIndex.get(resourceId);
-  const actualFileName = (meta == null ? void 0 : meta.name) || resourceId.split("/").pop() || "file";
-  const isPSD = actualFileName.toLowerCase().match(/\.psd$/);
-  const fileResult = document.createElement("div");
-  fileResult.className = isPSD ? "space-y-2" : "space-y-3";
-  const previewContainer = document.createElement("div");
-  if (isPSD) {
-    previewContainer.className = "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity flex items-center p-3 max-w-sm";
-  } else {
-    previewContainer.className = "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity";
-  }
-  const isImage = !isPSD && (((_a = meta == null ? void 0 : meta.type) == null ? void 0 : _a.startsWith("image/")) || actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/));
-  const isVideo = ((_b = meta == null ? void 0 : meta.type) == null ? void 0 : _b.startsWith("video/")) || actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/);
-  if (isImage) {
+  const actualFileName = resolveFileName(resourceId, meta, fileName);
+  const { canRemove = false, removeHandler = null } = options;
+  const isImage = ((_a = meta == null ? void 0 : meta.type) == null ? void 0 : _a.startsWith("image/")) || Boolean(actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/));
+  const isVideo = ((_b = meta == null ? void 0 : meta.type) == null ? void 0 : _b.startsWith("video/")) || Boolean(actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/));
+  const tile = createFileTile();
+  tile.classList.add("fb-tile-resource");
+  tile.style.cursor = "pointer";
+  if (actualFileName) {
+    tile.title = actualFileName;
+  }
+  const localFileUrl = (meta == null ? void 0 : meta.file) instanceof File ? getLocalFileUrl(meta.file) : null;
+  const resolveOpenUrl = async () => {
+    if (state.config.getDownloadUrl) return state.config.getDownloadUrl(resourceId);
+    if (state.config.getThumbnail) return state.config.getThumbnail(resourceId);
+    return localFileUrl;
+  };
+  tile.onclick = async () => {
+    const url = await resolveOpenUrl();
+    if (url) {
+      window.open(url, "_blank");
+    } else if (state.config.downloadFile) {
+      state.config.downloadFile(resourceId, actualFileName);
+    } else {
+      forceDownload(resourceId, actualFileName, state).catch((err) => {
+        console.error("Download failed:", err);
+      });
+    }
+  };
+  const actionsEl = createTileActions({
+    canRemove,
+    removeHandler,
+    state,
+    resourceId,
+    fileName: actualFileName,
+    meta
+  });
+  const resolveImageDisplayUrl = async () => {
     if (state.config.getThumbnail) {
       try {
-        const thumbnailUrl = await state.config.getThumbnail(resourceId);
-        if (thumbnailUrl) {
-          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${escapeHtml(actualFileName)}" class="w-full h-auto">`;
-        } else {
-          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
-        }
-      } catch (error) {
-        console.warn("getThumbnail failed for", resourceId, error);
-        previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+        const url = await state.config.getThumbnail(resourceId);
+        if (url) return url;
+      } catch {
       }
+    }
+    return localFileUrl;
+  };
+  const renderImageFallback = () => {
+    tile.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F5BC}\uFE0F</div>`;
+    tile.appendChild(actionsEl);
+  };
+  if (isImage) {
+    const displayUrl = await resolveImageDisplayUrl();
+    if (displayUrl) {
+      const img = document.createElement("img");
+      img.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
+      img.alt = actualFileName;
+      img.src = displayUrl;
+      tile.appendChild(img);
+      tile.appendChild(actionsEl);
+      attachZoomHover(tile, displayUrl, actualFileName, actionsEl);
     } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+      renderImageFallback();
     }
   } else if (isVideo) {
     if (state.config.getThumbnail) {
       try {
         const videoUrl = await state.config.getThumbnail(resourceId);
         if (videoUrl) {
-          previewContainer.innerHTML = `
-            <div class="relative group">
-              <video class="w-full h-auto" controls preload="auto" muted src="${videoUrl}">
-                ${escapeHtml(t("videoNotSupported", state))}
-              </video>
-              <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
-                <div class="bg-white bg-opacity-90 rounded-full p-3">
-                  <svg class="w-8 h-8 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z"/>
-                  </svg>
-                </div>
+          tile.innerHTML = `
+            <img style="width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);" alt="${escapeHtml(actualFileName)}" src="${videoUrl}">
+            <div class="fb-video-overlay">
+              <div class="fb-play-btn" style="width:22px;height:22px;">
+                <svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0l10 6-10 6z"/></svg>
               </div>
-            </div>
-          `;
+            </div>`;
+          tile.appendChild(actionsEl);
         } else {
-          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F3A5}</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+          tile.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
+          tile.appendChild(actionsEl);
         }
-      } catch (error) {
-        console.warn("getThumbnail failed for video", resourceId, error);
-        previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F3A5}</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+      } catch {
+        tile.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
+        tile.appendChild(actionsEl);
       }
     } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F3A5}</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+      tile.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
+      tile.appendChild(actionsEl);
     }
   } else {
-    const fileIcon = isPSD ? "\u{1F3A8}" : "\u{1F4C1}";
-    const fileDescription = isPSD ? "PSD File" : "Document";
-    if (isPSD) {
-      previewContainer.innerHTML = `
-        <div class="flex items-center space-x-3">
-          <div class="text-3xl text-gray-400">${fileIcon}</div>
-          <div class="flex-1 min-w-0">
-            <div class="text-sm font-medium text-gray-900 truncate">${escapeHtml(actualFileName)}</div>
-            <div class="text-xs text-gray-500">${fileDescription}</div>
-          </div>
-        </div>
-      `;
-    } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">${fileIcon}</div><div class="text-sm">${escapeHtml(actualFileName)}</div><div class="text-xs text-gray-500 mt-1">${fileDescription}</div></div></div>`;
+    if (state.config.getThumbnail) {
+      try {
+        const thumbUrl = await state.config.getThumbnail(resourceId);
+        if (thumbUrl) {
+          const img = document.createElement("img");
+          img.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
+          img.alt = actualFileName || resourceId;
+          img.src = thumbUrl;
+          tile.appendChild(img);
+          tile.appendChild(actionsEl);
+          return tile;
+        }
+      } catch {
+      }
     }
+    const captionHtml = actualFileName ? `<div class="fb-tile-label">${escapeHtml(actualFileName.length > 10 ? actualFileName.substring(0, 8) + "\u2026" : actualFileName)}</div>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zm-7 9H5v2h14v-2h-7z"/></svg>` : "";
+    tile.innerHTML = `
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:6px;gap:4px;">
+        <div style="font-size:36px;">\u{1F4C1}</div>
+        ${captionHtml}
+      </div>`;
+    tile.appendChild(actionsEl);
   }
-  const fileNameElement = document.createElement("p");
-  fileNameElement.className = isPSD ? "hidden" : "text-sm font-medium text-gray-900 text-center";
-  fileNameElement.textContent = actualFileName;
-  const downloadButton = document.createElement("button");
-  downloadButton.className = "w-full px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors";
-  downloadButton.textContent = t("downloadButton", state);
-  downloadButton.onclick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (state.config.downloadFile) {
-      state.config.downloadFile(resourceId, actualFileName);
-    } else {
-      forceDownload(resourceId, actualFileName, state);
-    }
-  };
-  fileResult.appendChild(previewContainer);
-  fileResult.appendChild(fileNameElement);
-  fileResult.appendChild(downloadButton);
-  return fileResult;
+  return tile;
 }
-function renderResourcePills(container, rids, state, onRemove, hint, countInfo) {
-  clear(container);
-  const buildHintLine = () => {
-    const parts = [t("clickDragTextMultiple", state)];
-    if (hint) parts.push(hint);
-    if (countInfo) parts.push(countInfo);
-    return parts.join(" \u2022 ");
-  };
-  const isInitialRender = !container.classList.contains("grid");
-  if ((!rids || rids.length === 0) && isInitialRender) {
-    const gridContainer2 = document.createElement("div");
-    gridContainer2.className = "grid grid-cols-4 gap-3 mb-3";
-    for (let i = 0; i < 4; i++) {
-      const slot = document.createElement("div");
-      slot.className = "aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors";
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.setAttribute("class", "w-12 h-12 text-gray-400");
-      svg.setAttribute("fill", "currentColor");
-      svg.setAttribute("viewBox", "0 0 24 24");
-      const path = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      );
-      path.setAttribute(
-        "d",
-        "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
-      );
-      svg.appendChild(path);
-      slot.appendChild(svg);
-      slot.onclick = () => {
-        let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
-          filesWrapper = filesWrapper.parentElement;
-        }
-        if (!filesWrapper && container.classList.contains("space-y-2")) {
-          filesWrapper = container;
-        }
-        const fileInput = filesWrapper == null ? void 0 : filesWrapper.querySelector(
-          'input[type="file"]'
-        );
-        if (fileInput) fileInput.click();
-      };
-      gridContainer2.appendChild(slot);
-    }
-    const hintText2 = document.createElement("div");
-    hintText2.className = "text-center text-xs text-gray-500 mt-2";
-    hintText2.textContent = buildHintLine();
-    container.appendChild(gridContainer2);
-    container.appendChild(hintText2);
-    return;
-  }
-  const gridContainer = document.createElement("div");
-  gridContainer.className = "files-list grid grid-cols-4 gap-3";
-  const currentImagesCount = rids ? rids.length : 0;
-  const rowsNeeded = Math.floor(currentImagesCount / 4) + 1;
-  const slotsNeeded = rowsNeeded * 4;
-  for (let i = 0; i < slotsNeeded; i++) {
-    const slot = document.createElement("div");
-    if (rids && i < rids.length) {
-      const rid = rids[i];
-      const meta = state.resourceIndex.get(rid);
-      slot.className = "resource-pill aspect-square bg-gray-100 rounded-lg overflow-hidden relative group border border-gray-300";
-      slot.dataset.resourceId = rid;
-      renderThumbnailForResource(slot, rid, meta, state).catch((err) => {
-        console.error("Failed to render thumbnail:", err);
-        slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-          <div class="text-2xl mb-1">\u{1F4C1}</div>
-          <div class="text-xs">${escapeHtml(t("previewError", state))}</div>
-        </div>`;
-      });
-      if (onRemove) {
-        const overlay = document.createElement("div");
-        overlay.className = "absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center";
-        const removeBtn = document.createElement("button");
-        removeBtn.className = "bg-red-600 text-white px-2 py-1 rounded text-xs";
-        removeBtn.textContent = t("removeElement", state);
-        removeBtn.onclick = (e) => {
-          e.stopPropagation();
-          onRemove(rid);
-        };
-        overlay.appendChild(removeBtn);
-        slot.appendChild(overlay);
-      }
-    } else {
-      slot.className = "aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors";
-      slot.innerHTML = '<svg class="w-12 h-12 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>';
-      slot.onclick = () => {
-        let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
-          filesWrapper = filesWrapper.parentElement;
-        }
-        if (!filesWrapper && container.classList.contains("space-y-2")) {
-          filesWrapper = container;
-        }
-        const fileInput = filesWrapper == null ? void 0 : filesWrapper.querySelector(
-          'input[type="file"]'
-        );
-        if (fileInput) fileInput.click();
-      };
-    }
-    gridContainer.appendChild(slot);
-  }
-  container.appendChild(gridContainer);
-  const hintText = document.createElement("div");
-  hintText.className = "text-center text-xs text-gray-500 mt-2";
-  hintText.textContent = buildHintLine();
-  container.appendChild(hintText);
-}
-function renderThumbnailError(slot, state, iconSize = "w-12 h-12") {
-  slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-    <svg class="${escapeHtml(iconSize)} text-red-400" fill="currentColor" viewBox="0 0 24 24">
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-    </svg>
-    <div class="text-xs mt-1 text-red-600">${escapeHtml(t("previewError", state))}</div>
-  </div>`;
+async function renderSingleFileEditTile(fileContainer, resourceId, state, deps) {
+  var _a, _b, _c;
+  const meta = state.resourceIndex.get(resourceId);
+  const fileName = (_b = (_a = meta == null ? void 0 : meta.name) != null ? _a : resourceId.split("/").pop()) != null ? _b : "";
+  const removeHandler = (_c = deps.onRemove) != null ? _c : null;
+  const tile = await renderFilePreviewReadonly(resourceId, state, fileName, {
+    canRemove: true,
+    removeHandler
+  });
+  fileContainer.className = "file-preview-container";
+  fileContainer.removeAttribute("style");
+  clear(fileContainer);
+  fileContainer.appendChild(tile);
 }
-async function renderThumbnailForResource(slot, rid, meta, state) {
-  var _a, _b;
-  if (meta && ((_a = meta.type) == null ? void 0 : _a.startsWith("image/"))) {
+async function fillTileContent(tile, rid, meta, state, actionsEl) {
+  var _a, _b, _c;
+  if ((_a = meta == null ? void 0 : meta.type) == null ? void 0 : _a.startsWith("image/")) {
     if (meta.file && meta.file instanceof File) {
       const img = document.createElement("img");
-      img.className = "w-full h-full object-contain";
+      img.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
       img.alt = meta.name;
       const reader = new FileReader();
       reader.onload = (e) => {
         var _a2;
         img.src = ((_a2 = e.target) == null ? void 0 : _a2.result) || "";
+        attachZoomHover(tile, img.src, meta.name, actionsEl != null ? actionsEl : null);
       };
       reader.readAsDataURL(meta.file);
-      slot.appendChild(img);
+      tile.appendChild(img);
     } else if (state.config.getThumbnail) {
       try {
         const url = await state.config.getThumbnail(rid);
         if (url) {
           const img = document.createElement("img");
-          img.className = "w-full h-full object-contain";
+          img.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
           img.alt = meta.name;
           img.src = url;
-          slot.appendChild(img);
+          tile.appendChild(img);
+          attachZoomHover(tile, url, meta.name, actionsEl != null ? actionsEl : null);
         } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-            </svg>
-          </div>`;
+          tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F5BC}\uFE0F</div>`;
         }
       } catch (error) {
         const err = error instanceof Error ? error : new Error(String(error));
-        if (state.config.onThumbnailError) {
-          state.config.onThumbnailError(err, rid);
-        }
-        renderThumbnailError(slot, state);
+        if (state.config.onThumbnailError) state.config.onThumbnailError(err, rid);
+        tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:16px;color:var(--fb-error-color,#ef4444);">\u2715</div>`;
       }
     } else {
-      slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-        <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-        </svg>
-      </div>`;
+      tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F5BC}\uFE0F</div>`;
     }
-  } else if (meta && ((_b = meta.type) == null ? void 0 : _b.startsWith("video/"))) {
+    if (actionsEl) tile.appendChild(actionsEl);
+  } else if ((_b = meta == null ? void 0 : meta.type) == null ? void 0 : _b.startsWith("video/")) {
     if (meta.file && meta.file instanceof File) {
       const videoUrl = URL.createObjectURL(meta.file);
-      slot.innerHTML = `
-        <div class="relative group h-full w-full">
-          <video class="w-full h-full object-contain" preload="metadata" muted src="${videoUrl}">
-          </video>
-          <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-            <div class="bg-white bg-opacity-90 rounded-full p-1">
-              <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M8 5v14l11-7z"/>
-              </svg>
-            </div>
+      tile.innerHTML = `
+        <video style="width:100%;height:100%;" preload="metadata" muted src="${videoUrl}"></video>
+        <div class="fb-video-overlay">
+          <div class="fb-play-btn" style="width:20px;height:20px;">
+            <svg width="8" height="10" viewBox="0 0 8 10" fill="currentColor"><path d="M0 0l8 5-8 5z"/></svg>
           </div>
-        </div>
-      `;
+        </div>`;
     } else if (state.config.getThumbnail) {
       try {
         const videoUrl = await state.config.getThumbnail(rid);
         if (videoUrl) {
-          slot.innerHTML = `
-            <div class="relative group h-full w-full">
-              <video class="w-full h-full object-contain" preload="metadata" muted src="${videoUrl}">
-              </video>
-              <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-                <div class="bg-white bg-opacity-90 rounded-full p-1">
-                  <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z"/>
-                  </svg>
-                </div>
+          tile.innerHTML = `
+            <img style="width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);" alt="${escapeHtml(meta.name)}" src="${videoUrl}">
+            <div class="fb-video-overlay">
+              <div class="fb-play-btn" style="width:20px;height:20px;">
+                <svg width="8" height="10" viewBox="0 0 8 10" fill="currentColor"><path d="M0 0l8 5-8 5z"/></svg>
               </div>
-            </div>
-          `;
+            </div>`;
         } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M8 5v14l11-7z"/>
-            </svg>
-            <div class="text-xs mt-1">${escapeHtml((meta == null ? void 0 : meta.name) || "Video")}</div>
-          </div>`;
+          tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
         }
       } catch (error) {
         const err = error instanceof Error ? error : new Error(String(error));
-        if (state.config.onThumbnailError) {
-          state.config.onThumbnailError(err, rid);
-        }
-        renderThumbnailError(slot, state, "w-8 h-8");
+        if (state.config.onThumbnailError) state.config.onThumbnailError(err, rid);
+        tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:16px;color:var(--fb-error-color,#ef4444);">\u2715</div>`;
       }
     } else {
-      slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M8 5v14l11-7z"/>
-        </svg>
-        <div class="text-xs mt-1">${escapeHtml((meta == null ? void 0 : meta.name) || "Video")}</div>
-      </div>`;
+      tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
     }
+    if (actionsEl) tile.appendChild(actionsEl);
   } else {
-    slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-      <div class="text-2xl mb-1">\u{1F4C1}</div>
-      <div class="text-xs">${escapeHtml((meta == null ? void 0 : meta.name) || "File")}</div>
-    </div>`;
+    const name = (_c = meta == null ? void 0 : meta.name) != null ? _c : "";
+    const hasExtension = name.includes(".");
+    const captionHtml = hasExtension ? `<div class="fb-tile-label">${escapeHtml(name.length > 10 ? name.substring(0, 8) + "\u2026" : name)}</div>` : "";
+    tile.innerHTML = `
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:6px;gap:4px;">
+        <div style="font-size:36px;">\u{1F4C1}</div>
+        ${captionHtml}
+      </div>`;
+    if (actionsEl) tile.appendChild(actionsEl);
   }
 }
-function setEmptyFileContainer(fileContainer, state, hint) {
-  const hintHtml = hint ? `<div class="text-xs text-gray-500 mt-1">${escapeHtml(hint)}</div>` : "";
-  fileContainer.innerHTML = `
-    <div class="flex flex-col items-center justify-center h-full text-gray-400">
-      <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-      </svg>
-      <div class="text-sm text-center">${escapeHtml(t("clickDragText", state))}</div>
-      ${hintHtml}
-    </div>
-  `;
+async function forceDownload(resourceId, fileName, state) {
+  try {
+    let fileUrl = null;
+    if (state.config.getDownloadUrl) {
+      fileUrl = state.config.getDownloadUrl(resourceId);
+    } else if (state.config.getThumbnail) {
+      fileUrl = await state.config.getThumbnail(resourceId);
+    }
+    if (fileUrl) {
+      const finalUrl = fileUrl.startsWith("http") ? fileUrl : new URL(fileUrl, window.location.href).href;
+      const response = await fetch(finalUrl);
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      const blob = await response.blob();
+      downloadBlob(blob, fileName);
+    } else {
+      throw new Error("No download URL available for resource");
+    }
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    if (state.config.onDownloadError) {
+      state.config.onDownloadError(err, resourceId, fileName);
+    }
+    console.error(`File download failed for ${fileName}:`, err);
+    throw err;
+  }
 }
-function showFileError(container, message) {
-  var _a, _b;
-  const existing = (_a = container.closest(".space-y-2")) == null ? void 0 : _a.querySelector(".file-error-message");
-  if (existing) existing.remove();
-  const errorEl = document.createElement("div");
-  errorEl.className = "file-error-message error-message";
-  errorEl.style.cssText = `
-    color: var(--fb-error-color);
-    font-size: var(--fb-font-size-small);
-    margin-top: 0.25rem;
-  `;
-  errorEl.textContent = message;
-  (_b = container.closest(".space-y-2")) == null ? void 0 : _b.appendChild(errorEl);
+function downloadBlob(blob, fileName) {
+  try {
+    const blobUrl = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = fileName;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(() => {
+      URL.revokeObjectURL(blobUrl);
+    }, 100);
+  } catch (error) {
+    throw new Error(`Blob download failed: ${error.message}`);
+  }
 }
-function clearFileError(container) {
-  var _a;
-  const existing = (_a = container.closest(".space-y-2")) == null ? void 0 : _a.querySelector(".file-error-message");
-  if (existing) existing.remove();
+// src/components/file/upload.ts
+async function uploadSingleFile(file, state) {
+  if (!state.config.uploadFile) {
+    throw new Error(
+      "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()"
+    );
+  }
+  try {
+    const rid = await state.config.uploadFile(file);
+    if (typeof rid !== "string") {
+      throw new Error("Upload handler must return a string resource ID");
+    }
+    return rid;
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    if (state.config.onUploadError) state.config.onUploadError(err, file);
+    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) {
   var _a, _b;
+  const {
+    file,
+    container,
+    fieldName,
+    state,
+    deps = null,
+    instance = null,
+    allowedExtensions = [],
+    allowedMimes = [],
+    maxSizeMB = Infinity
+  } = opts;
   if (!isFileExtensionAllowed(file.name, allowedExtensions)) {
     const formats = allowedExtensions.join(", ");
     showFileError(
@@ -2707,6 +3398,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,
@@ -2715,24 +3414,18 @@ async function handleFileSelect(file, container, fieldName, state, deps = null,
     return;
   }
   clearFileError(container);
+  ensureFileStyles();
+  container.innerHTML = `
+    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px;padding:6px;">
+      <div class="fb-spinner"></div>
+      <div style="font-size:11px;color:var(--fb-text-secondary-color,#6b7280);text-align:center;">${escapeHtml(t("uploadingFile", state))}</div>
+    </div>`;
   let rid;
-  if (state.config.uploadFile) {
-    try {
-      rid = await state.config.uploadFile(file);
-      if (typeof rid !== "string") {
-        throw new Error("Upload handler must return a string resource ID");
-      }
-    } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      if (state.config.onUploadError) {
-        state.config.onUploadError(err, file);
-      }
-      throw new Error(`File upload failed: ${err.message}`);
-    }
-  } else {
-    throw new Error(
-      "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()"
-    );
+  try {
+    rid = await uploadSingleFile(file, state);
+  } catch (error) {
+    setEmptyFileContainer(container, state);
+    throw error;
   }
   state.resourceIndex.set(rid, {
     name: file.name,
@@ -2740,7 +3433,6 @@ async function handleFileSelect(file, container, fieldName, state, deps = null,
     size: file.size,
     uploadedAt: /* @__PURE__ */ new Date(),
     file
-    // Store the file object for local preview
   });
   let hiddenInput = (_a = container.parentElement) == null ? void 0 : _a.querySelector(
     'input[type="hidden"]'
@@ -2752,693 +3444,1009 @@ async function handleFileSelect(file, container, fieldName, state, deps = null,
     (_b = container.parentElement) == null ? void 0 : _b.appendChild(hiddenInput);
   }
   hiddenInput.value = rid;
-  renderFilePreview(container, rid, state, {
-    fileName: file.name,
-    isReadonly: false,
-    deps
-  }).catch(console.error);
+  const isVideo = file.type.startsWith("video/");
+  if (!isVideo && deps) {
+    renderSingleFileEditTile(container, rid, state, deps).catch(console.error);
+  } else {
+    renderFilePreview(container, rid, state, {
+      fileName: file.name,
+      isReadonly: false,
+      deps
+    }).catch(console.error);
+  }
   if (instance && !state.config.readonly) {
     instance.triggerOnChange(fieldName, rid);
   }
 }
-function setupDragAndDrop(element, dropHandler) {
-  element.addEventListener("dragover", (e) => {
-    e.preventDefault();
-    element.classList.add("border-blue-500", "bg-blue-50");
-  });
-  element.addEventListener("dragleave", (e) => {
-    e.preventDefault();
-    element.classList.remove("border-blue-500", "bg-blue-50");
-  });
-  element.addEventListener("drop", (e) => {
+function filterAndSlice(allFiles, currentCount, constraints, state) {
+  const rejectedByExt = allFiles.filter(
+    (f) => !isFileExtensionAllowed(f.name, constraints.allowedExtensions)
+  );
+  const afterExt = allFiles.filter(
+    (f) => isFileExtensionAllowed(f.name, constraints.allowedExtensions)
+  );
+  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 = 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;
+  const errorParts = [];
+  if (rejectedByExt.length > 0) {
+    const formats = constraints.allowedExtensions.join(", ");
+    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(
+      t("fileTooLarge", state, { name: names, maxSize: constraints.maxSize })
+    );
+  }
+  if (skippedByCount > 0) {
+    errorParts.push(
+      t("filesLimitExceeded", state, {
+        skipped: skippedByCount,
+        max: constraints.maxCount
+      })
+    );
+  }
+  return { accepted, errorMessage: errorParts.join(" \u2022 ") };
+}
+async function uploadBatch(accepted, resourceIds, listEl, state) {
+  await Promise.all(
+    accepted.map(async (file) => {
+      const placeholder = createUploadingTile(file.name, state);
+      if (listEl) {
+        const tilesWrap = ensureTilesWrap(listEl);
+        const addTile = tilesWrap.querySelector(".fb-tile-add");
+        if (addTile) {
+          tilesWrap.insertBefore(placeholder, addTile);
+        } else {
+          tilesWrap.appendChild(placeholder);
+        }
+      }
+      try {
+        const rid = await uploadSingleFile(file, state);
+        state.resourceIndex.set(rid, {
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          uploadedAt: /* @__PURE__ */ new Date(),
+          file: void 0
+        });
+        resourceIds.push(rid);
+      } finally {
+        placeholder.remove();
+      }
+    })
+  );
+}
+function setupFilesDropHandler(filesContainer, resourceIds, state, updateCallback, constraints, pathKey, instance) {
+  setupDragAndDrop(filesContainer, async (files) => {
     var _a;
-    e.preventDefault();
-    element.classList.remove("border-blue-500", "bg-blue-50");
-    if ((_a = e.dataTransfer) == null ? void 0 : _a.files) {
-      dropHandler(e.dataTransfer.files);
+    const { accepted, errorMessage } = filterAndSlice(
+      Array.from(files),
+      resourceIds.length,
+      constraints,
+      state
+    );
+    if (errorMessage) {
+      showFileError(filesContainer, errorMessage);
+    } else {
+      clearFileError(filesContainer);
+    }
+    const list = (_a = filesContainer.querySelector(".files-list")) != null ? _a : filesContainer;
+    await uploadBatch(accepted, resourceIds, list, state);
+    updateCallback();
+    if (instance && pathKey && !state.config.readonly) {
+      instance.triggerOnChange(pathKey, resourceIds);
     }
   });
 }
-function addDeleteButton(container, state, onDelete) {
-  const existingOverlay = container.querySelector(".delete-overlay");
-  if (existingOverlay) {
-    existingOverlay.remove();
-  }
-  const overlay = document.createElement("div");
-  overlay.className = "delete-overlay absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center";
-  const deleteBtn = document.createElement("button");
-  deleteBtn.className = "bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 transition-colors";
-  deleteBtn.textContent = t("removeElement", state);
-  deleteBtn.onclick = (e) => {
-    e.stopPropagation();
-    onDelete();
+function setupFilesPickerHandler(filesPicker, resourceIds, state, updateCallback, constraints, pathKey, instance) {
+  filesPicker.onchange = async () => {
+    if (!filesPicker.files) return;
+    const wrapperEl = filesPicker.closest(".space-y-2") || filesPicker.parentElement;
+    const { accepted, errorMessage } = filterAndSlice(
+      Array.from(filesPicker.files),
+      resourceIds.length,
+      constraints,
+      state
+    );
+    if (errorMessage && wrapperEl) {
+      showFileError(wrapperEl, errorMessage);
+    } else if (wrapperEl) {
+      clearFileError(wrapperEl);
+    }
+    const listEl = wrapperEl == null ? void 0 : wrapperEl.querySelector(".files-list");
+    await uploadBatch(accepted, resourceIds, listEl != null ? listEl : null, state);
+    updateCallback();
+    filesPicker.value = "";
+    if (instance && pathKey && !state.config.readonly) {
+      instance.triggerOnChange(pathKey, resourceIds);
+    }
   };
-  overlay.appendChild(deleteBtn);
-  container.appendChild(overlay);
 }
-async function uploadSingleFile(file, state) {
-  if (state.config.uploadFile) {
-    try {
-      const rid = await state.config.uploadFile(file);
-      if (typeof rid !== "string") {
-        throw new Error("Upload handler must return a string resource ID");
-      }
-      return rid;
-    } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      if (state.config.onUploadError) {
-        state.config.onUploadError(err, file);
-      }
-      throw new Error(`File upload failed: ${err.message}`);
-    }
-  } else {
-    throw new Error(
-      "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()"
-    );
+// src/components/file/library.ts
+function buildAcceptContext(element) {
+  var _a, _b;
+  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 = (_a = element.accept.extensions) != null ? _a : [];
+  const mime = (_b = element.accept.mime) != null ? _b : [];
+  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;
 }
-async function forceDownload(resourceId, fileName, state) {
+function readCurrentResourceIds(wrapper) {
+  const raw = wrapper.dataset.resourceIds;
+  if (!raw) return [];
   try {
-    let fileUrl = null;
-    if (state.config.getDownloadUrl) {
-      fileUrl = state.config.getDownloadUrl(resourceId);
-    } else if (state.config.getThumbnail) {
-      fileUrl = await state.config.getThumbnail(resourceId);
-    }
-    if (fileUrl) {
-      const finalUrl = fileUrl.startsWith("http") ? fileUrl : new URL(fileUrl, window.location.href).href;
-      const response = await fetch(finalUrl);
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      const blob = await response.blob();
-      downloadBlob(blob, fileName);
-    } else {
-      throw new Error("No download URL available for resource");
-    }
-  } catch (error) {
-    const err = error instanceof Error ? error : new Error(String(error));
-    if (state.config.onDownloadError) {
-      state.config.onDownloadError(err, resourceId, fileName);
-    }
-    console.error(`File download failed for ${fileName}:`, err);
-    throw err;
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
   }
 }
-function downloadBlob(blob, fileName) {
-  try {
-    const blobUrl = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = blobUrl;
-    link.download = fileName;
-    link.style.display = "none";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    setTimeout(() => {
-      URL.revokeObjectURL(blobUrl);
-    }, 100);
+function registerPickedResource(resource, state) {
+  var _a;
+  const existing = state.resourceIndex.get(resource.resourceId);
+  state.resourceIndex.set(resource.resourceId, {
+    name: resource.name,
+    type: resource.type,
+    size: resource.size,
+    uploadedAt: (_a = existing == null ? void 0 : existing.uploadedAt) != null ? _a : /* @__PURE__ */ new Date(),
+    file: existing == null ? void 0 : 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) {
+  var _a;
+  if (!state.config.pickExistingFiles) return;
+  const allowedExtensions = getAllowedExtensions(element.accept);
+  const allowedMimes = getAllowedMimes(element.accept);
+  const maxSizeMB = (_a = element.maxSize) != null ? _a : 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) {
-    throw new Error(`Blob download failed: ${error.message}`);
+    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);
   }
 }
-function addPrefillFilesToIndex(initialFiles, state) {
-  if (initialFiles.length > 0) {
-    initialFiles.forEach((resourceId) => {
-      var _a;
-      if (!state.resourceIndex.has(resourceId)) {
-        const filename = resourceId.split("/").pop() || "file";
-        const extension = (_a = filename.split(".").pop()) == null ? void 0 : _a.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
-        });
-      }
+async function handleLibraryPickSingle(state, element, container, fileWrapper, pathKey, fieldPath, renderCallback, instance) {
+  var _a;
+  if (!state.config.pickExistingFiles) return;
+  const allowedExtensions = getAllowedExtensions(element.accept);
+  const allowedMimes = getAllowedMimes(element.accept);
+  const maxSizeMB = (_a = element.maxSize) != null ? _a : 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) {
   var _a;
-  if (!state.resourceIndex.has(initial)) {
-    const filename = initial.split("/").pop() || "file";
-    const extension = (_a = filename.split(".").pop()) == null ? void 0 : _a.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
-    });
+  seedInferredResource(initial, state.resourceIndex);
+  const meta = state.resourceIndex.get(initial);
+  const isVideo = (_a = meta == null ? void 0 : meta.type) == null ? void 0 : _a.startsWith("video/");
+  if (isVideo) {
+    renderFilePreview(fileContainer, initial, state, {
+      fileName: initial,
+      isReadonly: false,
+      deps
+    }).catch(console.error);
+  } else {
+    renderSingleFileEditTile(fileContainer, initial, state, deps).catch(console.error);
   }
-  renderFilePreview(fileContainer, initial, state, {
-    fileName: initial,
-    isReadonly: false,
-    deps
-  }).catch(console.error);
   const hiddenInput = document.createElement("input");
   hiddenInput.type = "hidden";
   hiddenInput.name = pathKey;
   hiddenInput.value = initial;
   fileWrapper.appendChild(hiddenInput);
 }
-function setupFilesDropHandler(filesContainer, initialFiles, state, updateCallback, constraints, pathKey, instance) {
-  setupDragAndDrop(filesContainer, async (files) => {
-    const allFiles = Array.from(files);
-    const rejectedByExtension = allFiles.filter(
-      (f) => !isFileExtensionAllowed(f.name, constraints.allowedExtensions)
-    );
-    const afterExtension = allFiles.filter(
-      (f) => isFileExtensionAllowed(f.name, constraints.allowedExtensions)
-    );
-    const rejectedBySize = afterExtension.filter(
-      (f) => !isFileSizeAllowed(f, constraints.maxSize)
-    );
-    const validFiles = afterExtension.filter(
-      (f) => isFileSizeAllowed(f, constraints.maxSize)
-    );
-    const remaining = constraints.maxCount === Infinity ? validFiles.length : Math.max(0, constraints.maxCount - initialFiles.length);
-    const arr = validFiles.slice(0, remaining);
-    const skippedByCount = validFiles.length - arr.length;
-    const errorParts = [];
-    if (rejectedByExtension.length > 0) {
-      const formats = constraints.allowedExtensions.join(", ");
-      const names = rejectedByExtension.map((f) => f.name).join(", ");
-      errorParts.push(
-        t("invalidFileExtension", state, { name: names, formats })
-      );
-    }
-    if (rejectedBySize.length > 0) {
-      const names = rejectedBySize.map((f) => f.name).join(", ");
-      errorParts.push(
-        t("fileTooLarge", state, { name: names, maxSize: constraints.maxSize })
-      );
-    }
-    if (skippedByCount > 0) {
-      errorParts.push(
-        t("filesLimitExceeded", state, {
-          skipped: skippedByCount,
-          max: constraints.maxCount
-        })
-      );
-    }
-    if (errorParts.length > 0) {
-      showFileError(filesContainer, errorParts.join(" \u2022 "));
-    } else {
-      clearFileError(filesContainer);
-    }
-    for (const file of arr) {
-      const rid = await uploadSingleFile(file, state);
-      state.resourceIndex.set(rid, {
-        name: file.name,
-        type: file.type,
-        size: file.size,
-        uploadedAt: /* @__PURE__ */ new Date(),
-        file: void 0
-      });
-      initialFiles.push(rid);
-    }
-    updateCallback();
-    if (instance && pathKey && !state.config.readonly) {
-      instance.triggerOnChange(pathKey, initialFiles);
-    }
-  });
+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 setupFilesPickerHandler(filesPicker, initialFiles, state, updateCallback, constraints, pathKey, instance) {
-  filesPicker.onchange = async () => {
-    if (filesPicker.files) {
-      const allFiles = Array.from(filesPicker.files);
-      const rejectedByExtension = allFiles.filter(
-        (f) => !isFileExtensionAllowed(f.name, constraints.allowedExtensions)
-      );
-      const afterExtension = allFiles.filter(
-        (f) => isFileExtensionAllowed(f.name, constraints.allowedExtensions)
-      );
-      const rejectedBySize = afterExtension.filter(
-        (f) => !isFileSizeAllowed(f, constraints.maxSize)
+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) {
+  var _a;
+  const {
+    container,
+    rids,
+    state,
+    onRemove,
+    hint,
+    countInfo,
+    maxCount,
+    isReadonly = false,
+    onLibraryPick
+  } = opts;
+  ensureFileStyles();
+  const wrapper = container.closest("[data-files-wrapper]");
+  if (wrapper) {
+    wrapper.dataset.resourceIds = JSON.stringify(rids != null ? rids : []);
+  }
+  while (container.firstChild) container.removeChild(container.firstChild);
+  const ridList = rids != null ? rids : [];
+  const atMax = maxCount !== void 0 && ridList.length >= maxCount;
+  const hasLibrary = !isReadonly && typeof onLibraryPick === "function";
+  const buildSubHint = () => {
+    const parts = [];
+    if (hint) parts.push(hint);
+    if (countInfo) parts.push(countInfo);
+    return parts.join(" \u2022 ");
+  };
+  const openPicker = () => {
+    const picker = findFilePicker(container);
+    if (picker) picker.click();
+  };
+  if (ridList.length === 0) {
+    if (isReadonly) {
+      const emptyEl = document.createElement("div");
+      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 validFiles = afterExtension.filter(
-        (f) => isFileSizeAllowed(f, constraints.maxSize)
+      const libraryBtn = buildLibraryButton("card", state, onLibraryPick);
+      row.appendChild(dropzone);
+      row.appendChild(libraryBtn);
+      container.appendChild(row);
+    } else {
+      const dropzone = buildEmptyDropzone(
+        state,
+        t("clickDragTextMultiple", state),
+        buildSubHint(),
+        openPicker
       );
-      const remaining = constraints.maxCount === Infinity ? validFiles.length : Math.max(0, constraints.maxCount - initialFiles.length);
-      const arr = validFiles.slice(0, remaining);
-      const skippedByCount = validFiles.length - arr.length;
-      const errorParts = [];
-      if (rejectedByExtension.length > 0) {
-        const formats = constraints.allowedExtensions.join(", ");
-        const names = rejectedByExtension.map((f) => f.name).join(", ");
-        errorParts.push(
-          t("invalidFileExtension", state, { name: names, formats })
-        );
-      }
-      if (rejectedBySize.length > 0) {
-        const names = rejectedBySize.map((f) => f.name).join(", ");
-        errorParts.push(
-          t("fileTooLarge", state, {
-            name: names,
-            maxSize: constraints.maxSize
-          })
-        );
-      }
-      if (skippedByCount > 0) {
-        errorParts.push(
-          t("filesLimitExceeded", state, {
-            skipped: skippedByCount,
-            max: constraints.maxCount
-          })
-        );
-      }
-      const wrapper = filesPicker.closest(".space-y-2") || filesPicker.parentElement;
-      if (errorParts.length > 0 && wrapper) {
-        showFileError(wrapper, errorParts.join(" \u2022 "));
-      } else if (wrapper) {
-        clearFileError(wrapper);
-      }
-      for (const file of arr) {
-        const rid = await uploadSingleFile(file, state);
-        state.resourceIndex.set(rid, {
-          name: file.name,
-          type: file.type,
-          size: file.size,
-          uploadedAt: /* @__PURE__ */ new Date(),
-          file: void 0
-        });
-        initialFiles.push(rid);
-      }
-    }
-    updateCallback();
-    filesPicker.value = "";
-    if (instance && pathKey && !state.config.readonly) {
-      instance.triggerOnChange(pathKey, initialFiles);
+      container.appendChild(dropzone);
     }
-  };
+    return;
+  }
+  const tilesWrap = document.createElement("div");
+  tilesWrap.className = "fb-tiles-wrap";
+  tilesWrap.style.cssText = "display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;";
+  for (const rid of ridList) {
+    const meta = state.resourceIndex.get(rid);
+    const tile = createFileTile();
+    tile.classList.add("fb-tile-resource", "resource-pill");
+    tile.dataset.resourceId = rid;
+    const actionsEl = createTileActions({
+      canRemove: !isReadonly && onRemove !== null,
+      removeHandler: onRemove ? () => onRemove(rid) : null,
+      state,
+      resourceId: rid,
+      fileName: (_a = meta == null ? void 0 : meta.name) != null ? _a : ""
+    });
+    fillTileContent(tile, rid, meta, state, actionsEl).catch((err) => {
+      console.error("Failed to render tile:", err);
+    });
+    tilesWrap.appendChild(tile);
+  }
+  if (!isReadonly && !atMax) {
+    const addTile = document.createElement("div");
+    addTile.className = "fb-tile fb-tile-add";
+    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";
+    chip.textContent = t("filesCounter", state, {
+      count: ridList.length,
+      max: maxCount
+    });
+    tilesWrap.appendChild(chip);
+  }
+  container.appendChild(tilesWrap);
+  const subHint = buildSubHint();
+  if (subHint) {
+    const hintEl = document.createElement("div");
+    hintEl.className = "fb-tile-hint";
+    hintEl.textContent = subHint;
+    container.appendChild(hintEl);
+  }
 }
-function renderFileElement(element, ctx, wrapper, pathKey) {
-  var _a, _b;
+function renderFileElementEdit(element, ctx, wrapper, pathKey) {
+  var _a, _b, _c, _d, _e;
   const state = ctx.state;
-  if (isElementReadonly(element, state, ctx)) {
-    const rawInitial = ctx.prefill[element.key];
-    const initial = typeof rawInitial === "string" ? rawInitial : "";
-    if (initial) {
-      const hiddenInput = document.createElement("input");
-      hiddenInput.type = "hidden";
-      hiddenInput.name = pathKey;
-      hiddenInput.value = initial;
-      wrapper.appendChild(hiddenInput);
-      renderFilePreviewReadonly(initial, state).then((filePreview) => {
-        wrapper.appendChild(filePreview);
-      }).catch((err) => {
-        console.error("Failed to render file preview:", err);
-        const emptyState = document.createElement("div");
-        emptyState.className = "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
-        emptyState.innerHTML = `<div class="text-center">${escapeHtml(t("previewUnavailable", state))}</div>`;
-        wrapper.appendChild(emptyState);
-      });
-    } else {
-      const emptyState = document.createElement("div");
-      emptyState.className = "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
-      emptyState.innerHTML = `<div class="text-center">${escapeHtml(t("noFileSelected", state))}</div>`;
-      wrapper.appendChild(emptyState);
-    }
-  } else {
-    const fileWrapper = document.createElement("div");
-    fileWrapper.className = "space-y-2";
-    const picker = document.createElement("input");
-    picker.type = "file";
-    picker.name = pathKey;
-    picker.style.display = "none";
-    if (element.accept) {
-      picker.accept = typeof element.accept === "string" ? element.accept : ((_a = element.accept.extensions) == null ? void 0 : _a.map((ext) => `.${ext}`).join(",")) || "";
-    }
-    const fileContainer = document.createElement("div");
-    fileContainer.className = "file-preview-container w-full aspect-square max-w-xs bg-gray-100 rounded-lg overflow-hidden relative group cursor-pointer";
-    const initial = ctx.prefill[element.key];
-    const allowedExts = getAllowedExtensions(element.accept);
-    const maxSizeMB = (_b = element.maxSize) != null ? _b : Infinity;
-    const fileUploadHandler = () => picker.click();
-    const dragHandler = (files) => {
+  const fileWrapper = document.createElement("div");
+  fileWrapper.className = "space-y-2";
+  const picker = document.createElement("input");
+  picker.type = "file";
+  picker.name = pathKey;
+  picker.style.display = "none";
+  if (element.accept) {
+    picker.accept = typeof element.accept === "string" ? element.accept : [
+      ...(_b = (_a = element.accept.extensions) == null ? void 0 : _a.map((ext) => `.${ext}`)) != null ? _b : [],
+      ...(_c = element.accept.mime) != null ? _c : []
+    ].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 = (_d = element.maxSize) != null ? _d : Infinity;
+  const handlers = {
+    fileUploadHandler() {
+      picker.click();
+    },
+    dragHandler(files) {
       if (files.length > 0) {
-        const deps = { picker, fileUploadHandler, dragHandler };
-        handleFileSelect(
-          files[0],
-          fileContainer,
-          pathKey,
+        handleFileSelect({
+          file: files[0],
+          container: fileContainer,
+          fieldName: pathKey,
           state,
-          deps,
-          ctx.instance,
-          allowedExts,
+          deps: buildDeps(),
+          instance: ctx.instance,
+          allowedExtensions: allowedExts,
+          allowedMimes,
           maxSizeMB
-        );
+        });
       }
-    };
-    if (initial) {
-      handleInitialFileData(
-        initial,
-        fileContainer,
-        pathKey,
-        fileWrapper,
-        state,
-        {
-          picker,
-          fileUploadHandler,
-          dragHandler
-        }
-      );
-    } else {
+    },
+    setupDrop(container) {
+      setupDragAndDrop(container, handlers.dragHandler);
+    },
+    restoreDropzone() {
       const hint = makeFieldHint(element, state);
+      fileContainer.className = "file-preview-container w-full max-w-md bg-gray-100 rounded-lg overflow-hidden relative group cursor-pointer";
+      fileContainer.style.height = "128px";
       setEmptyFileContainer(fileContainer, state, hint);
+      fileContainer.onclick = handlers.fileUploadHandler;
+      setupDragAndDrop(fileContainer, handlers.dragHandler);
+    },
+    onRemove() {
+      var _a2;
+      const hiddenInput = fileWrapper.querySelector('input[type="hidden"]');
+      const currentRid = hiddenInput == null ? void 0 : hiddenInput.value;
+      if (currentRid) {
+        releaseLocalFileUrl((_a2 = state.resourceIndex.get(currentRid)) == null ? void 0 : _a2.file);
+      }
+      if (hiddenInput) hiddenInput.value = "";
+      handlers.restoreDropzone();
     }
-    fileContainer.onclick = fileUploadHandler;
-    setupDragAndDrop(fileContainer, dragHandler);
-    picker.onchange = () => {
-      if (picker.files && picker.files.length > 0) {
-        const deps = { picker, fileUploadHandler, dragHandler };
-        handleFileSelect(
-          picker.files[0],
+  };
+  const buildDeps = () => ({
+    picker,
+    fileUploadHandler: handlers.fileUploadHandler,
+    dragHandler: handlers.dragHandler,
+    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;
+      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,
-          state,
-          deps,
-          ctx.instance,
-          allowedExts,
-          maxSizeMB
-        );
-      }
-    };
-    fileWrapper.appendChild(fileContainer);
-    fileWrapper.appendChild(picker);
-    wrapper.appendChild(fileWrapper);
-  }
-}
-function renderFilesElement(element, ctx, wrapper, pathKey) {
-  var _a, _b;
-  const state = ctx.state;
-  if (isElementReadonly(element, state, ctx)) {
-    const rawPrefill = ctx.prefill[element.key];
-    const initialFiles = Array.isArray(rawPrefill) ? rawPrefill : [];
-    const filesWrapper = document.createElement("div");
-    filesWrapper.className = "space-y-2";
-    filesWrapper.dataset.filesWrapper = pathKey;
-    const filesList = document.createElement("div");
-    filesList.className = "files-list";
-    initialFiles.forEach((resourceId) => {
-      const pill = document.createElement("div");
-      pill.className = "resource-pill";
-      pill.dataset.resourceId = resourceId;
-      filesList.appendChild(pill);
-    });
-    filesWrapper.appendChild(filesList);
-    wrapper.appendChild(filesWrapper);
-    const resultsWrapper = document.createElement("div");
-    resultsWrapper.className = "space-y-4";
-    if (initialFiles.length > 0) {
-      initialFiles.forEach((resourceId) => {
-        renderFilePreviewReadonly(resourceId, state).then((filePreview) => {
-          resultsWrapper.appendChild(filePreview);
-        }).catch((err) => {
-          console.error("Failed to render file preview:", err);
+          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 {
-      resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${escapeHtml(t("noFilesSelected", state))}</div></div>`;
+      handlers.restoreDropzone();
+    }
+  };
+  if (initial) {
+    handleInitialFileData(
+      initial,
+      fileContainer,
+      pathKey,
+      fileWrapper,
+      state,
+      buildDeps()
+    );
+    const prefillMeta = state.resourceIndex.get(initial);
+    if ((_e = prefillMeta == null ? void 0 : prefillMeta.type) == null ? void 0 : _e.startsWith("video/")) {
+      fileContainer.onclick = handlers.fileUploadHandler;
+      setupDragAndDrop(fileContainer, handlers.dragHandler);
     }
-    wrapper.appendChild(resultsWrapper);
   } else {
-    let updateFilesList2 = function() {
-      renderResourcePills(
-        list,
-        initialFiles,
+    renderEmptySingleState();
+  }
+  picker.onchange = () => {
+    if (picker.files && picker.files.length > 0) {
+      handleFileSelect({
+        file: picker.files[0],
+        container: fileContainer,
+        fieldName: pathKey,
         state,
-        (ridToRemove) => {
-          const index = initialFiles.indexOf(ridToRemove);
-          if (index > -1) {
-            initialFiles.splice(index, 1);
-          }
-          updateFilesList2();
-        },
-        filesFieldHint
-      );
-    };
-    const filesWrapper = document.createElement("div");
-    filesWrapper.className = "space-y-2";
-    filesWrapper.dataset.filesWrapper = pathKey;
-    const filesPicker = document.createElement("input");
-    filesPicker.type = "file";
-    filesPicker.name = pathKey;
-    filesPicker.multiple = true;
-    filesPicker.style.display = "none";
-    if (element.accept) {
-      filesPicker.accept = typeof element.accept === "string" ? element.accept : ((_a = element.accept.extensions) == null ? void 0 : _a.map((ext) => `.${ext}`).join(",")) || "";
-    }
-    const filesContainer = document.createElement("div");
-    filesContainer.className = "border-2 border-dashed border-gray-300 rounded-lg p-3 hover:border-gray-400 transition-colors";
-    const list = document.createElement("div");
-    list.className = "files-list";
-    const initialFiles = ctx.prefill[element.key] || [];
-    addPrefillFilesToIndex(initialFiles, state);
-    const filesFieldHint = makeFieldHint(element, state);
-    const filesConstraints = {
-      maxCount: Infinity,
-      allowedExtensions: getAllowedExtensions(element.accept),
-      maxSize: (_b = element.maxSize) != null ? _b : Infinity
-    };
-    updateFilesList2();
-    setupFilesDropHandler(
-      filesContainer,
-      initialFiles,
+        deps: buildDeps(),
+        instance: ctx.instance,
+        allowedExtensions: allowedExts,
+        allowedMimes,
+        maxSizeMB
+      });
+    }
+  };
+  fileWrapper.appendChild(fileContainer);
+  fileWrapper.appendChild(picker);
+  wrapper.appendChild(fileWrapper);
+}
+function renderFilesElementEdit(element, ctx, wrapper, pathKey) {
+  var _a, _b, _c, _d;
+  const state = ctx.state;
+  const filesWrapper = document.createElement("div");
+  filesWrapper.className = "space-y-2";
+  filesWrapper.dataset.filesWrapper = pathKey;
+  const filesPicker = document.createElement("input");
+  filesPicker.type = "file";
+  filesPicker.name = pathKey;
+  filesPicker.multiple = true;
+  filesPicker.style.display = "none";
+  if (element.accept) {
+    filesPicker.accept = typeof element.accept === "string" ? element.accept : [
+      ...(_b = (_a = element.accept.extensions) == null ? void 0 : _a.map((ext) => `.${ext}`)) != null ? _b : [],
+      ...(_c = element.accept.mime) != null ? _c : []
+    ].join(",") || "";
+  }
+  const filesContainer = document.createElement("div");
+  filesContainer.className = "files-list-wrapper";
+  filesContainer.style.cssText = "border:2px dashed var(--fb-file-upload-border-color,#d1d5db);border-radius:var(--fb-border-radius,0.5rem);padding:8px;transition:border-color var(--fb-transition-duration,200ms),background var(--fb-transition-duration,200ms);";
+  const list = document.createElement("div");
+  list.className = "files-list";
+  const initialFiles = ctx.prefill[element.key] || [];
+  addPrefillFilesToIndex(initialFiles, state.resourceIndex);
+  filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+  const filesFieldHint = makeFieldHint(element, state);
+  const filesConstraints = {
+    maxCount: Infinity,
+    allowedExtensions: getAllowedExtensions(element.accept),
+    allowedMimes: getAllowedMimes(element.accept),
+    maxSize: (_d = element.maxSize) != null ? _d : Infinity
+  };
+  filesContainer.appendChild(list);
+  filesWrapper.appendChild(filesPicker);
+  filesWrapper.appendChild(filesContainer);
+  wrapper.appendChild(filesWrapper);
+  const onLibraryPickFiles = state.config.pickExistingFiles && !element.disableLibrary ? () => {
+    handleLibraryPickMulti(
       state,
-      updateFilesList2,
-      filesConstraints,
+      element,
+      filesWrapper,
       pathKey,
-      ctx.instance
-    );
-    setupFilesPickerHandler(
-      filesPicker,
       initialFiles,
-      state,
-      updateFilesList2,
-      filesConstraints,
-      pathKey,
+      Infinity,
+      updateFilesList,
       ctx.instance
-    );
-    filesContainer.appendChild(list);
-    filesWrapper.appendChild(filesContainer);
-    filesWrapper.appendChild(filesPicker);
-    wrapper.appendChild(filesWrapper);
+    ).catch((err) => {
+      console.error("Library pick failed:", err);
+    });
+  } : null;
+  function updateFilesList() {
+    const currentlyReadonly = isElementReadonly(element, state);
+    renderResourcePills({
+      container: list,
+      rids: initialFiles,
+      state,
+      onRemove: currentlyReadonly ? null : (ridToRemove) => {
+        var _a2;
+        releaseLocalFileUrl((_a2 = state.resourceIndex.get(ridToRemove)) == null ? void 0 : _a2.file);
+        const index = initialFiles.indexOf(ridToRemove);
+        if (index > -1) initialFiles.splice(index, 1);
+        updateFilesList();
+      },
+      hint: filesFieldHint,
+      isReadonly: currentlyReadonly,
+      onLibraryPick: currentlyReadonly ? null : onLibraryPickFiles
+    });
   }
+  updateFilesList();
+  setupFilesDropHandler(
+    filesContainer,
+    initialFiles,
+    state,
+    updateFilesList,
+    filesConstraints,
+    pathKey,
+    ctx.instance
+  );
+  setupFilesPickerHandler(
+    filesPicker,
+    initialFiles,
+    state,
+    updateFilesList,
+    filesConstraints,
+    pathKey,
+    ctx.instance
+  );
 }
-function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
-  var _a, _b, _c, _d;
+function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
+  var _a, _b, _c, _d, _e, _f;
   const state = ctx.state;
   const minFiles = (_a = element.minCount) != null ? _a : 0;
   const maxFiles = (_b = element.maxCount) != null ? _b : Infinity;
-  if (isElementReadonly(element, state, ctx)) {
-    const rawPrefill = ctx.prefill[element.key];
-    const initialFiles = Array.isArray(rawPrefill) ? rawPrefill : [];
-    const filesWrapper = document.createElement("div");
-    filesWrapper.className = "space-y-2";
-    filesWrapper.dataset.filesWrapper = pathKey;
-    const filesList = document.createElement("div");
-    filesList.className = "files-list";
-    initialFiles.forEach((resourceId) => {
-      const pill = document.createElement("div");
-      pill.className = "resource-pill";
-      pill.dataset.resourceId = resourceId;
-      filesList.appendChild(pill);
-    });
-    filesWrapper.appendChild(filesList);
-    wrapper.appendChild(filesWrapper);
-    const resultsWrapper = document.createElement("div");
-    resultsWrapper.className = "space-y-4";
-    if (initialFiles.length > 0) {
-      initialFiles.forEach((resourceId) => {
-        renderFilePreviewReadonly(resourceId, state).then((filePreview) => {
-          resultsWrapper.appendChild(filePreview);
-        }).catch((err) => {
-          console.error("Failed to render file preview:", err);
-        });
-      });
-    } else {
-      resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${escapeHtml(t("noFilesSelected", state))}</div></div>`;
-    }
-    wrapper.appendChild(resultsWrapper);
-  } else {
-    const filesWrapper = document.createElement("div");
-    filesWrapper.className = "space-y-2";
-    filesWrapper.dataset.filesWrapper = pathKey;
-    const filesPicker = document.createElement("input");
-    filesPicker.type = "file";
-    filesPicker.name = pathKey;
-    filesPicker.multiple = true;
-    filesPicker.style.display = "none";
-    if (element.accept) {
-      filesPicker.accept = typeof element.accept === "string" ? element.accept : ((_c = element.accept.extensions) == null ? void 0 : _c.map((ext) => `.${ext}`).join(",")) || "";
-    }
-    const filesContainer = document.createElement("div");
-    filesContainer.className = "files-list space-y-2";
-    filesWrapper.appendChild(filesPicker);
-    filesWrapper.appendChild(filesContainer);
-    const initialFiles = Array.isArray(ctx.prefill[element.key]) ? [...ctx.prefill[element.key]] : [];
-    addPrefillFilesToIndex(initialFiles, state);
-    const multipleFilesHint = makeFieldHint(element, state);
-    const multipleConstraints = {
-      maxCount: maxFiles,
-      allowedExtensions: getAllowedExtensions(element.accept),
-      maxSize: (_d = element.maxSize) != null ? _d : Infinity
-    };
-    const buildCountInfo = () => {
-      const countText = initialFiles.length === 1 ? t("fileCountSingle", state, { count: initialFiles.length }) : t("fileCountPlural", state, { count: initialFiles.length });
-      const minMaxText = minFiles > 0 || maxFiles < Infinity ? ` ${t("fileCountRange", state, { min: minFiles, max: maxFiles })}` : "";
-      return countText + minMaxText;
-    };
-    const updateFilesDisplay = () => {
-      renderResourcePills(
-        filesContainer,
-        initialFiles,
-        state,
-        (index) => {
-          initialFiles.splice(initialFiles.indexOf(index), 1);
-          updateFilesDisplay();
-        },
-        multipleFilesHint,
-        buildCountInfo()
-      );
-    };
-    setupFilesDropHandler(
-      filesContainer,
-      initialFiles,
+  const filesWrapper = document.createElement("div");
+  filesWrapper.className = "space-y-2";
+  filesWrapper.dataset.filesWrapper = pathKey;
+  const filesPicker = document.createElement("input");
+  filesPicker.type = "file";
+  filesPicker.name = pathKey;
+  filesPicker.multiple = true;
+  filesPicker.style.display = "none";
+  if (element.accept) {
+    filesPicker.accept = typeof element.accept === "string" ? element.accept : [
+      ...(_d = (_c = element.accept.extensions) == null ? void 0 : _c.map((ext) => `.${ext}`)) != null ? _d : [],
+      ...(_e = element.accept.mime) != null ? _e : []
+    ].join(",") || "";
+  }
+  const filesContainer = document.createElement("div");
+  filesContainer.className = "files-list-wrapper";
+  filesContainer.style.cssText = "border:2px dashed var(--fb-file-upload-border-color,#d1d5db);border-radius:var(--fb-border-radius,0.5rem);padding:8px;transition:border-color var(--fb-transition-duration,200ms),background var(--fb-transition-duration,200ms);";
+  const list = document.createElement("div");
+  list.className = "files-list";
+  filesWrapper.appendChild(filesPicker);
+  filesWrapper.appendChild(filesContainer);
+  filesContainer.appendChild(list);
+  const initialFiles = Array.isArray(ctx.prefill[element.key]) ? [...ctx.prefill[element.key]] : [];
+  addPrefillFilesToIndex(initialFiles, state.resourceIndex);
+  filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+  const multipleFilesHint = makeFieldHint(element, state);
+  const multipleConstraints = {
+    maxCount: maxFiles,
+    allowedExtensions: getAllowedExtensions(element.accept),
+    allowedMimes: getAllowedMimes(element.accept),
+    maxSize: (_f = element.maxSize) != null ? _f : Infinity
+  };
+  const buildCountInfo = () => {
+    const countText = initialFiles.length === 1 ? t("fileCountSingle", state, { count: initialFiles.length }) : t("fileCountPlural", state, { count: initialFiles.length });
+    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,
-      updateFilesDisplay,
-      multipleConstraints,
+      element,
+      filesWrapper,
       pathKey,
-      ctx.instance
-    );
-    setupFilesPickerHandler(
-      filesPicker,
       initialFiles,
-      state,
+      maxFiles,
       updateFilesDisplay,
-      multipleConstraints,
-      pathKey,
       ctx.instance
+    ).catch((err) => {
+      console.error("Library pick failed:", err);
+    });
+  } : null;
+  const updateFilesDisplay = () => {
+    const currentlyReadonly = isElementReadonly(element, state);
+    renderResourcePills({
+      container: list,
+      rids: initialFiles,
+      state,
+      onRemove: currentlyReadonly ? null : (index) => {
+        var _a2;
+        releaseLocalFileUrl((_a2 = state.resourceIndex.get(index)) == null ? void 0 : _a2.file);
+        initialFiles.splice(initialFiles.indexOf(index), 1);
+        updateFilesDisplay();
+      },
+      hint: multipleFilesHint,
+      countInfo: buildCountInfo(),
+      maxCount: maxFiles < Infinity ? maxFiles : void 0,
+      isReadonly: currentlyReadonly,
+      onLibraryPick: currentlyReadonly ? null : onLibraryPickMultiple
+    });
+  };
+  setupFilesDropHandler(
+    filesContainer,
+    initialFiles,
+    state,
+    updateFilesDisplay,
+    multipleConstraints,
+    pathKey,
+    ctx.instance
+  );
+  setupFilesPickerHandler(
+    filesPicker,
+    initialFiles,
+    state,
+    updateFilesDisplay,
+    multipleConstraints,
+    pathKey,
+    ctx.instance
+  );
+  updateFilesDisplay();
+  wrapper.appendChild(filesWrapper);
+}
+// src/components/file/validate.ts
+function readMultiFileResourceIds(scopeRoot, fullKey) {
+  const wrapper = scopeRoot.querySelector(
+    `[data-files-wrapper="${fullKey}"]`
+  );
+  if (!wrapper) return [];
+  const encoded = wrapper.dataset.resourceIds;
+  if (encoded === void 0) {
+    throw new Error(
+      `readMultiFileResourceIds: [data-files-wrapper="${fullKey}"] is missing data-resource-ids attribute. This is a render bug.`
     );
-    updateFilesDisplay();
-    wrapper.appendChild(filesWrapper);
   }
+  const parsed = JSON.parse(encoded);
+  if (!Array.isArray(parsed)) {
+    throw new Error(
+      `readMultiFileResourceIds: data-resource-ids on [data-files-wrapper="${fullKey}"] is not a JSON array. Got: ${encoded}`
+    );
+  }
+  return parsed;
 }
-function validateFileElement(element, key, context) {
-  var _a;
-  const errors = [];
-  const { scopeRoot, skipValidation, path } = context;
-  const isMultipleField = element.type === "files" || "multiple" in element && Boolean(element.multiple);
-  const validateFileCount = (key2, resourceIds, element2) => {
-    var _a2, _b;
-    if (skipValidation) return;
-    const { state } = context;
-    const minFiles = "minCount" in element2 ? (_a2 = element2.minCount) != null ? _a2 : 0 : 0;
-    const maxFiles = "maxCount" in element2 ? (_b = element2.maxCount) != null ? _b : Infinity : Infinity;
-    if (element2.required && resourceIds.length === 0) {
-      errors.push(`${key2}: ${t("required", state)}`);
-    }
-    if (resourceIds.length < minFiles) {
-      errors.push(`${key2}: ${t("minFiles", state, { min: minFiles })}`);
-    }
-    if (resourceIds.length > maxFiles) {
-      errors.push(`${key2}: ${t("maxFiles", state, { max: maxFiles })}`);
+function validateFileCount(key, resourceIds, element, state, errors) {
+  var _a, _b;
+  const minFiles = "minCount" in element ? (_a = element.minCount) != null ? _a : 0 : 0;
+  const maxFiles = "maxCount" in element ? (_b = element.maxCount) != null ? _b : Infinity : Infinity;
+  if (element.required && resourceIds.length === 0) {
+    errors.push(`${key}: ${t("required", state)}`);
+  }
+  if (resourceIds.length < minFiles) {
+    errors.push(`${key}: ${t("minFiles", state, { min: minFiles })}`);
+  }
+  if (resourceIds.length > maxFiles) {
+    errors.push(`${key}: ${t("maxFiles", state, { max: maxFiles })}`);
+  }
+}
+function validateFileTypes(key, resourceIds, element, state, errors) {
+  var _a, _b;
+  const acceptField = "accept" in element ? element.accept : void 0;
+  const allowedExtensions = getAllowedExtensions(acceptField);
+  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 = (_a = meta == null ? void 0 : meta.name) != null ? _a : rid;
+    if (allowedExtensions.length > 0 && !isFileExtensionAllowed(fileName, allowedExtensions)) {
+      errors.push(
+        `${key}: ${t("invalidFileExtension", state, { name: fileName, formats })}`
+      );
+      continue;
     }
-  };
-  const validateFileExtensions = (key2, resourceIds, element2) => {
-    var _a2;
-    if (skipValidation) return;
-    const { state } = context;
-    const acceptField = "accept" in element2 ? element2.accept : void 0;
-    const allowedExtensions = getAllowedExtensions(acceptField);
-    if (allowedExtensions.length === 0) return;
-    const formats = allowedExtensions.join(", ");
-    for (const rid of resourceIds) {
-      const meta = state.resourceIndex.get(rid);
-      const fileName = (_a2 = meta == null ? void 0 : meta.name) != null ? _a2 : rid;
-      if (!isFileExtensionAllowed(fileName, allowedExtensions)) {
+    if (allowedMimes.length > 0 && !(meta == null ? void 0 : meta.inferredFromExtension)) {
+      const mimeType = (_b = meta == null ? void 0 : meta.type) != null ? _b : "";
+      if (!isMimeAllowed(mimeType, allowedMimes)) {
         errors.push(
-          `${key2}: ${t("invalidFileExtension", state, { name: fileName, formats })}`
+          `${key}: ${t("invalidFileMime", state, { name: fileName, type: mimeType, mimes })}`
         );
       }
     }
-  };
-  const validateFileSizes = (key2, resourceIds, element2) => {
-    var _a2;
-    if (skipValidation) return;
-    const { state } = context;
-    const maxSizeMB = "maxSize" in element2 ? (_a2 = element2.maxSize) != null ? _a2 : Infinity : Infinity;
-    if (maxSizeMB === Infinity) return;
-    for (const rid of resourceIds) {
-      const meta = state.resourceIndex.get(rid);
-      if (!meta) continue;
-      if (meta.size > maxSizeMB * 1024 * 1024) {
-        errors.push(
-          `${key2}: ${t("fileTooLarge", state, { name: meta.name, maxSize: maxSizeMB })}`
-        );
-      }
+  }
+}
+function validateFileSizes(key, resourceIds, element, state, errors) {
+  var _a;
+  const maxSizeMB = "maxSize" in element ? (_a = element.maxSize) != null ? _a : Infinity : Infinity;
+  if (maxSizeMB === Infinity) return;
+  for (const rid of resourceIds) {
+    const meta = state.resourceIndex.get(rid);
+    if (!meta) continue;
+    if (meta.size > maxSizeMB * 1024 * 1024) {
+      errors.push(
+        `${key}: ${t("fileTooLarge", state, { name: meta.name, maxSize: maxSizeMB })}`
+      );
     }
-  };
+  }
+}
+function validateMultiFile(element, key, context) {
+  const { scopeRoot, skipValidation, path, state } = context;
+  const errors = [];
+  const fullKey = pathJoin(path, key);
+  const resourceIds = readMultiFileResourceIds(scopeRoot, fullKey);
+  if (!skipValidation) {
+    validateFileCount(key, resourceIds, element, state, errors);
+    validateFileTypes(key, resourceIds, element, state, errors);
+    validateFileSizes(key, resourceIds, element, state, errors);
+  }
+  return { value: resourceIds, errors };
+}
+function validateSingleFile(element, key, context) {
+  var _a;
+  const { scopeRoot, skipValidation, state } = context;
+  const errors = [];
+  const input = scopeRoot.querySelector(
+    `input[name$="${key}"][type="hidden"]`
+  );
+  const rid = (_a = input == null ? void 0 : input.value) != null ? _a : "";
+  if (!skipValidation && element.required && rid === "") {
+    errors.push(`${key}: ${t("required", state)}`);
+    return { value: null, errors };
+  }
+  if (!skipValidation && rid !== "") {
+    validateFileTypes(key, [rid], element, state, errors);
+    validateFileSizes(key, [rid], element, state, errors);
+  }
+  return { value: rid || null, errors };
+}
+function validateFileElement(element, key, context) {
+  const isMultipleField = element.type === "files" || "multiple" in element && Boolean(element.multiple);
   if (isMultipleField) {
-    const fullKey = pathJoin(path, key);
-    const filesWrapper = scopeRoot.querySelector(
-      `[data-files-wrapper="${fullKey}"]`
-    );
-    const container = (filesWrapper == null ? void 0 : filesWrapper.querySelector(".files-list")) || null;
-    const resourceIds = [];
-    if (container) {
-      const pills = container.querySelectorAll(".resource-pill");
-      pills.forEach((pill) => {
-        const resourceId = pill.dataset.resourceId;
-        if (resourceId) {
-          resourceIds.push(resourceId);
-        }
-      });
-    }
-    validateFileCount(key, resourceIds, element);
-    validateFileExtensions(key, resourceIds, element);
-    validateFileSizes(key, resourceIds, element);
-    return { value: resourceIds, errors };
+    return validateMultiFile(element, key, context);
+  }
+  return validateSingleFile(element, key, context);
+}
+// src/components/file/render-readonly.ts
+function renderFileElementReadonly(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const rawInitial = ctx.prefill[element.key];
+  const initial = typeof rawInitial === "string" ? rawInitial : "";
+  if (initial) {
+    addPrefillFilesToIndex([initial], state.resourceIndex);
+    const hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = pathKey;
+    hiddenInput.value = initial;
+    wrapper.appendChild(hiddenInput);
+    renderFilePreviewReadonly(initial, state).then((filePreview) => {
+      wrapper.appendChild(filePreview);
+    }).catch((err) => {
+      console.error("Failed to render file preview:", err);
+      wrapper.appendChild(buildEmptyReadonlyTile(state));
+    });
   } else {
-    const input = scopeRoot.querySelector(
-      `input[name$="${key}"][type="hidden"]`
-    );
-    const rid = (_a = input == null ? void 0 : input.value) != null ? _a : "";
-    if (!skipValidation && element.required && rid === "") {
-      errors.push(`${key}: ${t("required", context.state)}`);
-      return { value: null, errors };
-    }
-    if (!skipValidation && rid !== "") {
-      validateFileExtensions(key, [rid], element);
-      validateFileSizes(key, [rid], element);
-    }
-    return { value: rid || null, errors };
+    wrapper.appendChild(buildEmptyReadonlyTile(state));
+  }
+}
+function buildEmptyReadonlyTile(state) {
+  const emptyState = document.createElement("div");
+  emptyState.style.cssText = `
+    width:${TILE_SIZE};
+    height:${TILE_SIZE};
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    background:var(--fb-file-upload-bg-color,#f3f4f6);
+    border-radius:var(--fb-border-radius,0.5rem);
+    border:1px solid var(--fb-file-upload-border-color,#d1d5db);
+  `;
+  emptyState.innerHTML = `<div style="font-size:11px;text-align:center;color:var(--fb-text-secondary-color,#6b7280);">${escapeHtml(t("noFileSelected", state))}</div>`;
+  return emptyState;
+}
+function renderMultiFileReadonly(rids, state, wrapper, pathKey, marginTop) {
+  addPrefillFilesToIndex(rids, state.resourceIndex);
+  const filesWrapper = document.createElement("div");
+  filesWrapper.dataset.filesWrapper = pathKey;
+  filesWrapper.dataset.resourceIds = JSON.stringify(rids);
+  wrapper.appendChild(filesWrapper);
+  if (rids.length === 0) {
+    const emptyEl = document.createElement("div");
+    emptyEl.className = "fb-tile-empty-text";
+    emptyEl.textContent = t("noFilesSelected", state);
+    filesWrapper.appendChild(emptyEl);
+    return;
+  }
+  const tilesWrap = document.createElement("div");
+  tilesWrap.style.cssText = `display:flex;flex-wrap:wrap;gap:6px;${marginTop ? `margin-top:${marginTop};` : ""}`;
+  filesWrapper.appendChild(tilesWrap);
+  const placeholders = rids.map(() => {
+    const placeholder = document.createElement("div");
+    placeholder.style.cssText = `width:${TILE_SIZE};height:${TILE_SIZE};`;
+    tilesWrap.appendChild(placeholder);
+    return placeholder;
+  });
+  for (let i = 0; i < rids.length; i++) {
+    const resourceId = rids[i];
+    const placeholder = placeholders[i];
+    renderFilePreviewReadonly(resourceId, state).then((tileEl) => {
+      placeholder.replaceWith(tileEl);
+    }).catch((err) => {
+      console.error("Failed to render readonly tile:", err);
+    });
+  }
+}
+function renderFilesElementReadonly(element, ctx, wrapper, pathKey) {
+  const rawPrefill = ctx.prefill[element.key];
+  const initialFiles = Array.isArray(rawPrefill) ? rawPrefill : [];
+  renderMultiFileReadonly(initialFiles, ctx.state, wrapper, pathKey);
+}
+function renderMultipleFileElementReadonly(element, ctx, wrapper, pathKey) {
+  const rawPrefill = ctx.prefill[element.key];
+  const initialFiles = Array.isArray(rawPrefill) ? rawPrefill : [];
+  renderMultiFileReadonly(initialFiles, ctx.state, wrapper, pathKey, "4px");
+}
+// src/components/file.ts
+function renderFileElement(element, ctx, wrapper, pathKey) {
+  if (isElementReadonly(element, ctx.state, ctx)) {
+    renderFileElementReadonly(element, ctx, wrapper, pathKey);
+  } else {
+    renderFileElementEdit(element, ctx, wrapper, pathKey);
+  }
+}
+function renderFilesElement(element, ctx, wrapper, pathKey) {
+  if (isElementReadonly(element, ctx.state, ctx)) {
+    renderFilesElementReadonly(element, ctx, wrapper, pathKey);
+  } else {
+    renderFilesElementEdit(element, ctx, wrapper, pathKey);
+  }
+}
+function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
+  if (isElementReadonly(element, ctx.state, ctx)) {
+    renderMultipleFileElementReadonly(element, ctx, wrapper, pathKey);
+  } else {
+    renderMultipleFileElementEdit(element, ctx, wrapper, pathKey);
   }
 }
 function updateFileField(element, fieldPath, value, context) {
-  var _a;
   const { scopeRoot, state } = context;
-  if ("multiple" in element && element.multiple) {
+  if (element.type === "files" || "multiple" in element && element.multiple) {
     if (!Array.isArray(value)) {
       console.warn(
         `updateFileField: Expected array for multiple file field "${fieldPath}", got ${typeof value}`
@@ -3446,32 +4454,20 @@ function updateFileField(element, fieldPath, value, context) {
       return;
     }
     value.forEach((resourceId) => {
-      var _a2;
       if (resourceId && typeof resourceId === "string") {
-        if (!state.resourceIndex.has(resourceId)) {
-          const filename = resourceId.split("/").pop() || "file";
-          const extension = (_a2 = filename.split(".").pop()) == null ? void 0 : _a2.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
-          });
-        }
+        seedInferredResource(resourceId, state.resourceIndex);
       }
     });
-    console.info(
-      `updateFileField: Multiple file field "${fieldPath}" updated. Preview update requires re-render.`
+    const filesWrapper = scopeRoot.querySelector(
+      `[data-files-wrapper="${fieldPath}"]`
     );
+    if (filesWrapper) {
+      filesWrapper.dataset.resourceIds = JSON.stringify(value);
+    } else {
+      console.warn(
+        `updateFileField: [data-files-wrapper="${fieldPath}"] not found in DOM; data-resource-ids not updated`
+      );
+    }
   } else {
     const hiddenInput = scopeRoot.querySelector(
       `input[name="${fieldPath}"][type="hidden"]`
@@ -3484,25 +4480,7 @@ function updateFileField(element, fieldPath, value, context) {
     }
     hiddenInput.value = value != null ? String(value) : "";
     if (value && typeof value === "string") {
-      if (!state.resourceIndex.has(value)) {
-        const filename = value.split("/").pop() || "file";
-        const extension = (_a = filename.split(".").pop()) == null ? void 0 : _a.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(value, {
-          name: filename,
-          type: fileType,
-          size: 0,
-          uploadedAt: /* @__PURE__ */ new Date(),
-          file: void 0
-        });
-      }
+      seedInferredResource(value, state.resourceIndex);
       console.info(
         `updateFileField: File field "${fieldPath}" updated. Preview update requires re-render.`
       );
@@ -8245,6 +9223,7 @@ var defaultConfig = {
   enableFilePreview: true,
   maxPreviewSize: "200px",
   readonly: false,
+  pickExistingFiles: null,
   parseTableFile: null,
   locale: "en",
   translations: {
@@ -8256,6 +9235,8 @@ var defaultConfig = {
       noFileSelected: "No file selected",
       noFilesSelected: "No files selected",
       downloadButton: "Download",
+      downloadFile: "Download",
+      openInNewTab: "Open in new tab",
       changeButton: "Change",
       placeholderText: "Enter text",
       previewAlt: "Preview",
@@ -8277,6 +9258,12 @@ var defaultConfig = {
       fileCountSingle: "{count} file",
       fileCountPlural: "{count} files",
       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",
@@ -8292,6 +9279,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}",
@@ -8318,6 +9306,8 @@ var defaultConfig = {
       noFileSelected: "\u0424\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D",
       noFilesSelected: "\u041D\u0435\u0442 \u0444\u0430\u0439\u043B\u043E\u0432",
       downloadButton: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C",
+      downloadFile: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C",
+      openInNewTab: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043D\u043E\u0432\u043E\u0439 \u0432\u043A\u043B\u0430\u0434\u043A\u0435",
       changeButton: "\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C",
       placeholderText: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442",
       previewAlt: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440",
@@ -8339,6 +9329,12 @@ var defaultConfig = {
       fileCountSingle: "{count} \u0444\u0430\u0439\u043B",
       fileCountPlural: "{count} \u0444\u0430\u0439\u043B\u043E\u0432",
       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",
@@ -8354,6 +9350,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}",