@dmitryvim/form-builder 0.2.17 → 0.2.19

package/dist/esm/index.js

@@ -719,6 +719,21 @@ function updateTextField(element, fieldPath, value, context) {
 }
 
 // src/components/textarea.ts
+function applyAutoExpand(textarea) {
+  textarea.style.overflow = "hidden";
+  textarea.style.resize = "none";
+  const lineCount = (textarea.value.match(/\n/g) || []).length + 1;
+  textarea.rows = Math.max(1, lineCount);
+  const resize = () => {
+    if (!textarea.isConnected) return;
+    textarea.style.height = "0";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  };
+  textarea.addEventListener("input", resize);
+  setTimeout(() => {
+    if (textarea.isConnected) resize();
+  }, 0);
+}
 function renderTextareaElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const textareaWrapper = document.createElement("div");
@@ -739,6 +754,9 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
   }
+  if (element.autoExpand || state.config.readonly) {
+    applyAutoExpand(textareaInput);
+  }
   textareaWrapper.appendChild(textareaInput);
   if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textareaInput, true);
@@ -787,6 +805,9 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
+    if (element.autoExpand || state.config.readonly) {
+      applyAutoExpand(textareaInput);
+    }
     textareaContainer.appendChild(textareaInput);
     if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textareaInput, true);
@@ -888,6 +909,24 @@ function validateTextareaElement(element, key, context) {
 }
 function updateTextareaField(element, fieldPath, value, context) {
   updateTextField(element, fieldPath, value, context);
+  const { scopeRoot, state } = context;
+  const shouldAutoExpand = element.autoExpand || state.config.readonly;
+  if (!shouldAutoExpand) return;
+  if (element.multiple) {
+    const textareas = scopeRoot.querySelectorAll(
+      `textarea[name^="${fieldPath}["]`
+    );
+    textareas.forEach((textarea) => {
+      textarea.dispatchEvent(new Event("input"));
+    });
+  } else {
+    const textarea = scopeRoot.querySelector(
+      `textarea[name="${fieldPath}"]`
+    );
+    if (textarea) {
+      textarea.dispatchEvent(new Event("input"));
+    }
+  }
 }
 
 // src/components/number.ts
@@ -1546,6 +1585,421 @@ function updateSelectField(element, fieldPath, value, context) {
   }
 }
 
