@burdenoff/fluidgrids-fe-sdk 2026.923.4 → 2026.923.5

package/dist/index.js

@@ -31,28 +31,28 @@ export { useActivateWorkflow, useCreateWorkflow, useCreateWorkflowVersion, useDa
 export { config, getFluidGridsConfig, getGraphQLEndpoint, resetFluidGridsConfig, setFluidGridsConfig } from './chunk-WWU2O2SR.js';
 export { useFlowStore } from './chunk-YMD3T6J2.js';
 export { ActivateWorkflowDefinitionDocument, ActiveExecutionsDocument, AvailableFluidgridsTagsDocument, CancelExecutionDocument, CreateFluidgridsTagDocument, CreateWorkflowDefinitionDocument, CreateWorkflowVersionDocument, DashboardSummaryDocument, DeactivateWorkflowDefinitionDocument, DeleteWorkflowDefinitionDocument, DuplicateWorkflowDocument, EventRegistrationsDocument, ExecutionDetailDocument, ExecutionLogsDocument, ExecutionStatsDocument, ExecutionsListDocument, FluidgridsAvailableTagFieldsFragmentDoc, FluidgridsEntityTagsDocument, FluidgridsTagAssignmentFieldsFragmentDoc, ImportWorkflowDocument, ImportWorkflowTemplateDocument, NodeEndpointConfigDocument, NodeEndpointConfigsDocument, NodeManifestDocument, NodeSchemaIntrospectionDocument, NodeStatesDocument, NodeUsageStatusDocument, PauseExecutionDocument, PinNodeDataDocument, RegisterNodeDocument, RemoveNodeFromWorkflowsDocument, ReplaceFluidgridsEntityTagsDocument, RestoreWorkflowVersionDocument, ResumeExecutionDocument, RetryNodeDocument, RunFromNodeDocument, RunLogAppendedDocument, RunLogLineFieldsFragmentDoc, RunLogsDocument, SearchFluidgridsTagsDocument, TagFluidgridsEntityDocument, TerminateExecutionDocument, TriggerWorkflowDocument, UnpinNodeDataDocument, UntagFluidgridsEntityDocument, UpdateWorkflowDefinitionDocument, UsageTimeSeriesDocument, WorkflowDefinitionDocument, WorkflowDefinitionsDocument, WorkflowDefinitionsTagsDocument, WorkflowPinnedDataDocument, WorkflowRunDocument, WorkflowRunsDocument, WorkflowVersionsDocument, useActivateWorkflowDefinitionMutation, useActiveExecutionsLazyQuery, useActiveExecutionsQuery, useActiveExecutionsSuspenseQuery, useAvailableFluidgridsTagsLazyQuery, useAvailableFluidgridsTagsQuery, useAvailableFluidgridsTagsSuspenseQuery, useCancelExecutionMutation, useCreateFluidgridsTagMutation, useCreateWorkflowDefinitionMutation, useCreateWorkflowVersionMutation, useDashboardSummaryLazyQuery, useDashboardSummaryQuery, useDashboardSummarySuspenseQuery, useDeactivateWorkflowDefinitionMutation, useDeleteWorkflowDefinitionMutation, useDuplicateWorkflowMutation, useEventRegistrationsLazyQuery, useEventRegistrationsQuery, useEventRegistrationsSuspenseQuery, useExecutionDetailLazyQuery, useExecutionDetailQuery, useExecutionDetailSuspenseQuery, useExecutionLogsLazyQuery, useExecutionLogsQuery, useExecutionLogsSuspenseQuery, useExecutionStatsLazyQuery, useExecutionStatsQuery, useExecutionStatsSuspenseQuery, useExecutionsListLazyQuery, useExecutionsListQuery, useExecutionsListSuspenseQuery, useFluidgridsEntityTagsLazyQuery, useFluidgridsEntityTagsQuery, useFluidgridsEntityTagsSuspenseQuery, useImportWorkflowMutation, useImportWorkflowTemplateMutation, useNodeEndpointConfigLazyQuery, useNodeEndpointConfigQuery, useNodeEndpointConfigSuspenseQuery, useNodeEndpointConfigsLazyQuery, useNodeEndpointConfigsQuery, useNodeEndpointConfigsSuspenseQuery, useNodeManifestLazyQuery, useNodeManifestQuery, useNodeManifestSuspenseQuery, useNodeSchemaIntrospectionLazyQuery, useNodeSchemaIntrospectionQuery, useNodeSchemaIntrospectionSuspenseQuery, useNodeStatesLazyQuery, useNodeStatesQuery, useNodeStatesSuspenseQuery, useNodeUsageStatusLazyQuery, useNodeUsageStatusQuery, useNodeUsageStatusSuspenseQuery, usePauseExecutionMutation, usePinNodeDataMutation, useRegisterNodeMutation, useRemoveNodeFromWorkflowsMutation, useReplaceFluidgridsEntityTagsMutation, useRestoreWorkflowVersionMutation, useResumeExecutionMutation, useRetryNodeMutation, useRunFromNodeMutation, useRunLogAppendedSubscription, useRunLogsLazyQuery, useRunLogsQuery, useRunLogsSuspenseQuery, useSearchFluidgridsTagsLazyQuery, useSearchFluidgridsTagsQuery, useSearchFluidgridsTagsSuspenseQuery, useTagFluidgridsEntityMutation, useTerminateExecutionMutation, useTriggerWorkflowMutation, useUnpinNodeDataMutation, useUntagFluidgridsEntityMutation, useUpdateWorkflowDefinitionMutation, useUsageTimeSeriesLazyQuery, useUsageTimeSeriesQuery, useUsageTimeSeriesSuspenseQuery, useWorkflowDefinitionLazyQuery, useWorkflowDefinitionQuery, useWorkflowDefinitionSuspenseQuery, useWorkflowDefinitionsLazyQuery, useWorkflowDefinitionsQuery, useWorkflowDefinitionsSuspenseQuery, useWorkflowDefinitionsTagsLazyQuery, useWorkflowDefinitionsTagsQuery, useWorkflowDefinitionsTagsSuspenseQuery, useWorkflowPinnedDataLazyQuery, useWorkflowPinnedDataQuery, useWorkflowPinnedDataSuspenseQuery, useWorkflowRunLazyQuery, useWorkflowRunQuery, useWorkflowRunSuspenseQuery, useWorkflowRunsLazyQuery, useWorkflowRunsQuery, useWorkflowRunsSuspenseQuery, useWorkflowVersionsLazyQuery, useWorkflowVersionsQuery, useWorkflowVersionsSuspenseQuery } from './chunk-UBKJDGYS.js';
-import { throwIfResultError } from './chunk-LMO5ASOE.js';
+import { throwIfResultError, describeOperationError } from './chunk-LMO5ASOE.js';
 export { describeOperationError, throwIfResultError } from './chunk-LMO5ASOE.js';
 import { useTr } from './chunk-7YWBH2A5.js';
 export { ENGLISH_FALLBACK_TRANSLATOR, FluidGridsTranslationProvider, useTr } from './chunk-7YWBH2A5.js';
 import { getFluidGridsClient, createFluidGridsClient } from './chunk-5BDQNSP3.js';
 export { createFluidGridsClient, getFluidGridsClient, getFluidGridsClientSafe, isFluidGridsClientReady, resetFluidGridsClient, setFluidGridsClient, waitForFluidGridsClient } from './chunk-5BDQNSP3.js';
 import * as React4 from 'react';
-import { lazy, Suspense, useMemo, useState, useEffect, useCallback } from 'react';
+import { lazy, Suspense, useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import { Routes, Route, Navigate, useNavigate } from 'react-router';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Icon } from '@iconify/react';
 import { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';
 import '@xyflow/react/dist/style.css';
 import { Button } from '@burdenoff/fe-libs/button';
-import { Tabs, TabsList, TabsTrigger, TabsContent, Card, CardContent, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Badge, CardHeader, Label, Input, Switch, Dialog, DialogContent, DialogHeader, DialogTitle, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DialogFooter, Textarea } from '@burdenoff/fe-libs/ui';
+import { Tabs, TabsList, TabsTrigger, TabsContent, Card, CardContent, CardHeader, CardTitle, Badge, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Label, Switch, CardDescription, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea } from '@burdenoff/fe-libs/ui';
 import { toast } from 'sonner';
 import { gql } from '@apollo/client';
+import { ChevronDown, ChevronUp, Check, ChevronRight, Circle, Database, ArrowLeft, Plus, Search, Table2, RefreshCw, Pencil, Trash2, ArrowUpFromLine, ArrowDownToLine } from 'lucide-react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown, ChevronUp, Check, ChevronRight, Circle } from 'lucide-react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -1581,6 +1581,1413 @@ function ApprovalInboxPage() {
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: items.map((request) => /* @__PURE__ */ jsx(RequestCard, { request, onDecided: refetch }, request.id)) })
   ] });
 }
