@burdenoff/fluidgrids-fe-sdk 2026.1111.16 → 2026.1111.18

package/dist/DataTablesPage-BZy2z0LB.js

@@ -0,0 +1,1690 @@
+"use client";
+import { t as __exportAll } from "./rolldown-runtime-hDbaFkMy.js";
+import { t as EntityTagPicker } from "./EntityTagPicker-BqRNsLCQ.js";
+import { t as TagFilterSelect } from "./TagFilterSelect-DCBOH6Ou.js";
+import { _ as throwIfResultError, m as describeOperationError, n as getFluidGridsClient } from "./client-C9XSzSXr.js";
+import { a as useDataTableTagOverlay, n as tagLabel } from "./useEntityTags-DhnsZcTl.js";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import { i as SdkPermissionButton, s as useFluidGridsPermission, t as FLUIDGRIDS_PERMISSIONS } from "./constants-B2lhWNoN.js";
+import { t as FluidGridsDocsLink } from "./FluidGridsDocsLink-JxkBpOeb.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { gql } from "@apollo/client";
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, IllustratedEmptyState, Input, Label, NextSteps, PagePurpose, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea } from "@burdenoff/fe-libs/ui";
+import { Button as Button$1 } from "@burdenoff/fe-libs/button";
+import { ArrowDownToLine, ArrowLeft, ArrowUpFromLine, ChevronLeft, ChevronRight, Database, Pencil, Plus, RefreshCw, Search, Table2, Trash2 } from "lucide-react";
+import { TagBadge } from "@burdenoff/fe-libs/tag";
+
+// src/modules/data-tables/hooks/useDataTables.ts
+const DATA_TABLE_FIELDS = gql`
+  fragment DataTableFields on DataTable {
+    id
+    workspaceId
+    name
+    description
+    columns {
+      key
+      label
+      type
+      required
+      defaultValue
+    }
+    rowCount
+    sizeBytes
+    createdAt
+    updatedAt
+    createdBy
+    updatedBy
+  }
+`;
+const DATA_TABLE_ROW_FIELDS = gql`
+  fragment DataTableRowFields on DataTableRow {
+    id
+    tableId
+    data
+    createdAt
+    updatedAt
+  }
+`;
+const GET_DATA_TABLES = gql`
+  ${DATA_TABLE_FIELDS}
+  query GetDataTables($search: String, $limit: Int, $offset: Int) {
+    dataTables(search: $search, limit: $limit, offset: $offset) {
+      tables {
+        ...DataTableFields
+      }
+      total
+    }
+  }
+`;
+const GET_DATA_TABLES_BY_TAG = gql`
+  ${DATA_TABLE_FIELDS}
+  query GetDataTablesByTag(
+    $search: String
+    $limit: Int
+    $offset: Int
+    $tagIds: [ID!]
+  ) {
+    dataTables(
+      search: $search
+      limit: $limit
+      offset: $offset
+      tagIds: $tagIds
+    ) {
+      tables {
+        ...DataTableFields
+      }
+      total
+    }
+  }
+`;
+const GET_DATA_TABLE_ROWS = gql`
+  ${DATA_TABLE_ROW_FIELDS}
+  query GetDataTableRows($input: DataTableRowsQueryInput!) {
+    dataTableRows(input: $input) {
+      rows {
+        ...DataTableRowFields
+      }
+      total
+    }
+  }
+`;
+const CREATE_DATA_TABLE = gql`
+  ${DATA_TABLE_FIELDS}
+  mutation CreateDataTable($input: CreateDataTableInput!) {
+    createDataTable(input: $input) {
+      success
+      message
+      table {
+        ...DataTableFields
+      }
+    }
+  }
+`;
+const UPDATE_DATA_TABLE = gql`
+  ${DATA_TABLE_FIELDS}
+  mutation UpdateDataTable($id: ID!, $input: UpdateDataTableInput!) {
+    updateDataTable(id: $id, input: $input) {
+      success
+      message
+      table {
+        ...DataTableFields
+      }
+    }
+  }
+`;
+const DELETE_DATA_TABLE = gql`
+  mutation DeleteDataTable($id: ID!) {
+    deleteDataTable(id: $id) {
+      success
+      message
+    }
+  }
+`;
+const INSERT_DATA_TABLE_ROW = gql`
+  ${DATA_TABLE_ROW_FIELDS}
+  mutation InsertDataTableRow($tableId: ID!, $data: JSON!) {
+    insertDataTableRow(tableId: $tableId, data: $data) {
+      success
+      message
+      row {
+        ...DataTableRowFields
+      }
+    }
+  }
+`;
+const UPDATE_DATA_TABLE_ROW = gql`
+  ${DATA_TABLE_ROW_FIELDS}
+  mutation UpdateDataTableRow($id: ID!, $data: JSON!) {
+    updateDataTableRow(id: $id, data: $data) {
+      success
+      message
+      row {
+        ...DataTableRowFields
+      }
+    }
+  }
+`;
+const DELETE_DATA_TABLE_ROWS = gql`
+  mutation DeleteDataTableRows($tableId: ID!, $ids: [ID!]!) {
+    deleteDataTableRows(tableId: $tableId, ids: $ids) {
+      success
+      message
+      affected
+    }
+  }
+`;
+function toRow(row) {
+	return {
+		id: row.id,
+		tableId: row.tableId,
+		data: toRecord(row.data),
+		createdAt: row.createdAt,
+		updatedAt: row.updatedAt
+	};
+}
+function toRecord(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+function operationError(error, fallback) {
+	return new Error(describeOperationError(error, fallback));
+}
+/** The workspace's data tables, optionally narrowed by name and by one tag (G47). */
+function useDataTables(search, tagId) {
+	const [tables, setTables] = useState([]);
+	const [total, setTotal] = useState(0);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const fetchTables = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const result = throwIfResultError(await getFluidGridsClient().query({
+				query: tagId ? GET_DATA_TABLES_BY_TAG : GET_DATA_TABLES,
+				variables: {
+					search: search?.trim() || void 0,
+					limit: 200,
+					offset: 0,
+					...tagId ? { tagIds: [tagId] } : {}
+				},
+				fetchPolicy: "network-only"
+			}));
+			setTables(result.data?.dataTables.tables ?? []);
+			setTotal(result.data?.dataTables.total ?? 0);
+		} catch (err) {
+			setError(operationError(err, "Failed to load data tables"));
+		} finally {
+			setLoading(false);
+		}
+	}, [search, tagId]);
+	useEffect(() => {
+		fetchTables();
+	}, [fetchTables]);
+	return {
+		tables,
+		total,
+		loading,
+		error,
+		refetch: fetchTables
+	};
+}
+/** Largest page the service serves for a single `dataTableRows` request. */
+const DATA_TABLE_MAX_PAGE_SIZE = 5e3;
+async function queryRowsPage(tableId, limit, offset) {
+	const response = throwIfResultError(await getFluidGridsClient().query({
+		query: GET_DATA_TABLE_ROWS,
+		variables: { input: {
+			tableId,
+			limit,
+			offset
+		} },
+		fetchPolicy: "network-only"
+	})).data?.dataTableRows;
+	return {
+		rows: response?.rows.map(toRow) ?? [],
+		total: response?.total ?? 0
+	};
+}
+/**
+* Fetch every row of a table in service-sized batches (used by CSV export so
+* it covers the whole table rather than the page currently on screen). A table
+* is capped at 50k rows server-side, so this is at most ten requests.
+*/
+async function fetchAllDataTableRows(tableId) {
+	const collected = [];
+	let total = Number.POSITIVE_INFINITY;
+	while (collected.length < total) {
+		const page = await queryRowsPage(tableId, DATA_TABLE_MAX_PAGE_SIZE, collected.length);
+		total = page.total;
+		if (page.rows.length === 0) break;
+		collected.push(...page.rows);
+	}
+	return collected;
+}
+function useDataTableRows(tableId, paging) {
+	const { page, pageSize } = paging;
+	const [rows, setRows] = useState([]);
+	const [total, setTotal] = useState(0);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const fetchRows = useCallback(async () => {
+		if (!tableId) {
+			setRows([]);
+			setTotal(0);
+			setLoading(false);
+			setError(null);
+			return;
+		}
+		setLoading(true);
+		setError(null);
+		try {
+			const response = await queryRowsPage(tableId, pageSize, page * pageSize);
+			setRows(response.rows);
+			setTotal(response.total);
+		} catch (err) {
+			setError(operationError(err, "Failed to load data table rows"));
+		} finally {
+			setLoading(false);
+		}
+	}, [
+		tableId,
+		page,
+		pageSize
+	]);
+	useEffect(() => {
+		fetchRows();
+	}, [fetchRows]);
+	return {
+		rows,
+		total,
+		loading,
+		error,
+		refetch: fetchRows
+	};
+}
+function useCreateDataTable() {
+	const [loading, setLoading] = useState(false);
+	return {
+		createDataTable: useCallback(async (input) => {
+			setLoading(true);
+			try {
+				const response = throwIfResultError(await getFluidGridsClient().mutate({
+					mutation: CREATE_DATA_TABLE,
+					variables: { input }
+				})).data?.createDataTable;
+				if (!response?.success) throw new Error(response?.message || "Failed to create data table");
+				return response.table ?? null;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading
+	};
+}
+function useUpdateDataTable() {
+	const [loading, setLoading] = useState(false);
+	return {
+		updateDataTable: useCallback(async (id, input) => {
+			setLoading(true);
+			try {
+				const response = throwIfResultError(await getFluidGridsClient().mutate({
+					mutation: UPDATE_DATA_TABLE,
+					variables: {
+						id,
+						input
+					}
+				})).data?.updateDataTable;
+				if (!response?.success) throw new Error(response?.message || "Failed to update data table");
+				return response.table ?? null;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading
+	};
+}
+function useDeleteDataTable() {
+	const [loading, setLoading] = useState(false);
+	return {
+		deleteDataTable: useCallback(async (id) => {
+			setLoading(true);
+			try {
+				const response = throwIfResultError(await getFluidGridsClient().mutate({
+					mutation: DELETE_DATA_TABLE,
+					variables: { id }
+				})).data?.deleteDataTable;
+				if (!response?.success) throw new Error(response?.message || "Failed to delete data table");
+				return true;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading
+	};
+}
+function useInsertDataTableRow() {
+	const [loading, setLoading] = useState(false);
+	return {
+		insertDataTableRow: useCallback(async (tableId, data) => {
+			setLoading(true);
+			try {
+				const response = throwIfResultError(await getFluidGridsClient().mutate({
+					mutation: INSERT_DATA_TABLE_ROW,
+					variables: {
+						tableId,
+						data
+					}
+				})).data?.insertDataTableRow;
+				if (!response?.success) throw new Error(response?.message || "Failed to insert row");
+				return response.row ? toRow(response.row) : null;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading
+	};
+}
+function useUpdateDataTableRow() {
+	const [loading, setLoading] = useState(false);
+	return {
+		updateDataTableRow: useCallback(async (id, data) => {
+			setLoading(true);
+			try {
+				const response = throwIfResultError(await getFluidGridsClient().mutate({
+					mutation: UPDATE_DATA_TABLE_ROW,
+					variables: {
+						id,
+						data
+					}
+				})).data?.updateDataTableRow;
+				if (!response?.success) throw new Error(response?.message || "Failed to update row");
+				return response.row ? toRow(response.row) : null;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading
+	};
+}
+function useDeleteDataTableRows() {
+	const [loading, setLoading] = useState(false);
+	return {
+		deleteDataTableRows: useCallback(async (tableId, ids) => {
+			setLoading(true);
+			try {
+				const response = throwIfResultError(await getFluidGridsClient().mutate({
+					mutation: DELETE_DATA_TABLE_ROWS,
+					variables: {
+						tableId,
+						ids
+					}
+				})).data?.deleteDataTableRows;
+				if (!response?.success) throw new Error(response?.message || "Failed to delete rows");
+				return response.affected;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading
+	};
+}
+
+// src/modules/data-tables/utils/csv.ts
+/** Parse RFC 4180-style CSV while preserving quoted commas and line breaks. */
+function parseCsv(text) {
+	const rows = [];
+	let row = [];
+	let cell = "";
+	let quoted = false;
+	for (let index = 0; index < text.length; index += 1) {
+		const character = text[index];
+		const next = text[index + 1];
+		if (quoted) {
+			if (character === "\"" && next === "\"") {
+				cell += "\"";
+				index += 1;
+			} else if (character === "\"") quoted = false;
+			else cell += character;
+			continue;
+		}
+		if (character === "\"" && cell.length === 0) quoted = true;
+		else if (character === ",") {
+			row.push(cell);
+			cell = "";
+		} else if (character === "\n" || character === "\r") {
+			if (character === "\r" && next === "\n") index += 1;
+			row.push(cell);
+			cell = "";
+			if (row.some((value) => value.length > 0)) rows.push(row);
+			row = [];
+		} else cell += character;
+	}
+	if (quoted) throw new Error("CSV contains an unterminated quoted value");
+	if (cell.length > 0 || row.length > 0) {
+		row.push(cell);
+		if (row.some((value) => value.length > 0)) rows.push(row);
+	}
+	return rows;
+}
+function parseValue(value, type) {
+	if (value === "") return type === "STRING" ? "" : null;
+	switch (type) {
+		case "NUMBER": {
+			const parsed = Number(value);
+			if (!Number.isFinite(parsed)) throw new Error(`Expected a number, got "${value}"`);
+			return parsed;
+		}
+		case "BOOLEAN": {
+			const normalized = value.trim().toLowerCase();
+			if (normalized === "true") return true;
+			if (normalized === "false") return false;
+			throw new Error(`Expected true or false, got "${value}"`);
+		}
+		case "JSON": try {
+			return JSON.parse(value);
+		} catch {
+			throw new Error(`Expected valid JSON, got "${value}"`);
+		}
+		case "DATE":
+		case "STRING": return value;
+	}
+}
+/** Convert a CSV whose first row contains column keys into validated row data. */
+function csvToRows(text, columns) {
+	const parsed = parseCsv(text);
+	if (parsed.length < 2) return [];
+	const headers = parsed[0].map((header) => header.trim());
+	const columnByKey = new Map(columns.map((column) => [column.key, column]));
+	const seen = /* @__PURE__ */ new Set();
+	for (const header of headers) {
+		if (!header || seen.has(header)) throw new Error("CSV must have unique, non-empty column headers");
+		if (!columnByKey.has(header)) throw new Error(`CSV contains an unknown column "${header}"`);
+		seen.add(header);
+	}
+	return parsed.slice(1).map((values, rowIndex) => {
+		const row = {};
+		headers.forEach((header, columnIndex) => {
+			const column = columnByKey.get(header);
+			if (!column) return;
+			const rawValue = values[columnIndex] ?? "";
+			try {
+				row[header] = parseValue(rawValue, column.type);
+			} catch (error) {
+				const message = error instanceof Error ? error.message : "Invalid value";
+				throw new Error(`Row ${rowIndex + 2}, ${column.label}: ${message}`);
+			}
+		});
+		return row;
+	});
+}
+function csvCell(value) {
+	if (value === null || value === void 0) return "";
+	const text = typeof value === "object" ? JSON.stringify(value) : String(value);
+	return /[",\r\n]/.test(text) ? `"${text.replaceAll("\"", "\"\"")}"` : text;
+}
+/** Serialize table rows with a stable header matching the table schema. */
+function rowsToCsv(columns, rows) {
+	return [columns.map((column) => csvCell(column.key)).join(","), ...rows.map((row) => columns.map((column) => csvCell(row.data[column.key])).join(","))].join("\r\n");
+}
+
+// src/modules/data-tables/utils/paging.ts
+/** Page sizes offered in the rows pager; the first entry is the default. */
+const ROW_PAGE_SIZES = [
+	50,
+	100,
+	250
+];
+const DEFAULT_ROW_PAGE_SIZE = ROW_PAGE_SIZES[0];
+/** Number of pages needed for `total` rows; an empty table still has one page. */
+function pageCount(total, pageSize) {
+	if (pageSize <= 0) return 1;
+	return Math.max(1, Math.ceil(total / pageSize));
+}
+/**
+* Keep a zero-based page index inside the table. Needed after deleting rows,
+* when the page being viewed may no longer exist.
+*/
+function clampPage(page, total, pageSize) {
+	return Math.min(Math.max(page, 0), pageCount(total, pageSize) - 1);
+}
+/** One-based, inclusive `from`–`to` range of the rows shown on a page. */
+function pageRange(page, pageSize, shown) {
+	if (shown <= 0) return {
+		from: 0,
+		to: 0
+	};
+	const from = page * pageSize + 1;
+	return {
+		from,
+		to: from + shown - 1
+	};
+}
+
+// src/modules/data-tables/pages/DataTablesPage.tsx
+var DataTablesPage_exports = /* @__PURE__ */ __exportAll({ DataTablesPage: () => DataTablesPage });
+const COLUMN_TYPES = [
+	"STRING",
+	"NUMBER",
+	"BOOLEAN",
+	"DATE",
+	"JSON"
+];
+function emptyColumn(index) {
+	return {
+		key: `column_${index}`,
+		label: `Column ${index}`,
+		type: "STRING",
+		required: false
+	};
+}
+function formatBytes(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+function formatValue(value) {
+	if (value === null || value === void 0) return "—";
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+}
+function columnTypeLabel(type) {
+	return type === "JSON" ? "JSON" : type[0] + type.slice(1).toLowerCase();
+}
+function asFormValue(value, type) {
+	if (value === null || value === void 0) return "";
+	if (type === "JSON") return JSON.stringify(value, null, 2);
+	return String(value);
+}
+function parseFormValue(value, type) {
+	if (type === "STRING" || type === "DATE") return value;
+	if (value.trim() === "") return null;
+	if (type === "NUMBER") {
+		const number = Number(value);
+		if (!Number.isFinite(number)) throw new Error(`"${value}" is not a number`);
+		return number;
+	}
+	if (type === "BOOLEAN") {
+		if (value === "true") return true;
+		if (value === "false") return false;
+		throw new Error("Boolean values must be true or false");
+	}
+	try {
+		return JSON.parse(value);
+	} catch {
+		throw new Error("JSON values must contain valid JSON");
+	}
+}
+function TableFormDialog({ open, table, onOpenChange, onSaved }) {
+	const tr = useTr();
+	const { createDataTable, loading: creating } = useCreateDataTable();
+	const { updateDataTable, loading: updating } = useUpdateDataTable();
+	const [name, setName] = useState("");
+	const [description, setDescription] = useState("");
+	const [columns, setColumns] = useState([]);
+	const editing = table !== null;
+	const saving = creating || updating;
+	useEffect(() => {
+		if (!open) return;
+		setName(table?.name ?? "");
+		setDescription(table?.description ?? "");
+		setColumns(table?.columns.map((column) => ({
+			key: column.key,
+			label: column.label,
+			type: column.type,
+			required: column.required,
+			...column.defaultValue !== void 0 ? { defaultValue: column.defaultValue } : {}
+		})) ?? [emptyColumn(1)]);
+	}, [open, table]);
+	const updateColumn = useCallback((index, patch) => {
+		setColumns((current) => current.map((column, columnIndex) => columnIndex === index ? {
+			...column,
+			...patch
+		} : column));
+	}, []);
+	const handleSubmit = useCallback(async () => {
+		const trimmedName = name.trim();
+		if (!trimmedName) {
+			toast.error(tr("fluidgrids.dataTables.nameRequired", "Table name is required"));
+			return;
+		}
+		if (columns.length === 0 || columns.some((column) => !column.key.trim() || !column.label.trim())) {
+			toast.error(tr("fluidgrids.dataTables.columnsRequired", "Add at least one column with a key and label"));
+			return;
+		}
+		const normalizedColumns = columns.map((column) => ({
+			...column,
+			key: column.key.trim(),
+			label: column.label.trim()
+		}));
+		if (new Set(normalizedColumns.map((column) => column.key)).size !== normalizedColumns.length) {
+			toast.error(tr("fluidgrids.dataTables.uniqueKeys", "Column keys must be unique"));
+			return;
+		}
+		try {
+			const saved = editing ? await updateDataTable(table.id, {
+				name: trimmedName,
+				description: description.trim() || void 0,
+				columns: normalizedColumns
+			}) : await createDataTable({
+				name: trimmedName,
+				description: description.trim() || void 0,
+				columns: normalizedColumns
+			});
+			toast.success(editing ? tr("fluidgrids.dataTables.updated", "Data table updated") : tr("fluidgrids.dataTables.created", "Data table created"));
+			onSaved(saved);
+			onOpenChange(false);
+		} catch (error) {
+			toast.error(describeOperationError(error, tr("fluidgrids.dataTables.saveFailed", "Failed to save data table")));
+		}
+	}, [
+		columns,
+		createDataTable,
+		description,
+		editing,
+		name,
+		onOpenChange,
+		onSaved,
+		table,
+		tr,
+		updateDataTable
+	]);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-[90vh] max-w-3xl overflow-y-auto",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: editing ? tr("fluidgrids.dataTables.editTable", "Edit data table") : tr("fluidgrids.dataTables.newTable", "New data table") }) }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-5 py-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "grid gap-4 sm:grid-cols-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: "data-table-name",
+								children: tr("fluidgrids.dataTables.name", "Name")
+							}), /* @__PURE__ */ jsx(Input, {
+								id: "data-table-name",
+								value: name,
+								onChange: (event) => setName(event.target.value),
+								placeholder: "contacts",
+								autoFocus: true
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: "data-table-description",
+								children: tr("fluidgrids.dataTables.description", "Description")
+							}), /* @__PURE__ */ jsx(Input, {
+								id: "data-table-description",
+								value: description,
+								onChange: (event) => setDescription(event.target.value),
+								placeholder: tr("fluidgrids.dataTables.descriptionPlaceholder", "Optional")
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "space-y-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between gap-3",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+								className: "text-sm font-semibold text-text-primary",
+								children: tr("fluidgrids.dataTables.columns", "Columns")
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-text-secondary",
+								children: tr("fluidgrids.dataTables.columnsHint", "Column keys are used by workflow nodes and must be unique.")
+							})] }), /* @__PURE__ */ jsxs(Button$1, {
+								type: "button",
+								variant: "outline",
+								size: "sm",
+								onClick: () => setColumns((current) => [...current, emptyColumn(current.length + 1)]),
+								children: [/* @__PURE__ */ jsx(Plus, {
+									className: "mr-1.5 size-4",
+									"aria-hidden": "true"
+								}), tr("fluidgrids.dataTables.addColumn", "Add column")]
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "space-y-2",
+							children: columns.map((column, index) => /* @__PURE__ */ jsxs("div", {
+								className: "grid gap-2 rounded-md border border-border-secondary p-3 sm:grid-cols-[1fr_1fr_8rem_auto] sm:items-end",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "space-y-1",
+										children: [/* @__PURE__ */ jsx(Label, {
+											htmlFor: `data-table-column-key-${index}`,
+											children: tr("fluidgrids.dataTables.key", "Key")
+										}), /* @__PURE__ */ jsx(Input, {
+											id: `data-table-column-key-${index}`,
+											value: column.key,
+											onChange: (event) => updateColumn(index, { key: event.target.value })
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "space-y-1",
+										children: [/* @__PURE__ */ jsx(Label, {
+											htmlFor: `data-table-column-label-${index}`,
+											children: tr("fluidgrids.dataTables.label", "Label")
+										}), /* @__PURE__ */ jsx(Input, {
+											id: `data-table-column-label-${index}`,
+											value: column.label,
+											onChange: (event) => updateColumn(index, { label: event.target.value })
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "space-y-1",
+										children: [/* @__PURE__ */ jsx(Label, {
+											htmlFor: `data-table-column-type-${index}`,
+											children: tr("fluidgrids.dataTables.type", "Type")
+										}), /* @__PURE__ */ jsx("select", {
+											id: `data-table-column-type-${index}`,
+											className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-text-primary",
+											value: column.type,
+											onChange: (event) => updateColumn(index, { type: event.target.value }),
+											children: COLUMN_TYPES.map((type) => /* @__PURE__ */ jsx("option", {
+												value: type,
+												children: columnTypeLabel(type)
+											}, type))
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2 pb-2 sm:flex-col sm:items-center sm:gap-1",
+										children: [/* @__PURE__ */ jsxs("label", {
+											className: "flex items-center gap-2 text-xs text-text-secondary",
+											children: [/* @__PURE__ */ jsx("input", {
+												type: "checkbox",
+												checked: column.required ?? false,
+												onChange: (event) => updateColumn(index, { required: event.target.checked })
+											}), tr("fluidgrids.dataTables.required", "Required")]
+										}), /* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "rounded p-1 text-text-secondary hover:bg-background-tertiary hover:text-text-primary disabled:opacity-40",
+											onClick: () => setColumns((current) => current.filter((_, columnIndex) => columnIndex !== index)),
+											disabled: columns.length === 1,
+											title: tr("fluidgrids.dataTables.removeColumn", "Remove column"),
+											"aria-label": tr("fluidgrids.dataTables.removeColumn", "Remove column"),
+											children: /* @__PURE__ */ jsx(Trash2, {
+												className: "size-4",
+												"aria-hidden": "true"
+											})
+										})]
+									})
+								]
+							}, `${column.key}-${index}`))
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button$1, {
+					variant: "outline",
+					onClick: () => onOpenChange(false),
+					children: tr("fluidgrids.dataTables.cancel", "Cancel")
+				}), /* @__PURE__ */ jsx(Button$1, {
+					onClick: handleSubmit,
+					disabled: saving,
+					children: saving ? tr("fluidgrids.dataTables.saving", "Saving…") : tr("fluidgrids.dataTables.save", "Save table")
+				})] })
+			]
+		})
+	});
+}
+function RowFormDialog({ open, table, row, onOpenChange, onSaved }) {
+	const tr = useTr();
+	const { insertDataTableRow, loading: inserting } = useInsertDataTableRow();
+	const { updateDataTableRow, loading: updating } = useUpdateDataTableRow();
+	const [values, setValues] = useState({});
+	const editing = row !== null;
+	const saving = inserting || updating;
+	useEffect(() => {
+		if (!open || !table) return;
+		const next = {};
+		for (const column of table.columns) next[column.key] = asFormValue(row?.data[column.key], column.type);
+		setValues(next);
+	}, [
+		open,
+		row,
+		table
+	]);
+	const handleSubmit = useCallback(async () => {
+		if (!table) return;
+		try {
+			const data = {};
+			for (const column of table.columns) {
+				const value = values[column.key] ?? "";
+				if (column.required && value.trim() === "") throw new Error(`${column.label} is required`);
+				data[column.key] = parseFormValue(value, column.type);
+			}
+			if (editing && row) await updateDataTableRow(row.id, data);
+			else await insertDataTableRow(table.id, data);
+			toast.success(editing ? tr("fluidgrids.dataTables.rowUpdated", "Row updated") : tr("fluidgrids.dataTables.rowCreated", "Row added"));
+			onSaved();
+			onOpenChange(false);
+		} catch (error) {
+			toast.error(describeOperationError(error, tr("fluidgrids.dataTables.rowSaveFailed", "Failed to save row")));
+		}
+	}, [
+		editing,
+		insertDataTableRow,
+		onOpenChange,
+		onSaved,
+		row,
+		table,
+		tr,
+		updateDataTableRow,
+		values
+	]);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-[90vh] max-w-2xl overflow-y-auto",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: editing ? tr("fluidgrids.dataTables.editRow", "Edit row") : tr("fluidgrids.dataTables.addRow", "Add row") }) }),
+				table && /* @__PURE__ */ jsx("div", {
+					className: "space-y-4 py-2",
+					children: table.columns.map((column) => /* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ jsxs(Label, {
+							htmlFor: `data-table-row-${column.key}`,
+							children: [
+								column.label,
+								/* @__PURE__ */ jsxs("span", {
+									className: "ml-1 text-xs text-text-secondary",
+									children: [
+										"(",
+										column.key,
+										" · ",
+										columnTypeLabel(column.type),
+										")"
+									]
+								}),
+								column.required && /* @__PURE__ */ jsx("span", {
+									className: "ml-1 text-text-secondary",
+									children: "*"
+								})
+							]
+						}), column.type === "JSON" ? /* @__PURE__ */ jsx(Textarea, {
+							id: `data-table-row-${column.key}`,
+							value: values[column.key] ?? "",
+							onChange: (event) => setValues((current) => ({
+								...current,
+								[column.key]: event.target.value
+							})),
+							rows: 4,
+							placeholder: "{ }"
+						}) : /* @__PURE__ */ jsx(Input, {
+							id: `data-table-row-${column.key}`,
+							type: column.type === "NUMBER" ? "number" : column.type === "DATE" ? "datetime-local" : "text",
+							value: values[column.key] ?? "",
+							onChange: (event) => setValues((current) => ({
+								...current,
+								[column.key]: event.target.value
+							}))
+						})]
+					}, column.key))
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button$1, {
+					variant: "outline",
+					onClick: () => onOpenChange(false),
+					children: tr("fluidgrids.dataTables.cancel", "Cancel")
+				}), /* @__PURE__ */ jsx(Button$1, {
+					onClick: handleSubmit,
+					disabled: saving || !table,
+					children: saving ? tr("fluidgrids.dataTables.saving", "Saving…") : tr("fluidgrids.dataTables.saveRow", "Save row")
+				})] })
+			]
+		})
+	});
+}
+function TableRowsPanel({ table, onTableChanged, onEditTable, onDeleteTable, deletingTable, onTagsChanged }) {
+	const tr = useTr();
+	const { allowed: canTag } = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.WORKFLOW_UPDATE);
+	const [page, setPage] = useState(0);
+	const [pageSize, setPageSize] = useState(DEFAULT_ROW_PAGE_SIZE);
+	const { rows, total, loading, error, refetch } = useDataTableRows(table.id, {
+		page,
+		pageSize
+	});
+	const { deleteDataTableRows, loading: deleting } = useDeleteDataTableRows();
+	const { insertDataTableRow } = useInsertDataTableRow();
+	const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+	const [rowDialogOpen, setRowDialogOpen] = useState(false);
+	const [editingRow, setEditingRow] = useState(null);
+	const [exporting, setExporting] = useState(false);
+	const [importProgress, setImportProgress] = useState(null);
+	const fileInputRef = useRef(null);
+	const pages = pageCount(total, pageSize);
+	const range = pageRange(page, pageSize, rows.length);
+	useEffect(() => {
+		if (loading) return;
+		const clamped = clampPage(page, total, pageSize);
+		if (clamped !== page) setPage(clamped);
+	}, [
+		loading,
+		page,
+		pageSize,
+		total
+	]);
+	useEffect(() => {
+		setSelectedIds((current) => {
+			const visible = new Set(rows.map((row) => row.id));
+			return new Set([...current].filter((id) => visible.has(id)));
+		});
+	}, [rows]);
+	const allVisibleSelected = rows.length > 0 && selectedIds.size === rows.length;
+	const toggleAll = useCallback(() => {
+		setSelectedIds(allVisibleSelected ? /* @__PURE__ */ new Set() : new Set(rows.map((row) => row.id)));
+	}, [allVisibleSelected, rows]);
+	const handleDeleteRows = useCallback(async () => {
+		if (selectedIds.size === 0) return;
+		if (!window.confirm(tr("fluidgrids.dataTables.confirmDeleteRows", `Delete ${selectedIds.size} selected row(s)?`))) return;
+		try {
+			const affected = await deleteDataTableRows(table.id, [...selectedIds]);
+			toast.success(tr("fluidgrids.dataTables.rowsDeleted", `${affected} row(s) deleted`));
+			setSelectedIds(/* @__PURE__ */ new Set());
+			await refetch();
+			onTableChanged();
+		} catch (error) {
+			toast.error(describeOperationError(error, tr("fluidgrids.dataTables.deleteRowsFailed", "Failed to delete rows")));
+		}
+	}, [
+		deleteDataTableRows,
+		onTableChanged,
+		refetch,
+		selectedIds,
+		table.id,
+		tr
+	]);
+	const handleExport = useCallback(async () => {
+		setExporting(true);
+		try {
+			const allRows = await fetchAllDataTableRows(table.id);
+			const csv = rowsToCsv(table.columns, allRows);
+			const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+			const url = URL.createObjectURL(blob);
+			const anchor = document.createElement("a");
+			anchor.href = url;
+			anchor.download = `${table.name}.csv`;
+			anchor.click();
+			URL.revokeObjectURL(url);
+			toast.success(tr("fluidgrids.dataTables.exported", `${allRows.length} row(s) exported to CSV`));
+		} catch (error) {
+			toast.error(describeOperationError(error, tr("fluidgrids.dataTables.exportFailed", "Failed to export CSV")));
+		} finally {
+			setExporting(false);
+		}
+	}, [
+		table.columns,
+		table.id,
+		table.name,
+		tr
+	]);
+	const handleImport = useCallback(async (event) => {
+		const file = event.target.files?.[0];
+		event.target.value = "";
+		if (!file) return;
+		let inserted = 0;
+		try {
+			const importedRows = csvToRows(await file.text(), table.columns);
+			setImportProgress({
+				done: 0,
+				total: importedRows.length
+			});
+			for (const data of importedRows) {
+				await insertDataTableRow(table.id, data);
+				inserted += 1;
+				setImportProgress({
+					done: inserted,
+					total: importedRows.length
+				});
+			}
+			toast.success(tr("fluidgrids.dataTables.imported", `${inserted} row(s) imported`));
+		} catch (error) {
+			const reason = describeOperationError(error, tr("fluidgrids.dataTables.importFailed", "Failed to import CSV"));
+			toast.error(inserted > 0 ? tr("fluidgrids.dataTables.importPartial", `Import stopped after ${inserted} row(s): ${reason}`) : reason);
+		} finally {
+			setImportProgress(null);
+			setPage(0);
+			await refetch();
+			onTableChanged();
+		}
+	}, [
+		insertDataTableRow,
+		onTableChanged,
+		refetch,
+		table.columns,
+		table.id,
+		tr
+	]);
+	const openNewRow = useCallback(() => {
+		setEditingRow(null);
+		setRowDialogOpen(true);
+	}, []);
+	const openEditRow = useCallback((row) => {
+		setEditingRow(row);
+		setRowDialogOpen(true);
+	}, []);
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "min-w-0 border-border-secondary",
+		children: [
+			/* @__PURE__ */ jsxs(CardHeader, {
+				className: "gap-4 border-b border-border-secondary p-4 sm:p-5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-start justify-between gap-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1 basis-64",
+						children: [
+							/* @__PURE__ */ jsxs(CardTitle, {
+								className: "flex items-center gap-2 text-lg",
+								children: [/* @__PURE__ */ jsx(Table2, {
+									className: "size-5 shrink-0 text-text-secondary",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: table.name
+								})]
+							}),
+							/* @__PURE__ */ jsx(CardDescription, {
+								className: "mt-1",
+								children: table.description || tr("fluidgrids.dataTables.noDescription", "No description")
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "mt-3",
+								"data-testid": "data-table-tags",
+								children: /* @__PURE__ */ jsx(EntityTagPicker, {
+									entityType: "FLUIDGRIDS_DATA_TABLE",
+									entityId: table.id,
+									readOnly: !canTag,
+									onChange: onTagsChanged
+								})
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center gap-2",
+						children: [/* @__PURE__ */ jsx(SdkPermissionButton, {
+							permission: FLUIDGRIDS_PERMISSIONS.DATA_TABLE_UPDATE,
+							deniedTooltip: tr("fluidgrids.dataTables.editDeniedTooltip", "You don't have permission to edit data tables"),
+							children: /* @__PURE__ */ jsxs(Button$1, {
+								variant: "outline",
+								size: "sm",
+								className: "whitespace-nowrap",
+								onClick: onEditTable,
+								children: [/* @__PURE__ */ jsx(Pencil, {
+									className: "mr-1.5 size-4",
+									"aria-hidden": "true"
+								}), tr("fluidgrids.dataTables.editTable", "Edit table")]
+							})
+						}), /* @__PURE__ */ jsx(SdkPermissionButton, {
+							permission: FLUIDGRIDS_PERMISSIONS.DATA_TABLE_DELETE,
+							deniedTooltip: tr("fluidgrids.dataTables.deleteDeniedTooltip", "You don't have permission to delete data tables"),
+							children: /* @__PURE__ */ jsxs(Button$1, {
+								variant: "outline",
+								size: "sm",
+								className: "whitespace-nowrap",
+								onClick: onDeleteTable,
+								disabled: deletingTable,
+								children: [/* @__PURE__ */ jsx(Trash2, {
+									className: "mr-1.5 size-4",
+									"aria-hidden": "true"
+								}), deletingTable ? tr("fluidgrids.dataTables.deleting", "Deleting…") : tr("fluidgrids.dataTables.deleteTable", "Delete table")]
+							})
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center justify-between gap-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-2 text-xs text-text-secondary",
+						children: [
+							/* @__PURE__ */ jsxs(Badge, {
+								variant: "outline",
+								children: [
+									total,
+									" ",
+									tr("fluidgrids.dataTables.rows", "rows")
+								]
+							}),
+							/* @__PURE__ */ jsxs(Badge, {
+								variant: "outline",
+								children: [
+									table.columns.length,
+									" ",
+									tr("fluidgrids.dataTables.columns", "columns")
+								]
+							}),
+							/* @__PURE__ */ jsx(Badge, {
+								variant: "outline",
+								children: formatBytes(table.sizeBytes)
+							}),
+							selectedIds.size > 0 && /* @__PURE__ */ jsx(SdkPermissionButton, {
+								permission: FLUIDGRIDS_PERMISSIONS.DATA_TABLE_ROW_DELETE,
+								deniedTooltip: tr("fluidgrids.dataTables.deleteRowsDeniedTooltip", "You don't have permission to delete rows"),
+								children: /* @__PURE__ */ jsxs(Button$1, {
+									variant: "outline",
+									size: "sm",
+									className: "whitespace-nowrap",
+									onClick: handleDeleteRows,
+									disabled: deleting,
+									children: [/* @__PURE__ */ jsx(Trash2, {
+										className: "mr-1.5 size-4",
+										"aria-hidden": "true"
+									}), deleting ? tr("fluidgrids.dataTables.deleting", "Deleting…") : tr("fluidgrids.dataTables.deleteSelected", `Delete ${selectedIds.size} selected`)]
+								})
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(SdkPermissionButton, {
+								permission: FLUIDGRIDS_PERMISSIONS.DATA_TABLE_ROW_CREATE,
+								deniedTooltip: tr("fluidgrids.dataTables.addRowDeniedTooltip", "You don't have permission to add rows"),
+								children: /* @__PURE__ */ jsxs(Button$1, {
+									size: "sm",
+									className: "whitespace-nowrap",
+									onClick: openNewRow,
+									disabled: importProgress !== null,
+									children: [/* @__PURE__ */ jsx(Plus, {
+										className: "mr-1.5 size-4",
+										"aria-hidden": "true"
+									}), tr("fluidgrids.dataTables.addRow", "Add row")]
+								})
+							}),
+							/* @__PURE__ */ jsx(SdkPermissionButton, {
+								permission: FLUIDGRIDS_PERMISSIONS.DATA_TABLE_ROW_CREATE,
+								deniedTooltip: tr("fluidgrids.dataTables.importDeniedTooltip", "You don't have permission to import rows"),
+								children: /* @__PURE__ */ jsxs(Button$1, {
+									variant: "outline",
+									size: "sm",
+									className: "whitespace-nowrap",
+									onClick: () => fileInputRef.current?.click(),
+									disabled: importProgress !== null,
+									children: [/* @__PURE__ */ jsx(ArrowUpFromLine, {
+										className: "mr-1.5 size-4",
+										"aria-hidden": "true"
+									}), importProgress ? tr("fluidgrids.dataTables.importing", `Importing ${importProgress.done} / ${importProgress.total}…`) : tr("fluidgrids.dataTables.import", "Import CSV")]
+								})
+							}),
+							/* @__PURE__ */ jsx("input", {
+								ref: fileInputRef,
+								type: "file",
+								accept: ".csv,text/csv",
+								className: "hidden",
+								onChange: handleImport
+							}),
+							/* @__PURE__ */ jsxs(Button$1, {
+								variant: "outline",
+								size: "sm",
+								className: "whitespace-nowrap",
+								onClick: handleExport,
+								disabled: total === 0 || exporting,
+								children: [/* @__PURE__ */ jsx(ArrowDownToLine, {
+									className: "mr-1.5 size-4",
+									"aria-hidden": "true"
+								}), exporting ? tr("fluidgrids.dataTables.exporting", "Exporting…") : tr("fluidgrids.dataTables.export", "Export CSV")]
+							})
+						]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(CardContent, {
+				className: "p-0",
+				children: [
+					error && /* @__PURE__ */ jsx("div", {
+						className: "m-4 rounded-md border border-border-secondary bg-background-secondary p-3 text-sm text-text-secondary",
+						children: error.message
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "overflow-x-auto",
+						children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+							/* @__PURE__ */ jsx(TableHead, {
+								className: "w-10",
+								children: /* @__PURE__ */ jsx("input", {
+									type: "checkbox",
+									checked: allVisibleSelected,
+									onChange: toggleAll,
+									"aria-label": tr("fluidgrids.dataTables.selectAll", "Select all rows on this page")
+								})
+							}),
+							/* @__PURE__ */ jsx(TableHead, { children: tr("fluidgrids.dataTables.rowId", "Row") }),
+							table.columns.map((column) => /* @__PURE__ */ jsx(TableHead, { children: column.label }, column.key)),
+							/* @__PURE__ */ jsx(TableHead, {
+								className: "text-right",
+								children: tr("fluidgrids.dataTables.actions", "Actions")
+							})
+						] }) }), /* @__PURE__ */ jsxs(TableBody, { children: [
+							loading && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+								colSpan: table.columns.length + 3,
+								className: "py-10 text-center text-text-secondary",
+								children: tr("fluidgrids.dataTables.loadingRows", "Loading rows…")
+							}) }),
+							!loading && rows.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+								colSpan: table.columns.length + 3,
+								className: "py-10 text-center text-text-secondary",
+								children: tr("fluidgrids.dataTables.emptyRows", "No rows yet. Add a row or import a CSV to get started.")
+							}) }),
+							!loading && rows.map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
+								/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("input", {
+									type: "checkbox",
+									checked: selectedIds.has(row.id),
+									onChange: () => setSelectedIds((current) => {
+										const next = new Set(current);
+										if (next.has(row.id)) next.delete(row.id);
+										else next.add(row.id);
+										return next;
+									}),
+									"aria-label": tr("fluidgrids.dataTables.selectRow", "Select row")
+								}) }),
+								/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("code", {
+									className: "text-xs text-text-secondary",
+									children: row.id.slice(0, 8)
+								}) }),
+								table.columns.map((column) => /* @__PURE__ */ jsx(TableCell, {
+									className: "max-w-[16rem] truncate text-sm",
+									title: formatValue(row.data[column.key]),
+									children: formatValue(row.data[column.key])
+								}, column.key)),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "text-right",
+									children: /* @__PURE__ */ jsx(SdkPermissionButton, {
+										permission: FLUIDGRIDS_PERMISSIONS.DATA_TABLE_ROW_UPDATE,
+										deniedTooltip: tr("fluidgrids.dataTables.editRowDeniedTooltip", "You don't have permission to edit rows"),
+										children: /* @__PURE__ */ jsx(Button$1, {
+											variant: "ghost",
+											size: "icon",
+											onClick: () => openEditRow(row),
+											title: tr("fluidgrids.dataTables.editRow", "Edit row"),
+											"aria-label": tr("fluidgrids.dataTables.editRow", "Edit row"),
+											children: /* @__PURE__ */ jsx(Pencil, {
+												className: "size-4",
+												"aria-hidden": "true"
+											})
+										})
+									})
+								})
+							] }, row.id))
+						] })] })
+					}),
+					total > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center justify-between gap-3 border-t border-border-secondary px-4 py-3 text-xs text-text-secondary",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-live": "polite",
+							children: tr("fluidgrids.dataTables.showingRange", `Showing ${range.from}–${range.to} of ${total}`)
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-3",
+							children: [
+								/* @__PURE__ */ jsxs("label", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx("span", { children: tr("fluidgrids.dataTables.rowsPerPage", "Rows per page") }), /* @__PURE__ */ jsx("select", {
+										className: "h-8 rounded-md border border-input bg-background px-2 text-xs text-text-primary",
+										value: pageSize,
+										onChange: (event) => {
+											setPageSize(Number(event.target.value));
+											setPage(0);
+										},
+										children: ROW_PAGE_SIZES.map((size) => /* @__PURE__ */ jsx("option", {
+											value: size,
+											children: size
+										}, size))
+									})]
+								}),
+								/* @__PURE__ */ jsx("span", { children: tr("fluidgrids.dataTables.pageOf", `Page ${page + 1} of ${pages}`) }),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-1",
+									children: [/* @__PURE__ */ jsx(Button$1, {
+										variant: "outline",
+										size: "icon",
+										className: "size-8",
+										onClick: () => setPage((current) => Math.max(current - 1, 0)),
+										disabled: page === 0 || loading,
+										title: tr("fluidgrids.dataTables.prevPage", "Previous page"),
+										"aria-label": tr("fluidgrids.dataTables.prevPage", "Previous page"),
+										children: /* @__PURE__ */ jsx(ChevronLeft, {
+											className: "size-4",
+											"aria-hidden": "true"
+										})
+									}), /* @__PURE__ */ jsx(Button$1, {
+										variant: "outline",
+										size: "icon",
+										className: "size-8",
+										onClick: () => setPage((current) => Math.min(current + 1, pages - 1)),
+										disabled: page >= pages - 1 || loading,
+										title: tr("fluidgrids.dataTables.nextPage", "Next page"),
+										"aria-label": tr("fluidgrids.dataTables.nextPage", "Next page"),
+										children: /* @__PURE__ */ jsx(ChevronRight, {
+											className: "size-4",
+											"aria-hidden": "true"
+										})
+									})]
+								})
+							]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(RowFormDialog, {
+				open: rowDialogOpen,
+				table,
+				row: editingRow,
+				onOpenChange: setRowDialogOpen,
+				onSaved: async () => {
+					await refetch();
+					onTableChanged();
+				}
+			})
+		]
+	});
+}
+function DataTablesPage() {
+	const tr = useTr();
+	const navigate = useNavigate();
+	const { allowed: canCreateTable } = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.DATA_TABLE_CREATE);
+	const [searchInput, setSearchInput] = useState("");
+	const [search, setSearch] = useState("");
+	const [tagFilter, setTagFilter] = useState("");
+	const { tables, total, loading, error, refetch } = useDataTables(search, tagFilter);
+	const { tagsById, refetch: refetchTags } = useDataTableTagOverlay();
+	const { deleteDataTable, loading: deleting } = useDeleteDataTable();
+	const [selectedId, setSelectedId] = useState(null);
+	const [tableDialogOpen, setTableDialogOpen] = useState(false);
+	const [editingTable, setEditingTable] = useState(null);
+	const selectedTable = useMemo(() => tables.find((table) => table.id === selectedId) ?? null, [selectedId, tables]);
+	useEffect(() => {
+		if (tables.length === 0) {
+			setSelectedId(null);
+			return;
+		}
+		if (!selectedId || !tables.some((table) => table.id === selectedId)) setSelectedId(tables[0].id);
+	}, [selectedId, tables]);
+	const refresh = useCallback(async () => {
+		await refetch();
+	}, [refetch]);
+	const handleTagsChanged = useCallback(() => {
+		refetchTags();
+		if (tagFilter) refetch();
+	}, [
+		refetch,
+		refetchTags,
+		tagFilter
+	]);
+	const handleDeleteTable = useCallback(async () => {
+		if (!selectedTable) return;
+		if (!window.confirm(tr("fluidgrids.dataTables.confirmDeleteTable", `Delete table "${selectedTable.name}" and all of its rows?`))) return;
+		try {
+			await deleteDataTable(selectedTable.id);
+			toast.success(tr("fluidgrids.dataTables.deleted", "Data table deleted"));
+			setSelectedId(null);
+			await refetch();
+		} catch (error) {
+			toast.error(describeOperationError(error, tr("fluidgrids.dataTables.deleteFailed", "Failed to delete data table")));
+		}
+	}, [
+		deleteDataTable,
+		refetch,
+		selectedTable,
+		tr
+	]);
+	const handleTableSaved = useCallback((table) => {
+		if (table) setSelectedId(table.id);
+		refetch();
+	}, [refetch]);
+	const submitSearch = useCallback((event) => {
+		event.preventDefault();
+		setSearch(searchInput);
+	}, [searchInput]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-h-screen bg-background-primary p-4 pb-24 sm:p-6 sm:pb-24",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex max-w-[1500px] flex-col gap-5",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+					"data-tour": "fluidgrids-data-tables-header",
+					children: [/* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "mb-2 flex items-center gap-2 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ jsx(Database, {
+								className: "size-4",
+								"aria-hidden": "true"
+							}), tr("fluidgrids.dataTables.workflowData", "Workflow data")]
+						}),
+						/* @__PURE__ */ jsx("h1", {
+							className: "text-2xl font-bold text-text-primary sm:text-3xl",
+							children: tr("fluidgrids.dataTables.pageTitle", "Data Tables")
+						}),
+						/* @__PURE__ */ jsx(PagePurpose, {
+							icon: /* @__PURE__ */ jsx(Database, {
+								className: "size-4",
+								"aria-hidden": "true"
+							}),
+							children: tr("fluidgrids.dataTables.pageSubtitle", "Use Data Tables as lightweight persistent storage for workflow state, lookups, and records shared across runs.")
+						}),
+						/* @__PURE__ */ jsx(FluidGridsDocsLink, {
+							topic: "dataTables",
+							className: "mt-1"
+						})
+					] }), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap gap-2",
+						children: [/* @__PURE__ */ jsxs(Button$1, {
+							variant: "outline",
+							onClick: () => navigate("../list"),
+							children: [/* @__PURE__ */ jsx(ArrowLeft, {
+								className: "mr-2 size-4",
+								"aria-hidden": "true"
+							}), tr("fluidgrids.dataTables.backToWorkflows", "Back to Workflows")]
+						}), /* @__PURE__ */ jsx(SdkPermissionButton, {
+							permission: FLUIDGRIDS_PERMISSIONS.DATA_TABLE_CREATE,
+							deniedTooltip: tr("fluidgrids.dataTables.createDeniedTooltip", "You don't have permission to create data tables"),
+							children: /* @__PURE__ */ jsxs(Button$1, {
+								onClick: () => {
+									setEditingTable(null);
+									setTableDialogOpen(true);
+								},
+								"data-tour": "fluidgrids-data-tables-create",
+								children: [/* @__PURE__ */ jsx(Plus, {
+									className: "mr-2 size-4",
+									"aria-hidden": "true"
+								}), tr("fluidgrids.dataTables.newTable", "New data table")]
+							})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(NextSteps, {
+					storageKey: "data-tables",
+					title: tr("fluidgrids.dataTables.nextStepsTitle", "How to use Data Tables"),
+					steps: [
+						{
+							id: "create",
+							label: tr("fluidgrids.dataTables.nextStepCreateLabel", "Create a table"),
+							description: tr("fluidgrids.dataTables.nextStepCreateDescription", "Define typed columns for the records your workflow needs."),
+							icon: /* @__PURE__ */ jsx(Plus, {
+								className: "size-4",
+								"aria-hidden": "true"
+							}),
+							onClick: canCreateTable ? () => {
+								setEditingTable(null);
+								setTableDialogOpen(true);
+							} : void 0
+						},
+						{
+							id: "connect",
+							label: tr("fluidgrids.dataTables.nextStepConnectLabel", "Connect it to a workflow"),
+							description: tr("fluidgrids.dataTables.nextStepConnectDescription", "Add a Data Table node to get, insert, update, upsert, or delete rows."),
+							icon: /* @__PURE__ */ jsx(Table2, {
+								className: "size-4",
+								"aria-hidden": "true"
+							}),
+							onClick: () => navigate("../list")
+						},
+						{
+							id: "reuse",
+							label: tr("fluidgrids.dataTables.nextStepReuseLabel", "Reuse data across runs"),
+							description: tr("fluidgrids.dataTables.nextStepReuseDescription", "Use saved status, cursors, lookups, and deduplication keys on later runs."),
+							icon: /* @__PURE__ */ jsx(RefreshCw, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
+						}
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid gap-5 xl:grid-cols-[minmax(16rem,22rem)_minmax(0,1fr)]",
+					children: [
+						/* @__PURE__ */ jsxs(Card, {
+							className: "h-fit border-border-secondary",
+							"data-tour": "fluidgrids-data-tables-list",
+							children: [/* @__PURE__ */ jsxs(CardHeader, {
+								className: "gap-3 border-b border-border-secondary p-4",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center justify-between gap-2",
+										children: [/* @__PURE__ */ jsx(CardTitle, {
+											className: "text-base",
+											children: tr("fluidgrids.dataTables.tables", "Tables")
+										}), /* @__PURE__ */ jsx(Badge, {
+											variant: "outline",
+											children: total
+										})]
+									}),
+									/* @__PURE__ */ jsxs("form", {
+										className: "flex gap-2",
+										onSubmit: submitSearch,
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: "relative min-w-0 flex-1",
+											children: [/* @__PURE__ */ jsx(Search, {
+												className: "pointer-events-none absolute left-2.5 top-2.5 size-4 text-text-secondary",
+												"aria-hidden": "true"
+											}), /* @__PURE__ */ jsx(Input, {
+												className: "pl-8",
+												value: searchInput,
+												onChange: (event) => setSearchInput(event.target.value),
+												placeholder: tr("fluidgrids.dataTables.search", "Search tables"),
+												"aria-label": tr("fluidgrids.dataTables.search", "Search tables")
+											})]
+										}), /* @__PURE__ */ jsx(Button$1, {
+											type: "submit",
+											variant: "outline",
+											size: "sm",
+											children: tr("fluidgrids.dataTables.searchAction", "Search")
+										})]
+									}),
+									/* @__PURE__ */ jsx(TagFilterSelect, {
+										value: tagFilter,
+										onChange: setTagFilter,
+										className: "w-full"
+									})
+								]
+							}), /* @__PURE__ */ jsxs(CardContent, {
+								className: "max-h-72 overflow-y-auto p-2 xl:max-h-[36rem]",
+								children: [
+									loading && /* @__PURE__ */ jsx("p", {
+										className: "p-4 text-sm text-text-secondary",
+										children: tr("fluidgrids.dataTables.loading", "Loading tables…")
+									}),
+									!loading && tables.length === 0 && tagFilter && /* @__PURE__ */ jsx("p", {
+										className: "p-4 text-sm text-text-secondary",
+										children: tr("fluidgrids.dataTables.noTablesWithTag", "No tables carry this tag.")
+									}),
+									!loading && tables.length === 0 && !tagFilter && /* @__PURE__ */ jsx(IllustratedEmptyState, {
+										className: "py-8",
+										illustration: "onboarding",
+										title: tr("fluidgrids.dataTables.empty", "Create your first Data Table"),
+										description: tr("fluidgrids.dataTables.emptyHint", "Give your workflows a shared place to store typed records across runs."),
+										action: /* @__PURE__ */ jsx(SdkPermissionButton, {
+											permission: FLUIDGRIDS_PERMISSIONS.DATA_TABLE_CREATE,
+											deniedTooltip: tr("fluidgrids.dataTables.createDeniedTooltip", "You don't have permission to create data tables"),
+											children: /* @__PURE__ */ jsxs(Button$1, {
+												size: "sm",
+												onClick: () => {
+													setEditingTable(null);
+													setTableDialogOpen(true);
+												},
+												children: [/* @__PURE__ */ jsx(Plus, {
+													className: "mr-2 size-4",
+													"aria-hidden": "true"
+												}), tr("fluidgrids.dataTables.createFirstTable", "Create a table")]
+											})
+										})
+									}),
+									!loading && tables.map((table) => /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										onClick: () => setSelectedId(table.id),
+										className: `mb-1 flex w-full items-start justify-between gap-3 rounded-md px-3 py-3 text-left transition-colors ${selectedId === table.id ? "bg-background-tertiary text-text-primary" : "text-text-secondary hover:bg-background-secondary hover:text-text-primary"}`,
+										children: [/* @__PURE__ */ jsxs("span", {
+											className: "min-w-0",
+											children: [
+												/* @__PURE__ */ jsx("span", {
+													className: "block truncate text-sm font-medium",
+													children: table.name
+												}),
+												/* @__PURE__ */ jsxs("span", {
+													className: "mt-1 block text-xs text-text-secondary",
+													children: [
+														table.rowCount,
+														" ",
+														tr("fluidgrids.dataTables.rows", "rows"),
+														" ·",
+														" ",
+														table.columns.length,
+														" ",
+														tr("fluidgrids.dataTables.columns", "columns")
+													]
+												}),
+												(tagsById[table.id] ?? []).length > 0 && /* @__PURE__ */ jsx("span", {
+													className: "mt-1.5 flex flex-wrap gap-1",
+													children: (tagsById[table.id] ?? []).map((assignment) => /* @__PURE__ */ jsx(TagBadge, {
+														id: assignment.tagId,
+														label: tagLabel(assignment),
+														color: assignment.tagInfo?.color ?? void 0,
+														size: "sm"
+													}, assignment.tagId))
+												})
+											]
+										}), /* @__PURE__ */ jsx(Table2, {
+											className: "mt-0.5 size-4 shrink-0",
+											"aria-hidden": "true"
+										})]
+									}, table.id))
+								]
+							})]
+						}),
+						error && !selectedTable && /* @__PURE__ */ jsx(Card, {
+							className: "border-border-secondary",
+							children: /* @__PURE__ */ jsxs(CardContent, {
+								className: "p-6 text-sm text-text-secondary",
+								children: [/* @__PURE__ */ jsx("p", { children: error.message }), /* @__PURE__ */ jsxs(Button$1, {
+									className: "mt-4",
+									variant: "outline",
+									onClick: () => void refresh(),
+									children: [/* @__PURE__ */ jsx(RefreshCw, {
+										className: "mr-2 size-4",
+										"aria-hidden": "true"
+									}), tr("fluidgrids.dataTables.retry", "Try again")]
+								})]
+							})
+						}),
+						!error && !selectedTable && !loading && /* @__PURE__ */ jsx(Card, {
+							className: "border-border-secondary",
+							children: /* @__PURE__ */ jsxs(CardContent, {
+								className: "flex min-h-[22rem] flex-col items-center justify-center p-6 text-center",
+								children: [
+									/* @__PURE__ */ jsx(Database, {
+										className: "mb-3 size-10 text-text-secondary",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ jsx("h2", {
+										className: "text-lg font-semibold text-text-primary",
+										children: tr("fluidgrids.dataTables.selectTitle", "Select a data table")
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "mt-1 max-w-sm text-sm text-text-secondary",
+										children: tr("fluidgrids.dataTables.selectDescription", "Choose a table to view and edit its rows, or create your first table.")
+									})
+								]
+							})
+						}),
+						selectedTable && /* @__PURE__ */ jsx("div", {
+							className: "min-w-0",
+							children: /* @__PURE__ */ jsx(TableRowsPanel, {
+								table: selectedTable,
+								onTableChanged: refresh,
+								onEditTable: () => {
+									setEditingTable(selectedTable);
+									setTableDialogOpen(true);
+								},
+								onDeleteTable: handleDeleteTable,
+								deletingTable: deleting,
+								onTagsChanged: handleTagsChanged
+							}, selectedTable.id)
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx(TableFormDialog, {
+			open: tableDialogOpen,
+			table: editingTable,
+			onOpenChange: setTableDialogOpen,
+			onSaved: handleTableSaved
+		})]
+	});
+}
+
+export { rowsToCsv as a, useDataTables as c, useInsertDataTableRow as d, useUpdateDataTable as f, parseCsv as i, useDeleteDataTable as l, DataTablesPage_exports as n, useCreateDataTable as o, useUpdateDataTableRow as p, csvToRows as r, useDataTableRows as s, DataTablesPage as t, useDeleteDataTableRows as u };