+// src/components/switcher.ts
+function applySelectedStyle(btn) {
+  btn.style.backgroundColor = "var(--fb-primary-color)";
+  btn.style.color = "#ffffff";
+  btn.style.borderColor = "var(--fb-primary-color)";
+}
+function applyUnselectedStyle(btn) {
+  btn.style.backgroundColor = "transparent";
+  btn.style.color = "var(--fb-text-color)";
+  btn.style.borderColor = "var(--fb-border-color)";
+}
+function buildSegmentedGroup(element, currentValue, hiddenInput, readonly, onChange) {
+  const options = element.options || [];
+  const group = document.createElement("div");
+  group.className = "fb-switcher-group";
+  group.style.cssText = `
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  `;
+  const buttons = [];
+  options.forEach((option, index) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "fb-switcher-btn";
+    btn.dataset.value = option.value;
+    btn.textContent = option.label;
+    btn.style.cssText = `
+      padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+      font-size: var(--fb-font-size);
+      border-width: var(--fb-border-width);
+      border-style: solid;
+      cursor: ${readonly ? "default" : "pointer"};
+      transition: background-color var(--fb-transition-duration), color var(--fb-transition-duration), border-color var(--fb-transition-duration);
+      white-space: nowrap;
+      line-height: 1.25;
+      outline: none;
+    `;
+    if (options.length === 1) {
+      btn.style.borderRadius = "var(--fb-border-radius)";
+    } else if (index === 0) {
+      btn.style.borderRadius = "var(--fb-border-radius) 0 0 var(--fb-border-radius)";
+      btn.style.borderRightWidth = "0";
+    } else if (index === options.length - 1) {
+      btn.style.borderRadius = "0 var(--fb-border-radius) var(--fb-border-radius) 0";
+    } else {
+      btn.style.borderRadius = "0";
+      btn.style.borderRightWidth = "0";
+    }
+    if (option.value === currentValue) {
+      applySelectedStyle(btn);
+    } else {
+      applyUnselectedStyle(btn);
+    }
+    if (!readonly) {
+      btn.addEventListener("click", () => {
+        hiddenInput.value = option.value;
+        buttons.forEach((b) => {
+          if (b.dataset.value === option.value) {
+            applySelectedStyle(b);
+          } else {
+            applyUnselectedStyle(b);
+          }
+        });
+        if (onChange) {
+          onChange(option.value);
+        }
+      });
+      btn.addEventListener("mouseenter", () => {
+        if (hiddenInput.value !== option.value) {
+          btn.style.backgroundColor = "var(--fb-background-hover-color)";
+        }
+      });
+      btn.addEventListener("mouseleave", () => {
+        if (hiddenInput.value !== option.value) {
+          btn.style.backgroundColor = "transparent";
+        }
+      });
+    }
+    buttons.push(btn);
+    group.appendChild(btn);
+  });
+  return group;
+}
+function renderSwitcherElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const initialValue = String(ctx.prefill[element.key] ?? element.default ?? "");
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = pathKey;
+  hiddenInput.value = initialValue;
+  const readonly = state.config.readonly;
+  const onChange = !readonly && ctx.instance ? (value) => {
+    ctx.instance.triggerOnChange(pathKey, value);
+  } : null;
+  const group = buildSegmentedGroup(
+    element,
+    initialValue,
+    hiddenInput,
+    readonly,
+    onChange
+  );
+  wrapper.appendChild(hiddenInput);
+  wrapper.appendChild(group);
+  if (!readonly) {
+    const hint = document.createElement("p");
+    hint.className = "text-xs text-gray-500 mt-1";
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
+}
+function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const prefillValues = ctx.prefill[element.key] || [];
+  const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+  const minCount = element.minCount ?? 1;
+  const maxCount = element.maxCount ?? Infinity;
+  while (values.length < minCount) {
+    values.push(element.default || element.options?.[0]?.value || "");
+  }
+  const readonly = state.config.readonly;
+  const container = document.createElement("div");
+  container.className = "space-y-2";
+  wrapper.appendChild(container);
+  function updateIndices() {
+    const items = container.querySelectorAll(".multiple-switcher-item");
+    items.forEach((item, index) => {
+      const input = item.querySelector("input[type=hidden]");
+      if (input) {
+        input.name = `${pathKey}[${index}]`;
+      }
+    });
+  }
+  function addSwitcherItem(value = "", index = -1) {
+    const currentIndex = index === -1 ? container.children.length : index;
+    const itemPathKey = `${pathKey}[${currentIndex}]`;
+    const itemWrapper = document.createElement("div");
+    itemWrapper.className = "multiple-switcher-item flex items-center gap-2";
+    const hiddenInput = document.createElement("input");
+    hiddenInput.type = "hidden";
+    hiddenInput.name = itemPathKey;
+    hiddenInput.value = value;
+    itemWrapper.appendChild(hiddenInput);
+    const onChange = !readonly && ctx.instance ? (val) => {
+      ctx.instance.triggerOnChange(hiddenInput.name, val);
+    } : null;
+    const group = buildSegmentedGroup(
+      element,
+      value,
+      hiddenInput,
+      readonly,
+      onChange
+    );
+    itemWrapper.appendChild(group);
+    if (index === -1) {
+      container.appendChild(itemWrapper);
+    } else {
+      container.insertBefore(itemWrapper, container.children[index]);
+    }
+    updateIndices();
+    return itemWrapper;
+  }
+  function updateRemoveButtons() {
+    if (readonly) return;
+    const items = container.querySelectorAll(".multiple-switcher-item");
+    const currentCount = items.length;
+    items.forEach((item) => {
+      let removeBtn = item.querySelector(
+        ".remove-item-btn"
+      );
+      if (!removeBtn) {
+        removeBtn = document.createElement("button");
+        removeBtn.type = "button";
+        removeBtn.className = "remove-item-btn px-2 py-1 rounded";
+        removeBtn.style.cssText = `
+          color: var(--fb-error-color);
+          background-color: transparent;
+          transition: background-color var(--fb-transition-duration);
+        `;
+        removeBtn.innerHTML = "\u2715";
+        removeBtn.addEventListener("mouseenter", () => {
+          removeBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+        });
+        removeBtn.addEventListener("mouseleave", () => {
+          removeBtn.style.backgroundColor = "transparent";
+        });
+        removeBtn.onclick = () => {
+          const currentIndex = Array.from(container.children).indexOf(
+            item
+          );
+          if (container.children.length > minCount) {
+            values.splice(currentIndex, 1);
+            item.remove();
+            updateIndices();
+            updateAddButton();
+            updateRemoveButtons();
+          }
+        };
+        item.appendChild(removeBtn);
+      }
+      const disabled = currentCount <= minCount;
+      removeBtn.disabled = disabled;
+      removeBtn.style.opacity = disabled ? "0.5" : "1";
+      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+    });
+  }
+  let addRow = null;
+  let countDisplay = null;
+  if (!readonly) {
+    addRow = document.createElement("div");
+    addRow.className = "flex items-center gap-3 mt-2";
+    const addBtn = document.createElement("button");
+    addBtn.type = "button";
+    addBtn.className = "add-switcher-btn px-3 py-1 rounded";
+    addBtn.style.cssText = `
+      color: var(--fb-primary-color);
+      border: var(--fb-border-width) solid var(--fb-primary-color);
+      background-color: transparent;
+      font-size: var(--fb-font-size);
+      transition: all var(--fb-transition-duration);
+    `;
+    addBtn.textContent = "+";
+    addBtn.addEventListener("mouseenter", () => {
+      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
+    });
+    addBtn.addEventListener("mouseleave", () => {
+      addBtn.style.backgroundColor = "transparent";
+    });
+    addBtn.onclick = () => {
+      const defaultValue = element.default || element.options?.[0]?.value || "";
+      values.push(defaultValue);
+      addSwitcherItem(defaultValue);
+      updateAddButton();
+      updateRemoveButtons();
+    };
+    countDisplay = document.createElement("span");
+    countDisplay.className = "text-sm text-gray-500";
+    addRow.appendChild(addBtn);
+    addRow.appendChild(countDisplay);
+    wrapper.appendChild(addRow);
+  }
+  function updateAddButton() {
+    if (!addRow || !countDisplay) return;
+    const addBtn = addRow.querySelector(
+      ".add-switcher-btn"
+    );
+    if (addBtn) {
+      const disabled = values.length >= maxCount;
+      addBtn.disabled = disabled;
+      addBtn.style.opacity = disabled ? "0.5" : "1";
+      addBtn.style.pointerEvents = disabled ? "none" : "auto";
+    }
+    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
+  }
+  values.forEach((value) => addSwitcherItem(value));
+  updateAddButton();
+  updateRemoveButtons();
+  if (!readonly) {
+    const hint = document.createElement("p");
+    hint.className = "text-xs text-gray-500 mt-1";
+    hint.textContent = makeFieldHint(element, state);
+    wrapper.appendChild(hint);
+  }
+}
+function validateSwitcherElement(element, key, context) {
+  const errors = [];
+  const { scopeRoot, skipValidation } = context;
+  const markValidity = (input, errorMessage) => {
+    if (!input) return;
+    const errorId = `error-${input.getAttribute("name") || Math.random().toString(36).substring(7)}`;
+    let errorElement = document.getElementById(errorId);
+    if (errorMessage) {
+      input.classList.add("invalid");
+      input.title = errorMessage;
+      if (!errorElement) {
+        errorElement = document.createElement("div");
+        errorElement.id = errorId;
+        errorElement.className = "error-message";
+        errorElement.style.cssText = `
+          color: var(--fb-error-color);
+          font-size: var(--fb-font-size-small);
+          margin-top: 0.25rem;
+        `;
+        if (input.nextSibling) {
+          input.parentNode?.insertBefore(errorElement, input.nextSibling);
+        } else {
+          input.parentNode?.appendChild(errorElement);
+        }
+      }
+      errorElement.textContent = errorMessage;
+      errorElement.style.display = "block";
+    } else {
+      input.classList.remove("invalid");
+      input.title = "";
+      if (errorElement) {
+        errorElement.remove();
+      }
+    }
+  };
+  const validateMultipleCount = (fieldKey, values, el, filterFn) => {
+    if (skipValidation) return;
+    const { state } = context;
+    const filteredValues = values.filter(filterFn);
+    const minCount = "minCount" in el ? el.minCount ?? 1 : 1;
+    const maxCount = "maxCount" in el ? el.maxCount ?? Infinity : Infinity;
+    if (el.required && filteredValues.length === 0) {
+      errors.push(`${fieldKey}: ${t("required", state)}`);
+    }
+    if (filteredValues.length < minCount) {
+      errors.push(`${fieldKey}: ${t("minItems", state, { min: minCount })}`);
+    }
+    if (filteredValues.length > maxCount) {
+      errors.push(`${fieldKey}: ${t("maxItems", state, { max: maxCount })}`);
+    }
+  };
+  const validOptionValues = new Set(
+    "options" in element ? element.options.map((o) => o.value) : []
+  );
+  if ("multiple" in element && element.multiple) {
+    const inputs = scopeRoot.querySelectorAll(
+      `input[type="hidden"][name^="${key}["]`
+    );
+    const values = [];
+    inputs.forEach((input) => {
+      const val = input?.value ?? "";
+      values.push(val);
+      if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
+        const msg = t("invalidOption", context.state);
+        markValidity(input, msg);
+        errors.push(`${key}: ${msg}`);
+      } else {
+        markValidity(input, null);
+      }
+    });
+    validateMultipleCount(key, values, element, (v) => v !== "");
+    return { value: values, errors };
+  } else {
+    const input = scopeRoot.querySelector(
+      `input[type="hidden"][name$="${key}"]`
+    );
+    const val = input?.value ?? "";
+    if (!skipValidation && element.required && val === "") {
+      const msg = t("required", context.state);
+      errors.push(`${key}: ${msg}`);
+      markValidity(input, msg);
+      return { value: null, errors };
+    }
+    if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
+      const msg = t("invalidOption", context.state);
+      errors.push(`${key}: ${msg}`);
+      markValidity(input, msg);
+      return { value: null, errors };
+    }
+    markValidity(input, null);
+    return { value: val === "" ? null : val, errors };
+  }
+}
+function updateSwitcherField(element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  if ("multiple" in element && element.multiple) {
+    if (!Array.isArray(value)) {
+      console.warn(
+        `updateSwitcherField: Expected array for multiple field "${fieldPath}", got ${typeof value}`
+      );
+      return;
+    }
+    const inputs = scopeRoot.querySelectorAll(
+      `input[type="hidden"][name^="${fieldPath}["]`
+    );
+    inputs.forEach((input, index) => {
+      if (index < value.length) {
+        const newVal = value[index] != null ? String(value[index]) : "";
+        input.value = newVal;
+        const group = input.parentElement?.querySelector(".fb-switcher-group");
+        if (group) {
+          group.querySelectorAll(".fb-switcher-btn").forEach((btn) => {
+            if (btn.dataset.value === newVal) {
+              applySelectedStyle(btn);
+            } else {
+              applyUnselectedStyle(btn);
+            }
+          });
+        }
+        input.classList.remove("invalid");
+        input.title = "";
+      }
+    });
+    if (value.length !== inputs.length) {
+      console.warn(
+        `updateSwitcherField: Multiple field "${fieldPath}" has ${inputs.length} inputs but received ${value.length} values. Consider re-rendering for add/remove.`
+      );
+    }
+  } else {
+    const input = scopeRoot.querySelector(
+      `input[type="hidden"][name="${fieldPath}"]`
+    );
+    if (input) {
+      const newVal = value != null ? String(value) : "";
+      input.value = newVal;
+      const group = input.parentElement?.querySelector(".fb-switcher-group");
+      if (group) {
+        group.querySelectorAll(".fb-switcher-btn").forEach((btn) => {
+          if (btn.dataset.value === newVal) {
+            applySelectedStyle(btn);
+          } else {
+            applyUnselectedStyle(btn);
+          }
+        });
+      }
+      input.classList.remove("invalid");
+      input.title = "";
+    }
+  }
+}
+
 // src/components/file.ts
 function renderLocalImagePreview(container, file, fileName, state) {
   const img = document.createElement("img");
@@ -4253,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);
@@ -4558,6 +6015,13 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
         renderSelectElement(element, ctx, wrapper, pathKey);
       }
       break;
