hazo_ui 6.16.0 → 6.18.0

package/CHANGE_LOG.md

@@ -5,6 +5,80 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v6.18.0 (2026-10-19)
+
+### Changed — widened `hazo_i18n` peer range
+
+- **`hazo_i18n` peer range widened to `^0.9.0 || ^0.15.0` (was `^0.9.0`).** This package
+  never imports `hazo_i18n` directly — only via `hazo_core/i18n`'s stable `registerCatalog()`
+  probe — so there is no real compatibility change. npm's caret on a `0.x` version only
+  matches that exact minor line (`^0.9.0` excludes `0.15.x`), so both lines must be listed
+  explicitly for a consumer installing `hazo_i18n` 0.15.x (e.g. Kinstripe's
+  dependency-hygiene cleanup) to see a valid peer.
+
+### Added — EditableDataTable (paste, Enter-down navigation, header styling)
+
+- **Paste support** — pasting TSV (`\t`-separated) or CSV (`,`-separated)
+  clipboard text into a text/number cell now expands across the editable
+  columns to the right of the pasted-into cell and down into as many rows
+  as the clipboard text has lines, creating new rows via `createRow()`
+  when the paste runs past the end of the current `rows` array. Only
+  targets `editable !== false` text/number columns — select/color
+  columns are left untouched by a paste that starts on or crosses one of
+  them, same restriction already in place for the Tab traversal. A
+  single-cell paste (no tab/comma/newline) is left to the browser's
+  native paste-into-input behavior, unchanged from before.
+- **Enter moves focus down one row** — Enter still commits the current
+  cell (unchanged), and now also moves the active-edit target one row
+  down in the *same* column (spreadsheet-style), reusing the existing
+  `activeEditCell`/`forceEdit` cross-row focus mechanism that Tab already
+  relies on. On the last row there's no next row to move into; Enter just
+  commits in place, same as before this feature existed.
+- **Clearer column headers** — the header `<TableRow>` now gets a
+  `bg-muted/60` background and a 2px bottom border, and each `<TableHead>`
+  label is bold, uppercase, and tracked (`font-semibold uppercase
+  tracking-wide text-[11px]`), so the header reads as a distinct visual
+  tier instead of blending into the first data row. No layout/API change.
+- Tab/Shift+Tab navigation, inline-edit, add-row, delete-row, and
+  drag-reorder are all unaffected — existing tests extended, none
+  weakened. One pre-existing render-isolation test (100+ rows, "only the
+  edited row re-renders") was updated to also expect the Enter-down
+  target row (the row directly below the edited one) to re-render,
+  since forcing that row into edit mode is the whole point of the new
+  feature.
+
+## v6.17.0 (2026-10-18)
+
+### Added — EditableDataTable
+
+- **`EditableDataTable`** — inline-editable data grid for small datasets.
+  Click-to-edit cells (text, number, select, color), add/delete rows, row
+  drag-reorder via @dnd-kit. Built on shadcn Table primitives. Separate from
+  `HazoUiTable` (read-only display with sort/filter/pagination). See README
+  for comparison.
+- Test-app demo page at `/editable-table`.
+
+### Fixed — EditableDataTable (final-review fixes)
+
+- **Tab navigation sent focus to `document.body` in any table mixing
+  text/number columns with select/color columns.** The cross-row Tab
+  traversal (`activeEditCell`/`forceEdit`/`onTabOut`) included `select`/
+  `color` columns as possible targets, but `EditableCell`'s `forceEdit`
+  mechanism only does anything observable for `text`/`number` cells — for
+  `select`/`color` it was a no-op, so the computed target could never
+  actually receive focus and focus fell through to `document.body`
+  instead of reaching the next row. `select`/`color` columns are now
+  excluded from this traversal entirely (same as the delete/add buttons
+  already were); they remain reachable via native Tab/click, unchanged.
+  Affects every consumer whose columns mix types — e.g. hazo_canvas's
+  Sankey/Dagre/Network node tables (which end in a color column) and
+  Sankey's link table (two select columns before its number column).
+- **Editing one cell in a 100+ row table re-rendered every row.**
+  `SortableRow` is now wrapped in `React.memo`, and row rendering is
+  restructured into a new, module-scope `React.memo`'d row component with
+  stable, ref-backed callbacks — so editing one row no longer forces every
+  other row's cells to re-render. No API change.
+
 ## v6.16.0 (2026-10-15)
 
 ### Added — Tailwind v3 preset + responsive AppHeader

package/README.md

@@ -3932,6 +3932,19 @@ display states automatically: loading skeleton, empty state, and populated list.
 
 ---
 
+## Table Components
+
+hazo_ui ships two table components for different use cases:
+
+| Component | Purpose | Editing | Pagination | Server-side data |
+|-----------|---------|---------|------------|-----------------|
+| `HazoUiTable` | Read-only data display | No | Yes | Yes (`onLoad`) |
+| `EditableDataTable` | Inline data editing | Click-to-edit cells, add/delete/reorder rows, Tab/Shift+Tab + Enter navigation, TSV/CSV paste | No | No |
+
+**Use `HazoUiTable`** for dashboards, admin lists, and any table where users browse but don't modify data in-place.
+
+**Use `EditableDataTable`** for forms, configuration panels, and data editors where users need to create, modify, and reorder small datasets (typically <100 rows) with immediate feedback.
+
 ## HazoUiTable — Column-config-driven Data Table (v2.14.0+, v2.15 additions)
 
 A higher-level data table that composes the shadcn `Table` primitive

package/dist/index.cjs

@@ -936,7 +936,11 @@ var en_default = {
   "charts.pct_of_first": "% of first: {{pct}}%",
   "charts.pct_of_prev": "% of prev: {{pct}}%",
   "charts.dropoff": "Drop-off: \u2212{{value}}",
-  "toast.missing_prefix": "Missing: {{items}}"
+  "toast.missing_prefix": "Missing: {{items}}",
+  "editable_data_table.add": "Add",
+  "editable_data_table.delete": "Delete row",
+  "editable_data_table.empty": "No rows yet. Click Add to start.",
+  "editable_data_table.drag_to_reorder": "Drag to reorder"
 };
 var default_t = i18n.createPackageT("hazo_ui", en_default);
 var defaultHazoUiT = default_t;
@@ -13224,6 +13228,506 @@ function useHazoEvent(pkg, event, handler) {
     return () => window.removeEventListener(event_name, listener);
   }, [pkg, event]);
 }
