@tightknitai/block-kitchen 0.10.19 → 0.10.20

package/dist/index.cjs

@@ -1096,6 +1096,58 @@ var defaultPalette = [
             ]
           ]
         })
+      },
+      {
+        // Slack's documented example.
+        id: "data_table_basic",
+        label: "Data table",
+        factory: () => ({
+          type: "data_table",
+          caption: "A Fabulous Table",
+          rows: [
+            [
+              { type: "raw_text", text: "Name" },
+              { type: "raw_text", text: "Department" },
+              { type: "raw_text", text: "Badge" }
+            ],
+            [
+              { type: "raw_text", text: "Data Refinement Department" },
+              { type: "raw_text", text: "MDR" },
+              {
+                type: "rich_text",
+                elements: [
+                  { type: "rich_text_section", elements: [{ type: "text", text: "Blue", style: { bold: true } }] }
+                ]
+              }
+            ],
+            [
+              { type: "raw_text", text: "Art Sourcing Department" },
+              { type: "raw_text", text: "O&D" },
+              {
+                type: "rich_text",
+                elements: [
+                  {
+                    type: "rich_text_section",
+                    elements: [
+                      { type: "text", text: "Green " },
+                      { type: "text", text: "review", style: { italic: true } }
+                    ]
+                  }
+                ]
+              }
+            ],
+            [
+              { type: "raw_text", text: "Wellness Department" },
+              { type: "raw_text", text: "Wellness Center" },
+              {
+                type: "rich_text",
+                elements: [
+                  { type: "rich_text_section", elements: [{ type: "text", text: "Limited", style: { bold: true } }] }
+                ]
+              }
+            ]
+          ]
+        })
       }
     ]
   },
@@ -1760,6 +1812,8 @@ function labelForBlockType(type) {
       return "Data Visualization";
     case "container":
       return "Container";
+    case "data_table":
+      return "Data Table";
   }
 }
 var Sheet = DialogPrimitive__namespace.Root;
@@ -7810,6 +7864,387 @@ function ImageItemCard({
     ) })
   ] });
 }
