@dmitryvim/form-builder 0.2.19 → 0.2.21

package/dist/esm/index.js

@@ -218,6 +218,11 @@ function pathJoin(base, key) {
 function clear(node) {
   while (node.firstChild) node.removeChild(node.firstChild);
 }
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
 
 // src/utils/enable-conditions.ts
 function getValueByPath(data, path) {
@@ -4708,25 +4713,61 @@ function updateGroupField(element, fieldPath, value, context) {
 }
 
 // src/components/table.ts
+function isLegacyMerge(m) {
+  return m !== null && typeof m === "object" && "row" in m && "col" in m && "rowspan" in m && "colspan" in m;
+}
+function isValidMergeShape(m) {
+  if (m === null || typeof m !== "object") return false;
+  const o = m;
+  return typeof o.top === "number" && typeof o.left === "number" && typeof o.bottom === "number" && typeof o.right === "number";
+}
+function migrateMerge(m) {
+  if (isLegacyMerge(m)) {
+    return {
+      top: m.row,
+      left: m.col,
+      bottom: m.row + m.rowspan - 1,
+      right: m.col + m.colspan - 1
+    };
+  }
+  if (isValidMergeShape(m)) return m;
+  return null;
+}
+function migrateMerges(merges) {
+  return merges.map(migrateMerge).filter((m) => m !== null);
+}
 function createEmptyCells(rows, cols) {
   return Array.from(
     { length: rows },
     () => Array.from({ length: cols }, () => "")
   );
 }
+function validateMerges(merges, rows, cols) {
+  for (let i = 0; i < merges.length; i++) {
+    const a = merges[i];
+    if (a.top < 0 || a.left < 0 || a.bottom >= rows || a.right >= cols || a.top > a.bottom || a.left > a.right)
+      return `Merge ${i} out of bounds`;
+    for (let j = i + 1; j < merges.length; j++) {
+      const b = merges[j];
+      if (a.top <= b.bottom && a.bottom >= b.top && a.left <= b.right && a.right >= b.left)
+        return `Merges ${i} and ${j} overlap`;
+    }
+  }
+  return null;
+}
 function getShadowingMerge(row, col, merges) {
   for (const m of merges) {
-    if (m.row === row && m.col === col) {
+    if (m.top === row && m.left === col) {
       return null;
     }
-    if (row >= m.row && row < m.row + m.rowspan && col >= m.col && col < m.col + m.colspan) {
+    if (row >= m.top && row <= m.bottom && col >= m.left && col <= m.right) {
       return m;
     }
   }
   return null;
 }
 function getMergeAt(row, col, merges) {
-  return merges.find((m) => m.row === row && m.col === col) ?? null;
+  return merges.find((m) => m.top === row && m.left === col) ?? null;
 }
 function selectionRange(sel) {
   if (!sel.anchor) return null;
@@ -4800,8 +4841,10 @@ function renderReadonlyTable(data, wrapper) {
       const merge = getMergeAt(rIdx, cIdx, merges);
       const td = document.createElement(rIdx === 0 ? "th" : "td");
       if (merge) {
-        if (merge.rowspan > 1) td.rowSpan = merge.rowspan;
-        if (merge.colspan > 1) td.colSpan = merge.colspan;
+        const rowspan = merge.bottom - merge.top + 1;
+        const colspan = merge.right - merge.left + 1;
+        if (rowspan > 1) td.rowSpan = rowspan;
+        if (colspan > 1) td.colSpan = colspan;
       }
       td.textContent = rowData[cIdx] ?? "";
       td.style.cssText = `
@@ -4886,21 +4929,55 @@ function startCellEditing(span, r, c, getCells, persistValue, selectCell) {
   span.addEventListener("keydown", onKeyDown);
   span.addEventListener("blur", onBlur);
 }
+function ensureSpinKeyframes() {
+  if (document.getElementById("fb-spin-keyframes")) return;
+  const style = document.createElement("style");
+  style.id = "fb-spin-keyframes";
+  style.textContent = `@keyframes fb-spin { to { transform: rotate(360deg); } }`;
+  document.head.appendChild(style);
+}
+function showLoadingOverlay(parent, text) {
+  ensureSpinKeyframes();
+  const overlay = document.createElement("div");
+  overlay.className = "fb-table-loading-overlay";
+  overlay.style.cssText = `
+    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(255,255,255,0.8); display: flex;
+    align-items: center; justify-content: center; flex-direction: column;
+    gap: 8px; z-index: 100;
+  `;
+  const spinner = document.createElement("div");
+  spinner.style.cssText = `
+    width: 24px; height: 24px; border: 3px solid var(--fb-border-color, #ccc);
+    border-top-color: var(--fb-primary-color, #0066cc); border-radius: 50%;
+    animation: fb-spin 0.8s linear infinite;
+  `;
+  const label = document.createElement("span");
+  label.textContent = text;
+  label.style.cssText = `font-size: var(--fb-font-size-small, 12px); color: var(--fb-text-color, #333);`;
+  overlay.appendChild(spinner);
+  overlay.appendChild(label);
+  parent.appendChild(overlay);
+  return overlay;
+}
 function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
   const state = ctx.state;
   const instance = ctx.instance;
+  const mergeAllowed = element.mergeAllowed !== false;
+  const cellsKey = element.fieldNames?.cells ?? "cells";
+  const mergesKey = element.fieldNames?.merges ?? "merges";
   const cells = initialData.cells.length > 0 ? initialData.cells.map((r) => [...r]) : createEmptyCells(element.rows ?? 3, element.columns ?? 3);
   let merges = initialData.merges ? [...initialData.merges] : [];
   const sel = { anchor: null, focus: null, dragging: false };
   const hiddenInput = document.createElement("input");
   hiddenInput.type = "hidden";
   hiddenInput.name = pathKey;
-  hiddenInput.value = JSON.stringify({ cells, merges });
+  hiddenInput.value = JSON.stringify({ [cellsKey]: cells, [mergesKey]: merges });
   wrapper.appendChild(hiddenInput);
   function persistValue() {
-    hiddenInput.value = JSON.stringify({ cells, merges });
+    hiddenInput.value = JSON.stringify({ [cellsKey]: cells, [mergesKey]: merges });
     if (instance) {
-      instance.triggerOnChange(pathKey, { cells, merges });
+      instance.triggerOnChange(pathKey, { [cellsKey]: cells, [mergesKey]: merges });
     }
   }
   hiddenInput._applyExternalUpdate = (data) => {
@@ -4926,6 +5003,113 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     table-layout: fixed;
   `;
   tableWrapper.appendChild(tableEl);
+  const acceptExts = element.importAccept?.map((ext) => `.${ext.toLowerCase()}`) ?? [];
+  async function importFile(file) {
+    if (!state.config.parseTableFile) return;
+    if (acceptExts.length > 0) {
+      const ext = file.name.toLowerCase().replace(/^.*(\.[^.]+)$/, "$1");
+      if (!acceptExts.includes(ext)) return;
+    }
+    const overlay = showLoadingOverlay(
+      tableWrapper,
+      t("tableImporting", state)
+    );
+    try {
+      const result = await state.config.parseTableFile(file);
+      const importedCells = result.cells;
+      const importedMerges = result.merges ?? [];
+      if (importedMerges.length > 0) {
+        const err = validateMerges(
+          importedMerges,
+          importedCells.length,
+          importedCells[0]?.length ?? 0
+        );
+        if (err) throw new Error(err);
+      }
+      cells.length = 0;
+      importedCells.forEach((row) => cells.push([...row]));
+      merges.length = 0;
+      importedMerges.forEach((m) => merges.push({ ...m }));
+      sel.anchor = null;
+      sel.focus = null;
+      persistValue();
+      rebuild();
+    } catch (e) {
+      const errMsg = e instanceof Error ? e.message : String(e);
+      console.error(
+        t("tableImportError", state).replace("{error}", errMsg)
+      );
+    } finally {
+      overlay.remove();
+    }
+  }
+  if (element.importAccept && state.config.parseTableFile) {
+    const importBtn = document.createElement("button");
+    importBtn.type = "button";
+    importBtn.title = t("tableImportFile", state);
+    importBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>`;
+    importBtn.style.cssText = `
+      position: absolute; top: 2px; left: 2px;
+      width: 20px; height: 20px;
+      padding: 0;
+      display: flex; align-items: center; justify-content: center;
+      color: var(--fb-text-color, #999);
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      z-index: 2;
+    `;
+    importBtn.addEventListener("mouseenter", () => {
+      importBtn.style.color = "var(--fb-primary-color, #0066cc)";
+    });
+    importBtn.addEventListener("mouseleave", () => {
+      importBtn.style.color = "var(--fb-text-color, #999)";
+    });
+    const importInput = document.createElement("input");
+    importInput.type = "file";
+    importInput.accept = acceptExts.join(",");
+    importInput.style.display = "none";
+    tableWrapper.appendChild(importInput);
+    importBtn.addEventListener("click", () => {
+      importInput.click();
+    });
+    importInput.addEventListener("change", () => {
+      const file = importInput.files?.[0];
+      if (file) importFile(file);
+      importInput.value = "";
+    });
+    tableWrapper.appendChild(importBtn);
+    let dragCounter = 0;
+    tableWrapper.addEventListener("dragenter", (e) => {
+      e.preventDefault();
+      dragCounter++;
+      if (dragCounter === 1) {
+        tableWrapper.style.outline = "2px dashed var(--fb-primary-color, #0066cc)";
+        tableWrapper.style.outlineOffset = "-2px";
+      }
+    });
+    tableWrapper.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+    });
+    tableWrapper.addEventListener("dragleave", (e) => {
+      e.preventDefault();
+      dragCounter--;
+      if (dragCounter <= 0) {
+        dragCounter = 0;
+        tableWrapper.style.outline = "";
+        tableWrapper.style.outlineOffset = "";
+      }
+    });
+    tableWrapper.addEventListener("drop", (e) => {
+      e.preventDefault();
+      dragCounter = 0;
+      tableWrapper.style.outline = "";
+      tableWrapper.style.outlineOffset = "";
+      const file = e.dataTransfer?.files?.[0];
+      if (file) importFile(file);
+    });
+  }
   wrapper.appendChild(tableWrapper);
   const contextMenu = document.createElement("div");
   contextMenu.style.cssText = `
@@ -4969,6 +5153,7 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     return btn;
   }
   function showContextMenu(x, y) {
+    if (!mergeAllowed) return;
     contextMenu.innerHTML = "";
     contextMenu.style.display = "flex";
     const range = selectionRange(sel);
@@ -5051,11 +5236,11 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     const insertAt = afterIndex !== void 0 ? afterIndex + 1 : cells.length;
     cells.splice(insertAt, 0, newRow);
     merges = merges.map((m) => {
-      if (m.row >= insertAt) {
-        return { ...m, row: m.row + 1 };
+      if (m.top >= insertAt) {
+        return { ...m, top: m.top + 1, bottom: m.bottom + 1 };
       }
-      if (m.row < insertAt && m.row + m.rowspan > insertAt) {
-        return { ...m, rowspan: m.rowspan + 1 };
+      if (m.top < insertAt && m.bottom >= insertAt) {
+        return { ...m, bottom: m.bottom + 1 };
       }
       return m;
     });
@@ -5066,19 +5251,18 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     if (cells.length <= 1) return;
     const rowToRemove = targetRow !== void 0 ? targetRow : sel.anchor ? sel.anchor.row : cells.length - 1;
     merges = merges.map((m) => {
-      const mEndRow = m.row + m.rowspan - 1;
-      if (m.row === rowToRemove && m.rowspan === 1) return null;
-      if (m.row === rowToRemove) {
-        return { ...m, row: m.row + 1, rowspan: m.rowspan - 1 };
+      if (m.top === rowToRemove && m.bottom === rowToRemove) return null;
+      if (m.top === rowToRemove) {
+        return { ...m, bottom: m.bottom - 1 };
       }
-      if (mEndRow === rowToRemove) {
-        return { ...m, rowspan: m.rowspan - 1 };
+      if (m.bottom === rowToRemove) {
+        return { ...m, bottom: m.bottom - 1 };
       }
-      if (m.row < rowToRemove && mEndRow > rowToRemove) {
-        return { ...m, rowspan: m.rowspan - 1 };
+      if (m.top < rowToRemove && m.bottom > rowToRemove) {
+        return { ...m, bottom: m.bottom - 1 };
       }
-      if (m.row > rowToRemove) {
-        return { ...m, row: m.row - 1 };
+      if (m.top > rowToRemove) {
+        return { ...m, top: m.top - 1, bottom: m.bottom - 1 };
       }
       return m;
     }).filter((m) => m !== null);
@@ -5093,11 +5277,11 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     const insertAt = afterIndex !== void 0 ? afterIndex + 1 : cells[0]?.length ?? 0;
     cells.forEach((row) => row.splice(insertAt, 0, ""));
     merges = merges.map((m) => {
-      if (m.col >= insertAt) {
-        return { ...m, col: m.col + 1 };
+      if (m.left >= insertAt) {
+        return { ...m, left: m.left + 1, right: m.right + 1 };
       }
-      if (m.col < insertAt && m.col + m.colspan > insertAt) {
-        return { ...m, colspan: m.colspan + 1 };
+      if (m.left < insertAt && m.right >= insertAt) {
+        return { ...m, right: m.right + 1 };
       }
       return m;
     });
@@ -5108,19 +5292,18 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     if (cells.length === 0 || cells[0].length <= 1) return;
     const colToRemove = targetCol !== void 0 ? targetCol : sel.anchor ? sel.anchor.col : cells[0].length - 1;
     merges = merges.map((m) => {
-      const mEndCol = m.col + m.colspan - 1;
-      if (m.col === colToRemove && m.colspan === 1) return null;
-      if (m.col === colToRemove) {
-        return { ...m, col: m.col + 1, colspan: m.colspan - 1 };
+      if (m.left === colToRemove && m.right === colToRemove) return null;
+      if (m.left === colToRemove) {
+        return { ...m, right: m.right - 1 };
       }
-      if (mEndCol === colToRemove) {
-        return { ...m, colspan: m.colspan - 1 };
+      if (m.right === colToRemove) {
+        return { ...m, right: m.right - 1 };
       }
-      if (m.col < colToRemove && mEndCol > colToRemove) {
-        return { ...m, colspan: m.colspan - 1 };
+      if (m.left < colToRemove && m.right > colToRemove) {
+        return { ...m, right: m.right - 1 };
       }
-      if (m.col > colToRemove) {
-        return { ...m, col: m.col - 1 };
+      if (m.left > colToRemove) {
+        return { ...m, left: m.left - 1, right: m.right - 1 };
       }
       return m;
     }).filter((m) => m !== null);
@@ -5132,14 +5315,13 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     rebuild();
   }
   function mergeCells() {
+    if (!mergeAllowed) return;
     const range = selectionRange(sel);
     if (!range) return;
     const { r1, c1, r2, c2 } = range;
     if (r1 === r2 && c1 === c2) return;
     merges = merges.filter((m) => {
-      const mEndRow = m.row + m.rowspan - 1;
-      const mEndCol = m.col + m.colspan - 1;
-      const overlaps = m.row <= r2 && mEndRow >= r1 && m.col <= c2 && mEndCol >= c1;
+      const overlaps = m.top <= r2 && m.bottom >= r1 && m.left <= c2 && m.right >= c1;
       return !overlaps;
     });
     const anchorText = cells[r1][c1];
@@ -5151,16 +5333,24 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
       }
     }
     cells[r1][c1] = anchorText;
-    merges.push({ row: r1, col: c1, rowspan: r2 - r1 + 1, colspan: c2 - c1 + 1 });
+    const newMerge = { top: r1, left: c1, bottom: r2, right: c2 };
+    const testMerges = [...merges, newMerge];
+    const err = validateMerges(testMerges, cells.length, cells[0]?.length ?? 0);
+    if (err) {
+      console.warn("Merge validation failed:", err);
+      return;
+    }
+    merges.push(newMerge);
     sel.anchor = { row: r1, col: c1 };
     sel.focus = null;
     persistValue();
     rebuild();
   }
   function splitCell() {
+    if (!mergeAllowed) return;
     if (!sel.anchor) return;
     const { row, col } = sel.anchor;
-    const mIdx = merges.findIndex((m) => m.row === row && m.col === col);
+    const mIdx = merges.findIndex((m) => m.top === row && m.left === col);
     if (mIdx === -1) return;
     merges.splice(mIdx, 1);
     sel.focus = null;
@@ -5184,8 +5374,10 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
         td.setAttribute("data-row", String(rIdx));
         td.setAttribute("data-col", String(cIdx));
         if (merge) {
-          if (merge.rowspan > 1) td.rowSpan = merge.rowspan;
-          if (merge.colspan > 1) td.colSpan = merge.colspan;
+          const rowspan = merge.bottom - merge.top + 1;
+          const colspan = merge.right - merge.left + 1;
+          if (rowspan > 1) td.rowSpan = rowspan;
+          if (colspan > 1) td.colSpan = colspan;
         }
         const inRange = range !== null && rIdx >= range.r1 && rIdx <= range.r2 && cIdx >= range.c1 && cIdx <= range.c2;
         const isAnchor = sel.anchor !== null && sel.anchor.row === rIdx && sel.anchor.col === cIdx;
@@ -5248,6 +5440,7 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
           }
         });
         td.addEventListener("contextmenu", (e) => {
+          if (!mergeAllowed) return;
           const currentRange = selectionRange(sel);
           const isMulti = currentRange && (currentRange.r1 !== currentRange.r2 || currentRange.c1 !== currentRange.c2);
           const isMerged = sel.anchor && getMergeAt(sel.anchor.row, sel.anchor.col, merges);
@@ -5308,12 +5501,12 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
         selectCell(nr, nc);
         return;
       }
-      if (e.key === "m" && e.ctrlKey && !e.shiftKey) {
+      if (mergeAllowed && e.key === "m" && e.ctrlKey && !e.shiftKey) {
         e.preventDefault();
         mergeCells();
         return;
       }
-      if (e.key === "M" && e.ctrlKey && e.shiftKey) {
+      if (mergeAllowed && e.key === "M" && e.ctrlKey && e.shiftKey) {
         e.preventDefault();
         splitCell();
       }
@@ -5656,10 +5849,49 @@ function defaultTableData(element) {
 function isTableData(v) {
   return v !== null && typeof v === "object" && "cells" in v && Array.isArray(v.cells);
 }
+function isTableDataWithFieldNames(v, cellsKey) {
+  return v !== null && typeof v === "object" && cellsKey in v && Array.isArray(v[cellsKey]);
+}
 function renderTableElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const rawPrefill = ctx.prefill[element.key];
-  const initialData = isTableData(rawPrefill) ? rawPrefill : isTableData(element.default) ? element.default : defaultTableData(element);
+  const cellsKey = element.fieldNames?.cells ?? "cells";
+  const mergesKey = element.fieldNames?.merges ?? "merges";
+  let initialData;
+  if (isTableData(rawPrefill)) {
+    initialData = {
+      cells: rawPrefill.cells,
+      merges: rawPrefill.merges ? migrateMerges(rawPrefill.merges) : []
+    };
+  } else if (rawPrefill && isTableDataWithFieldNames(rawPrefill, cellsKey)) {
+    const rawMerges = rawPrefill[mergesKey];
+    initialData = {
+      cells: rawPrefill[cellsKey],
+      merges: rawMerges ? migrateMerges(rawMerges) : []
+    };
+  } else if (isTableData(element.default)) {
+    initialData = {
+      cells: element.default.cells,
+      merges: element.default.merges ? migrateMerges(element.default.merges) : []
+    };
+  } else if (element.default && isTableDataWithFieldNames(element.default, cellsKey)) {
+    const rawMerges = element.default[mergesKey];
+    initialData = {
+      cells: element.default[cellsKey],
+      merges: rawMerges ? migrateMerges(rawMerges) : []
+    };
+  } else {
+    initialData = defaultTableData(element);
+  }
+  if (initialData.merges && initialData.merges.length > 0) {
+    const rows = initialData.cells.length;
+    const cols = rows > 0 ? initialData.cells[0].length : 0;
+    const err = validateMerges(initialData.merges, rows, cols);
+    if (err) {
+      console.warn(`Table "${element.key}": invalid prefill merges stripped (${err})`);
+      initialData = { ...initialData, merges: [] };
+    }
+  }
   if (state.config.readonly) {
     renderReadonlyTable(initialData, wrapper);
   } else {
@@ -5669,6 +5901,7 @@ function renderTableElement(element, ctx, wrapper, pathKey) {
 function validateTableElement(element, key, context) {
   const { scopeRoot, skipValidation } = context;
   const errors = [];
+  const cellsKey = element.fieldNames?.cells ?? "cells";
   const hiddenInput = scopeRoot.querySelector(
     `[name="${key}"]`
   );
@@ -5683,7 +5916,8 @@ function validateTableElement(element, key, context) {
     return { value: null, errors };
   }
   if (!skipValidation && element.required) {
-    const hasContent = value.cells.some(
+    const cells = value[cellsKey];
+    const hasContent = cells?.some(
       (row) => row.some((cell) => cell.trim() !== "")
     );
     if (!hasContent) {
@@ -5692,8 +5926,10 @@ function validateTableElement(element, key, context) {
   }
   return { value, errors };
 }
-function updateTableField(_element, fieldPath, value, context) {
+function updateTableField(element, fieldPath, value, context) {
   const { scopeRoot } = context;
+  const cellsKey = element.fieldNames?.cells ?? "cells";
+  const mergesKey = element.fieldNames?.merges ?? "merges";
   const hiddenInput = scopeRoot.querySelector(
     `[name="${fieldPath}"]`
   );
@@ -5703,13 +5939,1293 @@ function updateTableField(_element, fieldPath, value, context) {
     );
     return;
   }
-  if (isTableData(value) && hiddenInput._applyExternalUpdate) {
-    hiddenInput._applyExternalUpdate(value);
+  let tableData = null;
+  if (isTableData(value)) {
+    tableData = {
+      cells: value.cells,
+      merges: value.merges ? migrateMerges(value.merges) : []
+    };
+  } else if (value && isTableDataWithFieldNames(value, cellsKey)) {
+    const rawMerges = value[mergesKey];
+    tableData = {
+      cells: value[cellsKey],
+      merges: rawMerges ? migrateMerges(rawMerges) : []
+    };
+  }
+  if (tableData && hiddenInput._applyExternalUpdate) {
+    hiddenInput._applyExternalUpdate(tableData);
   } else {
     hiddenInput.value = JSON.stringify(value);
   }
 }
 
+// src/components/richinput.ts
+function applyAutoExpand2(textarea, backdrop) {
+  textarea.style.overflow = "hidden";
+  textarea.style.resize = "none";
+  const lineCount = (textarea.value.match(/\n/g) || []).length + 1;
+  textarea.rows = Math.max(3, lineCount);
+  const resize = () => {
+    if (!textarea.isConnected) return;
+    textarea.style.height = "0";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+    if (backdrop) {
+      backdrop.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+  textarea.addEventListener("input", resize);
+  setTimeout(() => {
+    if (textarea.isConnected) resize();
+  }, 0);
+}
+function buildFileLabels(files, state) {
+  const labels = /* @__PURE__ */ new Map();
+  const nameCount = /* @__PURE__ */ new Map();
+  for (const rid of files) {
+    const meta = state.resourceIndex.get(rid);
+    const name = meta?.name ?? rid;
+    nameCount.set(name, (nameCount.get(name) ?? 0) + 1);
+  }
+  for (const rid of files) {
+    const meta = state.resourceIndex.get(rid);
+    const name = meta?.name ?? rid;
+    if ((nameCount.get(name) ?? 1) > 1 && meta) {
+      labels.set(rid, `${name} (${formatFileSize(meta.size)})`);
+    } else {
+      labels.set(rid, name);
+    }
+  }
+  return labels;
+}
+function isImageMeta(meta) {
+  if (!meta) return false;
+  return meta.type.startsWith("image/");
+}
+function buildNameToRid(files, state) {
+  const labels = buildFileLabels(files, state);
+  const map = /* @__PURE__ */ new Map();
+  for (const rid of files) {
+    const label = labels.get(rid);
+    if (label) map.set(label, rid);
+  }
+  return map;
+}
+function formatMention(name) {
+  if (/\s/.test(name) || name.includes('"')) {
+    return `@"${name.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+  }
+  return `@${name}`;
+}
+function findAtTokens(text) {
+  const tokens = [];
+  const len = text.length;
+  let i = 0;
+  while (i < len) {
+    if (text[i] === "@") {
+      if (i > 0 && !/\s/.test(text[i - 1])) {
+        i++;
+        continue;
+      }
+      const start = i;
+      i++;
+      if (i < len && text[i] === '"') {
+        i++;
+        let name = "";
+        while (i < len && text[i] !== '"') {
+          if (text[i] === "\\" && i + 1 < len) {
+            name += text[i + 1];
+            i += 2;
+          } else {
+            name += text[i];
+            i++;
+          }
+        }
+        if (i < len && text[i] === '"') {
+          i++;
+          if (i >= len || /\s/.test(text[i])) {
+            tokens.push({ start, end: i, raw: text.slice(start, i), name });
+          }
+        }
+      } else if (i < len && !/\s/.test(text[i])) {
+        const wordStart = i;
+        while (i < len && !/\s/.test(text[i])) {
+          i++;
+        }
+        const name = text.slice(wordStart, i);
+        tokens.push({ start, end: i, raw: text.slice(start, i), name });
+      }
+    } else {
+      i++;
+    }
+  }
+  return tokens;
+}
+function findMentions(text, nameToRid) {
+  if (nameToRid.size === 0) return [];
+  const tokens = findAtTokens(text);
+  const results = [];
+  for (const token of tokens) {
+    const rid = nameToRid.get(token.name);
+    if (rid) {
+      results.push({
+        start: token.start,
+        end: token.end,
+        name: token.name,
+        rid
+      });
+    }
+  }
+  return results;
+}
+function replaceFilenamesWithRids(text, nameToRid) {
+  const mentions = findMentions(text, nameToRid);
+  if (mentions.length === 0) return text;
+  let result = "";
+  let lastIdx = 0;
+  for (const m of mentions) {
+    result += text.slice(lastIdx, m.start);
+    result += `@${m.rid}`;
+    lastIdx = m.end;
+  }
+  result += text.slice(lastIdx);
+  return result;
+}
+function replaceRidsWithFilenames(text, files, state) {
+  const labels = buildFileLabels(files, state);
+  const ridToLabel = /* @__PURE__ */ new Map();
+  for (const rid of files) {
+    const label = labels.get(rid);
+    if (label) ridToLabel.set(rid, label);
+  }
+  const tokens = findAtTokens(text);
+  if (tokens.length === 0) return text;
+  let result = "";
+  let lastIdx = 0;
+  for (const token of tokens) {
+    result += text.slice(lastIdx, token.start);
+    const label = ridToLabel.get(token.name);
+    if (label) {
+      result += formatMention(label);
+    } else {
+      result += token.raw;
+    }
+    lastIdx = token.end;
+  }
+  result += text.slice(lastIdx);
+  return result;
+}
+function renderThumbContent(thumb, rid, meta, state) {
+  clear(thumb);
+  if (meta?.file && isImageMeta(meta)) {
+    const img = document.createElement("img");
+    img.alt = meta.name;
+    img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      img.src = e.target?.result || "";
+    };
+    reader.readAsDataURL(meta.file);
+    thumb.appendChild(img);
+  } else if (state.config.getThumbnail) {
+    state.config.getThumbnail(rid).then((url) => {
+      if (!url || !thumb.isConnected) return;
+      const img = document.createElement("img");
+      img.alt = meta?.name ?? rid;
+      img.src = url;
+      img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
+      clear(thumb);
+      thumb.appendChild(img);
+    }).catch((err) => {
+      state.config.onThumbnailError?.(err, rid);
+    });
+    const placeholder = document.createElement("div");
+    placeholder.style.cssText = "width: 100%; height: 100%; background: var(--fb-background-hover-color, #f3f4f6); display: flex; align-items: center; justify-content: center;";
+    placeholder.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
+    thumb.appendChild(placeholder);
+  } else {
+    const icon = document.createElement("div");
+    icon.style.cssText = "width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; box-sizing: border-box;";
+    icon.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+    if (meta?.name) {
+      const nameEl = document.createElement("span");
+      nameEl.style.cssText = "font-size: 9px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44px; color: var(--fb-text-color, #111827);";
+      nameEl.textContent = meta.name;
+      icon.appendChild(nameEl);
+    }
+    thumb.appendChild(icon);
+  }
+}
+function renderImagePreview(hoverEl, rid, meta, state) {
+  clear(hoverEl);
+  if (meta?.file && isImageMeta(meta)) {
+    const img = document.createElement("img");
+    img.alt = meta.name;
+    img.style.cssText = "max-width: 120px; max-height: 120px; object-fit: contain; display: block;";
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      img.src = e.target?.result || "";
+    };
+    reader.readAsDataURL(meta.file);
+    hoverEl.appendChild(img);
+  } else if (state.config.getThumbnail) {
+    state.config.getThumbnail(rid).then((url) => {
+      if (!url || !hoverEl.isConnected) return;
+      const img = document.createElement("img");
+      img.alt = meta?.name ?? rid;
+      img.src = url;
+      img.style.cssText = "max-width: 120px; max-height: 120px; object-fit: contain; display: block;";
+      clear(hoverEl);
+      hoverEl.appendChild(img);
+    }).catch((err) => {
+      state.config.onThumbnailError?.(err, rid);
+    });
+  }
+}
+function positionPortalTooltip(tooltip, anchor) {
+  const rect = anchor.getBoundingClientRect();
+  const ttRect = tooltip.getBoundingClientRect();
+  const left = Math.max(
+    4,
+    Math.min(
+      rect.left + rect.width / 2 - ttRect.width / 2,
+      window.innerWidth - ttRect.width - 4
+    )
+  );
+  const topAbove = rect.top - ttRect.height - 8;
+  const topBelow = rect.bottom + 8;
+  const top = topAbove >= 4 ? topAbove : topBelow;
+  tooltip.style.left = `${left}px`;
+  tooltip.style.top = `${Math.max(4, top)}px`;
+}
+function showMentionTooltip(anchor, rid, state) {
+  const meta = state.resourceIndex.get(rid);
+  const tooltip = document.createElement("div");
+  tooltip.className = "fb-richinput-portal-tooltip fb-richinput-mention-tooltip";
+  tooltip.style.cssText = `
+    position: fixed;
+    z-index: 99999;
+    background: #fff;
+    border: 1px solid var(--fb-border-color, #d1d5db);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    padding: 4px;
+    pointer-events: none;
+    min-width: 60px;
+    max-width: 140px;
+  `;
+  const preview = document.createElement("div");
+  preview.style.cssText = "min-height: 60px; max-height: 120px; display: flex; align-items: center; justify-content: center;";
+  renderImagePreview(preview, rid, meta, state);
+  tooltip.appendChild(preview);
+  document.body.appendChild(tooltip);
+  positionPortalTooltip(tooltip, anchor);
+  return tooltip;
+}
+function showFileTooltip(anchor, opts) {
+  const { rid, state, isReadonly, onMention, onRemove } = opts;
+  const meta = state.resourceIndex.get(rid);
+  const filename = meta?.name ?? rid;
+  const tooltip = document.createElement("div");
+  tooltip.className = "fb-richinput-portal-tooltip fb-richinput-file-tooltip";
+  tooltip.style.cssText = `
+    position: fixed;
+    z-index: 99999;
+    background: #fff;
+    border: 1px solid var(--fb-border-color, #d1d5db);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    padding: 4px;
+    pointer-events: auto;
+    min-width: 80px;
+    max-width: 260px;
+  `;
+  const preview = document.createElement("div");
+  preview.style.cssText = "min-height: 60px; max-height: 120px; display: flex; align-items: center; justify-content: center;";
+  renderImagePreview(preview, rid, meta, state);
+  tooltip.appendChild(preview);
+  const nameEl = document.createElement("div");
+  nameEl.style.cssText = "padding: 4px 6px 2px; font-size: 12px; color: var(--fb-text-color, #111827); word-break: break-word; border-top: 1px solid var(--fb-border-color, #d1d5db);";
+  nameEl.textContent = filename;
+  tooltip.appendChild(nameEl);
+  const actionsRow = document.createElement("div");
+  actionsRow.style.cssText = "display: flex; align-items: center; gap: 2px; padding: 3px 4px 2px; border-top: 1px solid var(--fb-border-color, #d1d5db); justify-content: center;";
+  const btnStyle = "background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: 4px; color: var(--fb-text-muted-color, #6b7280); display: flex; align-items: center; transition: background 0.1s, color 0.1s;";
+  const btnHoverIn = (btn) => {
+    btn.style.background = "var(--fb-background-hover-color, #f3f4f6)";
+    btn.style.color = "var(--fb-text-color, #111827)";
+  };
+  const btnHoverOut = (btn) => {
+    btn.style.background = "none";
+    btn.style.color = "var(--fb-text-muted-color, #6b7280)";
+  };
+  if (!isReadonly && onMention) {
+    const mentionBtn = document.createElement("button");
+    mentionBtn.type = "button";
+    mentionBtn.title = "Mention";
+    mentionBtn.style.cssText = btnStyle;
+    mentionBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/></svg>';
+    mentionBtn.addEventListener("mouseenter", () => btnHoverIn(mentionBtn));
+    mentionBtn.addEventListener("mouseleave", () => btnHoverOut(mentionBtn));
+    mentionBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onMention();
+      tooltip.remove();
+    });
+    actionsRow.appendChild(mentionBtn);
+  }
+  if (state.config.downloadFile) {
+    const dlBtn = document.createElement("button");
+    dlBtn.type = "button";
+    dlBtn.title = "Download";
+    dlBtn.style.cssText = btnStyle;
+    dlBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="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>';
+    dlBtn.addEventListener("mouseenter", () => btnHoverIn(dlBtn));
+    dlBtn.addEventListener("mouseleave", () => btnHoverOut(dlBtn));
+    dlBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      state.config.downloadFile?.(rid, filename);
+    });
+    actionsRow.appendChild(dlBtn);
+  }
+  const hasOpenUrl = !!(state.config.getDownloadUrl ?? state.config.getThumbnail);
+  if (hasOpenUrl) {
+    const openBtn = document.createElement("button");
+    openBtn.type = "button";
+    openBtn.title = "Open in new window";
+    openBtn.style.cssText = btnStyle;
+    openBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="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>';
+    openBtn.addEventListener("mouseenter", () => btnHoverIn(openBtn));
+    openBtn.addEventListener("mouseleave", () => btnHoverOut(openBtn));
+    openBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (state.config.getDownloadUrl) {
+        const url = state.config.getDownloadUrl(rid);
+        if (url) {
+          window.open(url, "_blank");
+        } else {
+          state.config.getThumbnail?.(rid).then((thumbUrl) => {
+            if (thumbUrl) window.open(thumbUrl, "_blank");
+          }).catch(() => {
+          });
+        }
+      } else {
+        state.config.getThumbnail?.(rid).then((url) => {
+          if (url) window.open(url, "_blank");
+        }).catch(() => {
+        });
+      }
+    });
+    actionsRow.appendChild(openBtn);
+  }
+  if (!isReadonly && onRemove) {
+    const removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.title = "Remove";
+    removeBtn.style.cssText = btnStyle;
+    removeBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>';
+    removeBtn.addEventListener("mouseenter", () => {
+      removeBtn.style.background = "var(--fb-background-hover-color, #f3f4f6)";
+      removeBtn.style.color = "var(--fb-error-color, #ef4444)";
+    });
+    removeBtn.addEventListener("mouseleave", () => btnHoverOut(removeBtn));
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      tooltip.remove();
+      onRemove();
+    });
+    actionsRow.appendChild(removeBtn);
+  }
+  const hasActions = actionsRow.children.length > 0;
+  if (hasActions) {
+    tooltip.appendChild(actionsRow);
+  }
+  document.body.appendChild(tooltip);
+  positionPortalTooltip(tooltip, anchor);
+  return tooltip;
+}
+function createTooltipHandle() {
+  return { element: null, hideTimer: null };
+}
+function scheduleHideTooltip(handle, delayMs = 150) {
+  if (handle.hideTimer !== null) return;
+  handle.hideTimer = setTimeout(() => {
+    handle.hideTimer = null;
+    if (handle.element) {
+      handle.element.remove();
+      handle.element = null;
+    }
+  }, delayMs);
+}
+function cancelHideTooltip(handle) {
+  if (handle.hideTimer !== null) {
+    clearTimeout(handle.hideTimer);
+    handle.hideTimer = null;
+  }
+}
+function removePortalTooltip(tooltip) {
+  if (tooltip) tooltip.remove();
+  return null;
+}
+function getAtTrigger(textarea) {
+  const cursorPos = textarea.selectionStart ?? 0;
+  const textBefore = textarea.value.slice(0, cursorPos);
+  for (let i = textBefore.length - 1; i >= 0; i--) {
+    if (textBefore[i] === "@") {
+      if (i === 0 || /\s/.test(textBefore[i - 1])) {
+        let query = textBefore.slice(i + 1);
+        if (query.startsWith('"')) {
+          query = query.slice(1);
+        }
+        return { query, pos: i };
+      }
+      return null;
+    }
+  }
+  return null;
+}
+function filterFilesForDropdown(query, files, labels) {
+  const lq = query.toLowerCase();
+  return files.filter((rid) => {
+    const label = labels.get(rid) ?? rid;
+    return label.toLowerCase().includes(lq);
+  });
+}
+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;";
+function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
+  const state = ctx.state;
+  const files = [...initialValue.files];
+  const dropdownState = {
+    open: false,
+    query: "",
+    triggerPos: -1,
+    selectedIndex: 0
+  };
+  const docListenerCtrl = new AbortController();
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = pathKey;
+  function getCurrentValue() {
+    const rawText = textarea.value;
+    const nameToRid = buildNameToRid(files, state);
+    const submissionText = rawText ? replaceFilenamesWithRids(rawText, nameToRid) : null;
+    const textKey = element.textKey ?? "text";
+    const filesKey = element.filesKey ?? "files";
+    return {
+      [textKey]: rawText === "" ? null : submissionText,
+      [filesKey]: [...files]
+    };
+  }
+  function writeHidden() {
+    hiddenInput.value = JSON.stringify(getCurrentValue());
+  }
+  const outerDiv = document.createElement("div");
+  outerDiv.className = "fb-richinput-wrapper";
+  outerDiv.style.cssText = `
+    position: relative;
+    border: 1px solid var(--fb-border-color, #d1d5db);
+    border-radius: 16px;
+    background: var(--fb-background-color, #f9fafb);
+    transition: box-shadow 0.15s, border-color 0.15s;
+  `;
+  outerDiv.addEventListener("focusin", () => {
+    outerDiv.style.borderColor = "var(--fb-primary-color, #0066cc)";
+    outerDiv.style.boxShadow = "0 0 0 2px color-mix(in srgb, var(--fb-primary-color, #0066cc) 25%, transparent)";
+  });
+  outerDiv.addEventListener("focusout", () => {
+    outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
+    outerDiv.style.boxShadow = "none";
+  });
+  let dragCounter = 0;
+  outerDiv.addEventListener("dragenter", (e) => {
+    e.preventDefault();
+    dragCounter++;
+    outerDiv.style.borderColor = "var(--fb-primary-color, #0066cc)";
+    outerDiv.style.boxShadow = "0 0 0 2px color-mix(in srgb, var(--fb-primary-color, #0066cc) 25%, transparent)";
+  });
+  outerDiv.addEventListener("dragover", (e) => {
+    e.preventDefault();
+  });
+  outerDiv.addEventListener("dragleave", (e) => {
+    e.preventDefault();
+    dragCounter--;
+    if (dragCounter <= 0) {
+      dragCounter = 0;
+      outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
+      outerDiv.style.boxShadow = "none";
+    }
+  });
+  outerDiv.addEventListener("drop", (e) => {
+    e.preventDefault();
+    dragCounter = 0;
+    outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
+    outerDiv.style.boxShadow = "none";
+    const droppedFiles = e.dataTransfer?.files;
+    if (!droppedFiles || !state.config.uploadFile) return;
+    const maxFiles = element.maxFiles ?? Infinity;
+    for (let i = 0; i < droppedFiles.length && files.length < maxFiles; i++) {
+      uploadFile(droppedFiles[i]);
+    }
+  });
+  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;";
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.multiple = true;
+  fileInput.style.display = "none";
+  if (element.accept) {
+    if (typeof element.accept === "string") {
+      fileInput.accept = element.accept;
+    } else {
+      fileInput.accept = element.accept.extensions.map((ext) => ext.startsWith(".") ? ext : `.${ext}`).join(",");
+    }
+  }
+  const textareaArea = document.createElement("div");
+  textareaArea.style.cssText = "position: relative;";
+  const backdrop = document.createElement("div");
+  backdrop.className = "fb-richinput-backdrop";
+  backdrop.style.cssText = `
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    ${TEXTAREA_PADDING}
+    ${TEXTAREA_FONT}
+    white-space: pre-wrap;
+    word-break: break-word;
+    color: transparent;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: inherit;
+    box-sizing: border-box;
+    z-index: 2;
+  `;
+  const textarea = document.createElement("textarea");
+  textarea.name = `${pathKey}__text`;
+  textarea.placeholder = element.placeholder || t("richinputPlaceholder", state);
+  const rawInitialText = initialValue.text ?? "";
+  textarea.value = rawInitialText ? replaceRidsWithFilenames(rawInitialText, files, state) : "";
+  textarea.style.cssText = `
+    width: 100%;
+    ${TEXTAREA_PADDING}
+    ${TEXTAREA_FONT}
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+    color: var(--fb-text-color, #111827);
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    caret-color: var(--fb-text-color, #111827);
+  `;
+  applyAutoExpand2(textarea, backdrop);
+  textarea.addEventListener("scroll", () => {
+    backdrop.scrollTop = textarea.scrollTop;
+  });
+  let mentionTooltip = null;
+  backdrop.addEventListener("mouseover", (e) => {
+    const mark = e.target.closest?.("mark");
+    if (!mark?.dataset.rid) return;
+    mentionTooltip = removePortalTooltip(mentionTooltip);
+    mentionTooltip = showMentionTooltip(mark, mark.dataset.rid, state);
+  });
+  backdrop.addEventListener("mouseout", (e) => {
+    const mark = e.target.closest?.("mark");
+    if (!mark) return;
+    const related = e.relatedTarget;
+    if (related?.closest?.("mark")) return;
+    mentionTooltip = removePortalTooltip(mentionTooltip);
+  });
+  backdrop.addEventListener("mousedown", (e) => {
+    const mark = e.target.closest?.("mark");
+    if (!mark) return;
+    mentionTooltip = removePortalTooltip(mentionTooltip);
+    const marks = backdrop.querySelectorAll("mark");
+    marks.forEach((m) => m.style.pointerEvents = "none");
+    const under = document.elementFromPoint(e.clientX, e.clientY);
+    if (under) {
+      under.dispatchEvent(
+        new MouseEvent("mousedown", {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          button: e.button,
+          buttons: e.buttons,
+          detail: e.detail
+        })
+      );
+    }
+    document.addEventListener(
+      "mouseup",
+      () => {
+        marks.forEach((m) => m.style.pointerEvents = "auto");
+      },
+      { once: true }
+    );
+  });
+  function updateBackdrop() {
+    const text = textarea.value;
+    const nameToRid = buildNameToRid(files, state);
+    const tokens = findAtTokens(text);
+    if (tokens.length === 0) {
+      backdrop.innerHTML = escapeHtml(text) + "\n";
+      return;
+    }
+    let html = "";
+    let lastIdx = 0;
+    for (const token of tokens) {
+      html += escapeHtml(text.slice(lastIdx, token.start));
+      const rid = nameToRid.get(token.name);
+      if (rid) {
+        html += `<mark data-rid="${escapeHtml(rid)}" style="background: color-mix(in srgb, var(--fb-primary-color, #0066cc) 15%, transparent); color: transparent; border-radius: 8px; padding: 0; border: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fb-primary-color, #0066cc) 15%, transparent), 0 0 0 3px color-mix(in srgb, var(--fb-primary-color, #0066cc) 30%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; pointer-events: auto; cursor: text;">${escapeHtml(text.slice(token.start, token.end))}</mark>`;
+      } else {
+        html += `<mark style="color: transparent; background: none; padding: 0; border: none; text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: rgba(239, 68, 68, 0.45); text-underline-offset: 2px;">${escapeHtml(text.slice(token.start, token.end))}</mark>`;
+      }
+      lastIdx = token.end;
+    }
+    html += escapeHtml(text.slice(lastIdx));
+    backdrop.innerHTML = html + "\n";
+  }
+  const paperclipBtn = document.createElement("button");
+  paperclipBtn.type = "button";
+  paperclipBtn.title = t("richinputAttachFile", state);
+  paperclipBtn.style.cssText = `
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 2;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fb-text-muted-color, #9ca3af);
+    transition: color 0.15s, background 0.15s;
+  `;
+  paperclipBtn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
+  paperclipBtn.addEventListener("mouseenter", () => {
+    paperclipBtn.style.color = "var(--fb-primary-color, #0066cc)";
+    paperclipBtn.style.background = "var(--fb-background-hover-color, #f3f4f6)";
+  });
+  paperclipBtn.addEventListener("mouseleave", () => {
+    paperclipBtn.style.color = "var(--fb-text-muted-color, #9ca3af)";
+    paperclipBtn.style.background = "transparent";
+  });
+  paperclipBtn.addEventListener("click", () => {
+    const maxFiles = element.maxFiles ?? Infinity;
+    if (files.length < maxFiles) {
+      fileInput.click();
+    }
+  });
+  const dropdown = document.createElement("div");
+  dropdown.className = "fb-richinput-dropdown";
+  dropdown.style.cssText = `
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    z-index: 1000;
+    background: #fff;
+    border: 1px solid var(--fb-border-color, #d1d5db);
+    border-radius: var(--fb-border-radius, 6px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    min-width: 180px;
+    max-width: 320px;
+    max-height: 200px;
+    overflow-y: auto;
+    margin-bottom: 4px;
+    ${TEXTAREA_FONT}
+  `;
+  function buildFileLabelsFromClosure() {
+    return buildFileLabels(files, state);
+  }
+  function renderDropdownItems(filtered) {
+    clear(dropdown);
+    const labels = buildFileLabelsFromClosure();
+    if (filtered.length === 0) {
+      dropdown.style.display = "none";
+      dropdownState.open = false;
+      return;
+    }
+    filtered.forEach((rid, idx) => {
+      const meta = state.resourceIndex.get(rid);
+      const item = document.createElement("div");
+      item.className = "fb-richinput-dropdown-item";
+      item.dataset.rid = rid;
+      item.style.cssText = `
+        padding: 5px 10px;
+        cursor: pointer;
+        color: var(--fb-text-color, #111827);
+        background: ${idx === dropdownState.selectedIndex ? "var(--fb-background-hover-color, #f3f4f6)" : "transparent"};
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      `;
+      const thumb = document.createElement("div");
+      thumb.style.cssText = "width: 24px; height: 24px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--fb-background-hover-color, #f3f4f6); display: flex; align-items: center; justify-content: center;";
+      if (meta?.file && isImageMeta(meta)) {
+        const img = document.createElement("img");
+        img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+          img.src = ev.target?.result || "";
+        };
+        reader.readAsDataURL(meta.file);
+        thumb.appendChild(img);
+      } else if (state.config.getThumbnail) {
+        state.config.getThumbnail(rid).then((url) => {
+          if (!url || !thumb.isConnected) return;
+          const img = document.createElement("img");
+          img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
+          img.src = url;
+          clear(thumb);
+          thumb.appendChild(img);
+        }).catch(() => {
+        });
+        thumb.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+      } else {
+        thumb.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+      }
+      item.appendChild(thumb);
+      const nameSpan = document.createElement("span");
+      nameSpan.style.cssText = "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;";
+      nameSpan.textContent = labels.get(rid) ?? rid;
+      item.appendChild(nameSpan);
+      dropdown.appendChild(item);
+    });
+    dropdown.onmousemove = (e) => {
+      const target = e.target.closest?.(
+        ".fb-richinput-dropdown-item"
+      );
+      if (!target) return;
+      const newIdx = filtered.indexOf(target.dataset.rid ?? "");
+      if (newIdx === -1 || newIdx === dropdownState.selectedIndex) return;
+      const items = dropdown.querySelectorAll(
+        ".fb-richinput-dropdown-item"
+      );
+      items.forEach((el, i) => {
+        el.style.background = i === newIdx ? "var(--fb-background-hover-color, #f3f4f6)" : "transparent";
+      });
+      dropdownState.selectedIndex = newIdx;
+    };
+    dropdown.onmousedown = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.target.closest?.(
+        ".fb-richinput-dropdown-item"
+      );
+      if (!target?.dataset.rid) return;
+      insertMention(target.dataset.rid);
+    };
+    dropdown.style.display = "block";
+    dropdownState.open = true;
+  }
+  function openDropdown() {
+    const trigger = getAtTrigger(textarea);
+    if (!trigger) {
+      closeDropdown();
+      return;
+    }
+    dropdownState.query = trigger.query;
+    dropdownState.triggerPos = trigger.pos;
+    dropdownState.selectedIndex = 0;
+    const labels = buildFileLabelsFromClosure();
+    const filtered = filterFilesForDropdown(trigger.query, files, labels);
+    renderDropdownItems(filtered);
+  }
+  function closeDropdown() {
+    dropdown.style.display = "none";
+    dropdownState.open = false;
+  }
+  function insertMention(rid) {
+    const labels = buildFileLabelsFromClosure();
+    const label = labels.get(rid) ?? state.resourceIndex.get(rid)?.name ?? rid;
+    const cursorPos = textarea.selectionStart ?? 0;
+    const before = textarea.value.slice(0, dropdownState.triggerPos);
+    const after = textarea.value.slice(cursorPos);
+    const mention = `${formatMention(label)} `;
+    textarea.value = `${before}${mention}${after}`;
+    const newPos = before.length + mention.length;
+    textarea.setSelectionRange(newPos, newPos);
+    textarea.dispatchEvent(new Event("input"));
+    closeDropdown();
+  }
+  textarea.addEventListener("input", () => {
+    updateBackdrop();
+    writeHidden();
+    ctx.instance?.triggerOnChange(pathKey, getCurrentValue());
+    if (files.length > 0) {
+      openDropdown();
+    } else {
+      closeDropdown();
+    }
+  });
+  function updateDropdownHighlight() {
+    const items = dropdown.querySelectorAll(
+      ".fb-richinput-dropdown-item"
+    );
+    items.forEach((el, i) => {
+      el.style.background = i === dropdownState.selectedIndex ? "var(--fb-background-hover-color, #f3f4f6)" : "transparent";
+    });
+  }
+  textarea.addEventListener("keydown", (e) => {
+    if (!dropdownState.open) return;
+    const labels = buildFileLabelsFromClosure();
+    const filtered = filterFilesForDropdown(
+      dropdownState.query,
+      files,
+      labels
+    );
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      dropdownState.selectedIndex = Math.min(
+        dropdownState.selectedIndex + 1,
+        filtered.length - 1
+      );
+      updateDropdownHighlight();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      dropdownState.selectedIndex = Math.max(
+        dropdownState.selectedIndex - 1,
+        0
+      );
+      updateDropdownHighlight();
+    } else if (e.key === "Enter" && filtered.length > 0) {
+      e.preventDefault();
+      insertMention(filtered[dropdownState.selectedIndex]);
+    } else if (e.key === "Escape") {
+      closeDropdown();
+    }
+  });
+  document.addEventListener(
+    "click",
+    (e) => {
+      if (!outerDiv.contains(e.target) && !dropdown.contains(e.target)) {
+        closeDropdown();
+      }
+    },
+    { signal: docListenerCtrl.signal }
+  );
+  function renderFilesRow() {
+    clear(filesRow);
+    if (files.length === 0) {
+      filesRow.style.display = "none";
+      return;
+    }
+    filesRow.style.display = "flex";
+    files.forEach((rid) => {
+      const meta = state.resourceIndex.get(rid);
+      const thumbWrapper = document.createElement("div");
+      thumbWrapper.className = "fb-richinput-file-thumb";
+      thumbWrapper.style.cssText = `
+        position: relative;
+        width: 48px;
+        height: 48px;
+        border: 1px solid var(--fb-border-color, #d1d5db);
+        border-radius: 8px;
+        overflow: hidden;
+        flex-shrink: 0;
+        cursor: pointer;
+        background: #fff;
+      `;
+      const thumbInner = document.createElement("div");
+      thumbInner.style.cssText = "width: 48px; height: 48px; border-radius: inherit; overflow: hidden;";
+      renderThumbContent(thumbInner, rid, meta, state);
+      thumbWrapper.appendChild(thumbInner);
+      const tooltipHandle = createTooltipHandle();
+      const doMention = () => {
+        const cursorPos = textarea.selectionStart ?? textarea.value.length;
+        const labels = buildFileLabelsFromClosure();
+        const label = labels.get(rid) ?? meta?.name ?? rid;
+        const before = textarea.value.slice(0, cursorPos);
+        const after = textarea.value.slice(cursorPos);
+        const prefix = before.length > 0 && !/[\s\n]$/.test(before) ? "\n" : "";
+        const mention = `${prefix}${formatMention(label)} `;
+        textarea.value = `${before}${mention}${after}`;
+        const newPos = cursorPos + mention.length;
+        textarea.setSelectionRange(newPos, newPos);
+        textarea.focus();
+        textarea.dispatchEvent(new Event("input"));
+      };
+      const doRemove = () => {
+        const idx = files.indexOf(rid);
+        if (idx !== -1) files.splice(idx, 1);
+        renderFilesRow();
+        updateBackdrop();
+        writeHidden();
+        ctx.instance?.triggerOnChange(pathKey, getCurrentValue());
+      };
+      thumbWrapper.addEventListener("mouseenter", () => {
+        cancelHideTooltip(tooltipHandle);
+        if (!tooltipHandle.element) {
+          tooltipHandle.element = showFileTooltip(thumbWrapper, {
+            rid,
+            state,
+            isReadonly: false,
+            onMention: doMention,
+            onRemove: doRemove
+          });
+          tooltipHandle.element.addEventListener("mouseenter", () => {
+            cancelHideTooltip(tooltipHandle);
+          });
+          tooltipHandle.element.addEventListener("mouseleave", () => {
+            scheduleHideTooltip(tooltipHandle);
+          });
+        }
+      });
+      thumbWrapper.addEventListener("mouseleave", () => {
+        scheduleHideTooltip(tooltipHandle);
+      });
+      filesRow.appendChild(thumbWrapper);
+    });
+  }
+  function uploadFile(file) {
+    if (!state.config.uploadFile) return;
+    const tempId = `temp-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    state.resourceIndex.set(tempId, {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      uploadedAt: /* @__PURE__ */ new Date(),
+      file
+    });
+    files.push(tempId);
+    renderFilesRow();
+    const thumbs = filesRow.querySelectorAll(
+      ".fb-richinput-file-thumb"
+    );
+    const loadingThumb = thumbs[thumbs.length - 1];
+    if (loadingThumb) loadingThumb.style.opacity = "0.5";
+    state.config.uploadFile(file).then((resourceId) => {
+      const idx = files.indexOf(tempId);
+      if (idx !== -1) files[idx] = resourceId;
+      state.resourceIndex.delete(tempId);
+      state.resourceIndex.set(resourceId, {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        uploadedAt: /* @__PURE__ */ new Date(),
+        file
+      });
+      renderFilesRow();
+      updateBackdrop();
+      writeHidden();
+      ctx.instance?.triggerOnChange(pathKey, getCurrentValue());
+    }).catch((err) => {
+      const idx = files.indexOf(tempId);
+      if (idx !== -1) files.splice(idx, 1);
+      state.resourceIndex.delete(tempId);
+      renderFilesRow();
+      state.config.onUploadError?.(err, file);
+    });
+  }
+  fileInput.addEventListener("change", () => {
+    const selected = fileInput.files;
+    if (!selected || selected.length === 0) return;
+    const maxFiles = element.maxFiles ?? Infinity;
+    for (let i = 0; i < selected.length && files.length < maxFiles; i++) {
+      uploadFile(selected[i]);
+    }
+    fileInput.value = "";
+  });
+  textareaArea.appendChild(backdrop);
+  textareaArea.appendChild(textarea);
+  textareaArea.appendChild(paperclipBtn);
+  textareaArea.appendChild(dropdown);
+  outerDiv.appendChild(filesRow);
+  outerDiv.appendChild(textareaArea);
+  if (element.minLength != null || element.maxLength != null) {
+    const counterRow = document.createElement("div");
+    counterRow.style.cssText = "position: relative; padding: 2px 14px 6px; text-align: right;";
+    const counter = createCharCounter(element, textarea, false);
+    counter.style.cssText = `
+      position: static;
+      display: inline-block;
+      font-size: var(--fb-font-size-small);
+      color: var(--fb-text-secondary-color);
+      pointer-events: none;
+    `;
+    counterRow.appendChild(counter);
+    outerDiv.appendChild(counterRow);
+  }
+  outerDiv.appendChild(hiddenInput);
+  outerDiv.appendChild(fileInput);
+  writeHidden();
+  updateBackdrop();
+  hiddenInput._applyExternalUpdate = (value) => {
+    const rawText = value.text ?? "";
+    textarea.value = rawText ? replaceRidsWithFilenames(rawText, files, state) : "";
+    textarea.dispatchEvent(new Event("input"));
+    files.length = 0;
+    for (const rid of value.files) files.push(rid);
+    renderFilesRow();
+    updateBackdrop();
+    writeHidden();
+  };
+  wrapper.appendChild(outerDiv);
+  renderFilesRow();
+  const observer = new MutationObserver(() => {
+    if (!outerDiv.isConnected) {
+      docListenerCtrl.abort();
+      mentionTooltip = removePortalTooltip(mentionTooltip);
+      observer.disconnect();
+    }
+  });
+  if (outerDiv.parentElement) {
+    observer.observe(outerDiv.parentElement, { childList: true });
+  }
+}
+function renderReadonlyMode(_element, ctx, wrapper, _pathKey, value) {
+  const state = ctx.state;
+  const { text, files } = value;
+  const ridToName = /* @__PURE__ */ new Map();
+  for (const rid of files) {
+    const meta = state.resourceIndex.get(rid);
+    if (meta?.name) ridToName.set(rid, meta.name);
+  }
+  if (files.length > 0) {
+    const filesRow = document.createElement("div");
+    filesRow.style.cssText = "display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px;";
+    files.forEach((rid) => {
+      const meta = state.resourceIndex.get(rid);
+      const thumbWrapper = document.createElement("div");
+      thumbWrapper.style.cssText = `
+        position: relative;
+        width: 48px; height: 48px;
+        border: 1px solid var(--fb-border-color, #d1d5db);
+        border-radius: 8px;
+        overflow: hidden;
+        flex-shrink: 0;
+        background: #fff;
+        cursor: default;
+      `;
+      const thumbInner = document.createElement("div");
+      thumbInner.style.cssText = "width: 48px; height: 48px; border-radius: inherit; overflow: hidden;";
+      renderThumbContent(thumbInner, rid, meta, state);
+      thumbWrapper.appendChild(thumbInner);
+      const tooltipHandle = createTooltipHandle();
+      thumbWrapper.addEventListener("mouseenter", () => {
+        cancelHideTooltip(tooltipHandle);
+        if (!tooltipHandle.element) {
+          tooltipHandle.element = showFileTooltip(thumbWrapper, {
+            rid,
+            state,
+            isReadonly: true
+          });
+          tooltipHandle.element.addEventListener("mouseenter", () => {
+            cancelHideTooltip(tooltipHandle);
+          });
+          tooltipHandle.element.addEventListener("mouseleave", () => {
+            scheduleHideTooltip(tooltipHandle);
+          });
+        }
+      });
+      thumbWrapper.addEventListener("mouseleave", () => {
+        scheduleHideTooltip(tooltipHandle);
+      });
+      filesRow.appendChild(thumbWrapper);
+    });
+    wrapper.appendChild(filesRow);
+  }
+  if (text) {
+    const textDiv = document.createElement("div");
+    textDiv.style.cssText = `
+      ${TEXTAREA_FONT}
+      color: var(--fb-text-color, #111827);
+      white-space: pre-wrap;
+      word-break: break-word;
+    `;
+    const tokens = findAtTokens(text);
+    const resolvedTokens = tokens.filter(
+      (tok) => ridToName.has(tok.name) || [...ridToName.values()].includes(tok.name)
+    );
+    if (resolvedTokens.length === 0) {
+      textDiv.textContent = text;
+    } else {
+      let lastIndex = 0;
+      for (const token of resolvedTokens) {
+        if (token.start > lastIndex) {
+          textDiv.appendChild(
+            document.createTextNode(text.slice(lastIndex, token.start))
+          );
+        }
+        const span = document.createElement("span");
+        span.style.cssText = `
+          display: inline;
+          background: color-mix(in srgb, var(--fb-primary-color, #0066cc) 15%, transparent);
+          color: var(--fb-primary-color, #0066cc);
+          border-radius: 8px;
+          padding: 1px 6px;
+          font-weight: 500;
+          cursor: default;
+        `;
+        const rid = ridToName.has(token.name) ? token.name : [...ridToName.entries()].find(([, n]) => n === token.name)?.[0];
+        const displayName = ridToName.get(token.name) ?? token.name;
+        span.textContent = `@${displayName}`;
+        if (rid) {
+          let spanTooltip = null;
+          const mentionRid = rid;
+          span.addEventListener("mouseenter", () => {
+            spanTooltip = removePortalTooltip(spanTooltip);
+            spanTooltip = showMentionTooltip(span, mentionRid, state);
+          });
+          span.addEventListener("mouseleave", () => {
+            spanTooltip = removePortalTooltip(spanTooltip);
+          });
+        }
+        textDiv.appendChild(span);
+        lastIndex = token.end;
+      }
+      if (lastIndex < text.length) {
+        textDiv.appendChild(document.createTextNode(text.slice(lastIndex)));
+      }
+    }
+    wrapper.appendChild(textDiv);
+  }
+  if (!text && files.length === 0) {
+    const empty = document.createElement("div");
+    empty.style.cssText = "color: var(--fb-text-muted-color, #6b7280); font-size: var(--fb-font-size, 14px);";
+    empty.textContent = "\u2014";
+    wrapper.appendChild(empty);
+  }
+}
+function renderRichInputElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const textKey = element.textKey ?? "text";
+  const filesKey = element.filesKey ?? "files";
+  const rawPrefill = ctx.prefill[element.key];
+  let initialValue;
+  if (rawPrefill && typeof rawPrefill === "object" && !Array.isArray(rawPrefill)) {
+    const obj = rawPrefill;
+    const textVal = obj[textKey] ?? obj["text"];
+    const filesVal = obj[filesKey] ?? obj["files"];
+    initialValue = {
+      text: typeof textVal === "string" ? textVal : null,
+      files: Array.isArray(filesVal) ? filesVal : []
+    };
+  } else if (typeof rawPrefill === "string") {
+    initialValue = { text: rawPrefill || null, files: [] };
+  } else {
+    initialValue = { text: null, files: [] };
+  }
+  for (const rid of initialValue.files) {
+    if (!state.resourceIndex.has(rid)) {
+      state.resourceIndex.set(rid, {
+        name: rid,
+        type: "application/octet-stream",
+        size: 0,
+        uploadedAt: /* @__PURE__ */ new Date(),
+        file: void 0
+      });
+    }
+  }
+  if (state.config.readonly) {
+    renderReadonlyMode(element, ctx, wrapper, pathKey, initialValue);
+  } else {
+    if (!state.config.uploadFile) {
+      throw new Error(
+        `RichInput field "${element.key}" requires uploadFile handler in config`
+      );
+    }
+    renderEditMode(element, ctx, wrapper, pathKey, initialValue);
+  }
+}
+function validateRichInputElement(element, key, context) {
+  const { scopeRoot, state, skipValidation } = context;
+  const errors = [];
+  const textKey = element.textKey ?? "text";
+  const filesKey = element.filesKey ?? "files";
+  const hiddenInput = scopeRoot.querySelector(
+    `[name="${key}"]`
+  );
+  if (!hiddenInput) {
+    return { value: null, errors };
+  }
+  let rawValue = {};
+  try {
+    const parsed = JSON.parse(hiddenInput.value);
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+      rawValue = parsed;
+    } else {
+      errors.push(`${key}: invalid richinput data`);
+      return { value: null, errors };
+    }
+  } catch {
+    errors.push(`${key}: invalid richinput data`);
+    return { value: null, errors };
+  }
+  const textVal = rawValue[textKey];
+  const filesVal = rawValue[filesKey];
+  const text = textVal === null || typeof textVal === "string" ? textVal : null;
+  const files = Array.isArray(filesVal) ? filesVal : [];
+  const value = {
+    [textKey]: text ?? null,
+    [filesKey]: files
+  };
+  if (!skipValidation) {
+    const textEmpty = !text || text.trim() === "";
+    const filesEmpty = files.length === 0;
+    if (element.required && textEmpty && filesEmpty) {
+      errors.push(`${key}: ${t("required", state)}`);
+    }
+    if (!textEmpty && text) {
+      if (element.minLength != null && text.length < element.minLength) {
+        errors.push(
+          `${key}: ${t("minLength", state, { min: element.minLength })}`
+        );
+      }
+      if (element.maxLength != null && text.length > element.maxLength) {
+        errors.push(
+          `${key}: ${t("maxLength", state, { max: element.maxLength })}`
+        );
+      }
+    }
+    if (element.maxFiles != null && files.length > element.maxFiles) {
+      errors.push(
+        `${key}: ${t("maxFiles", state, { max: element.maxFiles })}`
+      );
+    }
+  }
+  return { value, errors };
+}
+function updateRichInputField(element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  const hiddenInput = scopeRoot.querySelector(
+    `[name="${fieldPath}"]`
+  );
+  if (!hiddenInput) {
+    console.warn(
+      `updateRichInputField: no hidden input found for "${fieldPath}". Re-render to reflect new data.`
+    );
+    return;
+  }
+  let normalized = null;
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    const obj = value;
+    const textKey = element.textKey ?? "text";
+    const filesKey = element.filesKey ?? "files";
+    const textVal = obj[textKey] ?? obj["text"];
+    const filesVal = obj[filesKey] ?? obj["files"];
+    if (textVal !== void 0 || filesVal !== void 0) {
+      normalized = {
+        text: typeof textVal === "string" ? textVal : null,
+        files: Array.isArray(filesVal) ? filesVal : []
+      };
+    }
+  }
+  if (normalized && hiddenInput._applyExternalUpdate) {
+    hiddenInput._applyExternalUpdate(normalized);
+  } else if (normalized) {
+    hiddenInput.value = JSON.stringify(normalized);
+  }
+}
+
 // src/components/index.ts
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
@@ -6059,6 +7575,9 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
     case "table":
       renderTableElement(element, ctx, wrapper, pathKey);
       break;
+    case "richinput":
+      renderRichInputElement(element, ctx, wrapper, pathKey);
+      break;
     default: {
       const unsupported = document.createElement("div");
       unsupported.className = "text-red-500 text-sm";
@@ -6103,6 +7622,7 @@ var defaultConfig = {
   enableFilePreview: true,
   maxPreviewSize: "200px",
   readonly: false,
+  parseTableFile: null,
   locale: "en",
   translations: {
     en: {
@@ -6155,7 +7675,14 @@ var defaultConfig = {
       tableRemoveRow: "Remove row",
       tableRemoveColumn: "Remove column",
       tableMergeCells: "Merge cells (Ctrl+M)",
-      tableSplitCell: "Split cell (Ctrl+Shift+M)"
+      tableSplitCell: "Split cell (Ctrl+Shift+M)",
+      tableImportFile: "Import",
+      tableImporting: "Importing...",
+      tableImportError: "Import failed: {error}",
+      richinputPlaceholder: "Type text...",
+      richinputAttachFile: "Attach file",
+      richinputMention: "Mention",
+      richinputRemoveFile: "Remove"
     },
     ru: {
       // UI texts
@@ -6207,7 +7734,14 @@ var defaultConfig = {
       tableRemoveRow: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443",
       tableRemoveColumn: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u043E\u043B\u0431\u0435\u0446",
       tableMergeCells: "\u041E\u0431\u044A\u0435\u0434\u0438\u043D\u0438\u0442\u044C \u044F\u0447\u0435\u0439\u043A\u0438 (Ctrl+M)",
-      tableSplitCell: "\u0420\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u044C \u044F\u0447\u0435\u0439\u043A\u0443 (Ctrl+Shift+M)"
+      tableSplitCell: "\u0420\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u044C \u044F\u0447\u0435\u0439\u043A\u0443 (Ctrl+Shift+M)",
+      tableImportFile: "\u0418\u043C\u043F\u043E\u0440\u0442",
+      tableImporting: "\u0418\u043C\u043F\u043E\u0440\u0442...",
+      tableImportError: "\u041E\u0448\u0438\u0431\u043A\u0430 \u0438\u043C\u043F\u043E\u0440\u0442\u0430: {error}",
+      richinputPlaceholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442...",
+      richinputAttachFile: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B",
+      richinputMention: "\u0423\u043F\u043E\u043C\u044F\u043D\u0443\u0442\u044C",
+      richinputRemoveFile: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C"
     }
   },
   theme: {}
@@ -6485,6 +8019,10 @@ var componentRegistry = {
   table: {
     validate: validateTableElement,
     update: updateTableField
+  },
+  richinput: {
+    validate: validateRichInputElement,
+    update: updateRichInputField
   }
 };
 function getComponentOperations(elementType) {