@dmitryvim/form-builder 0.2.18 → 0.2.19

package/dist/esm/index.js

@@ -4707,6 +4707,1009 @@ function updateGroupField(element, fieldPath, value, context) {
   return updateContainerField(containerElement, fieldPath, value, context);
 }
 
+// src/components/table.ts
+function createEmptyCells(rows, cols) {
+  return Array.from(
+    { length: rows },
+    () => Array.from({ length: cols }, () => "")
+  );
+}
+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) {
+  return merges.find((m) => m.row === row && m.col === col) ?? null;
+}
+function selectionRange(sel) {
+  if (!sel.anchor) return null;
+  const focus = sel.focus ?? 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 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) => {
+    const section = rIdx === 0 ? tableEl.createTHead() : tableEl.tBodies[0] ?? 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 = rowData[cIdx] ?? "";
+      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 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?.removeAllRanges();
+  winSel?.addRange(domRange);
+  function commit() {
+    span.contentEditable = "inherit";
+    const cells = getCells();
+    if (cells[r]) {
+      cells[r][c] = span.textContent ?? "";
+    }
+    persistValue();
+  }
+  function onKeyDown(e) {
+    const cells = getCells();
+    const numCols = cells[0]?.length ?? 0;
+    if (e.key === "Escape") {
+      span.contentEditable = "inherit";
+      span.textContent = cells[r]?.[c] ?? "";
+      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);
+    }
+  }
+  function onBlur() {
+    if (span.contentEditable === "true") {
+      commit();
+      span.removeEventListener("keydown", onKeyDown);
+      span.removeEventListener("blur", onBlur);
+    }
+  }
+  span.addEventListener("keydown", onKeyDown);
+  span.addEventListener("blur", onBlur);
+}
+function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
+  const state = ctx.state;
+  const instance = ctx.instance;
+  const cells = initialData.cells.length > 0 ? initialData.cells.map((r) => [...r]) : createEmptyCells(element.rows ?? 3, element.columns ?? 3);
+  let merges = initialData.merges ? [...initialData.merges] : [];
+  const sel = { anchor: null, focus: null, dragging: false };
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = pathKey;
+  hiddenInput.value = JSON.stringify({ cells, merges });
+  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 (isSingleMerged) {
+      contextMenu.appendChild(
+        makeContextMenuBtn(t("tableSplitCell", state), splitCell)
+      );
+    }
+    if (!contextMenu.firstChild) {
+      hideContextMenu();
+      return;
+    }
+    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 selectCell(row, col) {
+    sel.anchor = { row, col };
+    sel.focus = null;
+    applySelectionStyles();
+    tableEl.focus();
+  }
+  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) {
+    const numCols = cells.length > 0 ? cells[0].length : element.columns ?? 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();
+  }
+  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) {
+    const insertAt = afterIndex !== void 0 ? afterIndex + 1 : cells[0]?.length ?? 0;
+    cells.forEach((row) => row.splice(insertAt, 0, ""));
+    merges = merges.map((m) => {
+      if (m.col >= insertAt) {
+        return { ...m, col: m.col + 1 };
+      }
+      if (m.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() {
+    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 ? tableEl.tHead ?? tableEl.createTHead() : tableEl.tBodies[0] ?? 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) => {
+      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 = cells[0]?.length ?? 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) => {
+      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 = cells[r]?.[c] ?? "";
+          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>`;
+      e.clipboardData?.setData("text/plain", tsvText);
+      e.clipboardData?.setData("text/html", htmlText);
+    };
+    tableEl.onpaste = (e) => {
+      const anchor = sel.anchor;
+      if (!anchor) return;
+      const text = e.clipboardData?.getData("text/plain") ?? "";
+      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(
+          editing.closest("td")?.getAttribute("data-row") ?? "0",
+          10
+        );
+        const c = parseInt(
+          editing.closest("td")?.getAttribute("data-col") ?? "0",
+          10
+        );
+        if (cells[r]) {
+          cells[r][c] = editing.textContent ?? "";
+        }
+      }
+      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(cells[0]?.length ?? 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: () => {
+      const afterIdx = parseInt(insertColBtn.dataset.afterCol ?? "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: () => {
+      const afterIdx = parseInt(insertRowBtn.dataset.afterRow ?? "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() {
+    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(hc.getAttribute("data-col") ?? "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(firstTd.getAttribute("data-row") ?? "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) {
+      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(headerCells[i].getAttribute("data-col") ?? "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) {
+      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(firstTd?.getAttribute("data-row") ?? "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) {
+  return {
+    cells: createEmptyCells(element.rows ?? 3, element.columns ?? 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/index.ts
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
@@ -5053,6 +6056,9 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
         renderSingleContainerElement(element, ctx, wrapper, pathKey);
       }
       break;
+    case "table":
+      renderTableElement(element, ctx, wrapper, pathKey);
+      break;
     default: {
       const unsupported = document.createElement("div");
       unsupported.className = "text-red-500 text-sm";
@@ -5143,7 +6149,13 @@ 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)"
     },
     ru: {
       // UI texts
@@ -5189,7 +6201,13 @@ 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)"
     }
   },
   theme: {}
@@ -5463,6 +6481,10 @@ var componentRegistry = {
     // Deprecated type - delegates to container
     validate: validateGroupElement,
     update: updateGroupField
+  },
+  table: {
+    validate: validateTableElement,
+    update: updateTableField
   }
 };
 function getComponentOperations(elementType) {