+var REMOVE_BUTTON_CLASS = "flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-40";
+function CellGrid({
+  label,
+  help,
+  rows,
+  minRows,
+  maxRows,
+  maxColumns,
+  lockFirstRow = false,
+  blankCell,
+  renderCell,
+  renderColumnControl,
+  onChange
+}) {
+  const columnCount = rows[0]?.length ?? 0;
+  const setCell = (rowIdx, colIdx, next) => {
+    onChange(rows.map((row, r) => r === rowIdx ? row.map((cell, c) => c === colIdx ? next : cell) : row));
+  };
+  const addRow = () => {
+    onChange([...rows, Array.from({ length: columnCount || 1 }, blankCell)]);
+  };
+  const removeRow = (rowIdx) => {
+    if (rows.length <= minRows) {
+      return;
+    }
+    onChange(rows.filter((_, r) => r !== rowIdx));
+  };
+  const addColumn = () => {
+    onChange(
+      rows.map((row) => [...row, blankCell()]),
+      { kind: "add" }
+    );
+  };
+  const removeColumn = (colIdx) => {
+    if (columnCount <= 1) {
+      return;
+    }
+    onChange(
+      rows.map((row) => row.filter((_, c) => c !== colIdx)),
+      { kind: "remove", index: colIdx }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label, help, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 overflow-x-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-6 shrink-0", "aria-hidden": "true" }),
+        Array.from({ length: columnCount }, (_, c) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[120px] flex-1 items-center gap-1", children: [
+          renderColumnControl ? renderColumnControl(c) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1 truncate px-1.5 text-[11px] text-muted-foreground", children: [
+            "Column ",
+            c + 1
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove column ${c + 1}`,
+              onClick: () => removeColumn(c),
+              disabled: columnCount <= 1,
+              className: REMOVE_BUTTON_CLASS,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }, c))
+      ] }),
+      rows.map((row, r) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        lockFirstRow && r === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-6 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove row ${r + 1}`,
+            onClick: () => removeRow(r),
+            disabled: rows.length <= minRows,
+            className: REMOVE_BUTTON_CLASS,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+          }
+        ),
+        row.map((cell, c) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-[120px] flex-1 flex-col gap-0.5", children: renderCell(
+          cell,
+          { row: r, col: c, label: `Row ${r + 1}, column ${c + 1}` },
+          (next) => setCell(r, c, next)
+        ) }, c))
+      ] }, r))
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addRow, disabled: rows.length >= maxRows, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+        " Add row"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addColumn, disabled: columnCount >= maxColumns, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+        " Add column"
+      ] })
+    ] })
+  ] });
+}
+function CellTextInput({
+  cell,
+  label,
+  placeholder,
+  leading,
+  richTextNote = "Was rich-text; editing replaces with plain text.",
+  onChange
+}) {
+  const input = /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      "aria-label": label,
+      value: cell.type === "raw_text" ? cell.text : "[rich_text]",
+      placeholder,
+      onChange: (e) => onChange({ type: "raw_text", text: e.target.value }),
+      className: "h-8 text-xs"
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      leading,
+      input
+    ] }) : input,
+    cell.type === "rich_text" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] text-muted-foreground", leading && "pl-7"), children: richTextNote }) : null
+  ] });
+}
+function NumberInput({
+  id,
+  value,
+  onCommit,
+  ariaLabel,
+  className
+}) {
+  const [draft, setDraft] = React.useState(String(value));
+  React.useEffect(() => {
+    setDraft(String(value));
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      id,
+      type: "number",
+      inputMode: "numeric",
+      "aria-label": ariaLabel,
+      value: draft,
+      className,
+      onChange: (e) => {
+        const raw = e.target.value;
+        setDraft(raw);
+        if (raw === "" || raw === "-" || raw === "." || raw === "-.") {
+          return;
+        }
+        const next = Number(raw);
+        if (!Number.isNaN(next)) {
+          onCommit(next);
+        }
+      },
+      onBlur: () => {
+        const next = Number(draft);
+        const safe = draft.trim() === "" || Number.isNaN(next) ? 0 : next;
+        onCommit(safe);
+        setDraft(String(safe));
+      }
+    }
+  );
+}
+var MAX_ROWS = 201;
+var MIN_ROWS = 2;
+var MAX_COLUMNS = 20;
+var MAX_PAGE_SIZE = 100;
+var SELECT_CLASS = "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+function withOptional(block, key, value) {
+  const next = { ...block };
+  if (value === void 0) {
+    delete next[key];
+  } else {
+    next[key] = value;
+  }
+  return next;
+}
+function realignRowHeader(index, edit) {
+  if (index === void 0 || edit.kind === "add" || edit.index > index) {
+    return index;
+  }
+  return edit.index === index ? void 0 : index - 1;
+}
+function cellText(cell) {
+  switch (cell?.type) {
+    case "raw_text":
+      return cell.text;
+    case "raw_number":
+      return cell.text ?? String(cell.value);
+    case "action_cell":
+      return cell.element.text.text;
+    default:
+      return "";
+  }
+}
+function toNumberCell(cell) {
+  const text = cell.text.trim();
+  const parsed = text === "" ? Number.NaN : Number(text.replace(/,/g, ""));
+  if (Number.isFinite(parsed)) {
+    return String(parsed) === text ? { type: "raw_number", value: parsed } : { type: "raw_number", value: parsed, text };
+  }
+  return text ? { type: "raw_number", value: 0, text } : { type: "raw_number", value: 0 };
+}
+function toTextCell(cell) {
+  return { type: "raw_text", text: cell.text ?? String(cell.value) };
+}
+function DataTableEditor({ block, onChange }) {
+  const rows = block.rows ?? [];
+  const header = rows[0] ?? [];
+  const rowHeader = block.row_header_column_index ?? 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Caption", help: "Required. Names the table for screen readers.", htmlFor: "data-table-caption", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "data-table-caption",
+        value: block.caption,
+        placeholder: "e.g. Open deals by stage",
+        onChange: (e) => onChange({ ...block, caption: e.target.value })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EditorField,
+        {
+          label: "Rows per page",
+          help: "Optional, 1-100. Slack shows 5 when empty.",
+          htmlFor: "data-table-page-size",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: "data-table-page-size",
+              type: "number",
+              min: 1,
+              max: MAX_PAGE_SIZE,
+              value: block.page_size ?? "",
+              placeholder: "5",
+              onChange: (e) => {
+                const n = Math.trunc(Number(e.target.value));
+                const next = e.target.value === "" || Number.isNaN(n) ? void 0 : Math.min(MAX_PAGE_SIZE, Math.max(1, n));
+                onChange(withOptional(block, "page_size", next));
+              }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EditorField,
+        {
+          label: "Row header column",
+          help: "The column that identifies each row for screen readers.",
+          htmlFor: "data-table-row-header",
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              id: "data-table-row-header",
+              value: rowHeader,
+              disabled: header.length === 0,
+              onChange: (e) => {
+                const index = Number(e.target.value);
+                onChange(withOptional(block, "row_header_column_index", index === 0 ? void 0 : index));
+              },
+              className: SELECT_CLASS,
+              children: [
+                header.map((cell, c) => {
+                  const text = cellText(cell);
+                  return /* @__PURE__ */ jsxRuntime.jsx("option", { value: c, children: text ? `Column ${c + 1}: ${text}` : `Column ${c + 1}` }, c);
+                }),
+                rowHeader >= header.length ? /* @__PURE__ */ jsxRuntime.jsxs("option", { value: rowHeader, children: [
+                  "Column ",
+                  rowHeader + 1,
+                  " (missing)"
+                ] }) : null
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CellGrid,
+      {
+        label: "Cells",
+        help: "The first row is the header. Up to 200 more rows and 20 columns. Use # to make a cell a number; a column of only numbers sorts numerically.",
+        rows,
+        minRows: MIN_ROWS,
+        maxRows: MAX_ROWS,
+        maxColumns: MAX_COLUMNS,
+        lockFirstRow: true,
+        blankCell: () => ({ type: "raw_text", text: "" }),
+        onChange: (nextRows, edit) => {
+          const next = { ...block, rows: nextRows };
+          onChange(
+            edit ? withOptional(next, "row_header_column_index", realignRowHeader(block.row_header_column_index, edit)) : next
+          );
+        },
+        renderCell: (cell, position, update) => /* @__PURE__ */ jsxRuntime.jsx(DataTableCellField, { cell, position, onChange: update })
+      }
+    )
+  ] });
+}
+function DataTableCellField({
+  cell,
+  position,
+  onChange
+}) {
+  const { row, col, label } = position;
+  if (cell.type === "action_cell") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleSpacer, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-md border border-dashed px-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointerClick, { className: "h-3 w-3 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: cellText(cell) || "Button" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-7 text-[10px] text-muted-foreground", children: "Button cell. Edit it via View JSON." })
+    ] });
+  }
+  if (cell.type === "raw_number") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NumberToggle, { label, pressed: true, onClick: () => onChange(toTextCell(cell)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NumberInput,
+          {
+            value: cell.value,
+            ariaLabel: `${label} value`,
+            onCommit: (value) => onChange({ ...cell, value }),
+            className: "h-8 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ToggleSpacer, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            "aria-label": `${label} display text`,
+            value: cell.text ?? "",
+            placeholder: "Display as (optional)",
+            onChange: (e) => {
+              const { text: _omit, ...rest } = cell;
+              onChange(e.target.value ? { ...rest, text: e.target.value } : rest);
+            },
+            className: "h-7 text-[11px]"
+          }
+        )
+      ] })
+    ] });
+  }
+  const isHeader = row === 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CellTextInput,
+    {
+      cell,
+      label,
+      placeholder: isHeader ? `Header ${col + 1}` : "Cell text",
+      richTextNote: isHeader ? "Header cells can't be rich text. Type to replace it." : void 0,
+      leading: !isHeader && cell.type === "raw_text" ? /* @__PURE__ */ jsxRuntime.jsx(NumberToggle, { label, pressed: false, onClick: () => onChange(toNumberCell(cell)) }) : /* @__PURE__ */ jsxRuntime.jsx(ToggleSpacer, {}),
+      onChange
+    }
+  );
+}
+function ToggleSpacer() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-6 w-6 shrink-0", "aria-hidden": "true" });
+}
+function NumberToggle({ label, pressed, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": `${label} as number`,
+      "aria-pressed": pressed,
+      title: pressed ? "Number cell. Click to make it text." : "Text cell. Click to make it a number.",
+      onClick,
+      className: cn(
+        "flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors",
+        pressed ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hash, { className: "h-3 w-3" })
+    }
+  );
+}
 var CHART_TYPES = ["line", "bar", "area", "pie"];
 function isCartesian(chart) {
   return chart.type !== "pie";
@@ -7864,46 +8299,6 @@ function DataVisualizationEditor({ block, onChange }) {
     isCartesian(chart) ? /* @__PURE__ */ jsxRuntime.jsx(CartesianFields, { chart, onChange: setChart }) : /* @__PURE__ */ jsxRuntime.jsx(PieFields, { chart, onChange: setChart })
   ] });
 }
