@dmitryvim/form-builder 0.2.18 → 0.2.20

package/dist/cjs/index.cjs

@@ -223,6 +223,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) {
@@ -4772,205 +4777,2530 @@ function updateGroupField(element, fieldPath, value, context) {
   return updateContainerField(containerElement, fieldPath, value, context);
 }
 
-// src/components/index.ts
-function showTooltip(tooltipId, button) {
-  const tooltip = document.getElementById(tooltipId);
-  if (!tooltip) return;
-  const isCurrentlyVisible = !tooltip.classList.contains("hidden");
-  document.querySelectorAll('[id^="tooltip-"]').forEach((t2) => {
-    t2.classList.add("hidden");
-  });
-  if (isCurrentlyVisible) {
-    return;
-  }
-  const rect = button.getBoundingClientRect();
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-  if (tooltip && tooltip.parentElement !== document.body) {
-    document.body.appendChild(tooltip);
-  }
-  tooltip.style.visibility = "hidden";
-  tooltip.style.position = "fixed";
-  tooltip.classList.remove("hidden");
-  const tooltipRect = tooltip.getBoundingClientRect();
-  tooltip.classList.add("hidden");
-  tooltip.style.visibility = "visible";
-  let left = rect.left;
-  let top = rect.bottom + 5;
-  if (left + tooltipRect.width > viewportWidth) {
-    left = rect.right - tooltipRect.width;
-  }
-  if (top + tooltipRect.height > viewportHeight) {
-    top = rect.top - tooltipRect.height - 5;
-  }
-  if (left < 10) {
-    left = 10;
-  }
-  if (top < 10) {
-    top = rect.bottom + 5;
-  }
-  tooltip.style.left = `${left}px`;
-  tooltip.style.top = `${top}px`;
-  tooltip.classList.remove("hidden");
-  setTimeout(() => {
-    tooltip.classList.add("hidden");
-  }, 25e3);
+// src/components/table.ts
+function createEmptyCells(rows, cols) {
+  return Array.from(
+    { length: rows },
+    () => Array.from({ length: cols }, () => "")
+  );
 }
-if (typeof document !== "undefined") {
-  document.addEventListener("click", (e) => {
-    const target = e.target;
-    const isInfoButton = target.closest("button") && target.closest("button").onclick;
-    const isTooltip = target.closest('[id^="tooltip-"]');
-    if (!isInfoButton && !isTooltip) {
-      document.querySelectorAll('[id^="tooltip-"]').forEach((tooltip) => {
-        tooltip.classList.add("hidden");
-      });
+function getShadowingMerge(row, col, merges) {
+  for (const m of merges) {
+    if (m.row === row && m.col === col) {
+      return null;
+    }
+    if (row >= m.row && row < m.row + m.rowspan && col >= m.col && col < m.col + m.colspan) {
+      return m;
     }
+  }
+  return null;
+}
+function getMergeAt(row, col, merges) {
+  var _a;
+  return (_a = merges.find((m) => m.row === row && m.col === col)) != null ? _a : null;
+}
+function selectionRange(sel) {
+  var _a;
+  if (!sel.anchor) return null;
+  const focus = (_a = sel.focus) != null ? _a : sel.anchor;
+  return {
+    r1: Math.min(sel.anchor.row, focus.row),
+    c1: Math.min(sel.anchor.col, focus.col),
+    r2: Math.max(sel.anchor.row, focus.row),
+    c2: Math.max(sel.anchor.col, focus.col)
+  };
+}
+function makeOverlayCircleBtn(opts) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.textContent = opts.label;
+  btn.title = opts.title;
+  btn.style.cssText = `
+    position: absolute;
+    width: ${opts.size}px;
+    height: ${opts.size}px;
+    border-radius: 50%;
+    border: none;
+    background: ${opts.color};
+    color: ${opts.textColor};
+    font-size: ${Math.floor(opts.size * 0.6)}px;
+    line-height: ${opts.size}px;
+    text-align: center;
+    cursor: pointer;
+    z-index: 10;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+    transition: transform 0.1s, opacity 0.1s;
+    pointer-events: all;
+  `;
+  btn.addEventListener("mouseenter", () => {
+    btn.style.transform = "scale(1.15)";
+  });
+  btn.addEventListener("mouseleave", () => {
+    btn.style.transform = "scale(1)";
+  });
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    opts.onClick(e);
   });
+  return btn;
 }
-function shouldDisableElement(element, ctx) {
-  var _a, _b, _c;
-  if (!element.enableIf) {
-    return false;
-  }
-  try {
-    const rootFormData = (_b = (_a = ctx.formData) != null ? _a : ctx.prefill) != null ? _b : {};
-    const scope = (_c = element.enableIf.scope) != null ? _c : "relative";
-    const containerData = scope === "relative" && ctx.path ? ctx.prefill : void 0;
-    const shouldEnable = evaluateEnableCondition(
-      element.enableIf,
-      rootFormData,
-      containerData
-    );
-    return !shouldEnable;
-  } catch (error) {
-    console.error(
-      `Error evaluating enableIf for field "${element.key}":`,
-      error
-    );
-  }
-  return false;
+function renderReadonlyTable(data, wrapper) {
+  const { cells, merges = [] } = data;
+  if (cells.length === 0) return;
+  const numCols = cells[0].length;
+  const tableEl = document.createElement("table");
+  tableEl.style.cssText = `
+    width: 100%;
+    border-collapse: collapse;
+    border: var(--fb-border-width) solid var(--fb-border-color);
+    border-radius: var(--fb-border-radius);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+    color: var(--fb-text-color);
+  `;
+  cells.forEach((rowData, rIdx) => {
+    var _a, _b;
+    const section = rIdx === 0 ? tableEl.createTHead() : (_a = tableEl.tBodies[0]) != null ? _a : tableEl.createTBody();
+    const tr = section.insertRow();
+    for (let cIdx = 0; cIdx < numCols; cIdx++) {
+      if (getShadowingMerge(rIdx, cIdx, merges)) {
+        continue;
+      }
+      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;
+      }
+      td.textContent = (_b = rowData[cIdx]) != null ? _b : "";
+      td.style.cssText = `
+        padding: 6px 10px;
+        border: var(--fb-border-width) solid var(--fb-border-color);
+        text-align: left;
+        vertical-align: top;
+        ${rIdx === 0 ? "background-color: var(--fb-background-hover-color); font-weight: 600;" : ""}
+      `;
+      tr.appendChild(td);
+    }
+  });
+  const scrollWrapper = document.createElement("div");
+  scrollWrapper.style.cssText = "overflow-x: auto; max-width: 100%;";
+  scrollWrapper.appendChild(tableEl);
+  wrapper.appendChild(scrollWrapper);
 }
-function extractDOMValue(fieldPath, formRoot) {
-  const input = formRoot.querySelector(
-    `[name="${fieldPath}"]`
-  );
-  if (!input) {
-    return void 0;
+function startCellEditing(span, r, c, getCells, persistValue, selectCell) {
+  if (span.contentEditable === "true") return;
+  span.contentEditable = "true";
+  span.focus();
+  const domRange = document.createRange();
+  const winSel = window.getSelection();
+  domRange.selectNodeContents(span);
+  domRange.collapse(false);
+  winSel == null ? void 0 : winSel.removeAllRanges();
+  winSel == null ? void 0 : winSel.addRange(domRange);
+  function commit() {
+    var _a;
+    span.contentEditable = "inherit";
+    const cells = getCells();
+    if (cells[r]) {
+      cells[r][c] = (_a = span.textContent) != null ? _a : "";
+    }
+    persistValue();
+  }
+  function onKeyDown(e) {
+    var _a, _b, _c, _d;
+    const cells = getCells();
+    const numCols = (_b = (_a = cells[0]) == null ? void 0 : _a.length) != null ? _b : 0;
+    if (e.key === "Escape") {
+      span.contentEditable = "inherit";
+      span.textContent = (_d = (_c = cells[r]) == null ? void 0 : _c[c]) != null ? _d : "";
+      span.removeEventListener("keydown", onKeyDown);
+      span.removeEventListener("blur", onBlur);
+      return;
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      commit();
+      span.removeEventListener("keydown", onKeyDown);
+      span.removeEventListener("blur", onBlur);
+      const nextRow = r + 1 < cells.length ? r + 1 : r;
+      selectCell(nextRow, c);
+      return;
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      e.stopPropagation();
+      commit();
+      span.removeEventListener("keydown", onKeyDown);
+      span.removeEventListener("blur", onBlur);
+      let nr = r;
+      let nc = e.shiftKey ? c - 1 : c + 1;
+      if (nc < 0) {
+        nc = numCols - 1;
+        nr = Math.max(0, r - 1);
+      }
+      if (nc >= numCols) {
+        nc = 0;
+        nr = Math.min(cells.length - 1, r + 1);
+      }
+      selectCell(nr, nc);
+    }
   }
-  if (input instanceof HTMLSelectElement) {
-    return input.value;
-  } else if (input instanceof HTMLInputElement) {
-    if (input.type === "checkbox") {
-      return input.checked;
-    } else if (input.type === "radio") {
-      const checked = formRoot.querySelector(
-        `[name="${fieldPath}"]:checked`
-      );
-      return checked ? checked.value : void 0;
-    } else {
-      return input.value;
+  function onBlur() {
+    if (span.contentEditable === "true") {
+      commit();
+      span.removeEventListener("keydown", onKeyDown);
+      span.removeEventListener("blur", onBlur);
     }
-  } else if (input instanceof HTMLTextAreaElement) {
-    return input.value;
   }
-  return void 0;
+  span.addEventListener("keydown", onKeyDown);
+  span.addEventListener("blur", onBlur);
 }
-function reevaluateEnableIf(wrapper, element, ctx) {
+function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
   var _a, _b;
-  if (!element.enableIf) {
-    return;
-  }
-  const formRoot = ctx.state.formRoot;
-  if (!formRoot) {
-    console.error(`Cannot re-evaluate enableIf: formRoot is null`);
-    return;
-  }
-  const condition = element.enableIf;
-  const scope = (_a = condition.scope) != null ? _a : "relative";
-  let rootFormData = {};
-  const containerData = {};
-  const effectiveScope = !ctx.path || ctx.path === "" ? "absolute" : scope;
-  if (effectiveScope === "relative" && ctx.path) {
-    const containerMatch = ctx.path.match(/^(.+)\[(\d+)\]$/);
-    if (containerMatch) {
-      const containerKey = containerMatch[1];
-      const containerIndex = parseInt(containerMatch[2], 10);
-      const containerItemElement = formRoot.querySelector(
-        `[data-container-item="${containerKey}[${containerIndex}]"]`
+  const state = ctx.state;
+  const instance = ctx.instance;
+  const cells = initialData.cells.length > 0 ? initialData.cells.map((r) => [...r]) : createEmptyCells((_a = element.rows) != null ? _a : 3, (_b = element.columns) != null ? _b : 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 });
+  wrapper.appendChild(hiddenInput);
+  function persistValue() {
+    hiddenInput.value = JSON.stringify({ cells, merges });
+    if (instance) {
+      instance.triggerOnChange(pathKey, { cells, merges });
+    }
+  }
+  hiddenInput._applyExternalUpdate = (data) => {
+    cells.length = 0;
+    data.cells.forEach((row) => cells.push([...row]));
+    merges.length = 0;
+    if (data.merges) {
+      data.merges.forEach((m) => merges.push({ ...m }));
+    }
+    sel.anchor = null;
+    sel.focus = null;
+    persistValue();
+    rebuild();
+  };
+  const tableWrapper = document.createElement("div");
+  tableWrapper.style.cssText = "position: relative; padding: 20px 20px 20px 24px; overflow-x: auto; max-width: 100%;";
+  const tableEl = document.createElement("table");
+  tableEl.style.cssText = `
+    border-collapse: collapse;
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+    color: var(--fb-text-color);
+    table-layout: fixed;
+  `;
+  tableWrapper.appendChild(tableEl);
+  wrapper.appendChild(tableWrapper);
+  const contextMenu = document.createElement("div");
+  contextMenu.style.cssText = `
+    position: fixed;
+    display: none;
+    background: white;
+    border: 1px solid var(--fb-border-color);
+    border-radius: var(--fb-border-radius);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    padding: 4px;
+    z-index: 1000;
+    gap: 4px;
+    flex-direction: column;
+  `;
+  wrapper.appendChild(contextMenu);
+  function makeContextMenuBtn(label, onClick) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.textContent = label;
+    btn.style.cssText = `
+      padding: 4px 10px;
+      font-size: var(--fb-font-size-small);
+      color: var(--fb-text-color);
+      border: 1px solid var(--fb-border-color);
+      border-radius: var(--fb-border-radius);
+      background: transparent;
+      cursor: pointer;
+      white-space: nowrap;
+      text-align: left;
+    `;
+    btn.addEventListener("mouseenter", () => {
+      btn.style.background = "var(--fb-background-hover-color)";
+    });
+    btn.addEventListener("mouseleave", () => {
+      btn.style.background = "transparent";
+    });
+    btn.addEventListener("click", () => {
+      hideContextMenu();
+      onClick();
+    });
+    return btn;
+  }
+  function showContextMenu(x, y) {
+    contextMenu.innerHTML = "";
+    contextMenu.style.display = "flex";
+    const range = selectionRange(sel);
+    const isMultiCell = range && (range.r1 !== range.r2 || range.c1 !== range.c2);
+    const isSingleMerged = sel.anchor && getMergeAt(sel.anchor.row, sel.anchor.col, merges);
+    if (isMultiCell) {
+      contextMenu.appendChild(
+        makeContextMenuBtn(t("tableMergeCells", state), mergeCells)
       );
-      if (containerItemElement) {
-        const inputs = containerItemElement.querySelectorAll(
-          "input, select, textarea"
-        );
-        inputs.forEach((input) => {
-          const fieldName = input.getAttribute("name");
-          if (fieldName) {
-            const fieldKeyMatch = fieldName.match(/\.([^.[\]]+)$/);
-            if (fieldKeyMatch) {
-              const fieldKey = fieldKeyMatch[1];
-              if (input instanceof HTMLSelectElement) {
-                containerData[fieldKey] = input.value;
-              } else if (input instanceof HTMLInputElement) {
-                if (input.type === "checkbox") {
-                  containerData[fieldKey] = input.checked;
-                } else if (input.type === "radio") {
-                  if (input.checked) {
-                    containerData[fieldKey] = input.value;
-                  }
-                } else {
-                  containerData[fieldKey] = input.value;
-                }
-              } else if (input instanceof HTMLTextAreaElement) {
-                containerData[fieldKey] = input.value;
-              }
-            }
-          }
-        });
-      }
     }
-  } else {
-    const dependencyKey = condition.key;
-    const dependencyValue = extractDOMValue(dependencyKey, formRoot);
-    if (dependencyValue !== void 0) {
-      rootFormData[dependencyKey] = dependencyValue;
-    } else {
-      rootFormData = (_b = ctx.formData) != null ? _b : ctx.prefill;
+    if (isSingleMerged) {
+      contextMenu.appendChild(
+        makeContextMenuBtn(t("tableSplitCell", state), splitCell)
+      );
     }
-  }
-  try {
-    const shouldEnable = evaluateEnableCondition(
-      condition,
-      rootFormData,
-      containerData
-    );
-    if (shouldEnable) {
-      wrapper.style.display = "";
-      wrapper.classList.remove("fb-field-wrapper-disabled");
-      wrapper.removeAttribute("data-conditionally-disabled");
-    } else {
-      wrapper.style.display = "none";
-      wrapper.classList.add("fb-field-wrapper-disabled");
-      wrapper.setAttribute("data-conditionally-disabled", "true");
+    if (!contextMenu.firstChild) {
+      hideContextMenu();
+      return;
     }
-  } catch (error) {
-    console.error(`Error re-evaluating enableIf for field "${element.key}":`, error);
+    const menuWidth = 140;
+    const menuHeight = contextMenu.children.length * 32 + 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const left = x + menuWidth > vw ? x - menuWidth : x;
+    const top = y + menuHeight > vh ? y - menuHeight : y;
+    contextMenu.style.left = `${left}px`;
+    contextMenu.style.top = `${top}px`;
+  }
+  function hideContextMenu() {
+    contextMenu.style.display = "none";
+  }
+  const menuDismissCtrl = new AbortController();
+  document.addEventListener("mousedown", (e) => {
+    if (!wrapper.isConnected) {
+      menuDismissCtrl.abort();
+      return;
+    }
+    if (!contextMenu.contains(e.target)) {
+      hideContextMenu();
+    }
+  }, { signal: menuDismissCtrl.signal });
+  function applySelectionStyles() {
+    const range = selectionRange(sel);
+    const allTds = tableEl.querySelectorAll("td[data-row]");
+    allTds.forEach((td) => {
+      const r = parseInt(td.getAttribute("data-row") || "0", 10);
+      const c = parseInt(td.getAttribute("data-col") || "0", 10);
+      const isAnchor = sel.anchor !== null && sel.anchor.row === r && sel.anchor.col === c;
+      const inRange = range !== null && r >= range.r1 && r <= range.r2 && c >= range.c1 && c <= range.c2;
+      td.style.outline = isAnchor ? "2px solid var(--fb-primary-color, #0066cc)" : "";
+      td.style.outlineOffset = isAnchor ? "-2px" : "";
+      if (r === 0) {
+        td.style.backgroundColor = "var(--fb-background-hover-color)";
+      } else {
+        td.style.backgroundColor = inRange && !isAnchor ? "rgba(0,102,204,0.08)" : "";
+      }
+    });
   }
-}
-function setupEnableIfListeners(wrapper, element, ctx) {
-  var _a;
-  if (!element.enableIf) {
-    return;
+  function selectCell(row, col) {
+    sel.anchor = { row, col };
+    sel.focus = null;
+    applySelectionStyles();
+    tableEl.focus();
   }
-  const formRoot = ctx.state.formRoot;
-  if (!formRoot) {
-    console.error(`Cannot setup enableIf listeners: formRoot is null`);
-    return;
+  function editCell(row, col) {
+    const td = tableEl.querySelector(
+      `td[data-row="${row}"][data-col="${col}"]`
+    );
+    if (!td) return;
+    const span = td.querySelector("span");
+    if (!span) return;
+    sel.anchor = { row, col };
+    sel.focus = null;
+    applySelectionStyles();
+    startCellEditing(span, row, col, () => cells, persistValue, selectCell);
+  }
+  function addRow(afterIndex) {
+    var _a2;
+    const numCols = cells.length > 0 ? cells[0].length : (_a2 = element.columns) != null ? _a2 : 3;
+    const newRow = Array(numCols).fill("");
+    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.row < insertAt && m.row + m.rowspan > insertAt) {
+        return { ...m, rowspan: m.rowspan + 1 };
+      }
+      return m;
+    });
+    persistValue();
+    rebuild();
   }
-  const condition = element.enableIf;
-  const scope = (_a = condition.scope) != null ? _a : "relative";
-  const dependencyKey = condition.key;
-  let dependencyFieldPath;
+  function removeRow(targetRow) {
+    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 (mEndRow === rowToRemove) {
+        return { ...m, rowspan: m.rowspan - 1 };
+      }
+      if (m.row < rowToRemove && mEndRow > rowToRemove) {
+        return { ...m, rowspan: m.rowspan - 1 };
+      }
+      if (m.row > rowToRemove) {
+        return { ...m, row: m.row - 1 };
+      }
+      return m;
+    }).filter((m) => m !== null);
+    cells.splice(rowToRemove, 1);
+    if (sel.anchor && sel.anchor.row >= cells.length) {
+      sel.anchor = { row: cells.length - 1, col: sel.anchor.col };
+    }
+    persistValue();
+    rebuild();
+  }
+  function addColumn(afterIndex) {
+    var _a2, _b2;
+    const insertAt = afterIndex !== void 0 ? afterIndex + 1 : (_b2 = (_a2 = cells[0]) == null ? void 0 : _a2.length) != null ? _b2 : 0;
+    cells.forEach((row) => row.splice(insertAt, 0, ""));
+    merges = merges.map((m) => {
+      if (m.col >= insertAt) {
+        return { ...m, col: m.col + 1 };
+      }
+      if (m.col < insertAt && m.col + m.colspan > insertAt) {
+        return { ...m, colspan: m.colspan + 1 };
+      }
+      return m;
+    });
+    persistValue();
+    rebuild();
+  }
+  function removeColumn(targetCol) {
+    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 (mEndCol === colToRemove) {
+        return { ...m, colspan: m.colspan - 1 };
+      }
+      if (m.col < colToRemove && mEndCol > colToRemove) {
+        return { ...m, colspan: m.colspan - 1 };
+      }
+      if (m.col > colToRemove) {
+        return { ...m, col: m.col - 1 };
+      }
+      return m;
+    }).filter((m) => m !== null);
+    cells.forEach((row) => row.splice(colToRemove, 1));
+    if (sel.anchor && sel.anchor.col >= cells[0].length) {
+      sel.anchor = { row: sel.anchor.row, col: cells[0].length - 1 };
+    }
+    persistValue();
+    rebuild();
+  }
+  function mergeCells() {
+    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;
+      return !overlaps;
+    });
+    const anchorText = cells[r1][c1];
+    for (let r = r1; r <= r2; r++) {
+      for (let c = c1; c <= c2; c++) {
+        if (r !== r1 || c !== c1) {
+          cells[r][c] = "";
+        }
+      }
+    }
+    cells[r1][c1] = anchorText;
+    merges.push({ row: r1, col: c1, rowspan: r2 - r1 + 1, colspan: c2 - c1 + 1 });
+    sel.anchor = { row: r1, col: c1 };
+    sel.focus = null;
+    persistValue();
+    rebuild();
+  }
+  function splitCell() {
+    if (!sel.anchor) return;
+    const { row, col } = sel.anchor;
+    const mIdx = merges.findIndex((m) => m.row === row && m.col === col);
+    if (mIdx === -1) return;
+    merges.splice(mIdx, 1);
+    sel.focus = null;
+    persistValue();
+    rebuild();
+  }
+  function rebuild() {
+    var _a2, _b2;
+    tableEl.innerHTML = "";
+    const numRows = cells.length;
+    const numCols = numRows > 0 ? cells[0].length : 0;
+    const range = selectionRange(sel);
+    for (let rIdx = 0; rIdx < numRows; rIdx++) {
+      const section = rIdx === 0 ? (_a2 = tableEl.tHead) != null ? _a2 : tableEl.createTHead() : (_b2 = tableEl.tBodies[0]) != null ? _b2 : tableEl.createTBody();
+      const tr = section.insertRow();
+      for (let cIdx = 0; cIdx < numCols; cIdx++) {
+        if (getShadowingMerge(rIdx, cIdx, merges)) {
+          continue;
+        }
+        const merge = getMergeAt(rIdx, cIdx, merges);
+        const td = document.createElement("td");
+        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 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;
+        td.style.cssText = [
+          "border: var(--fb-border-width) solid var(--fb-border-color);",
+          "padding: 4px 8px;",
+          "min-width: 80px;",
+          "vertical-align: top;",
+          "cursor: text;",
+          "position: relative;",
+          rIdx === 0 ? "background-color: var(--fb-background-hover-color); font-weight: 600;" : "",
+          inRange && !isAnchor ? "background-color: rgba(0,102,204,0.08);" : "",
+          isAnchor ? "outline: 2px solid var(--fb-primary-color, #0066cc); outline-offset: -2px;" : ""
+        ].join(" ");
+        const content = document.createElement("span");
+        content.textContent = cells[rIdx][cIdx];
+        content.style.cssText = "display: block; min-height: 1.4em; white-space: pre-wrap; word-break: break-word; outline: none;";
+        td.appendChild(content);
+        const capturedR = rIdx;
+        const capturedC = cIdx;
+        td.addEventListener("mousedown", (e) => {
+          if (e.target.tagName === "BUTTON") return;
+          if (e.target.contentEditable === "true") return;
+          if (e.button === 2) {
+            const range2 = selectionRange(sel);
+            if (range2 && capturedR >= range2.r1 && capturedR <= range2.r2 && capturedC >= range2.c1 && capturedC <= range2.c2) {
+              return;
+            }
+          }
+          if (e.shiftKey && sel.anchor) {
+            e.preventDefault();
+            sel.focus = { row: capturedR, col: capturedC };
+            sel.dragging = false;
+            applySelectionStyles();
+          } else {
+            sel.anchor = { row: capturedR, col: capturedC };
+            sel.focus = null;
+            sel.dragging = true;
+            applySelectionStyles();
+          }
+        });
+        td.addEventListener("mouseup", (e) => {
+          if (e.target.tagName === "BUTTON") return;
+          if (sel.dragging) {
+            sel.dragging = false;
+            const currentRange = selectionRange(sel);
+            const isSingleCell = !currentRange || currentRange.r1 === currentRange.r2 && currentRange.c1 === currentRange.c2;
+            if (isSingleCell) {
+              editCell(capturedR, capturedC);
+            }
+          }
+        });
+        td.addEventListener("mousemove", (e) => {
+          if (sel.dragging && e.buttons === 1) {
+            const currentAnchor = sel.anchor;
+            if (currentAnchor && (currentAnchor.row !== capturedR || currentAnchor.col !== capturedC)) {
+              sel.focus = { row: capturedR, col: capturedC };
+              applySelectionStyles();
+            }
+          }
+        });
+        td.addEventListener("contextmenu", (e) => {
+          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);
+          if (isMulti || isMerged) {
+            e.preventDefault();
+            showContextMenu(e.clientX, e.clientY);
+          }
+        });
+        tr.appendChild(td);
+      }
+    }
+    buildInsertOverlays();
+    tableEl.setAttribute("tabindex", "0");
+    tableEl.onkeydown = (e) => {
+      var _a3, _b3;
+      const editing = tableEl.querySelector("[contenteditable='true']");
+      if (editing) return;
+      const anchor = sel.anchor;
+      if (!anchor) return;
+      const numRows2 = cells.length;
+      const numCols2 = numRows2 > 0 ? cells[0].length : 0;
+      const navDeltas = {
+        ArrowUp: [-1, 0],
+        ArrowDown: [1, 0],
+        ArrowLeft: [0, -1],
+        ArrowRight: [0, 1]
+      };
+      if (navDeltas[e.key]) {
+        e.preventDefault();
+        const [dr, dc] = navDeltas[e.key];
+        const newRow = Math.max(0, Math.min(numRows2 - 1, anchor.row + dr));
+        const newCol = Math.max(0, Math.min(numCols2 - 1, anchor.col + dc));
+        if (e.shiftKey) {
+          sel.focus = { row: newRow, col: newCol };
+          applySelectionStyles();
+        } else {
+          selectCell(newRow, newCol);
+        }
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        editCell(anchor.row, anchor.col);
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const numCols3 = (_b3 = (_a3 = cells[0]) == null ? void 0 : _a3.length) != null ? _b3 : 0;
+        let nr = anchor.row;
+        let nc = e.shiftKey ? anchor.col - 1 : anchor.col + 1;
+        if (nc < 0) {
+          nc = numCols3 - 1;
+          nr = Math.max(0, nr - 1);
+        }
+        if (nc >= numCols3) {
+          nc = 0;
+          nr = Math.min(cells.length - 1, nr + 1);
+        }
+        selectCell(nr, nc);
+        return;
+      }
+      if (e.key === "m" && e.ctrlKey && !e.shiftKey) {
+        e.preventDefault();
+        mergeCells();
+        return;
+      }
+      if (e.key === "M" && e.ctrlKey && e.shiftKey) {
+        e.preventDefault();
+        splitCell();
+      }
+    };
+    tableEl.oncopy = (e) => {
+      var _a3, _b3, _c, _d;
+      const range2 = selectionRange(sel);
+      if (!range2) return;
+      e.preventDefault();
+      const { r1, c1, r2, c2 } = range2;
+      const tsvRows = [];
+      const htmlRows = [];
+      for (let r = r1; r <= r2; r++) {
+        const tsvCols = [];
+        const htmlCols = [];
+        for (let c = c1; c <= c2; c++) {
+          const val = (_b3 = (_a3 = cells[r]) == null ? void 0 : _a3[c]) != null ? _b3 : "";
+          tsvCols.push(val);
+          const escaped = val.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+          htmlCols.push(`<td>${escaped}</td>`);
+        }
+        tsvRows.push(tsvCols.join("	"));
+        htmlRows.push(`<tr>${htmlCols.join("")}</tr>`);
+      }
+      const tsvText = tsvRows.join("\n");
+      const htmlText = `<table>${htmlRows.join("")}</table>`;
+      (_c = e.clipboardData) == null ? void 0 : _c.setData("text/plain", tsvText);
+      (_d = e.clipboardData) == null ? void 0 : _d.setData("text/html", htmlText);
+    };
+    tableEl.onpaste = (e) => {
+      var _a3, _b3, _c, _d, _e, _f, _g, _h, _i;
+      const anchor = sel.anchor;
+      if (!anchor) return;
+      const text = (_b3 = (_a3 = e.clipboardData) == null ? void 0 : _a3.getData("text/plain")) != null ? _b3 : "";
+      const isMultiCell = text.includes("	") || text.split(/\r?\n/).filter((l) => l).length > 1;
+      const editing = tableEl.querySelector("[contenteditable='true']");
+      if (editing && !isMultiCell) return;
+      e.preventDefault();
+      if (editing) {
+        editing.contentEditable = "inherit";
+        const r = parseInt(
+          (_d = (_c = editing.closest("td")) == null ? void 0 : _c.getAttribute("data-row")) != null ? _d : "0",
+          10
+        );
+        const c = parseInt(
+          (_f = (_e = editing.closest("td")) == null ? void 0 : _e.getAttribute("data-col")) != null ? _f : "0",
+          10
+        );
+        if (cells[r]) {
+          cells[r][c] = (_g = editing.textContent) != null ? _g : "";
+        }
+      }
+      if (!text.trim()) return;
+      const pasteRows = text.split(/\r?\n/).map((line) => line.split("	"));
+      if (pasteRows.length > 1 && pasteRows[pasteRows.length - 1].length === 1 && pasteRows[pasteRows.length - 1][0] === "") {
+        pasteRows.pop();
+      }
+      const startR = anchor.row;
+      const startC = anchor.col;
+      const neededRows = startR + pasteRows.length;
+      while (cells.length < neededRows) {
+        cells.push(Array((_i = (_h = cells[0]) == null ? void 0 : _h.length) != null ? _i : 1).fill(""));
+      }
+      const maxPasteCols = Math.max(...pasteRows.map((r) => r.length));
+      const neededCols = startC + maxPasteCols;
+      if (cells[0] && neededCols > cells[0].length) {
+        const extraCols = neededCols - cells[0].length;
+        cells.forEach((row) => {
+          for (let i = 0; i < extraCols; i++) row.push("");
+        });
+      }
+      for (let pr = 0; pr < pasteRows.length; pr++) {
+        for (let pc = 0; pc < pasteRows[pr].length; pc++) {
+          const tr = startR + pr;
+          const tc = startC + pc;
+          if (cells[tr]) {
+            cells[tr][tc] = pasteRows[pr][pc];
+          }
+        }
+      }
+      persistValue();
+      rebuild();
+    };
+  }
+  const insertColBtn = makeOverlayCircleBtn({
+    label: "+",
+    title: t("tableAddColumn", state),
+    size: 20,
+    color: "var(--fb-primary-color, #0066cc)",
+    textColor: "white",
+    onClick: () => {
+      var _a2;
+      const afterIdx = parseInt((_a2 = insertColBtn.dataset.afterCol) != null ? _a2 : "0", 10);
+      addColumn(afterIdx);
+    }
+  });
+  insertColBtn.style.position = "absolute";
+  insertColBtn.style.display = "none";
+  tableWrapper.appendChild(insertColBtn);
+  const insertRowBtn = makeOverlayCircleBtn({
+    label: "+",
+    title: t("tableAddRow", state),
+    size: 20,
+    color: "var(--fb-primary-color, #0066cc)",
+    textColor: "white",
+    onClick: () => {
+      var _a2;
+      const afterIdx = parseInt((_a2 = insertRowBtn.dataset.afterRow) != null ? _a2 : "0", 10);
+      addRow(afterIdx);
+    }
+  });
+  insertRowBtn.style.position = "absolute";
+  insertRowBtn.style.display = "none";
+  tableWrapper.appendChild(insertRowBtn);
+  let colRemoveBtns = [];
+  let rowRemoveBtns = [];
+  const addLastColBtn = makeOverlayCircleBtn({
+    label: "+",
+    title: t("tableAddColumn", state),
+    size: 20,
+    color: "var(--fb-primary-color, #0066cc)",
+    textColor: "white",
+    onClick: () => addColumn()
+  });
+  addLastColBtn.style.position = "absolute";
+  addLastColBtn.style.display = "none";
+  tableWrapper.appendChild(addLastColBtn);
+  const addLastRowBtn = makeOverlayCircleBtn({
+    label: "+",
+    title: t("tableAddRow", state),
+    size: 20,
+    color: "var(--fb-primary-color, #0066cc)",
+    textColor: "white",
+    onClick: () => addRow()
+  });
+  addLastRowBtn.style.position = "absolute";
+  addLastRowBtn.style.display = "none";
+  tableWrapper.appendChild(addLastRowBtn);
+  function buildInsertOverlays() {
+    var _a2, _b2;
+    colRemoveBtns.forEach((b) => b.remove());
+    colRemoveBtns = [];
+    rowRemoveBtns.forEach((b) => b.remove());
+    rowRemoveBtns = [];
+    const numCols = cells.length > 0 ? cells[0].length : 0;
+    const numRows = cells.length;
+    if (numCols > 1) {
+      const headerCells = Array.from(
+        tableEl.querySelectorAll("thead td[data-col]")
+      );
+      for (const hc of headerCells) {
+        const colIdx = parseInt((_a2 = hc.getAttribute("data-col")) != null ? _a2 : "0", 10);
+        const btn = makeOverlayCircleBtn({
+          label: "\xD7",
+          title: t("tableRemoveColumn", state),
+          size: 16,
+          color: "var(--fb-error-color, #dc3545)",
+          textColor: "white",
+          onClick: () => removeColumn(colIdx)
+        });
+        btn.setAttribute("data-action", "remove-col");
+        btn.setAttribute("data-col", String(colIdx));
+        btn.style.position = "absolute";
+        btn.style.display = "none";
+        tableWrapper.appendChild(btn);
+        colRemoveBtns.push(btn);
+      }
+    }
+    if (numRows > 1) {
+      const allRowElements = [
+        ...tableEl.tHead ? Array.from(tableEl.tHead.rows) : [],
+        ...tableEl.tBodies[0] ? Array.from(tableEl.tBodies[0].rows) : []
+      ].filter((r) => r.querySelector("td[data-row]"));
+      for (const rowEl of allRowElements) {
+        const firstTd = rowEl.querySelector("td[data-row]");
+        if (!firstTd) continue;
+        const rowIdx = parseInt((_b2 = firstTd.getAttribute("data-row")) != null ? _b2 : "0", 10);
+        const btn = makeOverlayCircleBtn({
+          label: "\xD7",
+          title: t("tableRemoveRow", state),
+          size: 16,
+          color: "var(--fb-error-color, #dc3545)",
+          textColor: "white",
+          onClick: () => removeRow(rowIdx)
+        });
+        btn.setAttribute("data-action", "remove-row");
+        btn.setAttribute("data-row", String(rowIdx));
+        btn.style.position = "absolute";
+        btn.style.display = "none";
+        tableWrapper.appendChild(btn);
+        rowRemoveBtns.push(btn);
+      }
+    }
+    function updateTopZoneOverlays(mx, wr, tblR, scrollL, active) {
+      var _a3;
+      const headerCells = active ? Array.from(tableEl.querySelectorAll("thead td[data-col]")) : [];
+      let closestColIdx = -1;
+      let closestColDist = Infinity;
+      let closestBorderX = -1;
+      let closestAfterCol = -1;
+      let closestBorderDist = Infinity;
+      for (let i = 0; i < headerCells.length; i++) {
+        const cellRect = headerCells[i].getBoundingClientRect();
+        const centerX = (cellRect.left + cellRect.right) / 2;
+        const dist = Math.abs(mx - centerX);
+        if (dist < closestColDist) {
+          closestColDist = dist;
+          closestColIdx = i;
+        }
+        const borderDist = Math.abs(mx - cellRect.right);
+        if (borderDist < closestBorderDist && borderDist < 20) {
+          closestBorderDist = borderDist;
+          closestBorderX = cellRect.right - wr.left + scrollL;
+          closestAfterCol = parseInt((_a3 = headerCells[i].getAttribute("data-col")) != null ? _a3 : "0", 10);
+        }
+      }
+      colRemoveBtns.forEach((btn, idx) => {
+        if (!active || idx !== closestColIdx) {
+          btn.style.display = "none";
+          return;
+        }
+        const cellRect = headerCells[idx].getBoundingClientRect();
+        const centerX = (cellRect.left + cellRect.right) / 2 - wr.left + scrollL;
+        btn.style.left = `${centerX - 8}px`;
+        btn.style.top = "2px";
+        btn.style.display = "flex";
+      });
+      if (active && closestAfterCol >= 0) {
+        insertColBtn.style.display = "flex";
+        insertColBtn.style.left = `${closestBorderX - 10}px`;
+        insertColBtn.style.top = `${tblR.top - wr.top - 10}px`;
+        insertColBtn.dataset.afterCol = String(closestAfterCol);
+      } else {
+        insertColBtn.style.display = "none";
+      }
+    }
+    function updateLeftZoneOverlays(my, wr, tblR, scrollL, active) {
+      var _a3;
+      const allRowEls = [];
+      if (active) {
+        if (tableEl.tHead) {
+          for (const row of Array.from(tableEl.tHead.rows)) {
+            if (row.querySelector("td[data-row]")) allRowEls.push(row);
+          }
+        }
+        if (tableEl.tBodies[0]) {
+          for (const row of Array.from(tableEl.tBodies[0].rows)) {
+            if (row.querySelector("td[data-row]")) allRowEls.push(row);
+          }
+        }
+      }
+      let closestRowIdx = -1;
+      let closestRowDist = Infinity;
+      let closestBorderY = -1;
+      let closestAfterRow = -1;
+      let closestRowBorderDist = Infinity;
+      for (let i = 0; i < allRowEls.length; i++) {
+        const trRect = allRowEls[i].getBoundingClientRect();
+        const centerY = (trRect.top + trRect.bottom) / 2;
+        const dist = Math.abs(my - centerY);
+        if (dist < closestRowDist) {
+          closestRowDist = dist;
+          closestRowIdx = i;
+        }
+        const borderDist = Math.abs(my - trRect.bottom);
+        if (borderDist < closestRowBorderDist && borderDist < 14) {
+          closestRowBorderDist = borderDist;
+          closestBorderY = trRect.bottom - wr.top;
+          const firstTd = allRowEls[i].querySelector("td[data-row]");
+          closestAfterRow = parseInt((_a3 = firstTd == null ? void 0 : firstTd.getAttribute("data-row")) != null ? _a3 : "0", 10);
+        }
+      }
+      rowRemoveBtns.forEach((btn, idx) => {
+        if (!active || idx !== closestRowIdx) {
+          btn.style.display = "none";
+          return;
+        }
+        const trRect = allRowEls[idx].getBoundingClientRect();
+        const centerY = (trRect.top + trRect.bottom) / 2 - wr.top;
+        btn.style.left = "4px";
+        btn.style.top = `${centerY - 8}px`;
+        btn.style.display = "flex";
+      });
+      if (active && closestAfterRow >= 0) {
+        insertRowBtn.style.display = "flex";
+        insertRowBtn.style.top = `${closestBorderY - 10}px`;
+        insertRowBtn.style.left = `${tblR.left - wr.left + scrollL - 10}px`;
+        insertRowBtn.dataset.afterRow = String(closestAfterRow);
+      } else {
+        insertRowBtn.style.display = "none";
+      }
+    }
+    let rafPending = false;
+    tableWrapper.onmousemove = (e) => {
+      const target = e.target;
+      if (target.tagName === "BUTTON" && target.parentElement === tableWrapper) return;
+      if (rafPending) return;
+      rafPending = true;
+      const mx = e.clientX;
+      const my = e.clientY;
+      requestAnimationFrame(() => {
+        rafPending = false;
+        const wr = tableWrapper.getBoundingClientRect();
+        const tblR = tableEl.getBoundingClientRect();
+        const scrollL = tableWrapper.scrollLeft;
+        const inTopZone = my >= wr.top && my < tblR.top + 4;
+        const inLeftZone = mx >= wr.left && mx < tblR.left + 4;
+        const visibleRight = Math.min(tblR.right, wr.right);
+        const inRightZone = mx > visibleRight - 20 && mx <= wr.right;
+        const inBottomZone = my > tblR.bottom - 4 && my <= wr.bottom + 20;
+        updateTopZoneOverlays(mx, wr, tblR, scrollL, inTopZone);
+        updateLeftZoneOverlays(my, wr, tblR, scrollL, inLeftZone);
+        addLastColBtn.style.display = inRightZone ? "flex" : "none";
+        if (inRightZone) {
+          addLastColBtn.style.left = `${wr.right - wr.left + scrollL - 20}px`;
+          addLastColBtn.style.top = `${(tblR.top + tblR.bottom) / 2 - wr.top - 10}px`;
+        }
+        addLastRowBtn.style.display = inBottomZone ? "flex" : "none";
+        if (inBottomZone) {
+          const visibleCenterX = (wr.left + wr.right) / 2 - wr.left + scrollL;
+          addLastRowBtn.style.left = `${visibleCenterX - 10}px`;
+          addLastRowBtn.style.top = `${tblR.bottom - wr.top - 10}px`;
+        }
+      });
+    };
+    tableWrapper.onmouseleave = () => {
+      colRemoveBtns.forEach((btn) => {
+        btn.style.display = "none";
+      });
+      rowRemoveBtns.forEach((btn) => {
+        btn.style.display = "none";
+      });
+      insertColBtn.style.display = "none";
+      insertRowBtn.style.display = "none";
+      addLastColBtn.style.display = "none";
+      addLastRowBtn.style.display = "none";
+    };
+  }
+  rebuild();
+}
+function defaultTableData(element) {
+  var _a, _b;
+  return {
+    cells: createEmptyCells((_a = element.rows) != null ? _a : 3, (_b = element.columns) != null ? _b : 3),
+    merges: []
+  };
+}
+function isTableData(v) {
+  return v !== null && typeof v === "object" && "cells" in v && Array.isArray(v.cells);
+}
+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);
+  if (state.config.readonly) {
+    renderReadonlyTable(initialData, wrapper);
+  } else {
+    renderEditTable(element, initialData, pathKey, ctx, wrapper);
+  }
+}
+function validateTableElement(element, key, context) {
+  const { scopeRoot, skipValidation } = context;
+  const errors = [];
+  const hiddenInput = scopeRoot.querySelector(
+    `[name="${key}"]`
+  );
+  if (!hiddenInput) {
+    return { value: null, errors };
+  }
+  let value = null;
+  try {
+    value = JSON.parse(hiddenInput.value);
+  } catch {
+    errors.push(`${key}: invalid table data`);
+    return { value: null, errors };
+  }
+  if (!skipValidation && element.required) {
+    const hasContent = value.cells.some(
+      (row) => row.some((cell) => cell.trim() !== "")
+    );
+    if (!hasContent) {
+      errors.push(`${key}: ${t("required", context.state)}`);
+    }
+  }
+  return { value, errors };
+}
+function updateTableField(_element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  const hiddenInput = scopeRoot.querySelector(
+    `[name="${fieldPath}"]`
+  );
+  if (!hiddenInput) {
+    console.warn(
+      `updateTableField: no hidden input found for "${fieldPath}". Re-render to reflect new data.`
+    );
+    return;
+  }
+  if (isTableData(value) && hiddenInput._applyExternalUpdate) {
+    hiddenInput._applyExternalUpdate(value);
+  } 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) {
+  var _a, _b, _c, _d;
+  const labels = /* @__PURE__ */ new Map();
+  const nameCount = /* @__PURE__ */ new Map();
+  for (const rid of files) {
+    const meta = state.resourceIndex.get(rid);
+    const name = (_a = meta == null ? void 0 : meta.name) != null ? _a : rid;
+    nameCount.set(name, ((_b = nameCount.get(name)) != null ? _b : 0) + 1);
+  }
+  for (const rid of files) {
+    const meta = state.resourceIndex.get(rid);
+    const name = (_c = meta == null ? void 0 : meta.name) != null ? _c : rid;
+    if (((_d = nameCount.get(name)) != null ? _d : 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 == null ? void 0 : 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) => {
+      var _a;
+      img.src = ((_a = e.target) == null ? void 0 : _a.result) || "";
+    };
+    reader.readAsDataURL(meta.file);
+    thumb.appendChild(img);
+  } else if (state.config.getThumbnail) {
+    state.config.getThumbnail(rid).then((url) => {
+      var _a;
+      if (!url || !thumb.isConnected) return;
+      const img = document.createElement("img");
+      img.alt = (_a = meta == null ? void 0 : meta.name) != null ? _a : rid;
+      img.src = url;
+      img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
+      clear(thumb);
+      thumb.appendChild(img);
+    }).catch((err) => {
+      var _a, _b;
+      (_b = (_a = state.config).onThumbnailError) == null ? void 0 : _b.call(_a, 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 == null ? void 0 : 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 == null ? void 0 : 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) => {
+      var _a;
+      img.src = ((_a = e.target) == null ? void 0 : _a.result) || "";
+    };
+    reader.readAsDataURL(meta.file);
+    hoverEl.appendChild(img);
+  } else if (state.config.getThumbnail) {
+    state.config.getThumbnail(rid).then((url) => {
+      var _a;
+      if (!url || !hoverEl.isConnected) return;
+      const img = document.createElement("img");
+      img.alt = (_a = meta == null ? void 0 : meta.name) != null ? _a : 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) => {
+      var _a, _b;
+      (_b = (_a = state.config).onThumbnailError) == null ? void 0 : _b.call(_a, 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) {
+  var _a, _b;
+  const { rid, state, isReadonly, onMention, onRemove } = opts;
+  const meta = state.resourceIndex.get(rid);
+  const filename = (_a = meta == null ? void 0 : meta.name) != null ? _a : 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) => {
+      var _a2, _b2;
+      e.stopPropagation();
+      (_b2 = (_a2 = state.config).downloadFile) == null ? void 0 : _b2.call(_a2, rid, filename);
+    });
+    actionsRow.appendChild(dlBtn);
+  }
+  const hasOpenUrl = !!((_b = state.config.getDownloadUrl) != null ? _b : 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) => {
+      var _a2, _b2, _c, _d;
+      e.stopPropagation();
+      if (state.config.getDownloadUrl) {
+        const url = state.config.getDownloadUrl(rid);
+        if (url) {
+          window.open(url, "_blank");
+        } else {
+          (_b2 = (_a2 = state.config).getThumbnail) == null ? void 0 : _b2.call(_a2, rid).then((thumbUrl) => {
+            if (thumbUrl) window.open(thumbUrl, "_blank");
+          }).catch(() => {
+          });
+        }
+      } else {
+        (_d = (_c = state.config).getThumbnail) == null ? void 0 : _d.call(_c, 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) {
+  var _a;
+  const cursorPos = (_a = textarea.selectionStart) != null ? _a : 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) => {
+    var _a;
+    const label = (_a = labels.get(rid)) != null ? _a : 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) {
+  var _a;
+  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() {
+    var _a2, _b;
+    const rawText = textarea.value;
+    const nameToRid = buildNameToRid(files, state);
+    const submissionText = rawText ? replaceFilenamesWithRids(rawText, nameToRid) : null;
+    const textKey = (_a2 = element.textKey) != null ? _a2 : "text";
+    const filesKey = (_b = element.filesKey) != null ? _b : "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) => {
+    var _a2, _b;
+    e.preventDefault();
+    dragCounter = 0;
+    outerDiv.style.borderColor = "var(--fb-border-color, #d1d5db)";
+    outerDiv.style.boxShadow = "none";
+    const droppedFiles = (_a2 = e.dataTransfer) == null ? void 0 : _a2.files;
+    if (!droppedFiles || !state.config.uploadFile) return;
+    const maxFiles = (_b = element.maxFiles) != null ? _b : 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 = (_a = initialValue.text) != null ? _a : "";
+  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) => {
+    var _a2, _b;
+    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(_a2, "mark");
+    if (!(mark == null ? void 0 : mark.dataset.rid)) return;
+    mentionTooltip = removePortalTooltip(mentionTooltip);
+    mentionTooltip = showMentionTooltip(mark, mark.dataset.rid, state);
+  });
+  backdrop.addEventListener("mouseout", (e) => {
+    var _a2, _b, _c;
+    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(_a2, "mark");
+    if (!mark) return;
+    const related = e.relatedTarget;
+    if ((_c = related == null ? void 0 : related.closest) == null ? void 0 : _c.call(related, "mark")) return;
+    mentionTooltip = removePortalTooltip(mentionTooltip);
+  });
+  backdrop.addEventListener("mousedown", (e) => {
+    var _a2, _b;
+    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(_a2, "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", () => {
+    var _a2;
+    const maxFiles = (_a2 = element.maxFiles) != null ? _a2 : 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) => {
+      var _a2;
+      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 == null ? void 0 : 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) => {
+          var _a3;
+          img.src = ((_a3 = ev.target) == null ? void 0 : _a3.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 = (_a2 = labels.get(rid)) != null ? _a2 : rid;
+      item.appendChild(nameSpan);
+      dropdown.appendChild(item);
+    });
+    dropdown.onmousemove = (e) => {
+      var _a2, _b, _c;
+      const target = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+        _a2,
+        ".fb-richinput-dropdown-item"
+      );
+      if (!target) return;
+      const newIdx = filtered.indexOf((_c = target.dataset.rid) != null ? _c : "");
+      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) => {
+      var _a2, _b;
+      e.preventDefault();
+      e.stopPropagation();
+      const target = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+        _a2,
+        ".fb-richinput-dropdown-item"
+      );
+      if (!(target == null ? void 0 : 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) {
+    var _a2, _b, _c, _d;
+    const labels = buildFileLabelsFromClosure();
+    const label = (_c = (_b = labels.get(rid)) != null ? _b : (_a2 = state.resourceIndex.get(rid)) == null ? void 0 : _a2.name) != null ? _c : rid;
+    const cursorPos = (_d = textarea.selectionStart) != null ? _d : 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", () => {
+    var _a2;
+    updateBackdrop();
+    writeHidden();
+    (_a2 = ctx.instance) == null ? void 0 : _a2.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 = () => {
+        var _a2, _b, _c;
+        const cursorPos = (_a2 = textarea.selectionStart) != null ? _a2 : textarea.value.length;
+        const labels = buildFileLabelsFromClosure();
+        const label = (_c = (_b = labels.get(rid)) != null ? _b : meta == null ? void 0 : meta.name) != null ? _c : 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 = () => {
+        var _a2;
+        const idx = files.indexOf(rid);
+        if (idx !== -1) files.splice(idx, 1);
+        renderFilesRow();
+        updateBackdrop();
+        writeHidden();
+        (_a2 = ctx.instance) == null ? void 0 : _a2.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) => {
+      var _a2;
+      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();
+      (_a2 = ctx.instance) == null ? void 0 : _a2.triggerOnChange(pathKey, getCurrentValue());
+    }).catch((err) => {
+      var _a2, _b;
+      const idx = files.indexOf(tempId);
+      if (idx !== -1) files.splice(idx, 1);
+      state.resourceIndex.delete(tempId);
+      renderFilesRow();
+      (_b = (_a2 = state.config).onUploadError) == null ? void 0 : _b.call(_a2, err, file);
+    });
+  }
+  fileInput.addEventListener("change", () => {
+    var _a2;
+    const selected = fileInput.files;
+    if (!selected || selected.length === 0) return;
+    const maxFiles = (_a2 = element.maxFiles) != null ? _a2 : 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) => {
+    var _a2;
+    const rawText = (_a2 = value.text) != null ? _a2 : "";
+    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) {
+  var _a, _b;
+  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 == null ? void 0 : 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 : (_a = [...ridToName.entries()].find(([, n]) => n === token.name)) == null ? void 0 : _a[0];
+        const displayName = (_b = ridToName.get(token.name)) != null ? _b : 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) {
+  var _a, _b, _c, _d;
+  const state = ctx.state;
+  const textKey = (_a = element.textKey) != null ? _a : "text";
+  const filesKey = (_b = element.filesKey) != null ? _b : "files";
+  const rawPrefill = ctx.prefill[element.key];
+  let initialValue;
+  if (rawPrefill && typeof rawPrefill === "object" && !Array.isArray(rawPrefill)) {
+    const obj = rawPrefill;
+    const textVal = (_c = obj[textKey]) != null ? _c : obj["text"];
+    const filesVal = (_d = obj[filesKey]) != null ? _d : 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) {
+  var _a, _b;
+  const { scopeRoot, state, skipValidation } = context;
+  const errors = [];
+  const textKey = (_a = element.textKey) != null ? _a : "text";
+  const filesKey = (_b = element.filesKey) != null ? _b : "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 ? 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) {
+  var _a, _b, _c, _d;
+  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 = (_a = element.textKey) != null ? _a : "text";
+    const filesKey = (_b = element.filesKey) != null ? _b : "files";
+    const textVal = (_c = obj[textKey]) != null ? _c : obj["text"];
+    const filesVal = (_d = obj[filesKey]) != null ? _d : 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);
+  if (!tooltip) return;
+  const isCurrentlyVisible = !tooltip.classList.contains("hidden");
+  document.querySelectorAll('[id^="tooltip-"]').forEach((t2) => {
+    t2.classList.add("hidden");
+  });
+  if (isCurrentlyVisible) {
+    return;
+  }
+  const rect = button.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  if (tooltip && tooltip.parentElement !== document.body) {
+    document.body.appendChild(tooltip);
+  }
+  tooltip.style.visibility = "hidden";
+  tooltip.style.position = "fixed";
+  tooltip.classList.remove("hidden");
+  const tooltipRect = tooltip.getBoundingClientRect();
+  tooltip.classList.add("hidden");
+  tooltip.style.visibility = "visible";
+  let left = rect.left;
+  let top = rect.bottom + 5;
+  if (left + tooltipRect.width > viewportWidth) {
+    left = rect.right - tooltipRect.width;
+  }
+  if (top + tooltipRect.height > viewportHeight) {
+    top = rect.top - tooltipRect.height - 5;
+  }
+  if (left < 10) {
+    left = 10;
+  }
+  if (top < 10) {
+    top = rect.bottom + 5;
+  }
+  tooltip.style.left = `${left}px`;
+  tooltip.style.top = `${top}px`;
+  tooltip.classList.remove("hidden");
+  setTimeout(() => {
+    tooltip.classList.add("hidden");
+  }, 25e3);
+}
+if (typeof document !== "undefined") {
+  document.addEventListener("click", (e) => {
+    const target = e.target;
+    const isInfoButton = target.closest("button") && target.closest("button").onclick;
+    const isTooltip = target.closest('[id^="tooltip-"]');
+    if (!isInfoButton && !isTooltip) {
+      document.querySelectorAll('[id^="tooltip-"]').forEach((tooltip) => {
+        tooltip.classList.add("hidden");
+      });
+    }
+  });
+}
+function shouldDisableElement(element, ctx) {
+  var _a, _b, _c;
+  if (!element.enableIf) {
+    return false;
+  }
+  try {
+    const rootFormData = (_b = (_a = ctx.formData) != null ? _a : ctx.prefill) != null ? _b : {};
+    const scope = (_c = element.enableIf.scope) != null ? _c : "relative";
+    const containerData = scope === "relative" && ctx.path ? ctx.prefill : void 0;
+    const shouldEnable = evaluateEnableCondition(
+      element.enableIf,
+      rootFormData,
+      containerData
+    );
+    return !shouldEnable;
+  } catch (error) {
+    console.error(
+      `Error evaluating enableIf for field "${element.key}":`,
+      error
+    );
+  }
+  return false;
+}
+function extractDOMValue(fieldPath, formRoot) {
+  const input = formRoot.querySelector(
+    `[name="${fieldPath}"]`
+  );
+  if (!input) {
+    return void 0;
+  }
+  if (input instanceof HTMLSelectElement) {
+    return input.value;
+  } else if (input instanceof HTMLInputElement) {
+    if (input.type === "checkbox") {
+      return input.checked;
+    } else if (input.type === "radio") {
+      const checked = formRoot.querySelector(
+        `[name="${fieldPath}"]:checked`
+      );
+      return checked ? checked.value : void 0;
+    } else {
+      return input.value;
+    }
+  } else if (input instanceof HTMLTextAreaElement) {
+    return input.value;
+  }
+  return void 0;
+}
+function reevaluateEnableIf(wrapper, element, ctx) {
+  var _a, _b;
+  if (!element.enableIf) {
+    return;
+  }
+  const formRoot = ctx.state.formRoot;
+  if (!formRoot) {
+    console.error(`Cannot re-evaluate enableIf: formRoot is null`);
+    return;
+  }
+  const condition = element.enableIf;
+  const scope = (_a = condition.scope) != null ? _a : "relative";
+  let rootFormData = {};
+  const containerData = {};
+  const effectiveScope = !ctx.path || ctx.path === "" ? "absolute" : scope;
+  if (effectiveScope === "relative" && ctx.path) {
+    const containerMatch = ctx.path.match(/^(.+)\[(\d+)\]$/);
+    if (containerMatch) {
+      const containerKey = containerMatch[1];
+      const containerIndex = parseInt(containerMatch[2], 10);
+      const containerItemElement = formRoot.querySelector(
+        `[data-container-item="${containerKey}[${containerIndex}]"]`
+      );
+      if (containerItemElement) {
+        const inputs = containerItemElement.querySelectorAll(
+          "input, select, textarea"
+        );
+        inputs.forEach((input) => {
+          const fieldName = input.getAttribute("name");
+          if (fieldName) {
+            const fieldKeyMatch = fieldName.match(/\.([^.[\]]+)$/);
+            if (fieldKeyMatch) {
+              const fieldKey = fieldKeyMatch[1];
+              if (input instanceof HTMLSelectElement) {
+                containerData[fieldKey] = input.value;
+              } else if (input instanceof HTMLInputElement) {
+                if (input.type === "checkbox") {
+                  containerData[fieldKey] = input.checked;
+                } else if (input.type === "radio") {
+                  if (input.checked) {
+                    containerData[fieldKey] = input.value;
+                  }
+                } else {
+                  containerData[fieldKey] = input.value;
+                }
+              } else if (input instanceof HTMLTextAreaElement) {
+                containerData[fieldKey] = input.value;
+              }
+            }
+          }
+        });
+      }
+    }
+  } else {
+    const dependencyKey = condition.key;
+    const dependencyValue = extractDOMValue(dependencyKey, formRoot);
+    if (dependencyValue !== void 0) {
+      rootFormData[dependencyKey] = dependencyValue;
+    } else {
+      rootFormData = (_b = ctx.formData) != null ? _b : ctx.prefill;
+    }
+  }
+  try {
+    const shouldEnable = evaluateEnableCondition(
+      condition,
+      rootFormData,
+      containerData
+    );
+    if (shouldEnable) {
+      wrapper.style.display = "";
+      wrapper.classList.remove("fb-field-wrapper-disabled");
+      wrapper.removeAttribute("data-conditionally-disabled");
+    } else {
+      wrapper.style.display = "none";
+      wrapper.classList.add("fb-field-wrapper-disabled");
+      wrapper.setAttribute("data-conditionally-disabled", "true");
+    }
+  } catch (error) {
+    console.error(`Error re-evaluating enableIf for field "${element.key}":`, error);
+  }
+}
+function setupEnableIfListeners(wrapper, element, ctx) {
+  var _a;
+  if (!element.enableIf) {
+    return;
+  }
+  const formRoot = ctx.state.formRoot;
+  if (!formRoot) {
+    console.error(`Cannot setup enableIf listeners: formRoot is null`);
+    return;
+  }
+  const condition = element.enableIf;
+  const scope = (_a = condition.scope) != null ? _a : "relative";
+  const dependencyKey = condition.key;
+  let dependencyFieldPath;
   if (scope === "relative" && ctx.path) {
     dependencyFieldPath = `${ctx.path}.${dependencyKey}`;
   } else {
@@ -5121,6 +7451,12 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
         renderSingleContainerElement(element, ctx, wrapper, pathKey);
       }
       break;
+    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";
@@ -5211,7 +7547,17 @@ var defaultConfig = {
       minFiles: "Minimum {min} files required",
       maxFiles: "Maximum {max} files allowed",
       unsupportedFieldType: "Unsupported field type: {type}",
-      invalidOption: "Invalid option"
+      invalidOption: "Invalid option",
+      tableAddRow: "Add row",
+      tableAddColumn: "Add column",
+      tableRemoveRow: "Remove row",
+      tableRemoveColumn: "Remove column",
+      tableMergeCells: "Merge cells (Ctrl+M)",
+      tableSplitCell: "Split cell (Ctrl+Shift+M)",
+      richinputPlaceholder: "Type text...",
+      richinputAttachFile: "Attach file",
+      richinputMention: "Mention",
+      richinputRemoveFile: "Remove"
     },
     ru: {
       // UI texts
@@ -5257,7 +7603,17 @@ var defaultConfig = {
       minFiles: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C {min} \u0444\u0430\u0439\u043B\u043E\u0432",
       maxFiles: "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u0444\u0430\u0439\u043B\u043E\u0432",
       unsupportedFieldType: "\u041D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0442\u0438\u043F \u043F\u043E\u043B\u044F: {type}",
-      invalidOption: "\u041D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435"
+      invalidOption: "\u041D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435",
+      tableAddRow: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443",
+      tableAddColumn: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u043E\u043B\u0431\u0435\u0446",
+      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)",
+      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: {}
@@ -5531,6 +7887,14 @@ var componentRegistry = {
     // Deprecated type - delegates to container
     validate: validateGroupElement,
     update: updateGroupField
+  },
+  table: {
+    validate: validateTableElement,
+    update: updateTableField
+  },
+  richinput: {
+    validate: validateRichInputElement,
+    update: updateRichInputField
   }
 };
 function getComponentOperations(elementType) {