+    case "switcher":
+      if (isMultiple) {
+        renderMultipleSwitcherElement(element, ctx, wrapper, pathKey);
+      } else {
+        renderSwitcherElement(element, ctx, wrapper, pathKey);
+      }
+      break;
     case "file":
       if (isMultiple) {
         renderMultipleFileElement(element, ctx, wrapper, pathKey);
@@ -4592,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";
@@ -4681,7 +6148,14 @@ var defaultConfig = {
       invalidHexColour: "Invalid hex color",
       minFiles: "Minimum {min} files required",
       maxFiles: "Maximum {max} files allowed",
-      unsupportedFieldType: "Unsupported field type: {type}"
+      unsupportedFieldType: "Unsupported field type: {type}",
+      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
@@ -4726,7 +6200,14 @@ var defaultConfig = {
       invalidHexColour: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442 \u0446\u0432\u0435\u0442\u0430",
       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}"
+      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",
+      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: {}
@@ -4971,6 +6452,10 @@ var componentRegistry = {
     validate: validateSelectElement,
     update: updateSelectField
   },
+  switcher: {
+    validate: validateSwitcherElement,
+    update: updateSwitcherField
+  },
   file: {
     validate: validateFileElement,
     update: updateFileField
@@ -4996,6 +6481,10 @@ var componentRegistry = {
     // Deprecated type - delegates to container
     validate: validateGroupElement,
     update: updateGroupField
+  },
+  table: {
+    validate: validateTableElement,
+    update: updateTableField
   }
 };
 function getComponentOperations(elementType) {