-function NumberInput({
-  id,
-  value,
-  onCommit,
-  ariaLabel,
-  className
-}) {
-  const [draft, setDraft] = React.useState(String(value));
-  React.useEffect(() => {
-    setDraft(String(value));
-  }, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Input,
-    {
-      id,
-      type: "number",
-      inputMode: "numeric",
-      "aria-label": ariaLabel,
-      value: draft,
-      className,
-      onChange: (e) => {
-        const raw = e.target.value;
-        setDraft(raw);
-        if (raw === "" || raw === "-" || raw === "." || raw === "-.") {
-          return;
-        }
-        const next = Number(raw);
-        if (!Number.isNaN(next)) {
-          onCommit(next);
-        }
-      },
-      onBlur: () => {
-        const next = Number(draft);
-        const safe = draft.trim() === "" || Number.isNaN(next) ? 0 : next;
-        onCommit(safe);
-        setDraft(String(safe));
-      }
-    }
-  );
-}
 function CartesianFields({ chart, onChange }) {
   const series = chart.series;
   const categories = chart.axis_config?.categories && chart.axis_config.categories.length > 0 ? chart.axis_config.categories : series[0]?.data.map((d) => d.label) ?? [];
@@ -9446,45 +9841,13 @@ function ImageAccessoryFields({ image, onChange }) {
   ] });
 }
 var ALIGN_OPTIONS = ["left", "center", "right"];