+var DATA_TABLE_FIELDS = gql`
+  fragment DataTableFields on DataTable {
+    id
+    workspaceId
+    name
+    description
+    columns {
+      key
+      label
+      type
+      required
+      defaultValue
+    }
+    rowCount
+    sizeBytes
+    createdAt
+    updatedAt
+    createdBy
+    updatedBy
+  }
+`;
+var DATA_TABLE_ROW_FIELDS = gql`
+  fragment DataTableRowFields on DataTableRow {
+    id
+    tableId
+    data
+    createdAt
+    updatedAt
+  }
+`;
+var 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
+    }
+  }
+`;
+var GET_DATA_TABLE_ROWS = gql`
+  ${DATA_TABLE_ROW_FIELDS}
+  query GetDataTableRows($input: DataTableRowsQueryInput!) {
+    dataTableRows(input: $input) {
+      rows {
+        ...DataTableRowFields
+      }
+      total
+    }
+  }
+`;
+var CREATE_DATA_TABLE = gql`
+  ${DATA_TABLE_FIELDS}
+  mutation CreateDataTable($input: CreateDataTableInput!) {
+    createDataTable(input: $input) {
+      success
+      message
+      table {
+        ...DataTableFields
+      }
+    }
+  }
+`;
+var UPDATE_DATA_TABLE = gql`
+  ${DATA_TABLE_FIELDS}
+  mutation UpdateDataTable($id: ID!, $input: UpdateDataTableInput!) {
+    updateDataTable(id: $id, input: $input) {
+      success
+      message
+      table {
+        ...DataTableFields
+      }
+    }
+  }
+`;
+var DELETE_DATA_TABLE = gql`
+  mutation DeleteDataTable($id: ID!) {
+    deleteDataTable(id: $id) {
+      success
+      message
+    }
+  }
+`;
+var INSERT_DATA_TABLE_ROW = gql`
+  ${DATA_TABLE_ROW_FIELDS}
+  mutation InsertDataTableRow($tableId: ID!, $data: JSON!) {
+    insertDataTableRow(tableId: $tableId, data: $data) {
+      success
+      message
+      row {
+        ...DataTableRowFields
+      }
+    }
+  }
+`;
+var UPDATE_DATA_TABLE_ROW = gql`
+  ${DATA_TABLE_ROW_FIELDS}
+  mutation UpdateDataTableRow($id: ID!, $data: JSON!) {
+    updateDataTableRow(id: $id, data: $data) {
+      success
+      message
+      row {
+        ...DataTableRowFields
+      }
+    }
+  }
+`;
+var 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));
+}
+function useDataTables(search) {
+  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: GET_DATA_TABLES,
+          variables: {
+            search: search?.trim() || void 0,
+            limit: 200,
+            offset: 0
+          },
+          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]);
+  useEffect(() => {
+    void fetchTables();
+  }, [fetchTables]);
+  return { tables, total, loading, error, refetch: fetchTables };
+}
+function useDataTableRows(tableId) {
+  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 result = throwIfResultError(
+        await getFluidGridsClient().query({
+          query: GET_DATA_TABLE_ROWS,
+          variables: { input: { tableId, limit: 5e3, offset: 0 } },
+          fetchPolicy: "network-only"
+        })
+      );
+      const response = result.data?.dataTableRows;
+      setRows(response?.rows.map(toRow) ?? []);
+      setTotal(response?.total ?? 0);
+    } catch (err) {
+      setError(operationError(err, "Failed to load data table rows"));
+    } finally {
+      setLoading(false);
+    }
+  }, [tableId]);
+  useEffect(() => {
+    void fetchRows();
+  }, [fetchRows]);
+  return { rows, total, loading, error, refetch: fetchRows };
+}
+function useCreateDataTable() {
+  const [loading, setLoading] = useState(false);
+  const createDataTable = useCallback(async (input) => {
+    setLoading(true);
+    try {
+      const result = throwIfResultError(
+        await getFluidGridsClient().mutate({ mutation: CREATE_DATA_TABLE, variables: { input } })
+      );
+      const response = result.data?.createDataTable;
+      if (!response?.success) {
+        throw new Error(response?.message || "Failed to create data table");
+      }
+      return response.table ?? null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  return { createDataTable, loading };
+}
+function useUpdateDataTable() {
+  const [loading, setLoading] = useState(false);
+  const updateDataTable = useCallback(
+    async (id, input) => {
+      setLoading(true);
+      try {
+        const result = throwIfResultError(
+          await getFluidGridsClient().mutate({ mutation: UPDATE_DATA_TABLE, variables: { id, input } })
+        );
+        const response = result.data?.updateDataTable;
+        if (!response?.success) {
+          throw new Error(response?.message || "Failed to update data table");
+        }
+        return response.table ?? null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+  return { updateDataTable, loading };
+}
+function useDeleteDataTable() {
+  const [loading, setLoading] = useState(false);
+  const deleteDataTable = useCallback(async (id) => {
+    setLoading(true);
+    try {
+      const result = throwIfResultError(
+        await getFluidGridsClient().mutate({ mutation: DELETE_DATA_TABLE, variables: { id } })
+      );
+      const response = result.data?.deleteDataTable;
+      if (!response?.success) {
+        throw new Error(response?.message || "Failed to delete data table");
+      }
+      return true;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  return { deleteDataTable, loading };
+}
+function useInsertDataTableRow() {
+  const [loading, setLoading] = useState(false);
+  const insertDataTableRow = useCallback(
+    async (tableId, data) => {
+      setLoading(true);
+      try {
+        const result = throwIfResultError(
+          await getFluidGridsClient().mutate({
+            mutation: INSERT_DATA_TABLE_ROW,
+            variables: { tableId, data }
+          })
+        );
+        const response = result.data?.insertDataTableRow;
+        if (!response?.success) {
+          throw new Error(response?.message || "Failed to insert row");
+        }
+        return response.row ? toRow(response.row) : null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+  return { insertDataTableRow, loading };
+}
+function useUpdateDataTableRow() {
+  const [loading, setLoading] = useState(false);
+  const updateDataTableRow = useCallback(
+    async (id, data) => {
+      setLoading(true);
+      try {
+        const result = throwIfResultError(
+          await getFluidGridsClient().mutate({ mutation: UPDATE_DATA_TABLE_ROW, variables: { id, data } })
+        );
+        const response = result.data?.updateDataTableRow;
+        if (!response?.success) {
+          throw new Error(response?.message || "Failed to update row");
+        }
+        return response.row ? toRow(response.row) : null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+  return { updateDataTableRow, loading };
+}
+function useDeleteDataTableRows() {
+  const [loading, setLoading] = useState(false);
+  const deleteDataTableRows = useCallback(
+    async (tableId, ids) => {
+      setLoading(true);
+      try {
+        const result = throwIfResultError(
+          await getFluidGridsClient().mutate({
+            mutation: DELETE_DATA_TABLE_ROWS,
+            variables: { tableId, ids }
+          })
+        );
+        const response = result.data?.deleteDataTableRows;
+        if (!response?.success) {
+          throw new Error(response?.message || "Failed to delete rows");
+        }
+        return response.affected;
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+  return { deleteDataTableRows, loading };
+}
+
+// src/modules/data-tables/utils/csv.ts
+function parseCsv(text) {
+  const rows = [];
+  let row = [];
+  let cell = "";
+  let quoted = false;
+  for (let index = 0; index < text.length; index += 1) {
+    const character = text[index];
+    const next = text[index + 1];
+    if (quoted) {
+      if (character === '"' && next === '"') {
+        cell += '"';
+        index += 1;
+      } else if (character === '"') {
+        quoted = false;
+      } else {
+        cell += character;
+      }
+      continue;
+    }
+    if (character === '"' && cell.length === 0) {
+      quoted = true;
+    } else if (character === ",") {
+      row.push(cell);
+      cell = "";
+    } else if (character === "\n" || character === "\r") {
+      if (character === "\r" && next === "\n") index += 1;
+      row.push(cell);
+      cell = "";
+      if (row.some((value) => value.length > 0)) rows.push(row);
+      row = [];
+    } else {
+      cell += character;
+    }
+  }
+  if (quoted) {
+    throw new Error("CSV contains an unterminated quoted value");
+  }
+  if (cell.length > 0 || row.length > 0) {
+    row.push(cell);
+    if (row.some((value) => value.length > 0)) rows.push(row);
+  }
+  return rows;
+}
+function parseValue(value, type) {
+  if (value === "") {
+    return type === "STRING" ? "" : null;
+  }
+  switch (type) {
+    case "NUMBER": {
+      const parsed = Number(value);
+      if (!Number.isFinite(parsed))
+        throw new Error(`Expected a number, got "${value}"`);
+      return parsed;
+    }
+    case "BOOLEAN": {
+      const normalized = value.trim().toLowerCase();
+      if (normalized === "true") return true;
+      if (normalized === "false") return false;
+      throw new Error(`Expected true or false, got "${value}"`);
+    }
+    case "JSON":
+      try {
+        return JSON.parse(value);
+      } catch {
+        throw new Error(`Expected valid JSON, got "${value}"`);
+      }
+    case "DATE":
+    case "STRING":
+      return value;
+  }
+}
+function csvToRows(text, columns) {
+  const parsed = parseCsv(text);
+  if (parsed.length < 2) return [];
+  const headers = parsed[0].map((header) => header.trim());
+  const columnByKey = new Map(columns.map((column) => [column.key, column]));
+  const seen = /* @__PURE__ */ new Set();
+  for (const header of headers) {
+    if (!header || seen.has(header)) {
+      throw new Error("CSV must have unique, non-empty column headers");
+    }
+    if (!columnByKey.has(header)) {
+      throw new Error(`CSV contains an unknown column "${header}"`);
+    }
+    seen.add(header);
+  }
+  return parsed.slice(1).map((values, rowIndex) => {
+    const row = {};
+    headers.forEach((header, columnIndex) => {
+      const column = columnByKey.get(header);
+      if (!column) return;
+      const rawValue = values[columnIndex] ?? "";
+      try {
+        row[header] = parseValue(rawValue, column.type);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Invalid value";
+        throw new Error(`Row ${rowIndex + 2}, ${column.label}: ${message}`);
+      }
+    });
+    return row;
+  });
+}
+function csvCell(value) {
+  if (value === null || value === void 0) return "";
+  const text = typeof value === "object" ? JSON.stringify(value) : String(value);
+  return /[",\r\n]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
+}
+function rowsToCsv(columns, rows) {
+  const header = columns.map((column) => csvCell(column.key)).join(",");
+  const values = rows.map(
+    (row) => columns.map((column) => csvCell(row.data[column.key])).join(",")
+  );
+  return [header, ...values].join("\r\n");
+}
+var COLUMN_TYPES = [
+  "STRING",
+  "NUMBER",
+  "BOOLEAN",
+  "DATE",
+  "JSON"
+];
+function emptyColumn(index) {
+  return {
+    key: `column_${index}`,
+    label: `Column ${index}`,
+    type: "STRING",
+    required: false
+  };
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function formatValue(value) {
+  if (value === null || value === void 0) return "\u2014";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function columnTypeLabel(type) {
+  return type === "JSON" ? "JSON" : type[0] + type.slice(1).toLowerCase();
+}
+function asFormValue(value, type) {
+  if (value === null || value === void 0) return "";
+  if (type === "JSON") return JSON.stringify(value, null, 2);
+  return String(value);
+}
+function parseFormValue(value, type) {
+  if (type === "STRING" || type === "DATE") return value;
+  if (value.trim() === "") return null;
+  if (type === "NUMBER") {
+    const number = Number(value);
+    if (!Number.isFinite(number)) throw new Error(`"${value}" is not a number`);
+    return number;
+  }
+  if (type === "BOOLEAN") {
+    if (value === "true") return true;
+    if (value === "false") return false;
+    throw new Error("Boolean values must be true or false");
+  }
+  try {
+    return JSON.parse(value);
+  } catch {
+    throw new Error("JSON values must contain valid JSON");
+  }
+}
+function TableFormDialog({
+  open,
+  table,
+  onOpenChange,
+  onSaved
+}) {
+  const tr = useTr();
+  const { createDataTable, loading: creating } = useCreateDataTable();
+  const { updateDataTable, loading: updating } = useUpdateDataTable();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [columns, setColumns] = useState([]);
+  const editing = table !== null;
+  const saving = creating || updating;
+  useEffect(() => {
+    if (!open) return;
+    setName(table?.name ?? "");
+    setDescription(table?.description ?? "");
+    setColumns(
+      table?.columns.map((column) => ({
+        key: column.key,
+        label: column.label,
+        type: column.type,
+        required: column.required,
+        ...column.defaultValue !== void 0 ? { defaultValue: column.defaultValue } : {}
+      })) ?? [emptyColumn(1)]
+    );
+  }, [open, table]);
+  const updateColumn = useCallback(
+    (index, patch) => {
+      setColumns(
+        (current) => current.map(
+          (column, columnIndex) => columnIndex === index ? { ...column, ...patch } : column
+        )
+      );
+    },
+    []
+  );
+  const handleSubmit = useCallback(async () => {
+    const trimmedName = name.trim();
+    if (!trimmedName) {
+      toast.error(
+        tr("fluidgrids.dataTables.nameRequired", "Table name is required")
+      );
+      return;
+    }
+    if (columns.length === 0 || columns.some((column) => !column.key.trim() || !column.label.trim())) {
+      toast.error(
+        tr(
+          "fluidgrids.dataTables.columnsRequired",
+          "Add at least one column with a key and label"
+        )
+      );
+      return;
+    }
+    const normalizedColumns = columns.map((column) => ({
+      ...column,
+      key: column.key.trim(),
+      label: column.label.trim()
+    }));
+    const keys = new Set(normalizedColumns.map((column) => column.key));
+    if (keys.size !== normalizedColumns.length) {
+      toast.error(
+        tr("fluidgrids.dataTables.uniqueKeys", "Column keys must be unique")
+      );
+      return;
+    }
+    try {
+      const saved = editing ? await updateDataTable(table.id, {
+        name: trimmedName,
+        description: description.trim() || void 0,
+        columns: normalizedColumns
+      }) : await createDataTable({
+        name: trimmedName,
+        description: description.trim() || void 0,
+        columns: normalizedColumns
+      });
+      toast.success(
+        editing ? tr("fluidgrids.dataTables.updated", "Data table updated") : tr("fluidgrids.dataTables.created", "Data table created")
+      );
+      onSaved(saved);
+      onOpenChange(false);
+    } catch (error) {
+      toast.error(
+        describeOperationError(
+          error,
+          tr("fluidgrids.dataTables.saveFailed", "Failed to save data table")
+        )
+      );
+    }
+  }, [
+    columns,
+    createDataTable,
+    description,
+    editing,
+    name,
+    onOpenChange,
+    onSaved,
+    table,
+    tr,
+    updateDataTable
+  ]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] max-w-3xl overflow-y-auto", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: editing ? tr("fluidgrids.dataTables.editTable", "Edit data table") : tr("fluidgrids.dataTables.newTable", "New data table") }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-5 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "data-table-name", children: tr("fluidgrids.dataTables.name", "Name") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "data-table-name",
+              value: name,
+              onChange: (event) => setName(event.target.value),
+              placeholder: "contacts",
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "data-table-description", children: tr("fluidgrids.dataTables.description", "Description") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "data-table-description",
+              value: description,
+              onChange: (event) => setDescription(event.target.value),
+              placeholder: tr(
+                "fluidgrids.dataTables.descriptionPlaceholder",
+                "Optional"
+              )
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-text-primary", children: tr("fluidgrids.dataTables.columns", "Columns") }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: tr(
+              "fluidgrids.dataTables.columnsHint",
+              "Column keys are used by workflow nodes and must be unique."
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: () => setColumns((current) => [
+                ...current,
+                emptyColumn(current.length + 1)
+              ]),
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+                tr("fluidgrids.dataTables.addColumn", "Add column")
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: columns.map((column, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "grid gap-2 rounded-md border border-border-secondary p-3 sm:grid-cols-[1fr_1fr_8rem_auto] sm:items-end",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: `data-table-column-key-${index}`, children: tr("fluidgrids.dataTables.key", "Key") }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: `data-table-column-key-${index}`,
+                    value: column.key,
+                    onChange: (event) => updateColumn(index, { key: event.target.value })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: `data-table-column-label-${index}`, children: tr("fluidgrids.dataTables.label", "Label") }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: `data-table-column-label-${index}`,
+                    value: column.label,
+                    onChange: (event) => updateColumn(index, { label: event.target.value })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: `data-table-column-type-${index}`, children: tr("fluidgrids.dataTables.type", "Type") }),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    id: `data-table-column-type-${index}`,
+                    className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-text-primary",
+                    value: column.type,
+                    onChange: (event) => updateColumn(index, {
+                      type: event.target.value
+                    }),
+                    children: COLUMN_TYPES.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: columnTypeLabel(type) }, type))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2 sm:flex-col sm:items-center sm:gap-1", children: [
+                /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-xs text-text-secondary", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: column.required ?? false,
+                      onChange: (event) => updateColumn(index, {
+                        required: event.target.checked
+                      })
+                    }
+                  ),
+                  tr("fluidgrids.dataTables.required", "Required")
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rounded p-1 text-text-secondary hover:bg-background-tertiary hover:text-text-primary disabled:opacity-40",
+                    onClick: () => setColumns(
+                      (current) => current.filter(
+                        (_, columnIndex) => columnIndex !== index
+                      )
+                    ),
+                    disabled: columns.length === 1,
+                    title: tr(
+                      "fluidgrids.dataTables.removeColumn",
+                      "Remove column"
+                    ),
+                    "aria-label": tr(
+                      "fluidgrids.dataTables.removeColumn",
+                      "Remove column"
+                    ),
+                    children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
+                  }
+                )
+              ] })
+            ]
+          },
+          `${column.key}-${index}`
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: tr("fluidgrids.dataTables.cancel", "Cancel") }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, disabled: saving, children: saving ? tr("fluidgrids.dataTables.saving", "Saving\u2026") : 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,
+          " \xB7 ",
+          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, { variant: "outline", onClick: () => onOpenChange(false), children: tr("fluidgrids.dataTables.cancel", "Cancel") }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, disabled: saving || !table, children: saving ? tr("fluidgrids.dataTables.saving", "Saving\u2026") : tr("fluidgrids.dataTables.saveRow", "Save row") })
+    ] })
+  ] }) });
+}
+function TableRowsPanel({ table, onTableChanged }) {
+  const tr = useTr();
+  const { rows, total, loading, error, refetch } = useDataTableRows(table.id);
+  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 fileInputRef = useRef(null);
+  useEffect(() => {
+    setSelectedIds((current) => {
+      const visible = new Set(rows.map((row) => row.id));
+      return new Set([...current].filter((id) => visible.has(id)));
+    });
+  }, [rows]);
+  const allVisibleSelected = rows.length > 0 && selectedIds.size === rows.length;
+  const toggleAll = useCallback(() => {
+    setSelectedIds(
+      allVisibleSelected ? /* @__PURE__ */ new Set() : new Set(rows.map((row) => row.id))
+    );
+  }, [allVisibleSelected, rows]);
+  const handleDeleteRows = useCallback(async () => {
+    if (selectedIds.size === 0) return;
+    if (!window.confirm(
+      tr(
+        "fluidgrids.dataTables.confirmDeleteRows",
+        `Delete ${selectedIds.size} selected row(s)?`
+      )
+    )) {
+      return;
+    }
+    try {
+      const affected = await deleteDataTableRows(table.id, [...selectedIds]);
+      toast.success(
+        tr("fluidgrids.dataTables.rowsDeleted", `${affected} row(s) deleted`)
+      );
+      setSelectedIds(/* @__PURE__ */ new Set());
+      await refetch();
+      onTableChanged();
+    } catch (error2) {
+      toast.error(
+        describeOperationError(
+          error2,
+          tr("fluidgrids.dataTables.deleteRowsFailed", "Failed to delete rows")
+        )
+      );
+    }
+  }, [deleteDataTableRows, onTableChanged, refetch, selectedIds, table.id, tr]);
+  const handleExport = useCallback(() => {
+    const csv = rowsToCsv(table.columns, rows);
+    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", "Visible rows exported to CSV")
+    );
+  }, [rows, table.columns, table.name, tr]);
+  const handleImport = useCallback(
+    async (event) => {
+      const file = event.target.files?.[0];
+      event.target.value = "";
+      if (!file) return;
+      try {
+        const importedRows = csvToRows(await file.text(), table.columns);
+        let inserted = 0;
+        for (const data of importedRows) {
+          await insertDataTableRow(table.id, data);
+          inserted += 1;
+        }
+        toast.success(
+          tr("fluidgrids.dataTables.imported", `${inserted} row(s) imported`)
+        );
+        await refetch();
+        onTableChanged();
+      } catch (error2) {
+        toast.error(
+          describeOperationError(
+            error2,
+            tr("fluidgrids.dataTables.importFailed", "Failed to import CSV")
+          )
+        );
+      }
+    },
+    [insertDataTableRow, onTableChanged, refetch, table.columns, table.id, tr]
+  );
+  const openNewRow = useCallback(() => {
+    setEditingRow(null);
+    setRowDialogOpen(true);
+  }, []);
+  const openEditRow = useCallback((row) => {
+    setEditingRow(row);
+    setRowDialogOpen(true);
+  }, []);
+  return /* @__PURE__ */ jsxs(Card, { className: "min-w-0 border-border-secondary", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-3 border-b border-border-secondary p-4 sm:p-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-lg", children: [
+            /* @__PURE__ */ jsx(
+              Table2,
+              {
+                className: "size-5 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 flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: openNewRow, children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+            tr("fluidgrids.dataTables.addRow", "Add row")
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => fileInputRef.current?.click(),
+              children: [
+                /* @__PURE__ */ jsx(ArrowUpFromLine, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+                tr("fluidgrids.dataTables.import", "Import CSV")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: ".csv,text/csv",
+              className: "hidden",
+              onChange: handleImport
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleExport,
+              disabled: rows.length === 0,
+              children: [
+                /* @__PURE__ */ jsx(ArrowDownToLine, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+                tr("fluidgrids.dataTables.export", "Export CSV")
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__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__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handleDeleteRows,
+            disabled: deleting,
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+              deleting ? tr("fluidgrids.dataTables.deleting", "Deleting\u2026") : tr(
+                "fluidgrids.dataTables.deleteSelected",
+                `Delete ${selectedIds.size} selected`
+              )
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
+      error && /* @__PURE__ */ jsx("div", { className: "m-4 rounded-md border border-border-secondary bg-background-secondary p-3 text-sm text-text-secondary", children: error.message }),
+      /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: allVisibleSelected,
+              onChange: toggleAll,
+              "aria-label": tr(
+                "fluidgrids.dataTables.selectAll",
+                "Select all rows"
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TableHead, { children: tr("fluidgrids.dataTables.rowId", "Row") }),
+          table.columns.map((column) => /* @__PURE__ */ jsx(TableHead, { children: column.label }, column.key)),
+          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: tr("fluidgrids.dataTables.actions", "Actions") })
+        ] }) }),
+        /* @__PURE__ */ jsxs(TableBody, { children: [
+          loading && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              colSpan: table.columns.length + 3,
+              className: "py-10 text-center text-text-secondary",
+              children: tr("fluidgrids.dataTables.loadingRows", "Loading rows\u2026")
+            }
+          ) }),
+          !loading && rows.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              colSpan: table.columns.length + 3,
+              className: "py-10 text-center text-text-secondary",
+              children: tr(
+                "fluidgrids.dataTables.emptyRows",
+                "No rows yet. Add a row or import a CSV to get started."
+              )
+            }
+          ) }),
+          !loading && rows.map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: selectedIds.has(row.id),
+                onChange: () => setSelectedIds((current) => {
+                  const next = new Set(current);
+                  if (next.has(row.id)) next.delete(row.id);
+                  else next.add(row.id);
+                  return next;
+                }),
+                "aria-label": tr(
+                  "fluidgrids.dataTables.selectRow",
+                  "Select row"
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("code", { className: "text-xs text-text-secondary", children: row.id.slice(0, 8) }) }),
+            table.columns.map((column) => /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: "max-w-[16rem] truncate text-sm",
+                title: formatValue(row.data[column.key]),
+                children: formatValue(row.data[column.key])
+              },
+              column.key
+            )),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                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 > rows.length && !loading && /* @__PURE__ */ jsx("p", { className: "border-t border-border-secondary px-4 py-3 text-xs text-text-secondary", children: tr(
+        "fluidgrids.dataTables.rowLimitNote",
+        "Showing the first 5,000 rows. Use workflow filters for larger tables."
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      RowFormDialog,
+      {
+        open: rowDialogOpen,
+        table,
+        row: editingRow,
+        onOpenChange: setRowDialogOpen,
+        onSaved: async () => {
+          await refetch();
+          onTableChanged();
+        }
+      }
+    )
+  ] });
+}
+function DataTablesPage() {
+  const tr = useTr();
+  const navigate = useNavigate();
+  const [searchInput, setSearchInput] = useState("");
+  const [search, setSearch] = useState("");
+  const { tables, total, loading, error, refetch } = useDataTables(search);
+  const { deleteDataTable, loading: deleting } = useDeleteDataTable();
+  const [selectedId, setSelectedId] = useState(null);
+  const [tableDialogOpen, setTableDialogOpen] = useState(false);
+  const [editingTable, setEditingTable] = useState(null);
+  const selectedTable = useMemo(
+    () => tables.find((table) => table.id === selectedId) ?? null,
+    [selectedId, tables]
+  );
+  useEffect(() => {
+    if (tables.length === 0) {
+      setSelectedId(null);
+      return;
+    }
+    if (!selectedId || !tables.some((table) => table.id === selectedId)) {
+      setSelectedId(tables[0].id);
+    }
+  }, [selectedId, tables]);
+  const refresh = useCallback(async () => {
+    await refetch();
+  }, [refetch]);
+  const handleDeleteTable = useCallback(async () => {
+    if (!selectedTable) return;
+    if (!window.confirm(
+      tr(
+        "fluidgrids.dataTables.confirmDeleteTable",
+        `Delete table "${selectedTable.name}" and all of its rows?`
+      )
+    )) {
+      return;
+    }
+    try {
+      await deleteDataTable(selectedTable.id);
+      toast.success(tr("fluidgrids.dataTables.deleted", "Data table deleted"));
+      setSelectedId(null);
+      await refetch();
+    } catch (error2) {
+      toast.error(
+        describeOperationError(
+          error2,
+          tr(
+            "fluidgrids.dataTables.deleteFailed",
+            "Failed to delete data table"
+          )
+        )
+      );
+    }
+  }, [deleteDataTable, refetch, selectedTable, tr]);
+  const handleTableSaved = useCallback(
+    (table) => {
+      if (table) setSelectedId(table.id);
+      void refetch();
+    },
+    [refetch]
+  );
+  const submitSearch = useCallback(
+    (event) => {
+      event.preventDefault();
+      setSearch(searchInput);
+    },
+    [searchInput]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-background-primary p-4 sm:p-6", 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", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 text-sm text-text-secondary", children: [
+            /* @__PURE__ */ jsx(Database, { className: "size-4", "aria-hidden": "true" }),
+            tr("fluidgrids.dataTables.workflowData", "Workflow data")
+          ] }),
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-text-primary sm:text-3xl", children: tr("fluidgrids.dataTables.pageTitle", "Data Tables") }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-2xl text-text-secondary", children: tr(
+            "fluidgrids.dataTables.pageSubtitle",
+            "Store structured workspace data that your workflows can read and write across runs."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsxs(Button, { 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__ */ jsxs(
+            Button,
+            {
+              onClick: () => {
+                setEditingTable(null);
+                setTableDialogOpen(true);
+              },
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }),
+                tr("fluidgrids.dataTables.newTable", "New data table")
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg:grid-cols-[minmax(16rem,22rem)_minmax(0,1fr)]", children: [
+        /* @__PURE__ */ jsxs(Card, { className: "h-fit border-border-secondary", 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, { type: "submit", variant: "outline", size: "sm", children: tr("fluidgrids.dataTables.searchAction", "Search") })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "p-2", children: [
+            loading && /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-text-secondary", children: tr("fluidgrids.dataTables.loading", "Loading tables\u2026") }),
+            !loading && tables.length === 0 && /* @__PURE__ */ jsxs("div", { className: "p-4 text-sm text-text-secondary", children: [
+              /* @__PURE__ */ jsx("p", { children: tr("fluidgrids.dataTables.empty", "No data tables yet") }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", children: tr(
+                "fluidgrids.dataTables.emptyHint",
+                "Create a table to give your workflows a shared data store."
+              ) })
+            ] }),
+            !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"),
+                      " \xB7",
+                      " ",
+                      table.columns.length,
+                      " ",
+                      tr("fluidgrids.dataTables.columns", "columns")
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Table2,
+                    {
+                      className: "mt-0.5 size-4 shrink-0",
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              },
+              table.id
+            ))
+          ] })
+        ] }),
+        error && !selectedTable && /* @__PURE__ */ jsx(Card, { className: "border-border-secondary", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 text-sm text-text-secondary", children: [
+          /* @__PURE__ */ jsx("p", { children: error.message }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "mt-4",
+              variant: "outline",
+              onClick: () => void refresh(),
+              children: [
+                /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 size-4", "aria-hidden": "true" }),
+                tr("fluidgrids.dataTables.retry", "Try again")
+              ]
+            }
+          )
+        ] }) }),
+        !error && !selectedTable && !loading && /* @__PURE__ */ jsx(Card, { className: "border-border-secondary", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex min-h-[22rem] flex-col items-center justify-center p-6 text-center", children: [
+          /* @__PURE__ */ jsx(
+            Database,
+            {
+              className: "mb-3 size-10 text-text-secondary",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-text-primary", children: tr(
+            "fluidgrids.dataTables.selectTitle",
+            "Select a data table"
+          ) }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-sm text-sm text-text-secondary", children: tr(
+            "fluidgrids.dataTables.selectDescription",
+            "Choose a table to view and edit its rows, or create your first table."
+          ) })
+        ] }) }),
+        selectedTable && /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => {
+                  setEditingTable(selectedTable);
+                  setTableDialogOpen(true);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Pencil, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+                  tr("fluidgrids.dataTables.editTable", "Edit table")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: handleDeleteTable,
+                disabled: deleting,
+                children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+                  deleting ? tr("fluidgrids.dataTables.deleting", "Deleting\u2026") : tr("fluidgrids.dataTables.deleteTable", "Delete table")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(TableRowsPanel, { table: selectedTable, onTableChanged: refresh })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      TableFormDialog,
+      {
+        open: tableDialogOpen,
+        table: editingTable,
+        onOpenChange: setTableDialogOpen,
+        onSaved: handleTableSaved
+      }
+    )
+  ] });
+}
 
 // src/graphql/client-helpers.ts
 function createFluidGridsClients(config2) {
@@ -1644,7 +3051,7 @@ var NODE_STATUS_CONFIG = {
   error: { label: "Error", color: "text-red-600", bgColor: "bg-red-100" },
   skipped: { label: "Skipped", color: "text-gray-400", bgColor: "bg-gray-50" }
 };
-var Textarea2 = React4.forwardRef(
+var Textarea3 = React4.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -1659,7 +3066,7 @@ var Textarea2 = React4.forwardRef(
     );
   }
 );
-Textarea2.displayName = "Textarea";
+Textarea3.displayName = "Textarea";
 function Tabs2({
   className,
   ...props
@@ -2080,6 +3487,6 @@ var PopoverContent = React4.forwardRef(({ className, align = "center", sideOffse
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { ApprovalInboxPage, Checkbox, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FluidGridsRoot, NODE_STATUS_CONFIG, Popover, PopoverContent, PopoverTrigger, RUN_STATUS_CONFIG, ScrollArea, ScrollBar, Select2 as Select, SelectContent2 as SelectContent, SelectGroup, SelectItem2 as SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger2 as SelectTrigger, SelectValue2 as SelectValue, Separator, Switch2 as Switch, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Textarea2 as Textarea, VariablesPage, WorkflowEmbedPage, createFluidGridsClients, useCreateVariable, useDecideToolApproval, useDeleteVariable, usePendingToolApprovals, useRevealVariableValue, useSaveSecretsProviderConfig, useSecretsProviderConfigs, useTestSecretsProviderConnection, useUpdateVariable, useVariables };
+export { ApprovalInboxPage, Checkbox, DataTablesPage, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FluidGridsRoot, NODE_STATUS_CONFIG, Popover, PopoverContent, PopoverTrigger, RUN_STATUS_CONFIG, ScrollArea, ScrollBar, Select2 as Select, SelectContent2 as SelectContent, SelectGroup, SelectItem2 as SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger2 as SelectTrigger, SelectValue2 as SelectValue, Separator, Switch2 as Switch, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Textarea3 as Textarea, VariablesPage, WorkflowEmbedPage, createFluidGridsClients, csvToRows, parseCsv, rowsToCsv, useCreateDataTable, useCreateVariable, useDataTableRows, useDataTables, useDecideToolApproval, useDeleteDataTable, useDeleteDataTableRows, useDeleteVariable, useInsertDataTableRow, usePendingToolApprovals, useRevealVariableValue, useSaveSecretsProviderConfig, useSecretsProviderConfigs, useTestSecretsProviderConnection, useUpdateDataTable, useUpdateDataTableRow, useUpdateVariable, useVariables };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map