@dmitryvim/form-builder 0.2.26 → 0.2.28

package/dist/esm/index.js

@@ -2088,7 +2088,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)) {
@@ -2101,16 +2101,768 @@ function getAllowedExtensions(accept) {
 }
 function isFileExtensionAllowed(fileName, allowedExtensions) {
   if (allowedExtensions.length === 0) return true;
-  const ext = fileName.split(".").pop()?.toLowerCase() || "";
+  const ext = fileName.split(".").pop()?.toLowerCase() ?? "";
   return allowedExtensions.includes(ext);
 }
-function isFileSizeAllowed(file, maxSizeMB) {
+function isSizeWithinLimit(bytes, maxSizeMB) {
   if (maxSizeMB === Infinity) return true;
-  return file.size <= maxSizeMB * 1024 * 1024;
+  return bytes <= maxSizeMB * 1024 * 1024;
+}
+function isFileSizeAllowed(file, maxSizeMB) {
+  return isSizeWithinLimit(file.size, maxSizeMB);
+}
+function getAllowedMimes(accept) {
+  if (!accept) return [];
+  if (typeof accept === "string") return [];
+  if (!Array.isArray(accept.mime)) return [];
+  return accept.mime.map((m) => m.toLowerCase());
+}
+function isMimeAllowed(mimeType, allowedMimes) {
+  if (allowedMimes.length === 0) return true;
+  const normalizedType = mimeType.toLowerCase();
+  return allowedMimes.some((allowed) => {
+    if (allowed.endsWith("/*")) {
+      const prefix = allowed.slice(0, -1);
+      return normalizedType.startsWith(prefix);
+    }
+    return normalizedType === allowed;
+  });
+}
+function inferMimeFromResourceId(resourceId) {
+  const filename = resourceId.split("/").pop() || "file";
+  const extension = filename.split(".").pop()?.toLowerCase();
+  if (extension) {
+    if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
+      return `image/${extension === "jpg" ? "jpeg" : extension}`;
+    }
+    if (["mp4", "webm", "mov", "avi"].includes(extension)) {
+      return `video/${extension === "mov" ? "quicktime" : extension}`;
+    }
+  }
+  return "application/octet-stream";
+}
+function seedInferredResource(resourceId, resourceIndex) {
+  if (resourceIndex.has(resourceId)) return;
+  const filename = resourceId.split("/").pop() || "file";
+  resourceIndex.set(resourceId, {
+    name: filename,
+    type: inferMimeFromResourceId(resourceId),
+    size: 0,
+    uploadedAt: /* @__PURE__ */ new Date(),
+    file: void 0,
+    inferredFromExtension: true
+  });
+}
+function addPrefillFilesToIndex(initialFiles, resourceIndex) {
+  for (const resourceId of initialFiles) {
+    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) {
+  const existing = container.closest(".space-y-2")?.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;
+  container.closest(".space-y-2")?.appendChild(errorEl);
+}
+function clearFileError(container) {
+  const existing = container.closest(".space-y-2")?.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) {
+  let el = container.parentElement;
+  while (el && !el.dataset.filesWrapper) {
+    el = el.parentElement;
+  }
+  return el?.querySelector('input[type="file"]') ?? 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) => {
+    e.preventDefault();
+    element.classList.remove("border-blue-500", "bg-blue-50");
+    if (e.dataTransfer?.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?.file
+  );
+}
+function canOpenInTab(state, meta) {
+  return Boolean(
+    state.config.getDownloadUrl || state.config.getThumbnail || 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?.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?.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) => {
@@ -2119,23 +2871,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>
@@ -2145,20 +2901,14 @@ 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) => {
       e.stopPropagation();
-      if (deps?.picker) {
-        deps.picker.click();
-      }
+      deps?.picker?.click();
     };
   }
-  const deleteBtn = container.querySelector(
-    ".delete-file-btn"
-  );
+  const deleteBtn = container.querySelector(".delete-file-btn");
   if (deleteBtn) {
     deleteBtn.onclick = (e) => {
       e.stopPropagation();
@@ -2177,9 +2927,6 @@ function handleVideoDelete(container, resourceId, state, deps) {
   if (deps?.fileUploadHandler) {
     container.onclick = deps.fileUploadHandler;
   }
-  if (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">
@@ -2188,16 +2935,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?.setupDrop) {
+    deps.setupDrop(container);
+  }
 }
 function renderDeleteButton(container, resourceId, state) {
   addDeleteButton(container, state, () => {
@@ -2219,13 +2959,11 @@ 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/")) {
+  if (!meta.file || !(meta.file instanceof File)) return;
+  if (meta.type?.startsWith("image/")) {
     renderLocalImagePreview(container, meta.file, fileName, state);
-  } else if (meta.type && meta.type.startsWith("video/")) {
-    const newContainer = renderLocalVideoPreview(
+  } else if (meta.type?.startsWith("video/")) {
+    container = renderLocalVideoPreview(
       container,
       meta.file,
       meta.type,
@@ -2233,14 +2971,23 @@ 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 && !meta.type?.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) {
   if (!state.config.getThumbnail) {
     setEmptyFileContainer(container, state);
@@ -2250,11 +2997,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 (meta?.type?.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);
@@ -2282,9 +3030,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(
@@ -2297,366 +3042,304 @@ 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 = meta?.type?.startsWith("video/");
     if (!isReadonly && !isVideo) {
       renderDeleteButton(container, resourceId, state);
     }
   }
 }
-async function renderFilePreviewReadonly(resourceId, state, fileName) {
+function resolveFileName(resourceId, meta, fileName) {
+  if (fileName) return fileName;
+  if (meta?.name?.includes(".")) return meta.name;
+  const basename = resourceId.includes("/") ? resourceId.split("/").pop() : resourceId;
+  return basename?.includes(".") ? basename : "";
+}
+async function renderFilePreviewReadonly(resourceId, state, fileName, options = {}) {
   const meta = state.resourceIndex.get(resourceId);
-  const actualFileName = 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 && (meta?.type?.startsWith("image/") || actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/));
-  const isVideo = meta?.type?.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 = meta?.type?.startsWith("image/") || Boolean(actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/));
+  const isVideo = meta?.type?.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?.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>`;
-    }
-  }
-  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;
-}
-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;
+    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;
         }
-        const fileInput = filesWrapper?.querySelector(
-          'input[type="file"]'
-        );
-        if (fileInput) fileInput.click();
-      };
-      gridContainer2.appendChild(slot);
+      } catch {
+      }
     }
-    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 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 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?.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);
+  return tile;
 }
-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) {
+  const meta = state.resourceIndex.get(resourceId);
+  const fileName = meta?.name ?? resourceId.split("/").pop() ?? "";
+  const removeHandler = deps.onRemove ?? 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) {
-  if (meta && meta.type?.startsWith("image/")) {
+async function fillTileContent(tile, rid, meta, state, actionsEl) {
+  if (meta?.type?.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) => {
         img.src = e.target?.result || "";
+        attachZoomHover(tile, img.src, meta.name, 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);
         } 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 && meta.type?.startsWith("video/")) {
+    if (actionsEl) tile.appendChild(actionsEl);
+  } else if (meta?.type?.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?.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?.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?.name || "File")}</div>
-    </div>`;
+    const name = meta?.name ?? "";
+    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>
-  `;
-}
-function showFileError(container, message) {
-  const existing = container.closest(".space-y-2")?.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;
-  container.closest(".space-y-2")?.appendChild(errorEl);
+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 clearFileError(container) {
-  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
-  if (existing) existing.remove();
+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}`);
+  }
 }
-async function handleFileSelect(file, container, fieldName, state, deps = null, instance, allowedExtensions = [], maxSizeMB = Infinity) {
+
+// 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(opts) {
+  const {
+    file,
+    container,
+    fieldName,
+    state,
+    deps = null,
+    instance = null,
+    allowedExtensions = [],
+    allowedMimes = [],
+    maxSizeMB = Infinity
+  } = opts;
   if (!isFileExtensionAllowed(file.name, allowedExtensions)) {
     const formats = allowedExtensions.join(", ");
     showFileError(
@@ -2665,6 +3348,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,
@@ -2673,24 +3364,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,
@@ -2698,7 +3383,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 = container.parentElement?.querySelector(
     'input[type="hidden"]'
@@ -2710,682 +3394,992 @@ async function handleFileSelect(file, container, fieldName, state, deps = null,
     container.parentElement?.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) => {
-    e.preventDefault();
-    element.classList.remove("border-blue-500", "bg-blue-50");
-    if (e.dataTransfer?.files) {
-      dropHandler(e.dataTransfer.files);
-    }
-  });
-}
-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);
-}
-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()"
+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 })
     );
   }
-}
-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 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}`);
+  if (skippedByCount > 0) {
+    errorParts.push(
+      t("filesLimitExceeded", state, {
+        skipped: skippedByCount,
+        max: constraints.maxCount
+      })
+    );
   }
-}
-function addPrefillFilesToIndex(initialFiles, state) {
-  if (initialFiles.length > 0) {
-    initialFiles.forEach((resourceId) => {
-      if (!state.resourceIndex.has(resourceId)) {
-        const filename = resourceId.split("/").pop() || "file";
-        const extension = filename.split(".").pop()?.toLowerCase();
-        let fileType = "application/octet-stream";
-        if (extension) {
-          if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-            fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-          } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-            fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-          }
+  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);
         }
-        state.resourceIndex.set(resourceId, {
-          name: filename,
-          type: fileType,
-          size: 0,
+      }
+      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 handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps) {
-  if (!state.resourceIndex.has(initial)) {
-    const filename = initial.split("/").pop() || "file";
-    const extension = filename.split(".").pop()?.toLowerCase();
-    let fileType = "application/octet-stream";
-    if (extension) {
-      if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-        fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-      } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-        fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-      }
-    }
-    state.resourceIndex.set(initial, {
-      name: filename,
-      type: fileType,
-      size: 0,
-      uploadedAt: /* @__PURE__ */ new Date(),
-      file: void 0
-    });
-  }
-  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) {
+function setupFilesDropHandler(filesContainer, resourceIds, 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 { accepted, errorMessage } = filterAndSlice(
+      Array.from(files),
+      resourceIds.length,
+      constraints,
+      state
     );
-    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 "));
+    if (errorMessage) {
+      showFileError(filesContainer, errorMessage);
     } 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);
-    }
+    const list = filesContainer.querySelector(".files-list") ?? filesContainer;
+    await uploadBatch(accepted, resourceIds, list, state);
     updateCallback();
     if (instance && pathKey && !state.config.readonly) {
-      instance.triggerOnChange(pathKey, initialFiles);
+      instance.triggerOnChange(pathKey, resourceIds);
     }
   });
 }
-function setupFilesPickerHandler(filesPicker, initialFiles, state, updateCallback, constraints, pathKey, instance) {
+function setupFilesPickerHandler(filesPicker, resourceIds, 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)
-      );
-      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
-          })
-        );
-      }
-      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);
-      }
+    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?.querySelector(".files-list");
+    await uploadBatch(accepted, resourceIds, listEl ?? null, state);
     updateCallback();
     filesPicker.value = "";
     if (instance && pathKey && !state.config.readonly) {
-      instance.triggerOnChange(pathKey, initialFiles);
+      instance.triggerOnChange(pathKey, resourceIds);
     }
   };
 }
-function renderFileElement(element, ctx, wrapper, pathKey) {
-  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);
-      });
+
+// src/components/file/library.ts
+function buildAcceptContext(element) {
+  if (!element.accept) return void 0;
+  if (typeof element.accept === "string") {
+    const exts2 = getAllowedExtensions(element.accept);
+    return exts2.length > 0 ? { extensions: exts2 } : void 0;
+  }
+  const exts = element.accept.extensions ?? [];
+  const mime = element.accept.mime ?? [];
+  const normalizedExts = exts.map((e) => e.toLowerCase());
+  if (normalizedExts.length === 0 && mime.length === 0) return void 0;
+  const result = {};
+  if (normalizedExts.length > 0) result.extensions = normalizedExts;
+  if (mime.length > 0) result.mime = mime;
+  return result;
+}
+function validatePickedResource(resource, allowedExtensions, allowedMimes, maxSizeMB, state) {
+  if (!isFileExtensionAllowed(resource.name, allowedExtensions)) {
+    const formats = allowedExtensions.join(", ");
+    return t("invalidFileExtension", state, { name: resource.name, formats });
+  }
+  if (!isMimeAllowed(resource.type, allowedMimes)) {
+    const mimes = allowedMimes.join(", ");
+    return t("invalidFileMime", state, { name: resource.name, type: resource.type, mimes });
+  }
+  if (!isSizeWithinLimit(resource.size, maxSizeMB)) {
+    return t("fileTooLarge", state, { name: resource.name, maxSize: maxSizeMB });
+  }
+  return null;
+}
+function readCurrentResourceIds(wrapper) {
+  const raw = wrapper.dataset.resourceIds;
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+function registerPickedResource(resource, state) {
+  const existing = state.resourceIndex.get(resource.resourceId);
+  state.resourceIndex.set(resource.resourceId, {
+    name: resource.name,
+    type: resource.type,
+    size: resource.size,
+    uploadedAt: existing?.uploadedAt ?? /* @__PURE__ */ new Date(),
+    file: existing?.file
+  });
+}
+function extractPickerError(error, state) {
+  if (error instanceof Error && error.message) return error.message;
+  return t("pickerError", state);
+}
+async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resourceIds, maxCount, updateCallback, instance) {
+  if (!state.config.pickExistingFiles) return;
+  const allowedExtensions = getAllowedExtensions(element.accept);
+  const allowedMimes = getAllowedMimes(element.accept);
+  const maxSizeMB = element.maxSize ?? Infinity;
+  const currentIds = readCurrentResourceIds(wrapper);
+  const remaining = maxCount === Infinity ? Infinity : Math.max(0, maxCount - currentIds.length);
+  let picked;
+  try {
+    picked = await state.config.pickExistingFiles({
+      fieldPath,
+      mode: "multiple",
+      accept: buildAcceptContext(element),
+      maxSizeMB: maxSizeMB === Infinity ? void 0 : maxSizeMB,
+      remainingSlots: remaining === Infinity ? void 0 : remaining,
+      selectedResourceIds: [...currentIds]
+    });
+  } catch (error) {
+    showFileError(wrapper, extractPickerError(error, state));
+    return;
+  }
+  if (picked.length === 0) return;
+  const existingSet = new Set(currentIds);
+  const seen = /* @__PURE__ */ new Set();
+  const deduped = picked.filter((r) => {
+    if (existingSet.has(r.resourceId)) return false;
+    if (seen.has(r.resourceId)) return false;
+    seen.add(r.resourceId);
+    return true;
+  });
+  const validItems = deduped.filter((r) => {
+    const err = validatePickedResource(r, allowedExtensions, allowedMimes, maxSizeMB, state);
+    return err === null;
+  });
+  const freshRemaining = maxCount === Infinity ? validItems.length : Math.max(0, maxCount - resourceIds.length);
+  const accepted = validItems.slice(0, freshRemaining);
+  const skipped = validItems.length - accepted.length;
+  if (accepted.length === 0) return;
+  clearFileError(wrapper);
+  if (skipped > 0) {
+    showFileError(
+      wrapper,
+      t("filesLimitExceeded", state, { skipped, max: maxCount })
+    );
+  }
+  for (const resource of accepted) {
+    registerPickedResource(resource, state);
+    resourceIds.push(resource.resourceId);
+  }
+  wrapper.dataset.resourceIds = JSON.stringify(resourceIds);
+  updateCallback();
+  if (!state.config.readonly) {
+    instance.triggerOnChange(fieldPath, resourceIds);
+  }
+}
+async function handleLibraryPickSingle(state, element, container, fileWrapper, pathKey, fieldPath, renderCallback, instance) {
+  if (!state.config.pickExistingFiles) return;
+  const allowedExtensions = getAllowedExtensions(element.accept);
+  const allowedMimes = getAllowedMimes(element.accept);
+  const maxSizeMB = element.maxSize ?? Infinity;
+  let picked;
+  try {
+    picked = await state.config.pickExistingFiles({
+      fieldPath,
+      mode: "single",
+      accept: buildAcceptContext(element),
+      maxSizeMB: maxSizeMB === Infinity ? void 0 : maxSizeMB,
+      selectedResourceIds: []
+    });
+  } catch (error) {
+    showFileError(container, extractPickerError(error, state));
+    return;
+  }
+  if (picked.length === 0) return;
+  const first = picked[0];
+  const validationError = validatePickedResource(first, allowedExtensions, allowedMimes, maxSizeMB, state);
+  if (validationError !== null) {
+    showFileError(container, validationError);
+    return;
+  }
+  clearFileError(container);
+  registerPickedResource(first, state);
+  let hiddenInput = fileWrapper.querySelector('input[type="hidden"]');
+  if (!hiddenInput) {
+    hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = pathKey;
+    fileWrapper.appendChild(hiddenInput);
+  }
+  hiddenInput.value = first.resourceId;
+  await renderCallback(first.resourceId);
+  if (!state.config.readonly) {
+    instance.triggerOnChange(fieldPath, first.resourceId);
+  }
+}
+
+// src/components/file/render-edit.ts
+function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps) {
+  seedInferredResource(initial, state.resourceIndex);
+  const meta = state.resourceIndex.get(initial);
+  const isVideo = meta?.type?.startsWith("video/");
+  if (isVideo) {
+    renderFilePreview(fileContainer, initial, state, {
+      fileName: initial,
+      isReadonly: false,
+      deps
+    }).catch(console.error);
+  } else {
+    renderSingleFileEditTile(fileContainer, initial, state, deps).catch(console.error);
+  }
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = pathKey;
+  hiddenInput.value = initial;
+  fileWrapper.appendChild(hiddenInput);
+}
+var UPLOAD_SVG = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;color:var(--fb-file-upload-text-color,#9ca3af);">
+  <path d="M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
+</svg>`;
+function buildEmptyDropzone(state, primaryText, subHint, openPicker) {
+  const dropzone = document.createElement("div");
+  dropzone.className = "fb-file-dropzone";
+  dropzone.innerHTML = `
+    ${UPLOAD_SVG}
+    <div class="fb-dropzone-primary-text">${escapeHtml(primaryText)}</div>
+    ${subHint ? `<div class="fb-dropzone-hint-text">${escapeHtml(subHint)}</div>` : ""}
+  `;
+  dropzone.onclick = openPicker;
+  return dropzone;
+}
+function buildLibraryButton(variant, state, onClick) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = variant === "card" ? "fb-file-library-card" : "fb-tile fb-tile-add-library";
+  if (variant === "card") {
+    btn.innerHTML = `
+      <span class="fb-file-library-card-icon" aria-hidden="true">\u{1F4DA}</span>
+      <span class="fb-file-library-card-label">${escapeHtml(t("fromLibrary", state))}</span>
+      <span class="fb-file-library-card-hint">${escapeHtml(t("libraryHint", state))}</span>
+    `;
+  } else {
+    btn.innerHTML = `<span aria-hidden="true">\u{1F4DA}</span>`;
+    btn.title = t("fromLibrary", state);
+    btn.setAttribute("aria-label", t("fromLibrary", state));
+  }
+  btn.addEventListener("click", onClick);
+  return btn;
+}
+function renderResourcePills(opts) {
+  const {
+    container,
+    rids,
+    state,
+    onRemove,
+    hint,
+    countInfo,
+    maxCount,
+    isReadonly = false,
+    onLibraryPick
+  } = opts;
+  ensureFileStyles();
+  const wrapper = container.closest("[data-files-wrapper]");
+  if (wrapper) {
+    wrapper.dataset.resourceIds = JSON.stringify(rids ?? []);
+  }
+  while (container.firstChild) container.removeChild(container.firstChild);
+  const ridList = rids ?? [];
+  const atMax = maxCount !== void 0 && ridList.length >= maxCount;
+  const hasLibrary = !isReadonly && typeof onLibraryPick === "function";
+  const buildSubHint = () => {
+    const parts = [];
+    if (hint) parts.push(hint);
+    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 libraryBtn = buildLibraryButton("card", state, onLibraryPick);
+      row.appendChild(dropzone);
+      row.appendChild(libraryBtn);
+      container.appendChild(row);
     } 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);