+function EditableCell({
+  value,
+  type,
+  options,
+  defaultColorValue,
+  clearable,
+  onCommit,
+  editable,
+  forceEdit,
+  onTabOut,
+  onEnterDown,
+  onPaste,
+  onActivated
+}) {
+  const [editing, setEditing] = React27.useState(false);
+  const [draft, setDraft] = React27.useState(String(value ?? ""));
+  const inputRef = React27.useRef(null);
+  React27.useEffect(() => {
+    if (forceEdit) {
+      setDraft(String(value ?? ""));
+      setEditing(true);
+    }
+  }, [forceEdit]);
+  React27.useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      if (forceEdit) {
+        onActivated?.();
+      }
+    }
+  }, [editing]);
+  const commit = React27.useCallback(() => {
+    setEditing(false);
+    if (type === "number") {
+      const n = Number(draft);
+      onCommit(Number.isNaN(n) || draft.trim() === "" ? 0 : n);
+    } else {
+      onCommit(draft);
+    }
+  }, [draft, onCommit, type]);
+  const cancel = React27.useCallback(() => {
+    setEditing(false);
+    setDraft(String(value ?? ""));
+  }, [value]);
+  const handleKeyDown = React27.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        onEnterDown?.();
+        commit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      } else if (e.key === "Tab") {
+        const direction = e.shiftKey ? -1 : 1;
+        const handled = onTabOut?.(direction) ?? false;
+        if (handled) {
+          e.preventDefault();
+          commit();
+        }
+      }
+    },
+    [commit, cancel, onTabOut, onEnterDown]
+  );
+  if (!editable) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs truncate block px-1 py-1.5", children: String(value ?? "") });
+  }
+  if (type === "color") {
+    const colorValue = String(
+      value ?? defaultColorValue ?? "#94a3b8"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "color",
+          className: "h-7 w-8 cursor-pointer border border-border rounded p-0.5",
+          value: colorValue,
+          onChange: (e) => onCommit(e.target.value)
+        }
+      ),
+      clearable && value != null && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-xs leading-none text-muted-foreground hover:text-foreground px-0.5",
+          onClick: () => onCommit(void 0),
+          children: "\xD7"
+        }
+      )
+    ] });
+  }
+  if (type === "select") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        value: String(value ?? ""),
+        onValueChange: (v) => onCommit(v),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-7 text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: (options ?? []).map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt, children: opt }, opt)) })
+        ]
+      }
+    );
+  }
+  if (!editing) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "text-xs truncate block px-1 py-1.5 cursor-text hover:bg-muted/50 rounded",
+        onClick: () => {
+          setDraft(String(value ?? ""));
+          setEditing(true);
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            setDraft(String(value ?? ""));
+            setEditing(true);
+          }
+        },
+        children: String(value ?? "")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: type === "number" ? "number" : "text",
+      className: "h-7 text-xs border border-input rounded-md px-2 bg-background focus:outline-none focus:ring-1 focus:ring-ring w-full",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onKeyDown: handleKeyDown,
+      onPaste: (e) => {
+        const text = e.clipboardData.getData("text/plain") || e.clipboardData.getData("text");
+        if (!text) return;
+        const handled = onPaste?.(text) ?? false;
+        if (handled) {
+          e.preventDefault();
+          setEditing(false);
+        }
+      },
+      onBlur: commit
+    }
+  );
+}
+var SortableRow = React27__namespace.default.memo(function SortableRow2({
+  id,
+  highlighted,
+  children
+}) {
+  const t = useHazoUiT();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TableRow2,
+    {
+      ref: setNodeRef,
+      style,
+      "data-sortable-id": id,
+      className: cn(highlighted && "bg-blue-50 ring-1 ring-blue-300"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { className: "px-0 py-0.5 w-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: setActivatorNodeRef,
+            className: "cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground flex items-center justify-center",
+            title: t("editable_data_table.drag_to_reorder"),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-3.5 w-3.5" })
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+});
+SortableRow.displayName = "SortableRow";
+var EditableTableRow = React27__namespace.default.memo(function EditableTableRow2({
+  row,
+  rowIndex,
+  rowKey,
+  isHighlighted,
+  columns,
+  activeEditColKey,
+  deleteLabel,
+  onCellCommit,
+  onDeleteRow,
+  onTabOutCell,
+  onEnterDownCell,
+  onPasteCell,
+  onActivated
+}) {
+  const renderCountRef = React27.useRef(0);
+  renderCountRef.current += 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(SortableRow, { id: rowKey, highlighted: isHighlighted, children: [
+    columns.map((col, colIndex) => {
+      const resolvedOptions = typeof col.options === "function" ? col.options(row) : col.options;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell2,
+        {
+          className: cn("px-1 py-0.5", col.width),
+          "data-row-render-count": colIndex === 0 ? renderCountRef.current : void 0,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            EditableCell,
+            {
+              value: row[col.key],
+              type: col.type ?? "text",
+              options: resolvedOptions,
+              defaultColorValue: col.defaultValue?.(rowIndex),
+              clearable: col.clearable,
+              editable: col.editable !== false,
+              forceEdit: activeEditColKey === col.key,
+              onTabOut: (direction) => onTabOutCell(rowIndex, col.key, direction),
+              onEnterDown: () => onEnterDownCell(rowIndex, col.key),
+              onPaste: (text) => onPasteCell(rowIndex, col.key, text),
+              onActivated,
+              onCommit: (v) => onCellCommit(rowIndex, col.key, v)
+            }
+          )
+        },
+        col.key
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(TableCell2, { className: "px-0 py-0.5 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-7 w-7 text-muted-foreground hover:text-destructive",
+        onClick: () => onDeleteRow(rowIndex),
+        "aria-label": deleteLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+      }
+    ) })
+  ] });
+});
+EditableTableRow.displayName = "EditableTableRow";
+function EditableDataTable({
+  columns,
+  rows,
+  onChange,
+  getRowKey,
+  createRow,
+  highlightedKey,
+  className,
+  label
+}) {
+  const t = useHazoUiT();
+  const editableColumns = React27.useMemo(
+    () => columns.filter(
+      (col) => col.editable !== false && (col.type ?? "text") !== "select" && (col.type ?? "text") !== "color"
+    ).map((col) => col.key),
+    [columns]
+  );
+  const [activeEditCell, setActiveEditCell] = React27.useState(null);
+  const rowsRef = React27.useRef(rows);
+  rowsRef.current = rows;
+  const onChangeRef = React27.useRef(onChange);
+  onChangeRef.current = onChange;
+  const handleTabOut = React27.useCallback(
+    (rowIndex, colKey, direction) => {
+      const idx = editableColumns.indexOf(colKey);
+      if (idx === -1) return false;
+      if (direction === 1) {
+        if (idx < editableColumns.length - 1) {
+          setActiveEditCell({ row: rowIndex, col: editableColumns[idx + 1] });
+          return true;
+        }
+        if (rowIndex + 1 < rows.length) {
+          setActiveEditCell({ row: rowIndex + 1, col: editableColumns[0] });
+          return true;
+        }
+        return false;
+      }
+      if (idx > 0) {
+        setActiveEditCell({ row: rowIndex, col: editableColumns[idx - 1] });
+        return true;
+      }
+      if (rowIndex - 1 >= 0) {
+        setActiveEditCell({
+          row: rowIndex - 1,
+          col: editableColumns[editableColumns.length - 1]
+        });
+        return true;
+      }
+      return false;
+    },
+    [editableColumns, rows.length]
+  );
+  const handleEnterDown = React27.useCallback(
+    (rowIndex, colKey) => {
+      if (rowIndex + 1 < rows.length) {
+        setActiveEditCell({ row: rowIndex + 1, col: colKey });
+        return true;
+      }
+      return false;
+    },
+    [rows.length]
+  );
+  const handlePaste = React27.useCallback(
+    (rowIndex, colKey, text) => {
+      const startColIdx = editableColumns.indexOf(
+        colKey
+      );
+      if (startColIdx === -1) return false;
+      const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+      const lines = normalized.split("\n");
+      if (lines.length > 1 && lines[lines.length - 1] === "") {
+        lines.pop();
+      }
+      const hasTab = normalized.includes("	");
+      const delimiter = hasTab ? "	" : ",";
+      const grid = lines.map((line) => line.split(delimiter));
+      const isSingleCell = grid.length === 1 && grid[0].length === 1;
+      if (isSingleCell) return false;
+      const currentRows = rowsRef.current;
+      const nextRows = currentRows.slice();
+      grid.forEach((lineCells, rowOffset) => {
+        const targetRowIndex = rowIndex + rowOffset;
+        while (targetRowIndex >= nextRows.length) {
+          nextRows.push(createRow());
+        }
+        const targetRow = {
+          ...nextRows[targetRowIndex]
+        };
+        lineCells.forEach((cellValue, colOffset) => {
+          const targetColIdx = startColIdx + colOffset;
+          if (targetColIdx >= editableColumns.length) return;
+          const targetColKey = editableColumns[targetColIdx];
+          const col = columns.find((c) => c.key === targetColKey);
+          if (col?.type === "number") {
+            const n = Number(cellValue);
+            targetRow[targetColKey] = Number.isNaN(n) || cellValue.trim() === "" ? 0 : n;
+          } else {
+            targetRow[targetColKey] = cellValue;
+          }
+        });
+        nextRows[targetRowIndex] = targetRow;
+      });
+      onChangeRef.current(nextRows);
+      return true;
+    },
+    [editableColumns, columns, createRow]
+  );
+  const handleCellChange = React27.useCallback(
+    (rowIndex, colKey, value) => {
+      const currentRows = rowsRef.current;
+      const next = currentRows.map(
+        (row, i) => i === rowIndex ? { ...row, [colKey]: value } : row
+      );
+      onChangeRef.current(next);
+    },
+    []
+  );
+  const handleDelete = React27.useCallback((rowIndex) => {
+    const currentRows = rowsRef.current;
+    onChangeRef.current(currentRows.filter((_, i) => i !== rowIndex));
+  }, []);
+  const onCellActivated = React27.useCallback(() => setActiveEditCell(null), []);
+  const handleAdd = () => {
+    onChange([...rows, createRow()]);
+  };
+  const sensors = core$1.useSensors(
+    core$1.useSensor(core$1.PointerSensor),
+    core$1.useSensor(core$1.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const rowKeys = React27.useMemo(
+    () => rows.map((row, i) => getRowKey(row, i)),
+    [rows, getRowKey]
+  );
+  const handleDragEnd = React27.useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const oldIndex = rows.findIndex(
+        (row, i) => getRowKey(row, i) === active.id
+      );
+      const newIndex = rows.findIndex(
+        (row, i) => getRowKey(row, i) === over.id
+      );
+      if (oldIndex === -1 || newIndex === -1) return;
+      onChange(sortable.arrayMove(rows, oldIndex, newIndex));
+    },
+    [rows, getRowKey, onChange]
+  );
+  return (
+    // DndContext wraps the whole component rather than just <TableBody> —
+    // it renders its own hidden accessibility helpers (RestoreFocus,
+    // live-region announcer) as DOM siblings of its children. Nesting it
+    // directly inside <tbody> would make those helpers invalid children of
+    // <tbody> (only <tr> is valid there); wrapping the outer <div> instead
+    // gives them a valid home. <SortableContext> is a plain context
+    // provider with no DOM output of its own, so it can stay right inside
+    // <TableBody>, wrapping only the actual <tr> rows.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core$1.DndContext,
+      {
+        sensors,
+        collisionDetection: core$1.closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-editable-data-table": true, className: cn("flex flex-col gap-1", className), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-1", children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-6 px-2 text-xs ml-auto",
+                onClick: handleAdd,
+                "aria-label": t("editable_data_table.add"),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3 w-3 mr-1" }),
+                  t("editable_data_table.add")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Table2, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHeader2, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow2, { className: "bg-muted/60 hover:bg-muted/60 border-b-2 border-border", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-6 px-0" }),
+              columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+                TableHead,
+                {
+                  className: cn(
+                    "text-[11px] font-semibold uppercase tracking-wide text-foreground px-1 py-1 h-8",
+                    col.width
+                  ),
+                  children: col.label
+                },
+                col.key
+              )),
+              /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-8 px-0" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TableBody, { children: [
+              rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                TableCell2,
+                {
+                  colSpan: columns.length + 2,
+                  className: "text-center text-xs text-muted-foreground italic py-4",
+                  children: t("editable_data_table.empty")
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                sortable.SortableContext,
+                {
+                  items: rowKeys,
+                  strategy: sortable.verticalListSortingStrategy,
+                  children: rows.map((row, rowIndex) => {
+                    const key = rowKeys[rowIndex];
+                    const isHighlighted = highlightedKey != null && key === highlightedKey;
+                    const activeEditColKey = activeEditCell?.row === rowIndex ? activeEditCell.col : null;
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      EditableTableRow,
+                      {
+                        row,
+                        rowIndex,
+                        rowKey: key,
+                        isHighlighted,
+                        columns,
+                        activeEditColKey,
+                        deleteLabel: t("editable_data_table.delete"),
+                        onCellCommit: handleCellChange,
+                        onDeleteRow: handleDelete,
+                        onTabOutCell: handleTabOut,
+                        onEnterDownCell: handleEnterDown,
+                        onPasteCell: handlePaste,
+                        onActivated: onCellActivated
+                      },
+                      key
+                    );
+                  })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    )
+  );
+}
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -13316,6 +13820,7 @@ exports.DropdownMenuSub = DropdownMenuSub;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.EditableDataTable = EditableDataTable;
 exports.EmptyState = EmptyState;
 exports.ErrorBanner = ErrorBanner;
 exports.ErrorPage = ErrorPage;