@dmitryvim/form-builder 0.2.29 → 0.2.32

package/dist/esm/index.js

@@ -46,8 +46,9 @@ function addRangeHint(element, parts, state) {
   }
 }
 function addFileSizeHint(element, parts, state) {
-  if (element.maxSizeMB) {
-    parts.push(t("hintMaxSize", state, { size: element.maxSizeMB }));
+  const sizeMB = element.maxSize ?? element.maxSizeMB;
+  if (sizeMB && sizeMB !== Infinity) {
+    parts.push(t("hintMaxSize", state, { size: sizeMB }));
   }
 }
 function addFormatHint(element, parts, state) {
@@ -120,6 +121,25 @@ function validateSchema(schema) {
       });
     }
   }
+  function validateContainerProps(element, elementPath, errors2) {
+    if ("columns" in element && element.columns !== void 0) {
+      const columns = element.columns;
+      const validColumns = [1, 2, 3, 4];
+      if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
+        errors2.push(
+          `${elementPath}: columns must be 1, 2, 3, or 4 (got ${columns})`
+        );
+      }
+    }
+    if ("displayMode" in element && element.displayMode !== void 0) {
+      const displayMode = element.displayMode;
+      if (displayMode !== "stack" && displayMode !== "slides") {
+        errors2.push(
+          `${elementPath}: displayMode must be "stack" or "slides" (got ${JSON.stringify(displayMode)})`
+        );
+      }
+    }
+  }
   function checkFlatOutputCollisions(elements, scopePath) {
     const allOutputKeys = /* @__PURE__ */ new Set();
     for (const el of elements) {
@@ -153,12 +173,14 @@ function validateSchema(schema) {
         allOutputKeys.add(textKey);
         allOutputKeys.add(filesKey);
       } else {
-        if (allOutputKeys.has(el.key)) {
-          errors.push(
-            `${scopePath}: Element key "${el.key}" collides with a flatOutput richinput key`
-          );
+        if (el.key) {
+          if (allOutputKeys.has(el.key)) {
+            errors.push(
+              `${scopePath}: Element key "${el.key}" collides with a flatOutput richinput key`
+            );
+          }
+          allOutputKeys.add(el.key);
         }
-        allOutputKeys.add(el.key);
       }
     }
   }
@@ -168,9 +190,17 @@ function validateSchema(schema) {
       if (!element.type) {
         errors.push(`${elementPath}: missing type`);
       }
-      if (!element.key) {
+      if (!element.key && element.type !== "markdown") {
         errors.push(`${elementPath}: missing key`);
       }
+      if (element.type === "markdown") {
+        const content = element.content;
+        if (typeof content !== "string") {
+          errors.push(
+            `${elementPath}: markdown element requires "content" to be a string (got ${content === null ? "null" : typeof content})`
+          );
+        }
+      }
       if (element.enableIf) {
         const enableIf = element.enableIf;
         if (!enableIf.key || typeof enableIf.key !== "string") {
@@ -189,15 +219,7 @@ function validateSchema(schema) {
         validateElements(element.elements, `${elementPath}.elements`);
       }
       if (element.type === "container" && element.elements) {
-        if ("columns" in element && element.columns !== void 0) {
-          const columns = element.columns;
-          const validColumns = [1, 2, 3, 4];
-          if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
-            errors.push(
-              `${elementPath}: columns must be 1, 2, 3, or 4 (got ${columns})`
-            );
-          }
-        }
+        validateContainerProps(element, elementPath, errors);
         if ("prefillHints" in element && element.prefillHints) {
           const prefillHints = element.prefillHints;
           if (Array.isArray(prefillHints)) {
@@ -263,6 +285,18 @@ function escapeHtml(text) {
   div.textContent = text;
   return div.innerHTML;
 }
+function getElementLookupKey(element, state) {
+  if (element.key) {
+    return element.key;
+  }
+  const cached = state.syntheticElementIds.get(element);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const id = `fb-synthetic-${state.syntheticElementIdCounter++}`;
+  state.syntheticElementIds.set(element, id);
+  return id;
+}
 function pathJoin(base, key) {
   return base ? `${base}.${key}` : key;
 }
@@ -818,8 +852,12 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
   const textareaWrapper = document.createElement("div");
   textareaWrapper.style.cssText = "position: relative;";
   const textareaInput = document.createElement("textarea");
-  textareaInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
-  textareaInput.style.cssText = "padding-bottom: 24px;";
+  textareaInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
+  textareaInput.style.cssText = `
+    padding: var(--fb-input-padding-y) var(--fb-input-padding-x) 24px var(--fb-input-padding-x);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+  `;
   textareaInput.name = pathKey;
   textareaInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
   textareaInput.rows = element.rows || 4;
@@ -871,8 +909,12 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     const textareaContainer = document.createElement("div");
     textareaContainer.style.cssText = "position: relative;";
     const textareaInput = document.createElement("textarea");
-    textareaInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
-    textareaInput.style.cssText = "padding-bottom: 24px;";
+    textareaInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
+    textareaInput.style.cssText = `
+      padding: var(--fb-input-padding-y) var(--fb-input-padding-x) 24px var(--fb-input-padding-x);
+      font-size: var(--fb-font-size);
+      font-family: var(--fb-font-family);
+    `;
     textareaInput.placeholder = element.placeholder || t("placeholderText", state);
     textareaInput.rows = element.rows || 4;
     textareaInput.value = value;
@@ -1058,8 +1100,14 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   inputWrapper.style.cssText = "position: relative;";
   const numberInput = document.createElement("input");
   numberInput.type = "number";
-  numberInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
-  numberInput.style.cssText = "padding-right: 60px; width: 100%; box-sizing: border-box;";
+  numberInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+  numberInput.style.cssText = `
+    padding: var(--fb-input-padding-y) 60px var(--fb-input-padding-y) var(--fb-input-padding-x);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+    width: 100%;
+    box-sizing: border-box;
+  `;
   numberInput.name = pathKey;
   numberInput.placeholder = element.placeholder || "0";
   if (element.min !== void 0) numberInput.min = element.min.toString();
@@ -1111,8 +1159,14 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     inputContainer.style.cssText = "position: relative; flex: 1;";
     const numberInput = document.createElement("input");
     numberInput.type = "number";
-    numberInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
-    numberInput.style.cssText = "padding-right: 60px; width: 100%; box-sizing: border-box;";
+    numberInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    numberInput.style.cssText = `
+      padding: var(--fb-input-padding-y) 60px var(--fb-input-padding-y) var(--fb-input-padding-x);
+      font-size: var(--fb-font-size);
+      font-family: var(--fb-font-family);
+      width: 100%;
+      box-sizing: border-box;
+    `;
     numberInput.placeholder = element.placeholder || "0";
     if (element.min !== void 0) numberInput.min = element.min.toString();
     if (element.max !== void 0) numberInput.max = element.max.toString();
@@ -1383,7 +1437,12 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
   const selectInput = document.createElement("select");
-  selectInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+  selectInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+  selectInput.style.cssText = `
+    padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+  `;
   selectInput.name = pathKey;
   selectInput.disabled = readonly;
   (element.options || []).forEach((option) => {
@@ -1435,7 +1494,12 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-select-item flex items-center gap-2";
     const selectInput = document.createElement("select");
-    selectInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    selectInput.className = "flex-1 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    selectInput.style.cssText = `
+      padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+      font-size: var(--fb-font-size);
+      font-family: var(--fb-font-family);
+    `;
     selectInput.disabled = readonly;
     (element.options || []).forEach((option) => {
       const optionElement = document.createElement("option");
@@ -2170,7 +2234,13 @@ function ensureFileStyles() {
   style.textContent = `
 @keyframes fb-spin { to { transform: rotate(360deg); } }
 
-/* Spinner used during single-file and multi-file upload */
+/* \u2500\u2500\u2500 Checker background utility \u2500\u2500\u2500 */
+/* Neutral diagonal-stripe background for image previews (never crops) */
+.fb-checker {
+  background-image: repeating-linear-gradient(45deg, #fafafa 0 6px, #f3f4f6 6px 12px);
+}
+
+/* \u2500\u2500\u2500 Spinner \u2500\u2500\u2500 */
 .fb-spinner {
   width: 36px;
   height: 36px;
@@ -2181,207 +2251,271 @@ function ensureFileStyles() {
   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;
+/* \u2500\u2500\u2500 Wide single-file add tile (empty state) \u2500\u2500\u2500 */
+.fb-wide-tile {
+  width: 100%;
+  border-radius: 0.75rem;
+  border: 1px dashed #60a5fa;
+  background: rgba(239,246,255,0.5);
+  display: flex;
   overflow: hidden;
-  border-radius: var(--fb-border-radius, 0.5rem);
-  background: var(--fb-file-upload-bg-color, #f3f4f6);
+  height: 180px;
+  transition: border-color 150ms, background 150ms, box-shadow 150ms;
+  cursor: pointer;
 }
-
-/* Uploaded resource tile \u2014 adds a visible border */
-.fb-tile-resource {
-  border: 1px solid var(--fb-file-upload-border-color, #d1d5db);
+.fb-wide-tile:hover {
+  background: #eff6ff;
 }
-
-/* Uploading placeholder tile \u2014 dashed border, uploading indicator */
-.fb-tile-uploading {
-  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+.fb-wide-tile.fb-drag-over {
+  border-color: #3b82f6;
+  border-width: 2px;
+  background: #eff6ff;
+  box-shadow: 0 0 0 4px rgba(191,219,254,0.7);
 }
 
-/* "+" add-more tile */
-.fb-tile-add {
-  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+/* Upload zone inside wide tile */
+.fb-wide-tile-upload {
+  flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 8px;
+  color: #2563eb;
+  padding: 16px;
+  transition: background 150ms;
   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);
+  background: transparent;
+  border: none;
+  font-family: inherit;
 }
-.fb-tile-add:hover {
-  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
-  color: var(--fb-text-color, #1f2937);
+.fb-wide-tile-upload:hover {
+  background: rgba(191,219,254,0.25);
 }
 
-/* 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;
+/* Vertical dashed divider between upload and library zones */
+.fb-wide-tile-divider {
+  width: 1px;
+  margin: 16px 0;
+  border-left: 1px dashed rgba(96,165,250,0.5);
+  background: transparent;
+  flex-shrink: 0;
 }
 
-/* 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);
+/* Library zone inside wide tile */
+.fb-wide-tile-library {
+  width: 176px;
+  flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 8px;
+  color: #2563eb;
+  padding: 12px;
+  transition: background 150ms;
   cursor: pointer;
-  transition:
-    border-color var(--fb-transition-duration, 200ms),
-    background var(--fb-transition-duration, 200ms);
+  background: transparent;
+  border: none;
+  font-family: inherit;
 }
-.fb-file-dropzone:hover {
-  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
-  background: var(--fb-background-hover-color, #f9fafb);
+.fb-wide-tile-library:hover {
+  background: rgba(191,219,254,0.25);
 }
 
-/* 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;
+/* \u2500\u2500\u2500 Multi-file outer grid container \u2500\u2500\u2500 */
+.fb-multi-outer {
+  border-radius: 0.75rem;
+  border: 1px dashed #cbd5e1;
+  background: rgba(248,250,252,0.4);
+  padding: 12px;
+  transition: border-color 150ms, background 150ms, box-shadow 150ms;
+}
+.fb-multi-outer.fb-drag-over {
+  border-width: 2px;
+  border-color: #3b82f6;
+  background: rgba(239,246,255,0.4);
+  box-shadow: 0 0 0 4px rgba(191,219,254,0.7);
 }
-.fb-tile-uploading-text {
-  font-size: 8px;
-  color: var(--fb-file-upload-text-color, #9ca3af);
+
+/* With files present: white solid border */
+.fb-multi-outer.fb-multi-has-files {
+  border-style: solid;
+  border-color: #e2e8f0;
+  background: #fff;
 }
-.fb-tile-hint {
-  font-size: 11px;
-  color: var(--fb-file-upload-text-color, #9ca3af);
-  margin-top: 4px;
+
+/* The CSS grid inside */
+.fb-multi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 10px;
 }
-.fb-tile-empty-text {
-  font-size: 12px;
-  color: var(--fb-text-secondary-color, #6b7280);
-  padding: 4px 0;
+
+/* \u2500\u2500\u2500 Multi square add-tile (combined upload + library) \u2500\u2500\u2500 */
+.fb-multi-add-tile {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 1px dashed #60a5fa;
+  background: rgba(239,246,255,0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: background 150ms;
 }
-.fb-dropzone-primary-text {
-  font-size: 13px;
-  color: var(--fb-text-secondary-color, #6b7280);
+.fb-multi-add-tile:hover {
+  background: #eff6ff;
 }
-.fb-dropzone-hint-text {
-  font-size: 11px;
-  color: var(--fb-file-upload-text-color, #9ca3af);
+.fb-multi-add-tile.fb-drag-over-tile {
+  border-width: 2px;
+  border-color: #3b82f6;
+  background: rgba(255,255,255,0.8);
 }
 
-/* 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;
+/* Upload half of add-tile */
+.fb-multi-add-upload {
+  flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  opacity: 0;
-  transition: opacity var(--fb-transition-duration, 200ms);
+  gap: 4px;
+  color: #2563eb;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  width: 100%;
+  transition: background 150ms;
 }
-.fb-tile-resource:hover .fb-tile-x-btn {
-  opacity: 1;
+.fb-multi-add-upload:hover {
+  background: rgba(191,219,254,0.35);
 }
 
-/* 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));
+/* Horizontal dashed divider inside add-tile */
+.fb-multi-add-divider {
+  border-top: 1px dashed rgba(96,165,250,0.5);
+  margin: 0;
+  flex-shrink: 0;
 }
-.fb-play-btn {
-  background: var(--fb-file-bg-color, rgba(255,255,255,0.9));
-  border-radius: 50%;
+
+/* Library strip at bottom of add-tile */
+.fb-multi-add-library {
+  padding: 6px 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
+  color: #2563eb;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  width: 100%;
+  transition: background 150ms;
+  flex-shrink: 0;
+}
+.fb-multi-add-library:hover {
+  background: rgba(191,219,254,0.35);
 }
 
-/* Edit-mode local video preview wrapper */
-.fb-video-preview-wrap {
+/* \u2500\u2500\u2500 Capacity placeholder squares \u2500\u2500\u2500 */
+.fb-multi-placeholder {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
+}
+.fb-multi-placeholder.fb-drag-over {
+  border-width: 2px;
+  border-style: dashed;
+  border-color: #93c5fd;
+  background: rgba(219,234,254,0.6);
+}
+
+/* \u2500\u2500\u2500 Filled preview tile \u2500\u2500\u2500 */
+.fb-preview-tile {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
   position: relative;
+  cursor: pointer;
+}
+.fb-preview-tile img {
   width: 100%;
   height: 100%;
+  object-fit: contain;
+  display: block;
 }
 
-/* Hover overlay for edit-mode local video (Remove / Change buttons) */
-.fb-video-btn-overlay {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
+/* \u2500\u2500\u2500 Uploading placeholder tile \u2500\u2500\u2500 */
+.fb-uploading-tile {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 2px dashed #d1d5db;
   display: flex;
-  gap: 4px;
-  opacity: 0;
-  transition: opacity var(--fb-transition-duration, 200ms);
-  pointer-events: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px;
 }
-.fb-video-preview-wrap:hover .fb-video-btn-overlay {
-  opacity: 1;
-  pointer-events: auto;
+
+/* \u2500\u2500\u2500 Meta line below multi grid \u2500\u2500\u2500 */
+.fb-meta-line {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
 }
-.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-meta-text {
+  font-size: 12px;
+  color: #94a3b8;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
-.fb-video-btn-delete {
-  background: rgba(220, 38, 38, 0.85);
+.fb-meta-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #cbd5e1;
+  flex-shrink: 0;
 }
-.fb-video-btn-delete:hover {
-  background: rgba(185, 28, 28, 0.95);
+.fb-meta-mono {
+  font-family: ui-monospace, 'JetBrains Mono', monospace;
+  font-size: 11px;
+  letter-spacing: -0.02em;
 }
-.fb-video-btn-change {
-  background: rgba(31, 41, 55, 0.85);
+.fb-clear-all-btn {
+  font-size: 12px;
+  color: #94a3b8;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-family: inherit;
+  transition: color 150ms;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
-.fb-video-btn-change:hover {
-  background: rgba(17, 24, 39, 0.95);
+.fb-clear-all-btn:hover {
+  color: #dc2626;
+}
+
+/* \u2500\u2500\u2500 Empty text (readonly) \u2500\u2500\u2500 */
+.fb-tile-empty-text {
+  font-size: 11px;
+  color: var(--fb-text-secondary-color, #6b7280);
+  padding: 4px 0;
 }
 
-/* Tile action icon buttons (download / open / remove) \u2014 shown on tile hover */
+/* \u2500\u2500\u2500 Tile action buttons (for zoom popup, compat) \u2500\u2500\u2500 */
 .fb-tile-actions {
   position: absolute;
   top: 3px;
@@ -2393,37 +2527,35 @@ function ensureFileStyles() {
   transition: opacity var(--fb-transition-duration, 200ms);
   z-index: 10;
 }
-.fb-tile-resource:hover .fb-tile-actions {
+.fb-preview-tile:hover .fb-tile-actions {
   opacity: 1;
 }
 .fb-tile-action-btn {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: none;
-  border-radius: 50%;
+  border: 1px solid rgba(15,23,42,0.08);
+  border-radius: 0.375rem;
   cursor: pointer;
-  background: rgba(31, 41, 55, 0.75);
-  color: #fff;
+  background: rgba(255,255,255,0.92);
+  color: #374151;
   padding: 0;
   flex-shrink: 0;
-  transition:
-    background var(--fb-transition-duration, 200ms),
-    opacity var(--fb-transition-duration, 200ms);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+  transition: background var(--fb-transition-duration, 200ms),
+    color 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);
+  background: #ffffff;
+  color: #0f172a;
 }
 .fb-tile-action-remove:hover {
-  background: rgba(185, 28, 28, 0.95);
+  color: #dc2626;
 }
 
-/* Actions row inside zoom popup \u2014 always visible while popup is shown */
+/* Zoom popup action buttons always visible */
 .fb-tile-zoom-preview .fb-tile-actions {
   position: absolute;
   top: 6px;
@@ -2432,116 +2564,145 @@ function ensureFileStyles() {
   z-index: 10000;
 }
 
-/* Two-card empty-state layout (upload card + library card) */
-.fb-file-card-row {
-  display: flex;
-  gap: 8px;
-  align-items: stretch;
+/* \u2500\u2500\u2500 Hover zoom preview popup \u2500\u2500\u2500 */
+.fb-tile-zoom-preview {
+  position: fixed;
+  z-index: 9999;
+  background: var(--fb-background-color, #fff);
+  border: 1px solid #e2e8f0;
+  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-file-card-row .fb-file-dropzone,
-.fb-file-card-row .fb-file-library-card {
-  flex: 1;
-  min-width: 0;
+.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;
+  border-radius: calc(0.5rem - 2px);
 }
 
-/* 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);
+/* \u2500\u2500\u2500 Single-file uploading state \u2500\u2500\u2500 */
+.fb-single-uploading {
+  height: 180px;
+  border-radius: 0.75rem;
+  border: 1px dashed #60a5fa;
+  background: rgba(239,246,255,0.5);
   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%;
+  gap: 8px;
 }
-.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;
+
+/* \u2500\u2500\u2500 Video overlays \u2500\u2500\u2500 */
+.fb-video-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.25);
 }
-.fb-file-library-card-icon {
-  font-size: 24px;
-  line-height: 1;
-  flex-shrink: 0;
+.fb-play-btn {
+  background: rgba(255,255,255,0.9);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.fb-file-library-card-label {
-  font-size: 13px;
-  color: var(--fb-text-secondary-color, #6b7280);
+.fb-video-preview-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
-.fb-file-library-card-hint {
+.fb-video-btn-overlay {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 150ms;
+  pointer-events: none;
+}
+.fb-video-preview-wrap:hover .fb-video-btn-overlay {
+  opacity: 1;
+  pointer-events: auto;
+}
+.fb-video-btn {
+  border: none;
+  border-radius: 4px;
   font-size: 11px;
-  color: var(--fb-file-upload-text-color, #9ca3af);
+  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); }
 
-/* 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;
+/* \u2500\u2500\u2500 Readonly readonly tile \u2500\u2500\u2500 */
+.fb-readonly-tile {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
   overflow: hidden;
-  border-radius: var(--fb-border-radius, 0.5rem);
+  position: relative;
+  cursor: pointer;
 }
-.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;
+.fb-readonly-tile img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
 }
-
-/* 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;
+.fb-readonly-tile .fb-tile-actions {
   opacity: 0;
-  transition: opacity 150ms ease;
 }
-.fb-tile-zoom-preview.fb-tile-zoom-preview--visible {
+.fb-readonly-tile:hover .fb-tile-actions {
   opacity: 1;
 }
-.fb-tile-zoom-preview-img {
+
+/* \u2500\u2500\u2500 Readonly single-file filled \u2500\u2500\u2500 */
+.fb-single-readonly-filled {
+  position: relative;
+  border-radius: 0.75rem;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
+  height: 220px;
+  display: block;
+  cursor: pointer;
+}
+.fb-single-readonly-filled 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);
+}
+
+/* \u2500\u2500\u2500 Readonly multi grid \u2500\u2500\u2500 */
+.fb-multi-readonly-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 10px;
 }
 `;
   document.head.appendChild(style);
 }
 
 // src/components/file/dom.ts
-var TILE_SIZE = "160px";
 function createFileTile() {
   ensureFileStyles();
   const tile = document.createElement("div");
@@ -2549,7 +2710,7 @@ function createFileTile() {
   return tile;
 }
 function showFileError(container, message) {
-  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
+  const existing = container.closest("[data-files-wrapper]")?.querySelector(".file-error-message");
   if (existing) existing.remove();
   const errorEl = document.createElement("div");
   errorEl.className = "file-error-message error-message";
@@ -2559,10 +2720,10 @@ function showFileError(container, message) {
     margin-top: 0.25rem;
   `;
   errorEl.textContent = message;
-  container.closest(".space-y-2")?.appendChild(errorEl);
+  container.closest("[data-files-wrapper]")?.appendChild(errorEl);
 }
 function clearFileError(container) {
-  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
+  const existing = container.closest("[data-files-wrapper]")?.querySelector(".file-error-message");
   if (existing) existing.remove();
 }
 function addDeleteButton(container, state, onDelete) {
@@ -2580,13 +2741,6 @@ function addDeleteButton(container, state, 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();
@@ -2602,10 +2756,13 @@ function createUploadingTile(fileName, state) {
   return tile;
 }
 function ensureTilesWrap(list) {
+  const existingGrid = list.querySelector(".fb-multi-grid");
+  if (existingGrid) return existingGrid;
   const existing = list.querySelector(".fb-tiles-wrap");
   if (existing) return existing;
-  const dropzone = list.querySelector(".fb-file-dropzone");
-  if (dropzone) dropzone.remove();
+  list.querySelector(".fb-file-dropzone")?.remove();
+  list.querySelector(".fb-wide-tile")?.remove();
+  list.querySelector(".fb-multi-outer")?.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;";
@@ -2617,7 +2774,7 @@ function ensureTilesWrap(list) {
   return tilesWrap;
 }
 function setEmptyFileContainer(fileContainer, state, hint) {
-  const hintHtml = hint ? `<div class="text-xs text-gray-500 mt-1">${escapeHtml(hint)}</div>` : "";
+  const hintHtml = "";
   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">
@@ -2659,9 +2816,11 @@ function setupDragAndDrop(element, dropHandler) {
 }
 
 // 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>`;
+var ICON_DOWNLOAD = `<svg width="16" height="16" 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="16" height="16" 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="16" height="16" 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>`;
+var ICON_REPLACE = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 18a4 4 0 000-8 6 6 0 00-11.5 2A4 4 0 006 20h11M12 12v7M12 12l-3 3M12 12l3 3"/></svg>`;
+var ICON_LIBRARY = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h4v16H4z"/><path d="M10 4h4v16h-4z"/><path d="M16 5l3.5 1-3 14L13 19"/></svg>`;
 function canDownload(state, meta) {
   return Boolean(
     state.config.downloadFile || state.config.getDownloadUrl || state.config.getThumbnail || meta?.file
@@ -2673,7 +2832,16 @@ function canOpenInTab(state, meta) {
   );
 }
 function createTileActions(options) {
-  const { canRemove, removeHandler, state, resourceId, fileName, meta } = options;
+  const {
+    canRemove,
+    removeHandler,
+    state,
+    resourceId,
+    fileName,
+    meta,
+    replaceHandler,
+    libraryHandler
+  } = options;
   const group = document.createElement("div");
   group.className = "fb-tile-actions";
   const makeBtn = (icon, label, cls) => {
@@ -2688,6 +2856,16 @@ function createTileActions(options) {
     });
     return btn;
   };
+  if (replaceHandler) {
+    const replaceBtn = makeBtn(ICON_REPLACE, t("replaceFile", state), "fb-tile-action-replace");
+    replaceBtn.addEventListener("click", () => replaceHandler());
+    group.appendChild(replaceBtn);
+  }
+  if (libraryHandler) {
+    const libBtn = makeBtn(ICON_LIBRARY, t("fromLibrary", state), "fb-tile-action-library");
+    libBtn.addEventListener("click", () => libraryHandler());
+    group.appendChild(libBtn);
+  }
   if (canDownload(state, meta)) {
     const dlBtn = makeBtn(ICON_DOWNLOAD, t("downloadFile", state), "fb-tile-action-download");
     dlBtn.addEventListener("click", () => {
@@ -2873,8 +3051,7 @@ function attachClonedActionListeners(cloned, original) {
 }
 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.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
   img.alt = fileName || t("previewAlt", state);
   const reader = new FileReader();
   reader.onload = (e) => {
@@ -2896,7 +3073,7 @@ function renderLocalVideoPreview(container, file, videoType, resourceId, state,
   const newContainer = setupDragDropless(container);
   newContainer.innerHTML = `
     <div class="fb-video-preview-wrap">
-      <video class="w-full h-full object-contain" controls preload="auto" muted src="${videoUrl}">
+      <video style="width:100%;height:100%;object-fit:contain;" controls preload="auto" muted src="${videoUrl}">
         ${escapeHtml(t("videoNotSupported", state))}
       </video>
       <div class="fb-video-btn-overlay">
@@ -2940,11 +3117,11 @@ function handleVideoDelete(container, resourceId, state, deps) {
     container.onclick = deps.fileUploadHandler;
   }
   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">
+    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-text-secondary-color,#9ca3af);">
+      <svg style="width:1.5rem;height:1.5rem;margin-bottom:0.5rem;" 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>
+      <div style="font-size:0.875rem;text-align:center;">${escapeHtml(t("clickDragText", state))}</div>
     </div>
   `;
   if (deps?.setupDrop) {
@@ -2961,11 +3138,11 @@ function renderDeleteButton(container, resourceId, state) {
       hiddenInput.value = "";
     }
     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">
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-text-secondary-color,#9ca3af);">
+        <svg style="width:1.5rem;height:1.5rem;margin-bottom:0.5rem;" 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>
+        <div style="font-size:0.875rem;text-align:center;">${escapeHtml(t("clickDragText", state))}</div>
       </div>
     `;
   });
@@ -2984,7 +3161,7 @@ async function renderLocalFilePreview(container, meta, fileName, resourceId, isR
       deps
     );
   } else {
-    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>`;
+    container.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-text-secondary-color,#9ca3af);"><div style="font-size:36px;margin-bottom:0.5rem;">\u{1F4C1}</div><div style="font-size:0.875rem;">${escapeHtml(fileName)}</div></div>`;
   }
   if (!isReadonly && !meta.type?.startsWith("video/")) {
     renderDeleteButton(container, resourceId, state);
@@ -2992,7 +3169,7 @@ async function renderLocalFilePreview(container, meta, fileName, resourceId, isR
 }
 function renderUploadedVideoPreview(container, thumbnailUrl, state) {
   const video = document.createElement("video");
-  video.className = "w-full h-full object-contain";
+  video.style.cssText = "width:100%;height:100%;object-fit:contain;";
   video.controls = true;
   video.preload = "metadata";
   video.muted = true;
@@ -3013,8 +3190,7 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
         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.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
         img.alt = fileName || t("previewAlt", state);
         img.src = thumbnailUrl;
         container.appendChild(img);
@@ -3025,11 +3201,11 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
   } catch (error) {
     console.error("Failed to get thumbnail:", error);
     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">
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-text-secondary-color,#9ca3af);">
+        <svg style="width:1.5rem;height:1.5rem;margin-bottom:0.5rem;" 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(fileName || t("previewUnavailable", state))}</div>
+        <div style="font-size:0.875rem;text-align:center;">${escapeHtml(fileName || t("previewUnavailable", state))}</div>
       </div>
     `;
   }
@@ -3203,13 +3379,9 @@ async function fillTileContent(tile, rid, meta, state, actionsEl) {
       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 = 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);
+      img.src = getLocalFileUrl(meta.file);
       tile.appendChild(img);
+      attachZoomHover(tile, img.src, meta.name, actionsEl ?? null);
     } else if (state.config.getThumbnail) {
       try {
         const url = await state.config.getThumbnail(rid);
@@ -3266,17 +3438,20 @@ async function fillTileContent(tile, rid, meta, state, actionsEl) {
     }
     if (actionsEl) tile.appendChild(actionsEl);
   } else {
-    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);
+    fillDocumentFallback(tile, rid, meta, actionsEl);
   }
 }
+function fillDocumentFallback(tile, rid, meta, actionsEl) {
+  const fileName = meta?.name ?? rid.split("/").pop() ?? "";
+  if (fileName) tile.title = fileName;
+  const labelHtml = fileName ? `<div style="font-size:11px;line-height:1.2;text-align:center;color:var(--fb-text-secondary-color,#6b7280);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapeHtml(fileName)}</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>
+      ${labelHtml}
+    </div>`;
+  if (actionsEl) tile.appendChild(actionsEl);
+}
 async function forceDownload(resourceId, fileName, state) {
   try {
     let fileUrl = null;
@@ -3376,6 +3551,10 @@ async function handleFileSelect(opts) {
     return;
   }
   clearFileError(container);
+  const existingHiddenInput = container.parentElement?.querySelector(
+    'input[type="hidden"]'
+  );
+  const previousRid = existingHiddenInput?.value || null;
   ensureFileStyles();
   container.innerHTML = `
     <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px;padding:6px;">
@@ -3386,7 +3565,13 @@ async function handleFileSelect(opts) {
   try {
     rid = await uploadSingleFile(file, state);
   } catch (error) {
-    setEmptyFileContainer(container, state);
+    if (previousRid && deps?.onAfterUpload) {
+      deps.onAfterUpload(container, previousRid);
+    } else if (deps?.onRemove) {
+      deps.onRemove();
+    } else {
+      setEmptyFileContainer(container, state);
+    }
     throw error;
   }
   state.resourceIndex.set(rid, {
@@ -3396,9 +3581,10 @@ async function handleFileSelect(opts) {
     uploadedAt: /* @__PURE__ */ new Date(),
     file
   });
-  let hiddenInput = container.parentElement?.querySelector(
-    'input[type="hidden"]'
-  );
+  if (previousRid && previousRid !== rid) {
+    releaseLocalFileUrl(state.resourceIndex.get(previousRid)?.file);
+  }
+  let hiddenInput = existingHiddenInput;
   if (!hiddenInput) {
     hiddenInput = document.createElement("input");
     hiddenInput.type = "hidden";
@@ -3407,7 +3593,9 @@ async function handleFileSelect(opts) {
   }
   hiddenInput.value = rid;
   const isVideo = file.type.startsWith("video/");
-  if (!isVideo && deps) {
+  if (!isVideo && deps?.onAfterUpload) {
+    deps.onAfterUpload(container, rid);
+  } else if (!isVideo && deps) {
     renderSingleFileEditTile(container, rid, state, deps).catch(console.error);
   } else {
     renderFilePreview(container, rid, state, {
@@ -3468,17 +3656,17 @@ function filterAndSlice(allFiles, currentCount, constraints, state) {
   return { accepted, errorMessage: errorParts.join(" \u2022 ") };
 }
 async function uploadBatch(accepted, resourceIds, listEl, state) {
+  if (listEl) {
+    const tilesWrap = ensureTilesWrap(listEl);
+    const addTile = tilesWrap.querySelector(".fb-multi-add-tile-js") ?? tilesWrap.querySelector(".fb-tile-add");
+    if (addTile) addTile.style.display = "none";
+  }
   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);
-        }
+        tilesWrap.appendChild(placeholder);
       }
       try {
         const rid = await uploadSingleFile(file, state);
@@ -3520,7 +3708,7 @@ function setupFilesDropHandler(filesContainer, resourceIds, state, updateCallbac
 function setupFilesPickerHandler(filesPicker, resourceIds, state, updateCallback, constraints, pathKey, instance) {
   filesPicker.onchange = async () => {
     if (!filesPicker.files) return;
-    const wrapperEl = filesPicker.closest(".space-y-2") || filesPicker.parentElement;
+    const wrapperEl = filesPicker.closest("[data-files-wrapper]") || filesPicker.parentElement;
     const { accepted, errorMessage } = filterAndSlice(
       Array.from(filesPicker.files),
       resourceIds.length,
@@ -3685,6 +3873,10 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
     hiddenInput.name = pathKey;
     fileWrapper.appendChild(hiddenInput);
   }
+  const previousRid = hiddenInput.value || null;
+  if (previousRid && previousRid !== first.resourceId) {
+    releaseLocalFileUrl(state.resourceIndex.get(previousRid)?.file);
+  }
   hiddenInput.value = first.resourceId;
   await renderCallback(first.resourceId);
   if (!state.config.readonly) {
@@ -3693,7 +3885,9 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
 }
 
 // src/components/file/render-edit.ts
-function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps) {
+var ICON_CLOUD = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 18a4 4 0 000-8 6 6 0 00-11.5 2A4 4 0 006 20h11M12 12v7M12 12l-3 3M12 12l3 3"/></svg>`;
+var ICON_LIBRARY2 = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h4v16H4z"/><path d="M10 4h4v16h-4z"/><path d="M16 5l3.5 1-3 14L13 19"/></svg>`;
+function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps, extras) {
   seedInferredResource(initial, state.resourceIndex);
   const meta = state.resourceIndex.get(initial);
   const isVideo = meta?.type?.startsWith("video/");
@@ -3704,7 +3898,7 @@ function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, sta
       deps
     }).catch(console.error);
   } else {
-    renderSingleFileEditTile(fileContainer, initial, state, deps).catch(console.error);
+    renderSingleFileFilled(fileContainer, initial, state, deps, extras);
   }
   const hiddenInput = document.createElement("input");
   hiddenInput.type = "hidden";
@@ -3712,161 +3906,423 @@ function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, sta
   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 buildWideTile(state, hasLibrary, onUploadClick, onLibraryClick, isDragOver = false, constraintHint = "") {
+  ensureFileStyles();
+  const outer = document.createElement("div");
+  outer.className = `fb-wide-tile${hasLibrary ? " fb-file-card-row" : ""}${isDragOver ? " fb-drag-over" : ""}`;
+  const uploadBtn = document.createElement("button");
+  uploadBtn.type = "button";
+  uploadBtn.className = "fb-wide-tile-upload fb-file-dropzone";
+  const cloudIcon = document.createElement("span");
+  cloudIcon.style.cssText = "width:36px;height:36px;display:block;flex-shrink:0;";
+  cloudIcon.innerHTML = ICON_CLOUD;
+  uploadBtn.appendChild(cloudIcon);
+  const primaryText = document.createElement("div");
+  primaryText.className = "fb-wide-tile-label";
+  primaryText.style.cssText = "font-size:14px;font-weight:600;";
+  primaryText.textContent = isDragOver ? t("dropToUpload", state) : t("clickDragText", state);
+  uploadBtn.appendChild(primaryText);
+  if (constraintHint) {
+    const hintEl = document.createElement("div");
+    hintEl.style.cssText = "font-size:11px;opacity:0.65;margin-top:2px;";
+    hintEl.textContent = constraintHint;
+    uploadBtn.appendChild(hintEl);
+  }
+  uploadBtn.onclick = (e) => {
+    e.stopPropagation();
+    onUploadClick();
+  };
+  outer.appendChild(uploadBtn);
+  if (hasLibrary && onLibraryClick) {
+    const divider = document.createElement("div");
+    divider.className = "fb-wide-tile-divider";
+    outer.appendChild(divider);
+    const libBtn = document.createElement("button");
+    libBtn.type = "button";
+    libBtn.className = "fb-wide-tile-library fb-file-library-card";
+    const libIcon = document.createElement("span");
+    libIcon.style.cssText = "width:28px;height:28px;display:block;flex-shrink:0;";
+    libIcon.innerHTML = ICON_LIBRARY2;
+    libBtn.appendChild(libIcon);
+    const libLabel = document.createElement("div");
+    libLabel.style.cssText = "font-size:13px;font-weight:600;text-align:center;";
+    libLabel.textContent = t("fromLibrary", state);
+    libBtn.appendChild(libLabel);
+    const libHint = document.createElement("div");
+    libHint.style.cssText = "font-size:11px;opacity:0.75;text-align:center;";
+    libHint.textContent = t("libraryHint", state);
+    libBtn.appendChild(libHint);
+    libBtn.onclick = (e) => {
+      e.stopPropagation();
+      onLibraryClick();
+    };
+    outer.appendChild(libBtn);
+  }
+  attachDragOverFeedback(outer, {
+    onEnter: () => {
+      const primaryText2 = outer.querySelector(".fb-wide-tile-label");
+      if (primaryText2) primaryText2.textContent = t("dropToUpload", state);
+    },
+    onLeave: () => {
+      const primaryText2 = outer.querySelector(".fb-wide-tile-label");
+      if (primaryText2) primaryText2.textContent = t("clickDragText", state);
+    },
+    activeClass: "fb-drag-over"
+  });
+  return outer;
 }
-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>
-    `;
+function attachDragOverFeedback(el, hooks) {
+  let depth = 0;
+  el.addEventListener("dragover", (e) => {
+    e.preventDefault();
+  });
+  el.addEventListener("dragenter", (e) => {
+    e.preventDefault();
+    depth++;
+    if (depth === 1) {
+      el.classList.add(hooks.activeClass);
+      hooks.onEnter();
+    }
+  });
+  el.addEventListener("dragleave", (e) => {
+    e.preventDefault();
+    depth = Math.max(0, depth - 1);
+    if (depth === 0) {
+      el.classList.remove(hooks.activeClass);
+      hooks.onLeave();
+    }
+  });
+  el.addEventListener("drop", () => {
+    depth = 0;
+    el.classList.remove(hooks.activeClass);
+    hooks.onLeave();
+  });
+}
+function renderSingleFileFilled(fileContainer, resourceId, state, deps, extras) {
+  const meta = state.resourceIndex.get(resourceId);
+  const isVideo = meta?.type?.startsWith("video/");
+  if (isVideo) {
+    renderFilePreview(fileContainer, resourceId, state, {
+      fileName: meta?.name ?? "",
+      isReadonly: false,
+      deps
+    }).catch(console.error);
+    return;
+  }
+  ensureFileStyles();
+  const outer = document.createElement("div");
+  outer.className = "fb-multi-outer fb-multi-has-files";
+  const grid = document.createElement("div");
+  grid.className = "fb-multi-grid fb-tiles-wrap";
+  outer.appendChild(grid);
+  const tile = buildPreviewTile(
+    resourceId,
+    state,
+    Boolean(deps.onRemove),
+    deps.onRemove ? () => deps.onRemove?.() : null,
+    extras
+  );
+  grid.appendChild(tile);
+  fileContainer.className = "file-preview-container";
+  fileContainer.removeAttribute("style");
+  while (fileContainer.firstChild) fileContainer.removeChild(fileContainer.firstChild);
+  fileContainer.appendChild(outer);
+}
+function buildMultiAddTile(state, hasLibrary, onUploadClick, onLibraryClick, isDragOver = false) {
+  const tile = document.createElement("div");
+  tile.className = `fb-multi-add-tile fb-multi-add-tile-js${isDragOver ? " fb-drag-over-tile" : ""}`;
+  const uploadBtn = document.createElement("button");
+  uploadBtn.type = "button";
+  uploadBtn.className = "fb-multi-add-upload fb-tile-add fb-file-dropzone";
+  const cloudIcon = document.createElement("span");
+  cloudIcon.style.cssText = "width:28px;height:28px;display:block;flex-shrink:0;";
+  cloudIcon.innerHTML = ICON_CLOUD;
+  uploadBtn.appendChild(cloudIcon);
+  const uploadLabel = document.createElement("span");
+  uploadLabel.className = "fb-multi-add-label";
+  uploadLabel.style.cssText = "font-size:11px;font-weight:600;";
+  uploadLabel.textContent = isDragOver ? t("dropToUpload", state) : t("clickDragTextMultiple", state);
+  uploadBtn.appendChild(uploadLabel);
+  uploadBtn.onclick = (e) => {
+    e.stopPropagation();
+    onUploadClick();
+  };
+  tile.appendChild(uploadBtn);
+  if (hasLibrary && onLibraryClick) {
+    const divider = document.createElement("div");
+    divider.className = "fb-multi-add-divider";
+    tile.appendChild(divider);
+    const libBtn = document.createElement("button");
+    libBtn.type = "button";
+    libBtn.className = "fb-multi-add-library fb-tile-add-library fb-file-library-card";
+    libBtn.setAttribute("aria-label", t("fromLibrary", state));
+    const libIcon = document.createElement("span");
+    libIcon.style.cssText = "width:14px;height:14px;display:block;flex-shrink:0;";
+    libIcon.innerHTML = ICON_LIBRARY2;
+    libBtn.appendChild(libIcon);
+    libBtn.appendChild(document.createTextNode(t("fromLibrary", state)));
+    libBtn.onclick = (e) => {
+      e.stopPropagation();
+      onLibraryClick();
+    };
+    tile.appendChild(libBtn);
+  }
+  return tile;
+}
+function buildPreviewTile(rid, state, canRemove, onRemove, extras) {
+  ensureFileStyles();
+  const meta = state.resourceIndex.get(rid);
+  const tile = document.createElement("div");
+  tile.className = "fb-preview-tile fb-checker fb-tile-resource resource-pill";
+  tile.dataset.resourceId = rid;
+  const actionsEl = createTileActions({
+    canRemove: canRemove && onRemove !== null,
+    removeHandler: onRemove,
+    state,
+    resourceId: rid,
+    fileName: meta?.name ?? "",
+    meta,
+    replaceHandler: extras?.replaceHandler ?? null,
+    libraryHandler: extras?.libraryHandler ?? null
+  });
+  fillTileContent(tile, rid, meta, state, actionsEl).catch((err) => {
+    console.error("Failed to render tile:", err);
+  });
+  return tile;
+}
+function buildPlaceholderTile(isDragOver = false) {
+  const div = document.createElement("div");
+  div.className = `fb-multi-placeholder fb-checker${isDragOver ? " fb-drag-over" : ""}`;
+  return div;
+}
+function buildMetaLine(state, element, ridCount, maxCount, canClearAll, onClearAll) {
+  const line = document.createElement("div");
+  line.className = "fb-meta-line";
+  const metaText = document.createElement("div");
+  metaText.className = "fb-meta-text";
+  if (element.maxSize && element.maxSize !== Infinity) {
+    const sizeSpan = document.createElement("span");
+    sizeSpan.textContent = t("hintMaxSize", state, { size: element.maxSize });
+    metaText.appendChild(sizeSpan);
+    metaText.appendChild(buildMetaDot());
+  }
+  const exts = getAllowedExtensions(element.accept);
+  if (exts.length > 0) {
+    const fmtSpan = document.createElement("span");
+    fmtSpan.className = "fb-meta-mono";
+    fmtSpan.textContent = exts.map((e) => e.toUpperCase()).join(", ");
+    metaText.appendChild(fmtSpan);
+    metaText.appendChild(buildMetaDot());
+  }
+  const countSpan = document.createElement("span");
+  if (maxCount < Infinity) {
+    countSpan.textContent = t("fileCountWithMax", state, {
+      count: ridCount,
+      max: maxCount
+    });
   } else {
-    btn.innerHTML = `<span aria-hidden="true">\u{1F4DA}</span>`;
-    btn.title = t("fromLibrary", state);
-    btn.setAttribute("aria-label", t("fromLibrary", state));
+    const countKey = ridCount === 1 ? "fileCountSingle" : "fileCountPlural";
+    countSpan.textContent = t(countKey, state, { count: ridCount });
+  }
+  metaText.appendChild(countSpan);
+  line.appendChild(metaText);
+  if (canClearAll && ridCount > 1) {
+    const clearBtn = document.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className = "fb-clear-all-btn";
+    clearBtn.textContent = t("clearAll", state);
+    clearBtn.onclick = (e) => {
+      e.stopPropagation();
+      if (window.confirm(t("clearAll", state) + "?")) {
+        onClearAll();
+      }
+    };
+    line.appendChild(clearBtn);
   }
-  btn.addEventListener("click", onClick);
-  return btn;
+  return line;
+}
+function buildMetaDot() {
+  const dot = document.createElement("span");
+  dot.className = "fb-meta-dot";
+  return dot;
 }
+var gridResizeObservers = /* @__PURE__ */ new WeakMap();
 function renderResourcePills(opts) {
   const {
     container,
     rids,
     state,
     onRemove,
-    hint,
-    countInfo,
     maxCount,
     isReadonly = false,
-    onLibraryPick
+    onLibraryPick,
+    element,
+    onClearAll,
+    openPicker: openPickerProp
   } = opts;
   ensureFileStyles();
   const wrapper = container.closest("[data-files-wrapper]");
   if (wrapper) {
     wrapper.dataset.resourceIds = JSON.stringify(rids ?? []);
   }
+  const previousObserver = gridResizeObservers.get(container);
+  if (previousObserver) {
+    previousObserver.disconnect();
+    gridResizeObservers.delete(container);
+  }
   while (container.firstChild) container.removeChild(container.firstChild);
   const ridList = rids ?? [];
-  const atMax = maxCount !== void 0 && ridList.length >= maxCount;
+  const effectiveMax = maxCount ?? Infinity;
+  const atMax = effectiveMax !== Infinity && ridList.length >= effectiveMax;
   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 openPicker = openPickerProp ?? (() => {
+    const pickerEl = container.closest("[data-files-wrapper]")?.querySelector('input[type="file"]');
+    if (pickerEl) pickerEl.click();
+  });
+  if (isReadonly) {
+    if (ridList.length === 0) {
       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 dropzone = buildEmptyDropzone(
-        state,
-        t("clickDragTextMultiple", state),
-        buildSubHint(),
-        openPicker
-      );
-      container.appendChild(dropzone);
+      const grid2 = document.createElement("div");
+      grid2.className = "fb-multi-readonly-grid";
+      container.appendChild(grid2);
+      for (const rid of ridList) {
+        const meta = state.resourceIndex.get(rid);
+        const tile = document.createElement("div");
+        tile.className = "fb-readonly-tile fb-checker fb-tile fb-tile-resource";
+        tile.dataset.resourceId = rid;
+        const actionsEl = createTileActions({
+          canRemove: false,
+          removeHandler: null,
+          state,
+          resourceId: rid,
+          fileName: meta?.name ?? "",
+          meta
+        });
+        fillTileContent(tile, rid, meta, state, actionsEl).catch(console.error);
+        tile.onclick = async () => {
+          let url = null;
+          if (state.config.getDownloadUrl) {
+            url = state.config.getDownloadUrl(rid);
+          } else if (state.config.getThumbnail) {
+            url = await state.config.getThumbnail(rid);
+          } else if (meta?.file instanceof File) {
+            url = URL.createObjectURL(meta.file);
+          }
+          if (url) {
+            window.open(url, "_blank");
+          } else if (state.config.downloadFile) {
+            state.config.downloadFile(rid, meta?.name ?? "");
+          }
+        };
+        grid2.appendChild(tile);
+      }
     }
     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,
+  const outerDiv = document.createElement("div");
+  outerDiv.className = `fb-multi-outer${ridList.length > 0 ? " fb-multi-has-files" : ""}`;
+  const grid = document.createElement("div");
+  grid.className = "fb-multi-grid fb-tiles-wrap";
+  outerDiv.appendChild(grid);
+  container.appendChild(outerDiv);
+  for (let i = 0; i < ridList.length; i++) {
+    const rid = ridList[i];
+    const tile = buildPreviewTile(
+      rid,
       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);
+      onRemove !== null,
+      onRemove ? () => onRemove(rid) : null
+    );
+    grid.appendChild(tile);
   }
-  container.appendChild(tilesWrap);
-  const subHint = buildSubHint();
-  if (subHint) {
-    const hintEl = document.createElement("div");
-    hintEl.className = "fb-tile-hint";
-    hintEl.textContent = subHint;
-    container.appendChild(hintEl);
+  if (!atMax) {
+    const addTile = buildMultiAddTile(
+      state,
+      hasLibrary,
+      openPicker,
+      onLibraryPick ?? null
+    );
+    grid.appendChild(addTile);
+  }
+  const occupied = ridList.length + (atMax ? 0 : 1);
+  const adjustPlaceholders = () => {
+    const tpl = getComputedStyle(grid).gridTemplateColumns;
+    const cols = tpl ? tpl.split(" ").filter(Boolean).length : 0;
+    if (!cols) return;
+    const remainder = occupied % cols;
+    const rowFill = remainder === 0 ? 0 : cols - remainder;
+    const capacityRemaining = effectiveMax === Infinity ? rowFill : Math.max(0, effectiveMax - occupied);
+    const needed = Math.min(rowFill, capacityRemaining);
+    const existing = grid.querySelectorAll(".fb-multi-placeholder");
+    if (existing.length > needed) {
+      for (let i = existing.length - 1; i >= needed; i--) existing[i].remove();
+    } else if (existing.length < needed) {
+      for (let i = existing.length; i < needed; i++) {
+        grid.appendChild(buildPlaceholderTile());
+      }
+    }
+  };
+  if (effectiveMax === Infinity || effectiveMax > occupied) {
+    grid.appendChild(buildPlaceholderTile());
+  }
+  requestAnimationFrame(adjustPlaceholders);
+  if (typeof ResizeObserver !== "undefined") {
+    const ro = new ResizeObserver(() => adjustPlaceholders());
+    ro.observe(grid);
+    gridResizeObservers.set(container, ro);
+  }
+  attachDragOverFeedback(outerDiv, {
+    activeClass: "fb-drag-over",
+    onEnter: () => {
+      grid.querySelectorAll(".fb-multi-placeholder").forEach((p) => {
+        p.classList.add("fb-drag-over");
+      });
+      const addTile = grid.querySelector(".fb-multi-add-tile-js");
+      if (addTile) {
+        addTile.classList.add("fb-drag-over-tile");
+        const label = addTile.querySelector(".fb-multi-add-label");
+        if (label) label.textContent = t("dropToUpload", state);
+      }
+    },
+    onLeave: () => {
+      grid.querySelectorAll(".fb-multi-placeholder").forEach((p) => {
+        p.classList.remove("fb-drag-over");
+      });
+      const addTile = grid.querySelector(".fb-multi-add-tile-js");
+      if (addTile) {
+        addTile.classList.remove("fb-drag-over-tile");
+        const label = addTile.querySelector(".fb-multi-add-label");
+        if (label) label.textContent = t("clickDragTextMultiple", state);
+      }
+    }
+  });
+  if (element) {
+    const metaLine = buildMetaLine(
+      state,
+      element,
+      ridList.length,
+      effectiveMax,
+      Boolean(onClearAll),
+      onClearAll ?? (() => {
+      })
+    );
+    container.appendChild(metaLine);
   }
 }
 function renderFileElementEdit(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const fileWrapper = document.createElement("div");
   fileWrapper.className = "space-y-2";
+  fileWrapper.dataset.filesWrapper = pathKey;
   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(",") || "";
-  }
+  picker.accept = buildAcceptAttribute(element.accept);
   const fileContainer = document.createElement("div");
   fileContainer.className = "file-preview-container";
   const initial = ctx.prefill[element.key];
@@ -3895,14 +4351,6 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
     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;
@@ -3913,34 +4361,11 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
       renderEmptySingleState();
     }
   };
-  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;
-      while (fileContainer.firstChild) {
-        fileContainer.removeChild(fileContainer.firstChild);
-      }
-      const row = document.createElement("div");
-      row.className = "fb-file-card-row";
-      row.style.cssText = "display:flex;gap:8px;align-items:stretch;";
-      const hint = makeFieldHint(element, state);
-      const uploadCard = buildEmptyDropzone(
-        state,
-        t("clickDragText", state),
-        hint,
-        handlers.fileUploadHandler
-      );
-      uploadCard.style.cssText = "flex:1;min-width:0;height:128px;";
-      setupDragAndDrop(uploadCard, handlers.dragHandler);
-      const libraryBtn = buildLibraryButton("card", state, () => {
+  const buildSingleExtras = () => {
+    const hasLibrary = Boolean(state.config.pickExistingFiles && !element.disableLibrary);
+    return {
+      replaceHandler: state.config.uploadFile ? () => picker.click() : null,
+      libraryHandler: hasLibrary ? () => {
         handleLibraryPickSingle(
           state,
           element,
@@ -3949,20 +4374,41 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
           pathKey,
           pathKey,
           async (rid) => {
-            await renderSingleFileEditTile(fileContainer, rid, state, buildDeps());
+            renderSingleFileFilled(fileContainer, rid, state, buildDeps(), buildSingleExtras());
           },
           ctx.instance
         ).catch((err) => {
           console.error("Library pick failed:", err);
         });
-      });
-      libraryBtn.style.cssText = "flex:1;min-width:0;";
-      row.appendChild(uploadCard);
-      row.appendChild(libraryBtn);
-      fileContainer.appendChild(row);
-    } else {
-      handlers.restoreDropzone();
+      } : null
+    };
+  };
+  const buildDeps = () => ({
+    picker,
+    fileUploadHandler: handlers.fileUploadHandler,
+    dragHandler: handlers.dragHandler,
+    setupDrop: handlers.setupDrop,
+    onRemove: handlers.onRemove,
+    onAfterUpload: (container, rid) => {
+      renderSingleFileFilled(container, rid, state, buildDeps(), buildSingleExtras());
     }
+  });
+  const renderEmptySingleState = () => {
+    ensureFileStyles();
+    fileContainer.className = "file-preview-container";
+    fileContainer.removeAttribute("style");
+    while (fileContainer.firstChild) fileContainer.removeChild(fileContainer.firstChild);
+    const onLibraryClick = buildSingleExtras().libraryHandler;
+    const wideTile = buildWideTile(
+      state,
+      onLibraryClick !== null,
+      handlers.fileUploadHandler,
+      onLibraryClick,
+      false,
+      makeFieldHint(element, state)
+    );
+    fileContainer.appendChild(wideTile);
+    setupDragAndDrop(fileContainer, handlers.dragHandler);
   };
   if (initial) {
     handleInitialFileData(
@@ -3971,11 +4417,11 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
       pathKey,
       fileWrapper,
       state,
-      buildDeps()
+      buildDeps(),
+      buildSingleExtras()
     );
     const prefillMeta = state.resourceIndex.get(initial);
     if (prefillMeta?.type?.startsWith("video/")) {
-      fileContainer.onclick = handlers.fileUploadHandler;
       setupDragAndDrop(fileContainer, handlers.dragHandler);
     }
   } else {
@@ -3983,113 +4429,23 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
   }
   picker.onchange = () => {
     if (picker.files && picker.files.length > 0) {
-      handleFileSelect({
-        file: picker.files[0],
-        container: fileContainer,
-        fieldName: pathKey,
-        state,
-        deps: buildDeps(),
-        instance: ctx.instance,
-        allowedExtensions: allowedExts,
-        allowedMimes,
-        maxSizeMB
-      });
+      handlers.dragHandler(picker.files);
     }
   };
   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,
-      element,
-      filesWrapper,
-      pathKey,
-      initialFiles,
-      Infinity,
-      updateFilesList,
-      ctx.instance
-    ).catch((err) => {
-      console.error("Library pick failed:", err);
-    });
-  } : null;
-  function updateFilesList() {
-    const currentlyReadonly = isElementReadonly(element, state);
-    renderResourcePills({
-      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 buildAcceptAttribute(accept) {
+  if (!accept) return "";
+  if (typeof accept === "string") return accept;
+  return [
+    ...accept.extensions?.map((ext) => `.${ext}`) ?? [],
+    ...accept.mime ?? []
+  ].join(",");
 }
-function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
+function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
   const state = ctx.state;
-  const minFiles = element.minCount ?? 0;
-  const maxFiles = element.maxCount ?? Infinity;
   const filesWrapper = document.createElement("div");
   filesWrapper.className = "space-y-2";
   filesWrapper.dataset.filesWrapper = pathKey;
@@ -4098,15 +4454,9 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
   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(",") || "";
-  }
+  filesPicker.accept = buildAcceptAttribute(element.accept);
   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);
@@ -4115,19 +4465,18 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
   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 = {
+  const constraints = {
     maxCount: maxFiles,
     allowedExtensions: getAllowedExtensions(element.accept),
     allowedMimes: getAllowedMimes(element.accept),
-    maxSize: element.maxSize ?? Infinity
+    // Prefer schema's `maxSize`; fall back to legacy `maxSizeMB` for
+    // backward compatibility (matches addFileSizeHint in validation.ts).
+    maxSize: element.maxSize ?? element.maxSizeMB ?? 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 openPicker = () => {
+    filesPicker.click();
   };
-  const onLibraryPickMultiple = state.config.pickExistingFiles && !element.disableLibrary ? () => {
+  const onLibraryPick = state.config.pickExistingFiles && !element.disableLibrary ? () => {
     handleLibraryPickMulti(
       state,
       element,
@@ -4141,30 +4490,35 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
       console.error("Library pick failed:", err);
     });
   } : null;
-  const updateFilesDisplay = () => {
+  function 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);
+      onRemove: currentlyReadonly ? null : (ridToRemove) => {
+        releaseLocalFileUrl(state.resourceIndex.get(ridToRemove)?.file);
+        const index = initialFiles.indexOf(ridToRemove);
+        if (index > -1) initialFiles.splice(index, 1);
         updateFilesDisplay();
       },
-      hint: multipleFilesHint,
-      countInfo: buildCountInfo(),
       maxCount: maxFiles < Infinity ? maxFiles : void 0,
       isReadonly: currentlyReadonly,
-      onLibraryPick: currentlyReadonly ? null : onLibraryPickMultiple
+      onLibraryPick: currentlyReadonly ? null : onLibraryPick,
+      element,
+      onClearAll: currentlyReadonly ? void 0 : () => {
+        initialFiles.splice(0);
+        updateFilesDisplay();
+      },
+      openPicker
     });
-  };
+  }
   setupFilesDropHandler(
     filesContainer,
     initialFiles,
     state,
     updateFilesDisplay,
-    multipleConstraints,
+    constraints,
     pathKey,
     ctx.instance
   );
@@ -4173,13 +4527,19 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
     initialFiles,
     state,
     updateFilesDisplay,
-    multipleConstraints,
+    constraints,
     pathKey,
     ctx.instance
   );
   updateFilesDisplay();
   wrapper.appendChild(filesWrapper);
 }
+function renderFilesElementEdit(element, ctx, wrapper, pathKey) {
+  setupMultiFileEditMode(element, ctx, wrapper, pathKey, Infinity);
+}
+function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
+  setupMultiFileEditMode(element, ctx, wrapper, pathKey, element.maxCount ?? Infinity);
+}
 
 // src/components/file/validate.ts
 function readMultiFileResourceIds(scopeRoot, fullKey) {
@@ -4302,33 +4662,36 @@ function renderFileElementReadonly(element, ctx, wrapper, pathKey) {
     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));
-    });
+    renderFilePreviewReadonly(initial, state).then((tile) => {
+      tile.classList.add(
+        "fb-single-readonly-filled",
+        "fb-readonly-tile",
+        "fb-checker"
+      );
+      wrapper.appendChild(tile);
+    }).catch(console.error);
   } else {
     wrapper.appendChild(buildEmptyReadonlyTile(state));
   }
 }
 function buildEmptyReadonlyTile(state) {
+  ensureFileStyles();
   const emptyState = document.createElement("div");
   emptyState.style.cssText = `
-    width:${TILE_SIZE};
-    height:${TILE_SIZE};
+    height: 220px;
     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);
+    background: repeating-linear-gradient(45deg, #fafafa 0 6px, #f3f4f6 6px 12px);
+    border-radius:0.75rem;
+    border:1px solid #e2e8f0;
   `;
   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) {
+function renderMultiFileReadonly(rids, state, wrapper, pathKey, _marginTop) {
   addPrefillFilesToIndex(rids, state.resourceIndex);
+  ensureFileStyles();
   const filesWrapper = document.createElement("div");
   filesWrapper.dataset.filesWrapper = pathKey;
   filesWrapper.dataset.resourceIds = JSON.stringify(rids);
@@ -4340,22 +4703,28 @@ function renderMultiFileReadonly(rids, state, wrapper, pathKey, marginTop) {
     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 grid = document.createElement("div");
+  grid.className = "fb-multi-readonly-grid";
+  filesWrapper.appendChild(grid);
   const placeholders = rids.map(() => {
-    const placeholder = document.createElement("div");
-    placeholder.style.cssText = `width:${TILE_SIZE};height:${TILE_SIZE};`;
-    tilesWrap.appendChild(placeholder);
-    return placeholder;
+    const ph = document.createElement("div");
+    ph.className = "fb-readonly-tile fb-checker fb-tile";
+    grid.appendChild(ph);
+    return ph;
   });
   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);
+    const meta = state.resourceIndex.get(resourceId);
+    renderFilePreviewReadonly(resourceId, state, meta?.name).then((tile) => {
+      tile.classList.add("fb-readonly-tile", "fb-checker", "fb-tile-resource");
+      tile.dataset.resourceId = resourceId;
+      placeholder.replaceWith(tile);
+    }).catch(() => {
+      const tile = document.createElement("div");
+      tile.className = "fb-readonly-tile fb-checker fb-tile fb-tile-resource";
+      tile.dataset.resourceId = resourceId;
+      placeholder.replaceWith(tile);
     });
   }
 }
@@ -4367,7 +4736,7 @@ function renderFilesElementReadonly(element, ctx, 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");
+  renderMultiFileReadonly(initialFiles, ctx.state, wrapper, pathKey);
 }
 
 // src/components/file.ts
@@ -5454,7 +5823,7 @@ function updateSliderField(element, fieldPath, value, context) {
 function extractChildDefaults(elements) {
   const defaults = {};
   for (const child of elements) {
-    if ("default" in child && child.default !== void 0) {
+    if (child.key && "default" in child && child.default !== void 0) {
       defaults[child.key] = child.default;
     }
   }
@@ -5505,7 +5874,7 @@ function createPrefillHints(element, pathKey) {
     return null;
   }
   const hintsContainer = document.createElement("div");
-  hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-4";
+  hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-2";
   element.prefillHints.forEach((hint, index) => {
     const hintButton = document.createElement("button");
     hintButton.type = "button";
@@ -5520,14 +5889,14 @@ function createPrefillHints(element, pathKey) {
 }
 function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   const containerWrap = document.createElement("div");
-  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
+  containerWrap.className = "border border-gray-200 rounded-lg p-2 bg-gray-50";
   containerWrap.setAttribute("data-container", pathKey);
   const itemsWrap = document.createElement("div");
   const columns = element.columns || 1;
   if (columns === 1) {
-    itemsWrap.className = "space-y-4";
+    itemsWrap.className = "space-y-2";
   } else {
-    itemsWrap.className = `grid grid-cols-${columns} gap-4`;
+    itemsWrap.className = `grid grid-cols-${columns} gap-2`;
   }
   const containerIsReadonly = isElementReadonly(element, ctx.state, ctx);
   if (!containerIsReadonly) {
@@ -5549,8 +5918,8 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     inheritedReadonly: containerIsReadonly || ctx.inheritedReadonly
   };
   element.elements.forEach((child) => {
-    if (child.hidden || child.type === "hidden") {
-      const prefillVal = containerPrefill[child.key] ?? child.default ?? null;
+    if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
+      const prefillVal = containerPrefill[child.key] ?? ("default" in child ? child.default : null) ?? null;
       itemsWrap.appendChild(
         createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
       );
@@ -5561,16 +5930,31 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   containerWrap.appendChild(itemsWrap);
   wrapper.appendChild(containerWrap);
 }
+function getChildWrapperClass(isSlides, columns) {
+  if (isSlides) {
+    return "space-y-2";
+  }
+  const cols = columns || 1;
+  return cols === 1 ? "space-y-2" : `grid grid-cols-${cols} gap-2`;
+}
 function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const state = ctx.state;
   const containerIsReadonly = isElementReadonly(element, state, ctx);
   const childInheritedReadonly = containerIsReadonly || ctx.inheritedReadonly;
   const containerWrap = document.createElement("div");
-  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
+  containerWrap.className = "border border-gray-200 rounded-lg p-2 bg-gray-50";
   const countDisplay = document.createElement("span");
   countDisplay.className = "text-sm text-gray-500";
   const itemsWrap = document.createElement("div");
-  itemsWrap.className = "space-y-4";
+  const isSlides = element.displayMode === "slides";
+  if (isSlides) {
+    itemsWrap.className = "fb-container-slides";
+    const slideCols = element.columns;
+    const gridTemplateColumns = typeof slideCols === "number" && slideCols > 0 ? `repeat(${slideCols}, 1fr)` : "repeat(auto-fit, minmax(280px, 1fr))";
+    itemsWrap.style.cssText = `display:grid;grid-template-columns:${gridTemplateColumns};gap:8px;align-items:start;`;
+  } else {
+    itemsWrap.className = "space-y-2";
+  }
   if (!containerIsReadonly) {
     const hintsElement = createPrefillHints(element, element.key);
     if (hintsElement) {
@@ -5614,21 +5998,16 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           inheritedReadonly: childInheritedReadonly
         };
         const item = document.createElement("div");
-        item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+        item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
         item.setAttribute("data-container-item", `${element.key}[${idx}]`);
         const childWrapper = document.createElement("div");
-        const columns = element.columns || 1;
-        if (columns === 1) {
-          childWrapper.className = "space-y-4";
-        } else {
-          childWrapper.className = `grid grid-cols-${columns} gap-4`;
-        }
+        childWrapper.className = getChildWrapperClass(isSlides, element.columns);
         element.elements.forEach((child) => {
-          if (child.hidden || child.type === "hidden") {
+          if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
             childWrapper.appendChild(
               createHiddenInput(
                 pathJoin(subCtx.path, child.key),
-                child.default ?? null
+                ("default" in child ? child.default : null) ?? null
               )
             );
           } else {
@@ -5691,18 +6070,22 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         inheritedReadonly: childInheritedReadonly
       };
       const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
       const childWrapper = document.createElement("div");
-      const columns = element.columns || 1;
-      if (columns === 1) {
-        childWrapper.className = "space-y-4";
+      if (isSlides) {
+        childWrapper.className = "space-y-2";
       } else {
-        childWrapper.className = `grid grid-cols-${columns} gap-4`;
+        const columns = element.columns || 1;
+        if (columns === 1) {
+          childWrapper.className = "space-y-2";
+        } else {
+          childWrapper.className = `grid grid-cols-${columns} gap-2`;
+        }
       }
       element.elements.forEach((child) => {
-        if (child.hidden || child.type === "hidden") {
-          const prefillVal = prefillObj?.[child.key] ?? child.default ?? null;
+        if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
+          const prefillVal = prefillObj?.[child.key] ?? ("default" in child ? child.default : null) ?? null;
           childWrapper.appendChild(
             createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
           );
@@ -5747,21 +6130,25 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         inheritedReadonly: childInheritedReadonly
       };
       const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
       const childWrapper = document.createElement("div");
-      const columns = element.columns || 1;
-      if (columns === 1) {
-        childWrapper.className = "space-y-4";
+      if (isSlides) {
+        childWrapper.className = "space-y-2";
       } else {
-        childWrapper.className = `grid grid-cols-${columns} gap-4`;
+        const columns = element.columns || 1;
+        if (columns === 1) {
+          childWrapper.className = "space-y-2";
+        } else {
+          childWrapper.className = `grid grid-cols-${columns} gap-2`;
+        }
       }
       element.elements.forEach((child) => {
-        if (child.hidden || child.type === "hidden") {
+        if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
           childWrapper.appendChild(
             createHiddenInput(
               pathJoin(subCtx.path, child.key),
-              child.default ?? null
+              ("default" in child ? child.default : null) ?? null
             )
           );
         } else {
@@ -5947,6 +6334,7 @@ function updateContainerField(element, fieldPath, value, context) {
     value.forEach((itemValue, index) => {
       if (isPlainObject(itemValue)) {
         element.elements.forEach((childElement) => {
+          if (childElement.type === "markdown" || !childElement.key) return;
           const childPath = `${fieldPath}[${index}].${childElement.key}`;
           if (childElement.type === "richinput" && childElement.flatOutput) {
             const richChild = childElement;
@@ -5986,6 +6374,7 @@ function updateContainerField(element, fieldPath, value, context) {
       return;
     }
     element.elements.forEach((childElement) => {
+      if (childElement.type === "markdown" || !childElement.key) return;
       const childPath = `${fieldPath}.${childElement.key}`;
       if (childElement.type === "richinput" && childElement.flatOutput) {
         const richChild = childElement;
@@ -7780,7 +8169,7 @@ function filterFilesForDropdown(query, files, labels) {
   });
 }
 var TEXTAREA_FONT = "font-size: var(--fb-font-size, 14px); font-family: var(--fb-font-family, inherit); line-height: 1.6;";
-var TEXTAREA_PADDING = "padding: 12px 52px 12px 14px;";
+var TEXTAREA_PADDING = "padding: 8px 40px 8px 10px;";
 function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   const state = ctx.state;
   const files = [...initialValue.files];
@@ -7827,7 +8216,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   });
   const errorEl = document.createElement("div");
   errorEl.className = "fb-richinput-error";
-  errorEl.style.cssText = "display: none; color: var(--fb-error-color, #ef4444); font-size: var(--fb-font-size-small, 12px); padding: 4px 14px 8px;";
+  errorEl.style.cssText = "display: none; color: var(--fb-error-color, #ef4444); font-size: var(--fb-font-size-small, 12px); padding: 4px 10px 6px;";
   let errorTimer = null;
   function showUploadError(message) {
     errorEl.textContent = message;
@@ -7903,7 +8292,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   });
   const filesRow = document.createElement("div");
   filesRow.className = "fb-richinput-files";
-  filesRow.style.cssText = "display: none; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; align-items: center;";
+  filesRow.style.cssText = "display: none; flex-wrap: wrap; gap: 4px; padding: 6px 10px 0; align-items: center;";
   const fileInput = document.createElement("input");
   fileInput.type = "file";
   fileInput.multiple = true;
@@ -8033,13 +8422,13 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   paperclipBtn.title = t("richinputAttachFile", state);
   paperclipBtn.style.cssText = `
     position: absolute;
-    right: 10px;
-    bottom: 10px;
+    right: 6px;
+    bottom: 6px;
     z-index: 2;
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
     border: none;
-    border-radius: 8px;
+    border-radius: 6px;
     background: transparent;
     cursor: pointer;
     display: flex;
@@ -8393,7 +8782,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   outerDiv.appendChild(errorEl);
   if (element.minLength != null || element.maxLength != null) {
     const counterRow = document.createElement("div");
-    counterRow.style.cssText = "position: relative; padding: 2px 14px 6px; text-align: right;";
+    counterRow.style.cssText = "position: relative; padding: 2px 10px 4px; text-align: right;";
     const counter = createCharCounter(element, textarea, false);
     counter.style.cssText = `
       position: static;
@@ -8685,6 +9074,248 @@ function updateRichInputField(element, fieldPath, value, context) {
   }
 }
 
+// src/components/markdown/snarkdown.ts
+var TAGS = {
+  "": ["<em>", "</em>"],
+  _: ["<strong>", "</strong>"],
+  "*": ["<strong>", "</strong>"],
+  "~": ["<s>", "</s>"],
+  "\n": ["<br />"],
+  " ": ["<br />"],
+  "-": ["<hr />"]
+};
+function outdent(str) {
+  return str.replace(
+    RegExp("^" + (str.match(/^(\t| )+/) || "")[0], "gm"),
+    ""
+  );
+}
+function encodeAttr(str) {
+  return (str + "").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function parse(md, prevLinks) {
+  const tokenizer = /((?:^|\n+)(?:\n---+|\*[ ]\*(?:[ ]\*)+)\n)|(?:^```[ ]*(\w*)\n([\s\S]*?)\n```$)|((?:(?:^|\n+)(?:\t|[ ]{2,}).+)+\n*)|((?:(?:^|\n)([>*+-]|\d+\.)\s+.*)+)|(?:!\[([^\]]*?)\]\(([^)]+?)\))|(\[)|(\](?:\(([^)]+?)\))?)|(?:(?:^|\n+)([^\s].*)\n(-{3,}|={3,})(?:\n+|$))|(?:(?:^|\n+)(#{1,6})\s*(.+)(?:\n+|$))|(?:`([^`].*?)`)|([ ]{2}\n\n*|\n{2,}|__|\*\*|[_*]|~~)/gm;
+  const context = [];
+  let out = "";
+  const links = prevLinks || {};
+  let last = 0;
+  let chunk;
+  let prev;
+  let token;
+  let inner;
+  let t2;
+  function tag(token2) {
+    const desc = TAGS[token2[1] || ""];
+    const end = context[context.length - 1] === token2;
+    if (!desc) return token2;
+    if (!desc[1]) return desc[0];
+    if (end) context.pop();
+    else context.push(token2);
+    return desc[end ? 1 : 0];
+  }
+  function flush() {
+    let str = "";
+    while (context.length) str += tag(context[context.length - 1]);
+    return str;
+  }
+  md = md.replace(/^\[(.+?)\]:\s*(.+)$/gm, (_s, name, url) => {
+    links[name.toLowerCase()] = url;
+    return "";
+  }).replace(/^\n+|\n+$/g, "");
+  while (token = tokenizer.exec(md)) {
+    prev = md.substring(last, token.index);
+    last = tokenizer.lastIndex;
+    chunk = token[0];
+    if (prev.match(/[^\\](\\\\)*\\$/)) ; else if (t2 = token[3] || token[4]) {
+      chunk = '<pre class="code ' + (token[4] ? "poetry" : token[2].toLowerCase()) + '"><code' + (token[2] ? ` class="language-${token[2].toLowerCase()}"` : "") + ">" + outdent(encodeAttr(t2).replace(/^\n+|\n+$/g, "")) + "</code></pre>";
+    } else if (t2 = token[6]) {
+      if (t2.match(/\./)) {
+        token[5] = token[5].replace(/^\d+/gm, "");
+      }
+      inner = parse(outdent(token[5].replace(/^\s*[>*+.-]/gm, "")));
+      if (t2 === ">") t2 = "blockquote";
+      else {
+        t2 = t2.match(/\./) ? "ol" : "ul";
+        inner = inner.replace(/^(.*)(\n|$)/gm, "<li>$1</li>");
+      }
+      chunk = "<" + t2 + ">" + inner + "</" + t2 + ">";
+    } else if (token[8]) {
+      chunk = `<img src="${encodeAttr(token[8])}" alt="${encodeAttr(token[7])}">`;
+    } else if (token[10]) {
+      out = out.replace(
+        "<a>",
+        `<a href="${encodeAttr(token[11] || links[prev.toLowerCase()])}">`
+      );
+      chunk = flush() + "</a>";
+    } else if (token[9]) {
+      chunk = "<a>";
+    } else if (token[12] || token[14]) {
+      t2 = "h" + (token[14] ? token[14].length : token[13] > "=" ? 1 : 2);
+      chunk = "<" + t2 + ">" + parse(token[12] || token[15], links) + "</" + t2 + ">";
+    } else if (token[16]) {
+      chunk = "<code>" + encodeAttr(token[16]) + "</code>";
+    } else if (token[17] || token[1]) {
+      chunk = tag(token[17] || "--");
+    }
+    out += prev;
+    out += chunk;
+  }
+  return (out + md.substring(last) + flush()).replace(/^\n+|\n+$/g, "");
+}
+
+// src/components/markdown/render.ts
+var STYLE_ID2 = "fb-markdown-styles";
+function ensureMarkdownStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID2)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  style.setAttribute("data-fb-markdown-styles", "true");
+  style.textContent = `
+.fb-markdown {
+  font-family: var(--fb-font-family, inherit);
+  font-size: var(--fb-font-size, 1rem);
+  color: var(--fb-text-color, #1f2937);
+  line-height: 1.6;
+}
+.fb-markdown h1,
+.fb-markdown h2,
+.fb-markdown h3,
+.fb-markdown h4,
+.fb-markdown h5,
+.fb-markdown h6 {
+  font-weight: var(--fb-font-weight-medium, 600);
+  color: var(--fb-text-color, #1f2937);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.fb-markdown h1 { font-size: 1.5rem; }
+.fb-markdown h2 { font-size: 1.25rem; }
+.fb-markdown h3 { font-size: 1.1rem; }
+.fb-markdown h4,
+.fb-markdown h5,
+.fb-markdown h6 { font-size: 1rem; }
+.fb-markdown p {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+.fb-markdown ul,
+.fb-markdown ol {
+  margin: 0.25em 0 0.5em 1.5em;
+  padding: 0;
+}
+.fb-markdown li {
+  margin-bottom: 0.15em;
+}
+.fb-markdown a {
+  color: var(--fb-primary-color, #2563eb);
+  text-decoration: underline;
+}
+.fb-markdown a:hover {
+  opacity: 0.8;
+}
+.fb-markdown code {
+  background: var(--fb-input-background-color, #f3f4f6);
+  border-radius: 3px;
+  padding: 0.1em 0.35em;
+  font-size: 0.9em;
+  font-family: monospace;
+}
+.fb-markdown pre {
+  background: var(--fb-input-background-color, #f3f4f6);
+  border-radius: var(--fb-border-radius, 0.375rem);
+  padding: 0.75em 1em;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+.fb-markdown pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+.fb-markdown blockquote {
+  border-left: 3px solid var(--fb-border-color, #d1d5db);
+  margin: 0.5em 0;
+  padding-left: 1em;
+  color: var(--fb-text-secondary-color, #6b7280);
+}
+.fb-markdown hr {
+  border: none;
+  border-top: 1px solid var(--fb-border-color, #d1d5db);
+  margin: 0.75em 0;
+}
+.fb-markdown strong { font-weight: var(--fb-font-weight-medium, 600); }
+.fb-markdown em { font-style: italic; }
+.fb-markdown s { text-decoration: line-through; }
+`;
+  document.head.appendChild(style);
+}
+var ANCHOR_DANGEROUS_SCHEMES = [
+  "javascript:",
+  "data:",
+  "vbscript:",
+  "blob:"
+];
+var IMG_DANGEROUS_SCHEMES = ["javascript:", "vbscript:", "blob:"];
+function isImgSrcDangerous(normalized) {
+  if (IMG_DANGEROUS_SCHEMES.some((scheme) => normalized.startsWith(scheme))) {
+    return true;
+  }
+  if (normalized.startsWith("data:") && !normalized.startsWith("data:image/")) {
+    return true;
+  }
+  return false;
+}
+function escapeRawHtml(content) {
+  return content.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function sanitizeElements(container) {
+  const anchors = container.querySelectorAll("a[href]");
+  anchors.forEach((a) => {
+    const href = a.getAttribute("href") ?? "";
+    const normalized = href.trim().toLowerCase();
+    const isDangerous = ANCHOR_DANGEROUS_SCHEMES.some(
+      (scheme) => normalized.startsWith(scheme)
+    );
+    if (isDangerous) {
+      a.setAttribute("href", "#");
+    }
+    a.setAttribute("target", "_blank");
+    a.setAttribute("rel", "noopener noreferrer");
+  });
+  const images = container.querySelectorAll("img[src]");
+  images.forEach((img) => {
+    const src = img.getAttribute("src") ?? "";
+    const normalized = src.trim().toLowerCase();
+    if (isImgSrcDangerous(normalized)) {
+      img.setAttribute("src", "");
+    }
+  });
+}
+function renderMarkdown(element, _ctx, parent) {
+  if (typeof element.content !== "string") {
+    throw new Error(
+      `renderMarkdown: markdown element${element.key ? ` "${element.key}"` : ""} requires "content" to be a string (got ${element.content === null ? "null" : typeof element.content})`
+    );
+  }
+  ensureMarkdownStyles();
+  const wrapper = document.createElement("div");
+  wrapper.className = "fb-markdown";
+  const escaped = escapeRawHtml(element.content);
+  wrapper.innerHTML = parse(escaped);
+  sanitizeElements(wrapper);
+  parent.appendChild(wrapper);
+  return wrapper;
+}
+
+// src/components/markdown/index.ts
+function validateMarkdown(_element, _key, _context) {
+  return { value: void 0, errors: [], skip: true };
+}
+function updateMarkdown(_element, _fieldPath, _value, _context) {
+}
+
 // src/components/index.ts
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
@@ -8915,7 +9546,7 @@ function setupEnableIfListeners(wrapper, element, ctx) {
 function createFieldLabel(element) {
   const title = document.createElement("label");
   title.className = "text-sm font-medium text-gray-900";
-  title.textContent = element.label || element.key;
+  title.textContent = element.label ?? element.key ?? "";
   if (element.required) {
     const req = document.createElement("span");
     req.className = "text-red-500 ml-1";
@@ -8945,7 +9576,7 @@ function createInfoButton(element) {
 }
 function createLabelContainer(element) {
   const label = document.createElement("div");
-  label.className = "flex items-center mb-2";
+  label.className = "flex items-center mb-1";
   const title = createFieldLabel(element);
   label.appendChild(title);
   if (element.description || element.hint) {
@@ -9043,9 +9674,32 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
   }
 }
 function renderElement2(element, ctx) {
+  if (element.type === "markdown") {
+    if (element.hidden === true) {
+      const placeholder = document.createElement("div");
+      placeholder.style.display = "none";
+      placeholder.setAttribute("data-fb-hidden-markdown", "true");
+      return placeholder;
+    }
+    const initiallyDisabled2 = shouldDisableElement(element, ctx);
+    const outerWrapper = document.createElement("div");
+    outerWrapper.className = "mb-2 fb-field-wrapper fb-markdown-wrapper";
+    outerWrapper.setAttribute(
+      "data-field-key",
+      getElementLookupKey(element, ctx.state)
+    );
+    renderMarkdown(element, ctx, outerWrapper);
+    if (initiallyDisabled2) {
+      outerWrapper.style.display = "none";
+      outerWrapper.classList.add("fb-field-wrapper-disabled");
+      outerWrapper.setAttribute("data-conditionally-disabled", "true");
+    }
+    setupEnableIfListeners(outerWrapper, element, ctx);
+    return outerWrapper;
+  }
   const initiallyDisabled = shouldDisableElement(element, ctx);
   const wrapper = document.createElement("div");
-  wrapper.className = "mb-6 fb-field-wrapper";
+  wrapper.className = "mb-2 fb-field-wrapper";
   wrapper.setAttribute("data-field-key", element.key);
   const label = createLabelContainer(element);
   wrapper.appendChild(label);
@@ -9112,12 +9766,16 @@ var defaultConfig = {
       hintPattern: "Format: {pattern}",
       fileCountSingle: "{count} file",
       fileCountPlural: "{count} files",
+      fileCountWithMax: "{count} / {max} files",
       fileCountRange: "({min}-{max})",
       uploadingFile: "Uploading\u2026",
       filesCounter: "{count}/{max}",
       fromLibrary: "From library",
       libraryEmpty: "Library is empty",
       libraryHint: "Choose from previously uploaded files",
+      dropToUpload: "Release to upload",
+      replaceFile: "Replace",
+      clearAll: "Clear all",
       pickerError: "Failed to load files from library",
       // Validation errors
       required: "Required",
@@ -9183,12 +9841,16 @@ var defaultConfig = {
       hintPattern: "\u0424\u043E\u0440\u043C\u0430\u0442: {pattern}",
       fileCountSingle: "{count} \u0444\u0430\u0439\u043B",
       fileCountPlural: "{count} \u0444\u0430\u0439\u043B\u043E\u0432",
+      fileCountWithMax: "{count} / {max} \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",
+      dropToUpload: "\u041E\u0442\u043F\u0443\u0441\u0442\u0438\u0442\u0435, \u0447\u0442\u043E\u0431\u044B \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C",
+      replaceFile: "\u0417\u0430\u043C\u0435\u043D\u0438\u0442\u044C",
+      clearAll: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435",
       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",
@@ -9253,7 +9915,9 @@ function createInstanceState(config) {
       translations: mergedTranslations
     },
     debounceTimer: null,
-    prefill: {}
+    prefill: {},
+    syntheticElementIds: /* @__PURE__ */ new WeakMap(),
+    syntheticElementIdCounter: 0
   };
 }
 function generateInstanceId() {
@@ -9327,10 +9991,10 @@ var defaultTheme = {
   fileUploadHoverBorderColor: "#3b82f6",
   // blue-500
   // Spacing
-  inputPaddingX: "0.75rem",
-  // 3 (12px)
-  inputPaddingY: "0.5rem",
-  // 2 (8px)
+  inputPaddingX: "0.5rem",
+  // 8px (compact density v2)
+  inputPaddingY: "0.25rem",
+  // 4px (compact density v2)
   borderRadius: "0.5rem",
   // rounded-lg (8px)
   borderWidth: "1px",
@@ -9530,6 +10194,11 @@ var componentRegistry = {
     // Legacy type: `type: "hidden"` — reads/writes DOM <input type="hidden"> element
     validate: validateHiddenElement,
     update: updateHiddenField
+  },
+  markdown: {
+    // Display-only element — no value, no errors, skip from form data
+    validate: validateMarkdown,
+    update: updateMarkdown
   }
 };
 function getComponentOperations(elementType) {
@@ -9770,7 +10439,7 @@ var FormBuilderInstance = class {
       existingContainer.remove();
     }
     const actionsContainer = document.createElement("div");
-    actionsContainer.className = "form-level-actions-container mt-6 pt-4 flex flex-wrap gap-3 justify-center";
+    actionsContainer.className = "form-level-actions-container mt-3 pt-2 flex flex-wrap gap-2 justify-center";
     actionsContainer.style.cssText = `
       border-top: var(--fb-border-width) solid var(--fb-border-color);
     `;
@@ -9911,7 +10580,7 @@ var FormBuilderInstance = class {
    */
   createRootPrefillHints(hints) {
     const hintsContainer = document.createElement("div");
-    hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-4";
+    hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-2";
     hints.forEach((hint) => {
       const hintButton = document.createElement("button");
       hintButton.type = "button";
@@ -9944,7 +10613,7 @@ var FormBuilderInstance = class {
     root.setAttribute("data-fb-root", "true");
     injectThemeVariables(root, this.state.config.theme);
     const rootContainer = document.createElement("div");
-    rootContainer.className = "space-y-6";
+    rootContainer.className = "space-y-2";
     if (schema.prefillHints && !this.state.config.readonly) {
       const hintsContainer = this.createRootPrefillHints(schema.prefillHints);
       rootContainer.appendChild(hintsContainer);
@@ -9952,12 +10621,12 @@ var FormBuilderInstance = class {
     const fieldsWrapper = document.createElement("div");
     const columns = schema.columns || 1;
     if (columns === 1) {
-      fieldsWrapper.className = "space-y-4";
+      fieldsWrapper.className = "space-y-2";
     } else {
-      fieldsWrapper.className = `grid grid-cols-${columns} gap-4`;
+      fieldsWrapper.className = `grid grid-cols-${columns} gap-2`;
     }
     schema.elements.forEach((element) => {
-      if (element.hidden || element.type === "hidden") {
+      if (element.type !== "markdown" && (element.hidden || element.type === "hidden")) {
         const val = prefill?.[element.key] ?? element.default ?? null;
         fieldsWrapper.appendChild(createHiddenInput(element.key, val));
         return;
@@ -9992,7 +10661,7 @@ var FormBuilderInstance = class {
     const errors = [];
     const data = {};
     const validateElement2 = (element, ctx, customScopeRoot = null) => {
-      const key = element.key;
+      const key = element.key ?? "";
       const scopeRoot = customScopeRoot || this.state.formRoot;
       const componentContext = {
         scopeRoot,
@@ -10010,7 +10679,8 @@ var FormBuilderInstance = class {
         errors.push(...componentResult.errors);
         return {
           value: componentResult.value,
-          spread: !!componentResult.spread
+          spread: !!componentResult.spread,
+          skip: !!componentResult.skip
         };
       }
       console.warn(`Unknown field type "${element.type}" for key "${key}"`);
@@ -10031,6 +10701,9 @@ var FormBuilderInstance = class {
           );
         }
       }
+      if (element.type === "markdown") {
+        return;
+      }
       if (element.hidden || element.type === "hidden") {
         const hiddenInput = this.state.formRoot.querySelector(
           `input[type="hidden"][data-hidden-field="true"][name="${element.key}"]`
@@ -10043,9 +10716,10 @@ var FormBuilderInstance = class {
         }
       } else {
         const result = validateElement2(element, { path: "" });
+        if (result.skip) return;
         if (result.spread && result.value !== null && typeof result.value === "object") {
           Object.assign(data, result.value);
-        } else {
+        } else if (element.key) {
           data[element.key] = result.value;
         }
       }
@@ -10121,6 +10795,7 @@ var FormBuilderInstance = class {
   buildHiddenFieldsData(elements) {
     const data = {};
     for (const element of elements) {
+      if (element.type === "markdown" || !element.key) continue;
       const key = element.key;
       if (element.hidden && element.default !== void 0) {
         data[key] = element.default;
@@ -10241,6 +10916,71 @@ var FormBuilderInstance = class {
       );
     }
   }
+  /**
+   * Find the field wrapper DOM element for a given element+path combo.
+   * Used by reevaluateConditionalFields.
+   */
+  findFieldWrapper(element, currentPath) {
+    const formRoot = this.state.formRoot;
+    const lookupKey = getElementLookupKey(element, this.state);
+    if (!currentPath) {
+      return formRoot.querySelector(`[data-field-key="${lookupKey}"]`);
+    }
+    const pathMatch = currentPath.match(/^(.+)\[(\d+)\]$/);
+    if (pathMatch) {
+      const containerEl2 = formRoot.querySelector(
+        `[data-container-item="${pathMatch[1]}[${pathMatch[2]}]"]`
+      );
+      return containerEl2 ? containerEl2.querySelector(`[data-field-key="${lookupKey}"]`) : null;
+    }
+    const containerEl = formRoot.querySelector(
+      `[data-container="${currentPath}"]`
+    );
+    return containerEl ? containerEl.querySelector(`[data-field-key="${lookupKey}"]`) : null;
+  }
+  /**
+   * Apply enableIf show/hide logic to a single field wrapper.
+   * Extracted to reduce cyclomatic complexity of checkElements.
+   */
+  applyEnableIfVisibility(element, wrapper, currentPath, fullPath, formData) {
+    try {
+      const scope = element.enableIf.scope ?? "relative";
+      const containerData = scope === "relative" && currentPath ? getValueByPath(formData, currentPath) : void 0;
+      const shouldEnable = evaluateEnableCondition(
+        element.enableIf,
+        formData,
+        containerData
+      );
+      const isCurrentlyDisabled = wrapper.getAttribute("data-conditionally-disabled") === "true";
+      if (shouldEnable && isCurrentlyDisabled) {
+        const containerPrefill = currentPath ? getValueByPath(formData, currentPath) : formData;
+        const prefillContext = containerPrefill && typeof containerPrefill === "object" ? containerPrefill : {};
+        const newWrapper = renderElement2(element, {
+          path: currentPath,
+          prefill: prefillContext,
+          formData,
+          state: this.state,
+          instance: this
+        });
+        wrapper.parentNode?.replaceChild(newWrapper, wrapper);
+      } else if (!shouldEnable && !isCurrentlyDisabled) {
+        const disabledWrapper = document.createElement("div");
+        disabledWrapper.className = "fb-field-wrapper-disabled";
+        disabledWrapper.style.display = "none";
+        disabledWrapper.setAttribute(
+          "data-field-key",
+          getElementLookupKey(element, this.state)
+        );
+        disabledWrapper.setAttribute("data-conditionally-disabled", "true");
+        wrapper.parentNode?.replaceChild(disabledWrapper, wrapper);
+      }
+    } catch (error) {
+      console.error(
+        `Error re-evaluating enableIf for field "${element.key ?? "<no key>"}" at path "${fullPath}":`,
+        error
+      );
+    }
+  }
   /**
    * Re-evaluate all conditional fields (enableIf) based on current form data
    * This is called automatically when form data changes (via onChange events)
@@ -10250,97 +10990,31 @@ var FormBuilderInstance = class {
     const formData = this.validateForm(true).data;
     const checkElements = (elements, currentPath) => {
       elements.forEach((element) => {
-        const fullPath = currentPath ? `${currentPath}.${element.key}` : element.key;
+        const fullPath = currentPath ? `${currentPath}.${element.key ?? ""}` : element.key ?? "";
         if (element.enableIf) {
-          let fieldWrapper = null;
-          if (currentPath) {
-            const pathMatch = currentPath.match(/^(.+)\[(\d+)\]$/);
-            if (pathMatch) {
-              const containerKey = pathMatch[1];
-              const containerIndex = pathMatch[2];
-              const containerElement = this.state.formRoot.querySelector(
-                `[data-container-item="${containerKey}[${containerIndex}]"]`
-              );
-              if (containerElement) {
-                fieldWrapper = containerElement.querySelector(
-                  `[data-field-key="${element.key}"]`
-                );
-              }
-            } else {
-              const containerElement = this.state.formRoot.querySelector(
-                `[data-container="${currentPath}"]`
-              );
-              if (containerElement) {
-                fieldWrapper = containerElement.querySelector(
-                  `[data-field-key="${element.key}"]`
-                );
-              }
-            }
-          } else {
-            fieldWrapper = this.state.formRoot.querySelector(
-              `[data-field-key="${element.key}"]`
-            );
-          }
+          const fieldWrapper = this.findFieldWrapper(element, currentPath);
           if (fieldWrapper) {
-            const wrapper = fieldWrapper;
-            try {
-              let containerData = void 0;
-              const scope = element.enableIf.scope ?? "relative";
-              if (scope === "relative" && currentPath) {
-                containerData = getValueByPath(formData, currentPath);
-              }
-              const shouldEnable = evaluateEnableCondition(
-                element.enableIf,
-                formData,
-                // Use complete formData for absolute scope
-                containerData
-                // Use container-specific data for relative scope
-              );
-              const isCurrentlyDisabled = wrapper.getAttribute("data-conditionally-disabled") === "true";
-              if (shouldEnable && isCurrentlyDisabled) {
-                const containerPrefill = currentPath ? getValueByPath(formData, currentPath) : formData;
-                const prefillContext = containerPrefill && typeof containerPrefill === "object" ? containerPrefill : {};
-                const newWrapper = renderElement2(element, {
-                  path: currentPath,
-                  // Use container path (empty string for root-level)
-                  prefill: prefillContext,
-                  formData,
-                  // Pass complete formData for enableIf evaluation
-                  state: this.state,
-                  instance: this
-                });
-                wrapper.parentNode?.replaceChild(newWrapper, wrapper);
-              } else if (!shouldEnable && !isCurrentlyDisabled) {
-                const disabledWrapper = document.createElement("div");
-                disabledWrapper.className = "fb-field-wrapper-disabled";
-                disabledWrapper.style.display = "none";
-                disabledWrapper.setAttribute("data-field-key", element.key);
-                disabledWrapper.setAttribute(
-                  "data-conditionally-disabled",
-                  "true"
-                );
-                wrapper.parentNode?.replaceChild(disabledWrapper, wrapper);
-              }
-            } catch (error) {
-              console.error(
-                `Error re-evaluating enableIf for field "${element.key}" at path "${fullPath}":`,
-                error
-              );
-            }
+            this.applyEnableIfVisibility(
+              element,
+              fieldWrapper,
+              currentPath,
+              fullPath,
+              formData
+            );
           }
         }
         if ((element.type === "container" || element.type === "group") && "elements" in element && element.elements) {
-          const containerData = formData?.[element.key];
+          const containerData = element.key ? formData?.[element.key] : void 0;
           if (Array.isArray(containerData)) {
             const containerItems = this.state.formRoot.querySelectorAll(
               `[data-container-item]`
             );
-            const directItems = Array.from(containerItems).filter((el) => {
+            const directItems = fullPath ? Array.from(containerItems).filter((el) => {
               const attr = el.getAttribute("data-container-item") || "";
               if (!attr.startsWith(`${fullPath}[`)) return false;
               const suffix = attr.slice(fullPath.length);
               return /^\[\d+\]$/.test(suffix);
-            });
+            }) : [];
             directItems.forEach((el) => {
               const attr = el.getAttribute("data-container-item") || "";
               checkElements(element.elements, attr);