+      const dropzone = buildEmptyDropzone(
+        state,
+        t("clickDragTextMultiple", state),
+        buildSubHint(),
+        openPicker
+      );
+      container.appendChild(dropzone);
     }
-  } 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 : element.accept.extensions?.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 = element.maxSize ?? Infinity;
-    const fileUploadHandler = () => picker.click();
-    const dragHandler = (files) => {
+    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: meta?.name ?? ""
+    });
+    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 renderFileElementEdit(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  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 : [
+      ...element.accept.extensions?.map((ext) => `.${ext}`) ?? [],
+      ...element.accept.mime ?? []
+    ].join(",") || "";
+  }
+  const fileContainer = document.createElement("div");
+  fileContainer.className = "file-preview-container";
+  const initial = ctx.prefill[element.key];
+  const allowedExts = getAllowedExtensions(element.accept);
+  const allowedMimes = getAllowedMimes(element.accept);
+  const maxSizeMB = element.maxSize ?? Infinity;
+  const handlers = {
+    fileUploadHandler() {
+      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() {
+      const hiddenInput = fileWrapper.querySelector('input[type="hidden"]');
+      const currentRid = hiddenInput?.value;
+      if (currentRid) {
+        releaseLocalFileUrl(state.resourceIndex.get(currentRid)?.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) {
-  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 (prefillMeta?.type?.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 : element.accept.extensions?.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: element.maxSize ?? 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) {
+  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 : [
+      ...element.accept.extensions?.map((ext) => `.${ext}`) ?? [],
+      ...element.accept.mime ?? []
+    ].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: element.maxSize ?? 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) => {
+        releaseLocalFileUrl(state.resourceIndex.get(ridToRemove)?.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) {
+function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const minFiles = element.minCount ?? 0;
   const maxFiles = element.maxCount ?? 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 : element.accept.extensions?.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: element.maxSize ?? 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 : [
+      ...element.accept.extensions?.map((ext) => `.${ext}`) ?? [],
+      ...element.accept.mime ?? []
+    ].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: element.maxSize ?? 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) => {
+        releaseLocalFileUrl(state.resourceIndex.get(index)?.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.`
+    );
+  }
+  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}`
     );
-    updateFilesDisplay();
-    wrapper.appendChild(filesWrapper);
   }
+  return parsed;
 }
-function validateFileElement(element, key, context) {
-  const errors = [];
-  const { scopeRoot, skipValidation, path } = context;
-  const isMultipleField = element.type === "files" || "multiple" in element && Boolean(element.multiple);
-  const validateFileCount = (key2, resourceIds, element2) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const minFiles = "minCount" in element2 ? element2.minCount ?? 0 : 0;
-    const maxFiles = "maxCount" in element2 ? element2.maxCount ?? 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) {
+  const minFiles = "minCount" in element ? element.minCount ?? 0 : 0;
+  const maxFiles = "maxCount" in element ? element.maxCount ?? 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) {
+  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 = meta?.name ?? rid;
+    if (allowedExtensions.length > 0 && !isFileExtensionAllowed(fileName, allowedExtensions)) {
+      errors.push(
+        `${key}: ${t("invalidFileExtension", state, { name: fileName, formats })}`
+      );
+      continue;
     }
-  };
-  const validateFileExtensions = (key2, resourceIds, element2) => {
-    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 = meta?.name ?? rid;
-      if (!isFileExtensionAllowed(fileName, allowedExtensions)) {
+    if (allowedMimes.length > 0 && !meta?.inferredFromExtension) {
+      const mimeType = meta?.type ?? "";
+      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) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const maxSizeMB = "maxSize" in element2 ? element2.maxSize ?? 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) {
+  const maxSizeMB = "maxSize" in element ? element.maxSize ?? 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) {
+  const { scopeRoot, skipValidation, state } = context;
+  const errors = [];
+  const input = scopeRoot.querySelector(
+    `input[name$="${key}"][type="hidden"]`
+  );
+  const rid = input?.value ?? "";
+  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?.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 = input?.value ?? "";
-    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) {
   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}`
@@ -3394,30 +4388,19 @@ function updateFileField(element, fieldPath, value, context) {
     }
     value.forEach((resourceId) => {
       if (resourceId && typeof resourceId === "string") {
-        if (!state.resourceIndex.has(resourceId)) {
-          const filename = resourceId.split("/").pop() || "file";
-          const extension = filename.split(".").pop()?.toLowerCase();
-          let fileType = "application/octet-stream";
-          if (extension) {
-            if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-              fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-            } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-              fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-            }
-          }
-          state.resourceIndex.set(resourceId, {
-            name: filename,
-            type: fileType,
-            size: 0,
-            uploadedAt: /* @__PURE__ */ new Date(),
-            file: void 0
-          });
-        }
+        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"]`
@@ -3430,25 +4413,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 = filename.split(".").pop()?.toLowerCase();
-        let fileType = "application/octet-stream";
-        if (extension) {
-          if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-            fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-          } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-            fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-          }
-        }
-        state.resourceIndex.set(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.`
       );
@@ -8098,6 +9063,7 @@ var defaultConfig = {
   enableFilePreview: true,
   maxPreviewSize: "200px",
   readonly: false,
+  pickExistingFiles: null,
   parseTableFile: null,
   locale: "en",
   translations: {
@@ -8109,6 +9075,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",
@@ -8130,6 +9098,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",
@@ -8145,6 +9119,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}",
@@ -8171,6 +9146,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",
@@ -8192,6 +9169,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",
@@ -8207,6 +9190,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}",