-function cellAsText(cell) {
-  if (cell.type === "raw_text") {
-    return cell.text;
-  }
-  return "[rich_text]";
+function alignColumnSettings(settings, edit) {
+  return edit.kind === "add" ? [...settings, null] : settings.filter((_, c) => c !== edit.index);
 }
 function TableEditor({ block, onChange }) {
   const rows = block.rows ?? [];
   const columnCount = rows[0]?.length ?? 0;
   const columnSettings = block.column_settings ?? [];
-  const setCell = (rowIdx, colIdx, text) => {
-    const nextRows = rows.map(
-      (row, r) => r === rowIdx ? row.map((cell, c) => c === colIdx ? { type: "raw_text", text } : cell) : row
-    );
-    onChange({ ...block, rows: nextRows });
-  };
-  const addRow = () => {
-    const blankRow = Array.from({ length: columnCount || 1 }, () => ({ type: "raw_text", text: "" }));
-    onChange({ ...block, rows: [...rows, blankRow] });
-  };
-  const removeRow = (rowIdx) => {
-    if (rows.length <= 1) {
-      return;
-    }
-    onChange({ ...block, rows: rows.filter((_, r) => r !== rowIdx) });
-  };
-  const addColumn = () => {
-    const nextRows = rows.map((row) => [...row, { type: "raw_text", text: "" }]);
-    const nextSettings = [...columnSettings, null];
-    onChange({ ...block, rows: nextRows, column_settings: nextSettings });
-  };
-  const removeColumn = (colIdx) => {
-    if (columnCount <= 1) {
-      return;
-    }
-    const nextRows = rows.map((row) => row.filter((_, c) => c !== colIdx));
-    const nextSettings = columnSettings.filter((_, c) => c !== colIdx);
-    onChange({ ...block, rows: nextRows, column_settings: nextSettings });
-  };
   const setColumnAlign = (colIdx, align) => {
     const next = Array.from({ length: columnCount }, (_, i) => columnSettings[i] ?? null);
     if (align === "") {
@@ -9495,81 +9858,45 @@ function TableEditor({ block, onChange }) {
     }
     onChange({ ...block, column_settings: next });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Cells", help: "Up to 100 rows and 20 columns. Slack allows one table per message.", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 overflow-x-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-6 shrink-0", "aria-hidden": "true" }),
-        Array.from({ length: columnCount }, (_, c) => {
-          const setting = columnSettings[c];
-          const align = setting?.align ?? "";
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[120px] flex-1 items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "select",
-              {
-                "aria-label": `Column ${c + 1} alignment`,
-                value: align,
-                onChange: (e) => setColumnAlign(c, e.target.value),
-                className: "h-7 flex-1 rounded-sm border border-input bg-background px-1.5 text-[11px] text-muted-foreground",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Default" }),
-                  ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: a, children: a }, a))
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": `Remove column ${c + 1}`,
-                onClick: () => removeColumn(c),
-                disabled: columnCount <= 1,
-                className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-40",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
-              }
-            )
-          ] }, c);
-        })
-      ] }),
-      rows.map((row, r) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": `Remove row ${r + 1}`,
-            onClick: () => removeRow(r),
-            disabled: rows.length <= 1,
-            className: "flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-40",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
-          }
-        ),
-        row.map((cell, c) => {
-          const isRichText = cell.type === "rich_text";
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[120px] flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Input,
-              {
-                value: cellAsText(cell),
-                placeholder: r === 0 ? `Header ${c + 1}` : "Cell text",
-                onChange: (e) => setCell(r, c, e.target.value),
-                className: "h-8 text-xs"
-              }
-            ),
-            isRichText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: "Was rich-text; editing replaces with plain text." }) : null
-          ] }, c);
-        })
-      ] }, r))
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addRow, disabled: rows.length >= 100, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
-        " Add row"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addColumn, disabled: columnCount >= 20, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
-        " Add column"
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CellGrid,
+    {
+      label: "Cells",
+      help: "Up to 100 rows and 20 columns. Slack allows one table per message.",
+      rows,
+      minRows: 1,
+      maxRows: 100,
+      maxColumns: 20,
+      blankCell: () => ({ type: "raw_text", text: "" }),
+      onChange: (nextRows, edit) => onChange({
+        ...block,
+        rows: nextRows,
+        ...edit ? { column_settings: alignColumnSettings(columnSettings, edit) } : {}
+      }),
+      renderColumnControl: (c) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          "aria-label": `Column ${c + 1} alignment`,
+          value: columnSettings[c]?.align ?? "",
+          onChange: (e) => setColumnAlign(c, e.target.value),
+          className: "h-7 flex-1 rounded-sm border border-input bg-background px-1.5 text-[11px] text-muted-foreground",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Default" }),
+            ALIGN_OPTIONS.map((a) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: a, children: a }, a))
+          ]
+        }
+      ),
+      renderCell: (cell, { row, col, label }, update) => /* @__PURE__ */ jsxRuntime.jsx(
+        CellTextInput,
+        {
+          cell,
+          label,
+          placeholder: row === 0 ? `Header ${col + 1}` : "Cell text",
+          onChange: update
+        }
+      )
+    }
+  );
 }
 var STATUSES2 = ["pending", "in_progress", "complete", "error"];
 function TaskCardEditor({ block, onChange }) {
@@ -9910,6 +10237,8 @@ function dispatch(block, onChange) {
       return /* @__PURE__ */ jsxRuntime.jsx(DataVisualizationEditor, { block, onChange: (next) => onChange(next) });
     case "container":
       return /* @__PURE__ */ jsxRuntime.jsx(ContainerEditor, { block, onChange: (next) => onChange(next) });
+    case "data_table":
+      return /* @__PURE__ */ jsxRuntime.jsx(DataTableEditor, { block, onChange: (next) => onChange(next) });
     default:
       return null;
   }
@@ -9933,7 +10262,8 @@ var BLOCK_TYPE_LABELS = {
   plan: "Plan",
   task_card: "Task Card",
   data_visualization: "Data Visualization",
-  container: "Container"
+  container: "Container",
+  data_table: "Data Table"
 };
 function BlockRow({
   builderBlock,