@burdenoff/fluidgrids-fe-sdk 2026.1112.6 → 2026.1112.7

package/dist/DataTablesPage-0U89KNBt.js

@@ -0,0 +1,2880 @@
+"use client";
+import { t as __exportAll } from "./rolldown-runtime-hDbaFkMy.js";
+import { t as EntityTagPicker } from "./EntityTagPicker-dxfzv8aO.js";
+import { t as TagFilterSelect } from "./TagFilterSelect-CqhxcDjh.js";
+import { _ as throwIfResultError, m as describeOperationError, n as getFluidGridsClient } from "./client-C9XSzSXr.js";
+import { a as useDataTableTagOverlay, n as tagLabel } from "./useEntityTags-D5C0tdLs.js";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import { i as useOpenRequest, n as ACTION_PARAM_VALUES, r as useActionParam } from "./useActionParam-B0ebTZmg.js";
+import { i as SdkPermissionButton, s as useFluidGridsPermission, t as FLUIDGRIDS_PERMISSIONS } from "./constants-dcxg6zG6.js";
+import { t as FluidGridsDocsLink } from "./FluidGridsDocsLink-JxkBpOeb.js";
+import { n as useNavigationV2 } from "./useNavigationV2-C2WeqN7d.js";
+import { t as ConfirmActionDialog } from "./ConfirmActionDialog-D9Pir3bc.js";
+import { n as TechnicalDetails, r as Disclosure, t as RunActionsMenu } from "./RunActionsMenu-DmO14hEE.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router";
+import { Fragment as Fragment$1, 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, Switch, 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));
+}
+/** A workspace holds at most 100 tables and the service serves at most 100 per request. */
+const DATA_TABLES_LIST_LIMIT = 100;
+/** 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: 100,
+					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/values.ts
+const TRUE_WORDS = /* @__PURE__ */ new Set([
+	"true",
+	"yes",
+	"1"
+]);
+const FALSE_WORDS = /* @__PURE__ */ new Set([
+	"false",
+	"no",
+	"0"
+]);
+/** "true"/"yes"/"1" and "false"/"no"/"0", any case; `undefined` for anything else. */
+function parseBooleanText(value) {
+	const normalized = value.trim().toLowerCase();
+	if (TRUE_WORDS.has(normalized)) return true;
+	if (FALSE_WORDS.has(normalized)) return false;
+}
+const DATE_ONLY$1 = /^\d{4}-\d{2}-\d{2}$/;
+const HAS_ZONE = /(?:Z|[+-]\d{2}:?\d{2})$/i;
+/**
+* A date as the service stores it. A date without a time stays as typed; a
+* date with a time but no zone is read in the viewer's zone and saved with the
+* zone (UTC) so it means the same moment for everyone. Throws on a value that
+* is not a date.
+*/
+function normalizeDateValue(value) {
+	const trimmed = value.trim();
+	if (DATE_ONLY$1.test(trimmed)) {
+		if (Number.isNaN(Date.parse(`${trimmed}T00:00:00Z`))) throw new Error(`Expected a date, got "${value}"`);
+		return trimmed;
+	}
+	const parsed = new Date(trimmed);
+	if (Number.isNaN(parsed.getTime())) throw new Error(`Expected a date, got "${value}"`);
+	return HAS_ZONE.test(trimmed) ? trimmed : parsed.toISOString();
+}
+function pad(number) {
+	return String(number).padStart(2, "0");
+}
+/** A stored date as a `datetime-local` input value (viewer's zone); "" if unreadable. */
+function dateToLocalInput(value) {
+	if (typeof value !== "string" || value === "") return "";
+	const text = DATE_ONLY$1.test(value) ? `${value}T00:00` : value;
+	const parsed = new Date(text);
+	if (Number.isNaN(parsed.getTime())) return "";
+	return `${parsed.getFullYear()}-${pad(parsed.getMonth() + 1)}-${pad(parsed.getDate())}T${pad(parsed.getHours())}:${pad(parsed.getMinutes())}`;
+}
+/** The text a row-form input starts with for a stored value. */
+function asFormValue(value, type) {
+	if (value === null || value === void 0) return "";
+	if (type === "JSON") return JSON.stringify(value, null, 2);
+	if (type === "DATE") return dateToLocalInput(value);
+	return String(value);
+}
+/** The value a row-form input saves; throws a plain message when it is not valid. */
+function parseFormValue(value, type) {
+	if (type === "STRING") return value;
+	if (value.trim() === "") return null;
+	if (type === "DATE") return normalizeDateValue(value);
+	if (type === "NUMBER") {
+		const number = Number(value);
+		if (!Number.isFinite(number)) throw new Error(`"${value}" is not a number`);
+		return number;
+	}
+	if (type === "BOOLEAN") {
+		const parsed = parseBooleanText(value);
+		if (parsed === void 0) throw new Error("Boolean values must be true or false");
+		return parsed;
+	}
+	try {
+		return JSON.parse(value);
+	} catch {
+		throw new Error("JSON values must contain valid JSON");
+	}
+}
+
+// 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 parsed = parseBooleanText(value);
+			if (parsed === void 0) throw new Error(`Expected true or false, got "${value}"`);
+			return parsed;
+		}
+		case "JSON": try {
+			return JSON.parse(value);
+		} catch {
+			throw new Error(`Expected valid JSON, got "${value}"`);
+		}
+		case "DATE": return normalizeDateValue(value);
+		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 columnByLabel = new Map(columns.map((column) => [column.label, column]));
+	const seen = /* @__PURE__ */ new Set();
+	const headerColumns = headers.map((header) => {
+		const column = columnByKey.get(header) ?? columnByLabel.get(header);
+		if (!header || column && seen.has(column.key)) throw new Error("CSV must have unique, non-empty column headers");
+		if (!column) throw new Error(`CSV contains an unknown column "${header}"`);
+		seen.add(column.key);
+		return column;
+	});
+	return parsed.slice(1).map((values, rowIndex) => {
+		const row = {};
+		headerColumns.forEach((column, columnIndex) => {
+			const rawValue = values[columnIndex] ?? "";
+			try {
+				row[column.key] = 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/columns.ts
+/** "Contact e-mail" -> "contact_e_mail"; never empty, never starts with a digit. */
+function deriveColumnKey(name) {
+	const base = name.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+	if (base === "") return "column";
+	return /^[0-9]/.test(base) ? `column_${base}` : base;
+}
+/** `key`, or `key_2`, `key_3`… when `taken` already holds it. */
+function uniqueColumnKey(key, taken) {
+	if (!taken.has(key)) return key;
+	let suffix = 2;
+	while (taken.has(`${key}_${suffix}`)) suffix += 1;
+	return `${key}_${suffix}`;
+}
+/**
+* What a save would change that a workflow can notice: the table's name, and
+* columns removed, renamed (key) or given another kind of data. Columns are
+* matched by their position in `originalKeys` (the key each existing column
+* had when the editor opened), so a key edit is not read as remove + add.
+*/
+function describeSchemaChanges(table, next) {
+	const changes = [];
+	if (next.name.trim() !== table.name) changes.push({
+		kind: "renameTable",
+		from: table.name,
+		to: next.name.trim()
+	});
+	const kept = /* @__PURE__ */ new Set();
+	const beforeByKey = new Map(table.columns.map((c) => [c.key, c]));
+	for (const column of next.columns) {
+		if (column.originalKey === void 0) continue;
+		kept.add(column.originalKey);
+		const before = beforeByKey.get(column.originalKey);
+		if (!before) continue;
+		if (before.key !== column.key.trim()) changes.push({
+			kind: "changeKey",
+			from: before.key,
+			to: column.key.trim(),
+			label: before.label
+		});
+		if (before.type !== column.type) changes.push({
+			kind: "changeType",
+			key: before.key,
+			label: before.label,
+			from: before.type,
+			to: column.type
+		});
+	}
+	for (const before of table.columns) if (!kept.has(before.key)) changes.push({
+		kind: "removeColumn",
+		key: before.key,
+		label: before.label
+	});
+	return changes;
+}
+let columnUid = 0;
+function nextColumnUid() {
+	columnUid += 1;
+	return `column-${columnUid}`;
+}
+/** The editor's columns for a table (or one blank column for a new table). */
+function toEditableColumns(table, blank) {
+	if (!table) return [{
+		...blank,
+		uid: nextColumnUid()
+	}];
+	return table.columns.map((column) => ({
+		key: column.key,
+		label: column.label,
+		type: column.type,
+		required: column.required,
+		...column.defaultValue !== void 0 ? { defaultValue: column.defaultValue } : {},
+		uid: nextColumnUid(),
+		originalKey: column.key,
+		keyEdited: true
+	}));
+}
+/** Strip the editor-only fields and trim names before saving. */
+function toColumnInputs(columns) {
+	return columns.map((column) => ({
+		key: column.key.trim(),
+		label: column.label.trim(),
+		type: column.type,
+		...column.required !== void 0 ? { required: column.required } : {},
+		...column.defaultValue !== void 0 ? { defaultValue: column.defaultValue } : {}
+	}));
+}
+
+// src/modules/data-tables/utils/format.ts
+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);
+}
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+const DATE_TIME_FORMAT = new Intl.DateTimeFormat(void 0, {
+	dateStyle: "medium",
+	timeStyle: "short"
+});
+const DATE_FORMAT = new Intl.DateTimeFormat(void 0, {
+	dateStyle: "medium",
+	timeZone: "UTC"
+});
+/** A cell as people read it: dates in their own zone, Yes / No as words. */
+function formatCell(value, type, words) {
+	if (type === "BOOLEAN" && typeof value === "boolean") return value ? words.yes : words.no;
+	if (type === "DATE" && typeof value === "string") {
+		const parsed = new Date(value);
+		if (Number.isNaN(parsed.getTime())) return value;
+		return DATE_ONLY.test(value) ? DATE_FORMAT.format(parsed) : DATE_TIME_FORMAT.format(parsed);
+	}
+	return formatValue(value);
+}
+/**
+* Order two cells of one column (`direction` 1 = A to Z, -1 = Z to A). Empty
+* cells sort last either way.
+*/
+function compareCells(a, b, type, direction = 1) {
+	const aEmpty = a === null || a === void 0 || a === "";
+	const bEmpty = b === null || b === void 0 || b === "";
+	if (aEmpty || bEmpty) return Number(aEmpty) - Number(bEmpty);
+	return direction * compareFilled(a, b, type);
+}
+function compareFilled(a, b, type) {
+	if (type === "NUMBER" && typeof a === "number" && typeof b === "number") return a - b;
+	if (type === "BOOLEAN") return Number(a === true) - Number(b === true);
+	if (type === "DATE") {
+		const diff = Date.parse(String(a)) - Date.parse(String(b));
+		if (!Number.isNaN(diff)) return diff;
+	}
+	return formatValue(a).localeCompare(formatValue(b), void 0, {
+		numeric: true,
+		sensitivity: "base"
+	});
+}
+
+// src/modules/data-tables/components/RowFormDialogV2.tsx
+/**
+* Add / Edit row dialog for Navigation v2 (BOFF-11849).
+*
+* The label is just the column name; a Yes / No column is a switch, a Date
+* column a date-and-time picker, and a JSON column sits under "More options"
+* (open from the start when it is required or already has a value). A new row
+* starts from each column's starting value. Every value lives in this dialog's
+* state, so closing "More options" never loses what was typed.
+*/
+/** The values a row form starts with: the row's, or each column's starting value. */
+function initialValues(table, row) {
+	const next = {};
+	for (const column of table?.columns ?? []) next[column.key] = asFormValue(row ? row.data[column.key] : column.defaultValue, column.type);
+	return next;
+}
+/**
+* The shell only mounts the form while the dialog is open, and the form is
+* keyed by the table and row, so reopening (or editing another row) always
+* starts from fresh values.
+*/
+function RowFormDialogV2({ open, table, row, onOpenChange, onSaved }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			className: "max-h-[90vh] max-w-2xl overflow-y-auto",
+			"data-testid": "row-form-dialog",
+			children: /* @__PURE__ */ jsx(RowFormBody, {
+				table,
+				row,
+				onOpenChange,
+				onSaved
+			}, `${table?.id ?? "none"}:${row?.id ?? "new"}`)
+		})
+	});
+}
+function RowFormBody({ table, row, onOpenChange, onSaved }) {
+	const tr = useTr();
+	const { insertDataTableRow, loading: inserting } = useInsertDataTableRow();
+	const { updateDataTableRow, loading: updating } = useUpdateDataTableRow();
+	const [values, setValues] = useState(() => initialValues(table, row));
+	const editing = row !== null;
+	const saving = inserting || updating;
+	const setValue = useCallback((key, value) => {
+		setValues((current) => ({
+			...current,
+			[key]: value
+		}));
+	}, []);
+	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
+	]);
+	const everydayColumns = table?.columns.filter((c) => c.type !== "JSON") ?? [];
+	const jsonColumns = table?.columns.filter((c) => c.type === "JSON") ?? [];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: editing ? tr("fluidgrids.dataTables.editRow", "Edit row") : tr("fluidgrids.dataTables.addRow", "Add row") }) }),
+		table && /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4 py-2",
+			children: [everydayColumns.map((column) => {
+				const id = `data-table-row-${column.key}`;
+				const label = /* @__PURE__ */ jsxs(Label, {
+					htmlFor: id,
+					children: [column.label, column.required && /* @__PURE__ */ jsx("span", {
+						className: "ml-1 text-text-secondary",
+						children: "*"
+					})]
+				});
+				if (column.type === "BOOLEAN") return /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-3",
+					children: [label, /* @__PURE__ */ jsx(Switch, {
+						id,
+						checked: values[column.key] === "true",
+						onCheckedChange: (checked) => setValue(column.key, checked ? "true" : "false")
+					})]
+				}, column.key);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1.5",
+					children: [label, /* @__PURE__ */ jsx(Input, {
+						id,
+						type: column.type === "NUMBER" ? "number" : column.type === "DATE" ? "datetime-local" : "text",
+						value: values[column.key] ?? "",
+						onChange: (event) => setValue(column.key, event.target.value)
+					})]
+				}, column.key);
+			}), jsonColumns.length > 0 && /* @__PURE__ */ jsx(Disclosure, {
+				closedLabel: tr("fluidgrids.dataTables.moreOptions", "More options"),
+				openLabel: tr("fluidgrids.dataTables.fewerOptions", "Fewer options"),
+				defaultOpen: jsonColumns.some((c) => c.required || (row ? row.data[c.key] : c.defaultValue) != null),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "space-y-4",
+					children: jsonColumns.map((column) => /* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ jsxs(Label, {
+							htmlFor: `data-table-row-${column.key}`,
+							children: [column.label, column.required && /* @__PURE__ */ jsx("span", {
+								className: "ml-1 text-text-secondary",
+								children: "*"
+							})]
+						}), /* @__PURE__ */ jsx(Textarea, {
+							id: `data-table-row-${column.key}`,
+							value: values[column.key] ?? "",
+							onChange: (event) => setValue(column.key, event.target.value),
+							rows: 4,
+							placeholder: "{ }"
+						})]
+					}, 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")
+		})] })
+	] });
+}
+
+// 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/components/RowsPanelHeaderV2.tsx
+/**
+* The top of the selected table's panel for Navigation v2 (BOFF-11849).
+*
+* Level 1: the table's name and description, its row count, and one action,
+* "Add row". Level 2: a "⋯" menu (Edit table, Delete table, import and
+* download as a spreadsheet, select several rows), "More options" (tags) and
+* "Show technical details" (table ID with Copy, column count, size, row IDs,
+* rows per page). Menu items a person has no permission for are left out.
+*/
+function RowsPanelHeaderV2({ table, total, importProgress, exporting, deletingRows, deletingTable, selectMode, onSelectModeChange, selectedCount, showRowIds, onShowRowIdsChange, pageSize, onPageSizeChange, onAddRow, onEditTable, onDeleteTable, onImport, onExport, onDeleteSelected, onTagsChanged }) {
+	const tr = useTr();
+	const canTag = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.WORKFLOW_UPDATE).allowed;
+	const canEditTable = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.DATA_TABLE_UPDATE).allowed;
+	const canDeleteTable = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.DATA_TABLE_DELETE).allowed;
+	const canAddRows = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.DATA_TABLE_ROW_CREATE).allowed;
+	const canDeleteRows = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.DATA_TABLE_ROW_DELETE).allowed;
+	const copyId = useCallback(async () => {
+		try {
+			await navigator.clipboard.writeText(table.id);
+			toast.success(tr("fluidgrids.dataTables.idCopied", "Table ID copied"));
+		} catch {
+			toast.error(tr("fluidgrids.dataTables.copyFailed", "Could not copy. Select the text and copy it yourself."));
+		}
+	}, [table.id, tr]);
+	const items = [];
+	if (canEditTable) items.push({
+		id: "edit-table",
+		label: tr("fluidgrids.dataTables.editTable", "Edit table"),
+		icon: "mdi:pencil-outline",
+		onSelect: onEditTable
+	});
+	if (canAddRows) items.push({
+		id: "import",
+		label: importProgress ? tr("fluidgrids.dataTables.importing", `Importing ${importProgress.done} / ${importProgress.total}…`) : tr("fluidgrids.dataTables.import", "Import from spreadsheet (CSV)"),
+		icon: "mdi:tray-arrow-up",
+		onSelect: onImport,
+		disabled: importProgress !== null
+	});
+	items.push({
+		id: "export",
+		label: exporting ? tr("fluidgrids.dataTables.exporting", "Exporting…") : tr("fluidgrids.dataTables.export", "Download as CSV"),
+		icon: "mdi:tray-arrow-down",
+		onSelect: onExport,
+		disabled: exporting
+	});
+	if (canDeleteTable) items.push({
+		id: "delete-table",
+		label: deletingTable ? tr("fluidgrids.dataTables.deleting", "Deleting…") : tr("fluidgrids.dataTables.deleteTable", "Delete table"),
+		icon: "mdi:trash-can-outline",
+		onSelect: onDeleteTable,
+		disabled: deletingTable,
+		destructive: true
+	});
+	const toggles = canDeleteRows ? [{
+		id: "select-rows",
+		label: tr("fluidgrids.dataTables.selectSeveral", "Select several rows"),
+		checked: selectMode,
+		onCheckedChange: onSelectModeChange
+	}] : [];
+	return /* @__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__ */ jsxs("div", {
+					className: "flex shrink-0 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: onAddRow,
+							disabled: importProgress !== null,
+							children: [/* @__PURE__ */ jsx(Plus, {
+								className: "mr-1.5 size-4",
+								"aria-hidden": "true"
+							}), tr("fluidgrids.dataTables.addRow", "Add row")]
+						})
+					}), /* @__PURE__ */ jsx(RunActionsMenu, {
+						items,
+						toggles,
+						label: tr("fluidgrids.dataTables.moreActions", "More table actions"),
+						"data-testid": "table-actions-menu"
+					})]
+				})]
+			}),
+			/* @__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")
+					]
+				}), selectMode && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					"aria-live": "polite",
+					children: tr("fluidgrids.dataTables.selectedCount", "{{count}} selected", { count: selectedCount })
+				}), selectedCount > 0 && canDeleteRows && /* @__PURE__ */ jsxs(Button$1, {
+					variant: "outline",
+					size: "sm",
+					className: "whitespace-nowrap",
+					onClick: onDeleteSelected,
+					disabled: deletingRows,
+					"data-testid": "delete-selected-rows",
+					children: [/* @__PURE__ */ jsx(Trash2, {
+						className: "mr-1.5 size-4",
+						"aria-hidden": "true"
+					}), deletingRows ? tr("fluidgrids.dataTables.deleting", "Deleting…") : tr("fluidgrids.dataTables.deleteSelected", `Delete ${selectedCount} selected`)]
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx(Disclosure, {
+					closedLabel: tr("fluidgrids.dataTables.moreOptions", "More options"),
+					openLabel: tr("fluidgrids.dataTables.fewerOptions", "Fewer options"),
+					"data-testid": "table-more-options",
+					children: /* @__PURE__ */ jsx("div", {
+						"data-testid": "data-table-tags",
+						children: /* @__PURE__ */ jsx(EntityTagPicker, {
+							entityType: "FLUIDGRIDS_DATA_TABLE",
+							entityId: table.id,
+							readOnly: !canTag,
+							onChange: onTagsChanged
+						})
+					})
+				}), /* @__PURE__ */ jsx(TechnicalDetails, {
+					"data-testid": "table-technical-details",
+					children: /* @__PURE__ */ jsxs("dl", {
+						className: "grid gap-2 text-xs text-text-secondary sm:grid-cols-[auto_1fr] sm:items-center",
+						children: [
+							/* @__PURE__ */ jsx("dt", { children: tr("fluidgrids.dataTables.tableId", "Table ID") }),
+							/* @__PURE__ */ jsxs("dd", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [/* @__PURE__ */ jsx("code", {
+									"data-testid": "table-id",
+									children: table.id
+								}), /* @__PURE__ */ jsx(Button$1, {
+									variant: "outline",
+									size: "sm",
+									onClick: () => void copyId(),
+									"data-testid": "table-id-copy",
+									children: tr("fluidgrids.dataTables.copyId", "Copy")
+								})]
+							}),
+							/* @__PURE__ */ jsx("dt", { children: tr("fluidgrids.dataTables.columns", "columns") }),
+							/* @__PURE__ */ jsx("dd", { children: table.columns.length }),
+							/* @__PURE__ */ jsx("dt", { children: tr("fluidgrids.dataTables.size", "Size") }),
+							/* @__PURE__ */ jsx("dd", { children: formatBytes(table.sizeBytes) }),
+							/* @__PURE__ */ jsx("dt", { children: tr("fluidgrids.dataTables.rowsPerPage", "Rows per page") }),
+							/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("select", {
+								className: "h-8 rounded-md border border-input bg-background px-2 text-xs text-text-primary",
+								value: pageSize,
+								onChange: (event) => onPageSizeChange(Number(event.target.value)),
+								"aria-label": tr("fluidgrids.dataTables.rowsPerPage", "Rows per page"),
+								children: ROW_PAGE_SIZES.map((size) => /* @__PURE__ */ jsx("option", {
+									value: size,
+									children: size
+								}, size))
+							}) }),
+							/* @__PURE__ */ jsx("dt", { children: tr("fluidgrids.dataTables.rowId", "Row") }),
+							/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsxs("label", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "checkbox",
+									checked: showRowIds,
+									onChange: (event) => onShowRowIdsChange(event.target.checked)
+								}), tr("fluidgrids.dataTables.showRowIds", "Show row IDs in the table")]
+							}) })
+						]
+					})
+				})]
+			})
+		]
+	});
+}
+
+// src/modules/data-tables/utils/kinds.ts
+function kindLabel(tr, type) {
+	switch (type) {
+		case "STRING": return tr("fluidgrids.dataTables.kind.text", "Text");
+		case "NUMBER": return tr("fluidgrids.dataTables.kind.number", "Number");
+		case "BOOLEAN": return tr("fluidgrids.dataTables.kind.yesNo", "Yes / No");
+		case "DATE": return tr("fluidgrids.dataTables.kind.date", "Date");
+		case "JSON": return tr("fluidgrids.dataTables.kind.json", "JSON");
+	}
+}
+
+// src/modules/data-tables/components/TableNameFields.tsx
+/** The Name and Description fields shared by both table dialogs. */
+function TableNameFields({ name, description, onNameChange, onDescriptionChange }) {
+	const tr = useTr();
+	return /* @__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) => onNameChange(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) => onDescriptionChange(event.target.value),
+				placeholder: tr("fluidgrids.dataTables.descriptionPlaceholder", "Optional")
+			})]
+		})]
+	});
+}
+
+// src/modules/data-tables/components/TableFormDialogV2.tsx
+/**
+* New / Edit table dialog for Navigation v2 (BOFF-11849).
+*
+* Plain on top: a column has a name and a kind of data (Text, Number, Yes / No,
+* Date). The name a workflow uses for the column is worked out from its name;
+* "Must be filled in", the starting value, saving as JSON and the raw name sit
+* under each column's "More options". Before a save that renames the table,
+* removes a column or changes a column's name-in-workflows or kind, a warning
+* says what could stop working.
+*/
+/** The kinds people choose from; JSON is offered only to a column that already is JSON. */
+const EVERYDAY_KINDS = [
+	"STRING",
+	"NUMBER",
+	"BOOLEAN",
+	"DATE"
+];
+function blankColumn(index) {
+	return {
+		key: `column_${index}`,
+		label: `Column ${index}`,
+		type: "STRING",
+		required: false
+	};
+}
+function withDefaultText(column) {
+	return {
+		...column,
+		defaultText: column.defaultValue === void 0 ? "" : asFormValue(column.defaultValue, column.type)
+	};
+}
+function changeText(tr, change) {
+	switch (change.kind) {
+		case "renameTable": return tr("fluidgrids.dataTables.change.renameTable", "The table will be renamed from \"{{from}}\" to \"{{to}}\".", {
+			from: change.from,
+			to: change.to
+		});
+		case "removeColumn": return tr("fluidgrids.dataTables.change.removeColumn", "The column \"{{label}}\" will be removed, along with what is in it.", { label: change.label });
+		case "changeKey": return tr("fluidgrids.dataTables.change.changeKey", "\"{{label}}\" will be used in workflows as \"{{to}}\" instead of \"{{from}}\".", {
+			label: change.label,
+			from: change.from,
+			to: change.to
+		});
+		case "changeType": return tr("fluidgrids.dataTables.change.changeType", "\"{{label}}\" will change from {{from}} to {{to}}.", {
+			label: change.label,
+			from: kindLabel(tr, change.from),
+			to: kindLabel(tr, change.to)
+		});
+	}
+}
+/**
+* The shell only mounts the form while the dialog is open, and the form is
+* keyed by the table being edited, so reopening always starts fresh.
+*/
+function TableFormDialogV2({ open, table, onOpenChange, onSaved, workflowCount = null }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			className: "max-h-[90vh] max-w-3xl overflow-y-auto",
+			"data-testid": "table-form-dialog",
+			children: /* @__PURE__ */ jsx(TableFormBody, {
+				table,
+				onOpenChange,
+				onSaved,
+				workflowCount
+			}, table?.id ?? "new")
+		})
+	});
+}
+function TableFormBody({ table, onOpenChange, onSaved, workflowCount = null }) {
+	const tr = useTr();
+	const { createDataTable, loading: creating } = useCreateDataTable();
+	const { updateDataTable, loading: updating } = useUpdateDataTable();
+	const [name, setName] = useState(table?.name ?? "");
+	const [description, setDescription] = useState(table?.description ?? "");
+	const [columns, setColumns] = useState(() => toEditableColumns(table, blankColumn(1)).map(withDefaultText));
+	const [pendingChanges, setPendingChanges] = useState(null);
+	const editing = table !== null;
+	const saving = creating || updating;
+	const updateColumn = useCallback((uid, patch) => {
+		setColumns((current) => current.map((column) => column.uid === uid ? {
+			...column,
+			...patch
+		} : column));
+	}, []);
+	/** Typing a column name keeps its workflow name in step until that is edited by hand. */
+	const renameColumn = useCallback((uid, label) => {
+		setColumns((current) => current.map((column) => {
+			if (column.uid !== uid) return column;
+			if (column.keyEdited) return {
+				...column,
+				label
+			};
+			const taken = new Set(current.filter((c) => c.uid !== uid).map((c) => c.key));
+			const derived = label.trim() ? uniqueColumnKey(deriveColumnKey(label), taken) : "";
+			return {
+				...column,
+				label,
+				key: derived
+			};
+		}));
+	}, []);
+	/** The columns as they will be saved, or a plain message why they cannot be. */
+	const buildColumns = useCallback(() => {
+		const resolved = [];
+		const originals = new Map(table?.columns.map((c) => [c.key, c]));
+		for (const column of columns) {
+			const original = column.originalKey === void 0 ? void 0 : originals.get(column.originalKey);
+			const text = (column.defaultText ?? "").trim();
+			const unchanged = original !== void 0 && original.type === column.type && (column.defaultText ?? "") === (original.defaultValue === void 0 ? "" : asFormValue(original.defaultValue, original.type));
+			let next = { ...column };
+			if (!unchanged) {
+				if (text === "") delete next.defaultValue;
+				else try {
+					next = {
+						...next,
+						defaultValue: parseFormValue(text, column.type)
+					};
+				} catch (error) {
+					return tr("fluidgrids.dataTables.startingValueInvalid", "The starting value for \"{{label}}\" is not valid: {{reason}}", {
+						label: column.label.trim() || column.key,
+						reason: error instanceof Error ? error.message : ""
+					});
+				}
+			}
+			resolved.push(next);
+		}
+		return resolved;
+	}, [
+		columns,
+		table,
+		tr
+	]);
+	const save = useCallback(async (resolved) => {
+		const input = {
+			name: name.trim(),
+			description: description.trim() || void 0,
+			columns: toColumnInputs(resolved)
+		};
+		try {
+			const saved = editing ? await updateDataTable(table.id, input) : await createDataTable(input);
+			toast.success(editing ? tr("fluidgrids.dataTables.updated", "Data table updated") : tr("fluidgrids.dataTables.created", "Data table created"));
+			setPendingChanges(null);
+			onSaved(saved);
+			onOpenChange(false);
+		} catch (error) {
+			setPendingChanges(null);
+			toast.error(describeOperationError(error, tr("fluidgrids.dataTables.saveFailed", "Failed to save data table")));
+		}
+	}, [
+		createDataTable,
+		description,
+		editing,
+		name,
+		onOpenChange,
+		onSaved,
+		table,
+		tr,
+		updateDataTable
+	]);
+	const handleSubmit = useCallback(async () => {
+		if (!name.trim()) {
+			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 and give every column a name"));
+			return;
+		}
+		if (new Set(columns.map((column) => column.key.trim())).size !== columns.length) {
+			toast.error(tr("fluidgrids.dataTables.uniqueKeys", "Each column needs a different name."));
+			return;
+		}
+		const resolved = buildColumns();
+		if (typeof resolved === "string") {
+			toast.error(resolved);
+			return;
+		}
+		if (table) {
+			const changes = describeSchemaChanges(table, {
+				name,
+				columns: resolved
+			});
+			if (changes.length > 0) {
+				setPendingChanges(changes);
+				return;
+			}
+		}
+		await save(resolved);
+	}, [
+		buildColumns,
+		columns,
+		name,
+		save,
+		table,
+		tr
+	]);
+	const confirmChanges = useCallback(() => {
+		const resolved = buildColumns();
+		if (typeof resolved === "string") {
+			setPendingChanges(null);
+			toast.error(resolved);
+			return;
+		}
+		save(resolved);
+	}, [buildColumns, save]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: editing ? tr("fluidgrids.dataTables.editTable", "Edit table") : tr("fluidgrids.dataTables.newTable", "New table") }) }),
+		/* @__PURE__ */ jsxs("div", {
+			className: "space-y-5 py-2",
+			children: [/* @__PURE__ */ jsx(TableNameFields, {
+				name,
+				description,
+				onNameChange: setName,
+				onDescriptionChange: setDescription
+			}), /* @__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", "Each column needs a different name.")
+					})] }), /* @__PURE__ */ jsxs(Button$1, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						onClick: () => setColumns((current) => {
+							const taken = new Set(current.map((c) => c.key));
+							const blank = blankColumn(current.length + 1);
+							return [...current, withDefaultText({
+								...blank,
+								key: uniqueColumnKey(blank.key, taken),
+								uid: nextColumnUid()
+							})];
+						}),
+						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__ */ jsx(ColumnEditor, {
+						column,
+						index,
+						canRemove: columns.length > 1,
+						onRename: renameColumn,
+						onChange: updateColumn,
+						onRemove: (uid) => setColumns((current) => current.filter((c) => c.uid !== uid))
+					}, column.uid))
+				})]
+			})]
+		}),
+		/* @__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")
+		})] }),
+		/* @__PURE__ */ jsx(ConfirmActionDialog, {
+			open: pendingChanges !== null,
+			onOpenChange: (next) => {
+				if (!next) setPendingChanges(null);
+			},
+			title: tr("fluidgrids.dataTables.schemaWarningTitle", "Save these changes to the table?"),
+			description: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				"data-testid": "schema-change-warning",
+				children: [/* @__PURE__ */ jsx("p", { children: workflowCount !== null ? tr("fluidgrids.dataTables.schemaWarningCount", "{{count}} workflow(s) use this table, and they may stop working after these changes.", { count: workflowCount }) : tr("fluidgrids.dataTables.schemaWarningIntro", "Workflows that use this table may stop working after these changes.") }), /* @__PURE__ */ jsx("ul", {
+					className: "list-disc space-y-1 pl-5",
+					children: (pendingChanges ?? []).map((change) => {
+						const text = changeText(tr, change);
+						return /* @__PURE__ */ jsx("li", { children: text }, text);
+					})
+				})]
+			}),
+			confirmLabel: tr("fluidgrids.dataTables.schemaWarningConfirm", "Save anyway"),
+			cancelLabel: tr("fluidgrids.dataTables.schemaWarningBack", "Go back"),
+			busy: saving,
+			onConfirm: confirmChanges,
+			"data-testid": "schema-change-dialog"
+		})
+	] });
+}
+function ColumnEditor({ column, index, canRemove, onRename, onChange, onRemove }) {
+	const tr = useTr();
+	const kinds = column.type === "JSON" ? [...EVERYDAY_KINDS, "JSON"] : EVERYDAY_KINDS;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 rounded-md border border-border-secondary p-3",
+		"data-testid": "column-editor",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-2 sm:grid-cols-[1fr_10rem_auto] sm:items-end",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: `data-table-column-label-${column.uid}`,
+							children: tr("fluidgrids.dataTables.label", "Column name")
+						}), /* @__PURE__ */ jsx(Input, {
+							id: `data-table-column-label-${column.uid}`,
+							value: column.label,
+							onChange: (event) => onRename(column.uid, event.target.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: `data-table-column-type-${column.uid}`,
+							children: tr("fluidgrids.dataTables.type", "Kind of data")
+						}), /* @__PURE__ */ jsx("select", {
+							id: `data-table-column-type-${column.uid}`,
+							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) => onChange(column.uid, { type: event.target.value }),
+							children: kinds.map((type) => /* @__PURE__ */ jsx("option", {
+								value: type,
+								children: kindLabel(tr, type)
+							}, type))
+						})]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "justify-self-end rounded p-2 text-text-secondary hover:bg-background-tertiary hover:text-text-primary disabled:opacity-40",
+						onClick: () => onRemove(column.uid),
+						disabled: !canRemove,
+						title: tr("fluidgrids.dataTables.removeColumn", "Remove column"),
+						"aria-label": `${tr("fluidgrids.dataTables.removeColumn", "Remove column")} ${index + 1}`,
+						children: /* @__PURE__ */ jsx(Trash2, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-text-secondary",
+				"data-testid": "column-key-hint",
+				children: [
+					tr("fluidgrids.dataTables.key", "Used in workflows as"),
+					":",
+					" ",
+					/* @__PURE__ */ jsx("code", { children: column.key || "—" })
+				]
+			}),
+			/* @__PURE__ */ jsx(Disclosure, {
+				closedLabel: tr("fluidgrids.dataTables.moreOptions", "More options"),
+				openLabel: tr("fluidgrids.dataTables.fewerOptions", "Fewer options"),
+				defaultOpen: column.required === true || column.type === "JSON" || (column.defaultText ?? "") !== "",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "grid gap-3 sm:grid-cols-2",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: `data-table-column-key-${column.uid}`,
+								children: tr("fluidgrids.dataTables.key", "Used in workflows as")
+							}), /* @__PURE__ */ jsx(Input, {
+								id: `data-table-column-key-${column.uid}`,
+								value: column.key,
+								onChange: (event) => onChange(column.uid, {
+									key: event.target.value,
+									keyEdited: true
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: `data-table-column-default-${column.uid}`,
+								children: tr("fluidgrids.dataTables.defaultValue", "Starting value")
+							}), /* @__PURE__ */ jsx(Input, {
+								id: `data-table-column-default-${column.uid}`,
+								value: column.defaultText ?? "",
+								onChange: (event) => onChange(column.uid, { defaultText: event.target.value }),
+								placeholder: tr("fluidgrids.dataTables.defaultValueHint", "Filled in when you add a row")
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex items-center gap-2 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: column.required ?? false,
+								onChange: (event) => onChange(column.uid, { required: event.target.checked })
+							}), tr("fluidgrids.dataTables.required", "Must be filled in")]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex items-center gap-2 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: column.type === "JSON",
+								onChange: (event) => onChange(column.uid, { type: event.target.checked ? "JSON" : "STRING" })
+							}), tr("fluidgrids.dataTables.saveAsJson", "Save values as JSON (for nested data)")]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+
+// 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 columnTypeLabel(type) {
+	return type === "JSON" ? "JSON" : type[0] + type.slice(1).toLowerCase();
+}
+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(toEditableColumns(table, 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 = toColumnInputs(columns);
+		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__ */ jsx(TableNameFields, {
+						name,
+						description,
+						onNameChange: setName,
+						onDescriptionChange: setDescription
+					}), /* @__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),
+									uid: nextColumnUid()
+								}]),
+								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.uid))
+						})]
+					})]
+				}),
+				/* @__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 v2 = useNavigationV2();
+	const { allowed: canTag } = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.WORKFLOW_UPDATE);
+	const canEditRows = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.DATA_TABLE_ROW_UPDATE).allowed;
+	const canDeleteRows = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.DATA_TABLE_ROW_DELETE).allowed;
+	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 [selectMode, setSelectMode] = useState(false);
+	const [showRowIds, setShowRowIds] = useState(false);
+	const [rowSearch, setRowSearch] = useState("");
+	const [sort, setSort] = useState(null);
+	const [pendingRowDelete, setPendingRowDelete] = useState(null);
+	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 performDeleteRows = useCallback(async (ids) => {
+		try {
+			const affected = await deleteDataTableRows(table.id, ids);
+			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,
+		table.id,
+		tr
+	]);
+	const handleDeleteRows = useCallback(async () => {
+		if (selectedIds.size === 0) return;
+		if (v2) {
+			setPendingRowDelete([...selectedIds]);
+			return;
+		}
+		if (!window.confirm(tr("fluidgrids.dataTables.confirmDeleteRows", `Delete ${selectedIds.size} selected row(s)?`))) return;
+		await performDeleteRows([...selectedIds]);
+	}, [
+		performDeleteRows,
+		selectedIds,
+		tr,
+		v2
+	]);
+	const confirmRowDelete = useCallback(async () => {
+		const ids = pendingRowDelete;
+		if (!ids) return;
+		await performDeleteRows(ids);
+		setPendingRowDelete(null);
+	}, [pendingRowDelete, performDeleteRows]);
+	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;
+		const insertedIds = [];
+		try {
+			const importedRows = csvToRows(await file.text(), table.columns);
+			setImportProgress({
+				done: 0,
+				total: importedRows.length
+			});
+			for (const data of importedRows) {
+				const added = await insertDataTableRow(table.id, data);
+				if (added) insertedIds.push(added.id);
+				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"));
+			const undone = inserted > 0 && insertedIds.length === inserted ? await deleteDataTableRows(table.id, insertedIds).then(() => true, () => false) : false;
+			toast.error(inserted === 0 ? reason : undone ? tr("fluidgrids.dataTables.importRolledBack", "Import failed, so none of its rows were added: {{reason}}", { reason }) : tr("fluidgrids.dataTables.importPartial", `Import stopped after ${inserted} row(s): ${reason}`));
+		} finally {
+			setImportProgress(null);
+			setPage(0);
+			await refetch();
+			onTableChanged();
+		}
+	}, [
+		deleteDataTableRows,
+		insertDataTableRow,
+		onTableChanged,
+		refetch,
+		table.columns,
+		table.id,
+		tr
+	]);
+	const bodyColumnCount = table.columns.length + 1 + Number(!v2 || selectMode) + Number(!v2 || showRowIds);
+	const yesNo = {
+		yes: tr("fluidgrids.dataTables.yes", "Yes"),
+		no: tr("fluidgrids.dataTables.no", "No")
+	};
+	const displayRows = useMemo(() => {
+		if (!v2) return rows;
+		const needle = rowSearch.trim().toLowerCase();
+		const matching = needle ? rows.filter((row) => table.columns.some((column) => formatValue(row.data[column.key]).toLowerCase().includes(needle))) : rows;
+		const sortColumn = sort ? table.columns.find((column) => column.key === sort.key) : void 0;
+		if (!sort || !sortColumn) return matching;
+		return [...matching].sort((a, b) => compareCells(a.data[sortColumn.key], b.data[sortColumn.key], sortColumn.type, sort.direction));
+	}, [
+		rowSearch,
+		rows,
+		sort,
+		table.columns,
+		v2
+	]);
+	const toggleSort = useCallback((key) => {
+		setSort((current) => {
+			if (!current || current.key !== key) return {
+				key,
+				direction: 1
+			};
+			return current.direction === 1 ? {
+				key,
+				direction: -1
+			} : null;
+		});
+	}, []);
+	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: [
+			v2 && /* @__PURE__ */ jsx("input", {
+				ref: fileInputRef,
+				type: "file",
+				accept: ".csv,text/csv",
+				className: "hidden",
+				"aria-label": tr("fluidgrids.dataTables.import", "Import from spreadsheet (CSV)"),
+				onChange: handleImport
+			}),
+			v2 ? /* @__PURE__ */ jsx(RowsPanelHeaderV2, {
+				table,
+				total,
+				importProgress,
+				exporting,
+				deletingRows: deleting,
+				deletingTable,
+				selectMode,
+				onSelectModeChange: (on) => {
+					setSelectMode(on);
+					if (!on) setSelectedIds(/* @__PURE__ */ new Set());
+				},
+				selectedCount: selectedIds.size,
+				showRowIds,
+				onShowRowIdsChange: setShowRowIds,
+				pageSize,
+				onPageSizeChange: (size) => {
+					setPageSize(size);
+					setPage(0);
+				},
+				onAddRow: openNewRow,
+				onEditTable,
+				onDeleteTable,
+				onImport: () => fileInputRef.current?.click(),
+				onExport: handleExport,
+				onDeleteSelected: handleDeleteRows,
+				onTagsChanged
+			}) : /* @__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",
+								"aria-label": tr("fluidgrids.dataTables.import", "Import CSV"),
+								onChange: handleImport
+							}),
+							/* @__PURE__ */ jsxs(Button$1, {
+								variant: "outline",
+								size: "sm",
+								className: "whitespace-nowrap",
+								onClick: handleExport,
+								disabled: 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: v2 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", { children: tr("fluidgrids.dataTables.rowsLoadFailed", "We couldn't load the rows. Try again in a moment.") }), /* @__PURE__ */ jsx(TechnicalDetails, {
+							className: "mt-2",
+							children: /* @__PURE__ */ jsx("code", {
+								className: "break-words text-xs",
+								children: error.message
+							})
+						})] }) : error.message
+					}),
+					v2 && (rows.length > 0 || rowSearch !== "") && /* @__PURE__ */ jsxs("div", {
+						className: "relative mx-4 mt-4 max-w-sm",
+						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: rowSearch,
+							onChange: (event) => setRowSearch(event.target.value),
+							placeholder: tr("fluidgrids.dataTables.searchRows", "Search this page of rows"),
+							"aria-label": tr("fluidgrids.dataTables.searchRows", "Search this page of rows"),
+							"data-testid": "row-search"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "overflow-x-auto",
+						children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+							(!v2 || selectMode) && /* @__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")
+								})
+							}),
+							(!v2 || showRowIds) && /* @__PURE__ */ jsx(TableHead, { children: tr("fluidgrids.dataTables.rowId", "Row") }),
+							table.columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+								"aria-sort": v2 && sort?.key === column.key ? sort.direction === 1 ? "ascending" : "descending" : void 0,
+								children: v2 ? /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "inline-flex items-center gap-1 font-medium hover:text-text-primary",
+									onClick: () => toggleSort(column.key),
+									"aria-label": tr("fluidgrids.dataTables.sortBy", "Sort by {{column}}", { column: column.label }),
+									children: [column.label, sort?.key === column.key && /* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										children: sort.direction === 1 ? "▲" : "▼"
+									})]
+								}) : 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: bodyColumnCount,
+								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: bodyColumnCount,
+								className: "py-10 text-center text-text-secondary",
+								children: tr("fluidgrids.dataTables.emptyRows", v2 ? "No rows yet. Add a row or import a spreadsheet (CSV) to get started." : "No rows yet. Add a row or import a CSV to get started.")
+							}) }),
+							v2 && !loading && rows.length > 0 && displayRows.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+								colSpan: bodyColumnCount,
+								className: "py-10 text-center text-text-secondary",
+								children: tr("fluidgrids.dataTables.noRowsMatch", "No rows on this page match your search.")
+							}) }),
+							!loading && displayRows.map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
+								(!v2 || selectMode) && /* @__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")
+								}) }),
+								(!v2 || showRowIds) && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("code", {
+									className: "text-xs text-text-secondary",
+									children: row.id.slice(0, 8)
+								}) }),
+								table.columns.map((column) => {
+									const text = v2 ? formatCell(row.data[column.key], column.type, yesNo) : formatValue(row.data[column.key]);
+									return /* @__PURE__ */ jsx(TableCell, {
+										className: "max-w-[16rem] truncate text-sm",
+										title: text,
+										children: text
+									}, column.key);
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "text-right",
+									children: v2 ? /* @__PURE__ */ jsx(RunActionsMenu, {
+										label: tr("fluidgrids.dataTables.rowActions", "Row actions"),
+										"data-testid": "row-actions-menu",
+										items: [...canEditRows ? [{
+											id: "edit",
+											label: tr("fluidgrids.dataTables.editRow", "Edit row"),
+											icon: "mdi:pencil-outline",
+											onSelect: () => openEditRow(row)
+										}] : [], ...canDeleteRows ? [{
+											id: "delete",
+											label: tr("fluidgrids.dataTables.deleteRow", "Delete row"),
+											icon: "mdi:trash-can-outline",
+											destructive: true,
+											onSelect: () => setPendingRowDelete([row.id])
+										}] : []]
+									}) : /* @__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: [
+								!v2 && /* @__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"
+										})
+									})]
+								})
+							]
+						})]
+					})
+				]
+			}),
+			v2 ? /* @__PURE__ */ jsx(RowFormDialogV2, {
+				open: rowDialogOpen,
+				table,
+				row: editingRow,
+				onOpenChange: setRowDialogOpen,
+				onSaved: async () => {
+					await refetch();
+					onTableChanged();
+				}
+			}) : /* @__PURE__ */ jsx(RowFormDialog, {
+				open: rowDialogOpen,
+				table,
+				row: editingRow,
+				onOpenChange: setRowDialogOpen,
+				onSaved: async () => {
+					await refetch();
+					onTableChanged();
+				}
+			}),
+			v2 && /* @__PURE__ */ jsx(ConfirmActionDialog, {
+				open: pendingRowDelete !== null,
+				onOpenChange: (open) => {
+					if (!open) setPendingRowDelete(null);
+				},
+				title: (pendingRowDelete?.length ?? 0) === 1 ? tr("fluidgrids.dataTables.deleteRowTitle", "Delete this row?") : tr("fluidgrids.dataTables.deleteRowsTitle", "Delete {{count}} rows?", { count: pendingRowDelete?.length ?? 0 }),
+				description: tr("fluidgrids.dataTables.deleteRowsBody", "This permanently removes it from \"{{table}}\". Workflows will no longer find it.", { table: table.name }),
+				confirmLabel: tr("fluidgrids.dataTables.delete", "Delete"),
+				cancelLabel: tr("fluidgrids.dataTables.keep", "Keep"),
+				destructive: true,
+				busy: deleting,
+				onConfirm: () => void confirmRowDelete(),
+				"data-testid": "confirm-delete-rows"
+			})
+		]
+	});
+}
+function DataTablesPage() {
+	const tr = useTr();
+	const v2 = useNavigationV2();
+	const navigate = useNavigate();
+	const createTablePermission = useFluidGridsPermission(FLUIDGRIDS_PERMISSIONS.DATA_TABLE_CREATE);
+	const canCreateTable = createTablePermission.allowed;
+	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 [confirmingDeleteTable, setConfirmingDeleteTable] = useState(false);
+	const newTableRequest = useActionParam(ACTION_PARAM_VALUES.new, createTablePermission);
+	const openCreateTable = useCallback(() => {
+		setEditingTable(null);
+		setTableDialogOpen(true);
+	}, []);
+	useOpenRequest(newTableRequest.requested, openCreateTable, newTableRequest.handled);
+	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 performDeleteTable = useCallback(async () => {
+		if (!selectedTable) 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 handleDeleteTable = useCallback(async () => {
+		if (!selectedTable) return;
+		if (v2) {
+			setConfirmingDeleteTable(true);
+			return;
+		}
+		if (!window.confirm(tr("fluidgrids.dataTables.confirmDeleteTable", `Delete table "${selectedTable.name}" and all of its rows?`))) return;
+		await performDeleteTable();
+	}, [
+		performDeleteTable,
+		selectedTable,
+		tr,
+		v2
+	]);
+	const confirmDeleteTable = useCallback(async () => {
+		await performDeleteTable();
+		setConfirmingDeleteTable(false);
+	}, [performDeleteTable]);
+	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", v2 ? "Data tables" : "Data Tables")
+							}),
+							/* @__PURE__ */ jsx(PagePurpose, {
+								icon: /* @__PURE__ */ jsx(Database, {
+									className: "size-4",
+									"aria-hidden": "true"
+								}),
+								children: tr("fluidgrids.dataTables.pageSubtitle", v2 ? "Keep a simple list your workflows can read and add to, like a small spreadsheet every run can use." : "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", v2 ? "New table" : "New data table")]
+								})
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx(NextSteps, {
+						storageKey: "data-tables",
+						title: tr("fluidgrids.dataTables.nextStepsTitle", v2 ? "How to use data tables" : "How to use Data Tables"),
+						steps: [
+							{
+								id: "create",
+								label: tr("fluidgrids.dataTables.nextStepCreateLabel", "Create a table"),
+								description: tr("fluidgrids.dataTables.nextStepCreateDescription", v2 ? "Name the columns for the information your workflow needs." : "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", v2 ? "Add a Table step to a workflow to read or save rows." : "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", v2 ? "Remember what earlier runs did, for example which emails were already sent." : "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")
+											})]
+										}),
+										v2 ? /* @__PURE__ */ jsx(Disclosure, {
+											closedLabel: tr("fluidgrids.dataTables.moreFilters", "More filters"),
+											openLabel: tr("fluidgrids.dataTables.fewerFilters", "Fewer filters"),
+											defaultOpen: tagFilter !== "",
+											"data-testid": "table-more-filters",
+											children: /* @__PURE__ */ jsx(TagFilterSelect, {
+												value: tagFilter,
+												onChange: setTagFilter,
+												className: "w-full"
+											})
+										}) : /* @__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", v2 ? "Create your first table" : "Create your first Data Table"),
+											description: tr("fluidgrids.dataTables.emptyHint", v2 ? "Give your workflows a shared place to keep records between runs." : "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")
+														]
+													}),
+													(!v2 || tagFilter !== "") && (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: [v2 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", { children: tr("fluidgrids.dataTables.loadFailed", "We couldn't load your tables. Try again in a moment.") }), /* @__PURE__ */ jsx(TechnicalDetails, {
+										className: "mt-2",
+										children: /* @__PURE__ */ jsx("code", {
+											className: "break-words text-xs",
+											children: error.message
+										})
+									})] }) : /* @__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 && !(v2 && tables.length === 0 && tagFilter === "") && /* @__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", v2 ? "Select a table" : "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)
+							})
+						]
+					})
+				]
+			}),
+			v2 ? /* @__PURE__ */ jsx(TableFormDialogV2, {
+				open: tableDialogOpen,
+				table: editingTable,
+				onOpenChange: setTableDialogOpen,
+				onSaved: handleTableSaved
+			}) : /* @__PURE__ */ jsx(TableFormDialog, {
+				open: tableDialogOpen,
+				table: editingTable,
+				onOpenChange: setTableDialogOpen,
+				onSaved: handleTableSaved
+			}),
+			v2 && /* @__PURE__ */ jsx(ConfirmActionDialog, {
+				open: confirmingDeleteTable,
+				onOpenChange: setConfirmingDeleteTable,
+				title: tr("fluidgrids.dataTables.deleteTableTitle", "Delete \"{{name}}\"?", { name: selectedTable?.name ?? "" }),
+				description: tr("fluidgrids.dataTables.deleteTableBody", "This permanently deletes the table and the {{count}} row(s) in it. Workflows that use it will stop working until you point them at another table.", { count: selectedTable?.rowCount ?? 0 }),
+				confirmLabel: tr("fluidgrids.dataTables.delete", "Delete"),
+				cancelLabel: tr("fluidgrids.dataTables.keep", "Keep"),
+				destructive: true,
+				busy: deleting,
+				onConfirm: () => void confirmDeleteTable(),
+				"data-testid": "confirm-delete-table"
+			})
+		]
+	});
+}
+
+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 };